@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/dist/lib/theme-runtime.js

@@ -0,0 +1,479 @@
+const COLOR_KEYS = [
+    "background",
+    "foreground",
+    "card",
+    "cardForeground",
+    "popover",
+    "popoverForeground",
+    "primary",
+    "primaryForeground",
+    "secondary",
+    "secondaryForeground",
+    "muted",
+    "mutedForeground",
+    "accent",
+    "accentForeground",
+    "destructive",
+    "destructiveForeground",
+    "border",
+    "input",
+    "ring",
+];
+const SIDEBAR_KEYS = [
+    "sidebar",
+    "sidebarForeground",
+    "sidebarPrimary",
+    "sidebarPrimaryForeground",
+    "sidebarAccent",
+    "sidebarAccentForeground",
+    "sidebarSelected",
+    "sidebarSelectedForeground",
+    "sidebarBorder",
+    "sidebarRing",
+];
+const STATUS_KEYS = [
+    "success",
+    "successForeground",
+    "warning",
+    "warningForeground",
+    "info",
+    "infoForeground",
+    "syntaxKey",
+    "syntaxString",
+    "syntaxNumber",
+    "syntaxBoolean",
+];
+const CHART_KEYS = [
+    "chart1",
+    "chart2",
+    "chart3",
+    "chart4",
+    "chart5",
+];
+const TYPOGRAPHY_KEYS = [
+    "bodyFont",
+    "headingFont",
+    "monoFont",
+];
+const RADIUS_KEYS = ["radius"];
+const APP_KEYS = [
+    "codeBlock",
+    "codeBlockForeground",
+    "workflowDiagramSurface",
+    "workflowDiagramLine",
+    "workflowDiagramText",
+    "workflowDiagramBorder",
+    "workflowDiagramCompletedStroke",
+    "workflowDiagramCompletedText",
+    "workflowDiagramActiveFill",
+    "workflowDiagramActiveStroke",
+    "workflowDiagramActiveText",
+    "workflowDiagramFailedFill",
+    "workflowDiagramFailedStroke",
+    "workflowDiagramFailedText",
+    "workflowDiagramSkippedFill",
+    "workflowDiagramSkippedStroke",
+    "workflowDiagramSkippedText",
+    "workflowDiagramGlow",
+    "workflowDiagramShell",
+];
+const BRANDING_KEYS = [
+    "appName",
+    "appTitle",
+    "logoUrl",
+    "darkLogoUrl",
+];
+function cleanObject(value, keys) {
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return undefined;
+    const next = {};
+    for (const key of keys) {
+        const raw = value[key];
+        if (typeof raw === "string" && raw.trim()) {
+            next[key] = raw.trim();
+        }
+    }
+    return Object.keys(next).length > 0 ? next : undefined;
+}
+function sanitizeThemeDefinition(value) {
+    if (!value || typeof value !== "object")
+        return {};
+    return {
+        light: cleanObject(value.light, COLOR_KEYS),
+        dark: cleanObject(value.dark, COLOR_KEYS),
+        sidebar: {
+            light: cleanObject(value.sidebar?.light, SIDEBAR_KEYS),
+            dark: cleanObject(value.sidebar?.dark, SIDEBAR_KEYS),
+        },
+        status: {
+            light: cleanObject(value.status?.light, STATUS_KEYS),
+            dark: cleanObject(value.status?.dark, STATUS_KEYS),
+        },
+        charts: {
+            light: cleanObject(value.charts?.light, CHART_KEYS),
+            dark: cleanObject(value.charts?.dark, CHART_KEYS),
+        },
+        typography: cleanObject(value.typography, TYPOGRAPHY_KEYS),
+        radius: cleanObject(value.radius, RADIUS_KEYS),
+        app: {
+            light: cleanObject(value.app?.light, APP_KEYS),
+            dark: cleanObject(value.app?.dark, APP_KEYS),
+        },
+        branding: cleanObject(value.branding, BRANDING_KEYS),
+    };
+}
+function mergePartial(base, patch) {
+    if (!base && !patch)
+        return undefined;
+    return { ...(base ?? {}), ...(patch ?? {}) };
+}
+export function mergeThemeDefinitions(...definitions) {
+    let current = {};
+    for (const raw of definitions) {
+        const next = sanitizeThemeDefinition(raw);
+        current = {
+            light: mergePartial(current.light, next.light),
+            dark: mergePartial(current.dark, next.dark),
+            sidebar: {
+                light: mergePartial(current.sidebar?.light, next.sidebar?.light),
+                dark: mergePartial(current.sidebar?.dark, next.sidebar?.dark),
+            },
+            status: {
+                light: mergePartial(current.status?.light, next.status?.light),
+                dark: mergePartial(current.status?.dark, next.status?.dark),
+            },
+            charts: {
+                light: mergePartial(current.charts?.light, next.charts?.light),
+                dark: mergePartial(current.charts?.dark, next.charts?.dark),
+            },
+            typography: mergePartial(current.typography, next.typography),
+            radius: mergePartial(current.radius, next.radius),
+            app: {
+                light: mergePartial(current.app?.light, next.app?.light),
+                dark: mergePartial(current.app?.dark, next.app?.dark),
+            },
+            branding: mergePartial(current.branding, next.branding),
+        };
+    }
+    return current;
+}
+function toCssVars(colors, sidebar, status, charts, typography, radius, app) {
+    return {
+        ["--background"]: colors.background,
+        ["--foreground"]: colors.foreground,
+        ["--card"]: colors.card,
+        ["--card-foreground"]: colors.cardForeground,
+        ["--popover"]: colors.popover,
+        ["--popover-foreground"]: colors.popoverForeground,
+        ["--primary"]: colors.primary,
+        ["--primary-foreground"]: colors.primaryForeground,
+        ["--secondary"]: colors.secondary,
+        ["--secondary-foreground"]: colors.secondaryForeground,
+        ["--muted"]: colors.muted,
+        ["--muted-foreground"]: colors.mutedForeground,
+        ["--accent"]: colors.accent,
+        ["--accent-foreground"]: colors.accentForeground,
+        ["--destructive"]: colors.destructive,
+        ["--destructive-foreground"]: colors.destructiveForeground,
+        ["--border"]: colors.border,
+        ["--input"]: colors.input,
+        ["--ring"]: colors.ring,
+        ["--sidebar"]: sidebar.sidebar,
+        ["--sidebar-foreground"]: sidebar.sidebarForeground,
+        ["--sidebar-primary"]: sidebar.sidebarPrimary,
+        ["--sidebar-primary-foreground"]: sidebar.sidebarPrimaryForeground,
+        ["--sidebar-accent"]: sidebar.sidebarAccent,
+        ["--sidebar-accent-foreground"]: sidebar.sidebarAccentForeground,
+        ["--sidebar-selected"]: sidebar.sidebarSelected,
+        ["--sidebar-selected-foreground"]: sidebar.sidebarSelectedForeground,
+        ["--sidebar-border"]: sidebar.sidebarBorder,
+        ["--sidebar-ring"]: sidebar.sidebarRing,
+        ["--success"]: status.success,
+        ["--success-foreground"]: status.successForeground,
+        ["--warning"]: status.warning,
+        ["--warning-foreground"]: status.warningForeground,
+        ["--info"]: status.info,
+        ["--info-foreground"]: status.infoForeground,
+        ["--syntax-key"]: status.syntaxKey,
+        ["--syntax-string"]: status.syntaxString,
+        ["--syntax-number"]: status.syntaxNumber,
+        ["--syntax-boolean"]: status.syntaxBoolean,
+        ["--chart-1"]: charts.chart1,
+        ["--chart-2"]: charts.chart2,
+        ["--chart-3"]: charts.chart3,
+        ["--chart-4"]: charts.chart4,
+        ["--chart-5"]: charts.chart5,
+        ["--font-body"]: typography.bodyFont,
+        ["--font-heading"]: typography.headingFont,
+        ["--font-mono"]: typography.monoFont,
+        ["--radius"]: radius.radius,
+        ["--code-block"]: app.codeBlock,
+        ["--code-block-foreground"]: app.codeBlockForeground,
+        ["--workflow-diagram-surface"]: app.workflowDiagramSurface,
+        ["--workflow-diagram-line"]: app.workflowDiagramLine,
+        ["--workflow-diagram-text"]: app.workflowDiagramText,
+        ["--workflow-diagram-border"]: app.workflowDiagramBorder,
+        ["--workflow-diagram-completed-stroke"]: app.workflowDiagramCompletedStroke,
+        ["--workflow-diagram-completed-text"]: app.workflowDiagramCompletedText,
+        ["--workflow-diagram-active-fill"]: app.workflowDiagramActiveFill,
+        ["--workflow-diagram-active-stroke"]: app.workflowDiagramActiveStroke,
+        ["--workflow-diagram-active-text"]: app.workflowDiagramActiveText,
+        ["--workflow-diagram-failed-fill"]: app.workflowDiagramFailedFill,
+        ["--workflow-diagram-failed-stroke"]: app.workflowDiagramFailedStroke,
+        ["--workflow-diagram-failed-text"]: app.workflowDiagramFailedText,
+        ["--workflow-diagram-skipped-fill"]: app.workflowDiagramSkippedFill,
+        ["--workflow-diagram-skipped-stroke"]: app.workflowDiagramSkippedStroke,
+        ["--workflow-diagram-skipped-text"]: app.workflowDiagramSkippedText,
+        ["--workflow-diagram-glow"]: app.workflowDiagramGlow,
+        ["--workflow-diagram-shell"]: app.workflowDiagramShell,
+    };
+}
+export function getEffectiveThemeMode(mode) {
+    if (mode === "light" || mode === "dark")
+        return mode;
+    if (typeof window !== "undefined") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+}
+function defaultSidebar(colors) {
+    return {
+        sidebar: colors.secondary,
+        sidebarForeground: colors.foreground,
+        sidebarPrimary: colors.primary,
+        sidebarPrimaryForeground: colors.primaryForeground,
+        sidebarAccent: colors.accent,
+        sidebarAccentForeground: colors.accentForeground,
+        sidebarSelected: colors.muted,
+        sidebarSelectedForeground: colors.foreground,
+        sidebarBorder: colors.border,
+        sidebarRing: colors.ring,
+    };
+}
+function defaultStatus(mode, colors) {
+    if (mode === "dark") {
+        return {
+            success: "oklch(0.72 0.14 155)",
+            successForeground: "oklch(0.16 0.01 155)",
+            warning: "oklch(0.72 0.13 84)",
+            warningForeground: "oklch(0.2 0.03 84)",
+            info: colors.primary,
+            infoForeground: colors.primaryForeground,
+            syntaxKey: "oklch(0.8 0.12 286)",
+            syntaxString: "oklch(0.82 0.12 155)",
+            syntaxNumber: "oklch(0.78 0.14 245)",
+            syntaxBoolean: "oklch(0.79 0.15 84)",
+        };
+    }
+    return {
+        success: "oklch(0.58 0.16 155)",
+        successForeground: "oklch(1 0 0)",
+        warning: "oklch(0.72 0.16 84)",
+        warningForeground: "oklch(0.3 0.05 84)",
+        info: colors.primary,
+        infoForeground: colors.primaryForeground,
+        syntaxKey: "oklch(0.48 0.17 286)",
+        syntaxString: "oklch(0.5 0.15 155)",
+        syntaxNumber: "oklch(0.52 0.16 245)",
+        syntaxBoolean: "oklch(0.58 0.15 84)",
+    };
+}
+function defaultCharts(mode) {
+    if (mode === "dark") {
+        return {
+            chart1: "oklch(0.72 0.17 286)",
+            chart2: "oklch(0.74 0.13 240)",
+            chart3: "oklch(0.76 0.12 195)",
+            chart4: "oklch(0.79 0.15 84)",
+            chart5: "oklch(0.74 0.14 20)",
+        };
+    }
+    return {
+        chart1: "oklch(0.55 0.19 286)",
+        chart2: "oklch(0.56 0.15 240)",
+        chart3: "oklch(0.58 0.13 195)",
+        chart4: "oklch(0.7 0.16 84)",
+        chart5: "oklch(0.63 0.17 20)",
+    };
+}
+function defaultApp(mode, colors) {
+    if (mode === "dark") {
+        return {
+            codeBlock: "oklch(0.16 0.01 286)",
+            codeBlockForeground: "oklch(0.92 0.01 286)",
+            workflowDiagramSurface: "color-mix(in srgb, var(--background) 84%, var(--primary) 16%)",
+            workflowDiagramLine: "color-mix(in srgb, var(--primary) 90%, white 10%)",
+            workflowDiagramText: "oklch(0.95 0.01 286)",
+            workflowDiagramBorder: "color-mix(in srgb, var(--primary) 34%, var(--border) 66%)",
+            workflowDiagramCompletedStroke: "color-mix(in srgb, var(--success) 82%, var(--primary) 18%)",
+            workflowDiagramCompletedText: "color-mix(in srgb, var(--foreground) 76%, var(--success) 24%)",
+            workflowDiagramActiveFill: "color-mix(in srgb, var(--background) 76%, var(--primary) 24%)",
+            workflowDiagramActiveStroke: "color-mix(in srgb, var(--primary) 92%, white 8%)",
+            workflowDiagramActiveText: "oklch(0.95 0.01 286)",
+            workflowDiagramFailedFill: "color-mix(in srgb, var(--destructive) 22%, var(--background) 78%)",
+            workflowDiagramFailedStroke: colors.destructive,
+            workflowDiagramFailedText: "color-mix(in srgb, var(--destructive) 58%, white 42%)",
+            workflowDiagramSkippedFill: "color-mix(in srgb, var(--muted) 80%, var(--background) 20%)",
+            workflowDiagramSkippedStroke: "color-mix(in srgb, var(--muted-foreground) 36%, transparent)",
+            workflowDiagramSkippedText: colors.mutedForeground,
+            workflowDiagramGlow: "rgba(182, 148, 255, 0.18)",
+            workflowDiagramShell: "rgba(182, 148, 255, 0.06)",
+        };
+    }
+    return {
+        codeBlock: "oklch(0.2 0 0)",
+        codeBlockForeground: "oklch(0.93 0 0)",
+        workflowDiagramSurface: "color-mix(in srgb, var(--background) 95%, var(--primary) 5%)",
+        workflowDiagramLine: "color-mix(in srgb, var(--primary) 84%, var(--foreground) 16%)",
+        workflowDiagramText: "color-mix(in srgb, var(--foreground) 88%, var(--primary) 12%)",
+        workflowDiagramBorder: "color-mix(in srgb, var(--primary) 18%, var(--border) 82%)",
+        workflowDiagramCompletedStroke: "color-mix(in srgb, var(--success) 78%, var(--primary) 22%)",
+        workflowDiagramCompletedText: "color-mix(in srgb, var(--foreground) 82%, var(--success) 18%)",
+        workflowDiagramActiveFill: "color-mix(in srgb, var(--background) 90%, var(--primary) 10%)",
+        workflowDiagramActiveStroke: colors.primary,
+        workflowDiagramActiveText: "color-mix(in srgb, var(--foreground) 86%, var(--primary) 14%)",
+        workflowDiagramFailedFill: "color-mix(in srgb, var(--destructive) 8%, var(--background) 92%)",
+        workflowDiagramFailedStroke: colors.destructive,
+        workflowDiagramFailedText: "color-mix(in srgb, var(--destructive) 62%, var(--foreground) 38%)",
+        workflowDiagramSkippedFill: "color-mix(in srgb, var(--muted) 65%, var(--background) 35%)",
+        workflowDiagramSkippedStroke: "color-mix(in srgb, var(--muted-foreground) 22%, transparent)",
+        workflowDiagramSkippedText: colors.mutedForeground,
+        workflowDiagramGlow: "rgba(124, 58, 237, 0.18)",
+        workflowDiagramShell: "rgba(124, 58, 237, 0.04)",
+    };
+}
+export const FOUNDRY_VIOLET_THEME = {
+    light: {
+        background: "oklch(100% 0 0)",
+        foreground: "oklch(21% 0.006 290)",
+        card: "oklch(100% 0 0)",
+        cardForeground: "oklch(21% 0.006 290)",
+        popover: "oklch(100% 0 0)",
+        popoverForeground: "oklch(21% 0.006 290)",
+        primary: "oklch(43% 0.24 286)",
+        primaryForeground: "oklch(100% 0 0)",
+        secondary: "oklch(96% 0.015 290)",
+        secondaryForeground: "oklch(35% 0.15 290)",
+        muted: "oklch(98% 0 0)",
+        mutedForeground: "oklch(45% 0.01 290)",
+        accent: "oklch(96% 0.02 290)",
+        accentForeground: "oklch(30% 0.1 290)",
+        destructive: "oklch(55% 0.18 15)",
+        destructiveForeground: "oklch(100% 0 0)",
+        border: "oklch(92% 0.008 290)",
+        input: "oklch(92% 0.008 290)",
+        ring: "oklch(43% 0.24 286)",
+    },
+    sidebar: {
+        light: {
+            sidebar: "oklch(99.2% 0 0)",
+            sidebarForeground: "oklch(24% 0.004 286)",
+            sidebarPrimary: "oklch(43% 0.24 286)",
+            sidebarPrimaryForeground: "oklch(100% 0 0)",
+            sidebarAccent: "color-mix(in srgb, var(--primary) 4%, var(--background) 96%)",
+            sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 92%, var(--primary) 8%)",
+            sidebarSelected: "var(--muted)",
+            sidebarSelectedForeground: "var(--foreground)",
+            sidebarBorder: "color-mix(in srgb, var(--border) 96%, var(--foreground) 4%)",
+            sidebarRing: "oklch(43% 0.24 286)",
+        },
+        dark: {
+            sidebar: "oklch(0.18 0.004 286)",
+            sidebarForeground: "oklch(0.94 0.004 286)",
+            sidebarPrimary: "oklch(0.72 0.18 286)",
+            sidebarPrimaryForeground: "oklch(0.98 0 0)",
+            sidebarAccent: "color-mix(in srgb, var(--primary) 8%, var(--background) 92%)",
+            sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 90%, white 10%)",
+            sidebarSelected: "color-mix(in srgb, var(--muted) 78%, var(--background) 22%)",
+            sidebarSelectedForeground: "var(--foreground)",
+            sidebarBorder: "color-mix(in srgb, var(--border) 90%, white 10%)",
+            sidebarRing: "oklch(0.72 0.18 286)",
+        },
+    },
+    dark: {
+        background: "oklch(0.145 0.008 286)",
+        foreground: "oklch(0.95 0.01 286)",
+        card: "oklch(0.19 0.012 286)",
+        cardForeground: "oklch(0.95 0.01 286)",
+        popover: "oklch(0.19 0.012 286)",
+        popoverForeground: "oklch(0.95 0.01 286)",
+        primary: "oklch(0.72 0.18 286)",
+        primaryForeground: "oklch(0.98 0 0)",
+        secondary: "oklch(0.24 0.02 286)",
+        secondaryForeground: "oklch(0.92 0.01 286)",
+        muted: "oklch(0.22 0.015 286)",
+        mutedForeground: "oklch(0.65 0.02 286)",
+        accent: "oklch(0.26 0.025 286)",
+        accentForeground: "oklch(0.92 0.01 286)",
+        destructive: "oklch(0.704 0.191 22.216)",
+        destructiveForeground: "oklch(0.985 0 0)",
+        border: "oklch(1 0.01 286 / 12%)",
+        input: "oklch(1 0.01 286 / 15%)",
+        ring: "oklch(0.72 0.18 286)",
+    },
+    typography: {
+        bodyFont: "\"Segoe UI\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+        headingFont: "\"Segoe UI\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+        monoFont: "\"SFMono-Regular\", \"Cascadia Code\", \"JetBrains Mono\", ui-monospace, monospace",
+    },
+    radius: {
+        radius: "0.875rem",
+    },
+    branding: {
+        appName: "Foundry UI",
+        appTitle: "Foundry UI",
+    },
+};
+export function getThemePreset(name) {
+    if (!name || name === "foundry-violet")
+        return FOUNDRY_VIOLET_THEME;
+    return FOUNDRY_VIOLET_THEME;
+}
+export function resolveThemeRuntime(layers, mode) {
+    const effectiveMode = getEffectiveThemeMode(mode);
+    const basePreset = layers.find((layer) => layer.basePreset && layer.basePreset.trim())?.basePreset ??
+        "foundry-violet";
+    const definitions = [
+        getThemePreset(basePreset),
+        ...layers.map((layer) => layer.definition),
+    ];
+    const definition = mergeThemeDefinitions(...definitions);
+    const colors = {
+        ...(effectiveMode === "dark" ? definition.dark : definition.light),
+    };
+    const sidebar = {
+        ...defaultSidebar(colors),
+        ...(effectiveMode === "dark" ? definition.sidebar?.dark : definition.sidebar?.light),
+    };
+    const status = {
+        ...defaultStatus(effectiveMode, colors),
+        ...(effectiveMode === "dark" ? definition.status?.dark : definition.status?.light),
+    };
+    const charts = {
+        ...defaultCharts(effectiveMode),
+        ...(effectiveMode === "dark" ? definition.charts?.dark : definition.charts?.light),
+    };
+    const typography = {
+        ...FOUNDRY_VIOLET_THEME.typography,
+        ...definition.typography,
+    };
+    const radius = {
+        ...FOUNDRY_VIOLET_THEME.radius,
+        ...definition.radius,
+    };
+    const app = {
+        ...defaultApp(effectiveMode, colors),
+        ...(effectiveMode === "dark" ? definition.app?.dark : definition.app?.light),
+    };
+    const branding = {
+        ...FOUNDRY_VIOLET_THEME.branding,
+        ...definition.branding,
+    };
+    return {
+        mode: effectiveMode,
+        definition,
+        branding,
+        variables: toCssVars(colors, sidebar, status, charts, typography, radius, app),
+        sources: layers,
+    };
+}

package/dist/lib/theme-store.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme Store -- Zustand store for dark/light/system theme preference.
+ *
+ * Persists the user's choice to localStorage and applies the `.dark` class
+ * on `<html>`. In "system" mode it tracks the OS preference via matchMedia.
+ */
+export type ThemeMode = "light" | "dark" | "system";
+interface ThemeState {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    /** Cycle through light -> dark -> system. */
+    cycle: () => void;
+}
+export declare const useThemeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeState>>;
+export {};

package/dist/lib/theme-store.js

@@ -0,0 +1,53 @@
+/**
+ * Theme Store -- Zustand store for dark/light/system theme preference.
+ *
+ * Persists the user's choice to localStorage and applies the `.dark` class
+ * on `<html>`. In "system" mode it tracks the OS preference via matchMedia.
+ */
+import { create } from "zustand";
+const STORAGE_KEY = "theme";
+const CYCLE_ORDER = ["light", "dark", "system"];
+function getStoredMode() {
+    if (typeof window === "undefined")
+        return "system";
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system")
+        return stored;
+    return "system";
+}
+function prefersDark() {
+    if (typeof window === "undefined")
+        return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyTheme(mode) {
+    if (typeof document === "undefined")
+        return;
+    const isDark = mode === "dark" || (mode === "system" && prefersDark());
+    document.documentElement.classList.toggle("dark", isDark);
+}
+export const useThemeStore = create((set, get) => {
+    const initial = getStoredMode();
+    applyTheme(initial);
+    // Listen for OS preference changes when in system mode
+    if (typeof window !== "undefined") {
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+            if (get().mode === "system")
+                applyTheme("system");
+        });
+    }
+    return {
+        mode: initial,
+        setMode: (mode) => {
+            localStorage.setItem(STORAGE_KEY, mode);
+            applyTheme(mode);
+            set({ mode });
+        },
+        cycle: () => {
+            const current = get().mode;
+            const idx = CYCLE_ORDER.indexOf(current);
+            const next = CYCLE_ORDER[(idx + 1) % CYCLE_ORDER.length];
+            get().setMode(next);
+        },
+    };
+});

package/dist/lib/tool-panel-store.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Tool Panel State Management
+ *
+ * Zustand store for managing the tool panel (flyout side panel).
+ * Allows both UI components and agent tools to control the panel.
+ */
+import type { LazyExoticComponent, ComponentType } from "react";
+export interface PdfHighlightRef {
+    pageNumber: number;
+    polygon: number[];
+}
+export interface ToolPanelContent {
+    title: string;
+    content: string;
+    type: "markdown" | "text" | "page" | "pdf";
+    /** PDF highlights for citation overlays (only when type === "pdf") */
+    pdfHighlights?: PdfHighlightRef[];
+    /** Initial page to scroll to (only when type === "pdf") */
+    initialPage?: number;
+    /** SPACES entity ID — enables pin and navigate actions in panel header */
+    entityId?: string;
+}
+/** Pluggable content renderer for the tool panel — registered by feature modules. */
+export interface PanelRendererEntry {
+    /** Check if this renderer handles the given content */
+    match: (content: ToolPanelContent) => boolean;
+    /** Lazy component to render. Receives content as prop. */
+    component: LazyExoticComponent<ComponentType<{
+        content: ToolPanelContent;
+    }>>;
+}
+interface ToolPanelState {
+    isOpen: boolean;
+    content: ToolPanelContent | null;
+    panelWidth: number;
+    useOverlay: boolean;
+    isFullscreen: boolean;
+    renderers: PanelRendererEntry[];
+    openPanel: (content: ToolPanelContent) => void;
+    closePanel: () => void;
+    setContent: (content: ToolPanelContent) => void;
+    updateLayout: () => void;
+    toggleFullscreen: () => void;
+    /** Register a custom content renderer (e.g., PDF viewer, entity pages). */
+    registerRenderer: (entry: PanelRendererEntry) => void;
+}
+export declare const useToolPanelStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ToolPanelState>>;
+export {};

package/dist/lib/tool-panel-store.js

@@ -0,0 +1,69 @@
+/**
+ * Tool Panel State Management
+ *
+ * Zustand store for managing the tool panel (flyout side panel).
+ * Allows both UI components and agent tools to control the panel.
+ */
+import { create } from "zustand";
+const SIDE_BY_SIDE_BREAKPOINT = 1280;
+const getPanelWidth = () => {
+    if (typeof window === "undefined")
+        return 800;
+    const screenWidth = window.innerWidth;
+    if (screenWidth < SIDE_BY_SIDE_BREAKPOINT)
+        return screenWidth;
+    return Math.min(1000, Math.max(600, screenWidth * 0.5));
+};
+const shouldUseOverlay = () => {
+    if (typeof window === "undefined")
+        return true;
+    return window.innerWidth < SIDE_BY_SIDE_BREAKPOINT;
+};
+export const useToolPanelStore = create((set, get) => ({
+    isOpen: false,
+    content: null,
+    panelWidth: getPanelWidth(),
+    useOverlay: shouldUseOverlay(),
+    isFullscreen: false,
+    renderers: [],
+    openPanel: (content) => set({ isOpen: true, content }),
+    registerRenderer: (entry) => set((state) => ({ renderers: [...state.renderers, entry] })),
+    closePanel: () => set({ isOpen: false, isFullscreen: false }),
+    setContent: (content) => set({ content }),
+    updateLayout: () => {
+        const { isFullscreen } = get();
+        if (!isFullscreen) {
+            set({
+                panelWidth: getPanelWidth(),
+                useOverlay: shouldUseOverlay(),
+            });
+        }
+    },
+    toggleFullscreen: () => {
+        const { isFullscreen } = get();
+        if (isFullscreen) {
+            set({
+                isFullscreen: false,
+                panelWidth: getPanelWidth(),
+                useOverlay: shouldUseOverlay(),
+            });
+        }
+        else {
+            set({
+                isFullscreen: true,
+                panelWidth: typeof window !== "undefined" ? window.innerWidth : 1200,
+                useOverlay: true,
+            });
+        }
+    },
+}));
+// Debounced resize listener
+if (typeof window !== "undefined") {
+    let timeout;
+    window.addEventListener("resize", () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            useToolPanelStore.getState().updateLayout();
+        }, 100);
+    });
+}

package/dist/lib/use-new-conversation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared hook for starting a new conversation.
+ * Used by ChatHeader and Sidebar to keep behavior in sync.
+ */
+export declare function useNewConversation(options?: {
+    navigateToChat?: boolean;
+    preserveNavigation?: boolean;
+}): () => void;