veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/ui/app-shell.js

@@ -0,0 +1,276 @@
+/**
+ * AppShell — a chat-independent layout primitive modeled on the shadcn sidebar
+ * (https://ui.shadcn.com/blocks). It owns the *layout + sidebar visibility*;
+ * everything else is slots. The sidebar is binary — visible or hidden (no
+ * collapse/icon-rail mode). Supports a left AND a right sidebar, each with its
+ * own toggle and persisted state.
+ *
+ * Desktop: sidebars are inline flex columns (mounted only while open).
+ * Mobile (< sm): sidebars become a focus-trapped off-canvas overlay + backdrop
+ * that slides in from the relevant edge, with Escape-to-close, scroll-lock, and
+ * focus restore.
+ *
+ * Purely structural: it injects no theme/token CSS — the host owns theming.
+ * Zero external deps (uses the local `cn` + `ui/button`). Built in `chat/ui`
+ * for now; designed for a clean `git mv` to a top-level `/ui`.
+ *
+ * @module react/components/chat/ui/app-shell
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { ChatTokens } from "../chat-tokens-style.js";
+import { PanelLeftIcon, PanelRightIcon } from "../icons/index.js";
+import { Button } from "./button.js";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const AppShellContext = React.createContext(null);
+/** Access the enclosing {@link AppShell}'s state (external triggers, etc.). */
+export function useAppShell() {
+    const ctx = React.useContext(AppShellContext);
+    if (!ctx)
+        throw new Error("AppShell parts must be used within <AppShell>");
+    return ctx;
+}
+/** Reactive `< sm` viewport check (matches Tailwind `max-sm`). SSR-safe. */
+function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.useEffect(() => {
+        if (typeof globalThis.matchMedia !== "function")
+            return;
+        const mql = globalThis.matchMedia("(max-width: 639.98px)");
+        const update = () => setIsMobile(mql.matches);
+        update();
+        mql.addEventListener("change", update);
+        return () => mql.removeEventListener("change", update);
+    }, []);
+    return isMobile;
+}
+function readStored(storageKey, side, fallback) {
+    if (!storageKey || typeof localStorage === "undefined")
+        return fallback;
+    try {
+        const raw = localStorage.getItem(`${storageKey}-${side}`);
+        if (raw === "true")
+            return true;
+        if (raw === "false")
+            return false;
+    }
+    catch (_) { /* expected: unavailable/blocked storage */ }
+    return fallback;
+}
+function writeStored(storageKey, side, value) {
+    if (!storageKey || typeof localStorage === "undefined")
+        return;
+    try {
+        localStorage.setItem(`${storageKey}-${side}`, String(value));
+    }
+    catch (_) { /* expected: unavailable/blocked storage */ }
+}
+/** Root — provides sidebar state and the flex layout container. */
+function AppShellRoot({ open, defaultOpen, onOpenChange, storageKey, keyboardShortcut = true, className, children, ref, ...props }) {
+    const isMobile = useIsMobile();
+    const baseId = React.useId();
+    const isControlledLeft = open?.left !== undefined;
+    const isControlledRight = open?.right !== undefined;
+    const [leftDesktop, setLeftDesktop] = React.useState(() => readStored(storageKey, "left", defaultOpen?.left ?? true));
+    const [rightDesktop, setRightDesktop] = React.useState(() => readStored(storageKey, "right", defaultOpen?.right ?? false));
+    const [leftMobile, setLeftMobile] = React.useState(false);
+    const [rightMobile, setRightMobile] = React.useState(false);
+    // Returning to a wider viewport drops any open mobile overlays.
+    React.useEffect(() => {
+        if (!isMobile) {
+            setLeftMobile(false);
+            setRightMobile(false);
+        }
+    }, [isMobile]);
+    const desktopOpen = {
+        left: isControlledLeft ? open.left : leftDesktop,
+        right: isControlledRight ? open.right : rightDesktop,
+    };
+    const mobileOpen = {
+        left: leftMobile,
+        right: rightMobile,
+    };
+    const setOpen = React.useCallback((side, value) => {
+        if (isMobile) {
+            (side === "left" ? setLeftMobile : setRightMobile)(value);
+            return;
+        }
+        const controlled = side === "left" ? isControlledLeft : isControlledRight;
+        if (!controlled) {
+            (side === "left" ? setLeftDesktop : setRightDesktop)(value);
+            writeStored(storageKey, side, value);
+        }
+        onOpenChange?.(side, value);
+    }, [isMobile, isControlledLeft, isControlledRight, storageKey, onOpenChange]);
+    const value = React.useMemo(() => {
+        const isOpen = (side) => isMobile ? mobileOpen[side] : desktopOpen[side];
+        return {
+            isMobile,
+            isOpen,
+            setOpen,
+            toggle: (side) => setOpen(side, !isOpen(side)),
+            sidebarId: (side) => `${baseId}-sidebar-${side}`,
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isMobile,
+        setOpen,
+        baseId,
+        desktopOpen.left,
+        desktopOpen.right,
+        mobileOpen.left,
+        mobileOpen.right,
+    ]);
+    // ⌘/Ctrl+B toggles the left sidebar (shadcn parity).
+    React.useEffect(() => {
+        if (!keyboardShortcut)
+            return;
+        const onKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && (e.key === "b" || e.key === "B")) {
+                e.preventDefault();
+                value.toggle("left");
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [keyboardShortcut, value]);
+    return (React.createElement(AppShellContext.Provider, { value: value },
+        React.createElement(ChatTokens, null),
+        React.createElement("div", { ref: ref, className: cn("flex h-full w-full", className), "data-vf-appshell": "", "data-vf-chat": "", ...props }, children)));
+}
+/** Focus-trapped off-canvas overlay used on mobile. */
+function SidebarOverlay({ side, width, id, className, children, ...props }) {
+    const ctx = useAppShell();
+    const panelRef = React.useRef(null);
+    const [entered, setEntered] = React.useState(false);
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        const previouslyFocused = document.activeElement;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const raf = requestAnimationFrame(() => setEntered(true));
+        const focusables = () => Array.from(panel?.querySelectorAll(FOCUSABLE_SELECTOR) ?? []);
+        (focusables()[0] ?? panel)?.focus();
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                ctx.setOpen(side ?? "left", false);
+                return;
+            }
+            if (e.key !== "Tab")
+                return;
+            const els = focusables();
+            const first = els[0];
+            const last = els[els.length - 1];
+            if (!first || !last) {
+                e.preventDefault();
+                return;
+            }
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = prevOverflow;
+            cancelAnimationFrame(raf);
+            previouslyFocused?.focus?.();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const hiddenTransform = side === "right" ? "translateX(100%)" : "translateX(-100%)";
+    return (React.createElement("div", { className: "fixed inset-0 z-50 sm:hidden" },
+        React.createElement("div", { className: "absolute inset-0 bg-[var(--overlay)] transition-opacity duration-200 motion-reduce:transition-none", style: { opacity: entered ? 1 : 0 }, onClick: () => ctx.setOpen(side ?? "left", false) }),
+        React.createElement("aside", { ref: panelRef, id: id, role: "dialog", "aria-modal": "true", "aria-label": props["aria-label"] ?? "Sidebar", tabIndex: -1, className: cn("absolute inset-y-0 z-50 flex h-full flex-col bg-[var(--background)] shadow-xl outline-none", "transition-transform duration-200 ease-out motion-reduce:transition-none", side === "right" ? "right-0" : "left-0", className), style: { width, transform: entered ? "translateX(0)" : hiddenTransform }, ...props }, children)));
+}
+/** A dockable sidebar. Renders inline on desktop, as an overlay on mobile. */
+function AppShellSidebar({ side = "left", width = 240, className, children, ...props }) {
+    const ctx = useAppShell();
+    const id = ctx.sidebarId(side);
+    if (!ctx.isOpen(side))
+        return null;
+    if (ctx.isMobile) {
+        return (React.createElement(SidebarOverlay, { side: side, width: width, id: id, className: className, ...props }, children));
+    }
+    return (React.createElement("aside", { id: id, "aria-label": props["aria-label"] ?? "Sidebar", className: cn("flex h-full shrink-0 flex-col", className), style: { width }, ...props }, children));
+}
+/** Sidebar header slot — optional bottom border. */
+function AppShellSidebarHeader({ border = false, className, ...props }) {
+    return (React.createElement("div", { className: cn("shrink-0", border && "border-b border-[var(--outline-border)]", className), ...props }));
+}
+/** Sidebar scroll region — grows to fill and scrolls. */
+function AppShellSidebarContent({ className, ...props }) {
+    return React.createElement("div", { className: cn("min-h-0 flex-1 overflow-y-auto", className), ...props });
+}
+/** Sidebar footer slot — optional top border. */
+function AppShellSidebarFooter({ border = false, className, ...props }) {
+    return (React.createElement("div", { className: cn("shrink-0", border && "border-t border-[var(--outline-border)]", className), ...props }));
+}
+/** The main content column, between/beside the sidebars. */
+function AppShellMain({ className, ...props }) {
+    return (React.createElement("div", { className: cn("flex min-w-0 flex-1 flex-col", className), ...props }));
+}
+/** Optional top bar inside the main column — with or without a bottom border. */
+function AppShellHeader({ border = false, className, ...props }) {
+    return (React.createElement("header", { className: cn("flex shrink-0 items-center gap-1 px-3 py-2", border && "border-b border-[var(--outline-border)]", className), ...props }));
+}
+/** The main content region — grows to fill, host owns overflow. */
+function AppShellContent({ className, ...props }) {
+    return React.createElement("div", { className: cn("min-h-0 flex-1", className), ...props });
+}
+/** Toggle button — built on the shared `Button`, defaults its icon by `side`. */
+function AppShellTrigger({ side = "left", icon, variant = "icon-ghost", size = "icon-default", className, onClick, "aria-label": ariaLabel, ...props }) {
+    const ctx = useAppShell();
+    const open = ctx.isOpen(side);
+    const defaultIcon = side === "right"
+        ? React.createElement(PanelRightIcon, { className: "size-[18px]" })
+        : React.createElement(PanelLeftIcon, { className: "size-[18px]" });
+    return (React.createElement(Button, { variant: variant, size: size, className: className, "aria-expanded": open, "aria-controls": ctx.sidebarId(side), "aria-label": ariaLabel ??
+            `${open ? "Close" : "Open"} ${side} sidebar`, onClick: (e) => {
+            onClick?.(e);
+            ctx.toggle(side);
+        }, ...props }, icon ?? defaultIcon));
+}
+/**
+ * Compound AppShell. Compose:
+ *
+ * ```tsx
+ * <AppShell storageKey="vf-shell">
+ *   <AppShell.Sidebar side="left">
+ *     <AppShell.SidebarHeader border>…</AppShell.SidebarHeader>
+ *     <AppShell.SidebarContent>…</AppShell.SidebarContent>
+ *   </AppShell.Sidebar>
+ *   <AppShell.Main>
+ *     <AppShell.Header border>
+ *       <AppShell.Trigger side="left" />
+ *     </AppShell.Header>
+ *     <AppShell.Content>…</AppShell.Content>
+ *   </AppShell.Main>
+ *   <AppShell.Sidebar side="right">…</AppShell.Sidebar>
+ * </AppShell>
+ * ```
+ */
+export const AppShell = Object.assign(AppShellRoot, {
+    Sidebar: AppShellSidebar,
+    SidebarHeader: AppShellSidebarHeader,
+    SidebarContent: AppShellSidebarContent,
+    SidebarFooter: AppShellSidebarFooter,
+    Main: AppShellMain,
+    Header: AppShellHeader,
+    Content: AppShellContent,
+    Trigger: AppShellTrigger,
+});
+AppShellRoot.displayName = "AppShell";
+AppShellSidebar.displayName = "AppShell.Sidebar";
+AppShellSidebarHeader.displayName = "AppShell.SidebarHeader";
+AppShellSidebarContent.displayName = "AppShell.SidebarContent";
+AppShellSidebarFooter.displayName = "AppShell.SidebarFooter";
+AppShellMain.displayName = "AppShell.Main";
+AppShellHeader.displayName = "AppShell.Header";
+AppShellContent.displayName = "AppShell.Content";
+AppShellTrigger.displayName = "AppShell.Trigger";

package/esm/src/react/components/chat/ui/avatar.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Avatar — ported 1:1 from Veryfront Studio's `UserAvatar`. The one generic
+ * avatar for users, agents, and entities: shows an image when available, else
+ * initials (two-letter for `primary` tone, single capital for `muted`).
+ * Studio's `vf-avatar-initial` container-query sizing is simplified to a fixed
+ * `text-xs` for v1. Private to the chat module.
+ *
+ * @module react/components/chat/ui/avatar
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Avatar>`. */
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    avatarSrc?: string;
+    accentColor?: string;
+    /** `filled` fills with accent (default); `bordered` shows an accent ring. */
+    variant?: "filled" | "bordered";
+    /** `primary` brand bg + two-letter initials; `muted` grey bg + one letter. */
+    tone?: "primary" | "muted";
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Render a user / agent / entity avatar. */
+export declare function Avatar({ className, style, name, avatarSrc, accentColor, variant, tone, ref, ...props }: AvatarProps): React.ReactElement;
+//# sourceMappingURL=avatar.d.ts.map

package/esm/src/react/components/chat/ui/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAcvD,oCAAoC;AACpC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,6CAA6C;AAC7C,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAkB,EAClB,IAAgB,EAChB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAuDlC"}

package/esm/src/react/components/chat/ui/avatar.js

@@ -0,0 +1,44 @@
+/**
+ * Avatar — ported 1:1 from Veryfront Studio's `UserAvatar`. The one generic
+ * avatar for users, agents, and entities: shows an image when available, else
+ * initials (two-letter for `primary` tone, single capital for `muted`).
+ * Studio's `vf-avatar-initial` container-query sizing is simplified to a fixed
+ * `text-xs` for v1. Private to the chat module.
+ *
+ * @module react/components/chat/ui/avatar
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+function getInitials(name) {
+    if (!name)
+        return "?";
+    const [firstName, lastName] = name.split(" ");
+    return [firstName?.charAt(0), lastName?.charAt(0)].filter(Boolean).join("");
+}
+function getSingleInitial(name) {
+    const trimmed = name?.trim?.() ?? "";
+    return trimmed.length > 0 ? trimmed.charAt(0).toUpperCase() : "?";
+}
+/** Render a user / agent / entity avatar. */
+export function Avatar({ className, style, name, avatarSrc, accentColor, variant = "filled", tone = "primary", ref, ...props }) {
+    const isBordered = variant === "bordered";
+    const isMuted = tone === "muted" && !accentColor;
+    const [imageFailed, setImageFailed] = React.useState(false);
+    React.useEffect(() => {
+        setImageFailed(false);
+    }, [avatarSrc]);
+    const showImage = Boolean(avatarSrc) && !imageFailed;
+    const accentStyle = accentColor
+        ? isBordered
+            ? { borderColor: accentColor }
+            : { backgroundColor: accentColor, borderColor: accentColor }
+        : undefined;
+    return (React.createElement("div", { ref: ref, className: cn("@container rounded-full size-8 shrink-0 flex items-center justify-center overflow-hidden", isMuted ? "bg-[var(--accent)]" : "bg-[var(--primary)]", accentColor && "border", className), style: { ...accentStyle, ...style }, ...props }, showImage
+        ? (React.createElement("img", { src: avatarSrc, alt: name, referrerPolicy: "no-referrer", onError: () => setImageFailed(true), className: "w-full h-full rounded-full object-cover" }))
+        : (React.createElement("span", { className: cn(
+            // Scale the initial to the avatar via container-query units, so it
+            // fills small pills AND large empty-state avatars (Studio parity).
+            "w-full h-full flex items-center justify-center font-medium capitalize leading-none", isMuted
+                ? "text-[length:44cqw] text-[var(--foreground)]"
+                : "text-[length:34cqw] text-white") }, isMuted ? getSingleInitial(name) : getInitials(name)))));
+}

package/esm/src/react/components/chat/ui/badge.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Badge — ported 1:1 from Veryfront Studio, semantic classes remapped to
+ * veryfront's `[var(--token)]` vocabulary. The status fill tokens
+ * (`--alert-*-bg`) and `--status-*` text tokens are defined in `theme.ts`, so
+ * every variant renders with its proper fill. Private to the chat module.
+ *
+ * @module react/components/chat/ui/badge
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "warning" | "success" | "outline" | "destructive" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Badge>`. */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    children?: React.ReactNode;
+}
+/** Render a badge. */
+export declare function Badge({ className, variant, ...props }: BadgeProps): React.ReactElement;
+export { badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/esm/src/react/components/chat/ui/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAElD,QAAA,MAAM,aAAa;;;;;yBAgBlB,CAAC;AAEF,mCAAmC;AACnC,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,sBAAsB;AACtB,wBAAgB,KAAK,CACnB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GAC3C,KAAK,CAAC,YAAY,CAEpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/esm/src/react/components/chat/ui/badge.js

@@ -0,0 +1,30 @@
+/**
+ * Badge — ported 1:1 from Veryfront Studio, semantic classes remapped to
+ * veryfront's `[var(--token)]` vocabulary. The status fill tokens
+ * (`--alert-*-bg`) and `--status-*` text tokens are defined in `theme.ts`, so
+ * every variant renders with its proper fill. Private to the chat module.
+ *
+ * @module react/components/chat/ui/badge
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+const badgeVariants = cva("inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full", {
+    variants: {
+        variant: {
+            default: "bg-[var(--foreground)] text-[var(--background)]",
+            success: "bg-[var(--alert-success-bg)] text-[var(--status-success)]",
+            warning: "bg-[var(--alert-warning-bg)] text-[var(--status-warning)]",
+            destructive: "bg-[var(--alert-error-bg)] text-[var(--status-error)]",
+            outline: "border border-[var(--outline-border)] text-[var(--foreground)]",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+/** Render a badge. */
+export function Badge({ className, variant, ...props }) {
+    return React.createElement("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export { badgeVariants };

package/esm/src/react/components/chat/ui/button.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Button — ported 1:1 from the Veryfront Studio `Button` primitive. Studio's
+ * semantic Tailwind classes (`bg-primary`, `vf-type-base`, `vf-weight-normal`)
+ * are mechanically remapped to veryfront's arbitrary-value vocabulary
+ * (`bg-[var(--primary)]`, `text-base`, `font-normal`) — a deterministic token
+ * mapping, not a redesign. Private to the chat module.
+ *
+ * Hover rule: every variant converges to primary/secondary on hover; primary
+ * inverts the other way; destructive deepens; outline drops its border; link
+ * drops underline. Loading keeps the label, sets `aria-busy` + `disabled`, and
+ * applies a subtle opacity pulse.
+ *
+ * @module react/components/chat/ui/button
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "text" | "primary" | "outline" | "destructive" | "ghost" | "icon-ghost" | "icon-primary" | "icon-secondary" | "icon-tertiary" | "secondary" | "secondary-to-link" | "tertiary" | null | undefined;
+    on?: "card" | "chrome" | null | undefined;
+    iconAfter?: "true" | null | undefined;
+    size?: "default" | "icon-default" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "lg-to-default" | "sm" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Button>`. */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as a Radix-style Slot, merging props onto the child element. */
+    asChild?: boolean;
+    /** Slide the icon right on hover. */
+    animateIcon?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/** Render an action button. */
+export declare function Button({ className, variant, size, iconAfter, on, asChild, animateIcon, type, ref, ...props }: ButtonProps): React.ReactElement;
+/** Props accepted by `<LoadingButton>`. */
+export interface LoadingButtonProps extends ButtonProps {
+    /** Pending state — applies the opacity pulse, sets `aria-busy`, disables. */
+    isLoading: boolean;
+}
+/** Button that pulses subtly while pending and blocks double-submits. */
+export declare function LoadingButton({ children, isLoading, disabled, className, ref, ...props }: LoadingButtonProps): React.ReactElement;
+export { buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/esm/src/react/components/chat/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAGlD,QAAA,MAAM,cAAc;;;;;;;;yBA6FnB,CAAC;AAEF,oCAAoC;AACpC,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,+BAA+B;AAC/B,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,SAAS,EACT,EAAE,EACF,OAAe,EACf,WAAmB,EACnB,IAAI,EACJ,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAclC;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,6EAA6E;IAC7E,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAYzC;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/esm/src/react/components/chat/ui/button.js

@@ -0,0 +1,108 @@
+/**
+ * Button — ported 1:1 from the Veryfront Studio `Button` primitive. Studio's
+ * semantic Tailwind classes (`bg-primary`, `vf-type-base`, `vf-weight-normal`)
+ * are mechanically remapped to veryfront's arbitrary-value vocabulary
+ * (`bg-[var(--primary)]`, `text-base`, `font-normal`) — a deterministic token
+ * mapping, not a redesign. Private to the chat module.
+ *
+ * Hover rule: every variant converges to primary/secondary on hover; primary
+ * inverts the other way; destructive deepens; outline drops its border; link
+ * drops underline. Loading keeps the label, sets `aria-busy` + `disabled`, and
+ * applies a subtle opacity pulse.
+ *
+ * @module react/components/chat/ui/button
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+import { Slot } from "./slot.js";
+const buttonVariants = cva([
+    "relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap",
+    "font-normal rounded-full",
+    "transition-[background-color,color,border-color] duration-150 ease-in",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]",
+    "[&_svg]:shrink-0",
+], {
+    variants: {
+        variant: {
+            primary: "bg-[var(--primary)] text-[var(--secondary)] hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            secondary: "bg-[var(--secondary)] text-[var(--foreground)] hover:bg-[var(--primary)] hover:text-[var(--secondary)]",
+            tertiary: "text-[var(--foreground)] hover:bg-[var(--primary)] hover:text-[var(--secondary)]",
+            outline: "border border-[var(--outline-border)] dark:border-[var(--faint)] bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)] hover:border-transparent",
+            destructive: "bg-[var(--destructive)] text-white hover:bg-[color-mix(in_oklch,var(--destructive),black_18%)]",
+            link: "text-[var(--foreground)] underline underline-offset-4 hover:no-underline !px-0 !gap-2",
+            ghost: "bg-transparent text-[var(--foreground)]",
+            text: "bg-transparent text-[var(--foreground)] hover:text-[var(--foreground)] !h-auto !w-auto !p-0 !justify-start !gap-1.5 [&_svg]:!mr-0",
+            "secondary-to-link": "bg-[var(--secondary)] text-[var(--foreground)] hover:bg-[var(--primary)] hover:text-[var(--secondary)] md:bg-transparent md:text-[var(--foreground)] md:hover:bg-transparent md:hover:text-[var(--foreground)] md:underline md:underline-offset-4 md:hover:no-underline md:!px-0 md:!gap-2",
+            "icon-primary": "bg-[var(--primary)] text-[var(--secondary)] hover:bg-[var(--secondary)] hover:text-[var(--foreground)] !p-0 !gap-0 !justify-center",
+            "icon-ghost": "bg-transparent text-[var(--foreground)] !p-0 !gap-0 !justify-center",
+            "icon-secondary": "bg-[var(--secondary)] text-[var(--foreground)] hover:bg-[var(--primary)] hover:text-[var(--secondary)] !p-0 !gap-0 !justify-center",
+            "icon-tertiary": "text-[var(--foreground)] hover:bg-[var(--primary)] hover:text-[var(--secondary)] !p-0 !gap-0 !justify-center",
+        },
+        /**
+         * Surface the button sits on — drives surface-paired hover for ghost /
+         * icon-ghost / primary / icon-primary via compound variants. Default
+         * `chrome`; pass `card` inside white card surfaces.
+         */
+        on: {
+            chrome: "",
+            card: "",
+        },
+        iconAfter: {
+            true: "[&_svg]:ml-3.5 has-[svg]:justify-between",
+        },
+        size: {
+            sm: "h-[32px] px-3.5 text-sm [&_svg]:size-3.5",
+            default: "h-[38px] px-4.5 text-base [&_svg]:size-3.5",
+            lg: "h-[48px] px-6 text-base [&_svg]:size-4.5",
+            "lg-to-default": "h-[48px] px-6 text-base [&_svg]:size-4.5 md:h-[38px] md:px-4.5 md:text-base md:[&_svg]:size-3.5",
+            "icon-xs": "size-5 [&_svg]:size-3",
+            "icon-sm": "size-7 [&_svg]:size-3.5",
+            "icon-default": "size-8 [&_svg]:size-3.5",
+            "icon-lg": "size-9 [&_svg]:size-4.5",
+            "icon-xl": "size-[38px] [&_svg]:size-3.5",
+        },
+    },
+    compoundVariants: [
+        { variant: "tertiary", on: "chrome", class: "bg-[var(--accent)]" },
+        { variant: "icon-tertiary", on: "chrome", class: "bg-[var(--accent)]" },
+        { variant: "ghost", on: "chrome", class: "hover:bg-[var(--accent)]" },
+        { variant: "ghost", on: "card", class: "hover:bg-[var(--tertiary)]" },
+        {
+            variant: "icon-ghost",
+            on: "chrome",
+            class: "hover:bg-[var(--accent)]",
+        },
+        {
+            variant: "icon-ghost",
+            on: "card",
+            class: "hover:bg-[var(--tertiary)]",
+        },
+        {
+            variant: "primary",
+            on: "card",
+            class: "hover:bg-[var(--tertiary)] hover:text-[var(--foreground)]",
+        },
+        {
+            variant: "icon-primary",
+            on: "card",
+            class: "hover:bg-[var(--tertiary)] hover:text-[var(--foreground)]",
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        on: "chrome",
+        size: "default",
+    },
+});
+/** Render an action button. */
+export function Button({ className, variant, size, iconAfter, on, asChild = false, animateIcon = false, type, ref, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { className: cn(buttonVariants({ variant, size, iconAfter, on, className }), animateIcon &&
+            "group [&_svg]:transition-transform [&_svg]:group-hover:translate-x-0.5"), ref: ref, type: asChild ? type : (type ?? "button"), ...props }));
+}
+/** Button that pulses subtly while pending and blocks double-submits. */
+export function LoadingButton({ children, isLoading, disabled, className, ref, ...props }) {
+    return (React.createElement(Button, { ref: ref, disabled: isLoading || disabled, "aria-busy": isLoading || undefined, className: cn(isLoading && "animate-button-loading", className), ...props }, children));
+}
+export { buttonVariants };

package/esm/src/react/components/chat/ui/card.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Card — flat surface primitive, forked dependency-light from Veryfront
+ * Studio's `Card` (studio/components/Card). Solid (`bg-secondary`, no border,
+ * no shadow) for interactive content; outline (`border-outline-border`, no bg)
+ * for layout / non-interactive content. Both flat, radius baked in.
+ *
+ * Studio deps (cva/class-variance-authority, Heading/Text) are swapped for our
+ * private `cva` and plain elements. Private to the chat module.
+ *
+ * @module react/components/chat/ui/card
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const cardVariants: (props?: ({
+    surface?: "outline" | "solid" | null | undefined;
+    padding?: "none" | "md" | "lg" | "sm" | null | undefined;
+    radius?: "default" | "sm" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Card>`. */
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A flat card surface (Studio `Card`). */
+export declare function Card({ className, surface, padding, radius, ref, ...props }: CardProps): React.ReactElement;
+export declare namespace Card {
+    var displayName: string;
+}
+/** Card header row — a flex row (Studio composes these inline). */
+export declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+export declare namespace CardHeader {
+    var displayName: string;
+}
+/** Card body region — vertical stack. */
+export declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+export declare namespace CardContent {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=card.d.ts.map

package/esm/src/react/components/chat/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAElD,QAAA,MAAM,YAAY;;;;;;;yBAyBhB,CAAC;AAEH,kCAAkC;AAClC,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAC/E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,2CAA2C;AAC3C,wBAAgB,IAAI,CAClB,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAChE,KAAK,CAAC,YAAY,CAQpB;yBAVe,IAAI;;;AAapB,mEAAmE;AACnE,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAOpB;yBATe,UAAU;;;AAY1B,yCAAyC;AACzC,wBAAgB,WAAW,CACzB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;yBAJe,WAAW"}