@vendoai/vendo 0.4.0

package/dist/cli/playground/app/scenarios.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The scenario registry: each entry is one linkable URL (`#<id>`) mounting a
+ * REAL chrome surface against scripted data. The nav renders from this list;
+ * the harness (main.tsx) supplies the provider, fake client, scripted
+ * transport, and the auto-sent opening turn.
+ */
+import type { DirectorScript } from "@vendoai/ui";
+import { type ReactElement } from "react";
+import { type PlaygroundFixtures } from "./fixtures.js";
+export interface PlaygroundScenario {
+    id: string;
+    group: "Overlay" | "Thread" | "Approvals" | "Activities" | "Slot" | "Page" | "Mobile";
+    title: string;
+    description: string;
+    /** Scripted turns this scenario's sends play (ScriptedTransport). */
+    script?: DirectorScript;
+    /** ScriptedTransport pacing multiplier (1 = authored pacing). */
+    speed?: number;
+    /** The opening user turn the harness auto-sends into the composer. */
+    autoSend?: string;
+    /** Wire fixture override; defaults to the shared populated set. */
+    fixtures?: () => PlaygroundFixtures;
+    render(): ReactElement;
+}
+export declare const scenarios: PlaygroundScenario[];

package/dist/cli/playground/app/scenarios.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VendoActivities, VendoOverlay, VendoPage, VendoSlot, VendoThread } from "@vendoai/ui/chrome";
+import { useMemo } from "react";
+import { approvalScript, brokenViewPayload, connectScript, emptyActivitiesFixtures, renewalsViewPayload, streamingScript, viewScript, } from "./fixtures.js";
+/** Stand-in for the host's own markup: the slot's fallback/exit frame. */
+function HostOriginalCard() {
+    return (_jsxs("div", { style: {
+            border: "1px solid #e3e0da",
+            borderRadius: 12,
+            padding: "18px 20px",
+            background: "#fffdf9",
+            fontFamily: "Inter, system-ui, sans-serif",
+        }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 650, color: "#14151a", marginBottom: 6 }, children: "Quarterly summary" }), _jsx("div", { style: { fontSize: 12.5, color: "#6b6c72", lineHeight: 1.5 }, children: "This is the host product\u2019s original component. When a generated view cannot render, Vendo falls back to exactly this markup \u2014 the host surface is never sacrificed." })] }));
+}
+/** The phone-viewport iframe. Its src is fixed at mount (carrying the theme
+ * the page loaded with); later theme edits stream in over postMessage from the
+ * harness, so slider scrubbing never reloads the frame. */
+function PhoneEmbed() {
+    const src = useMemo(() => {
+        const params = new URLSearchParams(window.location.search);
+        params.set("embed", "1");
+        return `/?${params.toString()}#overlay-open`;
+    }, []);
+    return (_jsx("iframe", { title: "Vendo playground \u2014 phone viewport", src: src, style: { width: "100%", height: "100%", border: "none" } }));
+}
+function ThreadPane() {
+    return (_jsx("div", { style: { height: "min(680px, 78vh)", display: "flex", flexDirection: "column" }, children: _jsx(VendoThread, { greeting: "What can I help you build?", suggestions: ["Which renewals are at risk?", "Build me a renewals view", "Post the digest to #renewals"] }) }));
+}
+export const scenarios = [
+    {
+        id: "overlay-launcher",
+        group: "Overlay",
+        title: "Closed, with launcher",
+        description: "The default drop-in: a brand-styled launcher pill in the corner. Click it — the overlay opens on a fresh conversation.",
+        script: viewScript(),
+        render: () => _jsx(VendoOverlay, {}),
+    },
+    {
+        id: "overlay-open",
+        group: "Overlay",
+        title: "Open, mid-conversation",
+        description: "The overlay mid-build: tool beats, then a generated view lands inline and the turn wraps up.",
+        script: viewScript(),
+        autoSend: "Build me a view of my upcoming renewals.",
+        render: () => _jsx(VendoOverlay, { defaultOpen: true }),
+    },
+    {
+        id: "overlay-streaming",
+        group: "Overlay",
+        title: "Streaming turn",
+        description: "A long answer streaming into the overlay at authored pacing — the state you see while the agent is talking.",
+        script: streamingScript(),
+        autoSend: "Where do my renewals stand this month?",
+        render: () => _jsx(VendoOverlay, { defaultOpen: true }),
+    },
+    {
+        id: "thread-streaming",
+        group: "Thread",
+        title: "Streaming text",
+        description: "The bare thread surface while a reply streams: tool chip, live text, stop affordance.",
+        script: streamingScript(),
+        autoSend: "Where do my renewals stand this month?",
+        render: () => _jsx(ThreadPane, {}),
+    },
+    {
+        id: "thread-view",
+        group: "Thread",
+        title: "Generated view arriving",
+        description: "A build turn: the agent reads host data, then a vendo-genui view streams into the transcript and finishes.",
+        script: viewScript(),
+        autoSend: "Build me a view of my upcoming renewals.",
+        render: () => _jsx(ThreadPane, {}),
+    },
+    {
+        id: "thread-connect",
+        group: "Thread",
+        title: "Connect card",
+        description: "A connector call that needs the user's own account first: the turn ends with an inline connect card (04-actions §3).",
+        script: connectScript(),
+        autoSend: "Post this week's renewals digest to #renewals.",
+        render: () => _jsx(ThreadPane, {}),
+    },
+    {
+        id: "approval-flow",
+        group: "Approvals",
+        title: "Pending → approved → resumed",
+        description: "A write action parks the turn on an in-thread approval card. Approve it and the SAME turn resumes: the tool runs and the agent confirms.",
+        script: approvalScript(),
+        autoSend: "Give my team a heads-up about the at-risk renewals.",
+        render: () => _jsx(ThreadPane, {}),
+    },
+    {
+        id: "activities",
+        group: "Activities",
+        title: "Approvals queue + activity feed",
+        description: "The shelf's VendoActivities piece: pending approvals as actionable cards on top, the humanized recent-activity feed below (ui-usage-dx §2).",
+        render: () => _jsx(VendoActivities, { pollMs: 0 }),
+    },
+    {
+        id: "activities-empty",
+        group: "Activities",
+        title: "Empty state",
+        description: "The same piece before the agent has done anything: a quiet one-liner instead of an invisible component — hosts place this in their own pages.",
+        fixtures: emptyActivitiesFixtures,
+        render: () => _jsx(VendoActivities, { pollMs: 0 }),
+    },
+    {
+        id: "slot-empty",
+        group: "Slot",
+        title: "Empty ghost",
+        description: "A VendoSlot with nothing pinned: the ghost skeleton with a real “Design a view” CTA.",
+        render: () => _jsx(VendoSlot, { id: "playground-empty" }),
+    },
+    {
+        id: "slot-filled",
+        group: "Slot",
+        title: "Filled with a pinned view",
+        description: "The same slot holding a pinned generated view — the user's own “Renewals radar” mounted in the host page.",
+        render: () => (_jsx(VendoSlot, { id: "playground-filled", pin: { payload: renewalsViewPayload() }, children: _jsx(HostOriginalCard, {}) })),
+    },
+    {
+        id: "slot-broken",
+        group: "Slot",
+        title: "Broken view → host fallback",
+        description: "A pinned view that cannot render. The error boundary keeps the host's original component visible — never a blank hole (06-apps §8).",
+        render: () => (_jsx(VendoSlot, { id: "playground-broken", pin: { payload: brokenViewPayload() }, children: _jsx(HostOriginalCard, {}) })),
+    },
+    {
+        id: "page",
+        group: "Page",
+        title: "Workspace console",
+        description: "The full VendoPage: conversations with history, the waiting-on-you approval strip, apps, automations, accounts, and activity.",
+        script: viewScript(),
+        render: () => _jsx(VendoPage, {}),
+    },
+    {
+        id: "mobile",
+        group: "Mobile",
+        title: "Phone viewport",
+        description: "The overlay's Intercom-style full-bleed takeover at a phone viewport (390×760), embedded live below.",
+        script: viewScript(),
+        render: () => (_jsx("div", { style: { display: "flex", justifyContent: "center", padding: "12px 0" }, children: _jsx("div", { style: {
+                    width: 390,
+                    height: 760,
+                    border: "10px solid #14151a",
+                    borderRadius: 34,
+                    overflow: "hidden",
+                    boxShadow: "0 18px 50px rgba(20, 21, 26, 0.25)",
+                    background: "#fff",
+                }, children: _jsx(PhoneEmbed, {}) }) })),
+    },
+];

package/dist/cli/playground/app/theme-editor.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The playground's theme editor: a floating card top-right (Yousef's pick C)
+ * that collapses to a "Theme" pill, and a grabber-handled bottom sheet at
+ * phone widths. Every VendoTheme token is editable live; state lives in
+ * main.tsx so the whole page (and the embed iframe) re-themes together.
+ */
+import type { VendoTheme } from "@vendoai/core";
+export declare function ThemeEditor({ theme, onChange }: {
+    theme: VendoTheme;
+    onChange(next: VendoTheme): void;
+}): import("react").JSX.Element;
+/** Keep the page's on-demand Google Fonts <link> in sync with the theme. */
+export declare function useGoogleFont(fontFamily: string): void;

package/dist/cli/playground/app/theme-editor.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { curatedFonts, fontStack, googleFontHref, primaryFontFamily, themeJson, themePresets, } from "./theme-state.js";
+const EDITOR_CSS = `
+  /* Above the chrome's own overlay/takeover layers (they top out at
+     2147483100) — the editor is harness tooling and must stay reachable
+     while the overlay scenario is open. */
+  .te-card, .te-pill { position: fixed; top: 16px; right: 16px; z-index: 2147483200; font-family: Inter, system-ui, sans-serif; }
+  .te-card { width: 302px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #faf6ee; border: 1px solid #e3ddd2; border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 21, 26, 0.18); transform-origin: top right; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .te-card[data-closed="true"] { transform: scale(0.6) translateY(-8px); opacity: 0; pointer-events: none; }
+  .te-pill { display: inline-flex; align-items: center; gap: 7px; background: #14151a; color: #fffdf9; border: none; border-radius: 999px; font: 600 12.5px Inter, sans-serif; padding: 9px 15px; cursor: pointer; box-shadow: 0 10px 26px rgba(20, 21, 26, 0.25); opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .te-pill[data-shown="true"] { opacity: 1; pointer-events: auto; }
+  .te-dot { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(#e7683c, #f5c644, #55a06f, #2f5af5, #7c6cff, #e7683c); border: 1px solid rgba(255, 255, 255, 0.4); }
+  .te-grab { display: none; }
+  .te-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid #e3ddd2; flex-shrink: 0; }
+  .te-head b { font-size: 12.5px; color: #14151a; }
+  .te-head small { display: block; font-weight: 500; font-size: 10.5px; color: #8a8b92; margin-top: 2px; }
+  .te-x { border: none; background: none; color: #8a8b92; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
+  .te-x:hover { background: #f0e9dc; color: #14151a; }
+  .te-body { overflow-y: auto; padding: 10px 14px 12px; font-size: 12.5px; color: #14151a; }
+  .te-sec { margin-bottom: 14px; }
+  .te-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8b92; margin-bottom: 7px; }
+  .te-presets { display: flex; flex-wrap: wrap; gap: 6px; }
+  .te-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3ddd2; background: #fffdf9; border-radius: 999px; padding: 4px 10px 4px 5px; font: 600 11.5px Inter, sans-serif; cursor: pointer; color: #14151a; }
+  .te-chip .te-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
+  .te-chip[aria-pressed="true"] { border-color: #14151a; box-shadow: inset 0 0 0 1px #14151a; }
+  .te-crow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
+  .te-crow input[type="color"] { width: 24px; height: 24px; border: 1px solid #e3ddd2; border-radius: 7px; padding: 1px; background: #fffdf9; cursor: pointer; flex-shrink: 0; }
+  .te-crow span { flex: 1; font-weight: 550; font-size: 11.5px; }
+  .te-crow code { font: 500 10.5px ui-monospace, monospace; color: #8a8b92; }
+  .te-body select, .te-body input[type="text"] { width: 100%; font: 500 12px Inter, sans-serif; color: #14151a; background: #fffdf9; border: 1px solid #e3ddd2; border-radius: 8px; padding: 6px 8px; }
+  .te-body input[type="text"] { margin-top: 6px; }
+  .te-srow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+  .te-srow label { font-size: 11.5px; font-weight: 550; width: 62px; flex-shrink: 0; }
+  .te-srow input[type="range"] { flex: 1; accent-color: #14151a; min-width: 0; }
+  .te-srow output { font: 500 10.5px ui-monospace, monospace; color: #8a8b92; width: 34px; text-align: right; flex-shrink: 0; }
+  .te-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .te-seg { display: flex; background: #fffdf9; border: 1px solid #e3ddd2; border-radius: 9px; padding: 2px; gap: 2px; }
+  .te-seg button { flex: 1; border: none; background: none; font: 600 11px Inter, sans-serif; color: #6b6c72; padding: 5px 0; border-radius: 7px; cursor: pointer; }
+  .te-seg button[aria-pressed="true"] { background: #14151a; color: #fffdf9; }
+  .te-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e3ddd2; flex-shrink: 0; }
+  .te-foot button { flex: 1; font: 600 11.5px Inter, sans-serif; border-radius: 8px; padding: 7px 0; cursor: pointer; }
+  .te-copy { background: #14151a; color: #fffdf9; border: 1px solid #14151a; }
+  .te-link { background: #fffdf9; color: #14151a; border: 1px solid #e3ddd2; }
+  @media (prefers-reduced-motion: reduce) {
+    .te-card, .te-pill { transition: none; }
+  }
+  @media (max-width: 640px) {
+    .te-card { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0px); transform-origin: bottom center; box-shadow: 0 -16px 44px rgba(20, 21, 26, 0.3); }
+    .te-card[data-closed="true"] { transform: translateY(105%); opacity: 1; }
+    .te-pill { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
+    .te-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #d7d2c7; margin: 8px auto 0; flex-shrink: 0; }
+    .te-x { padding: 6px 10px; }
+  }
+`;
+const COLOR_KEYS = ["background", "surface", "text", "muted", "accent", "accentText", "danger", "border"];
+function samePreset(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+/** "12px" → 12 (slider value); tolerates rem-less numeric strings. */
+function px(value) {
+    return Number.parseFloat(value) || 0;
+}
+/** Selection-based copy for contexts where the async clipboard is missing or
+ * rejects (non-secure origins, unfocused automation documents). */
+function copyViaSelection(value) {
+    const area = document.createElement("textarea");
+    area.value = value;
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.append(area);
+    area.select();
+    let copied = false;
+    try {
+        copied = document.execCommand("copy");
+    }
+    catch {
+        copied = false;
+    }
+    area.remove();
+    return copied;
+}
+function CopyButton({ className, label, copiedLabel, text }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), 1600);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    const copy = async () => {
+        const value = text();
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            if (copyViaSelection(value))
+                setCopied(true);
+        }
+    };
+    return (_jsx("button", { type: "button", className: className, onClick: () => void copy(), children: copied ? copiedLabel : label }));
+}
+export function ThemeEditor({ theme, onChange }) {
+    const [open, setOpen] = useState(false);
+    const [freeFont, setFreeFont] = useState("");
+    const primary = primaryFontFamily(theme.typography.fontFamily);
+    const selectValue = curatedFonts.find((font) => primaryFontFamily(fontStack(font)) === primary) ?? "custom";
+    const set = (patch) => onChange({ ...theme, ...patch });
+    const setColor = (key, value) => set({ colors: { ...theme.colors, [key]: value } });
+    const setRadius = (key, value) => set({ radius: { ...theme.radius, [key]: `${value}px` } });
+    const applyFont = (family) => {
+        if (!family.trim())
+            return;
+        set({ typography: { ...theme.typography, fontFamily: fontStack(family) } });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: EDITOR_CSS }), _jsxs("button", { type: "button", className: "te-pill", "data-shown": !open, inert: open, onClick: () => setOpen(true), "aria-label": "Open theme editor", children: [_jsx("span", { className: "te-dot" }), "Theme"] }), _jsxs("div", { className: "te-card", "data-closed": !open, role: "dialog", "aria-label": "Theme editor", inert: !open, children: [_jsx("div", { className: "te-grab" }), _jsxs("div", { className: "te-head", children: [_jsxs("div", { children: [_jsx("b", { children: "Theme editor" }), _jsx("small", { children: "edits every scenario live \u00B7 VendoTheme" })] }), _jsx("button", { type: "button", className: "te-x", onClick: () => setOpen(false), "aria-label": "Close theme editor", children: "\u2715" })] }), _jsxs("div", { className: "te-body", children: [_jsxs("div", { className: "te-sec", children: [_jsx("div", { className: "te-label", children: "Presets" }), _jsx("div", { className: "te-presets", children: themePresets.map((preset) => (_jsxs("button", { type: "button", className: "te-chip", "aria-pressed": samePreset(theme, preset.theme), onClick: () => onChange(preset.theme), children: [_jsx("span", { className: "te-swatch", style: { background: preset.theme.colors.accent } }), preset.name] }, preset.name))) })] }), _jsxs("div", { className: "te-sec", children: [_jsx("div", { className: "te-label", children: "Colors" }), COLOR_KEYS.map((key) => (_jsxs("div", { className: "te-crow", children: [_jsx("input", { type: "color", value: theme.colors[key], onChange: (event) => setColor(key, event.target.value), "aria-label": `${key} color` }), _jsx("span", { children: key }), _jsx("code", { children: theme.colors[key] })] }, key)))] }), _jsxs("div", { className: "te-sec", children: [_jsx("div", { className: "te-label", children: "Typography" }), _jsxs("select", { value: selectValue, onChange: (event) => applyFont(event.target.value), "aria-label": "Font family", children: [curatedFonts.map((font) => (_jsx("option", { value: font, children: font }, font))), selectValue === "custom" && _jsxs("option", { value: "custom", children: [primary, " (custom)"] })] }), _jsx("input", { type: "text", placeholder: "or any Google Font \u2014 Enter to apply", value: freeFont, onChange: (event) => setFreeFont(event.target.value), onKeyDown: (event) => {
+                                            if (event.key !== "Enter")
+                                                return;
+                                            applyFont(freeFont);
+                                            setFreeFont("");
+                                        }, "aria-label": "Custom Google Font" }), _jsxs("div", { className: "te-srow", children: [_jsx("label", { htmlFor: "te-basesize", children: "baseSize" }), _jsx("input", { id: "te-basesize", type: "range", min: 12, max: 18, value: px(theme.typography.baseSize), onChange: (event) => set({ typography: { ...theme.typography, baseSize: `${event.target.value}px` } }) }), _jsx("output", { children: theme.typography.baseSize })] })] }), _jsxs("div", { className: "te-sec", children: [_jsx("div", { className: "te-label", children: "Radius" }), [
+                                        ["small", 14],
+                                        ["medium", 20],
+                                        ["large", 28],
+                                    ].map(([key, max]) => (_jsxs("div", { className: "te-srow", children: [_jsx("label", { htmlFor: `te-radius-${key}`, children: key }), _jsx("input", { id: `te-radius-${key}`, type: "range", min: 0, max: max, value: px(theme.radius[key]), onChange: (event) => setRadius(key, Number(event.target.value)) }), _jsx("output", { children: theme.radius[key] })] }, key)))] }), _jsxs("div", { className: "te-sec", children: [_jsx("div", { className: "te-label", children: "Density \u00B7 Motion" }), _jsxs("div", { className: "te-segs", children: [_jsx("div", { className: "te-seg", role: "group", "aria-label": "Density", children: ["comfortable", "compact"].map((value) => (_jsx("button", { type: "button", "aria-pressed": theme.density === value, onClick: () => set({ density: value }), children: value }, value))) }), _jsx("div", { className: "te-seg", role: "group", "aria-label": "Motion", children: ["full", "reduced"].map((value) => (_jsx("button", { type: "button", "aria-pressed": theme.motion === value, onClick: () => set({ motion: value }), children: value }, value))) })] })] })] }), _jsxs("div", { className: "te-foot", children: [_jsx(CopyButton, { className: "te-copy", label: "Copy theme.json", copiedLabel: "Copied \u2713", text: () => themeJson(theme) }), _jsx(CopyButton, { className: "te-link", label: "Copy link", copiedLabel: "Link copied \u2713", text: () => window.location.href })] })] })] }));
+}
+/** Keep the page's on-demand Google Fonts <link> in sync with the theme. */
+export function useGoogleFont(fontFamily) {
+    useEffect(() => {
+        const href = googleFontHref(primaryFontFamily(fontFamily));
+        const id = "vendo-playground-google-font";
+        const existing = document.getElementById(id);
+        if (!href) {
+            existing?.remove();
+            return;
+        }
+        if (existing) {
+            if (existing.href !== href)
+                existing.href = href;
+            return;
+        }
+        const link = document.createElement("link");
+        link.id = id;
+        link.rel = "stylesheet";
+        link.href = href;
+        document.head.append(link);
+    }, [fontFamily]);
+}

package/dist/cli/playground/app/theme-state.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Theme-editor state helpers: presets, the `?theme=` URL codec, font-stack
+ * utilities, and the `.vendo/theme.json` emitter. Pure module — the panel
+ * component (theme-editor.tsx) renders it; nothing here touches the DOM.
+ */
+import { type VendoTheme } from "@vendoai/core";
+export interface ThemePreset {
+    name: string;
+    theme: VendoTheme;
+}
+/** Default black leads (the Cadence-extracted look Yousef calls the default);
+ * Ultramarine is the shipped defaultVendoTheme; the rest are stress presets —
+ * one dark (color-scheme flip) and one radius/type torture test. */
+export declare const themePresets: ThemePreset[];
+/** Serialize a theme for the shareable `?theme=` search param. */
+export declare function encodeThemeParam(theme: VendoTheme): string;
+/** Parse a `?theme=` payload: partials resolve over the shipped defaults, and
+ * anything that does not validate as a VendoTheme is dropped (undefined). */
+export declare function decodeThemeParam(value: string | null): VendoTheme | undefined;
+/** The font picker's curated list; anything else arrives via free text. */
+export declare const curatedFonts: string[];
+/** First family of a CSS font stack, unquoted. */
+export declare function primaryFontFamily(fontFamily: string): string;
+/** Google Fonts css2 href for a webfont family; undefined for system fonts. */
+export declare function googleFontHref(family: string): string | undefined;
+/** Full fontFamily token for a picked family, quoting multi-word names. */
+export declare function fontStack(family: string): string;
+/** Pretty-printed `.vendo/theme.json` document for the current theme. */
+export declare function themeJson(theme: VendoTheme): string;

package/dist/cli/playground/app/theme-state.js

@@ -0,0 +1,151 @@
+/**
+ * Theme-editor state helpers: presets, the `?theme=` URL codec, font-stack
+ * utilities, and the `.vendo/theme.json` emitter. Pure module — the panel
+ * component (theme-editor.tsx) renders it; nothing here touches the DOM.
+ */
+import { vendoThemeSchema } from "@vendoai/core";
+import { defaultVendoTheme, resolveTheme } from "@vendoai/ui";
+/** Default black leads (the Cadence-extracted look Yousef calls the default);
+ * Ultramarine is the shipped defaultVendoTheme; the rest are stress presets —
+ * one dark (color-scheme flip) and one radius/type torture test. */
+export const themePresets = [
+    {
+        name: "Default black",
+        theme: {
+            colors: {
+                background: "#fbfbfa",
+                surface: "#ffffff",
+                text: "#111111",
+                muted: "#46443f",
+                accent: "#111111",
+                accentText: "#ffffff",
+                danger: "#b0473a",
+                border: "#ecebe8",
+            },
+            typography: { fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif", baseSize: "15px" },
+            radius: { small: "6px", medium: "12px", large: "12px" },
+            density: "comfortable",
+            motion: "full",
+        },
+    },
+    {
+        // The pre-black-default shipped look, kept as an accent stress preset.
+        name: "Ultramarine",
+        theme: {
+            colors: {
+                background: "#ffffff",
+                surface: "#f7f7f8",
+                text: "#1a1a1e",
+                muted: "#6b6b76",
+                accent: "#2f5af5",
+                accentText: "#ffffff",
+                danger: "#c62f2f",
+                border: "#e3e3e8",
+            },
+            typography: { fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif", baseSize: "15px" },
+            radius: { small: "6px", medium: "10px", large: "16px" },
+            density: "comfortable",
+            motion: "full",
+        },
+    },
+    {
+        name: "Dark violet",
+        theme: {
+            colors: {
+                background: "#0f1116",
+                surface: "#171a21",
+                text: "#e8e9ee",
+                muted: "#9aa0ae",
+                accent: "#7c6cff",
+                accentText: "#ffffff",
+                danger: "#ff6b5e",
+                border: "#262a34",
+            },
+            typography: { fontFamily: "Onest, system-ui, sans-serif", baseSize: "15px" },
+            radius: { small: "6px", medium: "10px", large: "16px" },
+            density: "comfortable",
+            motion: "full",
+        },
+    },
+    {
+        name: "Playful round",
+        theme: {
+            colors: {
+                background: "#fffdf6",
+                surface: "#ffffff",
+                text: "#1c1917",
+                muted: "#78716c",
+                accent: "#ff5c38",
+                accentText: "#ffffff",
+                danger: "#c62f2f",
+                border: "#ede5d8",
+            },
+            typography: { fontFamily: "Onest, system-ui, sans-serif", baseSize: "16px" },
+            radius: { small: "10px", medium: "16px", large: "24px" },
+            density: "compact",
+            motion: "full",
+        },
+    },
+];
+/** Serialize a theme for the shareable `?theme=` search param. */
+export function encodeThemeParam(theme) {
+    return JSON.stringify(theme);
+}
+/** Parse a `?theme=` payload: partials resolve over the shipped defaults, and
+ * anything that does not validate as a VendoTheme is dropped (undefined). */
+export function decodeThemeParam(value) {
+    if (!value)
+        return undefined;
+    let parsed;
+    try {
+        parsed = JSON.parse(value);
+    }
+    catch {
+        return undefined;
+    }
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+        return undefined;
+    const resolved = resolveTheme(defaultVendoTheme, parsed);
+    return vendoThemeSchema.safeParse(resolved).success ? resolved : undefined;
+}
+/** The font picker's curated list; anything else arrives via free text. */
+export const curatedFonts = ["Onest", "Inter", "Geist", "IBM Plex Sans", "Newsreader", "system-ui (no webfont)"];
+/** Families that must never be fetched from Google Fonts. */
+const SYSTEM_FAMILIES = new Set([
+    "system-ui",
+    "system-ui (no webfont)",
+    "-apple-system",
+    "blinkmacsystemfont",
+    "segoe ui",
+    "ui-sans-serif",
+    "ui-serif",
+    "ui-monospace",
+    "sans-serif",
+    "serif",
+    "monospace",
+]);
+/** First family of a CSS font stack, unquoted. */
+export function primaryFontFamily(fontFamily) {
+    const first = fontFamily.split(",")[0].trim();
+    return first.replace(/^['"]|['"]$/g, "");
+}
+/** Google Fonts css2 href for a webfont family; undefined for system fonts. */
+export function googleFontHref(family) {
+    const name = family.trim();
+    if (!name || SYSTEM_FAMILIES.has(name.toLowerCase()))
+        return undefined;
+    return `https://fonts.googleapis.com/css2?family=${name.replace(/ /g, "+")}:wght@400;500;600;700&display=swap`;
+}
+/** Full fontFamily token for a picked family, quoting multi-word names. */
+export function fontStack(family) {
+    const name = family.trim();
+    if (!name || name.toLowerCase().startsWith("system-ui")) {
+        return "system-ui, -apple-system, 'Segoe UI', sans-serif";
+    }
+    const quoted = name.includes(" ") ? `'${name}'` : name;
+    return `${quoted}, system-ui, sans-serif`;
+}
+/** Pretty-printed `.vendo/theme.json` document for the current theme. */
+export function themeJson(theme) {
+    return `${JSON.stringify(theme, null, 2)}\n`;
+}