@farming-labs/svelte-theme 0.2.38 → 0.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -122,8 +122,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.2.38",
-    "@farming-labs/svelte": "0.2.38"
+    "@farming-labs/svelte": "0.2.39",
+    "@farming-labs/docs": "0.2.39"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/SearchDialog.svelte

@@ -11,7 +11,13 @@
   const STORAGE_KEY = "fd:omni:recents";
   const MAX_RECENTS = 8;
   const DEBOUNCE_MS = 120;
-  const PLACEHOLDER = "Search documentation…";
+  const BREADCRUMB_SEPARATOR = "\u00a0\u00a0>\u00a0\u00a0";
+  const FILTER_LABELS = {
+    all: "All",
+    pages: "Pages",
+    inside: "Inside pages",
+  };
+  const FILTER_OPTIONS = ["all", "pages", "inside"];
 
   let { onclose } = $props();
 
@@ -20,9 +26,13 @@
   let loading = $state(false);
   let activeId = $state(null);
   let recentsList = $state([]);
+  let filter = $state("all");
+  let filterOpen = $state(false);
   let inputEl = $state(null);
   let listRef = $state(null);
   let debounceTimer = null;
+  let abortController = null;
+  const searchCache = new Map();
 
   function withLang(url) {
     if (!url || url.startsWith("#")) return url;
@@ -37,14 +47,149 @@
     }
   }
 
+  function breadcrumbForUrl(url) {
+    try {
+      const parsed = new URL(url, "https://farming-labs.local");
+      const parts = parsed.pathname
+        .split("/")
+        .filter(Boolean)
+        .map((part) =>
+          decodeURIComponent(part)
+            .replace(/[-_]+/g, " ")
+            .replace(/\b\w/g, (char) => char.toUpperCase())
+        );
+      return parts.length ? parts.join(BREADCRUMB_SEPARATOR) : "Docs";
+    } catch {
+      return "Docs";
+    }
+  }
+
+  function displayLabelForResult(result) {
+    if (result.section) return result.section;
+    const label = result.content ?? "";
+    const parts = label.split(/\s+[—–]\s+/).map((part) => part.trim()).filter(Boolean);
+    return result.type === "heading" && parts.length > 1 ? parts[parts.length - 1] : label;
+  }
+
+  function normalizeSearchPhrase(value) {
+    return (value ?? "").toLowerCase().replace(/[?!.,;:]+$/g, "").replace(/\s+/g, " ").trim();
+  }
+
+  function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  function literalMatchPriority(searchQuery, value) {
+    const q = normalizeSearchPhrase(searchQuery);
+    const text = normalizeSearchPhrase(value);
+    if (!q || !text) return 0;
+    if (text === q) return 2;
+
+    const boundary = "[^\\p{L}\\p{N}]";
+    return new RegExp(`(^|${boundary})${escapeRegExp(q)}(?=$|${boundary})`, "u").test(text)
+      ? 1
+      : 0;
+  }
+
+  function tokenizeLiteralQuery(searchQuery) {
+    return Array.from(
+      new Set(
+        searchQuery
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}@/_:.-]+/gu, " ")
+          .split(/\s+/)
+          .map((word) => word.replace(/^[^\p{L}\p{N}@]+|[^\p{L}\p{N}]+$/gu, ""))
+          .filter((word) => word.length > 1)
+      )
+    );
+  }
+
+  function isLiteralLookupQuery(searchQuery) {
+    const q = normalizeSearchPhrase(searchQuery);
+    const words = tokenizeLiteralQuery(q);
+    return words.length > 0 && words.length <= 3 && words.join(" ") === q;
+  }
+
+  function hasDistinctSearchSection(result) {
+    if (result.type === "page") return false;
+    if (!result.section) return true;
+    const title = (result.content ?? "").split(/\s+[—–]\s+/)[0] ?? "";
+    return normalizeSearchPhrase(result.section) !== normalizeSearchPhrase(title);
+  }
+
+  function insideLiteralPriority(result, searchQuery) {
+    if (!hasDistinctSearchSection(result) || !isLiteralLookupQuery(searchQuery)) return 0;
+    return Math.max(
+      literalMatchPriority(searchQuery, result.section),
+      literalMatchPriority(searchQuery, result.description)
+    );
+  }
+
+  function sortResultsForFilter(results) {
+    const q = query.trim();
+    if (!q) return results;
+    return results
+      .map((result, index) => ({ result, index }))
+      .sort((a, b) => {
+        const aLiteralPriority = insideLiteralPriority(a.result, q);
+        const bLiteralPriority = insideLiteralPriority(b.result, q);
+        const literalDelta = bLiteralPriority - aLiteralPriority;
+        if (literalDelta) return literalDelta;
+        if (aLiteralPriority > 0 && bLiteralPriority > 0) return a.index - b.index;
+
+        const scoreDelta = (b.result.score ?? 0) - (a.result.score ?? 0);
+        if (scoreDelta) return scoreDelta;
+
+        return a.index - b.index;
+      })
+      .map(({ result }) => result);
+  }
+
+  function escapeHtml(value) {
+    return (value ?? "").replace(/[&<>"']/g, (char) => {
+      if (char === "&") return "&amp;";
+      if (char === "<") return "&lt;";
+      if (char === ">") return "&gt;";
+      if (char === '"') return "&quot;";
+      return "&#39;";
+    });
+  }
+
+  function highlightSnippet(text) {
+    const q = query.trim();
+    if (!q) return escapeHtml(text);
+    let html = "";
+    let lastIndex = 0;
+    const regex = new RegExp(escapeRegExp(q), "gi");
+    let match;
+
+    while ((match = regex.exec(text)) !== null) {
+      html += escapeHtml(text.slice(lastIndex, match.index));
+      html += `<mark class="omni-highlight">${escapeHtml(match[0])}</mark>`;
+      lastIndex = match.index + match[0].length;
+    }
+
+    return html + escapeHtml(text.slice(lastIndex));
+  }
+
+  let visibleResults = $derived.by(() => {
+    if (filter === "pages") return currentResults.filter((result) => result.type === "page");
+    if (filter === "inside") {
+      return sortResultsForFilter(currentResults.filter((result) => result.type !== "page"));
+    }
+    return sortResultsForFilter(currentResults);
+  });
+
   let flatItems = $derived.by(() => {
     const q = query.trim();
-    if (q && currentResults.length) {
-      return currentResults.map((r) => ({
+    if (q && visibleResults.length) {
+      return visibleResults.map((r) => ({
         id: r.url,
-        label: r.content,
+        label: displayLabelForResult(r),
         url: r.url,
-        subtitle: r.description ?? "Page",
+        subtitle: breadcrumbForUrl(r.url),
+        description: r.description,
+        descriptionHtml: r.description ? highlightSnippet(r.description) : "",
       }));
     }
     return recentsList.map((r) => ({
@@ -56,13 +201,15 @@
   });
 
   let showRecents = $derived(!query.trim());
-  let showDocs = $derived(!!query.trim() && currentResults.length > 0);
+  let showDocs = $derived(!!query.trim() && visibleResults.length > 0);
   let showEmpty = $derived(
-    query.trim() ? currentResults.length === 0 && !loading : recentsList.length === 0
+    query.trim() ? visibleResults.length === 0 && !loading : recentsList.length === 0
   );
   let emptyText = $derived(
     query.trim()
-      ? "No results found. Try a different query."
+      ? currentResults.length > 0
+        ? `No ${FILTER_LABELS[filter].toLowerCase()} results found.`
+        : "No results found. Try a different query."
       : "Type to search the docs, or browse recent items."
   );
 
@@ -94,6 +241,12 @@
     onclose?.();
   }
 
+  function updateFilter(nextFilter) {
+    filter = nextFilter;
+    filterOpen = false;
+    activeId = flatItems[0]?.id ?? null;
+  }
+
   function executeItem(item) {
     const localizedUrl = withLang(item.url);
     saveRecent({ id: localizedUrl, label: item.label ?? item.content ?? item.url, url: localizedUrl });
@@ -133,19 +286,41 @@
     currentResults = [];
     activeId = null;
     const q = query.trim();
+    filterOpen = false;
+    if (abortController) abortController.abort();
     if (!q) return;
     if (debounceTimer) clearTimeout(debounceTimer);
+    const requestUrl = withLang(`/api/docs?query=${encodeURIComponent(q)}`);
+    const cached = searchCache.get(requestUrl);
+    if (cached) {
+      currentResults = cached;
+      activeId = cached[0]?.url ?? null;
+      return;
+    }
     debounceTimer = setTimeout(async () => {
+      const controller = new AbortController();
+      abortController = controller;
       loading = true;
       try {
-        const res = await fetch(withLang(`/api/docs?query=${encodeURIComponent(q)}`));
+        const res = await fetch(requestUrl, { signal: controller.signal });
         const data = res.ok ? await res.json() : [];
-        currentResults = Array.isArray(data) ? data : [];
+        if (controller.signal.aborted) return;
+        const nextResults = Array.isArray(data) ? data : [];
+        if (searchCache.size >= 20) {
+          const firstKey = searchCache.keys().next().value;
+          if (firstKey) searchCache.delete(firstKey);
+        }
+        searchCache.set(requestUrl, nextResults);
+        currentResults = nextResults;
         activeId = currentResults[0]?.url ?? null;
-      } catch {
+      } catch (error) {
+        if (controller.signal.aborted) return;
         currentResults = [];
       } finally {
-        loading = false;
+        if (abortController === controller) {
+          abortController = null;
+          loading = false;
+        }
       }
     }, DEBOUNCE_MS);
   }
@@ -155,6 +330,11 @@
     onInput();
   });
 
+  $effect(() => {
+    void filter;
+    activeId = flatItems[0]?.id ?? null;
+  });
+
   function handleKeydown(e) {
     if (e.key === "Escape") {
       e.preventDefault();
@@ -185,19 +365,6 @@
     e.stopPropagation();
   }
 
-  function onExternalClick(e, url) {
-    e.preventDefault();
-    e.stopPropagation();
-    try {
-      if (typeof window !== "undefined") window.open(url, "_blank", "noopener,noreferrer");
-    } catch {
-      if (typeof window !== "undefined") window.location.href = url;
-    }
-  }
-
-  const FileIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>`;
-  const ExternalIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`;
-  const ChevronIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>`;
   const EmptyIcon = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>`;
 
   onMount(() => {
@@ -209,6 +376,7 @@
   onDestroy(() => {
     if (typeof document !== "undefined") document.body.style.overflow = "";
     if (debounceTimer) clearTimeout(debounceTimer);
+    if (abortController) abortController.abort();
   });
 </script>
 
@@ -247,16 +415,12 @@
           aria-expanded="true"
           aria-controls="omni-listbox"
           aria-activedescendant={activeId ? `omni-item-${activeId}` : undefined}
-          placeholder={PLACEHOLDER}
+          placeholder="Search"
           autocomplete="off"
           onkeydown={handleKeydown}
         />
-        <kbd class="omni-kbd">⌘ K</kbd>
         <button type="button" aria-label="Close" class="omni-close-btn" onclick={close}>
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M18 6 6 18" />
-            <path d="m6 6 12 12" />
-          </svg>
+          ESC
         </button>
       </div>
     </div>
@@ -293,27 +457,10 @@
                 onmouseenter={() => (activeId = item.id)}
                 onclick={() => executeItem(item)}
               >
-                <div class="omni-item-icon">
-                  {@html FileIcon}
-                </div>
                 <div class="omni-item-text">
-                  <div class="omni-item-label">{item.label}</div>
                   <div class="omni-item-subtitle">{item.subtitle}</div>
+                  <div class="omni-item-label">{item.label}</div>
                 </div>
-                <a
-                  href={item.url}
-                  class="omni-item-badge"
-                  title="Open in new tab"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-hidden="true"
-                  onclick={(e) => onExternalClick(e, item.url)}
-                >
-                  {@html ExternalIcon}
-                </a>
-                <span class="omni-item-chevron" aria-hidden="true">
-                  {@html ChevronIcon}
-                </span>
               </button>
             {/each}
           </div>
@@ -336,27 +483,15 @@
                 onmouseenter={() => (activeId = item.id)}
                 onclick={() => executeItem(item)}
               >
-                <div class="omni-item-icon">
-                  {@html FileIcon}
-                </div>
                 <div class="omni-item-text">
-                  <div class="omni-item-label">{item.label}</div>
                   <div class="omni-item-subtitle">{item.subtitle}</div>
+                  <div class="omni-item-label">{item.label}</div>
+                  {#if item.description}
+                    <div class="omni-item-description">
+                      {@html item.descriptionHtml}
+                    </div>
+                  {/if}
                 </div>
-                <a
-                  href={item.url}
-                  class="omni-item-badge"
-                  title="Open in new tab"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-hidden="true"
-                  onclick={(e) => onExternalClick(e, item.url)}
-                >
-                  {@html ExternalIcon}
-                </a>
-                <span class="omni-item-chevron" aria-hidden="true">
-                  {@html ChevronIcon}
-                </span>
               </button>
             {/each}
           </div>
@@ -377,28 +512,55 @@
       <div class="omni-footer-inner">
         <div class="omni-footer-hints">
           <span class="omni-footer-hint">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="9 18 15 12 9 6" />
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="m9 10-5 5 5 5" />
+              <path d="M20 4v7a4 4 0 0 1-4 4H4" />
             </svg>
             to select
           </span>
           <span class="omni-footer-hint">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 15l-6-6-6 6" />
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="m18 15-6-6-6 6" />
             </svg>
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M6 9l6 6 6-6" />
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="m6 9 6 6 6-6" />
             </svg>
             to navigate
           </span>
           <span class="omni-footer-hint omni-footer-hint-desktop">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
+            <span class="omni-kbd-sm">ESC</span>
             to close
           </span>
         </div>
+        <div class="omni-footer-filter">
+          <span class="omni-filter-label">Filter</span>
+          <button
+            type="button"
+            class="omni-filter-button"
+            aria-expanded={filterOpen}
+            onclick={() => (filterOpen = !filterOpen)}
+          >
+            {FILTER_LABELS[filter]}
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </button>
+          {#if filterOpen}
+            <div class="omni-filter-menu" role="group" aria-label="Search filter">
+              {#each FILTER_OPTIONS as option}
+                <button
+                  type="button"
+                  aria-pressed={filter === option}
+                  class="omni-filter-option"
+                  class:omni-filter-option-active={filter === option}
+                  onclick={() => updateFilter(option)}
+                >
+                  {FILTER_LABELS[option]}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
       </div>
     </div>
   </div>

package/styles/command-grid-bundle.css

@@ -622,6 +622,7 @@ body:has(#nd-docs-layout.dark),
 }
 
 #nd-docs-layout .omni-group-label {
+  display: block !important;
   letter-spacing: 0.14em;
   color: color-mix(in srgb, var(--color-fd-foreground) 72%, transparent) !important;
 }

package/styles/command-grid.css

@@ -622,6 +622,7 @@ body:has(#nd-docs-layout.dark),
 }
 
 #nd-docs-layout .omni-group-label {
+  display: block !important;
   letter-spacing: 0.14em;
   color: color-mix(in srgb, var(--color-fd-foreground) 72%, transparent) !important;
 }

package/styles/omni.css

@@ -1,6 +1,6 @@
 /* ═══════════════════════════════════════════════════════════════════
- * Omni Command Palette — pixel-perfect sync with website/components/ui/omni-command-palette.tsx
- * Uses same CSS variables as docs so it auto-adapts to every theme.
+ * Omni Command Palette — core styles
+ * Uses fumadocs CSS variables so it auto-adapts to every theme.
  * ═══════════════════════════════════════════════════════════════════ */
 
 @keyframes omni-fade-in {
@@ -22,7 +22,7 @@
 @keyframes omni-scale-in {
   from {
     opacity: 0;
-    transform: translateX(-50%) scale(0.96) translateY(-4px);
+    transform: translateX(-50%) scale(0.98) translateY(-6px);
   }
   to {
     opacity: 1;
@@ -36,7 +36,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX(-50%) scale(0.96) translateY(-4px);
+    transform: translateX(-50%) scale(0.98) translateY(-6px);
   }
 }
 
@@ -49,150 +49,172 @@
   }
 }
 
-#nd-docs-layout .omni-spin {
+.omni-spin {
   animation: omni-spin 1s linear infinite;
 }
 
-#nd-docs-layout .omni-overlay {
+.omni-overlay {
   position: fixed;
   inset: 0;
-  z-index: 100;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(2px);
   animation: omni-fade-in 150ms ease-out;
 }
 
-#nd-docs-layout .omni-content {
+.omni-content {
+  --omni-content-top: clamp(5rem, 16vh, 7rem);
   position: fixed;
-  z-index: 101;
-  top: 18%;
+  z-index: 51;
+  top: var(--omni-content-top);
   left: 50%;
   transform: translateX(-50%);
-  width: min(720px, calc(100% - 32px));
-  border-radius: var(--radius, 0.75rem);
-  border: 1px solid var(--color-fd-border, #262626);
-  background: var(--color-fd-popover, #0c0c0c);
-  color: var(--color-fd-foreground, #fafafa);
-  box-shadow:
-    0 24px 60px -12px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(255, 255, 255, 0.04);
+  display: flex;
+  flex-direction: column;
+  width: min(720px, calc(100% - 1rem));
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
+  background: var(--color-fd-popover, #fafafa);
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+      ui-sans-serif, sans-serif);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   outline: none;
-  overflow: hidden;
+  overscroll-behavior: contain;
   animation: omni-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @media (max-width: 639px) {
-  #nd-docs-layout .omni-content {
-    top: 10%;
-    width: calc(100% - 24px);
-    max-height: 75vh;
-  }
-  #nd-docs-layout .omni-kbd {
-    display: none;
+  .omni-content {
+    --omni-content-top: 1rem;
+    top: var(--omni-content-top);
+    width: calc(100% - 1rem);
+    max-height: calc(100vh - 2rem);
   }
 }
 
 /* Header */
-#nd-docs-layout .omni-header {
+.omni-header {
   border-bottom: 1px solid var(--color-fd-border, #262626);
 }
-#nd-docs-layout .omni-search-row {
+.omni-search-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
+  padding: 0.75rem;
 }
-#nd-docs-layout .omni-search-icon {
+.omni-search-icon {
   color: var(--color-fd-muted-foreground, #a3a3a3);
   flex-shrink: 0;
 }
-#nd-docs-layout .omni-search-input {
+.omni-search-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.omni-search-input {
+  width: 0;
   flex: 1;
   background: transparent;
   outline: none;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--color-fd-foreground, #fafafa);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
   border: none;
 }
-#nd-docs-layout .omni-search-input::placeholder {
+.omni-search-input::placeholder {
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
-#nd-docs-layout .omni-kbd {
-  border-radius: 0.25rem;
-  background: var(--color-fd-muted, #262626);
-  padding: 0.125rem 0.375rem;
-  font-size: 10px;
+.omni-kbd {
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  background: transparent;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  font-family: inherit;
-  line-height: 1.4;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace);
+  line-height: 1rem;
 }
-#nd-docs-layout .omni-close-btn {
-  margin-left: 0.25rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
+.omni-close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  min-width: 2.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  padding: 0.375rem 0.5rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  transition: background 120ms;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  transition:
+    background 120ms,
+    color 120ms;
   cursor: pointer;
-  border: none;
   background: none;
 }
-#nd-docs-layout .omni-close-btn:hover {
-  background: var(--color-fd-muted, #262626);
+.omni-close-btn:hover {
+  color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
+  background: var(--color-fd-accent, #e5e5e5);
+}
+.omni-close-btn svg {
+  display: none;
 }
 
 /* Body / listbox */
-#nd-docs-layout .omni-body {
-  max-height: 60vh;
+.omni-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: min(540px, calc(100vh - var(--omni-content-top, 7rem) - 8rem));
   overflow: auto;
-  padding: 0.25rem;
+  overscroll-behavior: contain;
+  padding: 0.5rem;
 }
-#nd-docs-layout .omni-body::-webkit-scrollbar {
+.omni-body::-webkit-scrollbar {
   width: 6px;
 }
-#nd-docs-layout .omni-body::-webkit-scrollbar-track {
+.omni-body::-webkit-scrollbar-track {
   background: transparent;
 }
-#nd-docs-layout .omni-body::-webkit-scrollbar-thumb {
+.omni-body::-webkit-scrollbar-thumb {
   background: var(--color-fd-muted, #262626);
   border-radius: 3px;
 }
 
 /* Loading */
-#nd-docs-layout .omni-loading {
+.omni-loading {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.625rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  font-size: 0.75rem;
+  font-size: 0.875rem;
 }
 
 /* Groups */
-#nd-docs-layout .omni-group {
-  padding: 0.25rem 0;
+.omni-group {
+  padding: 0;
 }
-#nd-docs-layout .omni-group-label {
-  padding: 0.25rem 0.75rem;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  font-weight: 500;
+.omni-group-label {
+  display: none;
 }
-#nd-docs-layout .omni-group-items {
+.omni-group-items {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 }
 
 /* Items */
-#nd-docs-layout .omni-item {
-  display: flex;
+.omni-item {
+  position: relative;
+  display: block;
   width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  border-radius: calc(var(--radius, 0.75rem) - 4px);
-  padding: 0.5rem 0.75rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.875rem;
   text-align: left;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -202,73 +224,75 @@
   color: var(--color-fd-foreground, #fafafa);
   transition: background 80ms;
 }
-#nd-docs-layout .omni-item:hover,
-#nd-docs-layout .omni-item-active {
-  background: color-mix(in srgb, var(--color-fd-accent, #262626) 60%, transparent);
+.omni-item:hover,
+.omni-item-active {
+  background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
 }
-#nd-docs-layout .omni-item-active {
-  color: var(--color-fd-accent-foreground, #fafafa);
+.omni-item-active {
+  color: var(--color-fd-accent-foreground, #171717);
 }
-#nd-docs-layout .omni-item-disabled {
+.omni-item-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-#nd-docs-layout .omni-item-icon {
-  flex-shrink: 0;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
+.omni-item-icon {
+  display: none;
 }
-#nd-docs-layout .omni-item-active .omni-item-icon {
+.omni-item-active .omni-item-icon {
   color: var(--color-fd-accent-foreground, #fafafa);
 }
-#nd-docs-layout .omni-item-text {
-  flex: 1;
+.omni-item-text {
   min-width: 0;
 }
-#nd-docs-layout .omni-item-label {
+.omni-item-label {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  font-weight: 500;
+  line-height: 1.35;
 }
-#nd-docs-layout .omni-item-subtitle {
+.omni-item-subtitle {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
+  line-height: 1rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  opacity: 0.8;
+  opacity: 1;
 }
-#nd-docs-layout .omni-item-active .omni-item-subtitle {
-  color: var(--color-fd-accent-foreground, #fafafa);
-  opacity: 0.7;
+.omni-item-active .omni-item-subtitle {
+  color: var(--color-fd-muted-foreground, #737373);
+  opacity: 1;
 }
-#nd-docs-layout .omni-item-badge {
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  flex-shrink: 0;
+.omni-item-description {
+  min-width: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  margin-top: 0.625rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
+  color: color-mix(in srgb, var(--color-fd-popover-foreground, #272727) 82%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 400;
 }
-#nd-docs-layout a.omni-item-badge:hover {
-  color: var(--color-fd-foreground, #fafafa);
+.omni-item-badge {
+  display: none;
 }
-#nd-docs-layout .omni-item-ext {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  flex-shrink: 0;
-  transition:
-    color 100ms,
-    background 100ms;
-  text-decoration: none;
+.omni-item-ext {
+  display: none;
 }
-#nd-docs-layout .omni-item-ext:hover {
+.omni-item-ext:hover {
   color: var(--color-fd-foreground, #fafafa);
   background: var(--color-fd-muted, #262626);
 }
-#nd-docs-layout .omni-item-shortcuts {
+.omni-item-shortcuts {
   display: none;
   align-items: center;
   gap: 0.25rem;
@@ -276,50 +300,43 @@
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 @media (min-width: 640px) {
-  #nd-docs-layout .omni-item-shortcuts {
+  .omni-item-shortcuts {
     display: flex;
   }
 }
-#nd-docs-layout .omni-kbd-sm {
+.omni-kbd-sm {
   border-radius: 0.25rem;
   background: var(--color-fd-muted, #262626);
   padding: 0.125rem 0.25rem;
-  font-family: inherit;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace);
 }
-#nd-docs-layout .omni-item-chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  margin-left: 0.25rem;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  opacity: 0;
-  transition: opacity 120ms;
-  flex-shrink: 0;
-}
-#nd-docs-layout .omni-item:hover .omni-item-chevron {
-  opacity: 1;
+.omni-item-chevron {
+  display: none;
 }
-
 /* Highlight */
-#nd-docs-layout .omni-highlight {
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
-  padding: 0 2px;
-  color: inherit;
+.omni-highlight {
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--color-fd-primary, #ca8a04);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
 /* Empty states */
-#nd-docs-layout .omni-empty-group {
+.omni-empty-group {
   padding: 0.5rem 0.75rem;
   font-size: 0.75rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
-#nd-docs-layout .omni-empty {
-  padding: 2rem 0.75rem;
+.omni-empty {
+  padding: 1.5rem 0.75rem;
   text-align: center;
   font-size: 0.875rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
-#nd-docs-layout .omni-empty-icon {
+.omni-empty-icon {
   width: 2rem;
   height: 2rem;
   margin: 0 auto 0.5rem;
@@ -331,32 +348,107 @@
 }
 
 /* Footer */
-#nd-docs-layout .omni-footer {
+.omni-footer {
   border-top: 1px solid var(--color-fd-border, #262626);
+  background: color-mix(in srgb, var(--color-fd-secondary, #f5f5f5) 50%, transparent);
 }
-#nd-docs-layout .omni-footer-inner {
+.omni-footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0.75rem;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
   font-size: 0.75rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
-#nd-docs-layout .omni-footer-hints {
+.omni-footer-hints {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
-#nd-docs-layout .omni-footer-hint {
+.omni-footer-hint {
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  white-space: nowrap;
+}
+.omni-footer-hint svg {
+  box-sizing: border-box;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  background: color-mix(in srgb, var(--color-fd-muted, #e5e5e5) 70%, transparent);
+  color: var(--color-fd-muted-foreground, #737373);
+  flex-shrink: 0;
 }
-#nd-docs-layout .omni-footer-hint-desktop {
+.omni-footer-hint-desktop {
   display: none;
 }
+.omni-footer-filter {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  white-space: nowrap;
+}
 @media (min-width: 640px) {
-  #nd-docs-layout .omni-footer-hint-desktop {
+  .omni-footer-hint-desktop {
     display: flex;
   }
 }
+.omni-filter-label {
+  color: var(--color-fd-muted-foreground, #a3a3a3);
+}
+.omni-filter-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+}
+.omni-filter-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+.omni-filter-button:hover {
+  color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
+}
+.omni-filter-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.5rem);
+  z-index: 1;
+  width: 10rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  border-radius: 0.5rem;
+  background: var(--color-fd-popover, #fafafa);
+  padding: 0.25rem;
+  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45);
+}
+.omni-filter-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  cursor: pointer;
+  font: inherit;
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+}
+.omni-filter-option:hover,
+.omni-filter-option-active {
+  background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
+}

package/styles/pixel-border.css

@@ -844,7 +844,7 @@ body:has(#nd-docs-layout),
 }
 
 #nd-docs-layout .omni-search-input {
-  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif) !important;
 }
 
 #nd-docs-layout .omni-group-label {
@@ -856,6 +856,15 @@ body:has(#nd-docs-layout),
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
 }
 
+#nd-docs-layout .omni-footer-hint svg {
+  border-radius: 0 !important;
+}
+
+#nd-docs-layout .omni-filter-menu,
+#nd-docs-layout .omni-filter-option {
+  border-radius: 0 !important;
+}
+
 #nd-docs-layout .omni-highlight {
   background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent) !important;
   border-radius: 0 !important;