@farming-labs/nuxt-theme 0.2.38 → 0.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -88,7 +88,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.2.38"
+    "@farming-labs/docs": "0.2.40"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/SearchDialog.vue

@@ -3,23 +3,41 @@
  * Omni command palette — same behavior as website/components/ui/omni-command-palette.tsx
  * and Astro SearchDialog: recents when empty, /api/docs search, keyboard nav, click to navigate.
  */
-import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { navigateTo } from "#app";
 import { useRoute } from "vue-router";
 
 const STORAGE_KEY = "fd:omni:recents";
 const MAX_RECENTS = 8;
 const DEBOUNCE_MS = 150;
+const BREADCRUMB_SEPARATOR = "\u00a0\u00a0>\u00a0\u00a0";
+const FILTER_LABELS = {
+  all: "All",
+  pages: "Pages",
+  inside: "Inside pages",
+} as const;
+const FILTER_OPTIONS = ["all", "pages", "inside"] as const;
 
 const emit = defineEmits<{ (e: "close"): void }>();
 const route = useRoute();
 
+type SearchFilter = keyof typeof FILTER_LABELS;
+
 const query = ref("");
-const currentResults = ref<{ content: string; url: string; description?: string }[]>([]);
+const currentResults = ref<
+  { content: string; url: string; description?: string; section?: string; type?: string }[]
+>([]);
 const loading = ref(false);
 const activeIndex = ref(0);
+const filter = ref<SearchFilter>("all");
+const filterOpen = ref(false);
 const inputEl = ref<HTMLInputElement | null>(null);
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+let abortController: AbortController | null = null;
+const searchCache = new Map<
+  string,
+  { content: string; url: string; description?: string; section?: string; type?: string }[]
+>();
 
 interface RecentEntry {
   id: string;
@@ -60,20 +78,174 @@ function withLang(url: string): string {
   }
 }
 
+function breadcrumbForUrl(url: string): string {
+  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: { content: string; section?: string; type?: string }): string {
+  if (result.section) return result.section;
+  const parts = result.content.split(/\s+[—–]\s+/).map((part) => part.trim()).filter(Boolean);
+  return result.type === "heading" && parts.length > 1 ? (parts[parts.length - 1] ?? result.content) : result.content;
+}
+
+function normalizeSearchPhrase(value?: string): string {
+  return (value ?? "").toLowerCase().replace(/[?!.,;:]+$/g, "").replace(/\s+/g, " ").trim();
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function literalMatchPriority(searchQuery: string, value?: string): number {
+  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: string): string[] {
+  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: string): boolean {
+  const q = normalizeSearchPhrase(searchQuery);
+  const words = tokenizeLiteralQuery(q);
+  return words.length > 0 && words.length <= 3 && words.join(" ") === q;
+}
+
+function hasDistinctSearchSection(result: {
+  content: string;
+  section?: string;
+  type?: string;
+}): boolean {
+  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: { content: string; description?: string; section?: string; type?: string },
+  searchQuery: string,
+): number {
+  if (!hasDistinctSearchSection(result) || !isLiteralLookupQuery(searchQuery)) return 0;
+  return Math.max(
+    literalMatchPriority(searchQuery, result.section),
+    literalMatchPriority(searchQuery, result.description),
+  );
+}
+
+function sortResultsForFilter(
+  results: { content: string; url: string; description?: string; section?: string; type?: string; score?: number }[],
+) {
+  const q = query.value.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: string): string {
+  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: string): string {
+  const q = query.value.trim();
+  if (!q) return escapeHtml(text);
+  let html = "";
+  let lastIndex = 0;
+  const regex = new RegExp(escapeRegExp(q), "gi");
+  let match: RegExpExecArray | null;
+
+  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));
+}
+
+const visibleResults = computed(() => {
+  if (filter.value === "pages") return currentResults.value.filter((result) => result.type === "page");
+  if (filter.value === "inside") {
+    return sortResultsForFilter(currentResults.value.filter((result) => result.type !== "page"));
+  }
+  return sortResultsForFilter(currentResults.value);
+});
+
 const allItems = computed(() => {
   const q = query.value.trim();
-  if (q && currentResults.value.length) return currentResults.value.map((r) => ({ id: r.url, label: r.content, url: r.url, subtitle: r.description ?? "Page" }));
+  if (q && visibleResults.value.length) {
+    return visibleResults.value.map((r) => ({
+      id: r.url,
+      label: displayLabelForResult(r),
+      url: r.url,
+      subtitle: breadcrumbForUrl(r.url),
+      description: r.description,
+      descriptionHtml: r.description ? highlightSnippet(r.description) : "",
+    }));
+  }
   return recentsList.value.map((r) => ({ id: r.id, label: r.label, url: r.url, subtitle: "Recently viewed" }));
 });
 
 const showRecents = computed(() => !query.value.trim());
-const showDocs = computed(() => !!query.value.trim() && currentResults.value.length > 0);
+const showDocs = computed(() => !!query.value.trim() && visibleResults.value.length > 0);
 const showEmpty = computed(() => {
-  if (query.value.trim()) return currentResults.value.length === 0 && !loading.value;
+  if (query.value.trim()) return visibleResults.value.length === 0 && !loading.value;
   return recentsList.value.length === 0;
 });
 const emptyText = computed(() =>
-  query.value.trim() ? "No results found. Try a different query." : "Type to search the docs, or browse recent items.",
+  query.value.trim()
+    ? currentResults.value.length > 0
+      ? `No ${FILTER_LABELS[filter.value].toLowerCase()} results found.`
+      : "No results found. Try a different query."
+    : "Type to search the docs, or browse recent items.",
 );
 
 function loadRecents() {
@@ -85,6 +257,12 @@ function close() {
   emit("close");
 }
 
+function updateFilter(nextFilter: SearchFilter) {
+  filter.value = nextFilter;
+  filterOpen.value = false;
+  activeIndex.value = 0;
+}
+
 function executeItem(item: { url: string; label?: string; content?: string }) {
   const label = item.label ?? item.content ?? item.url;
   const localizedUrl = withLang(item.url);
@@ -130,24 +308,51 @@ function onInput() {
   loading.value = false;
   currentResults.value = [];
   activeIndex.value = 0;
+  filterOpen.value = false;
+  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.value = cached;
+    return;
+  }
   debounceTimer = setTimeout(async () => {
+    const controller = new AbortController();
+    abortController = controller;
     loading.value = 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.value = 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.value = nextResults;
       activeIndex.value = 0;
     } catch {
+      if (controller.signal.aborted) return;
       currentResults.value = [];
     } finally {
-      loading.value = false;
+      if (abortController === controller) {
+        abortController = null;
+        loading.value = false;
+      }
     }
   }, DEBOUNCE_MS);
 }
 
 watch(query, onInput);
+watch(filter, () => {
+  activeIndex.value = 0;
+});
+watch(visibleResults, () => {
+  if (activeIndex.value >= visibleResults.value.length) activeIndex.value = 0;
+});
 
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === "Escape") {
@@ -183,16 +388,6 @@ function onRowClick(item: { url: string; label?: string; content?: string }) {
   executeItem(item);
 }
 
-function onExternalClick(e: Event, url: string) {
-  e.preventDefault();
-  e.stopPropagation();
-  try {
-    window.open(withLang(url), "_blank", "noopener,noreferrer");
-  } catch {
-    window.location.href = withLang(url);
-  }
-}
-
 function onRowMouseEnter(container: "recent" | "docs", index: number) {
   activeIndex.value = index;
 }
@@ -204,6 +399,12 @@ onMounted(() => {
     inputEl.value?.focus();
   });
 });
+
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.body.style.overflow = "";
+  if (debounceTimer) clearTimeout(debounceTimer);
+  abortController?.abort();
+});
 </script>
 
 <template>
@@ -230,16 +431,12 @@ onMounted(() => {
             role="combobox"
             aria-expanded="true"
             aria-controls="fd-omni-listbox"
-            placeholder="Search documentation…"
+            placeholder="Search"
             autocomplete="off"
             @keydown="handleKeydown"
           />
-          <kbd class="omni-kbd">⌘ K</kbd>
           <button type="button" aria-label="Close" class="omni-close-btn" @click="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>
@@ -267,35 +464,10 @@ onMounted(() => {
               @click="onRowClick(r)"
               @mouseenter="onRowMouseEnter('recent', i)"
             >
-              <div class="omni-item-icon">
-                <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>
-              </div>
               <div class="omni-item-text">
-                <div class="omni-item-label">{{ r.label }}</div>
                 <div class="omni-item-subtitle">Recently viewed</div>
+                <div class="omni-item-label">{{ r.label }}</div>
               </div>
-              <a
-                :href="r.url"
-                class="omni-item-ext"
-                title="Open in new tab"
-                target="_blank"
-                rel="noopener noreferrer"
-                @click.prevent="onExternalClick($event, r.url)"
-              >
-                <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>
-              </a>
-              <span class="omni-item-chevron" aria-hidden="true">
-                <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>
-              </span>
             </div>
           </div>
         </div>
@@ -304,8 +476,8 @@ onMounted(() => {
           <div class="omni-group-label">Documentation</div>
           <div id="fd-omni-docs-items" class="omni-group-items">
             <div
-              v-for="(r, i) in currentResults"
-              :key="r.url"
+              v-for="(r, i) in allItems"
+              :key="r.id"
               class="omni-item"
               :class="{ 'omni-item-active': showDocs && i === activeIndex }"
               :data-url="r.url"
@@ -315,35 +487,15 @@ onMounted(() => {
               @click="onRowClick(r)"
               @mouseenter="onRowMouseEnter('docs', i)"
             >
-              <div class="omni-item-icon">
-                <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>
-              </div>
               <div class="omni-item-text">
-                <div class="omni-item-label">{{ r.content }}</div>
-                <div class="omni-item-subtitle">{{ r.description ?? "Page" }}</div>
+                <div class="omni-item-subtitle">{{ r.subtitle }}</div>
+                <div class="omni-item-label">{{ r.label }}</div>
+                <div
+                  v-if="r.description"
+                  class="omni-item-description"
+                  v-html="r.descriptionHtml"
+                />
               </div>
-              <a
-                :href="r.url"
-                class="omni-item-ext"
-                title="Open in new tab"
-                target="_blank"
-                rel="noopener noreferrer"
-                @click.prevent="onExternalClick($event, r.url)"
-              >
-                <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>
-              </a>
-              <span class="omni-item-chevron" aria-hidden="true">
-                <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>
-              </span>
             </div>
           </div>
         </div>
@@ -363,28 +515,53 @@ onMounted(() => {
         <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"
+              @click="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>
+            <div v-if="filterOpen" class="omni-filter-menu" role="group" aria-label="Search filter">
+              <button
+                v-for="option in FILTER_OPTIONS"
+                :key="option"
+                type="button"
+                :aria-pressed="filter === option"
+                class="omni-filter-option"
+                :class="{ 'omni-filter-option-active': filter === option }"
+                @click="updateFilter(option)"
+              >
+                {{ FILTER_LABELS[option] }}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

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,20 +1,28 @@
 /* ═══════════════════════════════════════════════════════════════════
- * 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 {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes omni-fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 @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;
@@ -28,13 +36,19 @@
   }
   to {
     opacity: 0;
-    transform: translateX(-50%) scale(0.96) translateY(-4px);
+    transform: translateX(-50%) scale(0.98) translateY(-6px);
   }
 }
+
 @keyframes omni-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
+
 .omni-spin {
   animation: omni-spin 1s linear infinite;
 }
@@ -42,38 +56,44 @@
 .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-content-top: 1rem;
+    top: var(--omni-content-top);
+    width: calc(100% - 1rem);
+    max-height: calc(100vh - 2rem);
   }
-  .omni-kbd { display: none; }
 }
 
+/* Header */
 .omni-header {
   border-bottom: 1px solid var(--color-fd-border, #262626);
 }
@@ -81,90 +101,120 @@
   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;
+}
+.omni-body::-webkit-scrollbar-track {
+  background: transparent;
 }
-.omni-body::-webkit-scrollbar { width: 6px; }
-.omni-body::-webkit-scrollbar-track { background: transparent; }
 .omni-body::-webkit-scrollbar-thumb {
   background: var(--color-fd-muted, #262626);
   border-radius: 3px;
 }
 
+/* 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 */
 .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;
@@ -176,81 +226,112 @@
 }
 .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;
   cursor: not-allowed;
 }
+
 .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-text {
+  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);
   background: var(--color-fd-muted, #262626);
 }
-.omni-item-chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  margin-left: 0.25rem;
+.omni-item-shortcuts {
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 10px;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  opacity: 0;
-  transition: opacity 120ms;
-  flex-shrink: 0;
 }
-.omni-item:hover .omni-item-chevron {
-  opacity: 1;
+@media (min-width: 640px) {
+  .omni-item-shortcuts {
+    display: flex;
+  }
+}
+.omni-kbd-sm {
+  border-radius: 0.25rem;
+  background: var(--color-fd-muted, #262626);
+  padding: 0.125rem 0.25rem;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace);
+}
+.omni-item-chevron {
+  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 */
+.omni-empty-group {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  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);
@@ -265,28 +346,109 @@
   border-radius: 9999px;
   background: var(--color-fd-muted, #262626);
 }
+
+/* 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;
 }
-.omni-footer-hint-desktop { display: none; }
 @media (min-width: 640px) {
-  .omni-footer-hint-desktop { display: flex; }
+  .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

@@ -841,6 +841,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,