@specglass/theme-default 0.0.2 → 0.0.3

package/dist/__tests__/code-tabs.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=code-tabs.test.d.ts.map

package/dist/__tests__/code-tabs.test.js

@@ -216,4 +216,3 @@ describe("CodeTabs", () => {
         });
     });
 });
-//# sourceMappingURL=code-tabs.test.js.map

package/dist/__tests__/copy-button.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=copy-button.test.d.ts.map

package/dist/__tests__/copy-button.test.js

@@ -113,4 +113,3 @@ describe("CopyButton logic", () => {
         expect(result.current.copied).toBe(false);
     });
 });
-//# sourceMappingURL=copy-button.test.js.map

package/dist/__tests__/search-palette.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=search-palette.test.d.ts.map

package/dist/__tests__/search-palette.test.js

@@ -68,4 +68,3 @@ describe("ui/dialog", () => {
         expect(mod.DialogDescription).toBeDefined();
     });
 });
-//# sourceMappingURL=search-palette.test.js.map

package/dist/__tests__/shiki.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=shiki.test.d.ts.map

package/dist/__tests__/shiki.test.js

@@ -34,4 +34,3 @@ describe("highlight utility", () => {
         expect(html2).toContain("--shiki-light");
     });
 });
-//# sourceMappingURL=shiki.test.js.map

package/dist/__tests__/theme-css.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=theme-css.test.d.ts.map

package/dist/__tests__/theme-css.test.js

@@ -121,4 +121,3 @@ describe("generateThemeCSS", () => {
         expect(css).not.toContain("--color-surface:");
     });
 });
-//# sourceMappingURL=theme-css.test.js.map

package/dist/__tests__/theme-helpers.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=theme-helpers.test.d.ts.map

package/dist/__tests__/theme-helpers.test.js

@@ -78,4 +78,3 @@ describe("theme-helpers", () => {
         });
     });
 });
-//# sourceMappingURL=theme-helpers.test.js.map

package/dist/index.d.ts

@@ -60,4 +60,3 @@ export interface TableOfContentsProps {
         text: string;
     }>;
 }
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -10,4 +10,3 @@ export { getStoredTheme, getEffectiveTheme, applyTheme, THEME_STORAGE_KEY, DEFAU
 export { ThemeToggle } from "./islands/ThemeToggle.js";
 export { CopyButton } from "./islands/CopyButton.js";
 export { CodeTabs } from "./islands/CodeTabs.js";
-//# sourceMappingURL=index.js.map

package/dist/islands/CodeTabs.d.ts

@@ -18,4 +18,3 @@ interface CodeTabsProps {
 declare function CodeTabs({ tabs, syncKey, ariaLabel }: CodeTabsProps): import("react/jsx-runtime").JSX.Element | null;
 export { CodeTabs };
 export type { CodeTab, CodeTabsProps };
-//# sourceMappingURL=CodeTabs.d.ts.map

package/dist/islands/CodeTabs.js

@@ -122,4 +122,3 @@ function CodeTabs({ tabs, syncKey = "sdk-language", ariaLabel = "SDK language ta
     return (_jsxs("div", { className: "my-6 border border-border rounded-lg overflow-hidden", children: [_jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b border-border bg-surface-raised", onKeyDown: handleKeyDown, children: tabs.map((tab, i) => (_jsx("button", { id: `${groupId}-tab-${i}`, role: "tab", "aria-selected": i === activeIndex, "aria-controls": `${groupId}-panel-${i}`, tabIndex: i === activeIndex ? 0 : -1, className: cn("px-4 py-2 border-b-2 border-transparent text-[0.8125rem] font-medium font-mono", "text-text-muted cursor-pointer whitespace-nowrap bg-transparent", "transition-colors duration-150 hover:text-text", "focus-visible:outline-2 focus-visible:outline-primary focus-visible:-outline-offset-2", i === activeIndex && "text-text border-b-primary"), onClick: () => setTab(i), children: tab.label }, tab.language))) }), tabs.map((tab, i) => (_jsx("div", { id: `${groupId}-panel-${i}`, role: "tabpanel", "aria-labelledby": `${groupId}-tab-${i}`, tabIndex: 0, className: "code-tabs-panel", style: { display: i === activeIndex ? undefined : "none" }, dangerouslySetInnerHTML: { __html: tab.content } }, tab.language)))] }));
 }
 export { CodeTabs };
-//# sourceMappingURL=CodeTabs.js.map

package/dist/islands/CopyButton.d.ts

@@ -13,4 +13,3 @@ export interface CopyButtonProps {
     code: string;
 }
 export declare function CopyButton({ code }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=CopyButton.d.ts.map

package/dist/islands/CopyButton.js

@@ -51,4 +51,3 @@ export function CopyButton({ code }) {
         /* 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" })] })) }));
 }
-//# sourceMappingURL=CopyButton.js.map

package/dist/islands/SearchPalette.d.ts

@@ -1,2 +1 @@
 export declare function SearchPalette(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SearchPalette.d.ts.map

package/dist/islands/SearchPalette.js

@@ -106,4 +106,3 @@ export function SearchPalette() {
                                                 __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"] })] }) }))] })] }));
 }
-//# sourceMappingURL=SearchPalette.js.map

package/dist/islands/SearchResults.d.ts

@@ -1,2 +1 @@
 export declare function SearchResults(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SearchResults.d.ts.map

package/dist/islands/SearchResults.js

@@ -127,4 +127,3 @@ export function SearchResults() {
                                         __html: result.sub_results?.[0]?.excerpt ?? result.excerpt ?? "",
                                     } })] }, result.id)))] }))] }));
 }
-//# sourceMappingURL=SearchResults.js.map

package/dist/islands/ThemeToggle.d.ts

@@ -9,4 +9,3 @@
  * Imports shared utilities from theme-helpers.ts for consistency.
  */
 export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/islands/ThemeToggle.js

@@ -40,4 +40,3 @@ export function ThemeToggle() {
     }, []);
     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" }) })] }) }));
 }
-//# sourceMappingURL=ThemeToggle.js.map

package/dist/layouts/DocPage.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=DocPage.test.d.ts.map

package/dist/layouts/DocPage.test.js

@@ -162,4 +162,3 @@ describe("DocPage props contract", () => {
         });
     });
 });
-//# sourceMappingURL=DocPage.test.js.map

package/dist/lib/utils.d.ts

@@ -7,4 +7,3 @@ import { type ClassValue } from "clsx";
  * Will be used by UI primitives in upcoming stories (e.g., search, dialogs).
  */
 export declare function cn(...inputs: ClassValue[]): string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.js

@@ -10,4 +10,3 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-//# sourceMappingURL=utils.js.map

package/dist/scripts/code-block-enhancer.d.ts

@@ -13,4 +13,3 @@
  * until the user actually clicks copy.
  */
 declare function initCopyButtons(): void;
-//# sourceMappingURL=code-block-enhancer.d.ts.map

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

@@ -52,4 +52,3 @@ function initCopyButtons() {
 document.addEventListener("DOMContentLoaded", initCopyButtons);
 // Re-run after Astro ViewTransitions page swaps
 document.addEventListener("astro:after-swap", initCopyButtons);
-//# sourceMappingURL=code-block-enhancer.js.map

package/dist/ui/command.d.ts

@@ -84,4 +84,3 @@ declare const CommandShortcut: {
     displayName: string;
 };
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
-//# sourceMappingURL=command.d.ts.map

package/dist/ui/command.js

@@ -25,4 +25,3 @@ const CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
-//# sourceMappingURL=command.js.map

package/dist/ui/dialog.d.ts

@@ -17,4 +17,3 @@ declare const DialogFooter: {
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
-//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog.js

@@ -19,4 +19,3 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
-//# sourceMappingURL=dialog.js.map

package/dist/utils/parse-highlight-range.d.ts

@@ -9,4 +9,3 @@
  * parseHighlightRange("") // → []
  */
 export declare function parseHighlightRange(range: string): number[];
-//# sourceMappingURL=parse-highlight-range.d.ts.map

package/dist/utils/parse-highlight-range.js

@@ -37,4 +37,3 @@ export function parseHighlightRange(range) {
     }
     return result;
 }
-//# sourceMappingURL=parse-highlight-range.js.map

package/dist/utils/parse-highlight-range.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=parse-highlight-range.test.d.ts.map

package/dist/utils/parse-highlight-range.test.js

@@ -29,4 +29,3 @@ describe("parseHighlightRange", () => {
         expect(parseHighlightRange("1,abc,3")).toEqual([1, 3]);
     });
 });
-//# sourceMappingURL=parse-highlight-range.test.js.map

package/dist/utils/schema-renderer.d.ts

@@ -35,4 +35,3 @@ export declare function renderTypeString(schema: ApiSchema | undefined): string;
  * suitable for rendering in a table. Only expands 1 level deep for MVP.
  */
 export declare function flattenSchemaProperties(schema: ApiSchema | undefined, requiredFields?: string[], maxDepth?: number): SchemaProperty[];
-//# sourceMappingURL=schema-renderer.d.ts.map

package/dist/utils/schema-renderer.js

@@ -112,4 +112,3 @@ export function flattenSchemaProperties(schema, requiredFields, maxDepth = 1) {
     }
     return properties;
 }
-//# sourceMappingURL=schema-renderer.js.map

package/dist/utils/schema-renderer.test.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=schema-renderer.test.d.ts.map

package/dist/utils/schema-renderer.test.js

@@ -216,4 +216,3 @@ describe("flattenSchemaProperties", () => {
         expect(props[0].name).toBe("nested");
     });
 });
-//# sourceMappingURL=schema-renderer.test.js.map

package/dist/utils/shiki.d.ts

@@ -17,4 +17,3 @@ export interface HighlightOptions {
  * 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.js

@@ -81,4 +81,3 @@ export async function highlight(code, lang, options) {
         ...(decorations?.length ? { decorations } : {}),
     });
 }
-//# sourceMappingURL=shiki.js.map

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

@@ -7,4 +7,3 @@ import type { NavItem } from "@specglass/core";
 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.js

@@ -11,4 +11,3 @@ export function isActiveOrAncestor(item, currentSlug) {
     }
     return false;
 }
-//# sourceMappingURL=sidebar-helpers.js.map

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

@@ -18,4 +18,3 @@ import type { SpecglassConfig } from "@specglass/core";
  * ```
  */
 export declare function generateThemeCSS(config: SpecglassConfig): string;
-//# sourceMappingURL=theme-css.d.ts.map

package/dist/utils/theme-css.js

@@ -74,4 +74,3 @@ export function generateThemeCSS(config) {
         return "";
     return `:root {\n${overrides.join("\n")}\n}`;
 }
-//# sourceMappingURL=theme-css.js.map

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

@@ -25,4 +25,3 @@ export declare function getEffectiveTheme(stored: Theme | null): Theme;
  * Also persists the preference to localStorage.
  */
 export declare function applyTheme(theme: Theme): void;
-//# sourceMappingURL=theme-helpers.d.ts.map

package/dist/utils/theme-helpers.js

@@ -52,4 +52,3 @@ export function applyTheme(theme) {
         // localStorage unavailable — graceful degradation
     }
 }
-//# sourceMappingURL=theme-helpers.js.map

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

@@ -9,4 +9,3 @@ export type Heading = {
 };
 /** 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.js

@@ -6,4 +6,3 @@
 export function filterTocHeadings(headings) {
     return headings.filter((h) => h.depth >= 2 && h.depth <= 3);
 }
-//# sourceMappingURL=toc-helpers.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specglass/theme-default",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Default theme for Specglass — layouts, components, React islands, and styles",
   "type": "module",
   "license": "MIT",
@@ -23,7 +23,9 @@
     "./layouts/*": "./src/layouts/*",
     "./lib/*": "./src/lib/*",
     "./styles/*": "./src/styles/*",
-    "./utils/*": "./src/utils/*"
+    "./utils/*": "./src/utils/*",
+    "./ui/*": "./src/ui/*",
+    "./scripts/*": "./src/scripts/*"
   },
   "files": [
     "dist",
@@ -32,7 +34,9 @@
     "src/layouts",
     "src/lib",
     "src/styles",
-    "src/utils"
+    "src/utils",
+    "src/ui",
+    "src/scripts"
   ],
   "scripts": {
     "build": "tsc",

package/src/components/ApiExampleRequest.astro

@@ -0,0 +1,179 @@
+---
+/**
+ * ApiExampleRequest.astro — Renders multi-language request code examples.
+ *
+ * Generates cURL, Python, and Node.js request examples from endpoint data.
+ * Uses a tab interface with localStorage persistence for language preference.
+ * Each tab includes a copy button for the code snippet.
+ */
+import type { ApiEndpoint } from "@specglass/core";
+import { generateCurlExample, generatePythonExample, generateNodeExample } from "@specglass/core";
+import { CopyButton } from "../islands/CopyButton";
+
+export interface Props {
+  endpoint: ApiEndpoint;
+  baseUrl?: string;
+}
+
+const { endpoint, baseUrl = "https://api.example.com" } = Astro.props;
+
+const options = { baseUrl };
+
+const languages = [
+  { id: "curl", label: "cURL", code: generateCurlExample(endpoint, options), lang: "bash" },
+  { id: "python", label: "Python", code: generatePythonExample(endpoint, options), lang: "python" },
+  {
+    id: "node",
+    label: "Node.js",
+    code: generateNodeExample(endpoint, options),
+    lang: "javascript",
+  },
+];
+
+const tabGroupId = `api-req-${endpoint.method}-${endpoint.path.replace(/[{}/]/g, "-")}`;
+---
+
+<div class="mt-6">
+  <h2 class="text-lg font-semibold text-text mb-4">Request Example</h2>
+
+  <div
+    class="api-code-tabs rounded-lg border border-border overflow-hidden"
+    data-tab-group={tabGroupId}
+    data-sync-key="api-lang"
+  >
+    {/* Tab buttons */}
+    <div
+      class="flex border-b border-border bg-surface-raised"
+      role="tablist"
+      aria-label="Request language"
+    >
+      {
+        languages.map((lang, i) => (
+          <button
+            type="button"
+            role="tab"
+            id={`${tabGroupId}-tab-${lang.id}`}
+            aria-controls={`${tabGroupId}-panel-${lang.id}`}
+            aria-selected={i === 0 ? "true" : "false"}
+            tabindex={i === 0 ? 0 : -1}
+            data-lang={lang.id}
+            class:list={[
+              "px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+              i === 0
+                ? "text-text border-b-2 border-primary bg-surface"
+                : "text-text-muted hover:text-text",
+            ]}
+          >
+            {lang.label}
+          </button>
+        ))
+      }
+    </div>
+
+    {/* Tab panels */}
+    {
+      languages.map((lang, i) => (
+        <div
+          role="tabpanel"
+          id={`${tabGroupId}-panel-${lang.id}`}
+          aria-labelledby={`${tabGroupId}-tab-${lang.id}`}
+          data-lang={lang.id}
+          class={i === 0 ? "" : "hidden"}
+        >
+          <div class="relative group">
+            <pre class="overflow-x-auto p-4 bg-[#0d1117] dark:bg-[#0d1117] text-gray-300 text-sm font-mono leading-relaxed m-0">
+              <code>{lang.code}</code>
+            </pre>
+            <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+              <CopyButton client:idle code={lang.code} />
+            </div>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  function initApiCodeTabs() {
+    const SYNC_KEY = "api-lang";
+    const STORAGE_KEY = `specglass-preferred-${SYNC_KEY}`;
+
+    document.querySelectorAll<HTMLElement>(".api-code-tabs").forEach((container) => {
+      const tabs = container.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+      const panels = container.querySelectorAll<HTMLElement>('[role="tabpanel"]');
+
+      // Restore saved preference
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          activateTab(saved);
+        }
+      } catch {
+        // localStorage unavailable
+      }
+
+      function activateTab(langId: string) {
+        let found = false;
+        tabs.forEach((tab) => {
+          const isActive = tab.dataset.lang === langId;
+          tab.setAttribute("aria-selected", isActive ? "true" : "false");
+          tab.tabIndex = isActive ? 0 : -1;
+          if (isActive) {
+            tab.classList.add("text-text", "border-b-2", "border-primary", "bg-surface");
+            tab.classList.remove("text-text-muted");
+            found = true;
+          } else {
+            tab.classList.remove("text-text", "border-b-2", "border-primary", "bg-surface");
+            tab.classList.add("text-text-muted");
+          }
+        });
+        panels.forEach((panel) => {
+          panel.classList.toggle("hidden", panel.dataset.lang !== langId);
+        });
+        return found;
+      }
+
+      tabs.forEach((tab) => {
+        tab.addEventListener("click", () => {
+          const lang = tab.dataset.lang;
+          if (!lang) return;
+          activateTab(lang);
+          // Persist and sync
+          try {
+            localStorage.setItem(STORAGE_KEY, lang);
+          } catch {}
+          // Broadcast sync event for other tab groups on the page
+          document.dispatchEvent(
+            new CustomEvent("specglass-lang-sync", { detail: { syncKey: SYNC_KEY, lang } }),
+          );
+        });
+
+        // Keyboard navigation
+        tab.addEventListener("keydown", (e) => {
+          const tabList = Array.from(tabs);
+          const index = tabList.indexOf(tab);
+          let nextIndex = index;
+          if (e.key === "ArrowRight") nextIndex = (index + 1) % tabList.length;
+          else if (e.key === "ArrowLeft") nextIndex = (index - 1 + tabList.length) % tabList.length;
+          else if (e.key === "Home") nextIndex = 0;
+          else if (e.key === "End") nextIndex = tabList.length - 1;
+          else return;
+          e.preventDefault();
+          tabList[nextIndex].focus();
+          tabList[nextIndex].click();
+        });
+      });
+
+      // Listen for sync events from other tab groups
+      document.addEventListener("specglass-lang-sync", ((e: CustomEvent) => {
+        if (e.detail?.syncKey === SYNC_KEY) {
+          activateTab(e.detail.lang);
+        }
+      }) as EventListener);
+    });
+  }
+
+  initApiCodeTabs();
+  document.addEventListener("astro:after-swap", initApiCodeTabs);
+</script>