@tomehq/theme 0.2.9 → 0.3.0

package/dist/entry.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.2.9",
+  "version": "0.3.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.2.8",
-    "@tomehq/core": "0.2.8"
+    "@tomehq/components": "0.3.0",
+    "@tomehq/core": "0.3.0"
   },
   "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) {
@@ -201,7 +222,23 @@ 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(() =>
+    typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "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 +248,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 +264,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 +289,7 @@ function App() {
     })();
 
     return () => { cancelled = true; };
-  }, [pageData, loading]);
+  }, [pageData, loading, mermaidTheme]);
 
   const allPages = routes.map((r: any) => ({
     id: r.id,
@@ -272,9 +302,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 +314,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 (
     <>