@tomehq/theme 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,200 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+export { default as App } from './entry.js';
+
+interface VersioningInfo {
+    current: string;
+    versions: string[];
+}
+interface I18nInfo {
+    defaultLocale: string;
+    locales: string[];
+    localeNames?: Record<string, string>;
+}
+interface ShellProps {
+    config: {
+        name: string;
+        theme?: {
+            preset?: string;
+            mode?: string;
+            accent?: string;
+            fonts?: {
+                heading?: string;
+                body?: string;
+                code?: string;
+            };
+        };
+        search?: {
+            provider?: string;
+            appId?: string;
+            apiKey?: string;
+            indexName?: string;
+        };
+        ai?: {
+            enabled?: boolean;
+            provider?: "openai" | "anthropic" | "custom";
+            model?: string;
+            apiKeyEnv?: string;
+        };
+        topNav?: Array<{
+            label: string;
+            href: string;
+        }>;
+        [key: string]: unknown;
+    };
+    navigation: Array<{
+        section: string;
+        pages: Array<{
+            title: string;
+            id: string;
+            urlPath: string;
+            icon?: string;
+        }>;
+    }>;
+    currentPageId: string;
+    pageHtml?: string;
+    pageComponent?: React.ComponentType<{
+        components?: Record<string, React.ComponentType>;
+    }>;
+    mdxComponents?: Record<string, React.ComponentType>;
+    pageTitle: string;
+    pageDescription?: string;
+    headings: Array<{
+        depth: number;
+        text: string;
+        id: string;
+    }>;
+    onNavigate: (id: string) => void;
+    allPages: Array<{
+        id: string;
+        title: string;
+        description?: string;
+    }>;
+    versioning?: VersioningInfo;
+    currentVersion?: string;
+    i18n?: I18nInfo;
+    currentLocale?: string;
+    docContext?: Array<{
+        id: string;
+        title: string;
+        content: string;
+    }>;
+}
+declare function Shell({ config, navigation, currentPageId, pageHtml, pageComponent, mdxComponents, pageTitle, pageDescription, headings, onNavigate, allPages, versioning, currentVersion, i18n, currentLocale, docContext, }: ShellProps): react_jsx_runtime.JSX.Element;
+
+interface AiChatProps {
+    provider: "openai" | "anthropic" | "custom";
+    model?: string;
+    apiKey?: string;
+    context?: string;
+}
+declare function AiChat({ provider, model, apiKey, context }: AiChatProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+interface ThemePreset {
+    dark: ThemeTokens;
+    light: ThemeTokens;
+    fonts: {
+        heading: string;
+        body: string;
+        code: string;
+    };
+}
+declare const THEME_PRESETS: {
+    readonly amber: {
+        readonly dark: {
+            readonly bg: "#09090b";
+            readonly sf: "#111114";
+            readonly sfH: "#18181c";
+            readonly bd: "#1e1e24";
+            readonly tx: "#e4e4e7";
+            readonly tx2: "#a1a1aa";
+            readonly txM: "#919199";
+            readonly ac: "#e8a845";
+            readonly acD: "rgba(232,168,69,0.12)";
+            readonly acT: "#fbbf24";
+            readonly cdBg: "#0c0c0f";
+            readonly cdTx: "#c4c4cc";
+            readonly sbBg: "#0c0c0e";
+            readonly hdBg: "rgba(9,9,11,0.85)";
+        };
+        readonly light: {
+            readonly bg: "#fafaf9";
+            readonly sf: "#ffffff";
+            readonly sfH: "#f5f5f4";
+            readonly bd: "#e7e5e4";
+            readonly tx: "#1c1917";
+            readonly tx2: "#57534e";
+            readonly txM: "#706b66";
+            readonly ac: "#96640a";
+            readonly acD: "rgba(150,100,10,0.08)";
+            readonly acT: "#7a5208";
+            readonly cdBg: "#f5f3f0";
+            readonly cdTx: "#2c2520";
+            readonly sbBg: "#f5f5f3";
+            readonly hdBg: "rgba(250,250,249,0.85)";
+        };
+        readonly fonts: {
+            readonly heading: "Instrument Serif";
+            readonly body: "DM Sans";
+            readonly code: "JetBrains Mono";
+        };
+    };
+    readonly editorial: {
+        readonly dark: {
+            readonly bg: "#080c1f";
+            readonly sf: "#0e1333";
+            readonly sfH: "#141940";
+            readonly bd: "#1a2050";
+            readonly tx: "#e8e6f0";
+            readonly tx2: "#b5b1c8";
+            readonly txM: "#9490ae";
+            readonly ac: "#ff6b4a";
+            readonly acD: "rgba(255,107,74,0.1)";
+            readonly acT: "#ff8a70";
+            readonly cdBg: "#0a0e27";
+            readonly cdTx: "#b8b4cc";
+            readonly sbBg: "#0a0e27";
+            readonly hdBg: "rgba(8,12,31,0.9)";
+        };
+        readonly light: {
+            readonly bg: "#f6f4f0";
+            readonly sf: "#ffffff";
+            readonly sfH: "#eeece6";
+            readonly bd: "#ddd9d0";
+            readonly tx: "#1a1716";
+            readonly tx2: "#4a443e";
+            readonly txM: "#706960";
+            readonly ac: "#b83d22";
+            readonly acD: "rgba(184,61,34,0.07)";
+            readonly acT: "#9c3019";
+            readonly cdBg: "#edeae4";
+            readonly cdTx: "#3a3530";
+            readonly sbBg: "#f0ede8";
+            readonly hdBg: "rgba(246,244,240,0.92)";
+        };
+        readonly fonts: {
+            readonly heading: "Cormorant Garamond";
+            readonly body: "Bricolage Grotesque";
+            readonly code: "Fira Code";
+        };
+    };
+};
+type PresetName = keyof typeof THEME_PRESETS;
+
+export { AiChat, type AiChatProps, type PresetName, Shell, THEME_PRESETS, type ThemePreset, type ThemeTokens };

package/dist/index.js

@@ -0,0 +1,12 @@
+import {
+  AiChat,
+  Shell,
+  THEME_PRESETS,
+  entry_default
+} from "./chunk-MEP7P6A7.js";
+export {
+  AiChat,
+  entry_default as App,
+  Shell,
+  THEME_PRESETS
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tomehq/theme",
+  "version": "0.1.0",
+  "description": "Tome default theme and React app shell",
+  "type": "module",
+  "main": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./entry": "./src/entry.tsx"
+  },
+  "dependencies": {
+    "@tomehq/components": "0.1.0",
+    "@tomehq/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@docsearch/react": "^3.0.0",
+    "@docsearch/css": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@docsearch/react": {
+      "optional": true
+    },
+    "@docsearch/css": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vxcozy/tome.git",
+    "directory": "packages/theme"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components'",
+    "dev": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components' --watch",
+    "clean": "rm -rf dist"
+  }
+}

package/src/AiChat.test.tsx

@@ -0,0 +1,308 @@
+import React from "react";
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { AiChat } from "./AiChat.js";
+
+// ── jsdom matchMedia mock ─────────────────────────────────
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })),
+  });
+});
+
+// ── Shared helpers ───────────────────────────────────────
+const defaultProps = {
+  provider: "openai" as const,
+  model: "gpt-4o-mini",
+};
+
+function renderChat(overrides: Partial<React.ComponentProps<typeof AiChat>> = {}) {
+  return render(<AiChat {...defaultProps} {...overrides} />);
+}
+
+// ── Rendering ────────────────────────────────────────────
+
+describe("AiChat rendering", () => {
+  it("renders floating button when closed", () => {
+    renderChat();
+    expect(screen.getByTestId("ai-chat-button")).toBeInTheDocument();
+    expect(screen.queryByTestId("ai-chat-panel")).not.toBeInTheDocument();
+  });
+
+  it("opens chat panel on button click", () => {
+    renderChat();
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.getByTestId("ai-chat-panel")).toBeInTheDocument();
+    expect(screen.queryByTestId("ai-chat-button")).not.toBeInTheDocument();
+  });
+
+  it("shows input field when open", () => {
+    renderChat();
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.getByTestId("ai-chat-input")).toBeInTheDocument();
+  });
+
+  it("closes panel on close button click", () => {
+    renderChat();
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.getByTestId("ai-chat-panel")).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("ai-chat-close"));
+    expect(screen.queryByTestId("ai-chat-panel")).not.toBeInTheDocument();
+    expect(screen.getByTestId("ai-chat-button")).toBeInTheDocument();
+  });
+
+  it("shows 'Ask AI' branding in the header", () => {
+    renderChat();
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.getByText("Ask AI")).toBeInTheDocument();
+  });
+});
+
+// ── API Key ──────────────────────────────────────────────
+
+describe("AiChat API key handling", () => {
+  it("shows 'AI not configured' message when no key provided", () => {
+    renderChat({ apiKey: undefined });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.getByTestId("ai-chat-no-key")).toBeInTheDocument();
+    expect(screen.getByText("AI not configured")).toBeInTheDocument();
+  });
+
+  it("does not show 'Set API key' message when key is provided", () => {
+    renderChat({ apiKey: "test-key-123" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.queryByTestId("ai-chat-no-key")).not.toBeInTheDocument();
+  });
+
+  it("reads API key from window.__TOME_AI_KEY__ when prop is not set", () => {
+    (window as any).__TOME_AI_KEY__ = "window-key-456";
+    renderChat({ apiKey: undefined });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    expect(screen.queryByTestId("ai-chat-no-key")).not.toBeInTheDocument();
+    delete (window as any).__TOME_AI_KEY__;
+  });
+
+  it("disables input when no API key is available", () => {
+    renderChat({ apiKey: undefined });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+    const input = screen.getByTestId("ai-chat-input") as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+  });
+});
+
+// ── User input ───────────────────────────────────────────
+
+describe("AiChat user messages", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({
+        choices: [{ message: { content: "AI response here" } }],
+      }),
+    }) as any;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("renders user message when user submits text", async () => {
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Hello AI" } });
+    fireEvent.click(screen.getByTestId("ai-chat-send"));
+
+    expect(screen.getByText("Hello AI")).toBeInTheDocument();
+    expect(screen.getByTestId("ai-chat-message-user")).toBeInTheDocument();
+  });
+
+  it("shows loading indicator while waiting for response", async () => {
+    // Use a promise that we can control to keep loading state active
+    let resolveResponse!: (value: any) => void;
+    global.fetch = vi.fn().mockReturnValue(
+      new Promise((resolve) => { resolveResponse = resolve; }),
+    ) as any;
+
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Hello AI" } });
+    fireEvent.click(screen.getByTestId("ai-chat-send"));
+
+    expect(screen.getByTestId("ai-chat-loading")).toBeInTheDocument();
+    expect(screen.getByText("Thinking...")).toBeInTheDocument();
+
+    // Clean up
+    await act(async () => {
+      resolveResponse({
+        ok: true,
+        json: () => Promise.resolve({ choices: [{ message: { content: "Done" } }] }),
+      });
+    });
+  });
+
+  it("renders assistant response after API call", async () => {
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Hello AI" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("ai-chat-send"));
+    });
+
+    // Wait for the response to render
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByText("AI response here")).toBeInTheDocument();
+    expect(screen.getByTestId("ai-chat-message-assistant")).toBeInTheDocument();
+  });
+
+  it("submits on Enter key press", async () => {
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Question" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(screen.getByText("Question")).toBeInTheDocument();
+  });
+
+  it("clears input after submission", async () => {
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "Hello" } });
+    fireEvent.click(screen.getByTestId("ai-chat-send"));
+
+    expect(input.value).toBe("");
+  });
+
+  it("does not submit empty messages", () => {
+    renderChat({ apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    fireEvent.click(screen.getByTestId("ai-chat-send"));
+    expect(screen.queryByTestId("ai-chat-message-user")).not.toBeInTheDocument();
+  });
+
+  it("shows error when API call fails", async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 401,
+      text: () => Promise.resolve("Unauthorized"),
+    }) as any;
+
+    renderChat({ apiKey: "bad-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Test" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("ai-chat-send"));
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByTestId("ai-chat-error")).toBeInTheDocument();
+  });
+});
+
+// ── Provider handling ────────────────────────────────────
+
+describe("AiChat provider handling", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("calls OpenAI API for openai provider", async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({
+        choices: [{ message: { content: "OpenAI response" } }],
+      }),
+    }) as any;
+
+    renderChat({ provider: "openai", apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Hello" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("ai-chat-send"));
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      "https://api.openai.com/v1/chat/completions",
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({
+          "Authorization": "Bearer test-key",
+        }),
+      }),
+    );
+  });
+
+  it("calls Anthropic API for anthropic provider", async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({
+        content: [{ text: "Anthropic response" }],
+      }),
+    }) as any;
+
+    renderChat({ provider: "anthropic", apiKey: "test-key" });
+    fireEvent.click(screen.getByTestId("ai-chat-button"));
+
+    const input = screen.getByTestId("ai-chat-input");
+    fireEvent.change(input, { target: { value: "Hello" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("ai-chat-send"));
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      "https://api.anthropic.com/v1/messages",
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({
+          "x-api-key": "test-key",
+          "anthropic-version": "2023-06-01",
+        }),
+      }),
+    );
+  });
+});