@specglass/theme-default 0.0.10 → 0.0.11

package/src/components/Tabs.astro

@@ -4,6 +4,7 @@
  *
  * Children must be <TabItem> components. The first tab is active by default.
  * Uses inline <script> for tab switching — NOT a React island.
+ * Features a smooth animated underline indicator on the active tab.
  *
  * Accessible: role="tablist", role="tab", role="tabpanel", aria-selected,
  * aria-controls, arrow key navigation.
@@ -20,7 +21,8 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
 
 <div class="tabs-container" data-tabs-id={tabGroupId}>
   <div role="tablist" class="tabs-header" aria-label="Tab options">
-    <!-- Tab buttons are generated client-side from TabItem children -->
+    <!-- Tab buttons and indicator are generated client-side from TabItem children -->
+    <span class="tabs-indicator" aria-hidden="true"></span>
   </div>
   <div class="tabs-content">
     <slot />
@@ -34,15 +36,29 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
    */
   .tabs-container {
     margin: 1.5rem 0;
-    border: 1px solid var(--tabs-border, #e5e7eb);
+    border: 1px solid var(--tabs-border, oklch(0.92 0.004 286.32));
     border-radius: 0.5rem;
     overflow: hidden;
   }
 
   .tabs-header {
     display: flex;
-    border-bottom: 1px solid var(--tabs-border, #e5e7eb);
-    background-color: var(--tabs-header-bg, #f9fafb);
+    position: relative;
+    border-bottom: 1px solid var(--tabs-border, oklch(0.92 0.004 286.32));
+    background-color: var(--tabs-header-bg, oklch(0.967 0.001 286.375));
+  }
+
+  /* Animated underline indicator */
+  .tabs-indicator {
+    position: absolute;
+    bottom: -1px;
+    height: 2px;
+    background-color: var(--color-primary, oklch(0.82 0.24 135));
+    transition:
+      left 150ms ease,
+      width 150ms ease;
+    pointer-events: none;
+    border-radius: 1px;
   }
 
   .tabs-header [role="tab"] {
@@ -52,26 +68,21 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--tabs-text, #6b7280);
-    border-bottom: 2px solid transparent;
-    transition:
-      color 0.15s,
-      border-color 0.15s;
+    color: var(--tabs-text, oklch(0.552 0.016 285.938));
+    transition: color 0.15s;
     white-space: nowrap;
   }
 
   .tabs-header [role="tab"]:hover {
-    color: var(--tabs-text-hover, #374151);
+    color: var(--tabs-text-hover, oklch(0.374 0.02 264));
   }
 
   .tabs-header [role="tab"][aria-selected="true"] {
-    color: var(--tabs-text-active, #111827);
-    border-bottom-color: var(--tabs-active-border, #3b82f6);
-    background-color: var(--tabs-active-bg, transparent);
+    color: var(--tabs-text-active, oklch(0.141 0.005 285.823));
   }
 
   .tabs-header [role="tab"]:focus-visible {
-    outline: 2px solid var(--tabs-focus-ring, #3b82f6);
+    outline: 2px solid var(--color-primary, oklch(0.82 0.24 135));
     outline-offset: -2px;
   }
 
@@ -89,19 +100,24 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
 
   /* Dark mode — remap CSS vars to dark surface colors */
   .dark .tabs-container {
-    --tabs-border: oklch(0.303 0.034 264.376);
-    --tabs-header-bg: oklch(0.179 0.04 264.376);
-    --tabs-text: oklch(0.708 0.014 264.364);
+    --tabs-border: oklch(0.274 0.006 286.033);
+    --tabs-header-bg: oklch(0.185 0.025 265);
+    --tabs-text: oklch(0.705 0.015 286.067);
     --tabs-text-hover: oklch(0.85 0.01 264);
     --tabs-text-active: oklch(0.95 0.005 264);
   }
 </style>
 
 <script>
-  document.addEventListener("DOMContentLoaded", () => {
+  function initTabs() {
     document.querySelectorAll<HTMLDivElement>("[data-tabs-id]").forEach((container) => {
+      // Skip already-initialized containers
+      if (container.dataset.tabsInit) return;
+      container.dataset.tabsInit = "true";
+
       const tablist = container.querySelector<HTMLDivElement>('[role="tablist"]');
       const contentArea = container.querySelector<HTMLDivElement>(".tabs-content");
+      const indicator = container.querySelector<HTMLSpanElement>(".tabs-indicator");
       if (!tablist || !contentArea) return;
 
       const tabItems = contentArea.querySelectorAll<HTMLDivElement>(".tab-item");
@@ -123,7 +139,7 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
         button.setAttribute("aria-selected", index === 0 ? "true" : "false");
         button.tabIndex = index === 0 ? 0 : -1;
         button.textContent = label;
-        tablist.appendChild(button);
+        tablist.insertBefore(button, indicator);
 
         // Set up panel
         item.id = panelId;
@@ -139,6 +155,14 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
       // Tab switching
       const tabs = tablist.querySelectorAll<HTMLButtonElement>('[role="tab"]');
 
+      /** Move the underline indicator to the active tab */
+      function moveIndicator(index: number) {
+        if (!indicator || !tabs[index]) return;
+        const tab = tabs[index];
+        indicator.style.left = `${tab.offsetLeft}px`;
+        indicator.style.width = `${tab.offsetWidth}px`;
+      }
+
       function activateTab(index: number) {
         tabs.forEach((tab, i) => {
           const isActive = i === index;
@@ -148,6 +172,7 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
         tabItems.forEach((item, i) => {
           item.classList.toggle("active", i === index);
         });
+        moveIndicator(index);
       }
 
       tabs.forEach((tab, index) => {
@@ -180,6 +205,12 @@ const tabGroupId = `tabs-${Math.random().toString(36).slice(2, 9)}`;
           tabs[nextIndex].focus();
         }
       });
+
+      // Initial indicator position (after DOM layout)
+      requestAnimationFrame(() => moveIndicator(0));
     });
-  });
+  }
+
+  initTabs();
+  document.addEventListener("astro:after-swap", initTabs);
 </script>

package/src/islands/CopyButton.tsx

@@ -44,7 +44,7 @@ export function CopyButton({ code }: CopyButtonProps) {
       onClick={handleCopy}
       aria-label={copied ? "Copied!" : "Copy code"}
       title={copied ? "Copied!" : "Copy code"}
-      className="sg-copy-btn"
+      className={`sg-copy-btn${copied ? " sg-copy-btn-copied" : ""}`}
       style={{
         position: "absolute",
         top: "0.5rem",
@@ -63,39 +63,41 @@ export function CopyButton({ code }: CopyButtonProps) {
         transition: "opacity 150ms ease, background-color 150ms ease, color 150ms ease",
       }}
     >
-      {copied ? (
-        /* Checkmark icon */
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          style={{ color: "#22c55e" }}
-        >
-          <polyline points="20 6 9 17 4 12" />
-        </svg>
-      ) : (
-        /* Copy icon */
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-        </svg>
-      )}
+      {/* Copy icon (visible by default) */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="sg-copy-icon"
+        aria-hidden="true"
+      >
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+      {/* Checkmark icon (visible when copied) */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="sg-copy-check"
+        style={{ color: "#22c55e" }}
+        aria-hidden="true"
+      >
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
     </button>
   );
 }
+

package/src/islands/LanguageToggle.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * LanguageToggle — Global language selector for code examples.
+ *
+ * Broadcasts the same `ndocs-language-change` CustomEvent that CodeTabs
+ * uses, so all code tab groups on the page (and future pages) sync to
+ * the selected language. Persists preference in localStorage.
+ *
+ * Designed for `client:idle` hydration in the site header.
+ */
+
+// Must match CodeTabs constants
+const LANGUAGE_CHANGE_EVENT = "ndocs-language-change";
+const DEFAULT_SYNC_KEY = "sdk-language";
+const STORAGE_KEY = `ndocs-preferred-${DEFAULT_SYNC_KEY}`;
+
+/** A selectable language option */
+interface LanguageOption {
+  /** Display label (e.g., "Python") */
+  label: string;
+  /** Language key matching CodeTabs (e.g., "python") */
+  value: string;
+}
+
+const DEFAULT_LANGUAGES: LanguageOption[] = [
+  { label: "Python", value: "python" },
+  { label: "Node.js", value: "nodejs" },
+  { label: "Go", value: "go" },
+  { label: "cURL", value: "curl" },
+];
+
+interface LanguageToggleProps {
+  /** Available languages. Defaults to Python/Node.js/Go/cURL */
+  languages?: LanguageOption[];
+  /** Sync key — must match CodeTabs syncKey. Default: "sdk-language" */
+  syncKey?: string;
+}
+
+function LanguageToggle({
+  languages = DEFAULT_LANGUAGES,
+  syncKey = DEFAULT_SYNC_KEY,
+}: LanguageToggleProps) {
+  const storageKey = `ndocs-preferred-${syncKey}`;
+  const [selected, setSelected] = useState(languages[0]?.value ?? "");
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Restore stored preference after hydration
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && languages.some((l) => l.value === stored)) {
+        setSelected(stored);
+      }
+    } catch { /* noop */ }
+  }, [storageKey, languages]);
+
+  // Listen for external language changes
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.syncKey === syncKey && languages.some((l) => l.value === detail.language)) {
+        setSelected(detail.language);
+      }
+    };
+    window.addEventListener(LANGUAGE_CHANGE_EVENT, handler);
+    return () => window.removeEventListener(LANGUAGE_CHANGE_EVENT, handler);
+  }, [syncKey, languages]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen]);
+
+  const handleSelect = useCallback(
+    (value: string) => {
+      setSelected(value);
+      setIsOpen(false);
+      try {
+        localStorage.setItem(storageKey, value);
+      } catch { /* noop */ }
+      window.dispatchEvent(
+        new CustomEvent(LANGUAGE_CHANGE_EVENT, {
+          detail: { syncKey, language: value },
+        }),
+      );
+    },
+    [storageKey, syncKey],
+  );
+
+  const selectedLabel = languages.find((l) => l.value === selected)?.label ?? selected;
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg",
+          "border border-border/50 bg-surface text-text-muted",
+          "hover:bg-surface-2 hover:text-text transition-colors duration-150",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        )}
+        aria-label={`Language: ${selectedLabel}`}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="shrink-0"
+          aria-hidden="true"
+        >
+          <polyline points="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+        </svg>
+        <span>{selectedLabel}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn("shrink-0 transition-transform duration-150", isOpen && "rotate-180")}
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          role="listbox"
+          aria-label="Select language"
+          className={cn(
+            "absolute right-0 top-full mt-1.5 z-50 min-w-32",
+            "rounded-xl border border-border/50 bg-surface shadow-xl shadow-black/20",
+            "py-1 animate-in fade-in-0 zoom-in-95 duration-150",
+          )}
+        >
+          {languages.map((lang) => (
+            <button
+              key={lang.value}
+              type="button"
+              role="option"
+              aria-selected={lang.value === selected}
+              className={cn(
+                "flex items-center w-full px-3 py-1.5 text-xs text-left rounded-md mx-auto",
+                "hover:bg-surface-2 transition-colors duration-150",
+                lang.value === selected
+                  ? "text-text font-medium"
+                  : "text-text-muted",
+              )}
+              onClick={() => handleSelect(lang.value)}
+            >
+              {lang.value === selected && (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2 shrink-0"
+                  aria-hidden="true"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+              {lang.value !== selected && <span className="w-[12px] mr-2" />}
+              {lang.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { LanguageToggle };
+export type { LanguageOption, LanguageToggleProps };

package/src/islands/SearchPalette.tsx

@@ -6,6 +6,7 @@ import {
   CommandInput,
   CommandList,
   CommandEmpty,
+  CommandGroup,
   CommandItem,
 } from "../ui/command";
 
@@ -50,11 +51,50 @@ interface PagefindAPI {
 
 const DEBOUNCE_MS = 150;
 const MAX_RESULTS = 8;
+const MAX_RECENT = 5;
+const RECENT_STORAGE_KEY = "ndocs-recent-searches";
+
+/** Load recent searches from localStorage */
+function loadRecentSearches(): string[] {
+  try {
+    const stored = localStorage.getItem(RECENT_STORAGE_KEY);
+    if (stored) return JSON.parse(stored);
+  } catch { /* noop */ }
+  return [];
+}
+
+/** Save a query to recent searches */
+function saveRecentSearch(query: string) {
+  try {
+    const recents = loadRecentSearches().filter((q) => q !== query);
+    recents.unshift(query);
+    localStorage.setItem(
+      RECENT_STORAGE_KEY,
+      JSON.stringify(recents.slice(0, MAX_RECENT)),
+    );
+  } catch { /* noop */ }
+}
+
+/** Group results by section (first URL segment) */
+function groupResults(results: PagefindResult[]): Map<string, PagefindResult[]> {
+  const groups = new Map<string, PagefindResult[]>();
+  for (const result of results) {
+    // Extract section from URL: /docs/getting-started → "Docs"
+    const segments = result.url.replace(/^\//, "").split("/");
+    const section = segments.length > 1
+      ? segments[0].charAt(0).toUpperCase() + segments[0].slice(1).replace(/-/g, " ")
+      : "Pages";
+    if (!groups.has(section)) groups.set(section, []);
+    groups.get(section)!.push(result);
+  }
+  return groups;
+}
 
 export function SearchPalette() {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<PagefindResult[]>([]);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isUnavailable, setIsUnavailable] = useState(false);
   const pagefindRef = useRef<PagefindAPI | null>(null);
@@ -140,6 +180,9 @@ export function SearchPalette() {
   // Reset state when closing
   const handleOpenChange = useCallback((isOpen: boolean) => {
     setOpen(isOpen);
+    if (isOpen) {
+      setRecentSearches(loadRecentSearches());
+    }
     if (!isOpen) {
       setTimeout(() => {
         setQuery("");
@@ -151,10 +194,22 @@ export function SearchPalette() {
   // Navigate to a search result
   const handleSelect = useCallback(
     (url: string) => {
+      if (query.trim()) {
+        saveRecentSearch(query.trim());
+      }
       handleOpenChange(false);
       window.location.href = url;
     },
-    [handleOpenChange],
+    [handleOpenChange, query],
+  );
+
+  // Handle selecting a recent search
+  const handleRecentSelect = useCallback(
+    (recentQuery: string) => {
+      setQuery(recentQuery);
+      performSearch(recentQuery);
+    },
+    [performSearch],
   );
 
   // Cleanup debounce on unmount
@@ -173,9 +228,9 @@ export function SearchPalette() {
         type="button"
         onClick={() => setOpen(true)}
         className={cn(
-          "inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md",
-          "border border-border bg-surface text-text-muted",
-          "hover:bg-hover-bg hover:text-text transition-colors",
+          "inline-flex items-center gap-2 px-3 py-1.5 text-[0.8125rem] rounded-lg",
+          "border border-border/50 bg-surface text-text-muted",
+          "hover:bg-surface-2 hover:text-text transition-colors",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         )}
         aria-label="Search documentation (⌘K)"
@@ -200,8 +255,8 @@ export function SearchPalette() {
         <kbd
           className={cn(
             "hidden sm:inline-flex items-center gap-0.5",
-            "rounded border border-border bg-surface-raised px-1.5 py-0.5",
-            "font-mono text-[10px] text-text-muted",
+            "rounded border border-border/50 bg-surface-2 px-1.5 py-0.5",
+            "font-mono text-[0.625rem] text-text-muted",
           )}
         >
           ⌘K
@@ -241,44 +296,71 @@ export function SearchPalette() {
             </CommandEmpty>
           )}
 
-          {/* Prompt state */}
+          {/* Recent searches — shown when no query */}
           {!isUnavailable && !isLoading && query.trim().length === 0 && results.length === 0 && (
-            <div className="px-4 py-6 text-center text-sm text-text-muted">
-              Type to search documentation…
-            </div>
+            <>
+              {recentSearches.length > 0 ? (
+                <CommandGroup heading="Recent searches">
+                  {recentSearches.map((recent) => (
+                    <CommandItem
+                      key={recent}
+                      value={`recent-${recent}`}
+                      onSelect={() => handleRecentSelect(recent)}
+                      className="flex items-center gap-2 px-3 py-2 text-sm"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-muted shrink-0" aria-hidden="true">
+                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                        <path d="M3 3v5h5" />
+                        <path d="M12 7v5l4 2" />
+                      </svg>
+                      <span className="text-text-muted">{recent}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : (
+                <div className="px-4 py-6 text-center text-sm text-text-muted">
+                  Type to search documentation…
+                </div>
+              )}
+            </>
           )}
 
-          {/* Results */}
+          {/* Grouped results */}
           {!isUnavailable &&
-            results.map((result) => (
-              <CommandItem
-                key={result.id}
-                value={result.id}
-                onSelect={() => handleSelect(result.url)}
-                className="flex flex-col items-start gap-1 px-3 py-2.5"
-              >
-                {/* Page title */}
-                <div className="font-medium text-text">
-                  {result.meta?.title ?? "Untitled"}
-                </div>
-
-                {/* Sub-result heading */}
-                {result.sub_results?.[0]?.title &&
-                  result.sub_results[0].title !== result.meta?.title && (
-                    <div className="text-xs text-text-muted">
-                      {result.sub_results[0].title}
+            results.length > 0 &&
+            Array.from(groupResults(results)).map(([section, sectionResults]) => (
+              <CommandGroup key={section} heading={section}>
+                {sectionResults.map((result) => (
+                  <CommandItem
+                    key={result.id}
+                    value={result.id}
+                    onSelect={() => handleSelect(result.url)}
+                    className="flex flex-col items-start gap-1 px-3 py-2.5"
+                  >
+                    {/* Page title */}
+                    <div className="font-medium text-text">
+                      {result.meta?.title ?? "Untitled"}
                     </div>
-                  )}
-
-                {/* Content snippet */}
-                <div
-                  className="text-xs text-text-muted line-clamp-2 [&_mark]:bg-primary/20 [&_mark]:text-text [&_mark]:rounded-sm [&_mark]:px-0.5"
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      result.sub_results?.[0]?.excerpt ?? result.excerpt ?? "",
-                  }}
-                />
-              </CommandItem>
+
+                    {/* Sub-result heading */}
+                    {result.sub_results?.[0]?.title &&
+                      result.sub_results[0].title !== result.meta?.title && (
+                        <div className="text-xs text-text-muted">
+                          {result.sub_results[0].title}
+                        </div>
+                      )}
+
+                    {/* Content snippet */}
+                    <div
+                      className="text-xs text-text-muted line-clamp-2 [&_mark]:bg-primary/20 [&_mark]:text-text [&_mark]:rounded-sm [&_mark]:px-0.5"
+                      dangerouslySetInnerHTML={{
+                        __html:
+                          result.sub_results?.[0]?.excerpt ?? result.excerpt ?? "",
+                      }}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
             ))}
         </CommandList>