@specglass/theme-default 0.0.9 → 0.0.11

package/src/islands/ThemeToggle.tsx

@@ -52,56 +52,53 @@ export function ThemeToggle() {
       type="button"
       onClick={toggleTheme}
       aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      className="inline-flex items-center justify-center rounded-md p-2 text-text-muted hover:text-(--color-text) hover:bg-hover-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors"
+      className="relative inline-flex items-center justify-center w-8 h-8 rounded-lg text-text-muted hover:text-text hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors"
     >
-      {/* Icon container — both icons rendered, crossfade via CSS transitions */}
-      <span className="relative inline-flex items-center justify-center w-5 h-5">
-        {/* Sun icon — visible in dark mode, click to switch to light */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          className={`absolute inset-0 transition-transform duration-300 ${
-            isDark ? "rotate-0 scale-100" : "-rotate-90 scale-0"
-          }`}
-        >
-          <circle cx="12" cy="12" r="4" />
-          <path d="M12 2v2" />
-          <path d="M12 20v2" />
-          <path d="m4.93 4.93 1.41 1.41" />
-          <path d="m17.66 17.66 1.41 1.41" />
-          <path d="M2 12h2" />
-          <path d="M20 12h2" />
-          <path d="m6.34 17.66-1.41 1.41" />
-          <path d="m19.07 4.93-1.41 1.41" />
-        </svg>
+      {/* Sun icon — visible in dark mode, click to switch to light */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        className={`absolute inset-0 m-auto transition-all duration-300 ${
+          isDark ? "rotate-0 scale-100" : "-rotate-90 scale-0"
+        }`}
+      >
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2" />
+        <path d="M12 20v2" />
+        <path d="m4.93 4.93 1.41 1.41" />
+        <path d="m17.66 17.66 1.41 1.41" />
+        <path d="M2 12h2" />
+        <path d="M20 12h2" />
+        <path d="m6.34 17.66-1.41 1.41" />
+        <path d="m19.07 4.93-1.41 1.41" />
+      </svg>
 
-        {/* Moon icon — visible in light mode, click to switch to dark */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          className={`absolute inset-0 transition-transform duration-300 ${
-            !isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"
-          }`}
-        >
-          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
-        </svg>
-      </span>
+      {/* Moon icon — visible in light mode, click to switch to dark */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        className={`absolute inset-0 m-auto transition-all duration-300 ${
+          !isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"
+        }`}
+      >
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+      </svg>
     </button>
   );
 }

package/src/layouts/ApiReferencePage.astro

@@ -17,6 +17,8 @@ import ApiExampleResponse from "../components/ApiExampleResponse.astro";
 import ApiEndpointFallback from "../components/ApiEndpointFallback.astro";
 import { ThemeToggle } from "../islands/ThemeToggle";
 import { SearchPalette } from "../islands/SearchPalette";
+import { LanguageToggle } from "../islands/LanguageToggle";
+
 import "../styles/global.css";
 import type {
   NavigationTree,
@@ -85,30 +87,21 @@ const currentEndpointId = `${displayMethod}-${displayPath}`;
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
-    <!-- FOUC prevention: apply stored theme before first paint -->
+
     <script is:inline>
       (function () {
-        function applyStoredTheme() {
-          var stored = null;
-          try {
-            stored = localStorage.getItem("specglass-theme");
-          } catch (e) {
-            /* noop */
-          }
-          var theme = stored === "dark" || stored === "light" ? stored : "dark";
-          if (theme === "dark") {
-            document.documentElement.classList.add("dark");
-          } else {
-            document.documentElement.classList.remove("dark");
-          }
-        }
-        applyStoredTheme();
-        if (!window.__sgThemeInit) {
-          window.__sgThemeInit = true;
-          document.addEventListener("astro:after-swap", applyStoredTheme);
+        var stored = null;
+        try {
+          stored = localStorage.getItem("specglass-theme");
+        } catch (e) {}
+        var theme = stored === "dark" || stored === "light" ? stored : "dark";
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
         }
       })();
     </script>
@@ -117,12 +110,13 @@ const currentEndpointId = `${displayMethod}-${displayPath}`;
     <!-- Skip to content link for accessibility -->
     <a
       href="#main-content"
-      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-primary focus:text-white focus:px-4 focus:py-2 focus:rounded"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-text focus:text-surface focus:px-4 focus:py-2 focus:rounded"
     >
       Skip to content
     </a>
 
     <Header>
+      <LanguageToggle client:idle />
       <SearchPalette client:idle />
       <ThemeToggle client:load />
     </Header>
@@ -132,12 +126,12 @@ const currentEndpointId = `${displayMethod}-${displayPath}`;
       <nav
         id="sidebar"
         aria-label="API endpoint navigation"
-        class="hidden md:block fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border bg-sidebar-bg px-4 py-6"
+        class="hidden md:block fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border/40 bg-surface-1 px-4 py-6"
         data-pagefind-ignore
       >
         <!-- Spec title header -->
         <div class="mb-4 px-3">
-          <h2 class="text-sm font-semibold text-text truncate">{specInfo.title}</h2>
+          <h2 class="text-[0.8125rem] font-semibold text-text truncate">{specInfo.title}</h2>
           <span class="text-xs text-text-muted">v{specInfo.version}</span>
         </div>
 
@@ -150,17 +144,21 @@ const currentEndpointId = `${displayMethod}-${displayPath}`;
       </nav>
 
       <!-- Mobile sidebar overlay -->
-      <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden" aria-hidden="true">
+      <div
+        id="sidebar-overlay"
+        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 hidden"
+        aria-hidden="true"
+      >
       </div>
 
       <!-- Mobile sidebar drawer -->
       <nav
         id="sidebar-mobile"
         aria-label="API endpoint navigation"
-        class="fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border bg-sidebar-bg px-4 py-6 z-40 -translate-x-full transition-transform duration-(--transition-normal) md:hidden"
+        class="fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border/40 bg-surface-1 px-4 py-6 z-40 -translate-x-full transition-transform duration-(--transition-normal) md:hidden"
       >
         <div class="mb-4 px-3">
-          <h2 class="text-sm font-semibold text-text truncate">{specInfo.title}</h2>
+          <h2 class="text-[0.8125rem] font-semibold text-text truncate">{specInfo.title}</h2>
           <span class="text-xs text-text-muted">v{specInfo.version}</span>
         </div>
         <ApiNavigation
@@ -173,47 +171,60 @@ const currentEndpointId = `${displayMethod}-${displayPath}`;
 
       <!-- 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">
+        <article class="px-(--spacing-page) py-8">
           {
             isErrorPage ? (
               /* Fallback rendering for errored endpoints (FR40) */
-              <ApiEndpointFallback error={endpointError!} />
+              <div class="max-w-(--width-content-max) mx-auto">
+                <ApiEndpointFallback error={endpointError!} />
+              </div>
             ) : (
               <>
-                {/* Endpoint header */}
-                <ApiEndpoint endpoint={endpoint!} />
+                {/* Endpoint header — full width */}
+                <div class="max-w-360 mx-auto mb-8">
+                  <ApiEndpoint endpoint={endpoint!} />
+                </div>
 
-                {/* Authentication */}
-                {endpoint!.security && endpoint!.security.length > 0 && (
-                  <ApiAuth security={endpoint!.security} securitySchemes={securitySchemes} />
-                )}
+                {/* Two-column layout: explanation (left) + code (right) */}
+                <div class="max-w-360 mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
+                  {/* Left column: textual explanation */}
+                  <div class="min-w-0 space-y-6">
+                    {/* Authentication */}
+                    {endpoint!.security && endpoint!.security.length > 0 && (
+                      <ApiAuth security={endpoint!.security} securitySchemes={securitySchemes} />
+                    )}
 
-                {/* 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>
-                )}
+                    {/* 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} />
+                    {/* Responses */}
+                    {endpoint!.responses.length > 0 && (
+                      <div>
+                        <h2 class="text-lg font-semibold text-text mb-4">Responses</h2>
+                        <ApiResponse responses={endpoint!.responses} />
+                      </div>
+                    )}
                   </div>
-                )}
 
-                {/* Request Example (code tabs: cURL, Python, Node.js) */}
-                <ApiExampleRequest endpoint={endpoint!} />
+                  {/* Right column: code examples (sticky on desktop) */}
+                  <div class="min-w-0 lg:sticky lg:top-[calc(var(--height-header)+2rem)] lg:max-h-[calc(100vh-var(--height-header)-4rem)] lg:overflow-y-auto space-y-6">
+                    {/* Request Example (code tabs: cURL, Python, Node.js) */}
+                    <ApiExampleRequest endpoint={endpoint!} />
 
-                {/* Response Examples (per status code) */}
-                {endpoint!.responses.length > 0 && (
-                  <ApiExampleResponse responses={endpoint!.responses} />
-                )}
+                    {/* Response Examples (per status code) */}
+                    {endpoint!.responses.length > 0 && (
+                      <ApiExampleResponse responses={endpoint!.responses} />
+                    )}
+                  </div>
+                </div>
               </>
             )
           }

package/src/layouts/DocPage.astro

@@ -3,8 +3,11 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import Sidebar from "../components/Sidebar.astro";
 import TableOfContents from "../components/TableOfContents.astro";
+import EditLink from "../components/EditLink.astro";
 import { ThemeToggle } from "../islands/ThemeToggle";
 import { SearchPalette } from "../islands/SearchPalette";
+import { LanguageToggle } from "../islands/LanguageToggle";
+
 import "../styles/global.css";
 import type { NavigationTree } from "@specglass/core";
 import { config } from "virtual:specglass/config";
@@ -42,29 +45,21 @@ const { title, description, frontmatter, navigation, headings, currentSlug } = A
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
-    <!-- FOUC prevention: apply stored theme before first paint -->
+
     <script is:inline>
       (function () {
-        function applyStoredTheme() {
-          var stored = null;
-          try {
-            stored = localStorage.getItem("specglass-theme");
-          } catch (e) {}
-          var theme = stored === "dark" || stored === "light" ? stored : "dark";
-          if (theme === "dark") {
-            document.documentElement.classList.add("dark");
-          } else {
-            document.documentElement.classList.remove("dark");
-          }
-        }
-        applyStoredTheme();
-        // Re-apply after Astro ViewTransitions page swap (guard prevents duplicate listeners)
-        if (!window.__sgThemeInit) {
-          window.__sgThemeInit = true;
-          document.addEventListener("astro:after-swap", applyStoredTheme);
+        var stored = null;
+        try {
+          stored = localStorage.getItem("specglass-theme");
+        } catch (e) {}
+        var theme = stored === "dark" || stored === "light" ? stored : "dark";
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
         }
       })();
     </script>
@@ -73,36 +68,41 @@ const { title, description, frontmatter, navigation, headings, currentSlug } = A
     <!-- Skip to content link for accessibility -->
     <a
       href="#main-content"
-      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-primary focus:text-white focus:px-4 focus:py-2 focus:rounded"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-text focus:text-surface focus:px-4 focus:py-2 focus:rounded"
     >
       Skip to content
     </a>
 
     <Header>
+      <LanguageToggle client:idle />
       <SearchPalette client:idle />
       <ThemeToggle client:load />
     </Header>
 
-    <div class="flex pt-(--height-header)">
+    <div class="flex flex-col min-h-[calc(100vh-var(--height-header))] pt-(--height-header)">
       <!-- Sidebar navigation -->
       <nav
         id="sidebar"
         aria-label="Documentation navigation"
-        class="hidden md:block fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border bg-sidebar-bg px-4 py-6"
+        class="hidden md:block fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border/20 bg-surface-0 px-4 py-6"
         data-pagefind-ignore
       >
         <Sidebar items={navigation.items} currentSlug={currentSlug} />
       </nav>
 
       <!-- Mobile sidebar overlay -->
-      <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden" aria-hidden="true">
+      <div
+        id="sidebar-overlay"
+        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 hidden"
+        aria-hidden="true"
+      >
       </div>
 
       <!-- Mobile sidebar drawer -->
       <nav
         id="sidebar-mobile"
         aria-label="Documentation navigation"
-        class="fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border bg-sidebar-bg px-4 py-6 z-40 -translate-x-full transition-transform duration-(--transition-normal) md:hidden"
+        class="fixed top-(--height-header) left-0 bottom-0 w-(--width-sidebar) overflow-y-auto border-r border-border/20 bg-surface-0 px-4 py-6 z-40 -translate-x-full transition-transform duration-(--transition-normal) md:hidden"
       >
         <Sidebar items={navigation.items} currentSlug={currentSlug} />
       </nav>
@@ -113,16 +113,21 @@ const { title, description, frontmatter, navigation, headings, currentSlug } = A
         class="flex-1 min-w-0 md:ml-(--width-sidebar) lg:mr-(--width-toc)"
         data-pagefind-body
       >
-        <article class="sg-content max-w-(--width-content-max) mx-auto px-(--spacing-page) py-8">
-          <h1 class="text-3xl font-bold tracking-tight mb-2">
+        <article
+          class="sg-content max-w-(--width-content-max) mx-auto px-(--spacing-page) py-8"
+        >
+          <h1>
             {frontmatter.title}
           </h1>
           {
             frontmatter.description && (
-              <p class="text-text-muted text-lg mb-8 mt-0">{frontmatter.description}</p>
+              <p class="text-text-muted text-base mt-0 mb-8 leading-relaxed">
+                {frontmatter.description}
+              </p>
             )
           }
           <slot />
+          <EditLink currentSlug={currentSlug} />
         </article>
       </main>