diff --git a/docs/css/custom.css b/docs/css/custom.css
index 44236ba..09a7b48 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -89,4 +89,26 @@
       @apply max-md:ml-10 min-h-8 flex items-center;
     }
   }
+}
+
+/* Search dialog - larger size for search results */
+#site-search > .command {
+  @apply sm:max-w-xl;
+}
+#site-search [role="menu"] {
+  @apply p-2 max-h-[500px];
+}
+
+/* Search results */
+.search-result {
+  @apply flex flex-col items-start gap-0.5 py-2 whitespace-normal overflow-visible text-wrap;
+}
+.search-result-title {
+  @apply font-medium text-foreground truncate;
+}
+.search-result-excerpt {
+  @apply text-sm text-muted-foreground line-clamp-2;
+}
+.search-result-excerpt mark {
+  @apply bg-yellow-200/60 dark:bg-yellow-500/30 text-inherit rounded-sm px-0.5;
 }
\ No newline at end of file
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index d93d3c5..38a0cc0 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -77,6 +77,7 @@
   <script src="/assets/js/sidebar.js" defer></script>
   <script src="/assets/js/tabs.js" defer></script>
   <script src="/assets/js/toast.js" defer></script>
+  <script src="/assets/js/pagefind-search.js" defer></script>
   {# HTMX #}
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   {# Highlight.js #}
diff --git a/docs/src/_includes/layouts/layout.njk b/docs/src/_includes/layouts/layout.njk
index b4f103a..4c3cf40 100644
--- a/docs/src/_includes/layouts/layout.njk
+++ b/docs/src/_includes/layouts/layout.njk
@@ -5,11 +5,11 @@ layout: layouts/base.njk
 {% include "partials/sidebar.njk" %}
 
 <main id="content">
-  <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
+  <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10" data-pagefind-ignore>
     {% include "partials/header.njk" %}
   </header>
 
-  <div class="p-4 md:p-6 xl:p-12">
+  <div class="p-4 md:p-6 xl:p-12" data-pagefind-body>
     {{ content | safe }}
   </div>
 </main>
\ No newline at end of file
diff --git a/docs/src/_includes/partials/header.njk b/docs/src/_includes/partials/header.njk
index c9884bd..4df2a4e 100644
--- a/docs/src/_includes/partials/header.njk
+++ b/docs/src/_includes/partials/header.njk
@@ -1,3 +1,5 @@
+{% from "command.njk" import command_dialog %}
+
 <div class="flex h-14 w-full items-center gap-2 px-4">
   <button
     type="button"
@@ -6,10 +8,27 @@
     data-tooltip="Toggle sidebar"
     data-side="bottom"
     data-align="start"
-    class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
+    class="btn-sm-icon-ghost size-7 -ml-1.5"
   >
     {% lucide "panel-left" %}
   </button>
+  <button
+    type="button"
+    onclick="document.getElementById('site-search').showModal(); document.getElementById('site-search-input').focus();"
+    class="btn-outline h-8 px-3 gap-2 text-muted-foreground font-normal mr-auto hidden sm:flex"
+  >
+    {% lucide "search", { "class": "size-4" } %}
+    <span>Search docs...</span>
+    <kbd class="kbd text-xs">⌘K</kbd>
+  </button>
+  <button
+    type="button"
+    onclick="document.getElementById('site-search').showModal(); document.getElementById('site-search-input').focus();"
+    aria-label="Search documentation"
+    class="btn-sm-icon-ghost size-7 sm:hidden"
+  >
+    {% lucide "search" %}
+  </button>
   <select
     class="select h-8 leading-none"
     id="theme-select"
@@ -61,4 +80,25 @@
   >
     {% lucide "github" %}
   </a>
-</div>
\ No newline at end of file
+</div>
+
+{{ command_dialog(
+  id="site-search",
+  placeholder="Search documentation...",
+  empty_text="No results found. Try a different search term.",
+  main_attrs={ "data-command-async": "true" },
+  input_attrs={ "id": "site-search-input" }
+) }}
+
+<script>
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      const dialog = document.getElementById('site-search');
+      if (dialog) {
+        dialog.showModal();
+        document.getElementById('site-search-input')?.focus();
+      }
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk
index 98bc8d4..c01c2f7 100644
--- a/docs/src/_includes/partials/sidebar.njk
+++ b/docs/src/_includes/partials/sidebar.njk
@@ -134,6 +134,7 @@
   label="Sidebar navigation",
   header=header,
   footer=footer,
+  main_attrs={ "data-pagefind-ignore": "" },
   content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
   menu=menu
 ) }}
\ No newline at end of file
diff --git a/docs/src/assets/js/pagefind-search.js b/docs/src/assets/js/pagefind-search.js
new file mode 100644
index 0000000..db39253
--- /dev/null
+++ b/docs/src/assets/js/pagefind-search.js
@@ -0,0 +1,92 @@
+// Pagefind search integration for docs site
+(() => {
+  let pagefindPromise = null;
+
+  const loadPagefind = () => {
+    if (!pagefindPromise) {
+      pagefindPromise = import('/pagefind/pagefind.js')
+        .then(async (pf) => {
+          await pf.init();
+          return pf;
+        })
+        .catch((error) => {
+          pagefindPromise = null;
+          console.error('Failed to load Pagefind:', error);
+          throw new Error('Search is not available');
+        });
+    }
+    return pagefindPromise;
+  };
+
+  // Sanitize HTML, allowing only <mark> tags for search highlighting
+  const sanitizeExcerpt = (html) => {
+    if (!html) return '';
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    // Walk all nodes and only keep text and <mark> elements
+    const sanitize = (node) => {
+      const result = [];
+      node.childNodes.forEach((child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+          result.push(document.createTextNode(child.textContent));
+        } else if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'MARK') {
+          const mark = document.createElement('mark');
+          mark.textContent = child.textContent;
+          result.push(mark);
+        } else if (child.nodeType === Node.ELEMENT_NODE) {
+          result.push(...sanitize(child));
+        }
+      });
+      return result;
+    };
+    const container = document.createElement('span');
+    sanitize(div).forEach((n) => container.appendChild(n));
+    return container.innerHTML;
+  };
+
+  // Wait for basecoat to be available
+  const init = () => {
+    if (!window.basecoat?.commandAsync || !window.basecoat?.utils?.escapeHtml) {
+      setTimeout(init, 50);
+      return;
+    }
+
+    window.basecoat.commandAsync.register('site-search', {
+      minLength: 2,
+      debounce: 150,
+      maxResults: 8,
+      onSearch: async (query, signal) => {
+        const pf = await loadPagefind();
+        const search = await pf.search(query);
+
+        if (signal?.aborted) return [];
+
+        const results = await Promise.all(
+          search.results.slice(0, 8).map(r => r.data())
+        );
+
+        return results.map(r => ({
+          label: r.meta?.title || 'Untitled',
+          excerpt: r.excerpt || '',
+          url: r.url
+        }));
+      },
+      renderItem: (item, id) => {
+        const { escapeHtml } = window.basecoat.utils;
+        const safeExcerpt = sanitizeExcerpt(item.excerpt);
+        const safeLabel = escapeHtml(item.label);
+        const safeUrl = escapeHtml(item.url);
+        return `<a id="${id}" href="${safeUrl}" role="menuitem" class="search-result">
+          <span class="search-result-title">${safeLabel}</span>
+          <span class="search-result-excerpt">${safeExcerpt}</span>
+        </a>`;
+      }
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 936c2ea..1f68f37 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -5,6 +5,7 @@
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
@@ -12,7 +13,9 @@
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-900: oklch(41.4% 0.112 45.904);
     --color-amber-950: oklch(27.9% 0.077 45.635);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -72,6 +75,13 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -98,6 +108,11 @@
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
     --color-sidebar: var(--sidebar);
     --color-sidebar-foreground: var(--sidebar-foreground);
     --color-sidebar-primary: var(--sidebar-primary);
@@ -254,12 +269,25 @@
   }
 }
 @layer utilities {
+  .\@container\/card-header {
+    container-type: inline-size;
+    container-name: card-header;
+  }
+  .\@container {
+    container-type: inline-size;
+  }
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -274,6 +302,9 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
@@ -289,21 +320,42 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-22 {
     top: calc(var(--spacing) * 22);
   }
+  .top-\[50\%\] {
+    top: 50%;
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-1\.5 {
     right: calc(var(--spacing) * 1.5);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-2\.5 {
     right: calc(var(--spacing) * 2.5);
   }
@@ -313,6 +365,12 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\.5 {
     left: calc(var(--spacing) * 1.5);
   }
@@ -325,15 +383,27 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-\[50\%\] {
+    left: 50%;
+  }
   .isolate {
     isolation: isolate;
   }
   .z-10 {
     z-index: 10;
   }
+  .z-50 {
+    z-index: 50;
+  }
+  .z-\[60\] {
+    z-index: 60;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
+  .col-start-2 {
+    grid-column-start: 2;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -355,6 +425,15 @@
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+  .-mx-6 {
+    margin-inline: calc(var(--spacing) * -6);
+  }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -364,6 +443,15 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .-mt-1 {
+    margin-top: calc(var(--spacing) * -1);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -373,6 +461,15 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -394,9 +491,18 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -439,6 +545,9 @@
   .table {
     display: table;
   }
+  .field-sizing-content {
+    field-sizing: content;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -489,6 +598,12 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -501,9 +616,15 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -513,6 +634,15 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-\[1\.15rem\] {
+    height: 1.15rem;
+  }
+  .h-\[calc\(100\%_-_1px\)\] {
+    height: calc(100% - 1px);
+  }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -525,12 +655,27 @@
   .max-h-\[200px\] {
     max-height: 200px;
   }
+  .max-h-\[300px\] {
+    max-height: 300px;
+  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
   .max-h-\[650px\] {
     max-height: 650px;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
   .min-h-25 {
     min-height: calc(var(--spacing) * 25);
   }
@@ -543,24 +688,42 @@
   .min-h-\[350px\] {
     min-height: 350px;
   }
+  .w-\(--sidebar-mobile-width\) {
+    width: var(--sidebar-mobile-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-7\.5 {
     width: calc(var(--spacing) * 7.5);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -588,6 +751,9 @@
   .w-\[271px\] {
     width: 271px;
   }
+  .w-auto {
+    width: auto;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -615,6 +781,9 @@
   .max-w-\[450px\] {
     max-width: 450px;
   }
+  .max-w-\[calc\(100\%_-_2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -651,6 +820,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -666,33 +838,79 @@
   .basis-full {
     flex-basis: 100%;
   }
+  .caption-bottom {
+    caption-side: bottom;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-\[toast-up_0\.3s_ease-in-out\] {
+    animation: toast-up 0.3s ease-in-out;
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-default {
+    cursor: default;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .scroll-m-20 {
     scroll-margin: calc(var(--spacing) * 20);
   }
+  .scroll-m-22 {
+    scroll-margin: calc(var(--spacing) * 22);
+  }
   .scroll-mt-14 {
     scroll-margin-top: calc(var(--spacing) * 14);
   }
@@ -708,6 +926,12 @@
   .list-disc {
     list-style-type: disc;
   }
+  .appearance-none {
+    appearance: none;
+  }
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -717,9 +941,24 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-\[0_1fr\] {
+    grid-template-columns: 0 1fr;
+  }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
+  .grid-rows-\[1fr\] {
+    grid-template-rows: 1fr;
+  }
+  .grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -744,6 +983,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .justify-items-start {
+    justify-items: start;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -808,6 +1053,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
@@ -834,6 +1082,12 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-0 {
+    row-gap: calc(var(--spacing) * 0);
+  }
+  .gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * 0.5);
+  }
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
@@ -846,6 +1100,9 @@
   .self-start {
     align-self: flex-start;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -854,18 +1111,30 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overscroll-none {
+    overscroll-behavior: none;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -884,10 +1153,21 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+  .rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .rounded-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
   }
+  .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .rounded-r-md {
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
@@ -896,10 +1176,18 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -916,10 +1204,22 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-l-0 {
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
   }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -936,9 +1236,18 @@
       border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
     }
   }
+  .border-input {
+    border-color: var(--color-input);
+  }
   .border-muted {
     border-color: var(--color-muted);
   }
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  .border-sidebar-border {
+    border-color: var(--color-sidebar-border);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -951,21 +1260,45 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
+  .bg-accent-foreground {
+    background-color: var(--color-accent-foreground);
+  }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
   .bg-card {
     background-color: var(--color-card);
   }
+  .bg-destructive {
+    background-color: var(--color-destructive);
+  }
+  .bg-destructive\/90 {
+    background-color: var(--color-destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+    }
+  }
   .bg-foreground {
     background-color: var(--color-foreground);
   }
+  .bg-input {
+    background-color: var(--color-input);
+  }
   .bg-muted {
     background-color: var(--color-muted);
   }
@@ -978,6 +1311,9 @@
       background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
     }
   }
+  .bg-popover {
+    background-color: var(--color-popover);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
@@ -987,12 +1323,60 @@
       background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
     }
   }
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  .bg-sidebar {
+    background-color: var(--color-sidebar);
+  }
   .bg-sidebar-primary {
     background-color: var(--color-sidebar-primary);
   }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-yellow-200 {
+    background-color: var(--color-yellow-200);
+  }
+  .bg-yellow-200\/60 {
+    background-color: color-mix(in srgb, oklch(94.5% 0.129 101.54) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-200) 60%, transparent);
+    }
+  }
+  .bg-\[image\:var\(--check-icon\)\] {
+    background-image: var(--check-icon);
+  }
+  .bg-\[image\:var\(--chevron-down-icon-50\)\] {
+    background-image: var(--chevron-down-icon-50);
+  }
+  .mask-\[image\:var\(--check-icon\)\] {
+    mask-image: var(--check-icon);
+  }
+  .mask-\[image\:var\(--chevron-down-icon\)\] {
+    mask-image: var(--chevron-down-icon);
+  }
+  .bg-position-\[center_right_0\.5rem\] {
+    background-position: center right 0.5rem;
+  }
+  .bg-position-\[center_right_0\.75rem\] {
+    background-position: center right 0.75rem;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .mask-size-\[0\.875rem\] {
+    mask-size: 0.875rem;
+  }
+  .mask-size-\[1rem\] {
+    mask-size: 1rem;
+  }
+  .mask-no-repeat {
+    mask-repeat: no-repeat;
+  }
+  .mask-repeat {
+    mask-repeat: repeat;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -1038,12 +1422,24 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-9 {
     padding-inline: calc(var(--spacing) * 9);
   }
   .px-\[0\.3rem\] {
     padding-inline: 0.3rem;
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -1056,21 +1452,36 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-\[0\.2rem\] {
     padding-block: 0.2rem;
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .pt-15 {
     padding-top: calc(var(--spacing) * 15);
   }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
+  .pr-7 {
+    padding-right: calc(var(--spacing) * 7);
+  }
+  .pr-7\.5 {
+    padding-right: calc(var(--spacing) * 7.5);
+  }
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
@@ -1095,6 +1506,9 @@
   .pr-30 {
     padding-right: calc(var(--spacing) * 30);
   }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1107,6 +1521,12 @@
   .pb-17 {
     padding-bottom: calc(var(--spacing) * 17);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -1137,9 +1557,18 @@
   .text-right {
     text-align: right;
   }
+  .-indent-px {
+    text-indent: -1px;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1164,6 +1593,10 @@
     font-size: var(--text-sm);
     line-height: var(--leading-relaxed);
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -1171,6 +1604,9 @@
   .text-\[1\.05rem\] {
     font-size: 1.05rem;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1214,21 +1650,33 @@
   .text-balance {
     text-wrap: balance;
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .break-words {
     overflow-wrap: break-word;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-accent-foreground {
+    color: var(--color-accent-foreground);
+  }
   .text-amber-900 {
     color: var(--color-amber-900);
   }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
+  .text-card-foreground {
+    color: var(--color-card-foreground);
+  }
   .text-destructive {
     color: var(--color-destructive);
   }
@@ -1238,12 +1686,21 @@
   .text-green-500 {
     color: var(--color-green-500);
   }
+  .text-inherit {
+    color: inherit;
+  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
   .text-neutral-800 {
     color: var(--color-neutral-800);
   }
+  .text-popover-foreground {
+    color: var(--color-popover-foreground);
+  }
+  .text-primary {
+    color: var(--color-primary);
+  }
   .text-primary-foreground {
     color: var(--color-primary-foreground);
   }
@@ -1253,6 +1710,18 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-secondary-foreground {
+    color: var(--color-secondary-foreground);
+  }
+  .text-sidebar-foreground {
+    color: var(--color-sidebar-foreground);
+  }
+  .text-sidebar-foreground\/70 {
+    color: var(--color-sidebar-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
+    }
+  }
   .text-sidebar-primary-foreground {
     color: var(--color-sidebar-primary-foreground);
   }
@@ -1275,6 +1744,9 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .accent-foreground {
+    accent-color: var(--color-foreground);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1284,9 +1756,20 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
+    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1295,6 +1778,10 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1303,9 +1790,33 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-ring {
+    --tw-ring-color: var(--color-ring);
+  }
+  .ring-ring\/50 {
+    --tw-ring-color: var(--color-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+    }
+  }
+  .ring-sidebar-ring {
+    --tw-ring-color: var(--color-sidebar-ring);
+  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--color-background);
   }
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1322,33 +1833,107 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-all {
-    transition-property: all;
+  .transition-\[color\,box-shadow\] {
+    transition-property: color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  .transition-\[grid-template-rows\,opacity\,margin\] {
+    transition-property: grid-template-rows,opacity,margin;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
+  .transition-\[margin\,opacity\] {
+    transition-property: margin,opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .duration-100 {
-    --tw-duration: 100ms;
-    transition-duration: 100ms;
+  .transition-\[margin\] {
+    transition-property: margin;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
+  .transition-\[width\,height\,padding\] {
+    transition-property: width,height,padding;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-discrete {
+    transition-behavior: allow-discrete;
+  }
+  .duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
   }
   .duration-400 {
     --tw-duration: 400ms;
     transition-duration: 400ms;
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .content-\[\'\'\] {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
+  .content-\[\'Searching\.\.\.\'\] {
+    --tw-content: 'Searching...';
+    content: var(--tw-content);
+  }
+  .content-\[attr\(data-empty\,\'No_results_found\'\)\] {
+    --tw-content: attr(data-empty,'No results found');
+    content: var(--tw-content);
+  }
+  .content-\[attr\(data-error\,\'Search_failed\'\)\] {
+    --tw-content: attr(data-error,'Search failed');
+    content: var(--tw-content);
+  }
+  .content-\[attr\(data-idle\,\'Type_to_search\.\.\.\'\)\] {
+    --tw-content: attr(data-idle,'Type to search...');
+    content: var(--tw-content);
+  }
+  .content-\[attr\(data-tooltip\)\] {
+    --tw-content: attr(data-tooltip);
+    content: var(--tw-content);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1392,6 +1977,208 @@
       border-color: var(--color-primary);
     }
   }
+  .peer-disabled\:pointer-events-none {
+    &:is(:where(.peer):disabled ~ *) {
+      pointer-events: none;
+    }
+  }
+  .selection\:bg-primary {
+    & *::selection {
+      background-color: var(--color-primary);
+    }
+    &::selection {
+      background-color: var(--color-primary);
+    }
+  }
+  .selection\:text-primary-foreground {
+    & *::selection {
+      color: var(--color-primary-foreground);
+    }
+    &::selection {
+      color: var(--color-primary-foreground);
+    }
+  }
+  .file\:inline-flex {
+    &::file-selector-button {
+      display: inline-flex;
+    }
+  }
+  .file\:h-7 {
+    &::file-selector-button {
+      height: calc(var(--spacing) * 7);
+    }
+  }
+  .file\:border-0 {
+    &::file-selector-button {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .file\:bg-transparent {
+    &::file-selector-button {
+      background-color: transparent;
+    }
+  }
+  .file\:text-sm {
+    &::file-selector-button {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .file\:font-medium {
+    &::file-selector-button {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .file\:text-foreground {
+    &::file-selector-button {
+      color: var(--color-foreground);
+    }
+  }
+  .placeholder\:text-muted-foreground {
+    &::placeholder {
+      color: var(--color-muted-foreground);
+    }
+  }
+  .before\:pointer-events-none {
+    &::before {
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+  }
+  .before\:top-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      top: calc(1/2 * 100%);
+    }
+  }
+  .before\:top-full {
+    &::before {
+      content: var(--tw-content);
+      top: 100%;
+    }
+  }
+  .before\:right-full {
+    &::before {
+      content: var(--tw-content);
+      right: 100%;
+    }
+  }
+  .before\:bottom-full {
+    &::before {
+      content: var(--tw-content);
+      bottom: 100%;
+    }
+  }
+  .before\:left-1\/2 {
+    &::before {
+      content: var(--tw-content);
+      left: calc(1/2 * 100%);
+    }
+  }
+  .before\:left-full {
+    &::before {
+      content: var(--tw-content);
+      left: 100%;
+    }
+  }
+  .before\:mt-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      margin-top: calc(var(--spacing) * 1.5);
+    }
+  }
+  .before\:mr-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      margin-right: calc(var(--spacing) * 1.5);
+    }
+  }
+  .before\:mb-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      margin-bottom: calc(var(--spacing) * 1.5);
+    }
+  }
+  .before\:ml-1\.5 {
+    &::before {
+      content: var(--tw-content);
+      margin-left: calc(var(--spacing) * 1.5);
+    }
+  }
+  .before\:block {
+    &::before {
+      content: var(--tw-content);
+      display: block;
+    }
+  }
+  .before\:size-4 {
+    &::before {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
+  .before\:-translate-x-2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-x: calc(var(--spacing) * -2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:translate-x-2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-x: calc(var(--spacing) * 2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:-translate-y-2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-y: calc(var(--spacing) * -2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:translate-y-2 {
+    &::before {
+      content: var(--tw-content);
+      --tw-translate-y: calc(var(--spacing) * 2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .before\:rounded-full {
+    &::before {
+      content: var(--tw-content);
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .before\:bg-background {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--color-background);
+    }
+  }
+  .before\:ring-0 {
+    &::before {
+      content: var(--tw-content);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .before\:content-\[\'\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .last\:mt-0 {
+    &:last-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -1408,6 +2195,11 @@
       border-color: var(--color-green-600);
     }
   }
+  .checked\:border-primary {
+    &:checked {
+      border-color: var(--color-primary);
+    }
+  }
   .checked\:bg-blue-500 {
     &:checked {
       background-color: var(--color-blue-500);
@@ -1423,6 +2215,11 @@
       background-color: var(--color-green-600);
     }
   }
+  .checked\:bg-primary {
+    &:checked {
+      background-color: var(--color-primary);
+    }
+  }
   .checked\:before\:bg-background {
     &:checked {
       &::before {
@@ -1450,6 +2247,13 @@
       }
     }
   }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent);
+      }
+    }
+  }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
@@ -1484,6 +2288,23 @@
       }
     }
   }
+  .hover\:bg-muted\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-sidebar-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-sidebar-accent);
+      }
+    }
+  }
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1498,6 +2319,13 @@
       }
     }
   }
+  .hover\:text-sidebar-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-sidebar-accent-foreground);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1505,6 +2333,24 @@
       }
     }
   }
+  .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .hover\:before\:translate-y-0 {
+    &:hover {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-y: calc(var(--spacing) * 0);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+    }
+  }
   .focus\:bg-destructive\/10 {
     &:focus {
       background-color: var(--color-destructive);
@@ -1518,11 +2364,43 @@
       color: var(--color-destructive);
     }
   }
+  .focus\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus\:ring-ring {
+    &:focus {
+      --tw-ring-color: var(--color-ring);
+    }
+  }
+  .focus\:ring-offset-2 {
+    &:focus {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus\:outline-hidden {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .focus-visible\:border-ring {
     &:focus-visible {
       border-color: var(--color-ring);
     }
   }
+  .focus-visible\:bg-accent {
+    &:focus-visible {
+      background-color: var(--color-accent);
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1535,6 +2413,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-destructive\/20 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-ring {
     &:focus-visible {
       --tw-ring-color: var(--color-ring);
@@ -1554,22 +2440,53 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:outline-1 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-ring {
+    &:focus-visible {
+      outline-color: var(--color-ring);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
+  .active\:bg-sidebar-accent {
+    &:active {
+      background-color: var(--color-sidebar-accent);
+    }
+  }
+  .active\:text-sidebar-accent-foreground {
+    &:active {
+      color: var(--color-sidebar-accent-foreground);
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
     }
   }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
     }
   }
+  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\] {
+    &:has(*[data-slot="card-action"]) {
+      grid-template-columns: 1fr auto;
+    }
+  }
   .has-\[\:checked\]\:border-primary {
     &:has(*:is(:checked)) {
       border-color: var(--color-primary);
@@ -1603,11 +2520,41 @@
       background-color: var(--color-green-50);
     }
   }
+  .has-\[\>section\]\:items-start {
+    &:has(>section) {
+      align-items: flex-start;
+    }
+  }
+  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\] {
+    &:has(>svg) {
+      grid-template-columns: calc(var(--spacing) * 4) 1fr;
+    }
+  }
+  .has-\[\>svg\]\:gap-x-3 {
+    &:has(>svg) {
+      column-gap: calc(var(--spacing) * 3);
+    }
+  }
   .has-\[\>svg\]\:px-2\.5 {
     &:has(>svg) {
       padding-inline: calc(var(--spacing) * 2.5);
     }
   }
+  .aria-disabled\:pointer-events-none {
+    &[aria-disabled="true"] {
+      pointer-events: none;
+    }
+  }
+  .aria-disabled\:opacity-50 {
+    &[aria-disabled="true"] {
+      opacity: 50%;
+    }
+  }
+  .aria-hidden\:hidden {
+    &[aria-hidden="true"] {
+      display: none;
+    }
+  }
   .aria-invalid\:border-destructive {
     &[aria-invalid="true"] {
       border-color: var(--color-destructive);
@@ -1640,9 +2587,62 @@
       }
     }
   }
-  .max-sm\:flex-col {
-    @media (width < 40rem) {
-      flex-direction: column;
+  .data-\[invalid\=true\]\:text-destructive {
+    &[data-invalid="true"] {
+      color: var(--color-destructive);
+    }
+  }
+  .data-\[state\=open\]\:bg-accent {
+    &[data-state="open"] {
+      background-color: var(--color-accent);
+    }
+  }
+  .data-\[state\=open\]\:text-muted-foreground {
+    &[data-state="open"] {
+      color: var(--color-muted-foreground);
+    }
+  }
+  .max-md\:fixed {
+    @media (width < 48rem) {
+      position: fixed;
+    }
+  }
+  .max-md\:inset-0 {
+    @media (width < 48rem) {
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .max-md\:ml-10 {
+    @media (width < 48rem) {
+      margin-left: calc(var(--spacing) * 10);
+    }
+  }
+  .max-md\:bg-black\/50 {
+    @media (width < 48rem) {
+      background-color: color-mix(in srgb, #000 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+      }
+    }
+  }
+  .max-sm\:flex-col {
+    @media (width < 40rem) {
+      flex-direction: column;
+    }
+  }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .sm\:max-w-90 {
+    @media (width >= 40rem) {
+      max-width: calc(var(--spacing) * 90);
     }
   }
   .sm\:max-w-\[425px\] {
@@ -1650,6 +2650,16 @@
       max-width: 425px;
     }
   }
+  .sm\:max-w-lg {
+    @media (width >= 40rem) {
+      max-width: var(--container-lg);
+    }
+  }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
   .sm\:gap-2\.5 {
     @media (width >= 40rem) {
       gap: calc(var(--spacing) * 2.5);
@@ -1678,6 +2688,26 @@
       margin-left: calc(var(--spacing) * 4);
     }
   }
+  .md\:ml-\[-50px\] {
+    @media (width >= 48rem) {
+      margin-left: -50px;
+    }
+  }
+  .md\:h-9 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 9);
+    }
+  }
+  .md\:w-\(--sidebar-width\) {
+    @media (width >= 48rem) {
+      width: var(--sidebar-width);
+    }
+  }
+  .md\:w-9 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 9);
+    }
+  }
   .md\:w-\[239px\] {
     @media (width >= 48rem) {
       width: 239px;
@@ -1745,6 +2775,11 @@
       line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
   }
+  .lg\:mt-20 {
+    @media (width >= 64rem) {
+      margin-top: calc(var(--spacing) * 20);
+    }
+  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1791,6 +2826,11 @@
       border-color: var(--color-amber-950);
     }
   }
+  .dark\:border-input {
+    &:is(.dark *) {
+      border-color: var(--color-input);
+    }
+  }
   .dark\:bg-amber-950 {
     &:is(.dark *) {
       background-color: var(--color-amber-950);
@@ -1801,11 +2841,50 @@
       background-color: var(--color-blue-600);
     }
   }
+  .dark\:bg-input\/30 {
+    &:is(.dark *) {
+      background-color: var(--color-input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-input\/80 {
+    &:is(.dark *) {
+      background-color: var(--color-input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
+      }
+    }
+  }
+  .dark\:bg-yellow-500\/30 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-yellow-800 {
+    &:is(.dark *) {
+      background-color: var(--color-yellow-800);
+    }
+  }
   .dark\:text-amber-100 {
     &:is(.dark *) {
       color: var(--color-amber-100);
     }
   }
+  .dark\:text-foreground {
+    &:is(.dark *) {
+      color: var(--color-foreground);
+    }
+  }
+  .dark\:text-muted-foreground {
+    &:is(.dark *) {
+      color: var(--color-muted-foreground);
+    }
+  }
   .dark\:text-neutral-300 {
     &:is(.dark *) {
       color: var(--color-neutral-300);
@@ -1842,6 +2921,13 @@
       }
     }
   }
+  .dark\:checked\:bg-primary {
+    &:is(.dark *) {
+      &:checked {
+        background-color: var(--color-primary);
+      }
+    }
+  }
   .dark\:checked\:before\:bg-primary {
     &:is(.dark *) {
       &:checked {
@@ -1852,6 +2938,16 @@
       }
     }
   }
+  .dark\:checked\:before\:bg-primary-foreground {
+    &:is(.dark *) {
+      &:checked {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-primary-foreground);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-destructive\/20 {
     &:is(.dark *) {
       &:hover {
@@ -1864,6 +2960,18 @@
       }
     }
   }
+  .dark\:hover\:bg-input\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-input);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:focus\:bg-destructive\/20 {
     &:is(.dark *) {
       &:focus {
@@ -1874,6 +2982,16 @@
       }
     }
   }
+  .dark\:focus-visible\:ring-destructive\/40 {
+    &:is(.dark *) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+        }
+      }
+    }
+  }
   .dark\:has-\[\:checked\]\:bg-primary\/10 {
     &:is(.dark *) {
       &:has(*:is(:checked)) {
@@ -2125,6 +3243,11 @@
       color: var(--color-destructive) !important;
     }
   }
+  .\[\&_svg\]\:text-muted-foreground {
+    & svg {
+      color: var(--color-muted-foreground);
+    }
+  }
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
     & svg:not([class*='size-']) {
       width: calc(var(--spacing) * 4);
@@ -2137,6 +3260,11 @@
       height: calc(var(--spacing) * 6);
     }
   }
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
+    & svg:not([class*='text-']) {
+      color: var(--color-muted-foreground);
+    }
+  }
   .\[\&_ul\]\:m-0 {
     & ul {
       margin: calc(var(--spacing) * 0);
@@ -2152,6 +3280,11 @@
       padding-left: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
+    &:has([role=checkbox]) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
   .md\:\*\:\[\.card\]\:basis-1\/4 {
     @media (width >= 48rem) {
       :is(& > *) {
@@ -2180,6 +3313,18 @@
       }
     }
   }
+  .\[\&\>\*\]\:w-full {
+    &>* {
+      width: 100%;
+    }
+  }
+  .has-\[\>section\]\:\[\&\>\[type\=checkbox\]\,\[type\=radio\]\]\:mt-px {
+    &:has(>section) {
+      &>[type=checkbox],[type=radio] {
+        margin-top: 1px;
+      }
+    }
+  }
   .\[\&\>a\]\:underline {
     &>a {
       text-decoration-line: underline;
@@ -2195,6 +3340,23 @@
       color: var(--color-primary);
     }
   }
+  .\[\&\>label\]\:flex-auto {
+    &>label {
+      flex: auto;
+    }
+  }
+  .\[\&\>span\:last-child\]\:truncate {
+    &>span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .\[\&\>svg\]\:pointer-events-none {
+    &>svg {
+      pointer-events: none;
+    }
+  }
   .\[\&\>svg\]\:mb-3 {
     &>svg {
       margin-bottom: calc(var(--spacing) * 3);
@@ -2218,6 +3380,12 @@
       height: calc(var(--spacing) * 6);
     }
   }
+  .\[\&\>svg\]\:translate-y-0\.5 {
+    &>svg {
+      --tw-translate-y: calc(var(--spacing) * 0.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .aria-pressed\:\[\&\>svg\]\:fill-blue-600 {
     &[aria-pressed="true"] {
       &>svg {
@@ -2225,6 +3393,43 @@
       }
     }
   }
+  .\[\&\[aria-current\=page\]\]\:bg-sidebar-accent {
+    &[aria-current=page] {
+      background-color: var(--color-sidebar-accent);
+    }
+  }
+  .\[\&\[aria-current\=page\]\]\:font-medium {
+    &[aria-current=page] {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+  .\[\&\[aria-current\=page\]\]\:text-sidebar-accent-foreground {
+    &[aria-current=page] {
+      color: var(--color-sidebar-accent-foreground);
+    }
+  }
+  .\[a\&\]\:hover\:bg-accent {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-accent);
+        }
+      }
+    }
+  }
+  .\[a\&\]\:hover\:bg-destructive\/90 {
+    a& {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+          }
+        }
+      }
+    }
+  }
 }
 :root {
   --radius: 0.625rem;
@@ -3270,7 +4475,9 @@
         margin-block: calc(var(--spacing) * 1);
         border-color: var(--color-border);
       }
-      &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+    }
+    &:not([data-state]) [role='menu'] {
+      &:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         margin: calc(var(--spacing) * -1);
         display: flex;
         align-items: center;
@@ -3283,11 +4490,11 @@
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
       }
-      &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         --tw-content: attr(data-empty);
         content: var(--tw-content);
       }
-      &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         --tw-content: 'No results found';
         content: var(--tw-content);
       }
@@ -3307,6 +4514,66 @@
     &:has(> header input:not(:placeholder-shown)) [role='separator'] {
       display: none;
     }
+    &[data-state='idle'] [role='menu']::before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 6);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      --tw-content: attr(data-idle,'Type to search...');
+      content: var(--tw-content);
+    }
+    &[data-state='loading'] [role='menu']::before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 6);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      --tw-content: 'Searching...';
+      content: var(--tw-content);
+    }
+    &[data-state='empty'] [role='menu']::before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 6);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      --tw-content: attr(data-empty,'No results found');
+      content: var(--tw-content);
+    }
+    &[data-state='error'] [role='menu']::before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 6);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-destructive);
+      --tw-content: attr(data-error,'Search failed');
+      content: var(--tw-content);
+    }
+    &[data-state]:not([data-state='results']) [role='menu'] [role='menuitem'] {
+      display: none;
+    }
+    [role='menuitem'] mark {
+      border-radius: var(--radius-xs);
+      background-color: var(--color-yellow-200);
+      padding-inline: calc(var(--spacing) * 0.5);
+      color: inherit;
+      &:is(.dark *) {
+        background-color: var(--color-yellow-800);
+      }
+    }
   }
 }
 @layer components {
@@ -5593,6 +6860,57 @@
     }
   }
 }
+#site-search > .command {
+  @media (width >= 40rem) {
+    max-width: var(--container-xl);
+  }
+}
+#site-search [role="menu"] {
+  max-height: 500px;
+  padding: calc(var(--spacing) * 2);
+}
+.search-result {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--spacing) * 0.5);
+  overflow: visible;
+  padding-block: calc(var(--spacing) * 2);
+  text-wrap: wrap;
+  white-space: normal;
+}
+.search-result-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-foreground);
+}
+.search-result-excerpt {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  color: var(--color-muted-foreground);
+}
+.search-result-excerpt mark {
+  border-radius: var(--radius-sm);
+  background-color: color-mix(in srgb, oklch(94.5% 0.129 101.54) 60%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-yellow-200) 60%, transparent);
+  }
+  padding-inline: calc(var(--spacing) * 0.5);
+  color: inherit;
+  &:is(.dark *) {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+    }
+  }
+}
 :root {
   --hljs-bg: #fff;
   --hljs-color: #24292e;
@@ -5985,6 +7303,21 @@ code.hljs {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -6179,29 +7512,14 @@ code.hljs {
   syntax: "*";
   inherits: false;
 }
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
 @property --tw-ease {
   syntax: "*";
   inherits: false;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
+@property --tw-content {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
+  initial-value: "";
 }
 @keyframes spin {
   to {
@@ -6219,6 +7537,9 @@ code.hljs {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -6264,11 +7585,8 @@ code.hljs {
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-content: "";
       --tw-ease: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
+      --tw-content: "";
     }
   }
 }
diff --git a/docs/src/components/command.njk b/docs/src/components/command.njk
index 3f468a3..38ba568 100644
--- a/docs/src/components/command.njk
+++ b/docs/src/components/command.njk
@@ -19,11 +19,24 @@ toc:
             id: usage-html-js-4
       - label: Jinja and Nunjucks
         id: usage-macro
+  - label: Async Items
+    id: async-items
+    children:
+      - label: Setup
+        id: async-setup
+      - label: API Reference
+        id: async-api
+      - label: Utilities
+        id: async-utils
+      - label: States
+        id: async-states
   - label: Examples
     id: examples
     children:
       - label: Dialog
         id: example-dialog
+      - label: Async Search
+        id: example-async
 ---
 
 {% from "macros/code_preview.njk" import code_preview %}
@@ -220,6 +233,114 @@ toc:
 {% endcall %}{% endraw %}{% endset %}
 {{ code_block(raw_code, "jinja") }}
 
+<h2 id="async-items"><a href="#async-items">Async Items</a></h2>
+
+<section class="prose">
+  <p>The command component supports dynamically loading items from async sources like APIs, databases, or search engines like <a href="https://pagefind.app" target="_blank">Pagefind</a>.</p>
+</section>
+
+<h3 id="async-setup"><a href="#async-setup">Setup</a></h3>
+
+<section class="prose">
+  <p>Add <code>data-command-async="true"</code> to your command element and register a search handler:</p>
+</section>
+
+{% set code_async_register %}<!-- HTML -->
+<div id="my-search" class="command" data-command-async="true">
+  <header>
+    <input type="text" placeholder="Search..." role="combobox" aria-expanded="true" aria-controls="my-search-menu">
+  </header>
+  <div role="menu" id="my-search-menu" data-empty="No results found."></div>
+</div>
+
+<script>
+  // Register async search handler
+  window.basecoat.commandAsync.register('my-search', {
+    onSearch: async (query) => {
+      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+      return data.results.map(item => ({
+        label: item.title,
+        url: item.url
+      }));
+    }
+  });
+</script>{% endset %}
+{{ code_block(code_async_register, "html") }}
+
+<h3 id="async-api"><a href="#async-api">API Reference</a></h3>
+
+<section class="prose">
+  <dl>
+    <dt><code>window.basecoat.commandAsync.register(id, config)</code></dt>
+    <dd>Register an async search handler for a command element.
+      <dl>
+        <dt><code>id</code> <span class="badge-secondary">string</span></dt>
+        <dd>The <code>id</code> or <code>data-command-id</code> of the command element. When using <code>command_dialog</code> macro, the dialog gets the <code>id</code> and the inner command gets <code>data-command-id</code>.</dd>
+        <dt><code>config.onSearch</code> <span class="badge-secondary">function</span> <span class="badge-destructive">required</span></dt>
+        <dd>Async function that receives <code>(query, signal)</code> and returns an array of items. Each item should have <code>label</code> (required), <code>url</code> (optional), <code>icon</code> (optional HTML), and <code>keywords</code> (optional).</dd>
+        <dt><code>config.minLength</code> <span class="badge-secondary">number</span></dt>
+        <dd>Minimum characters to trigger search. Default: <code>1</code></dd>
+        <dt><code>config.debounce</code> <span class="badge-secondary">number</span></dt>
+        <dd>Debounce delay in milliseconds. Default: <code>150</code></dd>
+        <dt><code>config.maxResults</code> <span class="badge-secondary">number</span></dt>
+        <dd>Maximum results to display. Default: <code>8</code></dd>
+        <dt><code>config.renderItem</code> <span class="badge-secondary">function</span></dt>
+        <dd>Optional custom renderer. Receives <code>(item, id)</code> and returns HTML string. Use <code>window.basecoat.utils.escapeHtml()</code> to sanitize user content.</dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h3 id="async-utils"><a href="#async-utils">Utilities</a></h3>
+
+<section class="prose">
+  <p>Basecoat exposes utility functions for use in custom <code>renderItem</code> implementations:</p>
+  <dl>
+    <dt><code>window.basecoat.utils.escapeHtml(str)</code></dt>
+    <dd>Escapes HTML special characters to prevent XSS. Use when rendering user-provided content.</dd>
+    <dt><code>window.basecoat.utils.isValidUrl(url)</code></dt>
+    <dd>Validates URLs to prevent <code>javascript:</code> protocol attacks. Returns <code>true</code> for http, https, relative paths, and hash links.</dd>
+  </dl>
+</section>
+
+{% set code_utils %}// Using utilities in custom renderItem
+renderItem: (item, id) => {
+  const { escapeHtml, isValidUrl } = window.basecoat.utils;
+  const safeLabel = escapeHtml(item.label);
+  const href = isValidUrl(item.url) ? item.url : '#';
+  return `<a id="${id}" href="${href}" role="menuitem">${safeLabel}</a>`;
+}{% endset %}
+{{ code_block(code_utils, "js") }}
+
+<h3 id="async-states"><a href="#async-states">States</a></h3>
+
+<section class="prose">
+  <p>The command element uses <code>data-state</code> to indicate the current state:</p>
+  <dl>
+    <dt><code>data-state="idle"</code></dt>
+    <dd>Initial state, no search active.</dd>
+    <dt><code>data-state="loading"</code></dt>
+    <dd>Search in progress. Shows "Searching..." message.</dd>
+    <dt><code>data-state="results"</code></dt>
+    <dd>Results are displayed.</dd>
+    <dt><code>data-state="empty"</code></dt>
+    <dd>No results found. Shows the <code>data-empty</code> message from the menu element.</dd>
+    <dt><code>data-state="error"</code></dt>
+    <dd>Search failed. Shows the error message via <code>data-error</code> on the menu.</dd>
+  </dl>
+  <p>You can style these states using CSS:</p>
+</section>
+
+{% set code_async_states %}.command[data-state="loading"] [role="menu"]::before {
+  content: "Searching...";
+}
+.command[data-state="error"] [role="menu"]::before {
+  content: attr(data-error);
+  color: var(--destructive);
+}{% endset %}
+{{ code_block(code_async_states, "css") }}
+
 <h2 id="examples"><a href="#examples">Examples</a></h2>
 
 <h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>
@@ -258,4 +379,55 @@ toc:
 </script>
 {% endset %}
 
-{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
\ No newline at end of file
+{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
+
+<h3 id="example-async"><a href="#example-async">Async Search</a></h3>
+
+<section class="prose">
+  <p>This example shows how to integrate with <a href="https://pagefind.app" target="_blank">Pagefind</a> for full-text search. The search dialog in this documentation site uses this pattern.</p>
+</section>
+
+{% set code_pagefind %}// Lazy load Pagefind
+let pagefind = null;
+const loadPagefind = async () => {
+  if (!pagefind) {
+    pagefind = await import('/pagefind/pagefind.js');
+    await pagefind.init();
+  }
+  return pagefind;
+};
+
+// Register with command-async
+window.basecoat.commandAsync.register('site-search', {
+  minLength: 2,
+  debounce: 150,
+  maxResults: 8,
+  onSearch: async (query, signal) => {
+    const pf = await loadPagefind();
+    const search = await pf.search(query);
+
+    if (signal?.aborted) return [];
+
+    const results = await Promise.all(
+      search.results.slice(0, 8).map(r => r.data())
+    );
+
+    return results.map(r => ({
+      label: r.meta?.title || 'Untitled',
+      excerpt: r.excerpt || '',
+      url: r.url
+    }));
+  },
+  renderItem: (item, id) => {
+    const { escapeHtml } = window.basecoat.utils;
+    return `<a id="${id}" href="${escapeHtml(item.url)}" role="menuitem">
+      <span class="font-medium">${escapeHtml(item.label)}</span>
+      <span class="text-muted-foreground text-xs">${item.excerpt}</span>
+    </a>`;
+  }
+});{% endset %}
+{{ code_block(code_pagefind, "js") }}
+
+<section class="prose">
+  <p>The <code>signal</code> parameter is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal" target="_blank">AbortSignal</a> that can be used to cancel in-flight requests when a new search is triggered.</p>
+</section>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index df412f2..a15ea06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "basecoat",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "basecoat",
-      "version": "0.3.2",
+      "version": "0.3.4",
       "license": "MIT",
       "workspaces": [
         "packages/*"
@@ -16,6 +16,7 @@
         "@grimlink/eleventy-plugin-lucide-icons": "^2.1.4",
         "@tailwindcss/cli": "^4.1.3",
         "concurrently": "^9.1.2",
+        "pagefind": "^1.4.0",
         "prettier": "^3.5.3",
         "tailwindcss": "^4.1.3",
         "terser": "^5.42.0"
@@ -744,6 +745,90 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pagefind/darwin-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz",
+      "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/darwin-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz",
+      "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/freebsd-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz",
+      "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@pagefind/linux-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz",
+      "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/linux-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz",
+      "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/windows-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz",
+      "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -3345,6 +3430,24 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pagefind": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz",
+      "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pagefind": "lib/runner/bin.cjs"
+      },
+      "optionalDependencies": {
+        "@pagefind/darwin-arm64": "1.4.0",
+        "@pagefind/darwin-x64": "1.4.0",
+        "@pagefind/freebsd-x64": "1.4.0",
+        "@pagefind/linux-arm64": "1.4.0",
+        "@pagefind/linux-x64": "1.4.0",
+        "@pagefind/windows-x64": "1.4.0"
+      }
+    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
@@ -4337,7 +4440,7 @@
     },
     "packages/cli": {
       "name": "basecoat-cli",
-      "version": "0.3.2",
+      "version": "0.3.3",
       "license": "MIT",
       "dependencies": {
         "commander": "^13.1.0",
@@ -4350,7 +4453,7 @@
     },
     "packages/css": {
       "name": "basecoat-css",
-      "version": "0.3.2",
+      "version": "0.3.3",
       "license": "MIT"
     }
   }
diff --git a/package.json b/package.json
index 450f439..834c2ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
@@ -34,7 +34,7 @@
   "homepage": "https://github.com/hunvreus/basecoat#readme",
   "scripts": {
     "build": "node ./scripts/build.js",
-    "docs:build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy",
+    "docs:build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy && npx pagefind --site _site",
     "docs:dev:css": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch",
     "docs:dev:eleventy": "ELEVENTY_ENV=prod eleventy --serve",
     "docs:dev": "concurrently \"npm:docs:dev:css\" \"npm:docs:dev:eleventy\""
@@ -44,6 +44,7 @@
     "@grimlink/eleventy-plugin-lucide-icons": "^2.1.4",
     "@tailwindcss/cli": "^4.1.3",
     "concurrently": "^9.1.2",
+    "pagefind": "^1.4.0",
     "prettier": "^3.5.3",
     "tailwindcss": "^4.1.3",
     "terser": "^5.42.0"
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 6b2b05a..95d2a29 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -570,13 +570,16 @@
       [role='separator'] {
         @apply border-border -mx-1 my-1;
       }
-      &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+    }
+    /* Sync command empty state - only when NOT async (no data-state) */
+    &:not([data-state]) [role='menu'] {
+      &:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
       }
-      &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &[data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply content-[attr(data-empty)];
       }
-      &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+      &:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
         @apply content-['No_results_found'];
       }
     }
@@ -586,6 +589,28 @@
     &:has(> header input:not(:placeholder-shown)) [role='separator'] {
       @apply hidden;
     }
+
+    /* Async command states */
+    &[data-state='idle'] [role='menu']::before {
+      @apply content-[attr(data-idle,'Type_to_search...')] flex items-center justify-center py-6 px-3 text-sm text-muted-foreground;
+    }
+    &[data-state='loading'] [role='menu']::before {
+      @apply content-['Searching...'] flex items-center justify-center py-6 px-3 text-sm text-muted-foreground;
+    }
+    &[data-state='empty'] [role='menu']::before {
+      @apply content-[attr(data-empty,'No_results_found')] flex items-center justify-center py-6 px-3 text-sm text-muted-foreground;
+    }
+    &[data-state='error'] [role='menu']::before {
+      @apply content-[attr(data-error,'Search_failed')] flex items-center justify-center py-6 px-3 text-sm text-destructive;
+    }
+    &[data-state]:not([data-state='results']) [role='menu'] [role='menuitem'] {
+      @apply hidden;
+    }
+
+    /* Search result highlight marks */
+    [role='menuitem'] mark {
+      @apply bg-yellow-200 dark:bg-yellow-800 text-inherit rounded-xs px-0.5;
+    }
   }
 }
 
diff --git a/src/jinja/command.html.jinja b/src/jinja/command.html.jinja
index b05feca..61791a3 100644
--- a/src/jinja/command.html.jinja
+++ b/src/jinja/command.html.jinja
@@ -72,6 +72,7 @@
   @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
   @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
   @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the command container div.
   @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
   @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
   @param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially.
@@ -82,6 +83,7 @@
   placeholder="Type a command or search...",
   empty_text="No results found.",
   dialog_attrs={},
+  main_attrs={},
   input_attrs={},
   menu_attrs={},
   open=False
@@ -97,7 +99,13 @@
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  <div class="command">
+  <div
+    data-command-id="{{ id }}"
+    class="command {{ main_attrs.class }}"
+    {% for key, value in main_attrs.items() %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
     <header>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
       <input
diff --git a/src/js/basecoat.js b/src/js/basecoat.js
index 1855b4b..160a999 100644
--- a/src/js/basecoat.js
+++ b/src/js/basecoat.js
@@ -2,6 +2,25 @@
   const componentRegistry = {};
   let observer = null;
 
+  // Utility: Escape HTML to prevent XSS
+  const escapeHtml = (str) => {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  };
+
+  // Utility: Validate URL to prevent javascript: protocol attacks
+  const isValidUrl = (url) => {
+    if (!url) return false;
+    try {
+      const parsed = new URL(url, window.location.origin);
+      return ['http:', 'https:', ''].includes(parsed.protocol) || url.startsWith('/');
+    } catch {
+      return url.startsWith('/') || url.startsWith('#');
+    }
+  };
+
   const registerComponent = (name, selector, initFunction) => {
     componentRegistry[name] = {
       selector,
@@ -89,7 +108,11 @@
     init: reinitComponent,
     initAll: reinitAll,
     start: startObserver,
-    stop: stopObserver
+    stop: stopObserver,
+    utils: {
+      escapeHtml,
+      isValidUrl
+    }
   };
 
   document.addEventListener('DOMContentLoaded', () => {
diff --git a/src/js/command.js b/src/js/command.js
index c4970ea..9ef8bb0 100644
--- a/src/js/command.js
+++ b/src/js/command.js
@@ -1,4 +1,48 @@
 (() => {
+  const asyncRegistry = {};
+  const searchControllers = {};
+
+  const defaultAsyncConfig = {
+    minLength: 1,
+    debounce: 150,
+    maxResults: 8,
+    renderItem: null
+  };
+
+  // Use utilities from basecoat core
+  const getUtils = () => window.basecoat?.utils || {};
+
+  const defaultRenderItem = (item, id) => {
+    const { escapeHtml, isValidUrl } = getUtils();
+    const tag = item.url && isValidUrl?.(item.url) ? 'a' : 'div';
+    const href = tag === 'a' ? ` href="${escapeHtml?.(item.url) || ''}"` : '';
+    const keywords = item.keywords ? ` data-keywords="${escapeHtml?.(item.keywords) || ''}"` : '';
+    const label = escapeHtml?.(item.label) || item.label || '';
+    // Icon is expected to be trusted HTML from the onSearch callback (user-controlled)
+    const icon = item.icon || '';
+    return `<${tag} id="${id}" role="menuitem"${href}${keywords}>${icon}${label}</${tag}>`;
+  };
+
+  const setState = (container, state, message = '') => {
+    container.dataset.state = state;
+    const menu = container.querySelector('[role="menu"]');
+    if (menu) {
+      if (state === 'error' && message) {
+        menu.dataset.error = message;
+      } else {
+        delete menu.dataset.error;
+      }
+    }
+  };
+
+  const debounce = (fn, ms) => {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), ms);
+    };
+  };
+
   const initCommand = (container) => {
     const input = container.querySelector('header input');
     const menu = container.querySelector('[role="menu"]');
@@ -11,23 +55,32 @@
       return;
     }
 
-    const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
-    const menuItems = allMenuItems.filter(item => 
-      !item.hasAttribute('disabled') && 
+    // Check if this is an async command
+    const isAsync = container.dataset.commandAsync === 'true';
+    const commandId = container.id || container.dataset.commandId;
+    const asyncConfig = isAsync && commandId ? asyncRegistry[commandId] : null;
+
+    // For async mode, we need a registered config
+    if (isAsync && !asyncConfig) {
+      return;
+    }
+
+    let allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    let menuItems = allMenuItems.filter(item =>
+      !item.hasAttribute('disabled') &&
       item.getAttribute('aria-disabled') !== 'true'
     );
     let visibleMenuItems = [...menuItems];
     let activeIndex = -1;
 
     const setActiveItem = (index) => {
-      if (activeIndex > -1 && menuItems[activeIndex]) {
-        menuItems[activeIndex].classList.remove('active');
-      }
+      // Clear previous active
+      menu.querySelector('[role="menuitem"].active')?.classList.remove('active');
 
       activeIndex = index;
 
-      if (activeIndex > -1) {
-        const activeItem = menuItems[activeIndex];
+      if (activeIndex > -1 && visibleMenuItems[activeIndex]) {
+        const activeItem = visibleMenuItems[activeIndex];
         activeItem.classList.add('active');
         if (activeItem.id) {
           input.setAttribute('aria-activedescendant', activeItem.id);
@@ -39,6 +92,16 @@
       }
     };
 
+    const refreshMenuItems = () => {
+      allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+      menuItems = allMenuItems.filter(item =>
+        !item.hasAttribute('disabled') &&
+        item.getAttribute('aria-disabled') !== 'true'
+      );
+      visibleMenuItems = [...menuItems];
+    };
+
+    // Sync filtering for static items
     const filterMenuItems = () => {
       const searchTerm = input.value.trim().toLowerCase();
 
@@ -56,12 +119,83 @@
       });
 
       if (visibleMenuItems.length > 0) {
-        setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+        setActiveItem(0);
         visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
       }
     };
 
-    input.addEventListener('input', filterMenuItems);
+    // Async search for dynamic items
+    const performAsyncSearch = async (query) => {
+      const id = commandId;
+
+      // Cancel previous search
+      if (searchControllers[id]) {
+        searchControllers[id].abort();
+      }
+      searchControllers[id] = new AbortController();
+
+      if (query.length < asyncConfig.minLength) {
+        menu.innerHTML = '';
+        setState(container, 'idle');
+        return;
+      }
+
+      setState(container, 'loading');
+
+      try {
+        const results = await asyncConfig.onSearch(query, searchControllers[id].signal);
+
+        // Check if aborted
+        if (searchControllers[id]?.signal.aborted) return;
+
+        if (!results || results.length === 0) {
+          menu.innerHTML = '';
+          setState(container, 'empty');
+        } else {
+          const items = results.slice(0, asyncConfig.maxResults);
+          const renderFn = asyncConfig.renderItem || defaultRenderItem;
+          menu.innerHTML = items.map((item, i) => renderFn(item, `${id}-result-${i}`)).join('');
+          setState(container, 'results');
+
+          // Refresh menu items after rendering new results
+          refreshMenuItems();
+
+          // Set first item as active
+          if (visibleMenuItems.length > 0) {
+            setActiveItem(0);
+            visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+          }
+        }
+
+        container.dispatchEvent(new CustomEvent('command:search', {
+          bubbles: true,
+          detail: { query, results: results || [] }
+        }));
+      } catch (error) {
+        if (error.name === 'AbortError') return;
+        console.error('Command async search error:', error);
+        menu.innerHTML = '';
+        setState(container, 'error', error.message || 'Search failed');
+      } finally {
+        delete searchControllers[id];
+      }
+    };
+
+    // Set up input handler based on mode
+    if (isAsync && asyncConfig) {
+      const debounceMs = parseInt(container.dataset.commandDebounce, 10) || asyncConfig.debounce;
+      const debouncedSearch = debounce(performAsyncSearch, debounceMs);
+
+      setState(container, 'idle');
+
+      input.addEventListener('input', () => {
+        const query = input.value.trim();
+        debouncedSearch(query);
+      });
+    } else {
+      // Sync filtering
+      input.addEventListener('input', filterMenuItems);
+    }
 
     const handleKeyNavigation = (event) => {
       if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
@@ -70,8 +204,8 @@
 
       if (event.key === 'Enter') {
         event.preventDefault();
-        if (activeIndex > -1) {
-          menuItems[activeIndex]?.click();
+        if (activeIndex > -1 && visibleMenuItems[activeIndex]) {
+          visibleMenuItems[activeIndex].click();
         }
         return;
       }
@@ -80,41 +214,41 @@
 
       event.preventDefault();
 
-      const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
-      let nextVisibleIndex = currentVisibleIndex;
+      let nextIndex = activeIndex;
 
       switch (event.key) {
         case 'ArrowDown':
-          if (currentVisibleIndex < visibleMenuItems.length - 1) {
-            nextVisibleIndex = currentVisibleIndex + 1;
+          if (activeIndex < visibleMenuItems.length - 1) {
+            nextIndex = activeIndex + 1;
+          } else if (activeIndex === -1) {
+            nextIndex = 0;
           }
           break;
         case 'ArrowUp':
-          if (currentVisibleIndex > 0) {
-            nextVisibleIndex = currentVisibleIndex - 1;
-          } else if (currentVisibleIndex === -1) {
-            nextVisibleIndex = 0;
+          if (activeIndex > 0) {
+            nextIndex = activeIndex - 1;
+          } else if (activeIndex === -1) {
+            nextIndex = visibleMenuItems.length - 1;
           }
           break;
         case 'Home':
-          nextVisibleIndex = 0;
+          nextIndex = 0;
           break;
         case 'End':
-          nextVisibleIndex = visibleMenuItems.length - 1;
+          nextIndex = visibleMenuItems.length - 1;
           break;
       }
 
-      if (nextVisibleIndex !== currentVisibleIndex) {
-        const newActiveItem = visibleMenuItems[nextVisibleIndex];
-        setActiveItem(menuItems.indexOf(newActiveItem));
-        newActiveItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      if (nextIndex !== activeIndex && nextIndex >= 0) {
+        setActiveItem(nextIndex);
+        visibleMenuItems[nextIndex].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
       }
     };
 
     menu.addEventListener('mousemove', (event) => {
       const menuItem = event.target.closest('[role="menuitem"]');
       if (menuItem && visibleMenuItems.includes(menuItem)) {
-        const index = menuItems.indexOf(menuItem);
+        const index = visibleMenuItems.indexOf(menuItem);
         if (index !== activeIndex) {
           setActiveItem(index);
         }
@@ -133,16 +267,46 @@
 
     input.addEventListener('keydown', handleKeyNavigation);
 
-    if (visibleMenuItems.length > 0) {
-      setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+    // Initial active item for sync mode
+    if (!isAsync && visibleMenuItems.length > 0) {
+      setActiveItem(0);
       visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
     }
 
-    container.dataset.commandInitialized = true;
+    container.dataset.commandInitialized = 'true';
     container.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
+  // Find command container by ID (supports both id and data-command-id)
+  const findCommandById = (id) => {
+    return document.getElementById(id) || document.querySelector(`[data-command-id="${id}"]`);
+  };
+
+  // Register async command configuration
+  const registerAsync = (id, config) => {
+    asyncRegistry[id] = { ...defaultAsyncConfig, ...config };
+
+    // Initialize if element already exists and not yet initialized
+    const container = findCommandById(id);
+    if (container && container.dataset.commandAsync === 'true' && !container.dataset.commandInitialized) {
+      initCommand(container);
+    }
+  };
+
+  // Expose API
   if (window.basecoat) {
     window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
+
+    // Async API
+    window.basecoat.commandAsync = {
+      register: registerAsync,
+      initAll: () => {
+        document.querySelectorAll('.command[data-command-async="true"]:not([data-command-initialized])').forEach(container => {
+          if (container.id && asyncRegistry[container.id]) {
+            initCommand(container);
+          }
+        });
+      }
+    };
   }
 })();
diff --git a/src/nunjucks/command.njk b/src/nunjucks/command.njk
index f3b6b84..033b8eb 100644
--- a/src/nunjucks/command.njk
+++ b/src/nunjucks/command.njk
@@ -31,7 +31,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
     <input
       type="text"
-      id="{{ id }}-input"
+      {% if not input_attrs.id %}id="{{ id }}-input"{% endif %}
       placeholder="{{ placeholder }}"
       autocomplete="off"
       autocorrect="off"
@@ -72,6 +72,7 @@
   @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
   @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
   @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the command container div.
   @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
   @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
   @param open {boolean} [optional] [default=false] - Whether the command dialog should be open initially.
@@ -82,6 +83,7 @@
   placeholder="Type a command or search...",
   empty_text="No results found.",
   dialog_attrs={},
+  main_attrs={},
   input_attrs={},
   menu_attrs={},
   open=false
@@ -97,12 +99,18 @@
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  <div class="command">
+  <div
+    data-command-id="{{ id }}"
+    class="command {{ main_attrs.class }}"
+    {% for key, value in main_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
     <header>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
       <input
         type="text"
-        id="{{ id }}-input"
+        {% if not input_attrs.id %}id="{{ id }}-input"{% endif %}
         placeholder="{{ placeholder }}"
         autocomplete="off"
         autocorrect="off"