@opendocsdev/cli 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendocsdev/cli",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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/PageFooter.tsx

@@ -8,6 +8,11 @@ interface PageLink {
   description?: string;
 }
 
+interface FooterConfig {
+  copyright?: string;
+  links?: { title: string; url: string }[];
+}
+
 interface PageFooterProps {
   path: string;
   backend?: string;
@@ -16,6 +21,7 @@ interface PageFooterProps {
   previousPage?: PageLink | null;
   nextPage?: PageLink | null;
   lastUpdated?: string;
+  footer?: FooterConfig;
   className?: string;
 }
 
@@ -27,10 +33,12 @@ export function PageFooter({
   previousPage,
   nextPage,
   lastUpdated,
+  footer,
   className,
 }: PageFooterProps) {
   const hasNavigation = previousPage || nextPage;
   const showFeedback = feedbackEnabled && backend && siteId;
+  const hasFooter = footer?.copyright || (footer?.links && footer.links.length > 0);
 
   return (
     <footer
@@ -84,6 +92,44 @@ export function PageFooter({
           </div>
         </nav>
       )}
+
+      {/* Footer content */}
+      {hasFooter && (
+        <div className="mt-8 pt-6 border-t border-[var(--color-border)]">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
+            {footer?.copyright && (
+              <p className="text-sm text-[var(--color-muted)]">{footer.copyright}</p>
+            )}
+            {footer?.links && footer.links.length > 0 && (
+              <div className="flex items-center gap-4">
+                {footer.links.map((link) => (
+                  <a
+                    key={link.url}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-[var(--color-muted)] hover:text-[var(--color-foreground)] transition-colors"
+                  >
+                    {link.title}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Built with OpenDocs */}
+      <div className="mt-6 flex items-center justify-center">
+        <a
+          href="https://docs.opendocs.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs text-[var(--color-muted)]/60 hover:text-[var(--color-muted)] transition-colors"
+        >
+          Built with OpenDocs
+        </a>
+      </div>
     </footer>
   );
 }

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

@@ -12,7 +12,7 @@ import {
   type NavigationGroup,
 } from "../../lib/utils";
 import { ThemeToggle } from "./ThemeToggle";
-import { GitHubLink } from "./GitHubLink";
+import { SocialLinks } from "./SocialLinks";
 import { SidebarSearchTrigger } from "./SidebarSearchTrigger";
 
 interface LogoConfig {
@@ -26,6 +26,8 @@ interface SidebarProps {
   logo?: string | LogoConfig;
   currentPath: string;
   githubUrl?: string;
+  discordUrl?: string;
+  twitterUrl?: string;
 }
 
 // Check if any page in a group of children is active
@@ -250,11 +252,18 @@ function Logo({ logo, siteName }: { logo?: string | LogoConfig; siteName: string
     );
   }
 
+  const nameEl = (
+    <span className="text-base font-semibold text-[var(--color-foreground)]">
+      {siteName}
+    </span>
+  );
+
   // String logo - no theme switching needed
   if (typeof logo === "string") {
     return (
-      <a href="/" className="flex items-center gap-2">
-        <img src={logo} alt={siteName} className="h-8 w-auto" />
+      <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+        <img src={logo} alt={siteName} className="h-7 w-auto" />
+        {nameEl}
       </a>
     );
   }
@@ -264,17 +273,19 @@ function Logo({ logo, siteName }: { logo?: string | LogoConfig; siteName: string
 
   if (dark) {
     return (
-      <a href="/" className="flex items-center gap-2">
-        <img src={light} alt={siteName} className="h-8 w-auto dark:hidden" />
-        <img src={dark} alt={siteName} className="h-8 w-auto hidden dark:block" />
+      <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+        <img src={light} alt={siteName} className="h-7 w-auto dark:hidden" />
+        <img src={dark} alt={siteName} className="h-7 w-auto hidden dark:block" />
+        {nameEl}
       </a>
     );
   }
 
   // Only light logo provided
   return (
-    <a href="/" className="flex items-center gap-2">
-      <img src={light} alt={siteName} className="h-8 w-auto" />
+    <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+      <img src={light} alt={siteName} className="h-7 w-auto" />
+      {nameEl}
     </a>
   );
 }
@@ -285,6 +296,8 @@ export function Sidebar({
   logo,
   currentPath: initialPath,
   githubUrl,
+  discordUrl,
+  twitterUrl,
 }: SidebarProps) {
   // Track current path locally so it updates after View Transition navigations
   const [currentPath, setCurrentPath] = useState(initialPath);
@@ -298,9 +311,9 @@ export function Sidebar({
   return (
     <div className="flex flex-col h-full">
       {/* Logo/Site name + Theme toggle */}
-      <div className="flex items-center justify-between h-16 px-4">
+      <div className="flex items-center justify-between h-14 px-4">
         <Logo logo={logo} siteName={siteName} />
-        <ThemeToggle />
+        <ThemeToggle className="flex-shrink-0" />
       </div>
 
       {/* Search trigger */}
@@ -363,10 +376,10 @@ export function Sidebar({
         ))}
       </nav>
 
-      {/* Bottom section with GitHub link */}
-      {githubUrl && (
+      {/* Bottom section with social links */}
+      {(githubUrl || discordUrl || twitterUrl) && (
         <div className="px-4 py-3">
-          <GitHubLink url={githubUrl} />
+          <SocialLinks github={githubUrl} discord={discordUrl} twitter={twitterUrl} />
         </div>
       )}
     </div>

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

@@ -0,0 +1,59 @@
+import { Github } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+// Inline Discord SVG — lucide-react doesn't include Discord
+function DiscordIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  );
+}
+
+// Inline X/Twitter SVG
+function TwitterIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+interface SocialLinksProps {
+  github?: string;
+  discord?: string;
+  twitter?: string;
+  className?: string;
+}
+
+const linkStyle = cn(
+  "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+  "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
+  "hover:bg-[var(--color-surface-sunken)]"
+);
+
+export function SocialLinks({ github, discord, twitter, className }: SocialLinksProps) {
+  if (!github && !discord && !twitter) return null;
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {github && (
+        <a href={github} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="GitHub">
+          <Github className="w-5 h-5" aria-hidden="true" />
+        </a>
+      )}
+      {discord && (
+        <a href={discord} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="Discord">
+          <DiscordIcon className="w-5 h-5" />
+        </a>
+      )}
+      {twitter && (
+        <a href={twitter} target="_blank" rel="noopener noreferrer" className={linkStyle} aria-label="Twitter">
+          <TwitterIcon className="w-5 h-5" />
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default SocialLinks;

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/ThemeToggle.tsx

@@ -36,14 +36,14 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       <button
         type="button"
         className={cn(
-          "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+          "flex items-center justify-center w-7 h-7 rounded-md transition-colors",
           "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
           "hover:bg-[var(--color-surface-sunken)]",
           className
         )}
         aria-label="Toggle theme"
       >
-        <span className="w-5 h-5" />
+        <span className="w-4 h-4" />
       </button>
     );
   }
@@ -53,7 +53,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       type="button"
       onClick={toggleTheme}
       className={cn(
-        "flex items-center justify-center w-9 h-9 rounded-lg transition-colors",
+        "flex items-center justify-center w-7 h-7 rounded-md transition-colors",
         "text-[var(--color-muted)] hover:text-[var(--color-foreground)]",
         "hover:bg-[var(--color-surface-sunken)]",
         className
@@ -61,9 +61,9 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
     >
       {isDark ? (
-        <Sun className="w-5 h-5" />
+        <Sun className="w-4 h-4" />
       ) : (
-        <Moon className="w-5 h-5" />
+        <Moon className="w-4 h-4" />
       )}
     </button>
   );

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

@@ -35,7 +35,10 @@ const faviconPath = config.favicon || "/favicon.ico";
 const navigation = config.navigation || [];
 const logo = config.logo;
 const githubUrl = config.socialLinks?.github;
+const discordUrl = config.socialLinks?.discord;
+const twitterUrl = config.socialLinks?.twitter;
 const feedbackEnabled = config.features?.feedback !== false;
+const footerConfig = config.footer as { copyright?: string; links?: { title: string; url: string }[] } | undefined;
 
 // Backend config
 const backendConfig = config.backend as { apiUrl?: string; siteId?: string } | undefined;
@@ -48,6 +51,10 @@ const accentColor = config.theme?.accentColor || primaryColor;
 const primary = generateColorVariants(primaryColor);
 const accent = generateColorVariants(accentColor);
 
+// Favicon MIME type from extension
+const faviconExt = faviconPath.split(".").pop()?.toLowerCase();
+const faviconType = faviconExt === "svg" ? "image/svg+xml" : faviconExt === "png" ? "image/png" : faviconExt === "ico" ? "image/x-icon" : undefined;
+
 // SEO metadata
 const siteUrl = (config.metadata as { url?: string; ogImage?: string } | undefined)?.url || "";
 const ogImage = (config.metadata as { url?: string; ogImage?: string } | undefined)?.ogImage;
@@ -55,6 +62,9 @@ const canonicalUrl = siteUrl ? `${siteUrl}${currentPath}` : "";
 const pageDescription = description || `${title} - ${siteName}`;
 const fullTitle = `${title} | ${siteName}`;
 
+// Extract Twitter handle from URL for twitter:site meta tag
+const twitterHandle = twitterUrl ? `@${twitterUrl.replace(/\/$/, "").split("/").pop()}` : undefined;
+
 // Build breadcrumb segments from current path
 const pathSegments = currentPath.split("/").filter(Boolean);
 const breadcrumbItems = pathSegments.map((segment, i) => ({
@@ -72,7 +82,11 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={pageDescription} />
-    <link rel="icon" type="image/x-icon" href={faviconPath} />
+    {faviconType ? (
+      <link rel="icon" type={faviconType} href={faviconPath} />
+    ) : (
+      <link rel="icon" href={faviconPath} />
+    )}
     <title>{fullTitle}</title>
 
     {/* Canonical URL */}
@@ -88,11 +102,13 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     <meta property="og:site_name" content={siteName} />
     {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
     {ogImage && <meta property="og:image" content={ogImage.startsWith("http") ? ogImage : `${siteUrl}${ogImage}`} />}
+    {ogImage && <meta property="og:image:alt" content={pageDescription} />}
 
     {/* Twitter Card */}
     <meta name="twitter:card" content={ogImage ? "summary_large_image" : "summary"} />
     <meta name="twitter:title" content={fullTitle} />
     <meta name="twitter:description" content={pageDescription} />
+    {twitterHandle && <meta name="twitter:site" content={twitterHandle} />}
     {ogImage && <meta name="twitter:image" content={ogImage.startsWith("http") ? ogImage : `${siteUrl}${ogImage}`} />}
 
     {/* Structured Data */}
@@ -163,6 +179,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
           logo={logo}
           currentPath={currentPath}
           githubUrl={githubUrl}
+          discordUrl={discordUrl}
+          twitterUrl={twitterUrl}
         />
       </aside>
 
@@ -187,6 +205,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
             logo={logo}
             currentPath={currentPath}
             githubUrl={githubUrl}
+            discordUrl={discordUrl}
+            twitterUrl={twitterUrl}
           />
         </div>
       </aside>
@@ -209,7 +229,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
             </button>
 
             <!-- Logo/site name -->
-            <a href="/" class="flex items-center justify-center">
+            <a href="/" class="flex items-center gap-2">
               {logo ? (
                 typeof logo === "string" ? (
                   <img src={logo} alt={siteName} class="h-6 w-auto" />
@@ -221,9 +241,8 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
                 ) : (
                   <img src={logo.light} alt={siteName} class="h-6 w-auto" />
                 )
-              ) : (
-                <span class="text-lg font-semibold text-[var(--color-foreground)]">{siteName}</span>
-              )}
+              ) : null}
+              <span class="text-base font-semibold text-[var(--color-foreground)]">{siteName}</span>
             </a>
 
             <!-- Search button -->
@@ -259,6 +278,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
               previousPage={previousPage}
               nextPage={nextPage}
               lastUpdated={lastUpdated}
+              footer={footerConfig}
             />
             <CopyButton />
           </main>
@@ -281,6 +301,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 */