@tomehq/theme 0.2.3 → 0.2.5

package/dist/{chunk-O4GH3KYX.js → chunk-7MUTU5D4.js}

@@ -562,7 +562,7 @@ var ChevDown = () => /* @__PURE__ */ jsx2(Icon, { d: "M6 9l6 6 6-6", size: 14 })
 var MenuIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M3 12h18M3 6h18M3 18h18", size: 20 });
 var XIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M18 6L6 18M6 6l12 12", size: 18 });
 var MoonIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" });
-var SunIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" });
+var SunIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-4a1 1 0 0 1 1-1v-1a1 1 0 0 1-2 0v1a1 1 0 0 1 1 1Zm0 16a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1ZM4 12a1 1 0 0 1-1 1H2a1 1 0 0 1 0-2h1a1 1 0 0 1 1 1Zm18-1h-1a1 1 0 0 1 0 2h1a1 1 0 0 1 0-2ZM6.34 6.34a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41Zm12.73-2.12-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 1 1 1.41 1.41ZM6.34 17.66l-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 1.41Zm12.73 2.12-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1-1.41 1.41Z" });
 var ArrowLeft = () => /* @__PURE__ */ jsx2(Icon, { d: "M19 12H5M12 19l-7-7 7-7", size: 14 });
 var ArrowRight = () => /* @__PURE__ */ jsx2(Icon, { d: "M5 12h14M12 5l7 7-7 7", size: 14 });
 var PencilIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", size: 13 });
@@ -821,6 +821,9 @@ function Shell({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, [themeMode]);
+  useEffect2(() => {
+    document.documentElement.classList.toggle("dark", isDark);
+  }, [isDark]);
   useEffect2(() => {
     const c = () => setWide(window.innerWidth > 1100);
     c();
@@ -1022,6 +1025,11 @@ function Shell({
         ] }, sec.section)) }),
         /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
           themeMode === "auto" ? /* @__PURE__ */ jsx2("button", { onClick: () => setDark((d) => !d), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: isDark ? /* @__PURE__ */ jsx2(SunIcon, {}) : /* @__PURE__ */ jsx2(MoonIcon, {}) }) : /* @__PURE__ */ jsx2("div", {}),
+          /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", letterSpacing: 0.2 }, children: [
+            "Built with ",
+            "\u2661",
+            " by Tome"
+          ] }),
           /* @__PURE__ */ jsx2("span", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }, children: typeof __TOME_VERSION__ !== "undefined" && __TOME_VERSION__ ? `v${__TOME_VERSION__}` : "v0.1.0" })
         ] })
       ] }),

package/dist/entry.js

@@ -1,6 +1,6 @@
 import {
   entry_default
-} from "./chunk-O4GH3KYX.js";
+} from "./chunk-7MUTU5D4.js";
 export {
   entry_default as default
 };

package/dist/index.js

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

package/package.json

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

package/src/Shell.tsx

@@ -41,7 +41,7 @@ const CheckIcon = () => <Icon d="M20 6L9 17l-5-5" size={14} />;
 const MenuIcon = () => <Icon d="M3 12h18M3 6h18M3 18h18" size={20} />;
 const XIcon = () => <Icon d="M18 6L6 18M6 6l12 12" size={18} />;
 const MoonIcon = () => <Icon d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />;
-const SunIcon = () => <Icon d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" />;
+const SunIcon = () => <Icon d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-4a1 1 0 0 1 1-1v-1a1 1 0 0 1-2 0v1a1 1 0 0 1 1 1Zm0 16a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1ZM4 12a1 1 0 0 1-1 1H2a1 1 0 0 1 0-2h1a1 1 0 0 1 1 1Zm18-1h-1a1 1 0 0 1 0 2h1a1 1 0 0 1 0-2ZM6.34 6.34a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41Zm12.73-2.12-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 1 1 1.41 1.41ZM6.34 17.66l-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 1.41Zm12.73 2.12-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1-1.41 1.41Z" />;
 const ArrowLeft = () => <Icon d="M19 12H5M12 19l-7-7 7-7" size={14} />;
 const ArrowRight = () => <Icon d="M5 12h14M12 5l7 7-7 7" size={14} />;
 const PencilIcon = () => <Icon d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" size={13} />;
@@ -371,6 +371,11 @@ export function Shell({
     return () => mq.removeEventListener("change", handler);
   }, [themeMode]);
 
+  // Sync dark mode class on <html> so global CSS selectors (e.g. Shiki dual-theme) work
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDark);
+  }, [isDark]);
+
   useEffect(() => {
     const c = () => setWide(window.innerWidth > 1100);
     c(); window.addEventListener("resize", c);
@@ -566,6 +571,7 @@ export function Shell({
                 {isDark ? <SunIcon /> : <MoonIcon />}
               </button>
             ) : <div />}
+            <span style={{ fontSize: 11, color: "var(--txM)", letterSpacing: 0.2 }}>Built with {"\u2661"} by Tome</span>
             <span style={{ fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }}>{typeof __TOME_VERSION__ !== "undefined" && __TOME_VERSION__ ? `v${__TOME_VERSION__}` : "v0.1.0"}</span>
           </div>
         </aside>

package/dist/chunk-BZGWSKT2.js

@@ -1,573 +0,0 @@
-// src/entry.tsx
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
-import { createRoot } from "react-dom/client";
-
-// src/Shell.tsx
-import { useState, useEffect, useRef, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var THEMES = {
-  amber: {
-    dark: {
-      bg: "#09090b",
-      sf: "#111114",
-      sfH: "#18181c",
-      bd: "#1e1e24",
-      tx: "#e4e4e7",
-      tx2: "#a1a1aa",
-      txM: "#919199",
-      ac: "#e8a845",
-      acD: "rgba(232,168,69,0.12)",
-      acT: "#fbbf24",
-      cdBg: "#0c0c0f",
-      cdTx: "#c4c4cc",
-      sbBg: "#0c0c0e",
-      hdBg: "rgba(9,9,11,0.85)"
-    },
-    light: {
-      bg: "#fafaf9",
-      sf: "#ffffff",
-      sfH: "#f5f5f4",
-      bd: "#e7e5e4",
-      tx: "#1c1917",
-      tx2: "#57534e",
-      txM: "#706b66",
-      ac: "#96640a",
-      acD: "rgba(150,100,10,0.08)",
-      acT: "#7a5208",
-      cdBg: "#f5f3f0",
-      cdTx: "#2c2520",
-      sbBg: "#f5f5f3",
-      hdBg: "rgba(250,250,249,0.85)"
-    },
-    fonts: { heading: "Instrument Serif", body: "DM Sans", code: "JetBrains Mono" }
-  },
-  editorial: {
-    dark: {
-      bg: "#080c1f",
-      sf: "#0e1333",
-      sfH: "#141940",
-      bd: "#1a2050",
-      tx: "#e8e6f0",
-      tx2: "#b5b1c8",
-      txM: "#9490ae",
-      ac: "#ff6b4a",
-      acD: "rgba(255,107,74,0.1)",
-      acT: "#ff8a70",
-      cdBg: "#0a0e27",
-      cdTx: "#b8b4cc",
-      sbBg: "#0a0e27",
-      hdBg: "rgba(8,12,31,0.9)"
-    },
-    light: {
-      bg: "#f6f4f0",
-      sf: "#ffffff",
-      sfH: "#eeece6",
-      bd: "#ddd9d0",
-      tx: "#1a1716",
-      tx2: "#4a443e",
-      txM: "#706960",
-      ac: "#b83d22",
-      acD: "rgba(184,61,34,0.07)",
-      acT: "#9c3019",
-      cdBg: "#edeae4",
-      cdTx: "#3a3530",
-      sbBg: "#f0ede8",
-      hdBg: "rgba(246,244,240,0.92)"
-    },
-    fonts: { heading: "Cormorant Garamond", body: "Bricolage Grotesque", code: "Fira Code" }
-  }
-};
-function hexToRgb(hex) {
-  const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) return null;
-  const n = parseInt(m[1], 16);
-  return [n >> 16 & 255, n >> 8 & 255, n & 255];
-}
-function buildAccentOverride(hex, isDark) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return null;
-  const [r, g, b] = rgb;
-  const acD = `rgba(${r},${g},${b},${isDark ? 0.12 : 0.08})`;
-  const factor = isDark ? 1.15 : 0.85;
-  const tr = Math.min(255, Math.round(r * factor));
-  const tg = Math.min(255, Math.round(g * factor));
-  const tb = Math.min(255, Math.round(b * factor));
-  const acT = `rgb(${tr},${tg},${tb})`;
-  return { ac: hex, acD, acT };
-}
-var Icon = ({ d, size = 16 }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx("path", { d })
-  }
-);
-var SearchIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3" });
-var ChevRight = () => /* @__PURE__ */ jsx(Icon, { d: "M9 18l6-6-6-6", size: 14 });
-var ChevDown = () => /* @__PURE__ */ jsx(Icon, { d: "M6 9l6 6 6-6", size: 14 });
-var MenuIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M3 12h18M3 6h18M3 18h18", size: 20 });
-var XIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M18 6L6 18M6 6l12 12", size: 18 });
-var MoonIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" });
-var SunIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" });
-var ArrowLeft = () => /* @__PURE__ */ jsx(Icon, { d: "M19 12H5M12 19l-7-7 7-7", size: 14 });
-var ArrowRight = () => /* @__PURE__ */ jsx(Icon, { d: "M5 12h14M12 5l7 7-7 7", size: 14 });
-function Shell({
-  config: config2,
-  navigation: navigation2,
-  currentPageId,
-  pageHtml,
-  pageComponent,
-  mdxComponents,
-  pageTitle,
-  pageDescription,
-  headings,
-  onNavigate,
-  allPages
-}) {
-  const themeMode = config2.theme?.mode || "auto";
-  const [isDark, setDark] = useState(() => {
-    if (themeMode === "dark") return true;
-    if (themeMode === "light") return false;
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true;
-  });
-  const [sbOpen, setSb] = useState(true);
-  const [searchOpen, setSearch] = useState(false);
-  const [expanded, setExpanded] = useState(navigation2.map((n) => n.section));
-  const contentRef = useRef(null);
-  const [wide, setWide] = useState(true);
-  const preset = config2.theme?.preset || "amber";
-  const baseTokens = THEMES[preset]?.[isDark ? "dark" : "light"] || THEMES.amber.dark;
-  const accentOverride = config2.theme?.accent ? buildAccentOverride(config2.theme.accent, isDark) : null;
-  const t = accentOverride ? { ...baseTokens, ...accentOverride } : baseTokens;
-  const presetFonts = THEMES[preset]?.fonts || THEMES.amber.fonts;
-  const fonts = {
-    heading: config2.theme?.fonts?.heading || presetFonts.heading,
-    body: config2.theme?.fonts?.body || presetFonts.body,
-    code: config2.theme?.fonts?.code || presetFonts.code
-  };
-  useEffect(() => {
-    if (themeMode !== "auto") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [themeMode]);
-  useEffect(() => {
-    const c = () => setWide(window.innerWidth > 1100);
-    c();
-    window.addEventListener("resize", c);
-    return () => window.removeEventListener("resize", c);
-  }, []);
-  useEffect(() => {
-    contentRef.current?.scrollTo(0, 0);
-  }, [currentPageId]);
-  useEffect(() => {
-    const h = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setSearch(true);
-      }
-      if (e.key === "Escape") setSearch(false);
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, []);
-  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 togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
-  const cssVars = {
-    "--bg": t.bg,
-    "--sf": t.sf,
-    "--sfH": t.sfH,
-    "--bd": t.bd,
-    "--tx": t.tx,
-    "--tx2": t.tx2,
-    "--txM": t.txM,
-    "--ac": t.ac,
-    "--acD": t.acD,
-    "--acT": t.acT,
-    "--cdBg": t.cdBg,
-    "--cdTx": t.cdTx,
-    "--sbBg": t.sbBg,
-    "--hdBg": t.hdBg,
-    "--font-heading": `"${fonts.heading}", serif`,
-    "--font-body": `"${fonts.body}", sans-serif`,
-    "--font-code": `"${fonts.code}", monospace`
-  };
-  const PageComponent = pageComponent;
-  return /* @__PURE__ */ jsxs("div", { style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh" }, children: [
-    searchOpen && /* @__PURE__ */ jsx(
-      SearchModal,
-      {
-        allPages,
-        onNavigate: (id) => {
-          onNavigate(id);
-          setSearch(false);
-        },
-        onClose: () => setSearch(false)
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100vh" }, children: [
-      /* @__PURE__ */ jsxs("aside", { style: {
-        width: sbOpen ? 260 : 0,
-        minWidth: sbOpen ? 260 : 0,
-        background: "var(--sbBg)",
-        borderRight: "1px solid var(--bd)",
-        display: "flex",
-        flexDirection: "column",
-        transition: "width .2s, min-width .2s",
-        overflow: "hidden"
-      }, children: [
-        /* @__PURE__ */ jsx("div", { style: { padding: "16px 18px", display: "flex", alignItems: "center", gap: 8, borderBottom: "1px solid var(--bd)" }, children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-heading)", fontSize: 20, fontWeight: 700, fontStyle: "italic" }, children: config2.name }) }),
-        /* @__PURE__ */ jsx("div", { style: { padding: "10px 12px" }, children: /* @__PURE__ */ jsxs("button", { onClick: () => setSearch(true), style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          width: "100%",
-          background: "var(--cdBg)",
-          border: "1px solid var(--bd)",
-          borderRadius: 6,
-          padding: "7px 10px",
-          cursor: "pointer",
-          color: "var(--txM)",
-          fontSize: 13,
-          fontFamily: "var(--font-body)"
-        }, children: [
-          /* @__PURE__ */ jsx(SearchIcon, {}),
-          /* @__PURE__ */ jsx("span", { style: { flex: 1, textAlign: "left" }, children: "Search..." }),
-          /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 10, background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 3, padding: "1px 5px" }, children: "\u2318K" })
-        ] }) }),
-        /* @__PURE__ */ jsx("nav", { style: { flex: 1, overflow: "auto", padding: "4px 8px 16px" }, children: navigation2.map((sec) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
-          /* @__PURE__ */ jsxs("button", { onClick: () => togSec(sec.section), style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            width: "100%",
-            background: "none",
-            border: "none",
-            padding: "6px 8px",
-            cursor: "pointer",
-            borderRadius: 4,
-            color: "var(--txM)",
-            fontSize: 11,
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: ".06em",
-            fontFamily: "var(--font-body)"
-          }, children: [
-            expanded.includes(sec.section) ? /* @__PURE__ */ jsx(ChevDown, {}) : /* @__PURE__ */ jsx(ChevRight, {}),
-            sec.section
-          ] }),
-          expanded.includes(sec.section) && /* @__PURE__ */ jsx("div", { style: { paddingLeft: 8 }, children: sec.pages.map((p) => {
-            const active = currentPageId === p.id;
-            return /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(p.id), style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              width: "100%",
-              textAlign: "left",
-              background: active ? "var(--acD)" : "none",
-              border: "none",
-              borderRadius: 5,
-              padding: "6px 10px",
-              cursor: "pointer",
-              color: active ? "var(--ac)" : "var(--tx2)",
-              fontSize: 13,
-              fontWeight: active ? 500 : 400,
-              fontFamily: "var(--font-body)",
-              transition: "background .1s"
-            }, children: p.title }, p.id);
-          }) })
-        ] }, sec.section)) }),
-        /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-          themeMode === "auto" ? /* @__PURE__ */ jsx("button", { onClick: () => setDark((d) => !d), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: isDark ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}) }) : /* @__PURE__ */ jsx("div", {}),
-          /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }, children: "v0.1.0" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-        /* @__PURE__ */ jsxs("header", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          padding: "10px 24px",
-          borderBottom: "1px solid var(--bd)",
-          background: "var(--hdBg)",
-          backdropFilter: "blur(12px)"
-        }, children: [
-          /* @__PURE__ */ jsx("button", { onClick: () => setSb(!sbOpen), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: sbOpen ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}) }),
-          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--txM)" }, children: navigation2.map((s) => {
-            const f = s.pages.find((p) => p.id === currentPageId);
-            if (!f) return null;
-            return /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-              /* @__PURE__ */ jsx("span", { children: s.section }),
-              /* @__PURE__ */ jsx(ChevRight, {}),
-              /* @__PURE__ */ jsx("span", { style: { color: "var(--tx)" }, children: f.title })
-            ] }, s.section);
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
-          /* @__PURE__ */ jsxs("main", { style: { flex: 1, maxWidth: 760, padding: "40px 48px 80px", margin: "0 auto" }, children: [
-            /* @__PURE__ */ jsx("h1", { style: { fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
-            pageDescription && /* @__PURE__ */ jsx("p", { style: { fontSize: 16, color: "var(--tx2)", lineHeight: 1.6, marginBottom: 32 }, children: pageDescription }),
-            /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--bd)", paddingTop: 28 }, children: PageComponent ? /* @__PURE__ */ jsx("div", { className: "tome-content", children: /* @__PURE__ */ jsx(PageComponent, { components: mdxComponents || {} }) }) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "tome-content",
-                dangerouslySetInnerHTML: { __html: pageHtml || "" }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
-              prev ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(prev.id), style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 6,
-                padding: "10px 16px",
-                cursor: "pointer",
-                color: "var(--tx2)",
-                fontSize: 13,
-                fontFamily: "var(--font-body)"
-              }, children: [
-                /* @__PURE__ */ jsx(ArrowLeft, {}),
-                " ",
-                prev.title
-              ] }) : /* @__PURE__ */ jsx("div", {}),
-              next ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(next.id), style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 6,
-                padding: "10px 16px",
-                cursor: "pointer",
-                color: "var(--tx2)",
-                fontSize: 13,
-                fontFamily: "var(--font-body)"
-              }, children: [
-                next.title,
-                " ",
-                /* @__PURE__ */ jsx(ArrowRight, {})
-              ] }) : /* @__PURE__ */ jsx("div", {})
-            ] })
-          ] }),
-          headings.length > 0 && wide && /* @__PURE__ */ jsxs("aside", { style: { width: 200, padding: "40px 16px 40px 0", position: "sticky", top: 0, alignSelf: "flex-start", flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--txM)", marginBottom: 12 }, children: "On this page" }),
-            headings.map((h, i) => /* @__PURE__ */ jsx("a", { href: `#${h.id}`, style: {
-              display: "block",
-              fontSize: 12.5,
-              color: "var(--txM)",
-              textDecoration: "none",
-              padding: "4px 0",
-              paddingLeft: (h.depth - 2) * 12,
-              lineHeight: 1.4
-            }, children: h.text }, i))
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function SearchModal({ allPages, onNavigate, onClose }) {
-  const [q, setQ] = useState("");
-  const ref = useRef(null);
-  useEffect(() => {
-    setTimeout(() => ref.current?.focus(), 50);
-  }, []);
-  const results = useMemo(() => {
-    if (!q.trim()) return [];
-    const ql = q.toLowerCase();
-    return allPages.filter((p) => p.title.toLowerCase().includes(ql) || (p.description || "").toLowerCase().includes(ql)).slice(0, 8);
-  }, [q, allPages]);
-  return /* @__PURE__ */ jsx("div", { onClick: onClose, style: {
-    position: "fixed",
-    inset: 0,
-    zIndex: 1e3,
-    background: "rgba(0,0,0,0.55)",
-    backdropFilter: "blur(6px)",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    paddingTop: "12vh"
-  }, children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
-    background: "var(--sf)",
-    border: "1px solid var(--bd)",
-    borderRadius: 12,
-    width: "100%",
-    maxWidth: 520,
-    boxShadow: "0 24px 80px rgba(0,0,0,0.4)",
-    overflow: "hidden"
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--bd)" }, children: [
-      /* @__PURE__ */ jsx(SearchIcon, {}),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          value: q,
-          onChange: (e) => setQ(e.target.value),
-          placeholder: "Search documentation...",
-          style: { flex: 1, background: "none", border: "none", outline: "none", color: "var(--tx)", fontSize: 15, fontFamily: "var(--font-body)" }
-        }
-      ),
-      /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", background: "var(--cdBg)", padding: "2px 6px", borderRadius: 4, border: "1px solid var(--bd)" }, children: "ESC" })
-    ] }),
-    results.length > 0 && /* @__PURE__ */ jsx("div", { style: { padding: 6, maxHeight: 360, overflow: "auto" }, children: results.map((r) => /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(r.id), style: {
-      display: "block",
-      width: "100%",
-      textAlign: "left",
-      background: "none",
-      border: "none",
-      borderRadius: 6,
-      padding: "10px 14px",
-      cursor: "pointer",
-      color: "var(--tx)"
-    }, children: [
-      /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: 14, marginBottom: 2 }, children: r.title }),
-      r.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--txM)", lineHeight: 1.3 }, children: r.description })
-    ] }, r.id)) }),
-    q && !results.length && /* @__PURE__ */ jsx("div", { style: { padding: "32px 18px", textAlign: "center", color: "var(--txM)", fontSize: 14 }, children: "No results found" })
-  ] }) });
-}
-
-// src/entry.tsx
-import config from "virtual:tome/config";
-import { routes, navigation } from "virtual:tome/routes";
-import {
-  Callout,
-  Tabs,
-  Card,
-  CardGroup,
-  Steps,
-  Accordion
-} from "@tome/components";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MDX_COMPONENTS = {
-  Callout,
-  Tabs,
-  Card,
-  CardGroup,
-  Steps,
-  Accordion
-};
-var contentStyles = `
-  .tome-content h2 { font-size: 1.4em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; }
-  .tome-content h3 { font-size: 1.2em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
-  .tome-content h4 { font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
-  .tome-content p { color: var(--tx2); line-height: 1.75; margin-bottom: 1em; }
-  .tome-content a { color: var(--ac); text-decoration: none; }
-  .tome-content a:hover { text-decoration: underline; }
-  .tome-content ul, .tome-content ol { color: var(--tx2); padding-left: 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: 4px; color: var(--ac); }
-  .tome-content pre { margin-bottom: 1.2em; border-radius: 8px; overflow-x: auto; border: 1px solid var(--bd); }
-  .tome-content pre code { background: none; padding: 1em 1.2em; display: block; font-size: 13px; line-height: 1.65; 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 6px 6px 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 { background: var(--sf); font-weight: 600; }
-  .tome-content img { max-width: 100%; border-radius: 6px; }
-  .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
-
-  /* Shiki dual-theme support */
-  .shiki { background: var(--cdBg) !important; }
-  html.dark .shiki .shiki-light { display: none; }
-  html.light .shiki .shiki-dark { display: none; }
-`;
-async function loadPage(id) {
-  try {
-    const route = routes.find((r) => r.id === id);
-    const mod = await import(
-      /* @vite-ignore */
-      `virtual:tome/page/${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;
-    return { isMdx: false, ...mod.default };
-  } catch (err) {
-    console.error(`Failed to load page: ${id}`, err);
-    return null;
-  }
-}
-function App() {
-  const [currentPageId, setCurrentPageId] = useState2(() => {
-    const hash = window.location.hash.slice(1);
-    if (hash && routes.some((r) => r.id === hash)) return hash;
-    return routes[0]?.id || "index";
-  });
-  const [pageData, setPageData] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const navigateTo = useCallback2(async (id) => {
-    setLoading(true);
-    setCurrentPageId(id);
-    window.location.hash = id;
-    const data = await loadPage(id);
-    setPageData(data);
-    setLoading(false);
-  }, []);
-  useEffect2(() => {
-    navigateTo(currentPageId);
-  }, []);
-  useEffect2(() => {
-    const onHashChange = () => {
-      const hash = window.location.hash.slice(1);
-      if (hash && hash !== currentPageId) navigateTo(hash);
-    };
-    window.addEventListener("hashchange", onHashChange);
-    return () => window.removeEventListener("hashchange", onHashChange);
-  }, [currentPageId, navigateTo]);
-  const allPages = routes.map((r) => ({
-    id: r.id,
-    title: r.frontmatter.title,
-    description: r.frontmatter.description
-  }));
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2("style", { children: contentStyles }),
-    /* @__PURE__ */ jsx2(
-      Shell,
-      {
-        config,
-        navigation,
-        currentPageId,
-        pageHtml: !pageData?.isMdx ? loading ? "<p>Loading...</p>" : pageData?.html || "<p>Page not found</p>" : void 0,
-        pageComponent: pageData?.isMdx ? pageData.component : void 0,
-        mdxComponents: MDX_COMPONENTS,
-        pageTitle: pageData?.frontmatter.title || (loading ? "Loading..." : "Not Found"),
-        pageDescription: pageData?.frontmatter.description,
-        headings: pageData?.headings || [],
-        onNavigate: navigateTo,
-        allPages
-      }
-    )
-  ] });
-}
-var container = document.getElementById("tome-root");
-if (container) {
-  const root = createRoot(container);
-  root.render(/* @__PURE__ */ jsx2(App, {}));
-}
-var entry_default = App;
-
-export {
-  Shell,
-  entry_default
-};