@specglass/theme-default 0.0.2 → 0.0.4

package/src/components/ApiExampleRequest.astro

@@ -0,0 +1,192 @@
+---
+/**
+ * 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.
+ * Code blocks use Shiki dual-theme highlighting (AC7).
+ */
+import type { ApiEndpoint } from "@specglass/core";
+import { generateCurlExample, generatePythonExample, generateNodeExample } from "@specglass/core";
+import { CopyButton } from "../islands/CopyButton";
+import { highlight } from "../utils/shiki";
+
+export interface Props {
+  endpoint: ApiEndpoint;
+  baseUrl?: string;
+}
+
+const { endpoint, baseUrl = "https://api.example.com" } = Astro.props;
+
+const options = { baseUrl };
+
+const rawLanguages = [
+  { 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",
+  },
+];
+
+// Pre-render Shiki highlighting at build time
+const languages = await Promise.all(
+  rawLanguages.map(async (item) => ({
+    ...item,
+    highlighted: await highlight(item.code, item.lang),
+  })),
+);
+
+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">
+            <div
+              class="[&_pre]:overflow-x-auto [&_pre]:p-4 [&_pre]:text-sm [&_pre]:leading-relaxed [&_pre]:m-0"
+              set:html={lang.highlighted}
+            />
+            <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 {
+        // noop — localStorage unavailable (e.g., private browsing)
+      }
+
+      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 {
+            /* noop */
+          }
+          // 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>

package/src/components/ApiExampleResponse.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * ApiExampleResponse.astro — Renders example response bodies for each status code.
+ *
+ * For each response, generates a JSON example from the response schema or
+ * uses spec-provided examples. 2xx responses are expanded by default;
+ * others are collapsed.
+ */
+import type { ApiResponse as ApiResponseType } from "@specglass/core";
+import { extractMediaTypeExample } from "@specglass/core";
+import { CopyButton } from "../islands/CopyButton";
+import { highlight } from "../utils/shiki";
+
+export interface Props {
+  responses: ApiResponseType[];
+}
+
+const { responses } = Astro.props;
+
+/** Status code badge colors */
+function getStatusColor(code: string): string {
+  if (code.startsWith("2"))
+    return "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30";
+  if (code.startsWith("3"))
+    return "bg-blue-500/15 text-blue-700 dark:text-blue-400 border-blue-500/30";
+  if (code.startsWith("4"))
+    return "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30";
+  if (code.startsWith("5")) return "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30";
+  return "bg-gray-500/15 text-gray-700 dark:text-gray-400 border-gray-500/30";
+}
+
+const responseExamplesRaw = responses.map((resp) => {
+  let exampleJson: string | null = null;
+  let contentType: string | null = null;
+
+  if (resp.content) {
+    const contentTypes = Object.keys(resp.content);
+    const jsonType = contentTypes.find((ct) => ct.includes("json")) ?? contentTypes[0];
+    if (jsonType) {
+      contentType = jsonType;
+      const example = extractMediaTypeExample(resp.content[jsonType]);
+      exampleJson = JSON.stringify(example, null, 2);
+    }
+  }
+
+  const is2xx = resp.statusCode.startsWith("2");
+
+  return {
+    ...resp,
+    exampleJson,
+    contentType,
+    is2xx,
+    statusColor: getStatusColor(resp.statusCode),
+  };
+});
+
+// Pre-render Shiki highlighting at build time
+const responseExamples = await Promise.all(
+  responseExamplesRaw.map(async (resp) => ({
+    ...resp,
+    highlighted: resp.exampleJson ? await highlight(resp.exampleJson, "json") : null,
+  })),
+);
+---
+
+<div class="mt-6">
+  <h2 class="text-lg font-semibold text-text mb-4">Response Examples</h2>
+
+  <div class="space-y-3">
+    {
+      responseExamples.map((resp) => (
+        <div class="rounded-lg border border-border overflow-hidden">
+          {/* Response header */}
+          {resp.is2xx ? (
+            <>
+              <div class="flex items-center gap-3 px-4 py-3 bg-surface-raised border-b border-border">
+                <span
+                  class:list={[
+                    "inline-flex items-center px-2 py-0.5 rounded text-xs font-bold border",
+                    resp.statusColor,
+                  ]}
+                >
+                  {resp.statusCode}
+                </span>
+                <span class="text-sm text-text-muted">{resp.description}</span>
+                {resp.contentType && (
+                  <span class="ml-auto text-xs text-text-muted/60 font-mono">
+                    {resp.contentType}
+                  </span>
+                )}
+              </div>
+              {resp.highlighted ? (
+                <div class="relative group">
+                  <div
+                    class="[&_pre]:overflow-x-auto [&_pre]:p-4 [&_pre]:text-sm [&_pre]:leading-relaxed [&_pre]:m-0"
+                    set:html={resp.highlighted}
+                  />
+                  <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <CopyButton client:idle code={resp.exampleJson!} />
+                  </div>
+                </div>
+              ) : (
+                <div class="px-4 py-3 text-sm text-text-muted italic">No response body</div>
+              )}
+            </>
+          ) : (
+            <details>
+              <summary class="flex items-center gap-3 px-4 py-3 bg-surface-raised cursor-pointer hover:bg-surface-raised/80 transition-colors">
+                <span
+                  class:list={[
+                    "inline-flex items-center px-2 py-0.5 rounded text-xs font-bold border",
+                    resp.statusColor,
+                  ]}
+                >
+                  {resp.statusCode}
+                </span>
+                <span class="text-sm text-text-muted">{resp.description}</span>
+                {resp.contentType && (
+                  <span class="ml-auto text-xs text-text-muted/60 font-mono">
+                    {resp.contentType}
+                  </span>
+                )}
+              </summary>
+              {resp.highlighted ? (
+                <div class="relative group border-t border-border">
+                  <div
+                    class="[&_pre]:overflow-x-auto [&_pre]:p-4 [&_pre]:text-sm [&_pre]:leading-relaxed [&_pre]:m-0"
+                    set:html={resp.highlighted}
+                  />
+                  <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <CopyButton client:idle code={resp.exampleJson!} />
+                  </div>
+                </div>
+              ) : (
+                <div class="px-4 py-3 text-sm text-text-muted italic border-t border-border">
+                  No response body
+                </div>
+              )}
+            </details>
+          )}
+        </div>
+      ))
+    }
+  </div>
+</div>

package/src/components/ApiNavigation.astro

@@ -2,17 +2,19 @@
 /**
  * ApiNavigation.astro — Sidebar navigation for API reference endpoints.
  * Groups endpoints by tag and highlights the current endpoint.
+ * Also shows errored endpoints with a warning indicator (FR40).
  */
-import type { ApiEndpoint } from "@specglass/core";
-import { buildEndpointSlug, buildEndpointId } from "@specglass/core";
+import type { ApiEndpoint, ApiEndpointError } from "@specglass/core";
+import { buildEndpointSlug, buildErrorEndpointSlug, buildEndpointId } from "@specglass/core";
 
 export interface Props {
   endpoints: ApiEndpoint[];
+  errors?: ApiEndpointError[];
   currentEndpointId: string;
   basePath: string;
 }
 
-const { endpoints, currentEndpointId, basePath } = Astro.props;
+const { endpoints, errors = [], currentEndpointId, basePath } = Astro.props;
 
 // Group endpoints by tag
 const grouped = new Map<string, ApiEndpoint[]>();
@@ -88,6 +90,71 @@ const methodBadgeColors: Record<string, string> = {
       </div>
     ))
   }
+  {/* Errored endpoints section (FR40 fallback) */}
+  {
+    errors.length > 0 && (
+      <div class="mt-4 pt-4 border-t border-border">
+        <button
+          class="flex w-full items-center gap-2 text-xs font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-wider px-3 py-2 hover:text-amber-700 dark:hover:text-amber-300 transition-colors"
+          aria-expanded="true"
+          data-api-nav-group="unsupported"
+        >
+          <svg
+            class="h-3 w-3 shrink-0 transition-transform rotate-90"
+            viewBox="0 0 12 12"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M4.5 2l4 4-4 4" />
+          </svg>
+          <span aria-hidden="true" class="mr-0.5">
+            ⚠️
+          </span>{" "}
+          Unsupported
+        </button>
+        <ul class="ml-3 space-y-0.5" data-api-nav-items="unsupported">
+          {errors.map((err) => {
+            const errId = `${err.method}-${err.path}`;
+            const isActive = errId === currentEndpointId;
+            const slug = buildErrorEndpointSlug(err);
+            const badgeColor = methodBadgeColors[err.method.toLowerCase()] ?? methodBadgeColors.get;
+
+            return (
+              <li>
+                <a
+                  href={`${basePath}/${slug}`}
+                  class:list={[
+                    "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors group",
+                    isActive
+                      ? "bg-amber-500/10 text-amber-700 dark:text-amber-400 font-medium"
+                      : "text-text-muted/60 hover:bg-surface-raised hover:text-text-muted",
+                  ]}
+                  aria-current={isActive ? "page" : undefined}
+                  title={`Unsupported: ${err.reason}`}
+                >
+                  <span
+                    class:list={[
+                      "inline-flex w-12 justify-center shrink-0 px-1 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider opacity-60",
+                      badgeColor,
+                    ]}
+                  >
+                    {err.method.toUpperCase()}
+                  </span>
+                  <span class="font-mono truncate opacity-60">{err.path}</span>
+                  <span
+                    class="text-amber-500 dark:text-amber-400 text-[10px] ml-auto shrink-0"
+                    aria-hidden="true"
+                  >
+                    ⚠️
+                  </span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    )
+  }
 </nav>
 
 <script>

package/src/layouts/ApiReferencePage.astro

@@ -3,6 +3,7 @@
  * ApiReferencePage.astro — Layout for API reference endpoint pages.
  * Mirrors DocPage structure (Header, Sidebar, Footer, mobile menu) but
  * replaces the Table of Contents with API endpoint navigation.
+ * Supports fallback rendering for errored endpoints (FR40).
  */
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
@@ -11,26 +12,34 @@ import ApiEndpoint from "../components/ApiEndpoint.astro";
 import ApiParameters from "../components/ApiParameters.astro";
 import ApiResponse from "../components/ApiResponse.astro";
 import ApiAuth from "../components/ApiAuth.astro";
+import ApiExampleRequest from "../components/ApiExampleRequest.astro";
+import ApiExampleResponse from "../components/ApiExampleResponse.astro";
+import ApiEndpointFallback from "../components/ApiEndpointFallback.astro";
 import { ThemeToggle } from "../islands/ThemeToggle";
 import { SearchPalette } from "../islands/SearchPalette";
 import "../styles/global.css";
 import type {
   NavigationTree,
   ApiEndpoint as ApiEndpointType,
+  ApiEndpointError,
   ApiSecurityRequirement,
   SpecglassConfig,
 } from "@specglass/core";
 import { generateThemeCSS } from "../utils/theme-css";
 
 export interface Props {
-  /** The current endpoint to display */
-  endpoint: ApiEndpointType;
+  /** The current endpoint to display (undefined for errored endpoints) */
+  endpoint?: ApiEndpointType;
+  /** Error data for endpoints with unsupported patterns (FR40) */
+  endpointError?: ApiEndpointError;
   /** Documentation navigation tree */
   navigation: NavigationTree;
   /** Site configuration */
   config: SpecglassConfig;
-  /** All endpoints for the sidebar navigation */
+  /** All valid endpoints for the sidebar navigation */
   allEndpoints: ApiEndpointType[];
+  /** All errored endpoints for the sidebar navigation */
+  allErrors?: ApiEndpointError[];
   /** Spec-level information */
   specInfo: {
     title: string;
@@ -40,15 +49,28 @@ export interface Props {
   securitySchemes?: Record<string, ApiSecurityRequirement>;
 }
 
-const { endpoint, navigation, config, allEndpoints, specInfo, securitySchemes } = Astro.props;
+const {
+  endpoint,
+  endpointError,
+  navigation,
+  config,
+  allEndpoints,
+  allErrors = [],
+  specInfo,
+  securitySchemes,
+} = Astro.props;
+const isErrorPage = !!endpointError;
 const themeCSS = generateThemeCSS(config);
 
-const pageTitle = `${endpoint.method.toUpperCase()} ${endpoint.path} — ${specInfo.title} API`;
-const pageDescription =
-  endpoint.summary ||
-  endpoint.description ||
-  `API reference for ${endpoint.method.toUpperCase()} ${endpoint.path}`;
-const currentEndpointId = `${endpoint.method}-${endpoint.path}`;
+const displayMethod = isErrorPage ? endpointError!.method : endpoint!.method;
+const displayPath = isErrorPage ? endpointError!.path : endpoint!.path;
+const pageTitle = `${displayMethod.toUpperCase()} ${displayPath} — ${specInfo.title} API`;
+const pageDescription = isErrorPage
+  ? `Manual documentation required for ${displayMethod.toUpperCase()} ${displayPath}`
+  : endpoint!.summary ||
+    endpoint!.description ||
+    `API reference for ${displayMethod.toUpperCase()} ${displayPath}`;
+const currentEndpointId = `${displayMethod}-${displayPath}`;
 ---
 
 <html lang="en" class="dark">
@@ -73,7 +95,9 @@ const currentEndpointId = `${endpoint.method}-${endpoint.path}`;
           var stored = null;
           try {
             stored = localStorage.getItem("specglass-theme");
-          } catch (e) {}
+          } catch (e) {
+            /* noop */
+          }
           var theme = stored === "dark" || stored === "light" ? stored : "dark";
           if (theme === "dark") {
             document.documentElement.classList.add("dark");
@@ -119,6 +143,7 @@ const currentEndpointId = `${endpoint.method}-${endpoint.path}`;
 
         <ApiNavigation
           endpoints={allEndpoints}
+          errors={allErrors}
           currentEndpointId={currentEndpointId}
           basePath="/api-reference"
         />
@@ -140,6 +165,7 @@ const currentEndpointId = `${endpoint.method}-${endpoint.path}`;
         </div>
         <ApiNavigation
           endpoints={allEndpoints}
+          errors={allErrors}
           currentEndpointId={currentEndpointId}
           basePath="/api-reference"
         />
@@ -148,36 +174,47 @@ const currentEndpointId = `${endpoint.method}-${endpoint.path}`;
       <!-- Main content area -->
       <main id="main-content" class="flex-1 min-w-0 md:ml-(--width-sidebar)" data-pagefind-body>
         <article class="max-w-(--width-content-max) mx-auto px-(--spacing-page) py-8">
-          <!-- Endpoint header -->
-          <ApiEndpoint endpoint={endpoint} />
-
-          <!-- Authentication -->
           {
-            endpoint.security && endpoint.security.length > 0 && (
-              <ApiAuth security={endpoint.security} securitySchemes={securitySchemes} />
-            )
-          }
+            isErrorPage ? (
+              /* Fallback rendering for errored endpoints (FR40) */
+              <ApiEndpointFallback error={endpointError!} />
+            ) : (
+              <>
+                {/* Endpoint header */}
+                <ApiEndpoint endpoint={endpoint!} />
 
-          <!-- Parameters & Request Body -->
-          {
-            (endpoint.parameters.length > 0 || endpoint.requestBody) && (
-              <div>
-                <h2 class="text-lg font-semibold text-text mb-4 mt-0">Parameters</h2>
-                <ApiParameters
-                  parameters={endpoint.parameters}
-                  requestBody={endpoint.requestBody}
-                />
-              </div>
-            )
-          }
+                {/* Authentication */}
+                {endpoint!.security && endpoint!.security.length > 0 && (
+                  <ApiAuth security={endpoint!.security} securitySchemes={securitySchemes} />
+                )}
 
-          <!-- Responses -->
-          {
-            endpoint.responses.length > 0 && (
-              <div>
-                <h2 class="text-lg font-semibold text-text mb-4">Responses</h2>
-                <ApiResponse responses={endpoint.responses} />
-              </div>
+                {/* Parameters & Request Body */}
+                {(endpoint!.parameters.length > 0 || endpoint!.requestBody) && (
+                  <div>
+                    <h2 class="text-lg font-semibold text-text mb-4 mt-0">Parameters</h2>
+                    <ApiParameters
+                      parameters={endpoint!.parameters}
+                      requestBody={endpoint!.requestBody}
+                    />
+                  </div>
+                )}
+
+                {/* Responses */}
+                {endpoint!.responses.length > 0 && (
+                  <div>
+                    <h2 class="text-lg font-semibold text-text mb-4">Responses</h2>
+                    <ApiResponse responses={endpoint!.responses} />
+                  </div>
+                )}
+
+                {/* Request Example (code tabs: cURL, Python, Node.js) */}
+                <ApiExampleRequest endpoint={endpoint!} />
+
+                {/* Response Examples (per status code) */}
+                {endpoint!.responses.length > 0 && (
+                  <ApiExampleResponse responses={endpoint!.responses} />
+                )}
+              </>
             )
           }
         </article>

package/src/scripts/code-block-enhancer.ts

@@ -0,0 +1,59 @@
+/**
+ * Client-side enhancer for fenced code blocks.
+ *
+ * The rehype plugin wraps fenced code <pre> elements in:
+ *   <div class="code-block code-block--fenced" data-code="...">
+ *     <div class="code-block-body">
+ *       <pre>...</pre>
+ *     </div>
+ *   </div>
+ *
+ * This script adds a lightweight copy button to each fenced code block
+ * WITHOUT requiring React hydration — keeping fenced blocks zero-JS
+ * until the user actually clicks copy.
+ */
+
+function initCopyButtons() {
+  document
+    .querySelectorAll<HTMLDivElement>(".code-block--fenced")
+    .forEach((block) => {
+      // Skip if already enhanced
+      if (block.querySelector(".sg-copy-btn-native")) return;
+
+      const code = block.getAttribute("data-code") ?? "";
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "sg-copy-btn-native sg-copy-btn";
+      btn.setAttribute("aria-label", "Copy code");
+      btn.title = "Copy code";
+      btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+
+      btn.addEventListener("click", () => {
+        navigator.clipboard.writeText(code).then(() => {
+          btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#22c55e"><polyline points="20 6 9 17 4 12"/></svg>`;
+          btn.setAttribute("aria-label", "Copied!");
+          btn.title = "Copied!";
+          setTimeout(() => {
+            btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+            btn.setAttribute("aria-label", "Copy code");
+            btn.title = "Copy code";
+          }, 2000);
+        }).catch(() => {
+          console.warn("[CopyButton] Clipboard API unavailable");
+        });
+      });
+
+      // Insert into the code-block-body
+      const body = block.querySelector<HTMLDivElement>(".code-block-body");
+      if (body) {
+        body.appendChild(btn);
+      }
+    });
+}
+
+// Run on initial load
+document.addEventListener("DOMContentLoaded", initCopyButtons);
+
+// Re-run after Astro ViewTransitions page swaps
+document.addEventListener("astro:after-swap", initCopyButtons);