@tomehq/theme 0.2.9 → 0.3.1

package/dist/entry.js

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "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.2.8",
-    "@tomehq/core": "0.2.8"
+    "@tomehq/components": "0.3.1",
+    "@tomehq/core": "0.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/Shell.tsx

@@ -359,6 +359,8 @@ export function Shell({
   const isOldVersion = versioning && currentVersion && currentVersion !== versioning.current;
   const [expanded, setExpanded] = useState<string[]>(navigation.map(n => n.section));
   const contentRef = useRef<HTMLDivElement>(null);
+  const htmlContentRef = useRef<HTMLDivElement>(null);
+  const lastHtmlRef = useRef<string>("");
   const [wide, setWide] = useState(() => typeof window !== "undefined" && window.innerWidth > 1100);
 
   const preset = (config.theme?.preset || "amber") as PresetName;
@@ -531,6 +533,17 @@ export function Shell({
   // Reset active heading when page changes
   useEffect(() => { setActiveHeadingId(""); }, [currentPageId]);
 
+  // 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(() => {
+    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]);
+
   // Smooth scroll handler for TOC links
   const scrollToHeading = useCallback((e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
     e.preventDefault();
@@ -584,7 +597,7 @@ export function Shell({
           display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
           background: "var(--ac)", color: "#fff", padding: "8px 16px",
           fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 500, textAlign: "center",
-          width: "100%", boxSizing: "border-box",
+          width: "100vw", boxSizing: "border-box",
         }}>
           {config.banner.link ? (
             <a
@@ -977,7 +990,7 @@ export function Shell({
                 ) : (
                   <div
                     className="tome-content"
-                    dangerouslySetInnerHTML={{ __html: (pageHtml || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*/, "") }}
+                    ref={htmlContentRef}
                   />
                 )}
               </div>

package/src/entry.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Shell } from "./Shell.js";
 import { pathnameToPageId as _pathnameToPageId, pageIdToPath as _pageIdToPath } from "./routing.js";
@@ -75,6 +75,27 @@ const contentStyles = `
   .tome-mermaid { margin: 1.2em 0; text-align: center; overflow-x: auto; }
   .tome-mermaid svg { max-width: 100%; height: auto; overflow: visible; }
   .tome-mermaid svg .nodeLabel { overflow: visible; white-space: nowrap; }
+  /* Ensure mermaid text meets WCAG AA contrast in light mode */
+  /* Mermaid v11 uses foreignObject with inline-styled spans — !important needed */
+  html:not(.dark) .tome-mermaid svg .nodeLabel,
+  html:not(.dark) .tome-mermaid svg .nodeLabel span,
+  html:not(.dark) .tome-mermaid svg .nodeLabel div,
+  html:not(.dark) .tome-mermaid svg foreignObject div,
+  html:not(.dark) .tome-mermaid svg foreignObject span { color: #1a1a1a !important; }
+  html:not(.dark) .tome-mermaid svg .edgeLabel,
+  html:not(.dark) .tome-mermaid svg .edgeLabel span { color: #333 !important; }
+  html:not(.dark) .tome-mermaid svg text { fill: #1a1a1a !important; }
+  html:not(.dark) .tome-mermaid svg .node rect,
+  html:not(.dark) .tome-mermaid svg .node polygon { stroke: #555 !important; }
+  /* Dark mode: force bright text in mermaid nodes for readability */
+  html.dark .tome-mermaid svg .nodeLabel,
+  html.dark .tome-mermaid svg .nodeLabel span,
+  html.dark .tome-mermaid svg .nodeLabel div,
+  html.dark .tome-mermaid svg foreignObject div,
+  html.dark .tome-mermaid svg foreignObject span { color: #f0f0f0 !important; }
+  html.dark .tome-mermaid svg .edgeLabel,
+  html.dark .tome-mermaid svg .edgeLabel span { color: #ddd !important; }
+  html.dark .tome-mermaid svg text { fill: #f0f0f0 !important; }
 
   /* Mobile responsive content */
   @media (max-width: 767px) {
@@ -135,17 +156,22 @@ function pageIdToPath(id: string): string {
   return _pageIdToPath(id, basePath, routes);
 }
 
+// ── EAGER INITIAL PAGE LOAD ──────────────────────────────
+// Start loading the initial page at module scope — before React mounts —
+// so the data is ready (or nearly ready) by the time App first renders.
+// This eliminates the "Loading..." flash on production.
+const _initialPageId = resolveInitialPageId(
+  window.location.pathname,
+  window.location.hash,
+  routes,
+  basePath,
+  _pathnameToPageId,
+);
+const _initialPagePromise = loadPage(_initialPageId, routes, loadPageModule);
+
 // ── APP ──────────────────────────────────────────────────
 function App() {
-  const [currentPageId, setCurrentPageId] = useState(() =>
-    resolveInitialPageId(
-      window.location.pathname,
-      window.location.hash,
-      routes,
-      basePath,
-      _pathnameToPageId,
-    )
-  );
+  const [currentPageId, setCurrentPageId] = useState(_initialPageId);
 
   const [pageData, setPageData] = useState<LoadedPage | null>(null);
   const [loading, setLoading] = useState(true);
@@ -176,7 +202,7 @@ function App() {
     }
   }, []);
 
-  // Initial page load
+  // Initial page load — use the eagerly-started promise from module scope
   useEffect(() => {
     // If user landed on a legacy hash URL, redirect to clean path
     const hash = window.location.hash.slice(1);
@@ -185,7 +211,13 @@ function App() {
       window.history.replaceState(null, "", fullPath);
       navigateTo(hash, { replace: true });
     } else {
-      navigateTo(currentPageId, { replace: true, skipScroll: true });
+      // Use the pre-fetched promise instead of starting a new load
+      const fullPath = pageIdToPath(currentPageId);
+      window.history.replaceState(null, "", fullPath);
+      _initialPagePromise.then((data) => {
+        setPageData(data);
+        setLoading(false);
+      });
     }
   }, []);
 
@@ -201,7 +233,30 @@ function App() {
     return () => window.removeEventListener("popstate", onPopState);
   }, [currentPageId, navigateTo]);
 
-  // Mermaid diagram rendering: load from CDN and render .tome-mermaid elements
+  // Mermaid diagram rendering: load from CDN and render .tome-mermaid elements.
+  // Also re-renders when theme changes (dark ↔ light) so colors stay correct.
+  const mermaidModuleRef = useRef<any>(null);
+  const [mermaidTheme, setMermaidTheme] = useState(() => {
+    if (typeof document === "undefined") return "light";
+    // Check the class first (already set), then fall back to config + system preference
+    // to avoid a white flash before Shell syncs the dark class onto <html>
+    if (document.documentElement.classList.contains("dark")) return "dark";
+    const mode = config.theme?.mode || "auto";
+    if (mode === "dark") return "dark";
+    if (mode === "light") return "light";
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+
+  // Watch for dark class changes on <html> to trigger mermaid re-render
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains("dark");
+      setMermaidTheme(isDark ? "dark" : "light");
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const els = document.querySelectorAll(".tome-mermaid[data-mermaid]");
     if (els.length === 0) return;
@@ -211,11 +266,12 @@ function App() {
 
     (async () => {
       try {
-        // Load mermaid from CDN (ESM) — works in all browsers, no bundler dependency
-        const { default: mermaid } = await import(/* @vite-ignore */ MERMAID_CDN);
+        if (!mermaidModuleRef.current) {
+          mermaidModuleRef.current = (await import(/* @vite-ignore */ MERMAID_CDN)).default;
+        }
+        const mermaid = mermaidModuleRef.current;
         if (cancelled) return;
-        const isDark = document.documentElement.classList.contains("dark");
-        // Resolve CSS variable to concrete font name — mermaid can't resolve CSS vars for text measurement
+        const isDark = mermaidTheme === "dark";
         const resolvedFont = getComputedStyle(document.documentElement).getPropertyValue("--font-body").trim() || "sans-serif";
         mermaid.initialize({
           startOnLoad: false,
@@ -226,22 +282,14 @@ function App() {
 
         for (let i = 0; i < els.length; i++) {
           const el = els[i] as HTMLElement;
-          if (el.querySelector("svg")) continue; // already rendered
           const encoded = el.getAttribute("data-mermaid");
           if (!encoded) continue;
           try {
             const code = atob(encoded);
+            // Render new SVG off-screen first, then swap — avoids white flash on theme change
             const { svg } = await mermaid.render(`tome-mermaid-${i}-${Date.now()}`, code);
             if (!cancelled) {
-              // Sanitize SVG to prevent XSS from mermaid-rendered content
-              try {
-                // @ts-ignore — CDN dynamic import for browser-only sanitization
-                const DOMPurify = (await import(/* @vite-ignore */ "https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.es.mjs")).default;
-                el.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { html: true, svg: true, svgFilters: true } });
-              } catch {
-                // DOMPurify unavailable — render without sanitization (acceptable for trusted content)
-                el.innerHTML = svg;
-              }
+              el.innerHTML = svg;
             }
           } catch (err) {
             console.warn("[tome] Mermaid render failed:", err);
@@ -259,7 +307,7 @@ function App() {
     })();
 
     return () => { cancelled = true; };
-  }, [pageData, loading]);
+  }, [pageData, loading, mermaidTheme]);
 
   const allPages = routes.map((r: any) => ({
     id: r.id,
@@ -272,9 +320,10 @@ function App() {
   const currentVersion = detectCurrentVersion(currentRoute, versions);
   const editUrl = computeEditUrl(config.editLink, currentRoute?.filePath);
 
-  // KaTeX CSS: inject stylesheet when math is enabled
+  // KaTeX CSS: inject stylesheet when math is enabled or math placeholders exist
   useEffect(() => {
-    if (!(config as any).math) return;
+    const hasMathPlaceholders = document.querySelectorAll(".tome-math[data-math]").length > 0;
+    if (!(config as any).math && !hasMathPlaceholders) return;
     const id = "tome-katex-css";
     if (document.getElementById(id)) return;
     const link = document.createElement("link");
@@ -283,7 +332,41 @@ function App() {
     link.href = "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css";
     link.crossOrigin = "anonymous";
     document.head.appendChild(link);
-  }, []);
+  }, [pageData, loading]);
+
+  // Client-side KaTeX rendering for MDX math placeholders (.tome-math[data-math])
+  useEffect(() => {
+    const els = document.querySelectorAll(".tome-math[data-math]");
+    if (els.length === 0) return;
+    let cancelled = false;
+
+    const KATEX_CDN = "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.mjs";
+
+    (async () => {
+      try {
+        const katex = (await import(/* @vite-ignore */ KATEX_CDN)).default;
+        if (cancelled) return;
+        for (const el of els) {
+          const encoded = el.getAttribute("data-math");
+          if (!encoded) continue;
+          try {
+            const tex = atob(encoded);
+            const isBlock = el.classList.contains("tome-math-block");
+            katex.render(tex, el as HTMLElement, {
+              displayMode: isBlock,
+              throwOnError: false,
+            });
+          } catch (err) {
+            console.warn("[tome] KaTeX render failed:", err);
+          }
+        }
+      } catch (err) {
+        console.warn("[tome] Failed to load KaTeX from CDN:", err);
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, [pageData, loading]);
 
   return (
     <>
@@ -292,10 +375,10 @@ function App() {
         config={config}
         navigation={navigation}
         currentPageId={currentPageId}
-        pageHtml={!pageData?.isMdx ? (loading ? "<p>Loading...</p>" : pageData?.html || "<p>Page not found</p>") : undefined}
+        pageHtml={!pageData?.isMdx ? (loading ? "" : pageData?.html || "<p>Page not found</p>") : undefined}
         pageComponent={pageData?.isMdx ? pageData.component : undefined}
         mdxComponents={MDX_COMPONENTS}
-        pageTitle={pageData?.frontmatter.title || (loading ? "Loading..." : "Not Found")}
+        pageTitle={pageData?.frontmatter.title || (loading ? "" : "Not Found")}
         pageDescription={pageData?.frontmatter.description}
         headings={pageData?.headings || []}
         tocEnabled={pageData?.frontmatter.toc !== false}