@tomehq/theme 0.1.0

package/src/entry.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { createRoot } from "react-dom/client";
+import { Shell } from "./Shell.js";
+
+// @ts-ignore — resolved by vite-plugin-tome
+import config from "virtual:tome/config";
+// @ts-ignore — resolved by vite-plugin-tome
+import { routes, navigation } 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";
+
+// TOM-8: Built-in MDX components from @tomehq/components
+// These are injected into every MDX page automatically
+import {
+  Callout,
+  Tabs,
+  Card,
+  CardGroup,
+  Steps,
+  Accordion,
+} from "@tomehq/components";
+
+const MDX_COMPONENTS: Record<string, React.ComponentType<any>> = {
+  Callout,
+  Tabs,
+  Card,
+  CardGroup,
+  Steps,
+  Accordion,
+};
+
+// ── CONTENT STYLES ───────────────────────────────────────
+const contentStyles = `
+  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&display=swap');
+
+  .tome-content h2 { font-family: var(--font-body); font-size: 1.35em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; display: flex; align-items: center; gap: 10px; letter-spacing: 0.01em; }
+  .tome-content h2::before { content: "#"; font-family: var(--font-heading); font-size: 1.2em; font-weight: 300; font-style: italic; color: var(--ac); opacity: 0.5; }
+  .tome-content h3 { font-family: var(--font-body); font-size: 1.15em; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
+  .tome-content h4 { font-family: var(--font-body); font-size: 1.05em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.5em; }
+  .tome-content p { color: var(--tx2); line-height: 1.8; margin-bottom: 1em; font-size: 14.5px; }
+  .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 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 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: 2px; }
+  .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
+
+  /* Selection style */
+  ::selection { background: var(--acD); color: var(--ac); }
+
+  /* Scrollbar style */
+  ::-webkit-scrollbar { width: 5px; height: 5px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 10px; }
+
+  /* Grain overlay */
+  .tome-grain::before {
+    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
+    opacity: .35;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    background-repeat: repeat; background-size: 256px;
+  }
+
+  /* Shiki dual-theme support */
+  .shiki { background: var(--cdBg) !important; }
+  html.dark .shiki .shiki-light { display: none; }
+  html.light .shiki .shiki-dark { display: none; }
+`;
+
+// ── PAGE TYPES ────────────────────────────────────────────
+interface HtmlPage {
+  isMdx: false;
+  html: string;
+  frontmatter: { title: string; description?: string };
+  headings: Array<{ depth: number; text: string; id: string }>;
+}
+
+interface MdxPage {
+  isMdx: true;
+  component: React.ComponentType<{ components?: Record<string, React.ComponentType> }>;
+  frontmatter: { title: string; description?: string };
+  headings: Array<{ depth: number; text: string; id: string }>;
+}
+
+type LoadedPage = HtmlPage | MdxPage;
+
+// ── PAGE LOADER ──────────────────────────────────────────
+async function loadPage(id: string): Promise<LoadedPage | null> {
+  try {
+    const route = routes.find((r: any) => r.id === id);
+    const mod = await loadPageModule(id);
+
+    if (route?.isMdx && mod.meta) {
+      // TOM-8: MDX page — mod.default is the React component
+      return {
+        isMdx: true,
+        component: mod.default,
+        frontmatter: mod.meta.frontmatter,
+        headings: mod.meta.headings,
+      };
+    }
+
+    // Regular .md page — mod.default is { html, frontmatter, headings }
+    if (!mod.default) return null;
+    return { isMdx: false, ...mod.default };
+  } catch (err) {
+    console.error(`Failed to load page: ${id}`, err);
+    return null;
+  }
+}
+
+// ── APP ──────────────────────────────────────────────────
+function App() {
+  const [currentPageId, setCurrentPageId] = useState(() => {
+    const hash = window.location.hash.slice(1);
+    if (hash && routes.some((r: any) => r.id === hash)) return hash;
+    return routes[0]?.id || "index";
+  });
+
+  const [pageData, setPageData] = useState<LoadedPage | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const navigateTo = useCallback(async (id: string) => {
+    setLoading(true);
+    setCurrentPageId(id);
+    window.location.hash = id;
+    const data = await loadPage(id);
+    setPageData(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { navigateTo(currentPageId); }, []);
+
+  useEffect(() => {
+    const onHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      // Only navigate if hash matches a known route ID (ignore heading anchors)
+      if (hash && hash !== currentPageId && routes.some((r: any) => r.id === hash)) {
+        navigateTo(hash);
+      }
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [currentPageId, navigateTo]);
+
+  const allPages = routes.map((r: any) => ({
+    id: r.id,
+    title: r.frontmatter.title,
+    description: r.frontmatter.description,
+  }));
+
+  return (
+    <>
+      <style>{contentStyles}</style>
+      <Shell
+        config={config}
+        navigation={navigation}
+        currentPageId={currentPageId}
+        pageHtml={!pageData?.isMdx ? (loading ? "<p>Loading...</p>" : 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")}
+        pageDescription={pageData?.frontmatter.description}
+        headings={pageData?.headings || []}
+        onNavigate={navigateTo}
+        allPages={allPages}
+        docContext={docContext}
+      />
+    </>
+  );
+}
+
+// ── MOUNT ────────────────────────────────────────────────
+const container = document.getElementById("tome-root");
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}
+
+export default App;

package/src/global.d.ts

@@ -0,0 +1,22 @@
+declare const __TOME_AI_API_KEY__: string | undefined;
+
+declare module "virtual:tome/config" {
+  const config: any;
+  export default config;
+}
+
+declare module "virtual:tome/routes" {
+  export const routes: any[];
+  export const navigation: any[];
+  export const versions: any;
+  export const i18n: any;
+}
+
+declare module "virtual:tome/page-loader" {
+  export default function loadPageModule(id: string): Promise<any>;
+}
+
+declare module "virtual:tome/doc-context" {
+  const docContext: Array<{ id: string; title: string; content: string }>;
+  export default docContext;
+}

package/src/index.tsx

@@ -0,0 +1,6 @@
+export { Shell } from "./Shell.js";
+export { AiChat } from "./AiChat.js";
+export type { AiChatProps } from "./AiChat.js";
+export { default as App } from "./entry.js";
+export { THEME_PRESETS } from "./presets.js";
+export type { ThemeTokens, ThemePreset, PresetName } from "./presets.js";

package/src/presets.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { THEME_PRESETS } from "./presets.js";
+import type { PresetName } from "./presets.js";
+
+const TOKEN_KEYS = [
+  "bg", "sf", "sfH", "bd",
+  "tx", "tx2", "txM",
+  "ac", "acD", "acT",
+  "cdBg", "cdTx", "sbBg", "hdBg",
+] as const;
+
+const FONT_KEYS = ["heading", "body", "code"] as const;
+
+const PRESET_NAMES: PresetName[] = ["amber", "editorial"];
+
+describe("THEME_PRESETS", () => {
+  it("contains both amber and editorial presets", () => {
+    expect(THEME_PRESETS).toHaveProperty("amber");
+    expect(THEME_PRESETS).toHaveProperty("editorial");
+  });
+
+  for (const name of PRESET_NAMES) {
+    describe(`${name} preset`, () => {
+      it("has dark and light token sets", () => {
+        expect(THEME_PRESETS[name]).toHaveProperty("dark");
+        expect(THEME_PRESETS[name]).toHaveProperty("light");
+      });
+
+      for (const mode of ["dark", "light"] as const) {
+        describe(`${mode} tokens`, () => {
+          it(`has all 14 token properties`, () => {
+            const tokens = THEME_PRESETS[name][mode];
+            for (const key of TOKEN_KEYS) {
+              expect(tokens).toHaveProperty(key);
+              expect(typeof tokens[key]).toBe("string");
+              expect(tokens[key].length).toBeGreaterThan(0);
+            }
+          });
+
+          it("has exactly 14 token properties", () => {
+            const tokens = THEME_PRESETS[name][mode];
+            expect(Object.keys(tokens)).toHaveLength(14);
+          });
+        });
+      }
+
+      describe("fonts", () => {
+        it("has heading, body, and code font families defined", () => {
+          const fonts = THEME_PRESETS[name].fonts;
+          for (const key of FONT_KEYS) {
+            expect(fonts).toHaveProperty(key);
+            expect(typeof fonts[key]).toBe("string");
+            expect(fonts[key].length).toBeGreaterThan(0);
+          }
+        });
+      });
+    });
+  }
+});

package/src/presets.ts

@@ -0,0 +1,51 @@
+// ── Theme Preset Types ────────────────────────────────────
+
+export interface ThemeTokens {
+  bg: string; sf: string; sfH: string; bd: string;
+  tx: string; tx2: string; txM: string;
+  ac: string; acD: string; acT: string;
+  cdBg: string; cdTx: string; sbBg: string; hdBg: string;
+}
+
+export interface ThemePreset {
+  dark: ThemeTokens;
+  light: ThemeTokens;
+  fonts: { heading: string; body: string; code: string };
+}
+
+// ── Theme Presets ─────────────────────────────────────────
+
+export const THEME_PRESETS = {
+  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" },
+  },
+} as const satisfies Record<string, ThemePreset>;
+
+export type PresetName = keyof typeof THEME_PRESETS;

package/src/test-setup.ts

@@ -0,0 +1,5 @@
+import "@testing-library/jest-dom";
+
+// jsdom stubs
+Element.prototype.scrollTo = () => {};
+Element.prototype.scrollIntoView = () => {};

package/src/virtual.d.ts

@@ -0,0 +1,14 @@
+declare module "virtual:tome/config" {
+  const config: import("@tomehq/core").TomeConfig;
+  export default config;
+}
+
+declare module "virtual:tome/routes" {
+  export const routes: Array<{
+    id: string;
+    urlPath: string;
+    frontmatter: import("@tomehq/core").PageFrontmatter;
+    isMdx: boolean;
+  }>;
+  export const navigation: import("@tomehq/core").NavigationGroup[];
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  }
+}

package/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+export default defineConfig({
+  root: __dirname,
+  test: {
+    name: "theme",
+    environment: "jsdom",
+    globals: true,
+    include: ["src/**/*.test.tsx", "src/**/*.test.ts"],
+    setupFiles: [resolve(__dirname, "src/test-setup.ts")],
+    coverage: {
+      provider: "v8",
+      include: ["src/**/*.tsx", "src/**/*.ts"],
+      exclude: ["src/**/*.test.*", "src/test-setup.ts", "src/virtual.d.ts"],
+    },
+  },
+});