@specglass/theme-default 0.0.10 → 0.0.11

package/dist/__tests__/design-tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/design-tokens.test.js

@@ -0,0 +1,107 @@
+import { describe, it, expect } from "vitest";
+import { readFile } from "node:fs/promises";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const GLOBAL_CSS_PATH = resolve(__dirname, "../styles/global.css");
+/**
+ * Token regression tests — ensure design tokens exist in global.css
+ * and have not been accidentally removed or renamed.
+ *
+ * These tests read the raw CSS file to verify token declarations.
+ */
+let css;
+describe("design-tokens", () => {
+    it("loads global.css", async () => {
+        css = await readFile(GLOBAL_CSS_PATH, "utf-8");
+        expect(css).toBeTruthy();
+    });
+    describe("surface layer tokens", () => {
+        it.each([
+            "--color-surface-0",
+            "--color-surface-1",
+            "--color-surface-2",
+            "--color-surface-0-dark",
+            "--color-surface-1-dark",
+            "--color-surface-2-dark",
+        ])("declares %s", (token) => {
+            expect(css).toContain(`${token}:`);
+        });
+    });
+    describe("typography tokens", () => {
+        it.each([
+            "--font-size-h1",
+            "--font-size-h2",
+            "--font-size-h3",
+            "--font-size-h4",
+        ])("declares %s", (token) => {
+            expect(css).toContain(`${token}:`);
+        });
+        it("h1 size is 2rem", () => {
+            expect(css).toContain("--font-size-h1: 2rem");
+        });
+        it("h2 size is 1.5rem", () => {
+            expect(css).toContain("--font-size-h2: 1.5rem");
+        });
+    });
+    describe("letter-spacing tokens", () => {
+        it.each([
+            "--tracking-tight",
+            "--tracking-snug",
+            "--tracking-body",
+            "--tracking-wide",
+        ])("declares %s", (token) => {
+            expect(css).toContain(`${token}:`);
+        });
+        it("tight tracking is -0.04em", () => {
+            expect(css).toContain("--tracking-tight: -0.04em");
+        });
+    });
+    describe("spacing tokens", () => {
+        it.each([
+            "--spacing-page",
+            "--spacing-section",
+            "--spacing-subsection",
+        ])("declares %s", (token) => {
+            expect(css).toContain(`${token}:`);
+        });
+        it("section spacing is 3rem", () => {
+            expect(css).toContain("--spacing-section: 3rem");
+        });
+        it("subsection spacing is 2rem", () => {
+            expect(css).toContain("--spacing-subsection: 2rem");
+        });
+    });
+    describe("dark mode remapping", () => {
+        it("remaps surface-0 in .dark", () => {
+            expect(css).toContain("--color-surface-0: var(--color-surface-0-dark)");
+        });
+        it("remaps surface-1 in .dark", () => {
+            expect(css).toContain("--color-surface-1: var(--color-surface-1-dark)");
+        });
+        it("remaps surface-2 in .dark", () => {
+            expect(css).toContain("--color-surface-2: var(--color-surface-2-dark)");
+        });
+    });
+    describe("legacy backward compat", () => {
+        it("preserves --color-surface alias", () => {
+            expect(css).toContain("--color-surface:");
+        });
+        it("preserves --color-surface-dark alias", () => {
+            expect(css).toContain("--color-surface-dark:");
+        });
+        it("preserves surface-dark as backward compat", () => {
+            expect(css).toContain("--color-surface-dark:");
+            expect(css).toContain("--color-surface:");
+        });
+    });
+    describe("surface tokens use oklch", () => {
+        it("surface-0 uses oklch", () => {
+            expect(css).toMatch(/--color-surface-0:\s*oklch\(/);
+        });
+        it("surface-0-dark uses oklch with Zinc hue", () => {
+            // Hue should be ~286 (neutral Zinc)
+            expect(css).toMatch(/--color-surface-0-dark:\s*oklch\([\d.]+ [\d.]+ 285\.823\)/);
+        });
+    });
+});

package/dist/islands/CopyButton.js

@@ -29,7 +29,7 @@ export function CopyButton({ code }) {
             console.warn("[CopyButton] Clipboard API unavailable");
         });
     }, [code]);
-    return (_jsx("button", { type: "button", onClick: handleCopy, "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", className: "sg-copy-btn", style: {
+    return (_jsxs("button", { type: "button", onClick: handleCopy, "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", className: `sg-copy-btn${copied ? " sg-copy-btn-copied" : ""}`, style: {
             position: "absolute",
             top: "0.5rem",
             right: "0.5rem",
@@ -45,9 +45,5 @@ export function CopyButton({ code }) {
             cursor: "pointer",
             opacity: copied ? 1 : 0,
             transition: "opacity 150ms ease, background-color 150ms ease, color 150ms ease",
-        }, children: copied ? (
-        /* Checkmark icon */
-        _jsx("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" }, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : (
-        /* Copy icon */
-        _jsxs("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", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })) }));
+        }, children: [_jsxs("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", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), _jsx("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", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })] }));
 }

package/dist/islands/LanguageToggle.d.ts

@@ -0,0 +1,16 @@
+/** A selectable language option */
+interface LanguageOption {
+    /** Display label (e.g., "Python") */
+    label: string;
+    /** Language key matching CodeTabs (e.g., "python") */
+    value: string;
+}
+interface LanguageToggleProps {
+    /** Available languages. Defaults to Python/Node.js/Go/cURL */
+    languages?: LanguageOption[];
+    /** Sync key — must match CodeTabs syncKey. Default: "sdk-language" */
+    syncKey?: string;
+}
+declare function LanguageToggle({ languages, syncKey, }: LanguageToggleProps): import("react/jsx-runtime").JSX.Element;
+export { LanguageToggle };
+export type { LanguageOption, LanguageToggleProps };

package/dist/islands/LanguageToggle.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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}`;
+const DEFAULT_LANGUAGES = [
+    { label: "Python", value: "python" },
+    { label: "Node.js", value: "nodejs" },
+    { label: "Go", value: "go" },
+    { label: "cURL", value: "curl" },
+];
+function LanguageToggle({ languages = DEFAULT_LANGUAGES, syncKey = DEFAULT_SYNC_KEY, }) {
+    const storageKey = `ndocs-preferred-${syncKey}`;
+    const [selected, setSelected] = useState(languages[0]?.value ?? "");
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(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) => {
+            const detail = e.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) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [isOpen]);
+    // Close on Escape
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handler = (e) => {
+            if (e.key === "Escape")
+                setIsOpen(false);
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [isOpen]);
+    const handleSelect = useCallback((value) => {
+        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 (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsxs("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", children: [_jsxs("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", children: [_jsx("polyline", { points: "16 18 22 12 16 6" }), _jsx("polyline", { points: "8 6 2 12 8 18" })] }), _jsx("span", { children: selectedLabel }), _jsx("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", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), isOpen && (_jsx("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"), children: languages.map((lang) => (_jsxs("button", { 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), children: [lang.value === selected && (_jsx("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", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })), lang.value !== selected && _jsx("span", { className: "w-[12px] mr-2" }), lang.label] }, lang.value))) }))] }));
+}
+export { LanguageToggle };

package/dist/islands/SearchPalette.js

@@ -1,13 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from "react";
 import { cn } from "../lib/utils";
-import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandItem, } from "../ui/command";
+import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, } from "../ui/command";
 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() {
+    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) {
+    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) {
+    const groups = new Map();
+    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([]);
+    const [recentSearches, setRecentSearches] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isUnavailable, setIsUnavailable] = useState(false);
     const pagefindRef = useRef(null);
@@ -80,6 +117,9 @@ export function SearchPalette() {
     // Reset state when closing
     const handleOpenChange = useCallback((isOpen) => {
         setOpen(isOpen);
+        if (isOpen) {
+            setRecentSearches(loadRecentSearches());
+        }
         if (!isOpen) {
             setTimeout(() => {
                 setQuery("");
@@ -89,9 +129,17 @@ export function SearchPalette() {
     }, []);
     // Navigate to a search result
     const handleSelect = useCallback((url) => {
+        if (query.trim()) {
+            saveRecentSearch(query.trim());
+        }
         handleOpenChange(false);
         window.location.href = url;
-    }, [handleOpenChange]);
+    }, [handleOpenChange, query]);
+    // Handle selecting a recent search
+    const handleRecentSelect = useCallback((recentQuery) => {
+        setQuery(recentQuery);
+        performSearch(recentQuery);
+    }, [performSearch]);
     // Cleanup debounce on unmount
     useEffect(() => {
         return () => {
@@ -100,9 +148,10 @@ export function SearchPalette() {
             }
         };
     }, []);
-    return (_jsxs("div", { "data-pagefind-ignore": "", children: [_jsxs("button", { 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", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Search documentation (\u2318K)", children: [_jsxs("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", "aria-hidden": "true", className: "shrink-0", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }), _jsx("span", { className: "hidden sm:inline", children: "Search\u2026" }), _jsx("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"), children: "\u2318K" })] }), _jsxs(CommandDialog, { open: open, onOpenChange: handleOpenChange, shouldFilter: false, dialogTitle: "Search documentation", children: [_jsx(CommandInput, { value: query, onValueChange: handleValueChange, placeholder: "Search documentation\u2026" }), _jsxs(CommandList, { children: [isUnavailable && (_jsxs("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: [_jsx("p", { className: "mb-1", children: "Search available after build" }), _jsxs("p", { className: "text-xs opacity-70", children: ["Run ", _jsx("code", { className: "bg-surface-raised px-1 rounded", children: "npx turbo build" }), " to generate the search index"] })] })), isLoading && !isUnavailable && (_jsx("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: "Searching\u2026" })), !isLoading && !isUnavailable && query.trim().length > 0 && (_jsxs(CommandEmpty, { children: ["No results found for \u201C", query, "\u201D"] })), !isUnavailable && !isLoading && query.trim().length === 0 && results.length === 0 && (_jsx("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: "Type to search documentation\u2026" })), !isUnavailable &&
-                                results.map((result) => (_jsxs(CommandItem, { value: result.id, onSelect: () => handleSelect(result.url), className: "flex flex-col items-start gap-1 px-3 py-2.5", children: [_jsx("div", { className: "font-medium text-text", children: result.meta?.title ?? "Untitled" }), result.sub_results?.[0]?.title &&
-                                            result.sub_results[0].title !== result.meta?.title && (_jsx("div", { className: "text-xs text-text-muted", children: result.sub_results[0].title })), _jsx("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 ?? "",
-                                            } })] }, result.id)))] }), (results.length > 0 || query.trim().length > 0) && !isUnavailable && (_jsx("div", { className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-text-muted", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "\u2191\u2193" }), "navigate"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "\u21B5" }), "open"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "esc" }), "close"] })] }) }))] })] }));
+    return (_jsxs("div", { "data-pagefind-ignore": "", children: [_jsxs("button", { type: "button", onClick: () => setOpen(true), className: cn("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 (\u2318K)", children: [_jsxs("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", "aria-hidden": "true", className: "shrink-0", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }), _jsx("span", { className: "hidden sm:inline", children: "Search\u2026" }), _jsx("kbd", { className: cn("hidden sm:inline-flex items-center gap-0.5", "rounded border border-border/50 bg-surface-2 px-1.5 py-0.5", "font-mono text-[0.625rem] text-text-muted"), children: "\u2318K" })] }), _jsxs(CommandDialog, { open: open, onOpenChange: handleOpenChange, shouldFilter: false, dialogTitle: "Search documentation", children: [_jsx(CommandInput, { value: query, onValueChange: handleValueChange, placeholder: "Search documentation\u2026" }), _jsxs(CommandList, { children: [isUnavailable && (_jsxs("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: [_jsx("p", { className: "mb-1", children: "Search available after build" }), _jsxs("p", { className: "text-xs opacity-70", children: ["Run ", _jsx("code", { className: "bg-surface-raised px-1 rounded", children: "npx turbo build" }), " to generate the search index"] })] })), isLoading && !isUnavailable && (_jsx("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: "Searching\u2026" })), !isLoading && !isUnavailable && query.trim().length > 0 && (_jsxs(CommandEmpty, { children: ["No results found for \u201C", query, "\u201D"] })), !isUnavailable && !isLoading && query.trim().length === 0 && results.length === 0 && (_jsx(_Fragment, { children: recentSearches.length > 0 ? (_jsx(CommandGroup, { heading: "Recent searches", children: recentSearches.map((recent) => (_jsxs(CommandItem, { value: `recent-${recent}`, onSelect: () => handleRecentSelect(recent), className: "flex items-center gap-2 px-3 py-2 text-sm", children: [_jsxs("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", children: [_jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), _jsx("path", { d: "M3 3v5h5" }), _jsx("path", { d: "M12 7v5l4 2" })] }), _jsx("span", { className: "text-text-muted", children: recent })] }, recent))) })) : (_jsx("div", { className: "px-4 py-6 text-center text-sm text-text-muted", children: "Type to search documentation\u2026" })) })), !isUnavailable &&
+                                results.length > 0 &&
+                                Array.from(groupResults(results)).map(([section, sectionResults]) => (_jsx(CommandGroup, { heading: section, children: sectionResults.map((result) => (_jsxs(CommandItem, { value: result.id, onSelect: () => handleSelect(result.url), className: "flex flex-col items-start gap-1 px-3 py-2.5", children: [_jsx("div", { className: "font-medium text-text", children: result.meta?.title ?? "Untitled" }), result.sub_results?.[0]?.title &&
+                                                result.sub_results[0].title !== result.meta?.title && (_jsx("div", { className: "text-xs text-text-muted", children: result.sub_results[0].title })), _jsx("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 ?? "",
+                                                } })] }, result.id))) }, section)))] }), (results.length > 0 || query.trim().length > 0) && !isUnavailable && (_jsx("div", { className: "flex items-center justify-between border-t border-border px-3 py-2 text-xs text-text-muted", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "\u2191\u2193" }), "navigate"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "\u21B5" }), "open"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px]", children: "esc" }), "close"] })] }) }))] })] }));
 }

package/dist/islands/ThemeToggle.js

@@ -38,5 +38,5 @@ export function ThemeToggle() {
         setIsDark(newIsDark);
         applyTheme(newIsDark ? "dark" : "light");
     }, []);
-    return (_jsx("button", { type: "button", onClick: toggleTheme, "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: "inline-flex items-center justify-center rounded-md p-2 text-text-muted hover:text-(--color-text) hover:bg-hover-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors", children: _jsxs("span", { className: "relative inline-flex items-center justify-center w-5 h-5", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: `absolute inset-0 transition-transform duration-300 ${isDark ? "rotate-0 scale-100" : "-rotate-90 scale-0"}`, children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2" }), _jsx("path", { d: "M12 20v2" }), _jsx("path", { d: "m4.93 4.93 1.41 1.41" }), _jsx("path", { d: "m17.66 17.66 1.41 1.41" }), _jsx("path", { d: "M2 12h2" }), _jsx("path", { d: "M20 12h2" }), _jsx("path", { d: "m6.34 17.66-1.41 1.41" }), _jsx("path", { d: "m19.07 4.93-1.41 1.41" })] }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: `absolute inset-0 transition-transform duration-300 ${!isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}`, children: _jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) })] }) }));
+    return (_jsxs("button", { type: "button", onClick: toggleTheme, "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: "relative inline-flex items-center justify-center w-8 h-8 rounded-lg text-text-muted hover:text-text hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: `absolute inset-0 m-auto transition-all duration-300 ${isDark ? "rotate-0 scale-100" : "-rotate-90 scale-0"}`, children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2" }), _jsx("path", { d: "M12 20v2" }), _jsx("path", { d: "m4.93 4.93 1.41 1.41" }), _jsx("path", { d: "m17.66 17.66 1.41 1.41" }), _jsx("path", { d: "M2 12h2" }), _jsx("path", { d: "M20 12h2" }), _jsx("path", { d: "m6.34 17.66-1.41 1.41" }), _jsx("path", { d: "m19.07 4.93-1.41 1.41" })] }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: `absolute inset-0 m-auto transition-all duration-300 ${!isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"}`, children: _jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) })] }));
 }

package/dist/scripts/code-block-enhancer.js

@@ -14,6 +14,8 @@
  * until the user actually clicks copy.
  */
 function initCopyButtons() {
+    const COPY_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="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>`;
+    const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sg-copy-check" style="color:#22c55e" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`;
     document
         .querySelectorAll(".code-block--fenced")
         .forEach((block) => {
@@ -26,14 +28,15 @@ function initCopyButtons() {
         btn.className = "sg-copy-btn-native sg-copy-btn";
         btn.setAttribute("aria-label", "Copy code");
         btn.title = "Copy code";
-        btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>`;
+        // Render both icons overlaid — CSS controls visibility
+        btn.innerHTML = COPY_SVG + CHECK_SVG;
         btn.addEventListener("click", () => {
             navigator.clipboard.writeText(code).then(() => {
-                btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#22c55e"><polyline points="20 6 9 17 4 12"/></svg>`;
+                btn.classList.add("sg-copy-btn-copied");
                 btn.setAttribute("aria-label", "Copied!");
                 btn.title = "Copied!";
                 setTimeout(() => {
-                    btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>`;
+                    btn.classList.remove("sg-copy-btn-copied");
                     btn.setAttribute("aria-label", "Copy code");
                     btn.title = "Copy code";
                 }, 2000);

package/dist/themes/notdiamond-dark.json

@@ -0,0 +1,168 @@
+{
+    "$schema": "https://raw.githubusercontent.com/shikijs/textmate-grammars-themes/main/packages/tm-themes/themes/dark-plus.json",
+    "name": "notdiamond-dark",
+    "displayName": "Not Diamond Dark",
+    "type": "dark",
+    "colors": {
+        "editor.background": "#0a0a0b",
+        "editor.foreground": "#e4e4e7",
+        "editorLineNumber.foreground": "#3f3f46",
+        "editorLineNumber.activeForeground": "#71717a",
+        "editor.selectionBackground": "#77e54430",
+        "editor.lineHighlightBackground": "#18181b"
+    },
+    "tokenColors": [
+        {
+            "scope": ["comment", "punctuation.definition.comment"],
+            "settings": {
+                "foreground": "#71717a",
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "scope": ["keyword", "storage.type", "storage.modifier"],
+            "settings": {
+                "foreground": "#77e544"
+            }
+        },
+        {
+            "scope": ["keyword.operator", "keyword.operator.assignment"],
+            "settings": {
+                "foreground": "#a1a1aa"
+            }
+        },
+        {
+            "scope": ["keyword.control.import", "keyword.control.export", "keyword.control.from"],
+            "settings": {
+                "foreground": "#77e544"
+            }
+        },
+        {
+            "scope": ["string", "string.quoted"],
+            "settings": {
+                "foreground": "#f38b32"
+            }
+        },
+        {
+            "scope": ["string.template", "punctuation.definition.string.template"],
+            "settings": {
+                "foreground": "#f38b32"
+            }
+        },
+        {
+            "scope": ["constant.numeric"],
+            "settings": {
+                "foreground": "#a78bfa"
+            }
+        },
+        {
+            "scope": ["constant.language"],
+            "settings": {
+                "foreground": "#a78bfa"
+            }
+        },
+        {
+            "scope": ["variable", "variable.other"],
+            "settings": {
+                "foreground": "#e4e4e7"
+            }
+        },
+        {
+            "scope": ["variable.parameter"],
+            "settings": {
+                "foreground": "#fca5a5"
+            }
+        },
+        {
+            "scope": ["entity.name.function", "support.function"],
+            "settings": {
+                "foreground": "#38bdf8"
+            }
+        },
+        {
+            "scope": ["entity.name.type", "entity.name.class", "support.type", "support.class"],
+            "settings": {
+                "foreground": "#67e8f9"
+            }
+        },
+        {
+            "scope": ["entity.name.tag"],
+            "settings": {
+                "foreground": "#77e544"
+            }
+        },
+        {
+            "scope": ["entity.other.attribute-name"],
+            "settings": {
+                "foreground": "#f38b32"
+            }
+        },
+        {
+            "scope": ["punctuation"],
+            "settings": {
+                "foreground": "#a1a1aa"
+            }
+        },
+        {
+            "scope": ["meta.brace"],
+            "settings": {
+                "foreground": "#a1a1aa"
+            }
+        },
+        {
+            "scope": ["punctuation.definition.tag"],
+            "settings": {
+                "foreground": "#71717a"
+            }
+        },
+        {
+            "scope": ["support.type.property-name"],
+            "settings": {
+                "foreground": "#38bdf8"
+            }
+        },
+        {
+            "scope": ["meta.object-literal.key"],
+            "settings": {
+                "foreground": "#e4e4e7"
+            }
+        },
+        {
+            "scope": ["variable.other.property"],
+            "settings": {
+                "foreground": "#e4e4e7"
+            }
+        },
+        {
+            "scope": ["markup.heading"],
+            "settings": {
+                "foreground": "#77e544",
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "scope": ["markup.bold"],
+            "settings": {
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "scope": ["markup.italic"],
+            "settings": {
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "scope": ["markup.inline.raw"],
+            "settings": {
+                "foreground": "#f38b32"
+            }
+        },
+        {
+            "scope": ["markup.list"],
+            "settings": {
+                "foreground": "#a1a1aa"
+            }
+        }
+    ]
+}