veryfront 0.1.47 → 0.1.49

package/esm/src/react/components/ai/model-selector.js

@@ -1,11 +1,145 @@
 /**
  * ModelSelector - Dropdown for switching models at runtime
  *
- * Renders a compact dropdown that integrates with useChat's model/setModel.
- * Expects "provider/model" strings (e.g. "openai/gpt-4o").
+ * Opens upward from the trigger using fixed positioning
+ * so it never affects the surrounding layout.
+ *
+ * Implements WAI-ARIA listbox pattern with full keyboard navigation.
  */
 import * as React from "react";
+import { cn } from "./theme.js";
+import { ChevronDownIcon } from "./icons/index.js";
+function groupByProvider(models) {
+    const groups = new Map();
+    for (const model of models) {
+        const key = model.provider ?? "";
+        const group = groups.get(key);
+        if (group) {
+            group.push(model);
+        }
+        else {
+            groups.set(key, [model]);
+        }
+    }
+    return groups;
+}
 export function ModelSelector({ models, value, onChange, className, disabled, }) {
-    return (React.createElement("select", { value: value ?? "", onChange: (e) => onChange(e.target.value), disabled: disabled, className: className ??
-            "text-xs px-2 py-1 rounded-md border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 focus:outline-none focus:ring-1 focus:ring-neutral-400" }, models.map((m) => (React.createElement("option", { key: m.value, value: m.value }, m.label)))));
+    const [open, setOpen] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const selected = models.find((m) => m.value === value) ?? models[0];
+    const listboxId = React.useId();
+    // Measure trigger and position dropdown above it, right-aligned
+    React.useEffect(() => {
+        if (!open || !triggerRef.current)
+            return;
+        const r = triggerRef.current.getBoundingClientRect();
+        setPos({
+            bottom: globalThis.innerHeight - r.top + 6,
+            right: globalThis.innerWidth - r.right,
+        });
+        // Focus the selected item when opening
+        const selectedIdx = models.findIndex((m) => m.value === (value ?? selected?.value));
+        setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+    }, [open, models, value, selected?.value]);
+    // Close on outside click
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function handleMouseDown(e) {
+            const target = e.target;
+            if (triggerRef.current?.contains(target) ||
+                dropdownRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        }
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [open]);
+    // Keyboard navigation
+    React.useEffect(() => {
+        if (!open)
+            return;
+        function handleKeyDown(e) {
+            switch (e.key) {
+                case "Escape":
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    break;
+                case "ArrowDown":
+                    e.preventDefault();
+                    setFocusedIndex((prev) => (prev + 1) % models.length);
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    setFocusedIndex((prev) => (prev - 1 + models.length) % models.length);
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    setFocusedIndex(0);
+                    break;
+                case "End":
+                    e.preventDefault();
+                    setFocusedIndex(models.length - 1);
+                    break;
+                case "Enter":
+                case " ":
+                    e.preventDefault();
+                    if (focusedIndex >= 0 && focusedIndex < models.length) {
+                        onChange(models[focusedIndex].value);
+                        setOpen(false);
+                        triggerRef.current?.focus();
+                    }
+                    break;
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, focusedIndex, models, onChange]);
+    // Scroll focused item into view
+    React.useEffect(() => {
+        if (!open || focusedIndex < 0)
+            return;
+        const option = dropdownRef.current?.querySelector(`[data-index="${focusedIndex}"]`);
+        option?.scrollIntoView({ block: "nearest" });
+    }, [open, focusedIndex]);
+    const hasGroups = models.some((m) => m.provider);
+    const groups = hasGroups ? groupByProvider(models) : null;
+    function handleSelect(model) {
+        onChange(model.value);
+        setOpen(false);
+        triggerRef.current?.focus();
+    }
+    function renderItem(model, flatIndex) {
+        const isActive = model.value === (value ?? selected?.value);
+        const isFocused = flatIndex === focusedIndex;
+        return (React.createElement("div", { key: model.value, role: "option", "aria-selected": isActive, "data-index": flatIndex, onClick: () => handleSelect(model), onMouseEnter: () => setFocusedIndex(flatIndex), className: cn("w-full text-left px-3 py-2 text-sm transition-all rounded-lg cursor-pointer", isActive
+                ? "bg-[var(--foreground)]/[0.05] text-[var(--foreground)]"
+                : "text-[var(--card-foreground)] hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]", isFocused && !isActive && "bg-[var(--foreground)]/[0.05]") },
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("span", { className: "font-medium" }, model.label),
+                model.badge && (React.createElement("span", { className: "px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-[var(--foreground)]/[0.07] text-[var(--muted-foreground)]" }, model.badge))),
+            model.description && (React.createElement("p", { className: "text-xs text-[var(--muted-foreground)] mt-0.5" }, model.description))));
+    }
+    // Build flat index mapping for grouped layout
+    let flatIndex = 0;
+    const dropdownContent = groups
+        ? Array.from(groups.entries()).map(([provider, items], groupIndex) => (React.createElement("div", { key: provider || "__ungrouped", role: "group", "aria-label": provider || undefined },
+            groupIndex > 0 && React.createElement("div", { className: "h-px bg-[var(--border)] my-1" }),
+            provider && (React.createElement("div", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--input-placeholder)]" }, provider)),
+            items.map((item) => renderItem(item, flatIndex++)))))
+        : models.map((item) => renderItem(item, flatIndex++));
+    return (React.createElement("div", { className: cn("inline-block", className) },
+        React.createElement("button", { ref: triggerRef, type: "button", onClick: () => !disabled && setOpen((prev) => !prev), disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, className: cn("inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full", "border border-[var(--border)]", "bg-[var(--card)]", "text-[var(--card-foreground)]", "hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2", "transition-all disabled:opacity-50 disabled:cursor-not-allowed") },
+            React.createElement("span", null, selected?.label ?? "Select model"),
+            React.createElement(ChevronDownIcon, { className: cn("size-3 transition-transform rotate-180", open && "rotate-0") })),
+        open && pos && (React.createElement("div", { ref: dropdownRef, id: listboxId, role: "listbox", "aria-label": "Select model", className: "min-w-[220px] max-h-[320px] overflow-auto rounded-xl border border-[var(--border)] bg-[var(--card)] shadow-xl p-1", style: {
+                position: "fixed",
+                bottom: pos.bottom,
+                right: pos.right,
+                zIndex: 9999,
+            } }, dropdownContent))));
 }

package/esm/src/react/components/ai/theme.d.ts

@@ -1,8 +1,95 @@
 /**
  * Theme System for Styled Components
  *
- * Provides default theme and utilities for customization.
+ * Uses CSS custom properties that align with the Veryfront Studio design system.
+ * When embedded in a host that defines --background, --foreground, etc., the chat
+ * UI automatically inherits those tokens. When standalone, sensible defaults are
+ * injected via <style> on the chat root element.
  */
+import { type ClassValue } from "clsx";
+export { cva, type VariantProps } from "class-variance-authority";
+/**
+ * Light-mode defaults that match the Veryfront Studio `:root` values.
+ * Uses OKLch for perceptual uniformity.
+ */
+export declare const TOKENS_LIGHT: {
+    readonly "--background": "oklch(0.9512 0.008 98.88)";
+    readonly "--foreground": "oklch(0.2768 0 0)";
+    readonly "--card": "oklch(1 0 0)";
+    readonly "--card-foreground": "oklch(0.2768 0 0)";
+    readonly "--popover": "oklch(1 0 0)";
+    readonly "--popover-foreground": "oklch(0.2768 0 0)";
+    readonly "--primary": "oklch(0.2768 0 0)";
+    readonly "--primary-foreground": "oklch(1 0 0)";
+    readonly "--muted": "oklch(0.9422 0.0081 98.88)";
+    readonly "--muted-foreground": "oklch(0.55 0.005 95.11)";
+    readonly "--accent": "oklch(0.93 0 0)";
+    readonly "--accent-foreground": "oklch(0.15 0 0)";
+    readonly "--destructive": "oklch(0.55 0.22 27)";
+    readonly "--destructive-foreground": "oklch(1 0 0)";
+    readonly "--border": "oklch(0.84 0.0055 95.11)";
+    readonly "--input": "oklch(1 0 0)";
+    readonly "--input-border": "oklch(0.88 0 0)";
+    readonly "--input-placeholder": "oklch(0.7025 0 0)";
+    readonly "--ring": "oklch(0.2768 0 0 / 0.3)";
+    readonly "--success": "oklch(0.52 0.15 145)";
+    readonly "--chat-bubble": "oklch(0.2768 0 0)";
+    readonly "--chat-bubble-foreground": "oklch(1 0 0)";
+    readonly "--tab-background": "oklch(1 0 0)";
+    readonly "--tab-foreground": "oklch(0.7025 0 0)";
+    readonly "--tab-active-background": "oklch(0.9422 0.0081 98.88)";
+    readonly "--tab-active-foreground": "oklch(0.2768 0 0)";
+    readonly "--sidebar-background": "oklch(0.9512 0.008 98.88)";
+    readonly "--sidebar-foreground": "oklch(0.07 0 0)";
+    readonly "--sidebar-border": "oklch(0.9 0.006 98.88)";
+};
+/**
+ * Dark-mode defaults that match the Studio `[data-theme="dark"]` values.
+ */
+export declare const TOKENS_DARK: {
+    readonly "--background": "oklch(0.2768 0 0)";
+    readonly "--foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--card": "oklch(0.3211 0 0)";
+    readonly "--card-foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--popover": "oklch(0.21 0.01 220)";
+    readonly "--popover-foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--primary": "oklch(0.9512 0.008 98.88)";
+    readonly "--primary-foreground": "oklch(0.2768 0 0)";
+    readonly "--muted": "oklch(0.5338 0.0046 106.55)";
+    readonly "--muted-foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--accent": "oklch(0.25 0.01 220)";
+    readonly "--accent-foreground": "oklch(1 0 0)";
+    readonly "--destructive": "oklch(0.55 0.22 27)";
+    readonly "--destructive-foreground": "oklch(1 0 0)";
+    readonly "--border": "oklch(0.42 0.0017 106.48)";
+    readonly "--input": "oklch(0.3211 0 0)";
+    readonly "--input-border": "oklch(0.38 0.01 220)";
+    readonly "--input-placeholder": "oklch(0.8975 0 0)";
+    readonly "--ring": "oklch(0.6 0.01 220 / 0.5)";
+    readonly "--success": "oklch(0.52 0.14 143)";
+    readonly "--chat-bubble": "oklch(0.9512 0.008 98.88)";
+    readonly "--chat-bubble-foreground": "oklch(0.2768 0 0)";
+    readonly "--tab-background": "oklch(0.3211 0 0)";
+    readonly "--tab-foreground": "oklch(0.8975 0 0)";
+    readonly "--tab-active-background": "oklch(0.5338 0.0046 106.55)";
+    readonly "--tab-active-foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--sidebar-background": "oklch(0.18 0.01 220)";
+    readonly "--sidebar-foreground": "oklch(0.9512 0.008 98.88)";
+    readonly "--sidebar-border": "oklch(0.3 0.01 220)";
+};
+/**
+ * Generates scoped CSS for the chat UI design tokens.
+ * Uses [data-vf-chat] as scope so tokens don't leak to the page.
+ *
+ * If a host application (e.g. Studio) already defines these CSS custom
+ * properties on :root, the host values cascade through and our fallbacks
+ * are never reached — because we set them on [data-vf-chat] which has
+ * lower specificity for inherited vars. We intentionally only set them
+ * on the chat root so parent-defined tokens take precedence.
+ *
+ * Dark mode: supports prefers-color-scheme, .dark, and [data-theme="dark"].
+ */
+export declare function generateTokenCSS(): string;
 export interface ChatTheme {
     /** Container styles */
     container?: string;
@@ -21,32 +108,28 @@ export interface ChatTheme {
     loading?: string;
 }
 /**
- * Default theme using Tailwind CSS - Apple Messages inspired, clean & minimal
+ * Default theme using CSS custom properties from the design system.
  */
 export declare const defaultChatTheme: ChatTheme;
 export interface AgentTheme {
-    /** Container styles */
     container?: string;
-    /** Status styles */
     status?: string;
-    /** Thinking indicator styles */
     thinking?: string;
-    /** Tool invocation styles */
     tool?: string;
-    /** Tool result styles */
     toolResult?: string;
 }
-/**
- * Default agent theme - Apple-inspired, clean & minimal
- */
 export declare const defaultAgentTheme: AgentTheme;
 /**
  * Merge themes (user theme overrides default)
  */
 export declare function mergeThemes<T>(defaultTheme: T, userTheme?: Partial<T>): T;
 /**
- * Utility to combine class names
- * (Simple version - in production use 'clsx' or 'cn' from shadcn)
+ * Utility to combine and merge Tailwind class names.
  */
-export declare function cn(...classes: (string | undefined | null | false)[]): string;
+export declare function cn(...inputs: ClassValue[]): string;
+import { cva } from "class-variance-authority";
+type CvaReturn = ReturnType<typeof cva>;
+export declare const messageVariants: CvaReturn;
+export declare const chatButtonVariants: CvaReturn;
+export declare const chatContainerVariants: CvaReturn;
 //# sourceMappingURL=theme.d.ts.map

package/esm/src/react/components/ai/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ai/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAgB9B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAU/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,YAAY,EAAE,CAAC,EACf,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GACrB,CAAC,CAsBH;AAED;;;GAGG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ai/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Bf,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Bd,CAAC;AAMX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAWzC;AAMD,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAe9B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,UAO/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,YAAY,EAAE,CAAC,EACf,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GACrB,CAAC,CAsBH;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAMD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAExC,eAAO,MAAM,eAAe,EAAE,SAc5B,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,SAgChC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,SAYlC,CAAC"}

package/esm/src/react/components/ai/theme.js

@@ -1,32 +1,133 @@
 /**
  * Theme System for Styled Components
  *
- * Provides default theme and utilities for customization.
+ * Uses CSS custom properties that align with the Veryfront Studio design system.
+ * When embedded in a host that defines --background, --foreground, etc., the chat
+ * UI automatically inherits those tokens. When standalone, sensible defaults are
+ * injected via <style> on the chat root element.
  */
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export { cva } from "class-variance-authority";
+// ---------------------------------------------------------------------------
+// CSS Custom Property tokens
+// ---------------------------------------------------------------------------
 /**
- * Default theme using Tailwind CSS - Apple Messages inspired, clean & minimal
+ * Light-mode defaults that match the Veryfront Studio `:root` values.
+ * Uses OKLch for perceptual uniformity.
+ */
+export const TOKENS_LIGHT = {
+    "--background": "oklch(0.9512 0.008 98.88)",
+    "--foreground": "oklch(0.2768 0 0)",
+    "--card": "oklch(1 0 0)",
+    "--card-foreground": "oklch(0.2768 0 0)",
+    "--popover": "oklch(1 0 0)",
+    "--popover-foreground": "oklch(0.2768 0 0)",
+    "--primary": "oklch(0.2768 0 0)",
+    "--primary-foreground": "oklch(1 0 0)",
+    "--muted": "oklch(0.9422 0.0081 98.88)",
+    "--muted-foreground": "oklch(0.55 0.005 95.11)",
+    "--accent": "oklch(0.93 0 0)",
+    "--accent-foreground": "oklch(0.15 0 0)",
+    "--destructive": "oklch(0.55 0.22 27)",
+    "--destructive-foreground": "oklch(1 0 0)",
+    "--border": "oklch(0.84 0.0055 95.11)",
+    "--input": "oklch(1 0 0)",
+    "--input-border": "oklch(0.88 0 0)",
+    "--input-placeholder": "oklch(0.7025 0 0)",
+    "--ring": "oklch(0.2768 0 0 / 0.3)",
+    "--success": "oklch(0.52 0.15 145)",
+    "--chat-bubble": "oklch(0.2768 0 0)",
+    "--chat-bubble-foreground": "oklch(1 0 0)",
+    "--tab-background": "oklch(1 0 0)",
+    "--tab-foreground": "oklch(0.7025 0 0)",
+    "--tab-active-background": "oklch(0.9422 0.0081 98.88)",
+    "--tab-active-foreground": "oklch(0.2768 0 0)",
+    "--sidebar-background": "oklch(0.9512 0.008 98.88)",
+    "--sidebar-foreground": "oklch(0.07 0 0)",
+    "--sidebar-border": "oklch(0.9 0.006 98.88)",
+};
+/**
+ * Dark-mode defaults that match the Studio `[data-theme="dark"]` values.
+ */
+export const TOKENS_DARK = {
+    "--background": "oklch(0.2768 0 0)",
+    "--foreground": "oklch(0.9512 0.008 98.88)",
+    "--card": "oklch(0.3211 0 0)",
+    "--card-foreground": "oklch(0.9512 0.008 98.88)",
+    "--popover": "oklch(0.21 0.01 220)",
+    "--popover-foreground": "oklch(0.9512 0.008 98.88)",
+    "--primary": "oklch(0.9512 0.008 98.88)",
+    "--primary-foreground": "oklch(0.2768 0 0)",
+    "--muted": "oklch(0.5338 0.0046 106.55)",
+    "--muted-foreground": "oklch(0.9512 0.008 98.88)",
+    "--accent": "oklch(0.25 0.01 220)",
+    "--accent-foreground": "oklch(1 0 0)",
+    "--destructive": "oklch(0.55 0.22 27)",
+    "--destructive-foreground": "oklch(1 0 0)",
+    "--border": "oklch(0.42 0.0017 106.48)",
+    "--input": "oklch(0.3211 0 0)",
+    "--input-border": "oklch(0.38 0.01 220)",
+    "--input-placeholder": "oklch(0.8975 0 0)",
+    "--ring": "oklch(0.6 0.01 220 / 0.5)",
+    "--success": "oklch(0.52 0.14 143)",
+    "--chat-bubble": "oklch(0.9512 0.008 98.88)",
+    "--chat-bubble-foreground": "oklch(0.2768 0 0)",
+    "--tab-background": "oklch(0.3211 0 0)",
+    "--tab-foreground": "oklch(0.8975 0 0)",
+    "--tab-active-background": "oklch(0.5338 0.0046 106.55)",
+    "--tab-active-foreground": "oklch(0.9512 0.008 98.88)",
+    "--sidebar-background": "oklch(0.18 0.01 220)",
+    "--sidebar-foreground": "oklch(0.9512 0.008 98.88)",
+    "--sidebar-border": "oklch(0.3 0.01 220)",
+};
+function tokensToCSS(tokens) {
+    return Object.entries(tokens).map(([k, v]) => `${k}:${v}`).join(";");
+}
+/**
+ * Generates scoped CSS for the chat UI design tokens.
+ * Uses [data-vf-chat] as scope so tokens don't leak to the page.
+ *
+ * If a host application (e.g. Studio) already defines these CSS custom
+ * properties on :root, the host values cascade through and our fallbacks
+ * are never reached — because we set them on [data-vf-chat] which has
+ * lower specificity for inherited vars. We intentionally only set them
+ * on the chat root so parent-defined tokens take precedence.
+ *
+ * Dark mode: supports prefers-color-scheme, .dark, and [data-theme="dark"].
+ */
+export function generateTokenCSS() {
+    const light = tokensToCSS(TOKENS_LIGHT);
+    const dark = tokensToCSS(TOKENS_DARK);
+    return [
+        `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');`,
+        `[data-vf-chat]{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;${light}}`,
+        `[data-vf-chat] button{cursor:pointer;}`,
+        `@media(prefers-color-scheme:dark){[data-vf-chat]:not([data-vf-theme]){${dark}}}`,
+        `.dark [data-vf-chat]:not([data-vf-theme]),[data-theme="dark"] [data-vf-chat]:not([data-vf-theme]){${dark}}`,
+    ].join("");
+}
+/**
+ * Default theme using CSS custom properties from the design system.
  */
 export const defaultChatTheme = {
-    container: "flex flex-col h-full overflow-hidden bg-white dark:bg-neutral-900",
+    container: "flex flex-col h-full overflow-hidden bg-[var(--background)]",
     message: {
-        user: "bg-blue-500 text-white rounded-[20px] rounded-br-[4px] px-4 py-2.5 max-w-[75%]",
-        assistant: "bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-[20px] rounded-bl-[4px] px-4 py-2.5 max-w-[75%]",
-        system: "bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 rounded-2xl px-4 py-2 text-sm mx-auto text-center",
-        tool: "bg-neutral-50 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300 rounded-xl px-3 py-2 text-sm font-mono border border-neutral-200 dark:border-neutral-700",
+        user: "bg-[var(--chat-bubble)] text-[var(--chat-bubble-foreground)] rounded-[22px] px-5 py-3 max-w-[80%] shadow-sm",
+        assistant: "text-[var(--card-foreground)] max-w-none",
+        system: "text-[var(--muted-foreground)] text-sm mx-auto text-center py-2",
+        tool: "bg-[var(--card)] text-[var(--card-foreground)] rounded-xl px-3 py-2 text-sm font-mono border border-[var(--border)]",
     },
-    input: "flex-1 px-4 py-2.5 bg-neutral-100 dark:bg-neutral-800 border-0 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500/30 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 text-[15px]",
-    button: "w-9 h-9 flex items-center justify-center bg-blue-500 hover:bg-blue-600 active:scale-95 text-white rounded-full transition-all disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-blue-500 disabled:active:scale-100",
-    loading: "w-1.5 h-1.5 bg-neutral-400 rounded-full animate-bounce",
+    input: "w-full bg-transparent border-none focus:outline-none focus:ring-0 text-[var(--foreground)] placeholder:text-[var(--input-placeholder)] text-[15px] leading-normal",
+    button: "size-9 shrink-0 flex items-center justify-center rounded-full transition-all bg-[var(--foreground)] text-[var(--background)] hover:opacity-90 active:scale-95 disabled:opacity-40",
+    loading: "size-2 bg-[var(--border)] rounded-full animate-pulse",
 };
-/**
- * Default agent theme - Apple-inspired, clean & minimal
- */
 export const defaultAgentTheme = {
-    container: "border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 space-y-4 bg-white dark:bg-neutral-900",
+    container: "border border-[var(--border)] rounded-2xl p-6 space-y-4 bg-[var(--card)]",
     status: "inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium",
-    thinking: "bg-amber-50 dark:bg-amber-900/20 rounded-xl px-4 py-3 italic text-neutral-700 dark:text-neutral-300 border border-amber-200 dark:border-amber-800",
-    tool: "rounded-xl px-4 py-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800",
-    toolResult: "mt-2 p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl font-mono text-sm overflow-x-auto",
+    thinking: "bg-amber-500/10 rounded-xl px-4 py-3 italic text-[var(--foreground)] border border-amber-500/20",
+    tool: "rounded-xl px-4 py-3 bg-blue-500/10 border border-blue-500/20",
+    toolResult: "mt-2 p-3 bg-[var(--accent)] rounded-xl font-mono text-sm overflow-x-auto",
 };
 function isPlainObject(value) {
     return !!value && typeof value === "object" && !Array.isArray(value);
@@ -54,9 +155,64 @@ export function mergeThemes(defaultTheme, userTheme) {
     return merged;
 }
 /**
- * Utility to combine class names
- * (Simple version - in production use 'clsx' or 'cn' from shadcn)
+ * Utility to combine and merge Tailwind class names.
  */
-export function cn(...classes) {
-    return classes.filter(Boolean).join(" ");
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
 }
+// ---------------------------------------------------------------------------
+// CVA Variant Definitions
+// ---------------------------------------------------------------------------
+import { cva } from "class-variance-authority";
+export const messageVariants = cva("", {
+    variants: {
+        role: {
+            user: "bg-[var(--chat-bubble)] text-[var(--chat-bubble-foreground)] rounded-[22px] px-5 py-3 max-w-[80%] shadow-sm",
+            assistant: "text-[var(--card-foreground)] max-w-none",
+            system: "text-[var(--muted-foreground)] text-sm mx-auto text-center py-2",
+            tool: "bg-[var(--card)] text-[var(--card-foreground)] rounded-xl px-3 py-2 text-sm font-mono border border-[var(--border)]",
+        },
+    },
+    defaultVariants: {
+        role: "assistant",
+    },
+});
+export const chatButtonVariants = cva([
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "font-medium rounded-full transition-all duration-150",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:shrink-0",
+], {
+    variants: {
+        variant: {
+            primary: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 active:scale-95",
+            ghost: "bg-transparent text-[var(--foreground)] hover:bg-[var(--foreground)]/5",
+            outline: "border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--foreground)]/5",
+            "icon-ghost": "bg-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 !p-0 !gap-0",
+        },
+        size: {
+            sm: "h-[38px] px-4 text-sm [&_svg]:size-4",
+            default: "h-[42px] px-5 text-base [&_svg]:size-5",
+            "icon-xs": "size-7 [&_svg]:size-4",
+            "icon-sm": "size-9 [&_svg]:size-5",
+            "icon-default": "size-10 [&_svg]:size-5",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "default",
+    },
+});
+export const chatContainerVariants = cva("flex flex-col overflow-hidden", {
+    variants: {
+        variant: {
+            default: "h-full bg-[var(--background)]",
+            embedded: "h-full bg-transparent",
+            floating: "h-[600px] w-[400px] rounded-2xl border border-[var(--border)] bg-[var(--background)] shadow-xl",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});

package/esm/src/react/primitives/input-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-box.d.ts","sourceRoot":"","sources":["../../../../src/src/react/primitives/input-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAc,SAC7B,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,EACjE,UAAU,GAAG,UAAU,CACxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,KA0CnB,CAAC;AAIH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAqCD,eAAO,MAAM,YAAY,KA2ExB,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEtF,eAAO,MAAM,gBAAgB,KAY3B,CAAC"}
+{"version":3,"file":"input-box.d.ts","sourceRoot":"","sources":["../../../../src/src/react/primitives/input-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAc,SAC7B,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,EACjE,UAAU,GAAG,UAAU,CACxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,KAwDnB,CAAC;AAIH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8CD,eAAO,MAAM,YAAY,KA2ExB,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEtF,eAAO,MAAM,gBAAgB,KAY3B,CAAC"}

package/esm/src/react/primitives/input-box.js

@@ -1,15 +1,27 @@
 import * as React from "react";
 export const InputBox = React.forwardRef(({ className, value, onChange, onSubmit, multiline, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const textareaRef = ref || internalRef;
     const handleKeyDown = (e) => {
         if (e.key !== "Enter" || e.shiftKey || !onSubmit)
             return;
         e.preventDefault();
         onSubmit();
     };
+    // Auto-resize textarea to fit content
+    React.useEffect(() => {
+        const el = textareaRef.current;
+        if (!el || !multiline)
+            return;
+        el.style.height = "auto";
+        if (value) {
+            el.style.height = Math.min(el.scrollHeight, 200) + "px";
+        }
+    }, [value, multiline, textareaRef]);
     if (multiline) {
         return (React.createElement("textarea", { 
             // deno-lint-ignore no-explicit-any
-            ref: ref, className: className, value: value, onChange: onChange, onKeyDown: handleKeyDown, "data-input-box": "", "data-multiline": "true", rows: 3, ...props }));
+            ref: textareaRef, className: className, style: { resize: "none", border: "none", outline: "none" }, value: value, onChange: onChange, onKeyDown: handleKeyDown, "data-input-box": "", "data-multiline": "true", rows: 1, ...props }));
     }
     return (React.createElement("input", { 
         // deno-lint-ignore no-explicit-any
@@ -17,8 +29,9 @@ export const InputBox = React.forwardRef(({ className, value, onChange, onSubmit
 });
 InputBox.displayName = "InputBox";
 function SubmitIcon() {
-    return (React.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor" },
-        React.createElement("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })));
+    return (React.createElement("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("path", { d: "m5 12 7-7 7 7" }),
+        React.createElement("path", { d: "M12 19V5" })));
 }
 function StopIcon() {
     return (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor" },

package/esm/src/rendering/cache/index.d.ts

@@ -5,9 +5,5 @@
  */
 export { CacheCoordinator, type CacheCoordinatorOptions, type CacheLookupResult, } from "./cache-coordinator.js";
 export type { CachePayload, CacheStore } from "./types.js";
-export { APICacheStore, type APICacheStoreOptions } from "./stores/index.js";
-export { FilesystemCacheStore, type FilesystemCacheStoreOptions } from "./stores/index.js";
-export { KVCacheStore, type KVCacheStoreOptions } from "./stores/index.js";
-export { MemoryCacheStore, type MemoryCacheStoreOptions } from "./stores/index.js";
-export { RedisCacheStore, type RedisCacheStoreOptions } from "./stores/index.js";
+export { APICacheStore, type APICacheStoreOptions, FilesystemCacheStore, type FilesystemCacheStoreOptions, KVCacheStore, type KVCacheStoreOptions, MemoryCacheStore, type MemoryCacheStoreOptions, RedisCacheStore, type RedisCacheStoreOptions, } from "./stores/index.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/src/rendering/cache/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/rendering/cache/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,KAAK,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/rendering/cache/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,oBAAoB,EACpB,KAAK,2BAA2B,EAChC,YAAY,EACZ,KAAK,mBAAmB,EACxB,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,eAAe,EACf,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC"}

package/esm/src/rendering/cache/index.js

@@ -4,8 +4,4 @@
  * @module rendering/cache
  */
 export { CacheCoordinator, } from "./cache-coordinator.js";
-export { APICacheStore } from "./stores/index.js";
-export { FilesystemCacheStore } from "./stores/index.js";
-export { KVCacheStore } from "./stores/index.js";
-export { MemoryCacheStore } from "./stores/index.js";
-export { RedisCacheStore } from "./stores/index.js";
+export { APICacheStore, FilesystemCacheStore, KVCacheStore, MemoryCacheStore, RedisCacheStore, } from "./stores/index.js";

package/esm/src/rendering/component-handling.d.ts

@@ -19,6 +19,8 @@ export declare function handleComponentPage(pageInfo: EntityInfo, slug: string,
     projectId?: string;
     /** Enable node position injection for Studio Navigator */
     studioEmbed?: boolean;
+    /** Request mode ("preview" | "production") for studio features */
+    mode?: string;
     /** Content source ID for cache isolation (branch name or release ID) */
     contentSourceId?: string;
     /** React version for transforms (from project config) */

package/esm/src/rendering/component-handling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-handling.d.ts","sourceRoot":"","sources":["../../../src/src/rendering/component-handling.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,KAAK,YAAY,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAQhE,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,YAAY,CAAC,YAAY,CAAC;IACvC,UAAU,EAAE,UAAU,CAAC;CACxB;AAgBD;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,kBAAkB,EAAE,OAAO,EAC3B,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACA,OAAO,CAAC,mBAAmB,CAAC,CAyE9B"}
+{"version":3,"file":"component-handling.d.ts","sourceRoot":"","sources":["../../../src/src/rendering/component-handling.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,KAAK,YAAY,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,YAAY,CAAC,YAAY,CAAC;IACvC,UAAU,EAAE,UAAU,CAAC;CACxB;AAgBD;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,kBAAkB,EAAE,OAAO,EAC3B,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE;IACR,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACA,OAAO,CAAC,mBAAmB,CAAC,CAwE9B"}