@tomehq/theme 0.4.0 → 0.6.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-NIWVZJLG.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);
@@ -1026,8 +1096,8 @@ function Shell({
   }, []);
   const allNavPages = navigation2.flatMap((g) => g.pages);
   const idx = allNavPages.findIndex((p) => p.id === currentPageId);
-  const prev = idx > 0 ? allNavPages[idx - 1] : null;
-  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
+  const prev = idx > 0 ? allNavPages[idx - 1] : allNavPages[allNavPages.length - 1] ?? null;
+  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : allNavPages[0] ?? null;
   const breadcrumbs = getBreadcrumbs(navigation2, currentPageId, pageTitle);
   const togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
   const cssVars = {
@@ -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",
@@ -1627,7 +1697,7 @@ function Shell({
                 currentPageId
               )
             ) }),
-            overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
+            !pageHtml && !pageComponent ? null : overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
               overrides2.PageFooter,
               {
                 editUrl,
@@ -1704,43 +1774,79 @@ function Shell({
                   transition: "border-color .15s"
                 }, children: "\u{1F44E}" })
               ] }) }),
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }, children: [
-                prev ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(prev.id), style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  background: "none",
-                  border: "1px solid var(--bd)",
-                  borderRadius: 2,
-                  padding: "10px 16px",
-                  cursor: "pointer",
-                  color: "var(--tx2)",
-                  fontSize: 13,
-                  fontFamily: "var(--font-body)",
-                  transition: "border-color .15s, color .15s"
-                }, children: [
-                  isRtl ? /* @__PURE__ */ jsx2(ArrowRight, {}) : /* @__PURE__ */ jsx2(ArrowLeft, {}),
-                  " ",
-                  prev.title
-                ] }) : /* @__PURE__ */ jsx2("div", {}),
-                next ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(next.id), style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  background: "none",
-                  border: "1px solid var(--bd)",
-                  borderRadius: 2,
-                  padding: "10px 16px",
-                  cursor: "pointer",
-                  color: "var(--tx2)",
-                  fontSize: 13,
-                  fontFamily: "var(--font-body)",
-                  transition: "border-color .15s, color .15s"
-                }, children: [
-                  next.title,
-                  " ",
-                  isRtl ? /* @__PURE__ */ jsx2(ArrowLeft, {}) : /* @__PURE__ */ jsx2(ArrowRight, {})
-                ] }) : /* @__PURE__ */ jsx2("div", {})
+              /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", marginTop: 24, paddingTop: 32, paddingBottom: 40, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
+                prev ? /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    onClick: () => onNavigate(prev.id),
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 6,
+                      background: "var(--sf)",
+                      border: "1px solid var(--bd)",
+                      borderRadius: 8,
+                      padding: "16px 20px",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontFamily: "var(--font-body)",
+                      transition: "all .3s ease",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.borderColor = "var(--ac)";
+                      e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.borderColor = "var(--bd)";
+                      e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }, children: [
+                        isRtl ? /* @__PURE__ */ jsx2(ArrowRight, {}) : /* @__PURE__ */ jsx2(ArrowLeft, {}),
+                        " Previous"
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--tx)" }, children: prev.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx2("div", {}),
+                next ? /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    onClick: () => onNavigate(next.id),
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-end",
+                      gap: 6,
+                      background: "var(--sf)",
+                      border: "1px solid var(--bd)",
+                      borderRadius: 8,
+                      padding: "16px 20px",
+                      cursor: "pointer",
+                      textAlign: "right",
+                      fontFamily: "var(--font-body)",
+                      transition: "all .3s ease",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.borderColor = "var(--ac)";
+                      e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.borderColor = "var(--bd)";
+                      e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }, children: [
+                        "Next ",
+                        isRtl ? /* @__PURE__ */ jsx2(ArrowLeft, {}) : /* @__PURE__ */ jsx2(ArrowRight, {})
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--tx)" }, children: next.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx2("div", {})
               ] })
             ] })
           ] }),
@@ -2064,14 +2170,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-NIWVZJLG.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-NIWVZJLG.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.4.0",
+  "version": "0.6.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.6.0",
+    "@tomehq/core": "0.6.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);
@@ -643,8 +643,8 @@ export function Shell({
   // Prev / Next
   const allNavPages = navigation.flatMap(g => g.pages);
   const idx = allNavPages.findIndex(p => p.id === currentPageId);
-  const prev = idx > 0 ? allNavPages[idx - 1] : null;
-  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
+  const prev = idx > 0 ? allNavPages[idx - 1] : allNavPages[allNavPages.length - 1] ?? null;
+  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : allNavPages[0] ?? null;
 
   // Breadcrumbs
   const breadcrumbs = getBreadcrumbs(navigation, currentPageId, pageTitle);
@@ -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,
@@ -1186,7 +1186,7 @@ export function Shell({
               </div>
 
               {/* TOM-48: Edit this page link + TOM-54: Last updated + Feedback + Prev/Next */}
-              {overrides?.PageFooter ? (
+              {!pageHtml && !pageComponent ? null : overrides?.PageFooter ? (
                 <overrides.PageFooter
                   editUrl={editUrl}
                   lastUpdated={lastUpdated}
@@ -1243,23 +1243,41 @@ export function Shell({
                 )}
               </div>
 
-              {/* Prev / Next */}
-              <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }}>
+              {/* Prev / Next link cards */}
+              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", marginTop: 24, paddingTop: 32, paddingBottom: 40, borderTop: "1px solid var(--bd)", gap: 16 }}>
                 {prev ? (
                   <button onClick={() => onNavigate(prev.id)} style={{
-                    display: "flex", alignItems: "center", gap: 8, background: "none",
-                    border: "1px solid var(--bd)", borderRadius: 2, padding: "10px 16px",
-                    cursor: "pointer", color: "var(--tx2)", fontSize: 13, fontFamily: "var(--font-body)",
-                    transition: "border-color .15s, color .15s",
-                  }}>{isRtl ? <ArrowRight /> : <ArrowLeft />} {prev.title}</button>
+                    display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6,
+                    background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 8,
+                    padding: "16px 20px", cursor: "pointer", textAlign: "left",
+                    fontFamily: "var(--font-body)", transition: "all .3s ease",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
+                  }}
+                  onMouseOver={(e) => { e.currentTarget.style.borderColor = "var(--ac)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)"; }}
+                  onMouseOut={(e) => { e.currentTarget.style.borderColor = "var(--bd)"; e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)"; }}
+                  >
+                    <span style={{ fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }}>
+                      {isRtl ? <ArrowRight /> : <ArrowLeft />} Previous
+                    </span>
+                    <span style={{ fontSize: 14, fontWeight: 500, color: "var(--tx)" }}>{prev.title}</span>
+                  </button>
                 ) : <div />}
                 {next ? (
                   <button onClick={() => onNavigate(next.id)} style={{
-                    display: "flex", alignItems: "center", gap: 8, background: "none",
-                    border: "1px solid var(--bd)", borderRadius: 2, padding: "10px 16px",
-                    cursor: "pointer", color: "var(--tx2)", fontSize: 13, fontFamily: "var(--font-body)",
-                    transition: "border-color .15s, color .15s",
-                  }}>{next.title} {isRtl ? <ArrowLeft /> : <ArrowRight />}</button>
+                    display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6,
+                    background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 8,
+                    padding: "16px 20px", cursor: "pointer", textAlign: "right",
+                    fontFamily: "var(--font-body)", transition: "all .3s ease",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
+                  }}
+                  onMouseOver={(e) => { e.currentTarget.style.borderColor = "var(--ac)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)"; }}
+                  onMouseOut={(e) => { e.currentTarget.style.borderColor = "var(--bd)"; e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)"; }}
+                  >
+                    <span style={{ fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }}>
+                      Next {isRtl ? <ArrowLeft /> : <ArrowRight />}
+                    </span>
+                    <span style={{ fontSize: 14, fontWeight: 500, color: "var(--tx)" }}>{next.title}</span>
+                  </button>
                 ) : <div />}
               </div>
               </>

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) {