@tomehq/theme 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,96 +1 @@
-# @tomehq/theme
-
-## 0.4.0
-
-### Minor Changes
-
-- c4eae3b: Fix client-side navigation race conditions, content flash, and feedback section disappearing
-
-  **Theme:**
-
-  - Replace AbortController with navigation counter pattern for reliable race condition protection during rapid sidebar navigation
-  - Switch content innerHTML update from `useEffect` to `useLayoutEffect` to prevent visual flash artifacts (thumbs up/down flicker)
-  - Add `key={currentPageId}` on content div to force DOM recreation on page change
-  - Change `overflow: hidden` to `overflow: clip` on root container to prevent feedback section from disappearing on scroll
-  - Move `setCurrentPageId` after page load completes (load-before-push) so sidebar highlighting stays correct during navigation
-  - Remove stale HTML comparison guard that prevented content updates during rapid navigation
-  - Add error classes (PageNotFoundError, PageLoadError, NavigationCancelledError) for better error handling
-
-  **Core:**
-
-  - Page loader virtual module now throws `Error("Unknown page: " + id)` for unknown page IDs instead of silently returning null
-
-  **CLI:**
-
-  - Restructure `tome init` scaffolding to use Diataxis framework (tutorials, guides, reference, concepts)
-  - Add comprehensive starter pages for each Diataxis category
-  - Add create-tome template with same Diataxis structure
-
-### Patch Changes
-
-- Updated dependencies [c4eae3b]
-  - @tomehq/core@0.3.4
-
-## 0.3.4
-
-### Patch Changes
-
-- f03e6c2: Fix page scrolling beyond viewport bounds in all directions. Lock layout to 100vh with overflow hidden on html, body, and root container.
-
-## 0.3.3
-
-### Patch Changes
-
-- 062349c: Fix MCP server stdout corruption, add dashboard mobile responsiveness, improve test coverage, and update docs.
-
-  - Fix: MCP CLI banner no longer writes to stdout, preventing JSON-RPC protocol corruption
-  - Fix: API Playground prop wiring and githubSource route crash
-  - Feat: MCP server `createMcpServer()` exported for programmatic use with graceful shutdown
-  - Feat: Dashboard mobile-responsive layout with media query breakpoints
-  - Feat: 13 MCP server integration tests using InMemoryTransport
-  - Docs: Add missing typedoc CLI command, fix social link examples, update package list
-
-- Updated dependencies [062349c]
-  - @tomehq/core@0.3.3
-  - @tomehq/components@0.3.3
-
-## 0.2.8
-
-### Minor Changes
-
-- Replace hash-based SPA routing with History API (pushState + popstate + pathname parsing)
-- Content link interception: in-content markdown links navigate via SPA instead of full page reload
-- Banner link internal navigation support
-- Algolia search basePath stripping for correct page ID extraction
-- Extract routing helpers (`pathnameToPageId`, `pageIdToPath`) into testable `routing.ts` module
-- Extract entry helpers (`loadPage`, `computeEditUrl`, `resolveInitialPageId`, `detectCurrentVersion`) into testable `entry-helpers.ts` module
-- Pass `basePath` prop through Shell for correct URL construction
-- Updated dependencies
-  - @tomehq/core@0.2.8
-  - @tomehq/components@0.2.8
-
-## 0.2.0
-
-### Minor Changes
-
-- Shell: logo links back to landing page, dynamic version in sidebar footer
-- Shell: edit link support, table of contents depth config, changelog page layout
-- Entry: pass new config fields (editLink, tableOfContents, plugins) to Shell
-- Updated dependencies
-  - @tomehq/core@0.2.0
-  - @tomehq/components@0.2.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @tomehq/components@0.1.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Fix bugs found in functionality audit: invalid search provider, AI key naming mismatch, hardcoded version. Remove dead billing stubs. Add 57 API route tests.
-- Updated dependencies
-  - @tomehq/core@0.1.1
+# Changelog

package/dist/{chunk-DKSQZLWR.js → chunk-FIUZY65C.js}

@@ -76,6 +76,76 @@ var THEME_PRESETS = {
       hdBg: "rgba(246,244,240,0.92)"
     },
     fonts: { heading: "Cormorant Garamond", body: "Bricolage Grotesque", code: "Fira Code" }
+  },
+  cipher: {
+    dark: {
+      bg: "#050508",
+      sf: "#0c0c12",
+      sfH: "#12121a",
+      bd: "#1a1a25",
+      tx: "#d4ff00",
+      tx2: "#8a90a0",
+      txM: "#6a7080",
+      ac: "#6666ff",
+      acD: "rgba(102,102,255,0.10)",
+      acT: "#8080ff",
+      cdBg: "#08080e",
+      cdTx: "#b0c870",
+      sbBg: "#08080d",
+      hdBg: "rgba(5,5,8,0.88)"
+    },
+    light: {
+      bg: "#f0f2f5",
+      sf: "#ffffff",
+      sfH: "#e8eaef",
+      bd: "#d0d4db",
+      tx: "#0f1219",
+      tx2: "#4a5060",
+      txM: "#6a7080",
+      ac: "#2020cc",
+      acD: "rgba(32,32,204,0.08)",
+      acT: "#1a1aa8",
+      cdBg: "#e6e9ef",
+      cdTx: "#2a3520",
+      sbBg: "#ebedf2",
+      hdBg: "rgba(240,242,245,0.90)"
+    },
+    fonts: { heading: "Bodoni Moda", body: "Space Grotesk", code: "Source Code Pro" }
+  },
+  mint: {
+    dark: {
+      bg: "#0d1117",
+      sf: "#161b22",
+      sfH: "#1c2129",
+      bd: "#21262d",
+      tx: "#e6edf3",
+      tx2: "#8b949e",
+      txM: "#6e7681",
+      ac: "#0ea371",
+      acD: "rgba(14,163,113,0.10)",
+      acT: "#2dd4a0",
+      cdBg: "#0a0e14",
+      cdTx: "#adbac7",
+      sbBg: "#0d1117",
+      hdBg: "rgba(13,17,23,0.88)"
+    },
+    light: {
+      bg: "#ffffff",
+      sf: "#f6f8fa",
+      sfH: "#eef1f5",
+      bd: "#d8dee4",
+      tx: "#1f2328",
+      tx2: "#59636e",
+      txM: "#6e7681",
+      ac: "#0a7b53",
+      acD: "rgba(10,123,83,0.07)",
+      acT: "#087a50",
+      cdBg: "#f0f3f6",
+      cdTx: "#24292f",
+      sbBg: "#f6f8fa",
+      hdBg: "rgba(255,255,255,0.90)"
+    },
+    fonts: { heading: "Inter", body: "Inter", code: "Fira Code" }
   }
 };
 
@@ -842,7 +912,7 @@ function Shell({
   const [isDark, setDark] = useState2(() => {
     if (themeMode === "dark") return true;
     if (themeMode === "light") return false;
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
   });
   const [mobile, setMobile] = useState2(() => typeof window !== "undefined" && window.innerWidth < 768);
   const [sbOpen, setSb] = useState2(() => typeof window !== "undefined" && window.innerWidth >= 768);
@@ -1589,7 +1659,7 @@ function Shell({
           }
         ),
         /* @__PURE__ */ jsxs2("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
-          /* @__PURE__ */ jsxs2("main", { style: { flex: 1, maxWidth: mobile ? "100%" : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs2("main", { style: { flex: 1, maxWidth: mobile ? "100%" : apiManifest ? 1100 : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }, children: [
             breadcrumbs.length > 0 && /* @__PURE__ */ jsx2("nav", { "aria-label": "Breadcrumbs", "data-testid": "breadcrumbs", style: {
               display: "flex",
               alignItems: "center",
@@ -2064,14 +2134,13 @@ var MDX_COMPONENTS = {
   CardGrid
 };
 var contentStyles = `
-  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&family=Bodoni+Moda:ital,wght@0,400;0,700;0,900;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
 
   html, body { margin: 0; padding: 0; height: 100%; overflow: clip; }
   #tome-root { height: 100%; overflow: clip; }
 
   .tome-content h1 { display: none; }
-  .tome-content h2 { font-family: var(--font-body); font-size: 1.35em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; display: flex; align-items: center; gap: 10px; letter-spacing: 0.01em; }
-  .tome-content h2::before { content: "#"; font-family: var(--font-heading); font-size: 1.2em; font-weight: 300; font-style: italic; color: var(--ac); opacity: 0.5; }
+  .tome-content h2 { font-family: var(--font-body); font-size: 1.35em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; letter-spacing: 0.01em; }
   .tome-content h3 { font-family: var(--font-body); font-size: 1.15em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
   .tome-content h4 { font-family: var(--font-body); font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
   .tome-content p { color: var(--tx2); line-height: 1.8; margin-bottom: 1em; font-size: 14.5px; }

package/dist/entry.js

@@ -1,6 +1,6 @@
 import {
   entry_default
-} from "./chunk-DKSQZLWR.js";
+} from "./chunk-FIUZY65C.js";
 export {
   entry_default as default
 };

package/dist/index.d.ts

@@ -252,6 +252,84 @@ declare const THEME_PRESETS: {
             readonly code: "Fira Code";
         };
     };
+    readonly cipher: {
+        readonly dark: {
+            readonly bg: "#050508";
+            readonly sf: "#0c0c12";
+            readonly sfH: "#12121a";
+            readonly bd: "#1a1a25";
+            readonly tx: "#d4ff00";
+            readonly tx2: "#8a90a0";
+            readonly txM: "#6a7080";
+            readonly ac: "#6666ff";
+            readonly acD: "rgba(102,102,255,0.10)";
+            readonly acT: "#8080ff";
+            readonly cdBg: "#08080e";
+            readonly cdTx: "#b0c870";
+            readonly sbBg: "#08080d";
+            readonly hdBg: "rgba(5,5,8,0.88)";
+        };
+        readonly light: {
+            readonly bg: "#f0f2f5";
+            readonly sf: "#ffffff";
+            readonly sfH: "#e8eaef";
+            readonly bd: "#d0d4db";
+            readonly tx: "#0f1219";
+            readonly tx2: "#4a5060";
+            readonly txM: "#6a7080";
+            readonly ac: "#2020cc";
+            readonly acD: "rgba(32,32,204,0.08)";
+            readonly acT: "#1a1aa8";
+            readonly cdBg: "#e6e9ef";
+            readonly cdTx: "#2a3520";
+            readonly sbBg: "#ebedf2";
+            readonly hdBg: "rgba(240,242,245,0.90)";
+        };
+        readonly fonts: {
+            readonly heading: "Bodoni Moda";
+            readonly body: "Space Grotesk";
+            readonly code: "Source Code Pro";
+        };
+    };
+    readonly mint: {
+        readonly dark: {
+            readonly bg: "#0d1117";
+            readonly sf: "#161b22";
+            readonly sfH: "#1c2129";
+            readonly bd: "#21262d";
+            readonly tx: "#e6edf3";
+            readonly tx2: "#8b949e";
+            readonly txM: "#6e7681";
+            readonly ac: "#0ea371";
+            readonly acD: "rgba(14,163,113,0.10)";
+            readonly acT: "#2dd4a0";
+            readonly cdBg: "#0a0e14";
+            readonly cdTx: "#adbac7";
+            readonly sbBg: "#0d1117";
+            readonly hdBg: "rgba(13,17,23,0.88)";
+        };
+        readonly light: {
+            readonly bg: "#ffffff";
+            readonly sf: "#f6f8fa";
+            readonly sfH: "#eef1f5";
+            readonly bd: "#d8dee4";
+            readonly tx: "#1f2328";
+            readonly tx2: "#59636e";
+            readonly txM: "#6e7681";
+            readonly ac: "#0a7b53";
+            readonly acD: "rgba(10,123,83,0.07)";
+            readonly acT: "#087a50";
+            readonly cdBg: "#f0f3f6";
+            readonly cdTx: "#24292f";
+            readonly sbBg: "#f6f8fa";
+            readonly hdBg: "rgba(255,255,255,0.90)";
+        };
+        readonly fonts: {
+            readonly heading: "Inter";
+            readonly body: "Inter";
+            readonly code: "Fira Code";
+        };
+    };
 };
 type PresetName = keyof typeof THEME_PRESETS;
 

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   Shell,
   THEME_PRESETS,
   entry_default
-} from "./chunk-DKSQZLWR.js";
+} from "./chunk-FIUZY65C.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Tome default theme and React app shell",
   "type": "module",
   "main": "./src/index.tsx",
@@ -9,8 +9,8 @@
     "./entry": "./src/entry.tsx"
   },
   "dependencies": {
-    "@tomehq/core": "0.3.4",
-    "@tomehq/components": "0.3.3"
+    "@tomehq/components": "0.5.0",
+    "@tomehq/core": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/Shell.test.tsx

@@ -180,6 +180,18 @@ describe("Shell theme mode", () => {
     const buttons = footer?.querySelectorAll("button");
     expect(buttons?.length).toBeGreaterThan(0);
   });
+
+  it("defaults to light mode when mode is 'auto' and system preference is unavailable", () => {
+    const { container } = renderShell({
+      config: { ...baseConfig, theme: { preset: "amber", mode: "auto" } },
+    });
+    // matchMedia mock returns matches: false → light mode
+    // In light mode, the root container uses light theme background
+    const root = container.firstElementChild as HTMLElement;
+    const bg = root?.style.getPropertyValue("--bg");
+    // Amber light bg is #fafaf9 (not dark bg #09090b)
+    expect(bg).toBe("#fafaf9");
+  });
 });
 
 // ── TOC (TOM-52) ──────────────────────────────────────────
@@ -1211,6 +1223,24 @@ describe("Shell API reference rendering", () => {
     expect(screen.queryByTestId("api-playground")).not.toBeInTheDocument();
     expect(screen.queryByTestId("api-auth")).not.toBeInTheDocument();
   });
+
+  it("uses wider max-width for API reference pages", () => {
+    const { container } = renderShell({
+      apiManifest: mockManifest,
+      ApiReferenceComponent: MockApiRef,
+      pageHtml: undefined,
+    });
+    const main = container.querySelector("main") as HTMLElement;
+    expect(main.style.maxWidth).toBe("1100px");
+  });
+
+  it("uses standard max-width for non-API pages", () => {
+    const { container } = renderShell({
+      pageHtml: "<p>Regular prose content</p>",
+    });
+    const main = container.querySelector("main") as HTMLElement;
+    expect(main.style.maxWidth).toBe("760px");
+  });
 });
 
 // ── Content link interception ───────────────────────────────

package/src/Shell.tsx

@@ -413,7 +413,7 @@ export function Shell({
   const [isDark, setDark] = useState(() => {
     if (themeMode === "dark") return true;
     if (themeMode === "light") return false;
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
   });
 
   const [mobile, setMobile] = useState(() => typeof window !== "undefined" && window.innerWidth < 768);
@@ -1127,7 +1127,7 @@ export function Shell({
 
           {/* Content + TOC */}
           <div ref={contentRef} style={{ flex: 1, overflow: "auto", display: "flex" }}>
-            <main style={{ flex: 1, maxWidth: mobile ? "100%" : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }}>
+            <main style={{ flex: 1, maxWidth: mobile ? "100%" : apiManifest ? 1100 : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }}>
               {breadcrumbs.length > 0 && (
                 <nav aria-label="Breadcrumbs" data-testid="breadcrumbs" style={{
                   display: "flex", alignItems: "center", gap: 6,

package/src/entry.tsx

@@ -59,14 +59,13 @@ const MDX_COMPONENTS: Record<string, React.ComponentType<any>> = {
 
 // ── CONTENT STYLES ───────────────────────────────────────
 const contentStyles = `
-  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&family=Bodoni+Moda:ital,wght@0,400;0,700;0,900;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
 
   html, body { margin: 0; padding: 0; height: 100%; overflow: clip; }
   #tome-root { height: 100%; overflow: clip; }
 
   .tome-content h1 { display: none; }
-  .tome-content h2 { font-family: var(--font-body); font-size: 1.35em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; display: flex; align-items: center; gap: 10px; letter-spacing: 0.01em; }
-  .tome-content h2::before { content: "#"; font-family: var(--font-heading); font-size: 1.2em; font-weight: 300; font-style: italic; color: var(--ac); opacity: 0.5; }
+  .tome-content h2 { font-family: var(--font-body); font-size: 1.35em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; letter-spacing: 0.01em; }
   .tome-content h3 { font-family: var(--font-body); font-size: 1.15em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
   .tome-content h4 { font-family: var(--font-body); font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
   .tome-content p { color: var(--tx2); line-height: 1.8; margin-bottom: 1em; font-size: 14.5px; }

package/src/presets.test.ts

@@ -11,12 +11,14 @@ const TOKEN_KEYS = [
 
 const FONT_KEYS = ["heading", "body", "code"] as const;
 
-const PRESET_NAMES: PresetName[] = ["amber", "editorial"];
+const PRESET_NAMES: PresetName[] = ["amber", "editorial", "cipher", "mint"];
 
 describe("THEME_PRESETS", () => {
-  it("contains both amber and editorial presets", () => {
+  it("contains all presets", () => {
     expect(THEME_PRESETS).toHaveProperty("amber");
     expect(THEME_PRESETS).toHaveProperty("editorial");
+    expect(THEME_PRESETS).toHaveProperty("cipher");
+    expect(THEME_PRESETS).toHaveProperty("mint");
   });
 
   for (const name of PRESET_NAMES) {

package/src/presets.ts

@@ -46,6 +46,36 @@ export const THEME_PRESETS = {
     },
     fonts: { heading: "Cormorant Garamond", body: "Bricolage Grotesque", code: "Fira Code" },
   },
+  cipher: {
+    dark: {
+      bg:"#050508",sf:"#0c0c12",sfH:"#12121a",bd:"#1a1a25",
+      tx:"#d4ff00",tx2:"#8a90a0",txM:"#6a7080",
+      ac:"#6666ff",acD:"rgba(102,102,255,0.10)",acT:"#8080ff",
+      cdBg:"#08080e",cdTx:"#b0c870",sbBg:"#08080d",hdBg:"rgba(5,5,8,0.88)",
+    },
+    light: {
+      bg:"#f0f2f5",sf:"#ffffff",sfH:"#e8eaef",bd:"#d0d4db",
+      tx:"#0f1219",tx2:"#4a5060",txM:"#6a7080",
+      ac:"#2020cc",acD:"rgba(32,32,204,0.08)",acT:"#1a1aa8",
+      cdBg:"#e6e9ef",cdTx:"#2a3520",sbBg:"#ebedf2",hdBg:"rgba(240,242,245,0.90)",
+    },
+    fonts: { heading: "Bodoni Moda", body: "Space Grotesk", code: "Source Code Pro" },
+  },
+  mint: {
+    dark: {
+      bg:"#0d1117",sf:"#161b22",sfH:"#1c2129",bd:"#21262d",
+      tx:"#e6edf3",tx2:"#8b949e",txM:"#6e7681",
+      ac:"#0ea371",acD:"rgba(14,163,113,0.10)",acT:"#2dd4a0",
+      cdBg:"#0a0e14",cdTx:"#adbac7",sbBg:"#0d1117",hdBg:"rgba(13,17,23,0.88)",
+    },
+    light: {
+      bg:"#ffffff",sf:"#f6f8fa",sfH:"#eef1f5",bd:"#d8dee4",
+      tx:"#1f2328",tx2:"#59636e",txM:"#6e7681",
+      ac:"#0a7b53",acD:"rgba(10,123,83,0.07)",acT:"#087a50",
+      cdBg:"#f0f3f6",cdTx:"#24292f",sbBg:"#f6f8fa",hdBg:"rgba(255,255,255,0.90)",
+    },
+    fonts: { heading: "Inter", body: "Inter", code: "Fira Code" },
+  },
 } as const satisfies Record<string, ThemePreset>;
 
 export type PresetName = keyof typeof THEME_PRESETS;