@specglass/theme-default 0.0.2

package/dist/utils/shiki.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared Shiki highlighter utility for CodeBlock components.
+ *
+ * Uses a module-level cached highlighter instance so we don't
+ * pay the startup cost on every render. Common languages are
+ * pre-loaded at initialization; additional languages are loaded
+ * on demand. Output uses `defaultColor: false` which emits CSS
+ * variables (--shiki-light, --shiki-dark) instead of hardcoded
+ * inline colors — matching the fenced code block rendering path.
+ */
+export interface HighlightOptions {
+    /** Line numbers to highlight (1-indexed) */
+    highlightLines?: number[];
+}
+/**
+ * Syntax-highlight `code` using Shiki dual-theme (github-light / github-dark).
+ * Returns raw HTML string with CSS variable tokens — ready for `set:html`.
+ */
+export declare function highlight(code: string, lang: string, options?: HighlightOptions): Promise<string>;
+//# sourceMappingURL=shiki.d.ts.map

package/dist/utils/shiki.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../../src/utils/shiki.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAiBD;;;GAGG;AACH,wBAAsB,SAAS,CAC7B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,gBAAgB,GACzB,OAAO,CAAC,MAAM,CAAC,CAuDjB"}

package/dist/utils/shiki.js

@@ -0,0 +1,84 @@
+/**
+ * Shared Shiki highlighter utility for CodeBlock components.
+ *
+ * Uses a module-level cached highlighter instance so we don't
+ * pay the startup cost on every render. Common languages are
+ * pre-loaded at initialization; additional languages are loaded
+ * on demand. Output uses `defaultColor: false` which emits CSS
+ * variables (--shiki-light, --shiki-dark) instead of hardcoded
+ * inline colors — matching the fenced code block rendering path.
+ */
+import { createHighlighter } from "shiki";
+let highlighter = null;
+/**
+ * Common language shorthand aliases that Shiki may not auto-resolve.
+ */
+const LANG_ALIASES = {
+    ts: "typescript",
+    js: "javascript",
+    py: "python",
+    rb: "ruby",
+    sh: "bash",
+    shell: "bash",
+    yml: "yaml",
+    md: "markdown",
+    mdx: "markdown",
+};
+/**
+ * Syntax-highlight `code` using Shiki dual-theme (github-light / github-dark).
+ * Returns raw HTML string with CSS variable tokens — ready for `set:html`.
+ */
+export async function highlight(code, lang, options) {
+    if (!highlighter) {
+        highlighter = await createHighlighter({
+            themes: ["github-light", "github-dark"],
+            langs: [
+                "typescript",
+                "javascript",
+                "python",
+                "bash",
+                "json",
+                "yaml",
+                "html",
+                "css",
+                "markdown",
+                "tsx",
+                "jsx",
+                "ruby",
+                "go",
+                "rust",
+                "sql",
+                "graphql",
+                "diff",
+                "text",
+            ],
+        });
+    }
+    // Normalize common aliases
+    lang = LANG_ALIASES[lang] ?? lang;
+    // Load language on demand if not already loaded
+    const loaded = highlighter.getLoadedLanguages();
+    if (!loaded.includes(lang)) {
+        try {
+            await highlighter.loadLanguage(lang);
+        }
+        catch {
+            // Unknown language — fall back to plaintext
+            lang = "text";
+        }
+    }
+    // Build decorations for line highlighting
+    const lines = code.split("\n");
+    const decorations = options?.highlightLines?.map((line) => ({
+        start: { line: line - 1, character: 0 },
+        end: { line: line - 1, character: lines[line - 1]?.length ?? 0 },
+        properties: { class: "highlighted" },
+    }));
+    return highlighter.codeToHtml(code, {
+        lang,
+        themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: false,
+        ...(decorations?.length ? { decorations } : {}),
+    });
+}
+//# sourceMappingURL=shiki.js.map

package/dist/utils/shiki.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki.js","sourceRoot":"","sources":["../../src/utils/shiki.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAE5D,IAAI,WAAW,GAAuB,IAAI,CAAC;AAO3C;;GAEG;AACH,MAAM,YAAY,GAA2B;IAC3C,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,EAAE,EAAE,UAAU;IACd,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,SAAS,CAC7B,IAAY,EACZ,IAAY,EACZ,OAA0B;IAE1B,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,WAAW,GAAG,MAAM,iBAAiB,CAAC;YACpC,MAAM,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC;YACvC,KAAK,EAAE;gBACL,YAAY;gBACZ,YAAY;gBACZ,QAAQ;gBACR,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,MAAM;gBACN,KAAK;gBACL,UAAU;gBACV,KAAK;gBACL,KAAK;gBACL,MAAM;gBACN,IAAI;gBACJ,MAAM;gBACN,KAAK;gBACL,SAAS;gBACT,MAAM;gBACN,MAAM;aACP;SACF,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B;IAC3B,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;IAElC,gDAAgD;IAChD,MAAM,MAAM,GAAG,WAAW,CAAC,kBAAkB,EAAE,CAAC;IAChD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAa,CAAC,EAAE,CAAC;QACpC,IAAI,CAAC;YACH,MAAM,WAAW,CAAC,YAAY,CAAC,IAAa,CAAC,CAAC;QAChD,CAAC;QAAC,MAAM,CAAC;YACP,4CAA4C;YAC5C,IAAI,GAAG,MAAM,CAAC;QAChB,CAAC;IACH,CAAC;IAED,0CAA0C;IAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,WAAW,GAAG,OAAO,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1D,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;QACvC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,EAAE;QAChE,UAAU,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE;KACrC,CAAC,CAAC,CAAC;IAEJ,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE;QAClC,IAAI;QACJ,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE;QACtD,YAAY,EAAE,KAAK;QACnB,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAChD,CAAC,CAAC;AACL,CAAC"}

package/dist/utils/sidebar-helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Sidebar navigation helpers — shared logic used by both
+ * `Sidebar.astro` and its unit tests.
+ */
+import type { NavItem } from "@specglass/core";
+/** Filter out hidden items from a navigation list. */
+export declare function filterVisibleItems(items: NavItem[]): NavItem[];
+/** Check if this item or any descendant is the current page. */
+export declare function isActiveOrAncestor(item: NavItem, currentSlug: string): boolean;
+//# sourceMappingURL=sidebar-helpers.d.ts.map

package/dist/utils/sidebar-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/sidebar-helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,sDAAsD;AACtD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAE9D;AAED,gEAAgE;AAChE,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,MAAM,GAClB,OAAO,CAQT"}

package/dist/utils/sidebar-helpers.js

@@ -0,0 +1,14 @@
+/** Filter out hidden items from a navigation list. */
+export function filterVisibleItems(items) {
+    return items.filter((item) => !item.hidden);
+}
+/** Check if this item or any descendant is the current page. */
+export function isActiveOrAncestor(item, currentSlug) {
+    if (item.type === "page" && item.slug === currentSlug)
+        return true;
+    if (item.children) {
+        return item.children.some((child) => isActiveOrAncestor(child, currentSlug));
+    }
+    return false;
+}
+//# sourceMappingURL=sidebar-helpers.js.map

package/dist/utils/sidebar-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-helpers.js","sourceRoot":"","sources":["../../src/utils/sidebar-helpers.ts"],"names":[],"mappings":"AAMA,sDAAsD;AACtD,MAAM,UAAU,kBAAkB,CAAC,KAAgB;IACjD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9C,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,kBAAkB,CAChC,IAAa,EACb,WAAmB;IAEnB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACnE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAClC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,CACvC,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/utils/theme-css.d.ts

@@ -0,0 +1,21 @@
+import type { SpecglassConfig } from "@specglass/core";
+/**
+ * Generates a CSS string with custom property overrides from the theme config.
+ *
+ * Brand tokens (primaryColor, fonts) are set at `:root` and apply to both modes.
+ * Surface colors support two formats:
+ * - `"#0a0a0f"` (string) → sets `-dark` variant only (backward compat)
+ * - `{ light: "#fff", dark: "#000" }` → sets both base and `-dark` variants
+ *
+ * Returns an empty string if no theme config values are set,
+ * allowing the @theme defaults to apply.
+ *
+ * @example
+ * ```ts
+ * const css = generateThemeCSS(config);
+ * // String value: ":root { --color-surface-dark: #0a0a0f; }"
+ * // Pair value:   ":root { --color-surface: #fff; --color-surface-dark: #0a0a0f; }"
+ * ```
+ */
+export declare function generateThemeCSS(config: SpecglassConfig): string;
+//# sourceMappingURL=theme-css.d.ts.map

package/dist/utils/theme-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/utils/theme-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AA8CvD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAoChE"}

package/dist/utils/theme-css.js

@@ -0,0 +1,77 @@
+/**
+ * CSS custom property mapping from theme config.
+ *
+ * Maps config values to CSS custom properties that override
+ * the Tailwind @theme design tokens. This implements the config-level
+ * tier of the three-tier customization system.
+ *
+ * The generated CSS is injected as a <style> block in the layout <head>,
+ * ensuring config values take precedence over @theme defaults.
+ */
+/** Properties that apply globally (brand colors, fonts) — always :root */
+const ROOT_CSS_MAP = [
+    { configPath: (t) => t.primaryColor ?? t.colors?.primary, cssProperty: "--color-primary" },
+    { configPath: (t) => t.accentColor ?? t.colors?.accent, cssProperty: "--color-primary-light" },
+    { configPath: (t) => t.fontFamily, cssProperty: "--font-sans" },
+    { configPath: (t) => t.codeFontFamily, cssProperty: "--font-mono" },
+];
+const COLOR_PAIR_MAP = [
+    { configPath: (t) => t.colors?.background, lightProperty: "--color-surface", darkProperty: "--color-surface-dark" },
+    { configPath: (t) => t.colors?.foreground, lightProperty: "--color-text", darkProperty: "--color-text-dark" },
+    { configPath: (t) => t.colors?.muted, lightProperty: "--color-text-muted", darkProperty: "--color-text-muted-dark" },
+    { configPath: (t) => t.colors?.border, lightProperty: "--color-border", darkProperty: "--color-border-dark" },
+];
+/**
+ * Generates a CSS string with custom property overrides from the theme config.
+ *
+ * Brand tokens (primaryColor, fonts) are set at `:root` and apply to both modes.
+ * Surface colors support two formats:
+ * - `"#0a0a0f"` (string) → sets `-dark` variant only (backward compat)
+ * - `{ light: "#fff", dark: "#000" }` → sets both base and `-dark` variants
+ *
+ * Returns an empty string if no theme config values are set,
+ * allowing the @theme defaults to apply.
+ *
+ * @example
+ * ```ts
+ * const css = generateThemeCSS(config);
+ * // String value: ":root { --color-surface-dark: #0a0a0f; }"
+ * // Pair value:   ":root { --color-surface: #fff; --color-surface-dark: #0a0a0f; }"
+ * ```
+ */
+export function generateThemeCSS(config) {
+    const theme = config.theme;
+    if (!theme)
+        return "";
+    const overrides = [];
+    // Brand / font overrides → always :root
+    for (const mapping of ROOT_CSS_MAP) {
+        const value = mapping.configPath(theme);
+        if (value !== undefined) {
+            overrides.push(`  ${mapping.cssProperty}: ${value};`);
+        }
+    }
+    // Surface color overrides → light/dark pair or dark-only
+    for (const mapping of COLOR_PAIR_MAP) {
+        const value = mapping.configPath(theme);
+        if (value === undefined)
+            continue;
+        if (typeof value === "string") {
+            // Backward compat: string = dark-only override
+            overrides.push(`  ${mapping.darkProperty}: ${value};`);
+        }
+        else {
+            // Explicit pair
+            if (value.light) {
+                overrides.push(`  ${mapping.lightProperty}: ${value.light};`);
+            }
+            if (value.dark) {
+                overrides.push(`  ${mapping.darkProperty}: ${value.dark};`);
+            }
+        }
+    }
+    if (overrides.length === 0)
+        return "";
+    return `:root {\n${overrides.join("\n")}\n}`;
+}
+//# sourceMappingURL=theme-css.js.map

package/dist/utils/theme-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-css.js","sourceRoot":"","sources":["../../src/utils/theme-css.ts"],"names":[],"mappings":"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"}

package/dist/utils/theme-helpers.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Theme utilities — pure functions for theme storage and application.
+ *
+ * Extracted to a shared utility for testability (Story 3.1 pattern).
+ * Used by ThemeToggle.tsx. The FOUC-prevention inline script reimplements
+ * the same logic inline because `is:inline` scripts cannot import modules.
+ */
+export type Theme = "dark" | "light";
+/** localStorage key for theme preference */
+export declare const THEME_STORAGE_KEY = "specglass-theme";
+/** Default theme when no preference is stored */
+export declare const DEFAULT_THEME: Theme;
+/**
+ * Read the stored theme preference from localStorage.
+ * Returns null if no preference is stored or localStorage is unavailable.
+ */
+export declare function getStoredTheme(): Theme | null;
+/**
+ * Determine the effective theme given a stored preference.
+ * Falls back to DEFAULT_THEME ("dark") when no preference exists.
+ */
+export declare function getEffectiveTheme(stored: Theme | null): Theme;
+/**
+ * Apply a theme by toggling the .dark class on <html>.
+ * Also persists the preference to localStorage.
+ */
+export declare function applyTheme(theme: Theme): void;
+//# sourceMappingURL=theme-helpers.d.ts.map

package/dist/utils/theme-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/theme-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAErC,4CAA4C;AAC5C,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAEnD,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,KAAc,CAAC;AAE3C;;;GAGG;AACH,wBAAgB,cAAc,IAAI,KAAK,GAAG,IAAI,CAW7C;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,GAAG,KAAK,CAE7D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAa7C"}

package/dist/utils/theme-helpers.js

@@ -0,0 +1,55 @@
+/**
+ * Theme utilities — pure functions for theme storage and application.
+ *
+ * Extracted to a shared utility for testability (Story 3.1 pattern).
+ * Used by ThemeToggle.tsx. The FOUC-prevention inline script reimplements
+ * the same logic inline because `is:inline` scripts cannot import modules.
+ */
+/** localStorage key for theme preference */
+export const THEME_STORAGE_KEY = "specglass-theme";
+/** Default theme when no preference is stored */
+export const DEFAULT_THEME = "dark";
+/**
+ * Read the stored theme preference from localStorage.
+ * Returns null if no preference is stored or localStorage is unavailable.
+ */
+export function getStoredTheme() {
+    try {
+        const stored = localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored === "dark" || stored === "light") {
+            return stored;
+        }
+        return null;
+    }
+    catch {
+        // localStorage unavailable (SSR, privacy mode, etc.)
+        return null;
+    }
+}
+/**
+ * Determine the effective theme given a stored preference.
+ * Falls back to DEFAULT_THEME ("dark") when no preference exists.
+ */
+export function getEffectiveTheme(stored) {
+    return stored ?? DEFAULT_THEME;
+}
+/**
+ * Apply a theme by toggling the .dark class on <html>.
+ * Also persists the preference to localStorage.
+ */
+export function applyTheme(theme) {
+    const root = document.documentElement;
+    if (theme === "dark") {
+        root.classList.add("dark");
+    }
+    else {
+        root.classList.remove("dark");
+    }
+    try {
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+    }
+    catch {
+        // localStorage unavailable — graceful degradation
+    }
+}
+//# sourceMappingURL=theme-helpers.js.map

package/dist/utils/theme-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-helpers.js","sourceRoot":"","sources":["../../src/utils/theme-helpers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAEnD,iDAAiD;AACjD,MAAM,CAAC,MAAM,aAAa,GAAU,MAAM,CAAC;AAE3C;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACvD,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;YAC5C,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,qDAAqD;QACrD,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAAoB;IACpD,OAAO,MAAM,IAAI,aAAa,CAAC;AACjC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,KAAY;IACrC,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;IACtC,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;SAAM,CAAC;QACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,CAAC;QACH,YAAY,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;IACjD,CAAC;IAAC,MAAM,CAAC;QACP,kDAAkD;IACpD,CAAC;AACH,CAAC"}

package/dist/utils/toc-helpers.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Table of Contents helpers — shared logic used by both
+ * `TableOfContents.astro` and its unit tests.
+ */
+export type Heading = {
+    depth: number;
+    slug: string;
+    text: string;
+};
+/** Filter headings to include only h2 and h3 for ToC display. */
+export declare function filterTocHeadings(headings: Heading[]): Heading[];
+//# sourceMappingURL=toc-helpers.d.ts.map

package/dist/utils/toc-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/toc-helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,iEAAiE;AACjE,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAEhE"}

package/dist/utils/toc-helpers.js

@@ -0,0 +1,9 @@
+/**
+ * Table of Contents helpers — shared logic used by both
+ * `TableOfContents.astro` and its unit tests.
+ */
+/** Filter headings to include only h2 and h3 for ToC display. */
+export function filterTocHeadings(headings) {
+    return headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+}
+//# sourceMappingURL=toc-helpers.js.map

package/dist/utils/toc-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc-helpers.js","sourceRoot":"","sources":["../../src/utils/toc-helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,iEAAiE;AACjE,MAAM,UAAU,iBAAiB,CAAC,QAAmB;IACnD,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;AAC9D,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@specglass/theme-default",
+  "version": "0.0.2",
+  "description": "Default theme for Specglass — layouts, components, React islands, and styles",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Not-Diamond/ndocs.git",
+    "directory": "packages/theme-default"
+  },
+  "homepage": "https://github.com/Not-Diamond/ndocs#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./src/components/*",
+    "./islands/*": "./src/islands/*",
+    "./layouts/*": "./src/layouts/*",
+    "./lib/*": "./src/lib/*",
+    "./styles/*": "./src/styles/*",
+    "./utils/*": "./src/utils/*"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "src/islands",
+    "src/layouts",
+    "src/lib",
+    "src/styles",
+    "src/utils"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "lint": "eslint src/"
+  },
+  "peerDependencies": {
+    "astro": "^5.17",
+    "shiki": "^3.0"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.4.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@specglass/core": "*",
+    "@tailwindcss/vite": "^4.1.18",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "astro": "^5.17",
+    "jsdom": "^28.0.0",
+    "typescript": "^5.5",
+    "vitest": "^3.0"
+  }
+}

package/src/components/ApiAuth.astro

@@ -0,0 +1,116 @@
+---
+/**
+ * ApiAuth.astro — Displays authentication/security requirements for an endpoint.
+ * Shows both global security schemes and per-endpoint security from the parsed OpenAPI spec.
+ */
+import type { ApiSecurityRequirement } from "@specglass/core";
+
+export interface Props {
+  security: ApiSecurityRequirement[];
+  securitySchemes?: Record<string, ApiSecurityRequirement>;
+}
+
+const { security, securitySchemes } = Astro.props;
+
+const schemeTypeLabels: Record<string, string> = {
+  apiKey: "API Key",
+  http: "HTTP",
+  oauth2: "OAuth 2.0",
+  openIdConnect: "OpenID Connect",
+};
+
+const hasAuth = security.length > 0;
+const hasGlobalSchemes = securitySchemes && Object.keys(securitySchemes).length > 0;
+---
+
+{
+  (hasAuth || hasGlobalSchemes) && (
+    <div class="mb-8">
+      <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
+        <span class="mr-1.5">🔒</span> Authentication
+      </h3>
+
+      {/* Per-endpoint security requirements */}
+      {hasAuth && (
+        <div class="border border-border rounded-lg overflow-hidden mb-4">
+          <div class="px-4 py-2 bg-surface-raised border-b border-border/50 text-xs font-medium text-text-muted">
+            Required for this endpoint
+          </div>
+          {security.map((req, idx) => (
+            <div
+              class:list={[
+                "px-4 py-3 flex items-start gap-3",
+                idx > 0 && "border-t border-border/50",
+              ]}
+            >
+              {/* Scheme type badge */}
+              <span class="inline-flex shrink-0 items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-500/15 text-purple-700 dark:text-purple-400 border border-purple-500/30 mt-0.5">
+                {schemeTypeLabels[req.type] ?? req.type}
+              </span>
+
+              <div class="min-w-0">
+                <div class="text-sm text-text font-medium">{req.schemeName}</div>
+
+                {/* API Key specifics */}
+                {req.type === "apiKey" && req.in && req.name && (
+                  <p class="text-xs text-text-muted/60 mt-1 font-mono">
+                    {req.in}: <code>{req.name}</code>
+                  </p>
+                )}
+
+                {/* HTTP auth specifics */}
+                {req.type === "http" && req.scheme && (
+                  <p class="text-xs text-text-muted/60 mt-1 font-mono">Scheme: {req.scheme}</p>
+                )}
+
+                {/* Scopes */}
+                {req.scopes.length > 0 && (
+                  <div class="mt-1.5 flex flex-wrap gap-1">
+                    <span class="text-xs text-text-muted mr-1">Scopes:</span>
+                    {req.scopes.map((scope) => (
+                      <span class="inline-block px-1.5 py-0.5 text-xs rounded bg-surface-raised text-text-muted font-mono border border-border/50">
+                        {scope}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Global security schemes */}
+      {hasGlobalSchemes && (
+        <div class="border border-border rounded-lg overflow-hidden">
+          <div class="px-4 py-2 bg-surface-raised border-b border-border/50 text-xs font-medium text-text-muted">
+            Available security schemes
+          </div>
+          {Object.entries(securitySchemes!).map(([name, scheme], idx) => (
+            <div
+              class:list={[
+                "px-4 py-3 flex items-start gap-3",
+                idx > 0 && "border-t border-border/50",
+              ]}
+            >
+              <span class="inline-flex shrink-0 items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-500/15 text-purple-700 dark:text-purple-400 border border-purple-500/30 mt-0.5">
+                {schemeTypeLabels[scheme.type] ?? scheme.type}
+              </span>
+              <div class="min-w-0">
+                <div class="text-sm text-text font-medium">{name}</div>
+                {scheme.type === "apiKey" && scheme.in && scheme.name && (
+                  <p class="text-xs text-text-muted/60 mt-1 font-mono">
+                    {scheme.in}: <code>{scheme.name}</code>
+                  </p>
+                )}
+                {scheme.type === "http" && scheme.scheme && (
+                  <p class="text-xs text-text-muted/60 mt-1 font-mono">Scheme: {scheme.scheme}</p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ApiEndpoint.astro

@@ -0,0 +1,75 @@
+---
+/**
+ * ApiEndpoint.astro — Renders the header section of a single API endpoint.
+ * Shows HTTP method badge, path, summary, description, operation ID, and deprecated warning.
+ */
+import type { ApiEndpoint } from "@specglass/core";
+
+export interface Props {
+  endpoint: ApiEndpoint;
+}
+
+const { endpoint } = Astro.props;
+
+const methodColors: Record<string, string> = {
+  get: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30",
+  post: "bg-blue-500/15 text-blue-700 dark:text-blue-400 border-blue-500/30",
+  put: "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30",
+  patch: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400 border-yellow-500/30",
+  delete: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30",
+  options: "bg-purple-500/15 text-purple-700 dark:text-purple-400 border-purple-500/30",
+  head: "bg-gray-500/15 text-gray-700 dark:text-gray-400 border-gray-500/30",
+};
+
+const methodColor = methodColors[endpoint.method.toLowerCase()] ?? methodColors.get;
+---
+
+<div id={`endpoint-${endpoint.method}-${endpoint.path.replace(/[{}\\/]/g, "-")}`} class="mb-8">
+  {/* Deprecated banner */}
+  {
+    endpoint.deprecated && (
+      <div class="mb-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-300 text-sm">
+        <span class="font-semibold">⚠ Deprecated</span> — This endpoint is deprecated and may be
+        removed in a future version.
+      </div>
+    )
+  }
+
+  {/* Method + Path header */}
+  <div class="flex items-center gap-3 mb-4">
+    <span
+      class:list={[
+        "inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider border",
+        methodColor,
+      ]}
+    >
+      {endpoint.method.toUpperCase()}
+    </span>
+    <code class="text-lg font-mono text-text font-semibold break-all">
+      {endpoint.path}
+    </code>
+  </div>
+
+  {/* Summary */}
+  {
+    endpoint.summary && (
+      <h1 class="text-xl font-semibold text-text mb-2 mt-0">{endpoint.summary}</h1>
+    )
+  }
+
+  {/* Description */}
+  {
+    endpoint.description && (
+      <p class="text-text-muted text-sm leading-relaxed mb-4">{endpoint.description}</p>
+    )
+  }
+
+  {/* Operation ID */}
+  {
+    endpoint.operationId && (
+      <p class="text-xs text-text-muted/60 font-mono mb-4">
+        Operation ID: <code class="text-text-muted/80">{endpoint.operationId}</code>
+      </p>
+    )
+  }
+</div>