@farming-labs/astro-theme 0.2.38 → 0.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -119,8 +119,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.2.38",
-    "@farming-labs/astro": "0.2.38"
+    "@farming-labs/astro": "0.2.39",
+    "@farming-labs/docs": "0.2.39"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/SearchDialog.astro

@@ -21,15 +21,11 @@ const { config = null } = Astro.props;
           role="combobox"
           aria-expanded="true"
           aria-controls="fd-omni-listbox"
-          placeholder="Search documentation…"
+          placeholder="Search"
           autocomplete="off"
         />
-        <kbd class="omni-kbd">⌘ K</kbd>
         <button type="button" aria-label="Close" class="omni-close-btn" id="fd-omni-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>
@@ -65,27 +61,71 @@ const { config = null } = Astro.props;
         <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" aria-hidden="true">
-              <polyline points="9 18 15 12 9 6" />
+              <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" aria-hidden="true">
-              <path d="M18 15l-6-6-6 6" />
+              <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" aria-hidden="true">
-              <path d="M6 9l6 6 6-6" />
+              <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" aria-hidden="true">
-              <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"
+            id="fd-omni-filter-button"
+            aria-expanded="false"
+          >
+            <span id="fd-omni-filter-value">All</span>
+            <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>
+          <div
+            class="omni-filter-menu"
+            id="fd-omni-filter-menu"
+            role="group"
+            aria-label="Search filter"
+            style="display: none;"
+          >
+            <button
+              type="button"
+              aria-pressed="true"
+              class="omni-filter-option omni-filter-option-active"
+              data-filter="all"
+            >
+              All
+            </button>
+            <button
+              type="button"
+              aria-pressed="false"
+              class="omni-filter-option"
+              data-filter="pages"
+            >
+              Pages
+            </button>
+            <button
+              type="button"
+              aria-pressed="false"
+              class="omni-filter-option"
+              data-filter="inside"
+            >
+              Inside pages
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -96,6 +136,12 @@ const { config = null } = Astro.props;
   var STORAGE_KEY = "fd:omni:recents";
   var MAX_RECENTS = 8;
   var DEBOUNCE_MS = 150;
+  var BREADCRUMB_SEPARATOR = "\u00a0\u00a0>\u00a0\u00a0";
+  var FILTER_LABELS = {
+    all: "All",
+    pages: "Pages",
+    inside: "Inside pages"
+  };
 
   function getDialog() { return document.getElementById("fd-search-dialog"); }
   function getOverlay() { return document.getElementById("fd-omni-overlay"); }
@@ -109,6 +155,9 @@ const { config = null } = Astro.props;
   function getDocsItems() { return document.getElementById("fd-omni-docs-items"); }
   function getEmpty() { return document.getElementById("fd-omni-empty"); }
   function getEmptyText() { return document.getElementById("fd-omni-empty-text"); }
+  function getFilterButton() { return document.getElementById("fd-omni-filter-button"); }
+  function getFilterValue() { return document.getElementById("fd-omni-filter-value"); }
+  function getFilterMenu() { return document.getElementById("fd-omni-filter-menu"); }
 
   function getRecents() {
     try {
@@ -148,13 +197,115 @@ const { config = null } = Astro.props;
     }
   }
 
+  function breadcrumbForUrl(url) {
+    try {
+      var parsed = new URL(url, window.location.origin);
+      var parts = parsed.pathname.split("/").filter(Boolean).map(function (part) {
+        return decodeURIComponent(part)
+          .replace(/[-_]+/g, " ")
+          .replace(/\b\w/g, function (char) { return char.toUpperCase(); });
+      });
+      return parts.length ? parts.join(BREADCRUMB_SEPARATOR) : "Docs";
+    } catch (e) {
+      return "Docs";
+    }
+  }
+
+  function displayLabelForResult(result) {
+    if (result.section) return result.section;
+    var label = result.content || "";
+    var parts = label.split(/\s+[—–]\s+/).map(function (part) { return 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) {
+    var q = normalizeSearchPhrase(searchQuery);
+    var text = normalizeSearchPhrase(value);
+    if (!q || !text) return 0;
+    if (text === q) return 2;
+
+    var 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(function (word) { return word.replace(/^[^\p{L}\p{N}@]+|[^\p{L}\p{N}]+$/gu, ""); })
+        .filter(function (word) { return word.length > 1; })
+    ));
+  }
+
+  function isLiteralLookupQuery(searchQuery) {
+    var q = normalizeSearchPhrase(searchQuery);
+    var 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;
+    var 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 getCurrentSearchQuery() {
+    var input = getInput();
+    return input ? input.value.trim() : "";
+  }
+
+  function sortResultsForFilter(results, searchQuery) {
+    var q = typeof searchQuery === "string" ? searchQuery : getCurrentSearchQuery();
+    if (!q) return results;
+
+    return results.map(function (result, index) {
+      return { result: result, index: index };
+    }).sort(function (a, b) {
+      var aLiteralPriority = insideLiteralPriority(a.result, q);
+      var bLiteralPriority = insideLiteralPriority(b.result, q);
+      var literalDelta = bLiteralPriority - aLiteralPriority;
+      if (literalDelta) return literalDelta;
+      if (aLiteralPriority > 0 && bLiteralPriority > 0) return a.index - b.index;
+
+      var scoreDelta = (b.result.score || 0) - (a.result.score || 0);
+      if (scoreDelta) return scoreDelta;
+
+      return a.index - b.index;
+    }).map(function (item) {
+      return item.result;
+    });
+  }
+
   function openDialog() {
     var dialog = getDialog();
     if (dialog) {
       dialog.style.display = "block";
       document.body.style.overflow = "hidden";
+      currentFilter = "all";
+      setFilterMenuOpen(false);
+      renderFilter();
       bindListboxDelegation();
-      ensureListboxClickBound();
       setTimeout(function () {
         var input = getInput();
         if (input) { input.value = ""; input.focus(); }
@@ -168,6 +319,7 @@ const { config = null } = Astro.props;
     if (dialog) {
       dialog.style.display = "none";
       document.body.style.overflow = "";
+      setFilterMenuOpen(false);
     }
   }
 
@@ -178,26 +330,48 @@ const { config = null } = Astro.props;
     return el.textContent || el.innerText || "";
   }
 
-  var fileIconSvg = '<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>';
-  var externalSvg = '<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>';
-  var chevronSvg = '<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>';
+  function escapeHtml(value) {
+    return (value || "").replace(/[&<>"']/g, function (char) {
+      if (char === "&") return "&amp;";
+      if (char === "<") return "&lt;";
+      if (char === ">") return "&gt;";
+      if (char === '"') return "&quot;";
+      return "&#39;";
+    });
+  }
+
+  function highlightSnippet(text, query) {
+    var q = (query || "").trim();
+    if (!q) return escapeHtml(text);
+    var html = "";
+    var lastIndex = 0;
+    var regex = new RegExp(escapeRegExp(q), "gi");
+    var 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));
+  }
 
   function renderItem(item, active, isRecent) {
-    var label = (item.label || item.content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    var subtitle = (item.subtitle || item.description || (isRecent ? "Recently viewed" : "Page")).replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    var label = escapeHtml(item.label || item.content || "");
+    var subtitle = escapeHtml(item.subtitle || (isRecent ? "Recently viewed" : breadcrumbForUrl(item.url || "")));
+    var rawDescription = item.description || "";
+    var description = highlightSnippet(rawDescription, getInput() && getInput().value || "");
     var url = item.url || "#";
     var id = (item.id || url).replace(/[^a-zA-Z0-9-_]/g, "_");
-    var safeUrl = url.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
     var activeClass = active ? " omni-item-active" : "";
     return (
       '<div class="omni-item' + activeClass + '" data-id="' + id + '" data-url="' + url.replace(/"/g, "&quot;") + '" role="option" aria-selected="' + (active ? "true" : "false") + '" tabindex="-1">' +
-        '<div class="omni-item-icon">' + fileIconSvg + '</div>' +
         '<div class="omni-item-text">' +
-          '<div class="omni-item-label">' + label + '</div>' +
           '<div class="omni-item-subtitle">' + subtitle + '</div>' +
+          '<div class="omni-item-label">' + label + '</div>' +
+          (description ? '<div class="omni-item-description">' + description + '</div>' : '') +
         '</div>' +
-        '<a href="' + safeUrl + '" class="omni-item-ext" title="Open in new tab" target="_blank" rel="noopener noreferrer" data-ext-url="' + url.replace(/"/g, "&quot;") + '">' + externalSvg + '</a>' +
-        '<span class="omni-item-chevron" aria-hidden="true">' + chevronSvg + '</span>' +
       '</div>'
     );
   }
@@ -206,13 +380,77 @@ const { config = null } = Astro.props;
   var currentResults = [];
   var recentsList = [];
   var activeIndex = 0;
+  var currentFilter = "all";
+  var abortController = null;
+  var searchCache = new Map();
+  var currentResultsVersion = 0;
+  var visibleResultsCacheKey = "";
+  var visibleResultsCacheResults = [];
+
+  function setCurrentResults(results) {
+    currentResults = results;
+    currentResultsVersion += 1;
+    visibleResultsCacheKey = "";
+    visibleResultsCacheResults = [];
+  }
+
+  function visibleResults() {
+    var q = getCurrentSearchQuery();
+    var cacheKey = currentFilter + "\n" + q + "\n" + currentResultsVersion;
+    if (visibleResultsCacheKey === cacheKey) return visibleResultsCacheResults;
+
+    var results;
+    if (currentFilter === "pages") {
+      results = currentResults.filter(function (result) { return result.type === "page"; });
+    } else if (currentFilter === "inside") {
+      results = sortResultsForFilter(
+        currentResults.filter(function (result) { return result.type !== "page"; }),
+        q
+      );
+    } else {
+      results = sortResultsForFilter(currentResults, q);
+    }
+
+    visibleResultsCacheKey = cacheKey;
+    visibleResultsCacheResults = results;
+    return results;
+  }
 
   function allItems() {
     var q = (getInput() && getInput().value || "").trim();
-    if (q && currentResults.length) return currentResults;
+    var results = visibleResults();
+    if (q && results.length) return results;
     return recentsList;
   }
 
+  function setFilterMenuOpen(open) {
+    var menu = getFilterMenu();
+    var button = getFilterButton();
+    if (menu) menu.style.display = open ? "block" : "none";
+    if (button) button.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+
+  function renderFilter() {
+    var value = getFilterValue();
+    var menu = getFilterMenu();
+    if (value) value.textContent = FILTER_LABELS[currentFilter] || "All";
+    if (!menu) return;
+    Array.prototype.forEach.call(menu.querySelectorAll("[data-filter]"), function (option) {
+      var active = option.getAttribute("data-filter") === currentFilter;
+      option.setAttribute("aria-pressed", active ? "true" : "false");
+      option.classList.toggle("omni-filter-option-active", active);
+    });
+  }
+
+  function updateFilter(nextFilter) {
+    if (!FILTER_LABELS[nextFilter]) return;
+    currentFilter = nextFilter;
+    activeIndex = 0;
+    setFilterMenuOpen(false);
+    renderFilter();
+    render();
+  }
+
   function render() {
     var input = getInput();
     var q = input ? input.value.trim() : "";
@@ -223,12 +461,15 @@ const { config = null } = Astro.props;
     var docsItemsEl = getDocsItems();
     var emptyEl = getEmpty();
     var emptyText = getEmptyText();
+    var isLoading = !!loadingEl && loadingEl.style.display !== "none";
+    var results = visibleResults();
 
     recentsList = !q ? getRecents() : [];
     if (loadingEl && !q) loadingEl.style.display = "none";
+    renderFilter();
 
     if (!q) {
-      currentResults = [];
+      if (currentResults.length) setCurrentResults([]);
       if (recentGroup) recentGroup.style.display = recentsList.length ? "block" : "none";
       if (recentItemsEl) {
         recentItemsEl.innerHTML = recentsList.map(function (r, i) {
@@ -245,18 +486,22 @@ const { config = null } = Astro.props;
       if (emptyText) emptyText.textContent = "Type to search the docs, or browse recent items.";
     } else {
       if (recentGroup) recentGroup.style.display = "none";
-      if (docsGroup) docsGroup.style.display = currentResults.length ? "block" : "none";
+      if (docsGroup) docsGroup.style.display = results.length ? "block" : "none";
       if (docsItemsEl) {
-        docsItemsEl.innerHTML = currentResults.map(function (r, i) {
+        docsItemsEl.innerHTML = results.map(function (r, i) {
           return renderItem(
-            { id: r.url, label: r.content, url: r.url, subtitle: r.description || "Page" },
+            { id: r.url, label: displayLabelForResult(r), url: r.url, subtitle: breadcrumbForUrl(r.url), description: r.description || "" },
             i === activeIndex,
             false
           );
         }).join("");
       }
-      if (emptyEl) emptyEl.style.display = (currentResults.length === 0 && !loadingEl.style.display) ? "none" : (currentResults.length === 0 ? "block" : "none");
-      if (emptyText) emptyText.textContent = "No results found. Try a different query.";
+      if (emptyEl) emptyEl.style.display = (results.length === 0 && !isLoading) ? "block" : "none";
+      if (emptyText) {
+        emptyText.textContent = currentResults.length > 0
+          ? "No " + (FILTER_LABELS[currentFilter] || "all").toLowerCase() + " results found."
+          : "No results found. Try a different query.";
+      }
     }
 
     scrollActiveIntoView();
@@ -282,14 +527,6 @@ const { config = null } = Astro.props;
     var withinDialog = e.target.closest && e.target.closest("#fd-search-dialog");
     if (!withinDialog) return;
 
-    var ext = e.target.closest && e.target.closest("a.omni-item-ext");
-    if (ext) {
-      e.preventDefault();
-      e.stopPropagation();
-      var url = ext.getAttribute("data-ext-url") || ext.getAttribute("href");
-      navigateToUrl(url, true);
-      return;
-    }
     var row = e.target.closest && e.target.closest(".omni-item[data-url]");
     if (row) {
       e.preventDefault();
@@ -325,35 +562,6 @@ const { config = null } = Astro.props;
     document.addEventListener("mouseover", handleOmniItemMouseOver, true);
   }
 
-  function ensureListboxClickBound() {
-    var listbox = getListbox();
-    if (!listbox || listbox._fdOmniClickBound) return;
-    listbox._fdOmniClickBound = true;
-    function onListboxClick(e) {
-      var ext = e.target.closest && e.target.closest("a.omni-item-ext");
-      if (ext) {
-        e.preventDefault();
-        e.stopPropagation();
-        var url = ext.getAttribute("data-ext-url") || ext.getAttribute("href");
-        navigateToUrl(url, true);
-        return;
-      }
-      var row = e.target.closest && e.target.closest(".omni-item[data-url]");
-      if (row) {
-        e.preventDefault();
-        e.stopPropagation();
-        var url = row.getAttribute("data-url");
-        if (!url) return;
-        var labelEl = row.querySelector(".omni-item-label");
-        var label = labelEl ? labelEl.textContent : url;
-        saveRecent({ id: url, label: label, url: url });
-        closeDialog();
-        navigateToUrl(url, url.startsWith("http"));
-      }
-    }
-    listbox.addEventListener("click", onListboxClick, true);
-  }
-
   function scrollActiveIntoView() {
     var q = getInput() && getInput().value.trim();
     var container = q ? getDocsItems() : getRecentItems();
@@ -385,8 +593,10 @@ const { config = null } = Astro.props;
     var input = getInput();
     var q = (input && input.value || "").trim();
     if (getLoading()) getLoading().style.display = "none";
-    currentResults = [];
+    if (abortController) abortController.abort();
+    setCurrentResults([]);
     activeIndex = 0;
+    setFilterMenuOpen(false);
     if (getDocsGroup()) getDocsGroup().style.display = "none";
     if (getDocsItems()) getDocsItems().innerHTML = "";
     if (getRecentGroup()) getRecentGroup().style.display = !q && getRecents().length ? "block" : "none";
@@ -396,19 +606,38 @@ const { config = null } = Astro.props;
 
     clearTimeout(debounceTimer);
     if (!q) return;
+    var requestUrl = withLang("/api/docs?query=" + encodeURIComponent(q));
+    if (searchCache.has(requestUrl)) {
+      setCurrentResults(searchCache.get(requestUrl) || []);
+      activeIndex = 0;
+      render();
+      return;
+    }
     debounceTimer = setTimeout(function () {
+      var controller = new AbortController();
+      abortController = controller;
       if (getLoading()) getLoading().style.display = "flex";
-      fetch(withLang("/api/docs?query=" + encodeURIComponent(q)))
+      fetch(requestUrl, { signal: controller.signal })
         .then(function (res) { return res.ok ? res.json() : []; })
         .then(function (data) {
-          currentResults = Array.isArray(data) ? data : [];
+          if (controller.signal.aborted) return;
+          setCurrentResults(Array.isArray(data) ? data : []);
+          if (searchCache.size >= 20) {
+            var firstKey = searchCache.keys().next().value;
+            if (firstKey) searchCache.delete(firstKey);
+          }
+          searchCache.set(requestUrl, currentResults);
           activeIndex = 0;
           if (getLoading()) getLoading().style.display = "none";
           render();
         })
         .catch(function () {
+          if (controller.signal.aborted) return;
           if (getLoading()) getLoading().style.display = "none";
           render();
+        })
+        .finally(function () {
+          if (abortController === controller) abortController = null;
         });
     }, DEBOUNCE_MS);
   }
@@ -419,6 +648,8 @@ const { config = null } = Astro.props;
     var content = getContent();
     var input = getInput();
     var closeBtn = document.getElementById("fd-omni-close");
+    var filterButton = getFilterButton();
+    var filterMenu = getFilterMenu();
 
     if (!dialog || !input) return;
 
@@ -433,10 +664,41 @@ const { config = null } = Astro.props;
       else if (e.key === "Enter") { e.preventDefault(); executeActive(); }
     });
 
+    if (filterButton && !filterButton.hasAttribute("data-fd-bound")) {
+      filterButton.setAttribute("data-fd-bound", "true");
+      filterButton.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var menu = getFilterMenu();
+        var isOpen = !!menu && menu.style.display !== "none";
+        setFilterMenuOpen(!isOpen);
+      });
+    }
+
+    if (filterMenu && !filterMenu.hasAttribute("data-fd-bound")) {
+      filterMenu.setAttribute("data-fd-bound", "true");
+      filterMenu.addEventListener("click", function (e) {
+        var option = e.target.closest && e.target.closest("[data-filter]");
+        if (!option) return;
+        e.preventDefault();
+        e.stopPropagation();
+        updateFilter(option.getAttribute("data-filter"));
+      });
+    }
+
     document.addEventListener("keydown", function (e) {
       if (e.key === "Escape") closeDialog();
     });
 
+    if (!document.body.hasAttribute("data-fd-omni-filter-close")) {
+      document.body.setAttribute("data-fd-omni-filter-close", "true");
+      document.addEventListener("click", function (e) {
+        var target = e.target;
+        if (target && target.closest && target.closest(".omni-footer-filter")) return;
+        setFilterMenuOpen(false);
+      });
+    }
+
     if (!document.body.hasAttribute("data-fd-cmdk-registered")) {
       document.body.setAttribute("data-fd-cmdk-registered", "true");
       document.addEventListener("keydown", function (e) {

package/styles/command-grid-bundle.css

@@ -605,6 +605,7 @@ figure.shiki:has(figcaption) > div:first-child,
 }
 
 .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

@@ -605,6 +605,7 @@ figure.shiki:has(figcaption) > div:first-child,
 }
 
 .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 — core styles (clone of website/components/ui/omni-command-palette)
- * 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);
   }
 }
 
@@ -56,39 +56,40 @@
 .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;
 }
 
 .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) {
   .omni-content {
-    top: 10%;
-    width: calc(100% - 24px);
-    max-height: 75vh;
-  }
-  .omni-kbd {
-    display: none;
+    --omni-content-top: 1rem;
+    top: var(--omni-content-top);
+    width: calc(100% - 1rem);
+    max-height: calc(100vh - 2rem);
   }
 }
 
@@ -100,52 +101,77 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
+  padding: 0.75rem;
 }
 .omni-search-icon {
   color: var(--color-fd-muted-foreground, #a3a3a3);
   flex-shrink: 0;
 }
+.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;
 }
 .omni-search-input::placeholder {
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 .omni-kbd {
-  border-radius: 0.25rem;
-  background: var(--color-fd-muted, #262626);
-  padding: 0.125rem 0.375rem;
-  font-size: 10px;
+  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;
 }
 .omni-close-btn {
-  margin-left: 0.25rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
+  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;
 }
 .omni-close-btn:hover {
-  background: var(--color-fd-muted, #262626);
+  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 */
 .omni-body {
-  max-height: 60vh;
+  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;
 }
 .omni-body::-webkit-scrollbar {
   width: 6px;
@@ -163,36 +189,32 @@
   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 */
 .omni-group {
-  padding: 0.25rem 0;
+  padding: 0;
 }
 .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;
+  display: none;
 }
 .omni-group-items {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 }
 
 /* Items */
 .omni-item {
-  display: flex;
+  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;
@@ -204,10 +226,10 @@
 }
 .omni-item:hover,
 .omni-item-active {
-  background: color-mix(in srgb, var(--color-fd-accent, #262626) 60%, transparent);
+  background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
 }
 .omni-item-active {
-  color: var(--color-fd-accent-foreground, #fafafa);
+  color: var(--color-fd-accent-foreground, #171717);
 }
 .omni-item-disabled {
   opacity: 0.5;
@@ -215,51 +237,56 @@
 }
 
 .omni-item-icon {
-  flex-shrink: 0;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
+  display: none;
 }
 .omni-item-active .omni-item-icon {
   color: var(--color-fd-accent-foreground, #fafafa);
 }
 .omni-item-text {
-  flex: 1;
   min-width: 0;
 }
 .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;
 }
 .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;
 }
 .omni-item-active .omni-item-subtitle {
-  color: var(--color-fd-accent-foreground, #fafafa);
-  opacity: 0.7;
+  color: var(--color-fd-muted-foreground, #737373);
+  opacity: 1;
+}
+.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;
 }
 .omni-item-badge {
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  flex-shrink: 0;
+  display: none;
 }
 .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;
+  display: none;
 }
 .omni-item-ext:hover {
   color: var(--color-fd-foreground, #fafafa);
@@ -281,27 +308,20 @@
   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);
 }
 .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;
-}
-.omni-item:hover .omni-item-chevron {
-  opacity: 1;
+  display: none;
 }
-
 /* Highlight */
 .omni-highlight {
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
-  padding: 0 2px;
-  color: inherit;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--color-fd-primary, #ca8a04);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
 /* Empty states */
@@ -311,7 +331,7 @@
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 .omni-empty {
-  padding: 2rem 0.75rem;
+  padding: 1.5rem 0.75rem;
   text-align: center;
   font-size: 0.875rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
@@ -330,30 +350,105 @@
 /* Footer */
 .omni-footer {
   border-top: 1px solid var(--color-fd-border, #262626);
+  background: color-mix(in srgb, var(--color-fd-secondary, #f5f5f5) 50%, transparent);
 }
 .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);
 }
 .omni-footer-hints {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 .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;
 }
 .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) {
   .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

@@ -840,6 +840,56 @@ code:not(pre code) {
   color: var(--color-fd-foreground) !important;
 }
 
+/* ─── Omni Command Palette — pixel-border theme ──────────────────── */
+
+.omni-content {
+  border-radius: 0 !important;
+  border: 2px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
+  box-shadow:
+    4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)),
+    0 24px 60px -12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.omni-item,
+.omni-kbd,
+.omni-kbd-sm,
+.omni-close-btn,
+.omni-empty-icon {
+  border-radius: 0 !important;
+}
+
+.omni-kbd,
+.omni-kbd-sm {
+  border: 1px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
+}
+
+.omni-group-label,
+.omni-footer-inner {
+  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
+}
+
+.omni-search-input {
+  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif) !important;
+}
+
+.omni-group-label {
+  letter-spacing: 0.08em !important;
+}
+
+.omni-footer-hint svg {
+  border-radius: 0 !important;
+}
+
+.omni-filter-menu,
+.omni-filter-option {
+  border-radius: 0 !important;
+}
+
+.omni-highlight {
+  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent) !important;
+  border-radius: 0 !important;
+}
+
 /* ─── Feedback (pixel-border theme) ──────────────────────────────── */
 
 .fd-feedback-input,