veryfront 0.1.997 → 0.1.998

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

@@ -0,0 +1,41 @@
+/**
+ * Input — ported from Veryfront Studio (`inputStyles` cva + optional leading
+ * icon), semantic classes remapped to veryfront's `[var(--token)]` vocabulary.
+ * Studio's `type="date"` DateInput branch is omitted for v1. Private to the
+ * chat module.
+ *
+ * @module react/components/chat/ui/input
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+const inputVariants = cva([
+    "flex w-full text-[var(--foreground)]",
+    "placeholder:text-[var(--foreground)] placeholder:opacity-25",
+    "transition-[background-color,box-shadow,border-color] duration-150 ease-in",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "bg-[var(--input-bg)] border border-[var(--background)] dark:border-transparent",
+    // veryfront has no --status-error token yet; fall back to --destructive.
+    "data-[invalid=true]:border-[var(--destructive)]",
+], {
+    variants: {
+        size: {
+            sm: "h-[38px] px-3 text-base rounded-md",
+            md: "h-[42px] px-3 text-base rounded-md",
+            lg: "h-[48px] px-4 text-base rounded-md",
+        },
+    },
+    defaultVariants: { size: "lg" },
+});
+/** Render a text input. */
+export function Input({ className, type, size, icon, ref, "data-invalid": dataInvalid, ...props }) {
+    if (icon) {
+        const isSm = size === "sm";
+        return (React.createElement("div", { className: cn(inputVariants({ size }), "relative flex items-center px-0", isSm ? "pl-3 pr-3" : "pl-3.5 pr-4", "gap-2", className), "data-invalid": dataInvalid },
+            React.createElement("span", { className: "shrink-0 pointer-events-none text-[var(--foreground)]" }, icon),
+            React.createElement("input", { type: type, className: "flex-1 min-w-0 bg-transparent text-inherit placeholder:text-[var(--foreground)] placeholder:opacity-25 outline-none border-0 p-0 h-full", "data-invalid": dataInvalid, ref: ref, ...props })));
+    }
+    return (React.createElement("input", { type: type, className: cn(inputVariants({ size }), className), "data-invalid": dataInvalid, ref: ref, ...props }));
+}
+export { inputVariants };

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

@@ -0,0 +1,29 @@
+/**
+ * Label — ported 1:1 from Veryfront Studio, `vf-type/vf-weight` utilities
+ * remapped to plain Tailwind weights/sizes. Private to the chat module.
+ *
+ * NOTE: the font-weight lives ONLY in the `weight` variant (default `medium`),
+ * never in the base — veryfront's `cn`/`cva` do not Tailwind-merge, so a base
+ * `font-medium` would survive alongside a `weight="normal"` `font-normal` and
+ * win by source order, making every label bold. Studio can keep it in the base
+ * because its `cn` uses tailwind-merge; we cannot.
+ *
+ * @module react/components/chat/ui/label
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const labelVariants: (props?: ({
+    size?: "default" | "sm" | "xs" | null | undefined;
+    weight?: "medium" | "normal" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Label>`. */
+export interface LabelProps extends React.ComponentProps<"label">, VariantProps<typeof labelVariants> {
+    ref?: React.Ref<HTMLLabelElement>;
+}
+/** Render a form label. */
+export declare function Label({ className, size, weight, ref, ...props }: LabelProps): React.ReactElement;
+export { labelVariants };
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAElD,QAAA,MAAM,aAAa;;;;;;yBAsBlB,CAAC;AAEF,mCAAmC;AACnC,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,2BAA2B;AAC3B,wBAAgB,KAAK,CACnB,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GACrD,KAAK,CAAC,YAAY,CAQpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * Label — ported 1:1 from Veryfront Studio, `vf-type/vf-weight` utilities
+ * remapped to plain Tailwind weights/sizes. Private to the chat module.
+ *
+ * NOTE: the font-weight lives ONLY in the `weight` variant (default `medium`),
+ * never in the base — veryfront's `cn`/`cva` do not Tailwind-merge, so a base
+ * `font-medium` would survive alongside a `weight="normal"` `font-normal` and
+ * win by source order, making every label bold. Studio can keep it in the base
+ * because its `cn` uses tailwind-merge; we cannot.
+ *
+ * @module react/components/chat/ui/label
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+const labelVariants = cva([
+    "block leading-none text-[var(--foreground)]",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+], {
+    variants: {
+        size: {
+            default: "text-sm",
+            sm: "text-sm",
+            xs: "text-xs",
+        },
+        weight: {
+            normal: "font-normal",
+            medium: "font-medium",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        weight: "medium",
+    },
+});
+/** Render a form label. */
+export function Label({ className, size, weight, ref, ...props }) {
+    return (React.createElement("label", { className: cn(labelVariants({ size, weight }), className), ref: ref, ...props }));
+}
+export { labelVariants };

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

@@ -0,0 +1,47 @@
+/**
+ * List — a lightweight primitive for vertical item lists: sidebars, thread
+ * rails, nav groups, command results. Three parts:
+ *
+ * - `List`      — the container (tight vertical rhythm).
+ * - `ListLabel` — an uppercase section heading (e.g. date groups: "Today").
+ * - `ListItem`  — a row with padding / rounded / hover + active states, an
+ *                 optional `description` line, and an optional trailing `action`
+ *                 slot (revealed on hover, e.g. a "…" menu button).
+ *
+ * Colors use the chrome-surface hover token (`--accent`) — a subtle tint, not a
+ * white fill — matching the Studio sidebar. Zero external deps. Built in
+ * `chat/ui`; designed for a clean move to a top-level `/ui`.
+ *
+ * @module react/components/chat/ui/list
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by {@link List}. */
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Vertical list container. */
+export declare function List({ className, ref, ...props }: ListProps): React.ReactElement;
+/** Props accepted by {@link ListLabel}. */
+export interface ListLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Section heading — uppercase, faint. Use for date groups etc. */
+export declare function ListLabel({ className, ref, ...props }: ListLabelProps): React.ReactElement;
+/** Props accepted by {@link ListItem}. */
+export interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Primary line. Truncates. Omit to render `children` as the body instead. */
+    title?: React.ReactNode;
+    /** Optional secondary line under the title. Truncates. */
+    description?: React.ReactNode;
+    /** Highlight as the current/selected row. */
+    active?: boolean;
+    /**
+     * Trailing slot — e.g. a "…" menu button. Hidden until row hover (or when
+     * `active`). Its clicks don't bubble to the row's `onClick`.
+     */
+    action?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A single list row. */
+export declare function ListItem({ title, description, active, action, className, children, ref, ...props }: ListItemProps): React.ReactElement;
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/list.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAGvD,sCAAsC;AACtC,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,+BAA+B;AAC/B,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAEhF;AAED,2CAA2C;AAC3C,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,mEAAmE;AACnE,wBAAgB,SAAS,CACvB,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,GAC3C,KAAK,CAAC,YAAY,CAWpB;AAED,0CAA0C;AAC1C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,yBAAyB;AACzB,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,MAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA4CpC"}

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

@@ -0,0 +1,40 @@
+/**
+ * List — a lightweight primitive for vertical item lists: sidebars, thread
+ * rails, nav groups, command results. Three parts:
+ *
+ * - `List`      — the container (tight vertical rhythm).
+ * - `ListLabel` — an uppercase section heading (e.g. date groups: "Today").
+ * - `ListItem`  — a row with padding / rounded / hover + active states, an
+ *                 optional `description` line, and an optional trailing `action`
+ *                 slot (revealed on hover, e.g. a "…" menu button).
+ *
+ * Colors use the chrome-surface hover token (`--accent`) — a subtle tint, not a
+ * white fill — matching the Studio sidebar. Zero external deps. Built in
+ * `chat/ui`; designed for a clean move to a top-level `/ui`.
+ *
+ * @module react/components/chat/ui/list
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+/** Vertical list container. */
+export function List({ className, ref, ...props }) {
+    return React.createElement("div", { ref: ref, className: cn("space-y-0.5", className), ...props });
+}
+/** Section heading — uppercase, faint. Use for date groups etc. */
+export function ListLabel({ className, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, className: cn("px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-[var(--faint)]", className), ...props }));
+}
+/** A single list row. */
+export function ListItem({ title, description, active = false, action, className, children, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, "data-active": active || undefined, className: cn("group/li flex items-center gap-1 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors", props.onClick && "cursor-pointer", active
+            ? "bg-[var(--accent)] text-[var(--foreground)]"
+            : "text-[var(--soft)] hover:bg-[var(--accent)] hover:text-[var(--foreground)]", className), ...props },
+        React.createElement("div", { className: "min-w-0 flex-1" }, title !== undefined
+            ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "truncate text-[13px] leading-snug" }, title),
+                description !== undefined && (React.createElement("div", { className: "truncate text-xs leading-snug text-[var(--faint)]" }, description))))
+            : children),
+        action !== undefined && (React.createElement("div", { className: cn("shrink-0 transition-opacity", active
+                ? "opacity-100"
+                : "opacity-0 group-hover/li:opacity-100 focus-within:opacity-100"), onClick: (e) => e.stopPropagation() }, action))));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Pill — ported 1:1 from Veryfront Studio. A filled trigger pill (label +
+ * optional icon/chevron) for selection triggers — "click to open / select"
+ * rather than "click to act". Surface-paired via the `on` prop, matching
+ * Button's surface system. Semantic classes remapped to veryfront's
+ * `[var(--token)]` vocabulary; icon glyphs sized a half-step down. Private to
+ * the chat module.
+ *
+ * @module react/components/chat/ui/pill
+ */
+import * as React from "../../../../../react/react.js";
+import { type VariantProps } from "./cva.js";
+declare const pillVariants: (props?: ({
+    on?: "card" | "chrome" | null | undefined;
+} & {
+    class?: import("../../../../utils/clsx.js").ClassValue;
+    className?: import("../../../../utils/clsx.js").ClassValue;
+}) | undefined) => string;
+/** Props accepted by `<Pill>`. */
+export interface PillProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, VariantProps<typeof pillVariants> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/** Render a selection-trigger pill. */
+export declare function Pill({ className, on, ref, ...props }: PillProps): React.ReactElement;
+export { pillVariants };
+//# sourceMappingURL=pill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAElD,QAAA,MAAM,YAAY;;;;;yBAuBjB,CAAC;AAEF,kCAAkC;AAClC,MAAM,WAAW,SACf,SACE,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,EAC3D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,uCAAuC;AACvC,wBAAgB,IAAI,CAClB,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAC1C,KAAK,CAAC,YAAY,CASpB;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,39 @@
+/**
+ * Pill — ported 1:1 from Veryfront Studio. A filled trigger pill (label +
+ * optional icon/chevron) for selection triggers — "click to open / select"
+ * rather than "click to act". Surface-paired via the `on` prop, matching
+ * Button's surface system. Semantic classes remapped to veryfront's
+ * `[var(--token)]` vocabulary; icon glyphs sized a half-step down. Private to
+ * the chat module.
+ *
+ * @module react/components/chat/ui/pill
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { cva } from "./cva.js";
+const pillVariants = cva([
+    "inline-flex h-9 items-center gap-1.5 rounded-full px-3 text-sm font-normal text-[var(--foreground)]",
+    "cursor-pointer select-none outline-none transition-colors",
+    "focus-visible:bg-[var(--accent)]",
+    "[&_svg]:size-3.5 [&_svg]:shrink-0",
+], {
+    variants: {
+        /**
+         * Surface the pill sits on. `chrome` (default) on the sand background,
+         * `card` on a white card surface. Hover is a soft bump, not a polarity
+         * flip — pills are passive triggers, not actions.
+         */
+        on: {
+            chrome: "bg-[var(--accent)] hover:bg-[var(--accent)]",
+            card: "bg-[var(--tertiary)] hover:bg-[var(--accent)]",
+        },
+    },
+    defaultVariants: {
+        on: "chrome",
+    },
+});
+/** Render a selection-trigger pill. */
+export function Pill({ className, on, ref, ...props }) {
+    return (React.createElement("button", { ref: ref, type: "button", className: cn(pillVariants({ on }), className), ...props }));
+}
+export { pillVariants };

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

@@ -0,0 +1,47 @@
+/**
+ * Popover — BASIC fork of @radix-ui/react-popover with the same API shape
+ * (Root / Trigger / Content + Title / Body / Footer / Actions section parts).
+ * Classes are ported 1:1 from Studio's `Popover` (tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary). Anchored below the trigger;
+ * dismisses on outside-click and `Escape`.
+ *
+ * TODO(a11y): focus trap + restore, portal + collision-aware positioning
+ * (flip/shift), `aria-controls`/`aria-expanded` wiring on the trigger,
+ * `side`/`align` offset variants. Private to the chat module.
+ *
+ * @module react/components/chat/ui/popover
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Popover>`. */
+export interface PopoverProps {
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Popover root — owns open state and the positioning anchor. */
+export declare function Popover({ children, open, defaultOpen, onOpenChange, }: PopoverProps): React.ReactElement;
+/** Trigger — toggles the popover. `asChild` merges onto the child element. */
+export declare function PopoverTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+/** Props accepted by `<PopoverContent>`. */
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment relative to the trigger. */
+    align?: "start" | "end";
+}
+/** Popover surface — rendered below the trigger while open. */
+export declare function PopoverContent({ children, className, align, ...props }: PopoverContentProps): React.ReactElement | null;
+/** Primary heading slot at the top of a popover (Studio: Heading level 4). */
+export declare function PopoverTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;
+/** Small section label inside a popover (Studio: Heading level 5). */
+export declare function PopoverHeader({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;
+/** Body content region (Studio: `px-5 last:pb-5 flex flex-col gap-4`). */
+export declare function PopoverBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Footer region; pass `bordered` for a top divider (Studio). */
+export declare function PopoverFooter({ className, bordered, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    bordered?: boolean;
+}): React.ReactElement;
+/** Right-aligned button row, for use inside a footer. */
+export declare function PopoverActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAavD,qCAAqC;AACrC,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAgBnC;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAiB5F;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmBjD;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAY/D;AAED,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAWpF;AAED,yDAAyD;AACzD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,CAO3D"}

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

@@ -0,0 +1,68 @@
+/**
+ * Popover — BASIC fork of @radix-ui/react-popover with the same API shape
+ * (Root / Trigger / Content + Title / Body / Footer / Actions section parts).
+ * Classes are ported 1:1 from Studio's `Popover` (tokens remapped to
+ * veryfront's `[var(--token)]` vocabulary). Anchored below the trigger;
+ * dismisses on outside-click and `Escape`.
+ *
+ * TODO(a11y): focus trap + restore, portal + collision-aware positioning
+ * (flip/shift), `aria-controls`/`aria-expanded` wiring on the trigger,
+ * `side`/`align` offset variants. Private to the chat module.
+ *
+ * @module react/components/chat/ui/popover
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { Slot } from "./slot.js";
+import { Floating } from "./floating.js";
+const PopoverContext = React.createContext(null);
+/** Popover root — owns open state and the positioning anchor. */
+export function Popover({ children, open, defaultOpen, onOpenChange, }) {
+    const [internal, setInternal] = React.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internal;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setInternal(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const anchorRef = React.useRef(null);
+    return (React.createElement("span", { ref: anchorRef, className: "relative inline-block" },
+        React.createElement(PopoverContext.Provider, { value: { open: isOpen, setOpen, anchorRef } }, children)));
+}
+/** Trigger — toggles the popover. `asChild` merges onto the child element. */
+export function PopoverTrigger({ children, asChild, onClick, ...props }) {
+    const ctx = React.useContext(PopoverContext);
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), "aria-haspopup": "dialog", "aria-expanded": ctx?.open, onClick: (e) => {
+            onClick?.(e);
+            ctx?.setOpen(!ctx.open);
+        }, ...props }, children));
+}
+/** Popover surface — rendered below the trigger while open. */
+export function PopoverContent({ children, className, align = "end", ...props }) {
+    const ctx = React.useContext(PopoverContext);
+    if (!ctx)
+        return null;
+    return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: align, onDismiss: () => ctx.setOpen(false), role: "dialog", className: cn("z-50 min-w-[220px] overflow-hidden rounded-lg bg-[var(--popover)] text-[var(--foreground)] shadow-sm outline-none", className), ...props }, children));
+}
+/** Primary heading slot at the top of a popover (Studio: Heading level 4). */
+export function PopoverTitle({ className, children, ...props }) {
+    return (React.createElement("h4", { className: cn("px-5 pt-5 pb-3 text-base font-semibold text-[var(--foreground)]", className), ...props }, children));
+}
+/** Small section label inside a popover (Studio: Heading level 5). */
+export function PopoverHeader({ className, children, ...props }) {
+    return (React.createElement("h5", { className: cn("p-5 pb-2 text-sm font-medium text-[var(--foreground)]", className), ...props }, children));
+}
+/** Body content region (Studio: `px-5 last:pb-5 flex flex-col gap-4`). */
+export function PopoverBody({ className, ...props }) {
+    return (React.createElement("div", { className: cn("px-5 last:pb-5 flex flex-col gap-4", className), ...props }));
+}
+/** Footer region; pass `bordered` for a top divider (Studio). */
+export function PopoverFooter({ className, bordered, ...props }) {
+    return (React.createElement("div", { className: cn("p-5", bordered && "mt-5 border-t border-[var(--separator)]", className), ...props }));
+}
+/** Right-aligned button row, for use inside a footer. */
+export function PopoverActions({ className, ...props }) {
+    return (React.createElement("div", { className: cn("flex gap-2.5 justify-end items-center", className), ...props }));
+}

package/esm/src/react/components/chat/ui/progress-bar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ProgressBar — ported 1:1 from Veryfront Studio. A determinate or
+ * indeterminate progress track. The presentation helpers (clamp / accessible
+ * name) are inlined; tokens remapped to veryfront's `[var(--token)]`
+ * vocabulary. The `progress-indeterminate` keyframes + `.animate-progress-
+ * indeterminate` utility ship via chat `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/progress-bar
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<ProgressBar>`. */
+export interface ProgressBarProps extends React.ComponentProps<"div"> {
+    /** Completion percentage (0–100). */
+    percent: number;
+    /** Render an indeterminate looping bar instead of a fixed width. */
+    indeterminate?: boolean;
+}
+/** Render a progress track. */
+export declare function ProgressBar({ percent, indeterminate, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ProgressBarProps): React.ReactElement;
+//# sourceMappingURL=progress-bar.d.ts.map

package/esm/src/react/components/chat/ui/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/progress-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAmBvD,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,+BAA+B;AAC/B,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,aAAqB,EACrB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAgCvC"}

package/esm/src/react/components/chat/ui/progress-bar.js

@@ -0,0 +1,31 @@
+/**
+ * ProgressBar — ported 1:1 from Veryfront Studio. A determinate or
+ * indeterminate progress track. The presentation helpers (clamp / accessible
+ * name) are inlined; tokens remapped to veryfront's `[var(--token)]`
+ * vocabulary. The `progress-indeterminate` keyframes + `.animate-progress-
+ * indeterminate` utility ship via chat `theme.ts`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/progress-bar
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+const MIN_PROGRESS = 0;
+const MAX_PROGRESS = 100;
+const DEFAULT_PROGRESS_LABEL = "Progress";
+function clampProgressPercent(percent) {
+    if (!Number.isFinite(percent))
+        return MIN_PROGRESS;
+    return Math.min(MAX_PROGRESS, Math.max(MIN_PROGRESS, percent));
+}
+function getProgressAccessibleName(ariaLabel, ariaLabelledBy) {
+    return ariaLabel ?? (ariaLabelledBy ? undefined : DEFAULT_PROGRESS_LABEL);
+}
+/** Render a progress track. */
+export function ProgressBar({ percent, indeterminate = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+    const clampedPercent = clampProgressPercent(percent);
+    const accessibleName = getProgressAccessibleName(ariaLabel, ariaLabelledBy);
+    return (React.createElement("div", { ...props, className: cn("w-full bg-[var(--accent)] rounded-full h-2.5 overflow-hidden", className), role: "progressbar", "aria-label": accessibleName, "aria-labelledby": ariaLabelledBy, "aria-valuemin": MIN_PROGRESS, "aria-valuemax": MAX_PROGRESS, "aria-valuenow": indeterminate ? undefined : clampedPercent }, indeterminate
+        ? (React.createElement("div", { className: "relative h-full w-full overflow-hidden" },
+            React.createElement("div", { className: "h-full w-[32%] rounded-full bg-[var(--primary)] animate-progress-indeterminate" })))
+        : (React.createElement("div", { className: "bg-[var(--primary)] h-2.5 rounded-full origin-left transition-all duration-1000 ease-out", style: { width: `${clampedPercent}%` } }))));
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Radio — ported 1:1 from Veryfront Studio (which is already a native
+ * `<input type="radio">`, so this is a faithful token remap with full native
+ * a11y — focus, keyboard, form participation). Plus `RadioField` (label +
+ * description) and `RadioGroup`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/radio
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Radio>`. */
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** A single radio input. */
+export declare function Radio({ className, ref, ...props }: RadioProps): React.ReactElement;
+/** Props accepted by `<RadioField>`. */
+export interface RadioFieldProps extends RadioProps {
+    label: React.ReactNode;
+    description?: string;
+}
+/** A radio paired with a clickable label and optional description. */
+export declare function RadioField({ label, description, id, ref, ...props }: RadioFieldProps): React.ReactElement;
+/** Vertical group of radios. */
+export declare function RadioGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAIvD,mCAAmC;AACnC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,4BAA4B;AAC5B,wBAAgB,KAAK,CACnB,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GACvC,KAAK,CAAC,YAAY,CAiBpB;AAED,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,sEAAsE;AACtE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,EAAE,EACF,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAoBtC;AAED,gCAAgC;AAChC,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAQpB"}

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

@@ -0,0 +1,29 @@
+/**
+ * Radio — ported 1:1 from Veryfront Studio (which is already a native
+ * `<input type="radio">`, so this is a faithful token remap with full native
+ * a11y — focus, keyboard, form participation). Plus `RadioField` (label +
+ * description) and `RadioGroup`. Private to the chat module.
+ *
+ * @module react/components/chat/ui/radio
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { Label } from "./label.js";
+/** A single radio input. */
+export function Radio({ className, ref, ...props }) {
+    return (React.createElement("input", { ref: ref, type: "radio", className: cn("size-5 shrink-0 appearance-none rounded-full border border-[var(--outline-border)]", "bg-[var(--input-bg)]", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--edge-medium)]", "disabled:cursor-not-allowed disabled:opacity-50", "checked:border-[var(--primary)] checked:bg-[var(--primary)] checked:shadow-[inset_0_0_0_4px_var(--secondary)]", "transition-colors", className), ...props }));
+}
+/** A radio paired with a clickable label and optional description. */
+export function RadioField({ label, description, id, ref, ...props }) {
+    const generatedId = React.useId();
+    const fieldId = id || generatedId;
+    return (React.createElement(Label, { htmlFor: fieldId, weight: "normal", className: "cursor-pointer flex items-center gap-2.5" },
+        React.createElement(Radio, { id: fieldId, ref: ref, ...props }),
+        React.createElement("span", { className: "flex flex-col" },
+            React.createElement("span", { className: cn(description && "mb-1") }, label),
+            description && (React.createElement("span", { className: "text-base font-normal text-[var(--foreground)]" }, description)))));
+}
+/** Vertical group of radios. */
+export function RadioGroup({ className, ...props }) {
+    return (React.createElement("div", { role: "radiogroup", className: cn("flex flex-col gap-2", className), ...props }));
+}

package/esm/src/react/components/chat/ui/scroll-fade.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ScrollFade — ported 1:1 from Veryfront Studio. A scrollable container that
+ * auto-applies edge fade gradients (mask-image) when content overflows or the
+ * user scrolls. Self-contained (refs + ResizeObserver, no radix); Studio's
+ * `scrollbar-thin` plugin utilities are dropped for the native
+ * `[scrollbar-width:thin]`. Veryfront's nearest equivalent to a "ScrollArea".
+ * Private to the chat module.
+ *
+ * @module react/components/chat/ui/scroll-fade
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<ScrollFade>`. */
+export interface ScrollFadeProps extends React.ComponentProps<"div"> {
+    /**
+     * Which edges to fade. `both` (default) fades the top when scrolled and the
+     * bottom when more content sits below; `bottom` fades only the bottom while
+     * content overflows.
+     */
+    edges?: "both" | "bottom";
+}
+/** A scroll container with auto edge-fade affordances. */
+export declare function ScrollFade({ edges, className, children, ...props }: ScrollFadeProps): React.ReactElement;
+//# sourceMappingURL=scroll-fade.d.ts.map

package/esm/src/react/components/chat/ui/scroll-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-fade.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/scroll-fade.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AASvD,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC3B;AAED,0DAA0D;AAC1D,wBAAgB,UAAU,CAAC,EACzB,KAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAsCtC"}

package/esm/src/react/components/chat/ui/scroll-fade.js

@@ -0,0 +1,40 @@
+/**
+ * ScrollFade — ported 1:1 from Veryfront Studio. A scrollable container that
+ * auto-applies edge fade gradients (mask-image) when content overflows or the
+ * user scrolls. Self-contained (refs + ResizeObserver, no radix); Studio's
+ * `scrollbar-thin` plugin utilities are dropped for the native
+ * `[scrollbar-width:thin]`. Veryfront's nearest equivalent to a "ScrollArea".
+ * Private to the chat module.
+ *
+ * @module react/components/chat/ui/scroll-fade
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+const BOTH_EDGES = "data-[overflow]:not-data-[scrolled]:[mask-image:linear-gradient(to_bottom,black_calc(100%-1.5rem),transparent_100%)] data-[scrolled]:not-data-[overflow]:[mask-image:linear-gradient(to_bottom,transparent_0,black_1.5rem)] data-[overflow]:data-[scrolled]:[mask-image:linear-gradient(to_bottom,transparent_0,black_1.5rem,black_calc(100%-1.5rem),transparent_100%)]";
+const BOTTOM_EDGE = "data-[overflow]:[mask-image:linear-gradient(to_bottom,black_calc(100%-1.5rem),transparent_100%)]";
+/** A scroll container with auto edge-fade affordances. */
+export function ScrollFade({ edges = "both", className, children, ...props }) {
+    const ref = React.useRef(null);
+    const [hasOverflow, setHasOverflow] = React.useState(false);
+    const [hasScrolled, setHasScrolled] = React.useState(false);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return undefined;
+        const update = () => {
+            setHasOverflow(el.scrollHeight - el.clientHeight - el.scrollTop > 1);
+            setHasScrolled(el.scrollTop > 1);
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        for (const child of Array.from(el.children))
+            observer.observe(child);
+        return () => {
+            el.removeEventListener("scroll", update);
+            observer.disconnect();
+        };
+    }, []);
+    return (React.createElement("div", { ref: ref, "data-overflow": hasOverflow || undefined, "data-scrolled": hasScrolled || undefined, className: cn("overflow-auto overscroll-contain [scrollbar-width:thin]", edges === "both" ? BOTH_EDGES : BOTTOM_EDGE, className), ...props }, children));
+}