@tomehq/theme 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,509 @@
1
+ // src/entry.tsx
2
+ import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
3
+ import { createRoot } from "react-dom/client";
4
+
5
+ // src/Shell.tsx
6
+ import { useState, useEffect, useRef, useMemo } from "react";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ var THEMES = {
9
+ amber: {
10
+ dark: {
11
+ bg: "#09090b",
12
+ sf: "#111114",
13
+ sfH: "#18181c",
14
+ bd: "#1e1e24",
15
+ tx: "#e4e4e7",
16
+ tx2: "#a1a1aa",
17
+ txM: "#919199",
18
+ ac: "#e8a845",
19
+ acD: "rgba(232,168,69,0.12)",
20
+ acT: "#fbbf24",
21
+ cdBg: "#0c0c0f",
22
+ cdTx: "#c4c4cc",
23
+ sbBg: "#0c0c0e",
24
+ hdBg: "rgba(9,9,11,0.85)"
25
+ },
26
+ light: {
27
+ bg: "#fafaf9",
28
+ sf: "#ffffff",
29
+ sfH: "#f5f5f4",
30
+ bd: "#e7e5e4",
31
+ tx: "#1c1917",
32
+ tx2: "#57534e",
33
+ txM: "#706b66",
34
+ ac: "#96640a",
35
+ acD: "rgba(150,100,10,0.08)",
36
+ acT: "#7a5208",
37
+ cdBg: "#f5f3f0",
38
+ cdTx: "#2c2520",
39
+ sbBg: "#f5f5f3",
40
+ hdBg: "rgba(250,250,249,0.85)"
41
+ },
42
+ fonts: { heading: "Instrument Serif", body: "DM Sans", code: "JetBrains Mono" }
43
+ },
44
+ editorial: {
45
+ dark: {
46
+ bg: "#080c1f",
47
+ sf: "#0e1333",
48
+ sfH: "#141940",
49
+ bd: "#1a2050",
50
+ tx: "#e8e6f0",
51
+ tx2: "#b5b1c8",
52
+ txM: "#9490ae",
53
+ ac: "#ff6b4a",
54
+ acD: "rgba(255,107,74,0.1)",
55
+ acT: "#ff8a70",
56
+ cdBg: "#0a0e27",
57
+ cdTx: "#b8b4cc",
58
+ sbBg: "#0a0e27",
59
+ hdBg: "rgba(8,12,31,0.9)"
60
+ },
61
+ light: {
62
+ bg: "#f6f4f0",
63
+ sf: "#ffffff",
64
+ sfH: "#eeece6",
65
+ bd: "#ddd9d0",
66
+ tx: "#1a1716",
67
+ tx2: "#4a443e",
68
+ txM: "#706960",
69
+ ac: "#b83d22",
70
+ acD: "rgba(184,61,34,0.07)",
71
+ acT: "#9c3019",
72
+ cdBg: "#edeae4",
73
+ cdTx: "#3a3530",
74
+ sbBg: "#f0ede8",
75
+ hdBg: "rgba(246,244,240,0.92)"
76
+ },
77
+ fonts: { heading: "Cormorant Garamond", body: "Bricolage Grotesque", code: "Fira Code" }
78
+ }
79
+ };
80
+ var Icon = ({ d, size = 16 }) => /* @__PURE__ */ jsx(
81
+ "svg",
82
+ {
83
+ width: size,
84
+ height: size,
85
+ viewBox: "0 0 24 24",
86
+ fill: "none",
87
+ stroke: "currentColor",
88
+ strokeWidth: "1.5",
89
+ strokeLinecap: "round",
90
+ strokeLinejoin: "round",
91
+ children: /* @__PURE__ */ jsx("path", { d })
92
+ }
93
+ );
94
+ 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" });
95
+ var ChevRight = () => /* @__PURE__ */ jsx(Icon, { d: "M9 18l6-6-6-6", size: 14 });
96
+ var ChevDown = () => /* @__PURE__ */ jsx(Icon, { d: "M6 9l6 6 6-6", size: 14 });
97
+ var MenuIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M3 12h18M3 6h18M3 18h18", size: 20 });
98
+ var XIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M18 6L6 18M6 6l12 12", size: 18 });
99
+ var MoonIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" });
100
+ var SunIcon = () => /* @__PURE__ */ jsx(Icon, { d: "M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" });
101
+ var ArrowLeft = () => /* @__PURE__ */ jsx(Icon, { d: "M19 12H5M12 19l-7-7 7-7", size: 14 });
102
+ var ArrowRight = () => /* @__PURE__ */ jsx(Icon, { d: "M5 12h14M12 5l7 7-7 7", size: 14 });
103
+ function Shell({
104
+ config: config2,
105
+ navigation: navigation2,
106
+ currentPageId,
107
+ pageHtml,
108
+ pageTitle,
109
+ pageDescription,
110
+ headings,
111
+ onNavigate,
112
+ allPages
113
+ }) {
114
+ const [isDark, setDark] = useState(true);
115
+ const [sbOpen, setSb] = useState(true);
116
+ const [searchOpen, setSearch] = useState(false);
117
+ const [expanded, setExpanded] = useState(navigation2.map((n) => n.section));
118
+ const contentRef = useRef(null);
119
+ const [wide, setWide] = useState(true);
120
+ const preset = config2.theme?.preset || "amber";
121
+ const t = THEMES[preset]?.[isDark ? "dark" : "light"] || THEMES.amber.dark;
122
+ const fonts = THEMES[preset]?.fonts || THEMES.amber.fonts;
123
+ useEffect(() => {
124
+ const c = () => setWide(window.innerWidth > 1100);
125
+ c();
126
+ window.addEventListener("resize", c);
127
+ return () => window.removeEventListener("resize", c);
128
+ }, []);
129
+ useEffect(() => {
130
+ contentRef.current?.scrollTo(0, 0);
131
+ }, [currentPageId]);
132
+ useEffect(() => {
133
+ const h = (e) => {
134
+ if ((e.metaKey || e.ctrlKey) && e.key === "k") {
135
+ e.preventDefault();
136
+ setSearch(true);
137
+ }
138
+ if (e.key === "Escape") setSearch(false);
139
+ };
140
+ window.addEventListener("keydown", h);
141
+ return () => window.removeEventListener("keydown", h);
142
+ }, []);
143
+ const allNavPages = navigation2.flatMap((g) => g.pages);
144
+ const idx = allNavPages.findIndex((p) => p.id === currentPageId);
145
+ const prev = idx > 0 ? allNavPages[idx - 1] : null;
146
+ const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
147
+ const togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
148
+ const cssVars = {
149
+ "--bg": t.bg,
150
+ "--sf": t.sf,
151
+ "--sfH": t.sfH,
152
+ "--bd": t.bd,
153
+ "--tx": t.tx,
154
+ "--tx2": t.tx2,
155
+ "--txM": t.txM,
156
+ "--ac": t.ac,
157
+ "--acD": t.acD,
158
+ "--acT": t.acT,
159
+ "--cdBg": t.cdBg,
160
+ "--cdTx": t.cdTx,
161
+ "--sbBg": t.sbBg,
162
+ "--hdBg": t.hdBg,
163
+ "--font-heading": `"${fonts.heading}", serif`,
164
+ "--font-body": `"${fonts.body}", sans-serif`,
165
+ "--font-code": `"${fonts.code}", monospace`
166
+ };
167
+ return /* @__PURE__ */ jsxs("div", { style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh" }, children: [
168
+ searchOpen && /* @__PURE__ */ jsx(
169
+ SearchModal,
170
+ {
171
+ allPages,
172
+ onNavigate: (id) => {
173
+ onNavigate(id);
174
+ setSearch(false);
175
+ },
176
+ onClose: () => setSearch(false)
177
+ }
178
+ ),
179
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100vh" }, children: [
180
+ /* @__PURE__ */ jsxs("aside", { style: {
181
+ width: sbOpen ? 260 : 0,
182
+ minWidth: sbOpen ? 260 : 0,
183
+ background: "var(--sbBg)",
184
+ borderRight: "1px solid var(--bd)",
185
+ display: "flex",
186
+ flexDirection: "column",
187
+ transition: "width .2s, min-width .2s",
188
+ overflow: "hidden"
189
+ }, children: [
190
+ /* @__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 }) }),
191
+ /* @__PURE__ */ jsx("div", { style: { padding: "10px 12px" }, children: /* @__PURE__ */ jsxs("button", { onClick: () => setSearch(true), style: {
192
+ display: "flex",
193
+ alignItems: "center",
194
+ gap: 8,
195
+ width: "100%",
196
+ background: "var(--cdBg)",
197
+ border: "1px solid var(--bd)",
198
+ borderRadius: 6,
199
+ padding: "7px 10px",
200
+ cursor: "pointer",
201
+ color: "var(--txM)",
202
+ fontSize: 13,
203
+ fontFamily: "var(--font-body)"
204
+ }, children: [
205
+ /* @__PURE__ */ jsx(SearchIcon, {}),
206
+ /* @__PURE__ */ jsx("span", { style: { flex: 1, textAlign: "left" }, children: "Search..." }),
207
+ /* @__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" })
208
+ ] }) }),
209
+ /* @__PURE__ */ jsx("nav", { style: { flex: 1, overflow: "auto", padding: "4px 8px 16px" }, children: navigation2.map((sec) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
210
+ /* @__PURE__ */ jsxs("button", { onClick: () => togSec(sec.section), style: {
211
+ display: "flex",
212
+ alignItems: "center",
213
+ gap: 6,
214
+ width: "100%",
215
+ background: "none",
216
+ border: "none",
217
+ padding: "6px 8px",
218
+ cursor: "pointer",
219
+ borderRadius: 4,
220
+ color: "var(--txM)",
221
+ fontSize: 11,
222
+ fontWeight: 600,
223
+ textTransform: "uppercase",
224
+ letterSpacing: ".06em",
225
+ fontFamily: "var(--font-body)"
226
+ }, children: [
227
+ expanded.includes(sec.section) ? /* @__PURE__ */ jsx(ChevDown, {}) : /* @__PURE__ */ jsx(ChevRight, {}),
228
+ sec.section
229
+ ] }),
230
+ expanded.includes(sec.section) && /* @__PURE__ */ jsx("div", { style: { paddingLeft: 8 }, children: sec.pages.map((p) => {
231
+ const active = currentPageId === p.id;
232
+ return /* @__PURE__ */ jsx("button", { onClick: () => onNavigate(p.id), style: {
233
+ display: "flex",
234
+ alignItems: "center",
235
+ gap: 8,
236
+ width: "100%",
237
+ textAlign: "left",
238
+ background: active ? "var(--acD)" : "none",
239
+ border: "none",
240
+ borderRadius: 5,
241
+ padding: "6px 10px",
242
+ cursor: "pointer",
243
+ color: active ? "var(--ac)" : "var(--tx2)",
244
+ fontSize: 13,
245
+ fontWeight: active ? 500 : 400,
246
+ fontFamily: "var(--font-body)",
247
+ transition: "background .1s"
248
+ }, children: p.title }, p.id);
249
+ }) })
250
+ ] }, sec.section)) }),
251
+ /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
252
+ /* @__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, {}) }),
253
+ /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }, children: "v0.1.0" })
254
+ ] })
255
+ ] }),
256
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
257
+ /* @__PURE__ */ jsxs("header", { style: {
258
+ display: "flex",
259
+ alignItems: "center",
260
+ gap: 12,
261
+ padding: "10px 24px",
262
+ borderBottom: "1px solid var(--bd)",
263
+ background: "var(--hdBg)",
264
+ backdropFilter: "blur(12px)"
265
+ }, children: [
266
+ /* @__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, {}) }),
267
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--txM)" }, children: navigation2.map((s) => {
268
+ const f = s.pages.find((p) => p.id === currentPageId);
269
+ if (!f) return null;
270
+ return /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
271
+ /* @__PURE__ */ jsx("span", { children: s.section }),
272
+ /* @__PURE__ */ jsx(ChevRight, {}),
273
+ /* @__PURE__ */ jsx("span", { style: { color: "var(--tx)" }, children: f.title })
274
+ ] }, s.section);
275
+ }) })
276
+ ] }),
277
+ /* @__PURE__ */ jsxs("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
278
+ /* @__PURE__ */ jsxs("main", { style: { flex: 1, maxWidth: 760, padding: "40px 48px 80px", margin: "0 auto" }, children: [
279
+ /* @__PURE__ */ jsx("h1", { style: { fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
280
+ pageDescription && /* @__PURE__ */ jsx("p", { style: { fontSize: 16, color: "var(--tx2)", lineHeight: 1.6, marginBottom: 32 }, children: pageDescription }),
281
+ /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--bd)", paddingTop: 28 }, children: /* @__PURE__ */ jsx(
282
+ "div",
283
+ {
284
+ className: "tome-content",
285
+ dangerouslySetInnerHTML: { __html: pageHtml }
286
+ }
287
+ ) }),
288
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
289
+ prev ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(prev.id), style: {
290
+ display: "flex",
291
+ alignItems: "center",
292
+ gap: 8,
293
+ background: "none",
294
+ border: "1px solid var(--bd)",
295
+ borderRadius: 6,
296
+ padding: "10px 16px",
297
+ cursor: "pointer",
298
+ color: "var(--tx2)",
299
+ fontSize: 13,
300
+ fontFamily: "var(--font-body)"
301
+ }, children: [
302
+ /* @__PURE__ */ jsx(ArrowLeft, {}),
303
+ " ",
304
+ prev.title
305
+ ] }) : /* @__PURE__ */ jsx("div", {}),
306
+ next ? /* @__PURE__ */ jsxs("button", { onClick: () => onNavigate(next.id), style: {
307
+ display: "flex",
308
+ alignItems: "center",
309
+ gap: 8,
310
+ background: "none",
311
+ border: "1px solid var(--bd)",
312
+ borderRadius: 6,
313
+ padding: "10px 16px",
314
+ cursor: "pointer",
315
+ color: "var(--tx2)",
316
+ fontSize: 13,
317
+ fontFamily: "var(--font-body)"
318
+ }, children: [
319
+ next.title,
320
+ " ",
321
+ /* @__PURE__ */ jsx(ArrowRight, {})
322
+ ] }) : /* @__PURE__ */ jsx("div", {})
323
+ ] })
324
+ ] }),
325
+ 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: [
326
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--txM)", marginBottom: 12 }, children: "On this page" }),
327
+ headings.map((h, i) => /* @__PURE__ */ jsx("a", { href: `#${h.id}`, style: {
328
+ display: "block",
329
+ fontSize: 12.5,
330
+ color: "var(--txM)",
331
+ textDecoration: "none",
332
+ padding: "4px 0",
333
+ paddingLeft: (h.depth - 2) * 12,
334
+ lineHeight: 1.4
335
+ }, children: h.text }, i))
336
+ ] })
337
+ ] })
338
+ ] })
339
+ ] })
340
+ ] });
341
+ }
342
+ function SearchModal({ allPages, onNavigate, onClose }) {
343
+ const [q, setQ] = useState("");
344
+ const ref = useRef(null);
345
+ useEffect(() => {
346
+ setTimeout(() => ref.current?.focus(), 50);
347
+ }, []);
348
+ const results = useMemo(() => {
349
+ if (!q.trim()) return [];
350
+ const ql = q.toLowerCase();
351
+ return allPages.filter((p) => p.title.toLowerCase().includes(ql) || (p.description || "").toLowerCase().includes(ql)).slice(0, 8);
352
+ }, [q, allPages]);
353
+ return /* @__PURE__ */ jsx("div", { onClick: onClose, style: {
354
+ position: "fixed",
355
+ inset: 0,
356
+ zIndex: 1e3,
357
+ background: "rgba(0,0,0,0.55)",
358
+ backdropFilter: "blur(6px)",
359
+ display: "flex",
360
+ alignItems: "flex-start",
361
+ justifyContent: "center",
362
+ paddingTop: "12vh"
363
+ }, children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
364
+ background: "var(--sf)",
365
+ border: "1px solid var(--bd)",
366
+ borderRadius: 12,
367
+ width: "100%",
368
+ maxWidth: 520,
369
+ boxShadow: "0 24px 80px rgba(0,0,0,0.4)",
370
+ overflow: "hidden"
371
+ }, children: [
372
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--bd)" }, children: [
373
+ /* @__PURE__ */ jsx(SearchIcon, {}),
374
+ /* @__PURE__ */ jsx(
375
+ "input",
376
+ {
377
+ ref,
378
+ value: q,
379
+ onChange: (e) => setQ(e.target.value),
380
+ placeholder: "Search documentation...",
381
+ style: { flex: 1, background: "none", border: "none", outline: "none", color: "var(--tx)", fontSize: 15, fontFamily: "var(--font-body)" }
382
+ }
383
+ ),
384
+ /* @__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" })
385
+ ] }),
386
+ 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: {
387
+ display: "block",
388
+ width: "100%",
389
+ textAlign: "left",
390
+ background: "none",
391
+ border: "none",
392
+ borderRadius: 6,
393
+ padding: "10px 14px",
394
+ cursor: "pointer",
395
+ color: "var(--tx)"
396
+ }, children: [
397
+ /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: 14, marginBottom: 2 }, children: r.title }),
398
+ r.description && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--txM)", lineHeight: 1.3 }, children: r.description })
399
+ ] }, r.id)) }),
400
+ q && !results.length && /* @__PURE__ */ jsx("div", { style: { padding: "32px 18px", textAlign: "center", color: "var(--txM)", fontSize: 14 }, children: "No results found" })
401
+ ] }) });
402
+ }
403
+
404
+ // src/entry.tsx
405
+ import config from "virtual:tome/config";
406
+ import { routes, navigation } from "virtual:tome/routes";
407
+ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
408
+ async function loadPage(id) {
409
+ try {
410
+ const mod = await import(
411
+ /* @vite-ignore */
412
+ `virtual:tome/page/${id}`
413
+ );
414
+ return mod.default;
415
+ } catch (err) {
416
+ console.error(`Failed to load page: ${id}`, err);
417
+ return null;
418
+ }
419
+ }
420
+ var contentStyles = `
421
+ .tome-content h2 { font-size: 1.4em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; }
422
+ .tome-content h3 { font-size: 1.2em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
423
+ .tome-content h4 { font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
424
+ .tome-content p { color: var(--tx2); line-height: 1.75; margin-bottom: 1em; }
425
+ .tome-content a { color: var(--ac); text-decoration: none; }
426
+ .tome-content a:hover { text-decoration: underline; }
427
+ .tome-content ul, .tome-content ol { color: var(--tx2); padding-left: 1.5em; margin-bottom: 1em; }
428
+ .tome-content li { margin-bottom: 0.3em; line-height: 1.7; }
429
+ .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); }
430
+ .tome-content pre { margin-bottom: 1.2em; border-radius: 8px; overflow-x: auto; border: 1px solid var(--bd); }
431
+ .tome-content pre code { background: none; padding: 1em 1.2em; display: block; font-size: 13px; line-height: 1.65; color: var(--cdTx); }
432
+ .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; }
433
+ .tome-content blockquote p { color: var(--tx2); margin: 0; }
434
+ .tome-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
435
+ .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: left; font-size: 0.9em; }
436
+ .tome-content th { background: var(--sf); font-weight: 600; }
437
+ .tome-content img { max-width: 100%; border-radius: 6px; }
438
+ .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
439
+
440
+ /* Shiki dual-theme support */
441
+ .shiki { background: var(--cdBg) !important; }
442
+ html.dark .shiki .shiki-light { display: none; }
443
+ html.light .shiki .shiki-dark { display: none; }
444
+ `;
445
+ function App() {
446
+ const [currentPageId, setCurrentPageId] = useState2(() => {
447
+ const hash = window.location.hash.slice(1);
448
+ if (hash && routes.some((r) => r.id === hash)) return hash;
449
+ return routes[0]?.id || "index";
450
+ });
451
+ const [pageData, setPageData] = useState2(null);
452
+ const [loading, setLoading] = useState2(true);
453
+ const navigateTo = useCallback2(async (id) => {
454
+ setLoading(true);
455
+ setCurrentPageId(id);
456
+ window.location.hash = id;
457
+ const data = await loadPage(id);
458
+ if (data) {
459
+ setPageData(data);
460
+ }
461
+ setLoading(false);
462
+ }, []);
463
+ useEffect2(() => {
464
+ navigateTo(currentPageId);
465
+ }, []);
466
+ useEffect2(() => {
467
+ const onHashChange = () => {
468
+ const hash = window.location.hash.slice(1);
469
+ if (hash && hash !== currentPageId) {
470
+ navigateTo(hash);
471
+ }
472
+ };
473
+ window.addEventListener("hashchange", onHashChange);
474
+ return () => window.removeEventListener("hashchange", onHashChange);
475
+ }, [currentPageId, navigateTo]);
476
+ const allPages = routes.map((r) => ({
477
+ id: r.id,
478
+ title: r.frontmatter.title,
479
+ description: r.frontmatter.description
480
+ }));
481
+ return /* @__PURE__ */ jsxs2(Fragment, { children: [
482
+ /* @__PURE__ */ jsx2("style", { children: contentStyles }),
483
+ /* @__PURE__ */ jsx2(
484
+ Shell,
485
+ {
486
+ config,
487
+ navigation,
488
+ currentPageId,
489
+ pageHtml: pageData?.html || (loading ? "<p>Loading...</p>" : "<p>Page not found</p>"),
490
+ pageTitle: pageData?.frontmatter.title || "Loading...",
491
+ pageDescription: pageData?.frontmatter.description,
492
+ headings: pageData?.headings || [],
493
+ onNavigate: navigateTo,
494
+ allPages
495
+ }
496
+ )
497
+ ] });
498
+ }
499
+ var container = document.getElementById("tome-root");
500
+ if (container) {
501
+ const root = createRoot(container);
502
+ root.render(/* @__PURE__ */ jsx2(App, {}));
503
+ }
504
+ var entry_default = App;
505
+
506
+ export {
507
+ Shell,
508
+ entry_default
509
+ };