@opendocsdev/cli 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendocsdev/cli",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "publishConfig": {
     "access": "public"
   },

package/src/engine/src/components/CodeGroup.astro

@@ -59,173 +59,3 @@ const showTabs = labels.length > 1;
     <slot />
   </div>
 </code-group>
-
-<script>
-  interface CodeGroupSyncEvent extends CustomEvent {
-    detail: {
-      syncKey: string;
-      label: string;
-    };
-  }
-
-  class CodeGroupElement extends HTMLElement {
-    private syncKey: string = "";
-    private labels: string[] = [];
-    private panels: HTMLPreElement[] = [];
-    private boundHandleSync: (e: Event) => void;
-    private boundHandleStorage: (e: StorageEvent) => void;
-
-    constructor() {
-      super();
-      this.boundHandleSync = this.handleSync.bind(this);
-      this.boundHandleStorage = this.handleStorage.bind(this);
-    }
-
-    connectedCallback() {
-      // Parse labels and sync key
-      const labelsJson = this.dataset.labels;
-      this.labels = labelsJson ? JSON.parse(labelsJson) : [];
-      this.syncKey = this.dataset.syncKey || "";
-
-      const panelsContainer = this.querySelector(".panels");
-      if (!panelsContainer) return;
-
-      // Find all pre elements (code blocks)
-      this.panels = Array.from(panelsContainer.querySelectorAll(":scope > pre"));
-      if (this.panels.length === 0) {
-        this.panels = Array.from(panelsContainer.querySelectorAll("pre"));
-      }
-
-      if (this.panels.length === 0) return;
-
-      // Initialize panels with data-active attribute
-      this.initPanels();
-
-      // If only one panel, just mark it active
-      if (this.panels.length === 1) {
-        this.panels[0].setAttribute("data-active", "true");
-        return;
-      }
-
-      // Add click handlers to server-rendered buttons
-      this.attachClickHandlers();
-
-      // Restore saved selection from localStorage
-      this.restoreFromStorage();
-
-      // Listen for sync events from other CodeGroups on the same page
-      window.addEventListener("codegroup-sync", this.boundHandleSync);
-
-      // Listen for storage events (cross-tab sync)
-      window.addEventListener("storage", this.boundHandleStorage);
-    }
-
-    disconnectedCallback() {
-      window.removeEventListener("codegroup-sync", this.boundHandleSync);
-      window.removeEventListener("storage", this.boundHandleStorage);
-    }
-
-    private initPanels() {
-      this.panels.forEach((panel, index) => {
-        panel.setAttribute("role", "tabpanel");
-        panel.setAttribute("data-active", String(index === 0));
-      });
-    }
-
-    private attachClickHandlers() {
-      const buttons = this.querySelectorAll<HTMLButtonElement>(".tabs button");
-      buttons.forEach((btn) => {
-        btn.addEventListener("click", () => {
-          const label = btn.dataset.label;
-          if (label) {
-            this.setActiveByLabel(label);
-            this.broadcastChange(label);
-          }
-        });
-      });
-    }
-
-    private restoreFromStorage() {
-      if (!this.syncKey) return;
-
-      try {
-        const saved = localStorage.getItem(`codegroup:${this.syncKey}`);
-        if (saved && this.labels.includes(saved)) {
-          this.setActiveByLabel(saved);
-        }
-      } catch {
-        // localStorage may be unavailable (private browsing, etc.)
-      }
-    }
-
-    private handleSync(e: Event) {
-      const event = e as CodeGroupSyncEvent;
-      const { syncKey, label } = event.detail;
-      if (syncKey === this.syncKey && this.labels.includes(label)) {
-        this.setActiveByLabel(label);
-      }
-    }
-
-    private handleStorage(e: StorageEvent) {
-      if (!e.key?.startsWith("codegroup:")) return;
-
-      const storedSyncKey = e.key.replace("codegroup:", "");
-      if (storedSyncKey === this.syncKey && e.newValue) {
-        this.setActiveByLabel(e.newValue);
-      }
-    }
-
-    private broadcastChange(label: string) {
-      if (!this.syncKey) return;
-
-      // Save to localStorage
-      try {
-        localStorage.setItem(`codegroup:${this.syncKey}`, label);
-      } catch {
-        // localStorage may be unavailable
-      }
-
-      // Notify other CodeGroups on the same page
-      window.dispatchEvent(
-        new CustomEvent("codegroup-sync", {
-          detail: { syncKey: this.syncKey, label },
-        })
-      );
-    }
-
-    private setActiveByLabel(label: string) {
-      const index = this.labels.indexOf(label);
-      if (index >= 0) {
-        this.setActiveTab(index);
-      }
-    }
-
-    private setActiveTab(index: number) {
-      // Update buttons
-      const buttons = this.querySelectorAll<HTMLButtonElement>(".tabs button");
-      buttons.forEach((btn, i) => {
-        const isActive = i === index;
-        btn.className = this.getTabClass(isActive);
-        btn.setAttribute("aria-selected", String(isActive));
-        btn.tabIndex = isActive ? 0 : -1;
-      });
-
-      // Update panels
-      this.panels.forEach((panel, i) => {
-        panel.setAttribute("data-active", String(i === index));
-      });
-    }
-
-    private getTabClass(isActive: boolean): string {
-      const base =
-        "px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium transition-colors -mb-px whitespace-nowrap flex-shrink-0";
-      const active =
-        "text-[var(--color-foreground)] border-b-2 border-[var(--color-primary)]";
-      const inactive =
-        "text-[var(--color-muted)] hover:text-[var(--color-foreground)]";
-      return `${base} ${isActive ? active : inactive}`;
-    }
-  }
-
-  customElements.define("code-group", CodeGroupElement);
-</script>

package/src/engine/src/components/Tabs.astro

@@ -59,77 +59,3 @@ const showTabs = tabs.length > 1;
     <slot />
   </div>
 </content-tabs>
-
-<script>
-  class ContentTabsElement extends HTMLElement {
-    private panels: HTMLElement[] = [];
-
-    connectedCallback() {
-      const panelsContainer = this.querySelector(".tabs-panels");
-      if (!panelsContainer) return;
-
-      this.panels = Array.from(
-        panelsContainer.querySelectorAll(":scope > .tab-panel")
-      );
-
-      if (this.panels.length === 0) return;
-
-      // Initialize panels with data-active attribute
-      this.initPanels();
-
-      // If only one panel, just mark it active
-      if (this.panels.length === 1) {
-        this.panels[0].setAttribute("data-active", "true");
-        return;
-      }
-
-      // Add click handlers to server-rendered buttons
-      this.attachClickHandlers();
-    }
-
-    private initPanels() {
-      this.panels.forEach((panel, index) => {
-        panel.setAttribute("role", "tabpanel");
-        panel.setAttribute("data-active", String(index === 0));
-      });
-    }
-
-    private attachClickHandlers() {
-      const buttons = this.querySelectorAll<HTMLButtonElement>(
-        ".tabs-nav button"
-      );
-      buttons.forEach((btn, index) => {
-        btn.addEventListener("click", () => this.setActiveTab(index));
-      });
-    }
-
-    private setActiveTab(index: number) {
-      // Update buttons
-      const buttons = this.querySelectorAll<HTMLButtonElement>(
-        ".tabs-nav button"
-      );
-      buttons.forEach((btn, i) => {
-        const isActive = i === index;
-        btn.className = this.getTabClass(isActive);
-        btn.setAttribute("aria-selected", String(isActive));
-        btn.tabIndex = isActive ? 0 : -1;
-      });
-
-      // Update panels
-      this.panels.forEach((panel, i) => {
-        panel.setAttribute("data-active", String(i === index));
-      });
-    }
-
-    private getTabClass(isActive: boolean): string {
-      const base =
-        "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px";
-      const active = "border-[var(--color-primary)] text-[var(--color-primary)]";
-      const inactive =
-        "border-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]";
-      return `${base} ${isActive ? active : inactive}`;
-    }
-  }
-
-  customElements.define("content-tabs", ContentTabsElement);
-</script>

package/src/engine/src/components/react/CodeGroup.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface CodeGroupProps {
+  "data-labels"?: string;
+  "data-sync-key"?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * React version of CodeGroup for use in snippets.
+ * Renders a <div> with the same class/structure as CodeGroup.astro.
+ * Uses <div> instead of <code-group> custom element because React 18 SSR
+ * doesn't convert className to class for custom elements.
+ * The global interactive-components.ts script handles interactivity via event delegation.
+ */
+export function CodeGroup({
+  "data-labels": labelsJson,
+  "data-sync-key": syncKey,
+  className,
+  children,
+}: CodeGroupProps) {
+  const labels: string[] = labelsJson ? JSON.parse(labelsJson) : [];
+  const showTabs = labels.length > 1;
+
+  return (
+    <div
+      className={cn(
+        "code-group not-prose my-4 rounded-xl border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-raised)] block",
+        className
+      )}
+      data-sync-key={syncKey}
+      data-labels={labelsJson}
+    >
+      {showTabs && (
+        <nav
+          className="tabs flex gap-1 px-3 sm:px-4 pt-3 pb-0 border-b border-[var(--color-border)] overflow-x-auto"
+          role="tablist"
+          aria-label="Code examples"
+        >
+          {labels.map((label, i) => (
+            <button
+              key={label}
+              type="button"
+              role="tab"
+              className={cn(
+                "px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium transition-colors -mb-px whitespace-nowrap flex-shrink-0",
+                i === 0
+                  ? "text-[var(--color-foreground)] border-b-2 border-[var(--color-primary)]"
+                  : "text-[var(--color-muted)] hover:text-[var(--color-foreground)]"
+              )}
+              aria-selected={i === 0 ? true : false}
+              tabIndex={i === 0 ? 0 : -1}
+              data-index={i}
+              data-label={label}
+            >
+              {label}
+            </button>
+          ))}
+        </nav>
+      )}
+      <div className="panels">{children}</div>
+    </div>
+  );
+}
+
+export default CodeGroup;

package/src/engine/src/components/react/Tab.tsx

@@ -0,0 +1,25 @@
+import { cn } from "../../lib/utils";
+
+interface TabProps {
+  label: string;
+  icon?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Tab({ label, icon, className, children }: TabProps) {
+  return (
+    <div
+      className={cn(
+        "tab-panel prose prose-sm dark:prose-invert max-w-none",
+        className
+      )}
+      data-label={label}
+      data-icon={icon}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Tab;

package/src/engine/src/components/react/Tabs.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface TabInfo {
+  label: string;
+  icon?: string;
+}
+
+interface TabsProps {
+  "data-tabs"?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * React version of Tabs for use in snippets.
+ * Renders a <div> with the same class/structure as Tabs.astro.
+ * Uses <div> instead of <content-tabs> custom element because React 18 SSR
+ * doesn't convert className to class for custom elements.
+ * The global interactive-components.ts script handles interactivity via event delegation.
+ */
+export function Tabs({
+  "data-tabs": tabsJson,
+  className,
+  children,
+}: TabsProps) {
+  const tabs: TabInfo[] = tabsJson ? JSON.parse(tabsJson) : [];
+  const showTabs = tabs.length > 1;
+
+  return (
+    <div
+      className={cn("tabs-container my-6 block", className)}
+      data-tabs={tabsJson}
+    >
+      {showTabs && (
+        <nav
+          className="tabs-nav flex border-b border-[var(--color-border)]"
+          role="tablist"
+          aria-label="Content tabs"
+        >
+          {tabs.map((tab, i) => (
+            <button
+              key={tab.label}
+              type="button"
+              role="tab"
+              className={cn(
+                "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
+                i === 0
+                  ? "border-[var(--color-primary)] text-[var(--color-primary)]"
+                  : "border-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]"
+              )}
+              aria-selected={i === 0 ? true : false}
+              tabIndex={i === 0 ? 0 : -1}
+              data-index={i}
+            >
+              {tab.icon && (
+                <span className="mr-2" aria-hidden="true">
+                  {tab.icon}
+                </span>
+              )}
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      )}
+      <div className="tabs-panels pt-4">{children}</div>
+    </div>
+  );
+}
+
+export default Tabs;

package/src/engine/src/components/react/index.ts

@@ -11,4 +11,7 @@
 export { Callout } from "./Callout";
 export { Card } from "./Card";
 export { CardGroup } from "./CardGroup";
+export { CodeGroup } from "./CodeGroup";
 export { Steps } from "./Steps";
+export { Tab } from "./Tab";
+export { Tabs } from "./Tabs";

package/src/engine/src/layouts/DocsLayout.astro

@@ -281,6 +281,9 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     <!-- Mobile sidebar toggle script -->
     <script src="../scripts/mobile-sidebar.ts"></script>
 
+    <!-- Interactive components (CodeGroup, Tabs) - global so both Astro and snippet-rendered instances work -->
+    <script src="../scripts/interactive-components.ts"></script>
+
     <!-- Search trigger for mobile header -->
     <script>
       function initSearchTriggers() {

package/src/engine/src/scripts/interactive-components.ts

@@ -0,0 +1,328 @@
+/**
+ * Global Web Component definitions for CodeGroup and Tabs.
+ * Also includes event-delegation handlers for React-rendered instances
+ * (React 18 SSR doesn't convert className→class for custom elements,
+ * so React versions render <div> instead).
+ *
+ * Loaded in the layout so both Astro and React-rendered instances work.
+ */
+
+// ============================================
+// Shared helpers
+// ============================================
+
+const CODE_TAB_BASE =
+  "px-2 sm:px-3 py-2 text-xs sm:text-sm font-medium transition-colors -mb-px whitespace-nowrap flex-shrink-0";
+const CODE_TAB_ACTIVE =
+  "text-[var(--color-foreground)] border-b-2 border-[var(--color-primary)]";
+const CODE_TAB_INACTIVE =
+  "text-[var(--color-muted)] hover:text-[var(--color-foreground)]";
+
+const TABS_TAB_BASE =
+  "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px";
+const TABS_TAB_ACTIVE =
+  "border-[var(--color-primary)] text-[var(--color-primary)]";
+const TABS_TAB_INACTIVE =
+  "border-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)] hover:border-[var(--color-border)]";
+
+function codeTabClass(active: boolean) {
+  return `${CODE_TAB_BASE} ${active ? CODE_TAB_ACTIVE : CODE_TAB_INACTIVE}`;
+}
+
+function tabsTabClass(active: boolean) {
+  return `${TABS_TAB_BASE} ${active ? TABS_TAB_ACTIVE : TABS_TAB_INACTIVE}`;
+}
+
+function findPanels(container: Element): HTMLElement[] {
+  const pc = container.querySelector(".panels");
+  if (!pc) return [];
+  let panels = Array.from(pc.querySelectorAll<HTMLElement>(":scope > pre"));
+  if (panels.length === 0) {
+    panels = Array.from(pc.querySelectorAll<HTMLElement>("pre"));
+  }
+  return panels;
+}
+
+function setCodeGroupActive(
+  cg: Element,
+  panels: HTMLElement[],
+  index: number
+) {
+  cg.querySelectorAll<HTMLButtonElement>(".tabs button").forEach((btn, i) => {
+    const active = i === index;
+    btn.className = codeTabClass(active);
+    btn.setAttribute("aria-selected", String(active));
+    btn.tabIndex = active ? 0 : -1;
+  });
+  panels.forEach((p, i) =>
+    p.setAttribute("data-active", String(i === index))
+  );
+}
+
+function setTabsActive(ct: Element, panels: HTMLElement[], index: number) {
+  ct.querySelectorAll<HTMLButtonElement>(".tabs-nav button").forEach(
+    (btn, i) => {
+      const active = i === index;
+      btn.className = tabsTabClass(active);
+      btn.setAttribute("aria-selected", String(active));
+      btn.tabIndex = active ? 0 : -1;
+    }
+  );
+  panels.forEach((p, i) =>
+    p.setAttribute("data-active", String(i === index))
+  );
+}
+
+// ============================================
+// CodeGroup Web Component (for Astro-rendered <code-group>)
+// ============================================
+
+interface CodeGroupSyncEvent extends CustomEvent {
+  detail: { syncKey: string; label: string };
+}
+
+if (!customElements.get("code-group")) {
+  class CodeGroupElement extends HTMLElement {
+    private syncKey = "";
+    private labels: string[] = [];
+    private panels: HTMLElement[] = [];
+    private boundSync: (e: Event) => void;
+    private boundStorage: (e: StorageEvent) => void;
+
+    constructor() {
+      super();
+      this.boundSync = this.handleSync.bind(this);
+      this.boundStorage = this.handleStorage.bind(this);
+    }
+
+    connectedCallback() {
+      this.labels = this.dataset.labels
+        ? JSON.parse(this.dataset.labels)
+        : [];
+      this.syncKey = this.dataset.syncKey || "";
+      this.panels = findPanels(this);
+      if (this.panels.length === 0) return;
+
+      this.panels.forEach((p, i) => {
+        p.setAttribute("role", "tabpanel");
+        p.setAttribute("data-active", String(i === 0));
+      });
+
+      if (this.panels.length === 1) return;
+
+      this.querySelectorAll<HTMLButtonElement>(".tabs button").forEach(
+        (btn) => {
+          btn.addEventListener("click", () => {
+            const label = btn.dataset.label;
+            if (label) {
+              this.activateLabel(label);
+              this.broadcast(label);
+            }
+          });
+        }
+      );
+
+      this.restore();
+      window.addEventListener("codegroup-sync", this.boundSync);
+      window.addEventListener("storage", this.boundStorage);
+    }
+
+    disconnectedCallback() {
+      window.removeEventListener("codegroup-sync", this.boundSync);
+      window.removeEventListener("storage", this.boundStorage);
+    }
+
+    private activateLabel(label: string) {
+      const i = this.labels.indexOf(label);
+      if (i >= 0) setCodeGroupActive(this, this.panels, i);
+    }
+
+    private broadcast(label: string) {
+      if (!this.syncKey) return;
+      try {
+        localStorage.setItem(`codegroup:${this.syncKey}`, label);
+      } catch {}
+      window.dispatchEvent(
+        new CustomEvent("codegroup-sync", {
+          detail: { syncKey: this.syncKey, label },
+        })
+      );
+    }
+
+    private restore() {
+      if (!this.syncKey) return;
+      try {
+        const saved = localStorage.getItem(`codegroup:${this.syncKey}`);
+        if (saved && this.labels.includes(saved)) this.activateLabel(saved);
+      } catch {}
+    }
+
+    private handleSync(e: Event) {
+      const { syncKey, label } = (e as CodeGroupSyncEvent).detail;
+      if (syncKey === this.syncKey && this.labels.includes(label))
+        this.activateLabel(label);
+    }
+
+    private handleStorage(e: StorageEvent) {
+      if (!e.key?.startsWith("codegroup:")) return;
+      const sk = e.key.replace("codegroup:", "");
+      if (sk === this.syncKey && e.newValue) this.activateLabel(e.newValue);
+    }
+  }
+
+  customElements.define("code-group", CodeGroupElement);
+}
+
+// ============================================
+// Tabs Web Component (for Astro-rendered <content-tabs>)
+// ============================================
+
+if (!customElements.get("content-tabs")) {
+  class ContentTabsElement extends HTMLElement {
+    private panels: HTMLElement[] = [];
+
+    connectedCallback() {
+      const pc = this.querySelector(".tabs-panels");
+      if (!pc) return;
+      this.panels = Array.from(
+        pc.querySelectorAll<HTMLElement>(":scope > .tab-panel")
+      );
+      if (this.panels.length === 0) return;
+
+      this.panels.forEach((p, i) => {
+        p.setAttribute("role", "tabpanel");
+        p.setAttribute("data-active", String(i === 0));
+      });
+
+      if (this.panels.length === 1) return;
+
+      this.querySelectorAll<HTMLButtonElement>(".tabs-nav button").forEach(
+        (btn, index) => {
+          btn.addEventListener("click", () =>
+            setTabsActive(this, this.panels, index)
+          );
+        }
+      );
+    }
+  }
+
+  customElements.define("content-tabs", ContentTabsElement);
+}
+
+// ============================================
+// Event delegation for React-rendered instances
+// (div.code-group and div.tabs-container)
+// ============================================
+
+function initDivCodeGroups() {
+  document
+    .querySelectorAll<HTMLElement>(".code-group:not(code-group)")
+    .forEach((cg) => {
+      if (cg.dataset.cgInit) return;
+      cg.dataset.cgInit = "1";
+
+      const labels: string[] = cg.dataset.labels
+        ? JSON.parse(cg.dataset.labels)
+        : [];
+      const syncKey = cg.dataset.syncKey || "";
+      const panels = findPanels(cg);
+      if (panels.length === 0) return;
+
+      panels.forEach((p, i) => {
+        p.setAttribute("role", "tabpanel");
+        p.setAttribute("data-active", String(i === 0));
+      });
+      if (panels.length === 1) return;
+
+      cg.querySelectorAll<HTMLButtonElement>(".tabs button").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const label = btn.dataset.label;
+          if (!label) return;
+          const idx = labels.indexOf(label);
+          if (idx < 0) return;
+          setCodeGroupActive(cg, panels, idx);
+          if (syncKey) {
+            try {
+              localStorage.setItem(`codegroup:${syncKey}`, label);
+            } catch {}
+            window.dispatchEvent(
+              new CustomEvent("codegroup-sync", {
+                detail: { syncKey, label },
+              })
+            );
+          }
+        });
+      });
+
+      // Restore from localStorage
+      if (syncKey) {
+        try {
+          const saved = localStorage.getItem(`codegroup:${syncKey}`);
+          if (saved && labels.includes(saved)) {
+            const idx = labels.indexOf(saved);
+            if (idx >= 0) setCodeGroupActive(cg, panels, idx);
+          }
+        } catch {}
+
+        // Cross-instance sync
+        window.addEventListener("codegroup-sync", (e: Event) => {
+          const { syncKey: sk, label } = (e as CodeGroupSyncEvent).detail;
+          if (sk === syncKey && labels.includes(label)) {
+            const idx = labels.indexOf(label);
+            if (idx >= 0) setCodeGroupActive(cg, panels, idx);
+          }
+        });
+
+        window.addEventListener("storage", (e: StorageEvent) => {
+          if (e.key === `codegroup:${syncKey}` && e.newValue) {
+            const idx = labels.indexOf(e.newValue);
+            if (idx >= 0) setCodeGroupActive(cg, panels, idx);
+          }
+        });
+      }
+    });
+}
+
+function initDivTabs() {
+  document
+    .querySelectorAll<HTMLElement>(".tabs-container:not(content-tabs)")
+    .forEach((ct) => {
+      if (ct.dataset.tabsInit) return;
+      ct.dataset.tabsInit = "1";
+
+      const pc = ct.querySelector(".tabs-panels");
+      if (!pc) return;
+      const panels = Array.from(
+        pc.querySelectorAll<HTMLElement>(":scope > .tab-panel")
+      );
+      if (panels.length === 0) return;
+
+      panels.forEach((p, i) => {
+        p.setAttribute("role", "tabpanel");
+        p.setAttribute("data-active", String(i === 0));
+      });
+      if (panels.length === 1) return;
+
+      ct.querySelectorAll<HTMLButtonElement>(".tabs-nav button").forEach(
+        (btn, index) => {
+          btn.addEventListener("click", () =>
+            setTabsActive(ct, panels, index)
+          );
+        }
+      );
+    });
+}
+
+function initAll() {
+  initDivCodeGroups();
+  initDivTabs();
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+
+// Re-initialize after Astro view transitions
+document.addEventListener("astro:after-swap", initAll);

package/src/engine/src/styles/global.css

@@ -415,17 +415,17 @@
   /* Handle both direct children and nested pre elements (MDX may wrap them) */
   .code-group .panels > pre:not(:first-child),
   .code-group .panels pre:not(:first-of-type) {
-    @apply hidden; /* Hide non-first panels by default (prevents flash before JS) */
+    display: none; /* Hide non-first panels by default (prevents flash before JS) */
   }
 
   .code-group .panels > pre[data-active="true"],
   .code-group .panels pre[data-active="true"] {
-    @apply block;
+    display: block;
   }
 
   .code-group .panels > pre[data-active="false"],
   .code-group .panels pre[data-active="false"] {
-    @apply hidden;
+    display: none;
   }
 
   /* Tabs component styles - visibility for slotted tab panels */