veryfront 0.1.997 → 0.1.998

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

@@ -0,0 +1,64 @@
+/**
+ * Select — BASIC fork of @radix-ui/react-select with the same API shape (Root /
+ * Trigger / Value / Content / Item / Label / Separator / Group). Classes ported
+ * 1:1 from Studio's `Select` (tokens remapped). A single-select listbox that
+ * opens below the trigger and dismisses on outside-click / `Escape`.
+ *
+ * TODO(a11y): roving focus + arrow/typeahead keyboard nav, `aria-activedescendant`,
+ * portal + collision-aware positioning, scroll-into-view. The selected option's
+ * label is tracked once its Content has rendered at least once (basic). Private
+ * to the chat module.
+ *
+ * @module react/components/chat/ui/select
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const selectTriggerVariants: (props?: ({
+    size?: "md" | "lg" | "sm" | "xs" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Select>`. */
+export interface SelectProps {
+    children: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Select root — owns the selected value, open state, and label registry. */
+export declare function Select({ children, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, }: SelectProps): React.ReactElement;
+/** Props accepted by `<SelectTrigger>`. */
+export interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof selectTriggerVariants> {
+}
+/** Trigger — shows the current value and toggles the listbox. */
+export declare function SelectTrigger({ className, children, size, onClick, ...props }: SelectTriggerProps): React.ReactElement;
+/** Displays the selected option's label, or a placeholder. */
+export declare function SelectValue({ placeholder }: {
+    placeholder?: string;
+}): React.ReactElement;
+/** Listbox surface — rendered below the trigger while open. */
+export declare function SelectContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+/** Props accepted by `<SelectItem>`. */
+export interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    value: string;
+    disabled?: boolean;
+}
+/** A selectable option. Shows a check when it is the current value. */
+export declare function SelectItem({ className, children, value, disabled, onClick, ...props }: SelectItemProps): React.ReactElement;
+/** Non-interactive section label. */
+export declare function SelectLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Divider between option groups. */
+export declare function SelectSeparator({ className }: {
+    className?: string;
+}): React.ReactElement;
+/** Groups related options (semantic only in this basic version). */
+export declare function SelectGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+export { selectTriggerVariants };
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAIlD,QAAA,MAAM,qBAAqB;;;;;yBAoB1B,CAAC;AAmBF,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,6EAA6E;AAC7E,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA4ClC;AAmBD,2CAA2C;AAC3C,MAAM,WAAW,kBACf,SACE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAmBzC;AAED,8DAA8D;AAC9D,wBAAgB,WAAW,CACzB,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GACxC,KAAK,CAAC,YAAY,CAQpB;AAED,+DAA+D;AAC/D,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAoBlE;AAED,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CA6BtC;AAED,qCAAqC;AACrC,wBAAgB,WAAW,CACzB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAUpB;AAED,qCAAqC;AACrC,wBAAgB,eAAe,CAC7B,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,YAAY,CAEpB;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CACzB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzE,KAAK,CAAC,YAAY,CAEpB;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -0,0 +1,148 @@
+/**
+ * Select — BASIC fork of @radix-ui/react-select with the same API shape (Root /
+ * Trigger / Value / Content / Item / Label / Separator / Group). Classes ported
+ * 1:1 from Studio's `Select` (tokens remapped). A single-select listbox that
+ * opens below the trigger and dismisses on outside-click / `Escape`.
+ *
+ * TODO(a11y): roving focus + arrow/typeahead keyboard nav, `aria-activedescendant`,
+ * portal + collision-aware positioning, scroll-into-view. The selected option's
+ * label is tracked once its Content has rendered at least once (basic). Private
+ * to the chat module.
+ *
+ * @module react/components/chat/ui/select
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+import { CheckIcon, ChevronDownIcon } from "../icons/index.js";
+import { Floating } from "./floating.js";
+const selectTriggerVariants = cva([
+    "flex w-full items-center justify-between text-[var(--foreground)]",
+    "transition-[background-color,box-shadow,border-color] duration-150 ease-in",
+    "focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    "[&>span]:line-clamp-1",
+    "bg-[var(--input-bg)] border border-[var(--background)] dark:border-transparent",
+    "data-[invalid=true]:border-[var(--status-error)]",
+], {
+    variants: {
+        size: {
+            xs: "h-[32px] px-2.5 text-sm rounded-md",
+            sm: "h-[38px] px-3 text-base rounded-md",
+            md: "h-[42px] px-3 text-base rounded-md",
+            lg: "h-[50px] px-4 text-base rounded-md",
+        },
+    },
+    defaultVariants: { size: "lg" },
+});
+const SelectContext = React.createContext(null);
+function useSelect() {
+    const ctx = React.useContext(SelectContext);
+    if (!ctx)
+        throw new Error("Select components must be used within <Select>");
+    return ctx;
+}
+/** Select root — owns the selected value, open state, and label registry. */
+export function Select({ children, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, }) {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const anchorRef = React.useRef(null);
+    const isValueControlled = value !== undefined;
+    const isOpenControlled = open !== undefined;
+    const currentValue = isValueControlled ? value : internalValue;
+    const isOpen = isOpenControlled ? open : internalOpen;
+    const setValue = React.useCallback((next) => {
+        if (!isValueControlled)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [isValueControlled, onValueChange]);
+    const setOpen = React.useCallback((next) => {
+        if (!isOpenControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [isOpenControlled, onOpenChange]);
+    // Collect value→label synchronously from the item children so the trigger
+    // shows the selected LABEL immediately — no flip from raw value on first open.
+    const labels = React.useMemo(() => {
+        const map = new Map();
+        collectSelectLabels(children, map);
+        return map;
+    }, [children]);
+    return (React.createElement("span", { ref: anchorRef, className: "relative inline-block w-full" },
+        React.createElement(SelectContext.Provider, { value: {
+                value: currentValue,
+                setValue,
+                open: isOpen,
+                setOpen,
+                labels,
+                anchorRef,
+            } }, children)));
+}
+/** Walk children for `SelectItem` elements, mapping `value` → label node. */
+function collectSelectLabels(node, map) {
+    React.Children.forEach(node, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        if (child.type === SelectItem) {
+            const p = child.props;
+            if (p.value !== undefined)
+                map.set(p.value, p.children);
+        }
+        else {
+            const p = child.props;
+            if (p?.children)
+                collectSelectLabels(p.children, map);
+        }
+    });
+}
+/** Trigger — shows the current value and toggles the listbox. */
+export function SelectTrigger({ className, children, size, onClick, ...props }) {
+    const ctx = useSelect();
+    return (React.createElement("button", { type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": ctx.open, className: cn(selectTriggerVariants({ size }), className), onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(!ctx.open);
+        }, ...props },
+        children,
+        React.createElement(ChevronDownIcon, { className: "size-3.5 opacity-50" })));
+}
+/** Displays the selected option's label, or a placeholder. */
+export function SelectValue({ placeholder }) {
+    const ctx = useSelect();
+    const label = ctx.value !== undefined ? ctx.labels.get(ctx.value) ?? ctx.value : undefined;
+    return (React.createElement("span", { className: cn(label === undefined && "opacity-25") }, label ?? placeholder));
+}
+/** Listbox surface — rendered below the trigger while open. */
+export function SelectContent({ className, children, ...props }) {
+    const ctx = useSelect();
+    return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: "start", matchTriggerWidth: true, onDismiss: () => ctx.setOpen(false), role: "listbox", className: cn("z-50 max-h-96 overflow-x-hidden overflow-y-auto rounded-lg bg-[var(--secondary)] text-[var(--foreground)] shadow-sm", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className), ...props },
+        React.createElement("div", { className: "p-2.5" }, children)));
+}
+/** A selectable option. Shows a check when it is the current value. */
+export function SelectItem({ className, children, value, disabled, onClick, ...props }) {
+    const ctx = useSelect();
+    const selected = ctx.value === value;
+    return (React.createElement("div", { role: "option", "aria-selected": selected, "aria-disabled": disabled || undefined, className: cn("relative flex w-full cursor-pointer select-none items-center rounded-md h-[38px] px-3 text-base outline-none transition-colors", "hover:bg-[var(--tertiary)] focus:bg-[var(--tertiary)]", "aria-disabled:pointer-events-none aria-disabled:opacity-50", className), ...props, 
+        // Compose the caller's onClick with selection (caller runs first) so a
+        // consumer-supplied handler adds to — never overrides — selection.
+        onClick: (e) => {
+            if (disabled)
+                return;
+            onClick?.(e);
+            ctx.setValue(value);
+            ctx.setOpen(false);
+        } },
+        React.createElement("span", { className: "line-clamp-1" }, children),
+        selected && React.createElement(CheckIcon, { className: "ml-auto pl-2 size-3 shrink-0 box-content" })));
+}
+/** Non-interactive section label. */
+export function SelectLabel({ className, ...props }) {
+    return (React.createElement("div", { className: cn("px-3 py-1.5 text-sm font-medium text-[var(--foreground)]", className), ...props }));
+}
+/** Divider between option groups. */
+export function SelectSeparator({ className }) {
+    return React.createElement("div", { className: cn("-mx-2.5 my-1.5 h-px bg-[var(--tertiary)]", className) });
+}
+/** Groups related options (semantic only in this basic version). */
+export function SelectGroup({ children, className }) {
+    return React.createElement("div", { role: "group", className: className }, children);
+}
+export { selectTriggerVariants };

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

@@ -0,0 +1,25 @@
+/**
+ * Shimmer — ported 1:1 from Veryfront Studio. Animates a light band across text
+ * via `bg-clip-text`, for streaming / loading states. Tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary (`--background`, `--soft` both exist);
+ * Studio's app-only `can-hover:`/`touch:` variants are dropped in favour of the
+ * standard `motion-safe`/`motion-reduce` pair. The `shimmer-sweep` keyframes
+ * ship via chat `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/shimmer
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Shimmer>`. */
+export interface ShimmerProps {
+    children: React.ReactNode;
+    /** Element to render as. @default "span" */
+    as?: React.ElementType;
+    className?: string;
+    /** Sweep duration in seconds. @default 2 */
+    duration?: number;
+    /** Band spread multiplier (× content length). @default 2 */
+    spread?: number;
+}
+/** Render shimmering text. */
+export declare function Shimmer({ children, as: Component, className, duration, spread, }: ShimmerProps): React.ReactElement;
+//# sourceMappingURL=shimmer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/shimmer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,qCAAqC;AACrC,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,8BAA8B;AAC9B,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,EAAE,EAAE,SAAkB,EACtB,SAAS,EACT,QAAY,EACZ,MAAU,GACX,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAuBnC"}

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

@@ -0,0 +1,24 @@
+/**
+ * Shimmer — ported 1:1 from Veryfront Studio. Animates a light band across text
+ * via `bg-clip-text`, for streaming / loading states. Tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary (`--background`, `--soft` both exist);
+ * Studio's app-only `can-hover:`/`touch:` variants are dropped in favour of the
+ * standard `motion-safe`/`motion-reduce` pair. The `shimmer-sweep` keyframes
+ * ship via chat `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/shimmer
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+/** Render shimmering text. */
+export function Shimmer({ children, as: Component = "span", className, duration = 2, spread = 2, }) {
+    const dynamicSpread = React.useMemo(() => {
+        const length = typeof children === "string" ? children.length : 20;
+        return length * spread;
+    }, [children, spread]);
+    return (React.createElement(Component, { className: cn("relative inline-block min-w-0 bg-[length:250%_100%,auto] bg-clip-text text-transparent [background-position:100%_center]", "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", "motion-safe:animate-[shimmer-sweep_linear_infinite] motion-reduce:bg-none motion-reduce:text-current", className), style: {
+            "--spread": `${dynamicSpread}px`,
+            animationDuration: `${duration}s`,
+            backgroundImage: "var(--bg), linear-gradient(var(--soft), var(--soft))",
+        } }, children));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Skeleton — ported 1:1 from Veryfront Studio. Animated placeholder bar; size
+ * it with `w-*` / `h-*` utilities. Private to the chat module.
+ *
+ * @module react/components/chat/ui/skeleton
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Skeleton>`. */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Render an animated placeholder bar. */
+export declare function Skeleton({ className, ref, ...props }: SkeletonProps): React.ReactElement;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/skeleton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,sCAAsC;AACtC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,0CAA0C;AAC1C,wBAAgB,QAAQ,CACtB,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAC1C,KAAK,CAAC,YAAY,CAWpB"}

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

@@ -0,0 +1,12 @@
+/**
+ * Skeleton — ported 1:1 from Veryfront Studio. Animated placeholder bar; size
+ * it with `w-*` / `h-*` utilities. Private to the chat module.
+ *
+ * @module react/components/chat/ui/skeleton
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+/** Render an animated placeholder bar. */
+export function Skeleton({ className, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, className: cn("h-4 w-full animate-pulse rounded-md bg-[var(--accent)]", className), ...props }));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * `Slot` — forked from @radix-ui/react-slot (MIT, © WorkOS), inlined so
+ * `veryfront/chat` takes no external Radix dependency. Merges its props onto a
+ * single child element (the `asChild` pattern): className is concatenated,
+ * style is shallow-merged, event handlers are chained (child first), and refs
+ * are composed.
+ *
+ * Scoped to the single-child case the chat primitives use — Radix's
+ * `Slottable`/lazy-children handling is intentionally omitted. Private to the
+ * chat module.
+ *
+ * @module react/components/chat/ui/slot
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Slot>`. */
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+/** Render `Slot` — merge props onto its single child element. */
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=slot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/slot.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAkDvD,kCAAkC;AAClC,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iEAAiE;AACjE,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,yBAAyB,CAChD,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAgB7C,CAAC"}

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

@@ -0,0 +1,70 @@
+/**
+ * `Slot` — forked from @radix-ui/react-slot (MIT, © WorkOS), inlined so
+ * `veryfront/chat` takes no external Radix dependency. Merges its props onto a
+ * single child element (the `asChild` pattern): className is concatenated,
+ * style is shallow-merged, event handlers are chained (child first), and refs
+ * are composed.
+ *
+ * Scoped to the single-child case the chat primitives use — Radix's
+ * `Slottable`/lazy-children handling is intentionally omitted. Private to the
+ * chat module.
+ *
+ * @module react/components/chat/ui/slot
+ */
+import * as React from "../../../../../react/react.js";
+/** Compose multiple refs into one callback ref. */
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref != null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function mergeProps(slotProps, childProps) {
+    const overrideProps = { ...childProps };
+    for (const propName in childProps) {
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        if (/^on[A-Z]/.test(propName)) {
+            // Chain handlers: child runs first, then the slot's.
+            if (typeof slotPropValue === "function" &&
+                typeof childPropValue === "function") {
+                overrideProps[propName] = (...args) => {
+                    childPropValue(...args);
+                    slotPropValue(...args);
+                };
+            }
+            else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        }
+        else if (propName === "style") {
+            overrideProps[propName] = {
+                ...slotPropValue,
+                ...childPropValue,
+            };
+        }
+        else if (propName === "className") {
+            overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean)
+                .join(" ");
+        }
+    }
+    return { ...slotProps, ...overrideProps };
+}
+/** Render `Slot` — merge props onto its single child element. */
+export const Slot = React.forwardRef(function Slot({ children, ...slotProps }, forwardedRef) {
+    if (React.isValidElement(children)) {
+        const childProps = (children.props ?? {});
+        const childRef = children.ref ??
+            childProps.ref;
+        const merged = mergeProps(slotProps, childProps);
+        merged.ref = forwardedRef ? composeRefs(forwardedRef, childRef) : childRef;
+        return React.cloneElement(children, merged);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});

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

@@ -0,0 +1,28 @@
+/**
+ * Status — ported 1:1 from Veryfront Studio. A coloured status dot with a
+ * label (optionally pulsing / responsively hidden). Semantic classes remapped
+ * to veryfront's `[var(--token)]` vocabulary — the `--status-*` dot tokens all
+ * exist in `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/status
+ */
+import * as React from "../../../../../react/react.js";
+/** Dot colour, keyed to the `--status-*` palette. */
+export type StatusColor = "gray" | "blue" | "green" | "red" | "yellow";
+/** Props accepted by `<Status>`. */
+export interface StatusProps {
+    label: string;
+    color: StatusColor;
+    /** Pulse the dot (e.g. an in-progress run). */
+    pulse?: boolean;
+    /** Render the label (off → dot-only, label kept for screen readers). */
+    showLabel?: boolean;
+    /** Hide the label via container query when space is tight. */
+    responsive?: boolean;
+    /** `'sm'` (14px, default) or `'inherit'` to inherit the parent's size. */
+    size?: "sm" | "inherit";
+    className?: string;
+}
+/** Render a status dot + label. */
+export declare function Status({ label, color, pulse, showLabel, responsive, size, className, }: StatusProps): React.ReactElement;
+//# sourceMappingURL=status.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/status.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvE,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,mCAAmC;AACnC,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,UAAU,EACV,IAAW,EACX,SAAS,GACV,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA4BlC"}

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

@@ -0,0 +1,23 @@
+/**
+ * Status — ported 1:1 from Veryfront Studio. A coloured status dot with a
+ * label (optionally pulsing / responsively hidden). Semantic classes remapped
+ * to veryfront's `[var(--token)]` vocabulary — the `--status-*` dot tokens all
+ * exist in `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/status
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+const dotColorMap = {
+    gray: "bg-[var(--status-neutral)]",
+    blue: "bg-[var(--status-info)]",
+    green: "bg-[var(--status-success)]",
+    red: "bg-[var(--status-error)]",
+    yellow: "bg-[var(--status-warning)]",
+};
+/** Render a status dot + label. */
+export function Status({ label, color, pulse, showLabel = true, responsive, size = "sm", className, }) {
+    return (React.createElement("div", { className: cn("flex items-center gap-1.5", responsive && "@container", className) },
+        React.createElement("span", { className: cn("size-2 rounded-full shrink-0", dotColorMap[color], pulse && "animate-pulse") }),
+        React.createElement("span", { className: cn(size === "sm" && "text-sm", "font-normal text-[var(--foreground)] truncate", !showLabel && "sr-only", showLabel && responsive && "hidden @[5rem]:inline") }, label)));
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Switch — Studio's Switch is built on `@radix-ui/react-switch`; here it's
+ * re-expressed on a native `<input type="checkbox" role="switch">` (full a11y
+ * for free) styled as a track + thumb, keeping Studio's exact sizes and
+ * transitions. Self-contained, no radix. Accepts the native API plus an
+ * optional radix-style `onCheckedChange`. Plus `SwitchField`.
+ *
+ * @module react/components/chat/ui/switch
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const switchTrackVariants: (props?: ({
+    size?: "md" | "lg" | "sm" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Switch>`. */
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, VariantProps<typeof switchTrackVariants> {
+    /** Radix-style convenience callback fired with the next checked state. */
+    onCheckedChange?: (checked: boolean) => void;
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** A toggle switch. */
+export declare function Switch({ className, size, onChange, onCheckedChange, ref, ...props }: SwitchProps): React.ReactElement;
+/** Props accepted by `<SwitchField>`. */
+export interface SwitchFieldProps extends SwitchProps {
+    label: React.ReactNode;
+    description?: string;
+}
+/** A switch with a label + optional description, label-left / switch-right. */
+export declare function SwitchField({ label, description, id, ref, ...props }: SwitchFieldProps): React.ReactElement;
+export { switchTrackVariants };
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAGlD,QAAA,MAAM,mBAAmB;;;;;yBAcxB,CAAC;AAmBF,oCAAoC;AACpC,MAAM,WAAW,WACf,SACE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,0EAA0E;IAC1E,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,uBAAuB;AACvB,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAiBlC;AAED,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+EAA+E;AAC/E,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,EAAE,EACF,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAmBvC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,58 @@
+/**
+ * Switch — Studio's Switch is built on `@radix-ui/react-switch`; here it's
+ * re-expressed on a native `<input type="checkbox" role="switch">` (full a11y
+ * for free) styled as a track + thumb, keeping Studio's exact sizes and
+ * transitions. Self-contained, no radix. Accepts the native API plus an
+ * optional radix-style `onCheckedChange`. Plus `SwitchField`.
+ *
+ * @module react/components/chat/ui/switch
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+import { Label } from "./label.js";
+const switchTrackVariants = cva([
+    "relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-colors",
+    "border border-[var(--background)] dark:border-transparent",
+    "bg-[var(--input-bg)] has-[:checked]:bg-[var(--primary)]",
+    "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-[var(--edge-medium)]",
+    "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+], {
+    variants: {
+        size: { sm: "h-6 w-10", md: "h-7 w-12", lg: "h-8 w-14" },
+    },
+    defaultVariants: { size: "md" },
+});
+const switchThumbVariants = cva([
+    "pointer-events-none block rounded-full transition-transform duration-200 translate-x-0.5",
+    "bg-[var(--background)] peer-checked:bg-[var(--secondary)]",
+], {
+    variants: {
+        size: {
+            sm: "size-4 peer-checked:translate-x-[18px]",
+            md: "size-5 peer-checked:translate-x-[22px]",
+            lg: "size-6 peer-checked:translate-x-[26px]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/** A toggle switch. */
+export function Switch({ className, size, onChange, onCheckedChange, ref, ...props }) {
+    return (React.createElement("label", { className: cn(switchTrackVariants({ size }), className) },
+        React.createElement("input", { ref: ref, type: "checkbox", role: "switch", className: "peer sr-only", onChange: (e) => {
+                onChange?.(e);
+                onCheckedChange?.(e.currentTarget.checked);
+            }, ...props }),
+        React.createElement("span", { className: switchThumbVariants({ size }) })));
+}
+/** A switch with a label + optional description, label-left / switch-right. */
+export function SwitchField({ label, description, id, ref, ...props }) {
+    const generatedId = React.useId();
+    const fieldId = id || generatedId;
+    return (React.createElement("div", { className: "flex items-center justify-between gap-4" },
+        React.createElement(Label, { htmlFor: fieldId, className: "cursor-pointer flex flex-col flex-1" },
+            React.createElement("span", { className: "mb-1.5" }, label),
+            description && (React.createElement("span", { className: "text-sm font-normal text-[var(--foreground)]" }, description))),
+        React.createElement(Switch, { id: fieldId, size: "sm", ref: ref, ...props })));
+}
+export { switchTrackVariants };

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

@@ -0,0 +1,44 @@
+/**
+ * Tabs — ported from Veryfront Studio `components/Tabs/Tabs.tsx`, with the
+ * `motion/react` spring-slide forked out: the active pill is a static
+ * background (no dependency, no layout animation), only the `transition-colors`
+ * CSS that Studio already ships. Semantic classes remapped to veryfront's
+ * `[var(--token)]` vocabulary. Private to the chat module.
+ *
+ * Flat, prefixed exports (`Tabs` + `TabsItem`) to match the other `ui/`
+ * primitives (`SelectItem`, `DialogTrigger`, …). Note: `cn` is clsx-only (no
+ * tailwind-merge), so overriding a base utility via `className` needs the `!`
+ * suffix (e.g. `px-8!`).
+ *
+ * Two sizes:
+ * - `default` — filled track (`--input-bg`), 34/38px, accent pill.
+ * - `sm` — flat, outlined, 32px, for panel headers.
+ *
+ * @module react/components/chat/ui/tabs
+ */
+import * as React from "../../../../../react/react.js";
+type TabsSize = "default" | "sm";
+/** Props accepted by `<Tabs>` (the tablist container). */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    size?: TabsSize;
+    children: React.ReactNode;
+}
+/** Tablist container — manages active state and passes context to items. */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+/** Props accepted by `<TabsItem>`. */
+export interface TabsItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    href?: string;
+    children: React.ReactNode;
+}
+/**
+ * Individual tab — renders as a button, or an anchor when `href` is set.
+ * Forwards native props/ref and composes the caller's `onClick` with the
+ * internal selection (caller's runs first, then the tab activates), so a
+ * consumer-supplied handler adds to — never overrides — selection.
+ */
+export declare const TabsItem: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,KAAK,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;AAUjC,0DAA0D;AAC1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,4EAA4E;AAC5E,eAAO,MAAM,IAAI,kFAsBf,CAAC;AAGH,sCAAsC;AACtC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,yFA8CpB,CAAC"}