@tomehq/theme 0.3.0 → 0.3.2

package/src/entry.tsx

@@ -13,11 +13,13 @@ import {
 // @ts-ignore — resolved by vite-plugin-tome
 import config from "virtual:tome/config";
 // @ts-ignore — resolved by vite-plugin-tome
-import { routes, navigation, versions } from "virtual:tome/routes";
+import { routes, navigation, versions, i18n } from "virtual:tome/routes";
 // @ts-ignore — resolved by vite-plugin-tome
 import loadPageModule from "virtual:tome/page-loader";
 // @ts-ignore — resolved by vite-plugin-tome
 import docContext from "virtual:tome/doc-context";
+// @ts-ignore — resolved by vite-plugin-tome
+import overrides from "virtual:tome/overrides";
 
 // TOM-8: Built-in MDX components from @tomehq/components
 // These are injected into every MDX page automatically
@@ -32,6 +34,9 @@ import {
   PackageManager,
   TypeTable,
   FileTree,
+  CodeSamples,
+  LinkCard,
+  CardGrid,
 } from "@tomehq/components";
 
 const MDX_COMPONENTS: Record<string, React.ComponentType<any>> = {
@@ -45,6 +50,9 @@ const MDX_COMPONENTS: Record<string, React.ComponentType<any>> = {
   PackageManager,
   TypeTable,
   FileTree, // Sub-components accessible as <FileTree.File /> and <FileTree.Folder /> in MDX
+  CodeSamples,
+  LinkCard,
+  CardGrid,
 };
 
 // ── CONTENT STYLES ───────────────────────────────────────
@@ -60,15 +68,15 @@ const contentStyles = `
   .tome-content a { color: var(--ac); text-decoration: none; }
   .tome-content a:hover { text-decoration: underline; }
   .tome-content .heading-anchor { display: none; }
-  .tome-content ul, .tome-content ol { color: var(--tx2); padding-left: 1.5em; margin-bottom: 1em; }
+  .tome-content ul, .tome-content ol { color: var(--tx2); padding-inline-start: 1.5em; margin-bottom: 1em; }
   .tome-content li { margin-bottom: 0.3em; line-height: 1.7; }
   .tome-content code { font-family: var(--font-code); font-size: 0.88em; background: var(--cdBg); padding: 0.15em 0.4em; border-radius: 2px; color: var(--ac); }
   .tome-content pre { margin-bottom: 1.2em; border-radius: 2px; overflow-x: auto; border: 1px solid var(--bd); }
   .tome-content pre code { background: none; padding: 1em 1.2em; display: block; font-size: 12.5px; line-height: 1.7; color: var(--cdTx); }
-  .tome-content blockquote { border-left: 3px solid var(--ac); padding: 0.5em 1em; margin: 1em 0; background: var(--acD); border-radius: 0 2px 2px 0; }
+  .tome-content blockquote { border-inline-start: 3px solid var(--ac); padding: 0.5em 1em; margin: 1em 0; background: var(--acD); border-radius: 0 2px 2px 0; }
   .tome-content blockquote p { color: var(--tx2); margin: 0; }
   .tome-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
-  .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: left; font-size: 0.9em; }
+  .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: start; font-size: 0.9em; }
   .tome-content th { background: var(--sf); font-weight: 600; }
   .tome-content img { max-width: 100%; border-radius: 2px; cursor: zoom-in; }
   .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
@@ -122,6 +130,74 @@ const contentStyles = `
     background-repeat: repeat; background-size: 256px;
   }
 
+  /* ── Expressive code blocks ───────────────────────────── */
+
+  /* Code block wrapper (for titled blocks) */
+  .tome-code-block-wrapper { position: relative; margin-bottom: 1.2em; border: 1px solid var(--bd); border-radius: 2px; overflow: hidden; }
+  .tome-code-block-wrapper pre { margin-bottom: 0; border: none; border-radius: 0; }
+  .tome-code-title {
+    font-family: var(--font-code); font-size: 12px; color: var(--tx2);
+    background: var(--sf); padding: 6px 12px; border-bottom: 1px solid var(--bd);
+    letter-spacing: 0.01em; font-weight: 500;
+  }
+
+  /* Line highlighting */
+  .tome-content pre .line.tome-line-highlight {
+    background: rgba(139, 148, 158, 0.1);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  html.dark .tome-content pre .line.tome-line-highlight {
+    background: rgba(200, 210, 220, 0.08);
+  }
+
+  /* Diff lines */
+  .tome-content pre .line.tome-line-added {
+    background: rgba(34, 197, 94, 0.12);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  .tome-content pre .line.tome-line-removed {
+    background: rgba(239, 68, 68, 0.12);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  html.dark .tome-content pre .line.tome-line-added { background: rgba(34, 197, 94, 0.15); }
+  html.dark .tome-content pre .line.tome-line-removed { background: rgba(239, 68, 68, 0.15); }
+
+  /* Line numbers (CSS counter) */
+  .tome-content pre[data-line-numbers] code {
+    counter-reset: line;
+  }
+  .tome-content pre[data-line-numbers] .line::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block; width: 2.5em; margin-inline-end: 1em;
+    text-align: end; color: var(--txM); opacity: 0.4;
+    font-size: 0.85em; user-select: none;
+    border-inline-end: 1px solid var(--bd); padding-inline-end: 0.8em; margin-inline-end: 0.8em;
+  }
+
+  /* Word highlighting */
+  .tome-word-highlight {
+    background: rgba(139, 148, 158, 0.2); border-radius: 2px;
+    padding: 1px 3px; margin: 0 -1px;
+  }
+  html.dark .tome-word-highlight {
+    background: rgba(200, 210, 220, 0.15);
+  }
+
+  /* Copy button */
+  .tome-content pre { position: relative; }
+  .tome-copy-btn {
+    position: absolute; top: 8px; inset-inline-end: 8px;
+    font-family: var(--font-code); font-size: 11px;
+    color: var(--tx2); background: var(--sf); border: 1px solid var(--bd);
+    padding: 3px 8px; border-radius: 2px; cursor: pointer;
+    opacity: 0; transition: opacity 0.15s;
+    z-index: 2; line-height: 1.4;
+  }
+  .tome-content pre:hover .tome-copy-btn,
+  .tome-copy-btn:focus { opacity: 1; }
+  .tome-copy-btn:hover { background: var(--sfH); }
+
   /* Shiki dual-theme support */
   .shiki { background: var(--cdBg) !important; }
 
@@ -143,6 +219,57 @@ const contentStyles = `
   html:not(.dark) .shiki span[style*="color:#22863A"] { color: #1a6e2e !important; }
   html:not(.dark) .shiki span[style*="color:#D73A49"] { color: #b62324 !important; }
   html:not(.dark) .shiki span[style*="color:#005CC5"] { color: #0349b4 !important; }
+
+  /* ── Twoslash type hover tooltips ───────────────────── */
+  .twoslash-hover {
+    position: relative;
+    border-bottom: 1px dotted var(--tx2);
+    cursor: help;
+  }
+  .twoslash-popup-container {
+    position: absolute;
+    opacity: 0;
+    display: none;
+    z-index: 10;
+    left: 0;
+    top: 100%;
+    margin-top: 4px;
+    padding: 6px 10px;
+    background: var(--sf);
+    border: 1px solid var(--bd);
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: var(--font-code);
+    color: var(--tx);
+    white-space: pre-wrap;
+    max-width: 500px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    pointer-events: none;
+  }
+  .twoslash-hover:hover .twoslash-popup-container {
+    opacity: 1;
+    display: block;
+  }
+  /* Twoslash error/warning underlines */
+  .twoslash-error {
+    position: relative;
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom: 2px wavy rgba(239, 68, 68, 0.6);
+  }
+  /* Twoslash highlighted identifiers */
+  .twoslash-highlighted {
+    background: rgba(139, 148, 158, 0.15);
+    border-radius: 2px;
+    padding: 1px 2px;
+  }
+  /* Twoslash type annotation line (^?) */
+  .twoslash-popup-code .shiki { background: transparent !important; padding: 0; margin: 0; }
+  .twoslash-popup-code .shiki code { padding: 0; font-size: 12px; }
+  html.dark .twoslash-popup-container {
+    background: var(--sf);
+    border-color: var(--bd);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  }
 `;
 
 // ── ROUTING HELPERS ──────────────────────────────────────
@@ -156,17 +283,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);
@@ -197,7 +329,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);
@@ -206,7 +338,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);
+      });
     }
   }, []);
 
@@ -225,9 +363,16 @@ function App() {
   // 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"
-  );
+  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(() => {
@@ -291,6 +436,39 @@ function App() {
     return () => { cancelled = true; };
   }, [pageData, loading, mermaidTheme]);
 
+  // Add copy buttons to all pre blocks (expressive code blocks)
+  useEffect(() => {
+    if (loading) return;
+    const preBlocks = document.querySelectorAll(".tome-content pre");
+    const buttons: HTMLButtonElement[] = [];
+    preBlocks.forEach((pre) => {
+      // Skip if already has a copy button
+      if (pre.querySelector(".tome-copy-btn")) return;
+      const btn = document.createElement("button");
+      btn.className = "tome-copy-btn";
+      btn.textContent = "Copy";
+      btn.addEventListener("click", async () => {
+        const code = pre.querySelector("code");
+        if (code) {
+          try {
+            await navigator.clipboard.writeText(code.textContent || "");
+            btn.textContent = "Copied!";
+            setTimeout(() => { btn.textContent = "Copy"; }, 2000);
+          } catch {
+            // Fallback for non-HTTPS contexts
+            btn.textContent = "Failed";
+            setTimeout(() => { btn.textContent = "Copy"; }, 2000);
+          }
+        }
+      });
+      pre.appendChild(btn);
+      buttons.push(btn);
+    });
+    return () => {
+      buttons.forEach((btn) => btn.remove());
+    };
+  }, [pageData, loading]);
+
   const allPages = routes.map((r: any) => ({
     id: r.id,
     title: r.frontmatter.title,
@@ -302,6 +480,10 @@ function App() {
   const currentVersion = detectCurrentVersion(currentRoute, versions);
   const editUrl = computeEditUrl(config.editLink, currentRoute?.filePath);
 
+  // RTL: detect current locale and compute text direction
+  const currentLocale = currentRoute?.locale || i18n?.defaultLocale || "en";
+  const dir: "ltr" | "rtl" = i18n?.localeDirs?.[currentLocale] || "ltr";
+
   // KaTeX CSS: inject stylesheet when math is enabled or math placeholders exist
   useEffect(() => {
     const hasMathPlaceholders = document.querySelectorAll(".tome-math[data-math]").length > 0;
@@ -357,10 +539,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}
@@ -373,6 +555,11 @@ function App() {
         versioning={versions || undefined}
         currentVersion={currentVersion}
         basePath={basePath}
+        isDraft={currentRoute?.frontmatter?.draft === true}
+        dir={dir}
+        i18n={i18n || undefined}
+        currentLocale={currentLocale}
+        overrides={overrides}
       />
     </>
   );

package/src/global.d.ts

@@ -21,3 +21,14 @@ declare module "virtual:tome/doc-context" {
   const docContext: Array<{ id: string; title: string; content: string }>;
   export default docContext;
 }
+
+declare module "virtual:tome/overrides" {
+  const overrides: {
+    Header?: React.ComponentType<any>;
+    Footer?: React.ComponentType<any>;
+    Sidebar?: React.ComponentType<any>;
+    Toc?: React.ComponentType<any>;
+    PageFooter?: React.ComponentType<any>;
+  };
+  export default overrides;
+}