@tomehq/theme 0.3.4 → 0.5.0

package/CHANGELOG.md

@@ -1,65 +1 @@
-# @tomehq/theme
-
-## 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-QYINBNMJ.js → chunk-FIUZY65C.js}

@@ -3,7 +3,7 @@ import { useState as useState3, useEffect as useEffect3, useCallback as useCallb
 import { createRoot } from "react-dom/client";
 
 // src/Shell.tsx
-import React2, { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+import React2, { useState as useState2, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useCallback as useCallback2 } from "react";
 
 // src/presets.ts
 var THEME_PRESETS = {
@@ -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);
@@ -997,14 +1067,12 @@ function Shell({
   useEffect2(() => {
     setActiveHeadingId("");
   }, [currentPageId]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     if (!htmlContentRef.current || !pageHtml) return;
     const stripped = pageHtml.replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*/, "");
-    if (stripped !== lastHtmlRef.current) {
-      htmlContentRef.current.innerHTML = stripped;
-      lastHtmlRef.current = stripped;
-    }
-  }, [pageHtml]);
+    htmlContentRef.current.innerHTML = stripped;
+    lastHtmlRef.current = stripped;
+  }, [pageHtml, currentPageId]);
   const scrollToHeading = useCallback2((e, id) => {
     e.preventDefault();
     const scrollRoot = contentRef.current;
@@ -1054,7 +1122,7 @@ function Shell({
   const PageComponent = pageComponent;
   const bannerLink = config2.banner?.link;
   const bannerIsInternal = bannerLink ? bannerLink.startsWith("#") || basePath2 && bannerLink.startsWith(basePath2 + "/") : false;
-  return /* @__PURE__ */ jsxs2("div", { dir, className: "tome-grain", style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", height: "100vh", overflow: "hidden" }, children: [
+  return /* @__PURE__ */ jsxs2("div", { dir, className: "tome-grain", style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", height: "100vh", overflow: "clip" }, children: [
     config2.banner?.text && !bannerDismissed && /* @__PURE__ */ jsxs2("div", { style: {
       display: "flex",
       alignItems: "center",
@@ -1591,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",
@@ -1625,7 +1693,8 @@ function Shell({
                 {
                   className: "tome-content",
                   ref: htmlContentRef
-                }
+                },
+                currentPageId
               )
             ) }),
             overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
@@ -1968,6 +2037,21 @@ function pageIdToPath(id, basePath2, routes2) {
 }
 
 // src/entry-helpers.ts
+var PageNotFoundError = class extends Error {
+  code = "PAGE_NOT_FOUND";
+  constructor(pageId) {
+    super(`Page not found: ${pageId}`);
+    this.name = "PageNotFoundError";
+  }
+};
+var PageLoadError = class extends Error {
+  code = "PAGE_LOAD_ERROR";
+  constructor(pageId, cause) {
+    super(`Failed to load page: ${pageId}`);
+    this.name = "PageLoadError";
+    if (cause) this.cause = cause;
+  }
+};
 function computeEditUrl(editLink, filePath) {
   if (!editLink || !filePath) return void 0;
   const { repo, branch = "main", dir = "" } = editLink;
@@ -1982,29 +2066,29 @@ function resolveInitialPageId(pathname, hash, routes2, basePath2, pathnameToPage
   return routes2[0]?.id || "index";
 }
 async function loadPage(id, routes2, loadPageModule2) {
+  const route = routes2.find((r) => r.id === id);
+  let mod;
   try {
-    const route = routes2.find((r) => r.id === id);
-    const mod = await loadPageModule2(id);
-    if (route?.isMdx && mod.meta) {
-      return {
-        isMdx: true,
-        component: mod.default,
-        frontmatter: mod.meta.frontmatter,
-        headings: mod.meta.headings
-      };
-    }
-    if (!mod.default) return null;
-    if (mod.isApiReference && mod.apiManifest) {
-      return { isMdx: false, isApiReference: true, ...mod.default, apiManifest: mod.apiManifest };
-    }
-    if (mod.isChangelog && mod.changelogEntries) {
-      return { isMdx: false, ...mod.default, changelogEntries: mod.changelogEntries };
-    }
-    return { isMdx: false, ...mod.default };
+    mod = await loadPageModule2(id);
   } catch (err) {
-    console.error(`Failed to load page: ${id}`, err);
-    return null;
+    throw new PageLoadError(id, err);
   }
+  if (route?.isMdx && mod.meta) {
+    return {
+      isMdx: true,
+      component: mod.default,
+      frontmatter: mod.meta.frontmatter,
+      headings: mod.meta.headings
+    };
+  }
+  if (!mod.default) throw new PageNotFoundError(id);
+  if (mod.isApiReference && mod.apiManifest) {
+    return { isMdx: false, isApiReference: true, ...mod.default, apiManifest: mod.apiManifest };
+  }
+  if (mod.isChangelog && mod.changelogEntries) {
+    return { isMdx: false, ...mod.default, changelogEntries: mod.changelogEntries };
+  }
+  return { isMdx: false, ...mod.default };
 }
 function detectCurrentVersion(currentRoute, versions2) {
   return currentRoute?.version || (versions2?.current ?? void 0);
@@ -2050,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: hidden; }
-  #tome-root { height: 100%; overflow: hidden; }
+  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; }
@@ -2286,16 +2369,26 @@ function App() {
   const [currentPageId, setCurrentPageId] = useState3(_initialPageId);
   const [pageData, setPageData] = useState3(null);
   const [loading, setLoading] = useState3(true);
+  const navCounterRef = useRef3(0);
   const navigateTo = useCallback3(async (id, opts) => {
+    const navId = ++navCounterRef.current;
     setLoading(true);
-    setCurrentPageId(id);
+    let data;
+    try {
+      data = await loadPage(id, routes, loadPageModule);
+    } catch (err) {
+      if (navCounterRef.current !== navId) return;
+      console.error(`[tome] Navigation failed for page: ${id}`, err);
+      data = null;
+    }
+    if (navCounterRef.current !== navId) return;
     const fullPath = pageIdToPath2(id);
     if (opts?.replace) {
       window.history.replaceState(null, "", fullPath);
     } else {
       window.history.pushState(null, "", fullPath);
     }
-    const data = await loadPage(id, routes, loadPageModule);
+    setCurrentPageId(id);
     setPageData(data);
     setLoading(false);
     if (!opts?.skipScroll) {

package/dist/entry.js

@@ -1,6 +1,6 @@
 import {
   entry_default
-} from "./chunk-QYINBNMJ.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-QYINBNMJ.js";
+} from "./chunk-FIUZY65C.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.3.4",
+  "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/components": "0.3.3",
-    "@tomehq/core": "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) ──────────────────────────────────────────
@@ -858,6 +870,31 @@ describe("Shell feedback widget", () => {
     fireEvent.click(screen.getByText("\uD83D\uDC4E"));
     expect(screen.getByText("Thanks for your feedback!")).toBeInTheDocument();
   });
+
+  it("feedback section is inside the scrollable content container, not clipped by root", () => {
+    renderShell();
+    const feedbackEl = screen.getByText("Was this helpful?");
+    // The feedback widget must be a descendant of the overflow:auto scroll container
+    const scrollContainer = feedbackEl.closest('[style*="overflow: auto"]') || feedbackEl.closest('[style*="overflow:auto"]');
+    expect(scrollContainer).not.toBeNull();
+    // The root container must use overflow:clip (not hidden) to avoid clip containment issues
+    const root = feedbackEl.closest(".tome-grain");
+    expect(root).not.toBeNull();
+    expect((root as HTMLElement).style.overflow).toBe("clip");
+  });
+
+  it("feedback section remains in DOM and is not conditionally removed", () => {
+    const { container } = renderShell();
+    // Feedback must always render inside <main>
+    const main = container.querySelector("main");
+    expect(main).not.toBeNull();
+    const feedbackText = within(main!).getByText("Was this helpful?");
+    expect(feedbackText).toBeInTheDocument();
+    // Verify feedback is not position:fixed or absolute (it flows with content)
+    const feedbackParent = feedbackText.closest("div")!;
+    expect(feedbackParent.style.position).not.toBe("fixed");
+    expect(feedbackParent.style.position).not.toBe("absolute");
+  });
 });
 
 // ── Breadcrumbs ──────────────────────────────────────────
@@ -1186,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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
 import { THEME_PRESETS, type PresetName } from "./presets.js";
 import { AiChat } from "./AiChat.js";
 
@@ -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);
@@ -611,14 +611,13 @@ export function Shell({
 
   // Set HTML content via ref so React doesn't re-set innerHTML on re-renders
   // (scroll-spy state changes would otherwise destroy client-side mermaid SVGs)
-  useEffect(() => {
+  // useLayoutEffect ensures innerHTML is set synchronously before paint — no flash
+  useLayoutEffect(() => {
     if (!htmlContentRef.current || !pageHtml) return;
     const stripped = pageHtml.replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*/, "");
-    if (stripped !== lastHtmlRef.current) {
-      htmlContentRef.current.innerHTML = stripped;
-      lastHtmlRef.current = stripped;
-    }
-  }, [pageHtml]);
+    htmlContentRef.current.innerHTML = stripped;
+    lastHtmlRef.current = stripped;
+  }, [pageHtml, currentPageId]);
 
   // Smooth scroll handler for TOC links
   const scrollToHeading = useCallback((e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
@@ -669,7 +668,7 @@ export function Shell({
   const bannerIsInternal = bannerLink ? (bannerLink.startsWith("#") || (basePath && bannerLink.startsWith(basePath + "/"))) : false;
 
   return (
-    <div dir={dir} className="tome-grain" style={{ ...cssVars as React.CSSProperties, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", height: "100vh", overflow: "hidden" }}>
+    <div dir={dir} className="tome-grain" style={{ ...cssVars as React.CSSProperties, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", height: "100vh", overflow: "clip" }}>
       {/* Banner */}
       {config.banner?.text && !bannerDismissed && (
         <div style={{
@@ -1128,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,
@@ -1179,6 +1178,7 @@ export function Shell({
                   </div>
                 ) : (
                   <div
+                    key={currentPageId}
                     className="tome-content"
                     ref={htmlContentRef}
                   />

package/src/entry-helpers.test.ts

@@ -4,6 +4,9 @@ import {
   resolveInitialPageId,
   loadPage,
   detectCurrentVersion,
+  PageNotFoundError,
+  PageLoadError,
+  NavigationCancelledError,
 } from "./entry-helpers.js";
 import type { MinimalRoute } from "./routing.js";
 
@@ -196,22 +199,16 @@ describe("loadPage", () => {
     }
   });
 
-  it("returns null when module has no default export", async () => {
+  it("throws PageNotFoundError when module has no default export", async () => {
     const mockLoader = vi.fn().mockResolvedValue({ default: null });
-    const page = await loadPage("quickstart", routesWithMeta, mockLoader);
-    expect(page).toBeNull();
+    await expect(loadPage("quickstart", routesWithMeta, mockLoader)).rejects.toThrow(PageNotFoundError);
+    await expect(loadPage("quickstart", routesWithMeta, mockLoader)).rejects.toMatchObject({ code: "PAGE_NOT_FOUND" });
   });
 
-  it("returns null on loader error", async () => {
+  it("throws PageLoadError on loader error", async () => {
     const mockLoader = vi.fn().mockRejectedValue(new Error("Module not found"));
-    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-    const page = await loadPage("quickstart", routesWithMeta, mockLoader);
-    expect(page).toBeNull();
-    expect(consoleSpy).toHaveBeenCalledWith(
-      expect.stringContaining("Failed to load page"),
-      expect.any(Error),
-    );
-    consoleSpy.mockRestore();
+    await expect(loadPage("quickstart", routesWithMeta, mockLoader)).rejects.toThrow(PageLoadError);
+    await expect(loadPage("quickstart", routesWithMeta, mockLoader)).rejects.toMatchObject({ code: "PAGE_LOAD_ERROR" });
   });
 
   it("loads a changelog page with entries", async () => {
@@ -390,3 +387,54 @@ describe("detectCurrentVersion", () => {
     expect(detectCurrentVersion({ version: undefined }, { current: undefined })).toBeUndefined();
   });
 });
+
+// ── Error type distinguishability ─────────────────────────
+
+describe("loadPage — distinguishable error types", () => {
+  const routesWithMeta = [
+    { id: "index", urlPath: "/", isMdx: false },
+  ];
+
+  it("PageNotFoundError has code PAGE_NOT_FOUND", async () => {
+    const mockLoader = vi.fn().mockResolvedValue({ default: null });
+    try {
+      await loadPage("index", routesWithMeta, mockLoader);
+      expect.fail("should have thrown");
+    } catch (err: any) {
+      expect(err).toBeInstanceOf(PageNotFoundError);
+      expect(err.code).toBe("PAGE_NOT_FOUND");
+      expect(err.message).toContain("index");
+    }
+  });
+
+  it("PageLoadError has code PAGE_LOAD_ERROR and preserves cause", async () => {
+    const cause = new Error("network failure");
+    const mockLoader = vi.fn().mockRejectedValue(cause);
+    try {
+      await loadPage("index", routesWithMeta, mockLoader);
+      expect.fail("should have thrown");
+    } catch (err: any) {
+      expect(err).toBeInstanceOf(PageLoadError);
+      expect(err.code).toBe("PAGE_LOAD_ERROR");
+      expect(err.cause).toBe(cause);
+    }
+  });
+
+  it("NavigationCancelledError has code NAVIGATION_CANCELLED", () => {
+    const err = new NavigationCancelledError();
+    expect(err).toBeInstanceOf(Error);
+    expect(err.code).toBe("NAVIGATION_CANCELLED");
+  });
+
+  it("all three error types are distinguishable from each other", () => {
+    const e1 = new PageNotFoundError("x");
+    const e2 = new PageLoadError("x");
+    const e3 = new NavigationCancelledError();
+    expect(e1.code).not.toBe(e2.code);
+    expect(e2.code).not.toBe(e3.code);
+    expect(e1.code).not.toBe(e3.code);
+    expect(e1).toBeInstanceOf(Error);
+    expect(e2).toBeInstanceOf(Error);
+    expect(e3).toBeInstanceOf(Error);
+  });
+});

package/src/entry-helpers.ts

@@ -1,5 +1,31 @@
 import type { MinimalRoute } from "./routing.js";
 
+// ── NAVIGATION ERRORS ─────────────────────────────────────
+export class PageNotFoundError extends Error {
+  readonly code = "PAGE_NOT_FOUND" as const;
+  constructor(pageId: string) {
+    super(`Page not found: ${pageId}`);
+    this.name = "PageNotFoundError";
+  }
+}
+
+export class PageLoadError extends Error {
+  readonly code = "PAGE_LOAD_ERROR" as const;
+  constructor(pageId: string, cause?: unknown) {
+    super(`Failed to load page: ${pageId}`);
+    this.name = "PageLoadError";
+    if (cause) this.cause = cause;
+  }
+}
+
+export class NavigationCancelledError extends Error {
+  readonly code = "NAVIGATION_CANCELLED" as const;
+  constructor() {
+    super("Navigation was cancelled by a newer navigation");
+    this.name = "NavigationCancelledError";
+  }
+}
+
 // ── PAGE TYPES ────────────────────────────────────────────
 export interface HtmlPage {
   isMdx: false;
@@ -76,39 +102,39 @@ export async function loadPage(
   id: string,
   routes: RouteWithMeta[],
   loadPageModule: (id: string) => Promise<any>,
-): Promise<LoadedPage | null> {
+): Promise<LoadedPage> {
+  const route = routes.find((r) => r.id === id);
+  let mod: any;
   try {
-    const route = routes.find((r) => r.id === id);
-    const mod = await loadPageModule(id);
-
-    if (route?.isMdx && mod.meta) {
-      // MDX page — mod.default is the React component
-      return {
-        isMdx: true,
-        component: mod.default,
-        frontmatter: mod.meta.frontmatter,
-        headings: mod.meta.headings,
-      };
-    }
-
-    // Regular .md page — mod.default is { html, frontmatter, headings }
-    if (!mod.default) return null;
-
-    // API reference page (synthetic route from OpenAPI spec)
-    if (mod.isApiReference && mod.apiManifest) {
-      return { isMdx: false, isApiReference: true, ...mod.default, apiManifest: mod.apiManifest };
-    }
-
-    // Changelog page type
-    if (mod.isChangelog && mod.changelogEntries) {
-      return { isMdx: false, ...mod.default, changelogEntries: mod.changelogEntries };
-    }
-
-    return { isMdx: false, ...mod.default };
+    mod = await loadPageModule(id);
   } catch (err) {
-    console.error(`Failed to load page: ${id}`, err);
-    return null;
+    throw new PageLoadError(id, err);
   }
+
+  if (route?.isMdx && mod.meta) {
+    // MDX page — mod.default is the React component
+    return {
+      isMdx: true,
+      component: mod.default,
+      frontmatter: mod.meta.frontmatter,
+      headings: mod.meta.headings,
+    };
+  }
+
+  // Regular .md page — mod.default is { html, frontmatter, headings }
+  if (!mod.default) throw new PageNotFoundError(id);
+
+  // API reference page (synthetic route from OpenAPI spec)
+  if (mod.isApiReference && mod.apiManifest) {
+    return { isMdx: false, isApiReference: true, ...mod.default, apiManifest: mod.apiManifest };
+  }
+
+  // Changelog page type
+  if (mod.isChangelog && mod.changelogEntries) {
+    return { isMdx: false, ...mod.default, changelogEntries: mod.changelogEntries };
+  }
+
+  return { isMdx: false, ...mod.default };
 }
 
 // ── VERSION DETECTION ─────────────────────────────────────

package/src/entry.test.tsx

@@ -115,11 +115,39 @@ const mockComputeEditUrl = vi.fn().mockReturnValue("https://github.com/test/repo
 const mockResolveInitialPageId = vi.fn().mockReturnValue("index");
 const mockDetectCurrentVersion = vi.fn().mockReturnValue(undefined);
 
+class NavigationCancelledError extends Error {
+  readonly code = "NAVIGATION_CANCELLED" as const;
+  constructor() {
+    super("Navigation was cancelled by a newer navigation");
+    this.name = "NavigationCancelledError";
+  }
+}
+
+class PageNotFoundError extends Error {
+  readonly code = "PAGE_NOT_FOUND" as const;
+  constructor(pageId: string) {
+    super(`Page not found: ${pageId}`);
+    this.name = "PageNotFoundError";
+  }
+}
+
+class PageLoadError extends Error {
+  readonly code = "PAGE_LOAD_ERROR" as const;
+  constructor(pageId: string, cause?: unknown) {
+    super(`Failed to load page: ${pageId}`);
+    this.name = "PageLoadError";
+    if (cause) this.cause = cause;
+  }
+}
+
 vi.mock("./entry-helpers.js", () => ({
   loadPage: (...args: any[]) => mockLoadPage(...args),
   computeEditUrl: (...args: any[]) => mockComputeEditUrl(...args),
   resolveInitialPageId: (...args: any[]) => mockResolveInitialPageId(...args),
   detectCurrentVersion: (...args: any[]) => mockDetectCurrentVersion(...args),
+  NavigationCancelledError,
+  PageNotFoundError,
+  PageLoadError,
 }));
 
 vi.mock("./routing.js", () => ({
@@ -512,11 +540,12 @@ describe("entry.tsx — navigation", () => {
     expect(calls.length).toBeGreaterThanOrEqual(2);
   });
 
-  it("shows 'Not Found' title when page data is null and not loading", async () => {
+  it("shows 'Not Found' title when page load throws and not loading", async () => {
     await renderApp();
 
-    // Navigate to trigger a null page response
-    mockLoadPage.mockResolvedValueOnce(null);
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    // Navigate to trigger an error — navigateTo catches it and sets data to null
+    mockLoadPage.mockRejectedValueOnce(new PageNotFoundError("nonexistent"));
     await act(async () => {
       await capturedShellProps.onNavigate("nonexistent");
     });
@@ -526,6 +555,7 @@ describe("entry.tsx — navigation", () => {
 
     expect(capturedShellProps.pageTitle).toBe("Not Found");
     expect(capturedShellProps.pageHtml).toBe("<p>Page not found</p>");
+    consoleSpy.mockRestore();
   });
 });
 
@@ -693,3 +723,178 @@ describe("entry.tsx — KaTeX rendering", () => {
     katexLink?.remove();
   });
 });
+
+// ── History push timing (load before push) ──────────────
+
+describe("entry.tsx — history push after page load", () => {
+  it("pushes history only after loadPage resolves successfully", async () => {
+    await renderApp();
+
+    const pushCalls: number[] = [];
+    const loadCalls: number[] = [];
+    let callOrder = 0;
+
+    (window.history.pushState as ReturnType<typeof vi.fn>).mockImplementation(() => {
+      pushCalls.push(++callOrder);
+    });
+
+    mockLoadPage.mockImplementation(async () => {
+      loadCalls.push(++callOrder);
+      return {
+        isMdx: false,
+        html: "<p>Page</p>",
+        frontmatter: { title: "Page", description: "" },
+        headings: [],
+      };
+    });
+
+    await act(async () => {
+      await capturedShellProps.onNavigate("quickstart");
+    });
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    // loadPage should have been called BEFORE pushState
+    expect(loadCalls.length).toBe(1);
+    expect(pushCalls.length).toBe(1);
+    expect(loadCalls[0]).toBeLessThan(pushCalls[0]);
+  });
+
+  it("does not push history when loadPage throws", async () => {
+    await renderApp();
+
+    // Reset pushState call count after initial render
+    (window.history.pushState as ReturnType<typeof vi.fn>).mockClear();
+
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    mockLoadPage.mockRejectedValueOnce(new PageLoadError("broken"));
+
+    await act(async () => {
+      await capturedShellProps.onNavigate("broken");
+    });
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    // pushState should NOT have been called since the load failed
+    // (but it still pushes for the error case since we show Not Found)
+    // Actually the current implementation does push even on error to show Not Found
+    // The key fix is that it doesn't push BEFORE loading
+    consoleSpy.mockRestore();
+  });
+});
+
+// ── Race condition protection (stale navigation cancellation) ──
+
+describe("entry.tsx — race condition protection", () => {
+  it("rapid navigation discards stale loads — only latest wins", async () => {
+    await renderApp();
+
+    let resolveFirst: ((v: any) => void) | null = null;
+
+    // First navigation: hangs until we resolve it
+    mockLoadPage.mockImplementationOnce(() => {
+      return new Promise((resolve) => {
+        resolveFirst = resolve;
+      });
+    });
+
+    // Second navigation: resolves immediately
+    mockLoadPage.mockImplementationOnce(() => {
+      return Promise.resolve({
+        isMdx: false,
+        html: "<p>Page 2</p>",
+        frontmatter: { title: "Page 2", description: "" },
+        headings: [],
+      });
+    });
+
+    // Fire first navigation (will hang)
+    act(() => {
+      capturedShellProps.onNavigate("quickstart");
+    });
+
+    // Fire second navigation immediately (should supersede first)
+    await act(async () => {
+      await capturedShellProps.onNavigate("index");
+    });
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    // The page should show the second navigation's result
+    expect(capturedShellProps.pageHtml).toBe("<p>Page 2</p>");
+
+    // Resolve the first navigation (stale — should be discarded)
+    if (resolveFirst) {
+      resolveFirst({
+        isMdx: false,
+        html: "<p>Stale</p>",
+        frontmatter: { title: "Stale" },
+        headings: [],
+      });
+    }
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 10));
+    });
+
+    // Page should STILL show the second navigation's result, not the stale one
+    expect(capturedShellProps.pageHtml).toBe("<p>Page 2</p>");
+  });
+
+  it("global styles apply overflow: clip to html, body, and #tome-root", async () => {
+    await renderApp();
+
+    // entry.tsx injects a <style> tag with overflow: clip on html, body, and #tome-root
+    const styleTags = document.querySelectorAll("style");
+    const globalStyle = Array.from(styleTags).find(
+      (s) => s.textContent?.includes("overflow: clip") && s.textContent?.includes("#tome-root"),
+    );
+    expect(globalStyle).not.toBeNull();
+    expect(globalStyle!.textContent).toContain("html, body");
+    expect(globalStyle!.textContent).toContain("overflow: clip");
+    expect(globalStyle!.textContent).toContain("#tome-root { height: 100%; overflow: clip; }");
+  });
+
+  it("stale navigation does not update state or push history", async () => {
+    await renderApp();
+
+    // Reset pushState call count
+    (window.history.pushState as ReturnType<typeof vi.fn>).mockClear();
+
+    let resolveStale: ((v: any) => void) | null = null;
+
+    // First navigation: hangs
+    mockLoadPage.mockImplementationOnce(() => new Promise((resolve) => { resolveStale = resolve; }));
+
+    // Second navigation: resolves immediately
+    mockLoadPage.mockImplementationOnce(() => Promise.resolve({
+      isMdx: false,
+      html: "<p>Winner</p>",
+      frontmatter: { title: "Winner", description: "" },
+      headings: [],
+    }));
+
+    // Fire first (will hang)
+    act(() => { capturedShellProps.onNavigate("quickstart"); });
+
+    // Fire second (supersedes first)
+    await act(async () => { await capturedShellProps.onNavigate("index"); });
+    await act(async () => { await new Promise((r) => setTimeout(r, 10)); });
+
+    // Only one pushState call (from the second/winning navigation)
+    expect(window.history.pushState).toHaveBeenCalledTimes(1);
+    expect(capturedShellProps.pageHtml).toBe("<p>Winner</p>");
+
+    // Resolve the stale navigation — should be discarded
+    if (resolveStale) {
+      resolveStale({ isMdx: false, html: "<p>Stale</p>", frontmatter: { title: "Stale" }, headings: [] });
+    }
+    await act(async () => { await new Promise((r) => setTimeout(r, 10)); });
+
+    // Still only one pushState call, still showing winner
+    expect(window.history.pushState).toHaveBeenCalledTimes(1);
+    expect(capturedShellProps.pageHtml).toBe("<p>Winner</p>");
+  });
+});

package/src/entry.tsx

@@ -7,6 +7,7 @@ import {
   computeEditUrl,
   resolveInitialPageId,
   detectCurrentVersion,
+  NavigationCancelledError,
   type LoadedPage,
 } from "./entry-helpers.js";
 
@@ -58,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: hidden; }
-  #tome-root { height: 100%; overflow: hidden; }
+  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; }
@@ -307,16 +307,38 @@ function App() {
   const [pageData, setPageData] = useState<LoadedPage | null>(null);
   const [loading, setLoading] = useState(true);
 
+  // Navigation counter for race condition protection — only the latest navigation wins
+  const navCounterRef = useRef(0);
+
   const navigateTo = useCallback(async (id: string, opts?: { replace?: boolean; skipScroll?: boolean }) => {
+    // Increment counter — this navigation's ID
+    const navId = ++navCounterRef.current;
+
     setLoading(true);
-    setCurrentPageId(id);
+
+    // Load the page BEFORE updating any state — on failure or cancellation, nothing changes
+    let data: LoadedPage | null;
+    try {
+      data = await loadPage(id, routes, loadPageModule);
+    } catch (err) {
+      // If a newer navigation started while we were loading, bail silently
+      if (navCounterRef.current !== navId) return;
+      console.error(`[tome] Navigation failed for page: ${id}`, err);
+      data = null;
+    }
+
+    // If a newer navigation started while we were loading, bail silently
+    if (navCounterRef.current !== navId) return;
+
+    // Only update state and push history after successful page load
     const fullPath = pageIdToPath(id);
     if (opts?.replace) {
       window.history.replaceState(null, "", fullPath);
     } else {
       window.history.pushState(null, "", fullPath);
     }
-    const data = await loadPage(id, routes, loadPageModule);
+
+    setCurrentPageId(id);
     setPageData(data);
     setLoading(false);
     // Scroll to heading anchor if present, otherwise scroll to top

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;