veryfront 0.1.997 → 0.1.998

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

@@ -0,0 +1,121 @@
+/**
+ * Command — BASIC self-contained fork of Studio's `Command` (which wraps `cmdk`).
+ * A searchable, filtered list: Input / List / Empty / Group / Item (+ Item
+ * Content/Title/Description, Shortcut, Separator). Classes ported 1:1 from
+ * Studio (tokens remapped, icons sized down a half-step). Used by the model
+ * picker (Popover + Command). No `cmdk` dependency.
+ *
+ * TODO(a11y): arrow-key navigation + `aria-activedescendant`, fuzzy ranking
+ * (this does case-insensitive substring matching), `CommandDialog`. Private to
+ * the chat module.
+ *
+ * @module react/components/chat/ui/command
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { SearchIcon, XIcon } from "../icons/index.js";
+import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
+const CommandContext = React.createContext(null);
+function useCommand() {
+    const ctx = React.useContext(CommandContext);
+    if (!ctx)
+        throw new Error("Command parts must be used within <Command>");
+    return ctx;
+}
+/** Command root — owns the filter query and the item registry. */
+export function Command({ className, children, ...props }) {
+    const [search, setSearch] = React.useState("");
+    const [items, setItems] = React.useState(new Map());
+    const register = React.useCallback((id, text) => {
+        setItems((m) => {
+            if (m.get(id) === text)
+                return m;
+            const next = new Map(m);
+            next.set(id, text);
+            return next;
+        });
+    }, []);
+    const unregister = React.useCallback((id) => {
+        setItems((m) => {
+            if (!m.has(id))
+                return m;
+            const next = new Map(m);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const matches = React.useCallback((text) => !search || text.toLowerCase().includes(search.toLowerCase()), [search]);
+    const anyVisible = React.useMemo(() => [...items.values()].some(matches), [items, matches]);
+    return (React.createElement("div", { className: cn("overflow-hidden rounded-lg bg-[var(--secondary)] text-[var(--foreground)]", className), ...props },
+        React.createElement(CommandContext.Provider, { value: { search, setSearch, register, unregister, matches, anyVisible } }, children)));
+}
+/** A Command palette inside a modal Dialog overlay. */
+export function CommandDialog({ children, open, defaultOpen, onOpenChange, }) {
+    return (React.createElement(Dialog, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "overflow-hidden rounded-lg! p-0 shadow-lg" },
+            React.createElement(DialogTitle, { className: "sr-only" }, "Command Menu"),
+            React.createElement(Command, null, children))));
+}
+/** Search input row — bound to the command's filter query. */
+export function CommandInput({ className, icon, placeholder = "Search…", ...props }) {
+    const ctx = useCommand();
+    const hasValue = ctx.search.length > 0;
+    return (React.createElement("div", { className: "relative flex items-center px-2.5 border-b border-[var(--separator)]" },
+        React.createElement("span", { className: "absolute left-4 pointer-events-none text-[var(--foreground)]" }, icon ?? React.createElement(SearchIcon, { className: "size-3.5" })),
+        React.createElement("input", { value: ctx.search, onChange: (e) => ctx.setSearch(e.target.value), placeholder: placeholder, className: cn("flex h-12 w-full bg-transparent pl-9 pr-9 text-sm text-[var(--foreground)] placeholder:text-[var(--foreground)] placeholder:opacity-50 outline-none disabled:cursor-not-allowed disabled:opacity-50", className), ...props }),
+        hasValue && (React.createElement("button", { type: "button", onClick: () => ctx.setSearch(""), "aria-label": "Clear filter", className: "absolute right-2 flex size-6 items-center justify-center rounded-full bg-[var(--accent)] text-[var(--foreground)] transition-colors" },
+            React.createElement(XIcon, { className: "size-3" })))));
+}
+/** Scrollable results list. */
+export function CommandList({ className, variant = "default", ...props }) {
+    return (React.createElement("div", { className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", variant === "flush" ? "p-0" : "p-2.5", className), ...props }));
+}
+/** Shown when the query matches no items. */
+export function CommandEmpty({ className, ...props }) {
+    const ctx = useCommand();
+    if (ctx.anyVisible)
+        return null;
+    return (React.createElement("div", { className: cn("text-sm text-[var(--foreground)] text-center py-8 px-4", className), ...props }));
+}
+/** A labelled group of items; auto-hides when all its items are filtered out. */
+export function CommandGroup({ className, heading, children, ...props }) {
+    return (React.createElement("div", { className: cn("overflow-hidden p-0.5 [&:not(:has([data-command-item]:not([hidden])))]:hidden", className), ...props },
+        heading && (React.createElement("div", { className: "pl-0.5 pr-3 pt-0 pb-1.5 mb-0.5 text-sm font-medium text-[var(--foreground)]" }, heading)),
+        children));
+}
+/** Divider between groups. */
+export function CommandSeparator({ className }) {
+    return React.createElement("div", { className: cn("-mx-2.5 my-2 h-px bg-[var(--separator)]", className) });
+}
+/** A selectable, filterable result row. */
+export function CommandItem({ className, align = "center", value, disabled, onSelect, children, ...props }) {
+    const ctx = useCommand();
+    const id = React.useId();
+    const text = value ?? "";
+    React.useEffect(() => {
+        ctx.register(id, text);
+        return () => ctx.unregister(id);
+    }, [id, text]);
+    const visible = ctx.matches(text);
+    return (React.createElement("div", { "data-command-item": "", role: "option", "aria-disabled": disabled || undefined, hidden: !visible || undefined, className: cn("relative flex gap-3 select-none cursor-default rounded-md px-3 h-auto py-2 text-base font-normal outline-none transition-colors", "hover:bg-[var(--tertiary)] dark:hover:bg-[var(--accent)]", "aria-disabled:pointer-events-none aria-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 min-w-0 group", align === "start" ? "items-start [&>svg]:mt-0.5" : "items-center", className), onClick: () => {
+            if (disabled)
+                return;
+            onSelect?.(value);
+        }, ...props }, children));
+}
+/** Flex column wrapper for an item's title + description. */
+export function CommandItemContent({ className, ...props }) {
+    return React.createElement("div", { className: cn("flex-1 min-w-0", className), ...props });
+}
+/** Item primary text. */
+export function CommandItemTitle({ className, ...props }) {
+    return React.createElement("div", { className: cn("text-sm font-medium", className), ...props });
+}
+/** Item secondary text. */
+export function CommandItemDescription({ className, ...props }) {
+    return (React.createElement("div", { className: cn("text-xs text-[var(--foreground)] leading-tight", className), ...props }));
+}
+/** Trailing shortcut / metadata text. */
+export function CommandShortcut({ className, ...props }) {
+    return (React.createElement("span", { className: cn("ml-auto text-xs text-[var(--foreground)] opacity-60", className), ...props }));
+}

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

@@ -0,0 +1,36 @@
+/**
+ * `cva` — forked from class-variance-authority (Apache-2.0, © Joe Bell), inlined
+ * so `veryfront/chat` takes no external `class-variance-authority` dependency.
+ *
+ * The runtime is faithful to upstream; the types are narrowed to what the chat
+ * UI primitives use. Private to the chat module — not a public export.
+ *
+ * @module react/components/chat/ui/cva
+ */
+import { type ClassValue, clsx } from "../../../../utils/clsx.js";
+/** Re-export of the class joiner, matching upstream's `cx`. */
+export declare const cx: typeof clsx;
+type VariantShape = Record<string, Record<string, ClassValue>>;
+type VariantSelection<V extends VariantShape> = {
+    [K in keyof V]?: keyof V[K] | null | undefined;
+};
+type CvaProps<V extends VariantShape> = VariantSelection<V> & {
+    class?: ClassValue;
+    className?: ClassValue;
+};
+interface CvaConfig<V extends VariantShape> {
+    variants?: V;
+    compoundVariants?: Array<Partial<{
+        [K in keyof V]: keyof V[K] | Array<keyof V[K]>;
+    }> & {
+        class?: ClassValue;
+        className?: ClassValue;
+    }>;
+    defaultVariants?: VariantSelection<V>;
+}
+/** Extracts the variant props of a `cva` function, like upstream's helper. */
+export type VariantProps<T extends (...args: any) => any> = Omit<NonNullable<Parameters<T>[0]>, "class" | "className">;
+/** Build a class-name function from a base plus a variants config. */
+export declare function cva<V extends VariantShape>(base?: ClassValue, config?: CvaConfig<V>): (props?: CvaProps<V>) => string;
+export {};
+//# sourceMappingURL=cva.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cva.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/cva.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAElE,+DAA+D;AAC/D,eAAO,MAAM,EAAE,aAAO,CAAC;AAEvB,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AAE/D,KAAK,gBAAgB,CAAC,CAAC,SAAS,YAAY,IAAI;KAC7C,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS;CAC/C,CAAC;AAEF,KAAK,QAAQ,CAAC,CAAC,SAAS,YAAY,IAChC,gBAAgB,CAAC,CAAC,CAAC,GACnB;IAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,SAAS,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAEnD,UAAU,SAAS,CAAC,CAAC,SAAS,YAAY;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,gBAAgB,CAAC,EAAE,KAAK,CACpB,OAAO,CAAC;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC,GAC3D;QAAE,KAAK,CAAC,EAAE,UAAU,CAAC;QAAC,SAAS,CAAC,EAAE,UAAU,CAAA;KAAE,CACjD,CAAC;IACF,eAAe,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACvC;AAED,8EAA8E;AAE9E,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,IAAI,IAAI,CAC9D,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7B,OAAO,GAAG,WAAW,CACtB,CAAC;AAKF,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,CAAC,SAAS,YAAY,EACxC,IAAI,CAAC,EAAE,UAAU,EACjB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,GACpB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,CA8CjC"}

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

@@ -0,0 +1,45 @@
+/**
+ * `cva` — forked from class-variance-authority (Apache-2.0, © Joe Bell), inlined
+ * so `veryfront/chat` takes no external `class-variance-authority` dependency.
+ *
+ * The runtime is faithful to upstream; the types are narrowed to what the chat
+ * UI primitives use. Private to the chat module — not a public export.
+ *
+ * @module react/components/chat/ui/cva
+ */
+import { clsx } from "../../../../utils/clsx.js";
+/** Re-export of the class joiner, matching upstream's `cx`. */
+export const cx = clsx;
+const falsyToString = (value) => typeof value === "boolean" ? String(value) : value === 0 ? "0" : value;
+/** Build a class-name function from a base plus a variants config. */
+export function cva(base, config) {
+    return (props) => {
+        if (!config?.variants) {
+            return cx(base, props?.class, props?.className);
+        }
+        const { variants, defaultVariants } = config;
+        const variantClassNames = Object.keys(variants).map((variant) => {
+            const variantProp = props?.[variant];
+            const defaultVariantProp = defaultVariants?.[variant];
+            if (variantProp === null)
+                return null;
+            const variantKey = String(falsyToString(variantProp) ?? falsyToString(defaultVariantProp) ?? "");
+            return variants[variant]?.[variantKey];
+        });
+        const resolved = { ...defaultVariants };
+        if (props) {
+            for (const [key, value] of Object.entries(props)) {
+                if (value !== undefined)
+                    resolved[key] = value;
+            }
+        }
+        const compoundClassNames = config.compoundVariants?.reduce((acc, compound) => {
+            const { class: cvClass, className: cvClassName, ...selectors } = compound;
+            const matches = Object.entries(selectors).every(([key, value]) => Array.isArray(value)
+                ? value.includes(resolved[key])
+                : resolved[key] === value);
+            return matches ? [...acc, cvClass, cvClassName] : acc;
+        }, []);
+        return cx(base, variantClassNames, compoundClassNames, props?.class, props?.className);
+    };
+}

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

@@ -0,0 +1,55 @@
+/**
+ * Dialog — BASIC fork of @radix-ui/react-dialog with the same API shape (Root /
+ * Trigger / Content + Header / Title / Description / Body / Footer / Action /
+ * Cancel / Close / Form). Classes ported 1:1 from Studio's `Dialog` (tokens
+ * remapped; `Heading` level 2 + `Text` inlined). Modal overlay + centered panel;
+ * dismisses on `Escape` and overlay click.
+ *
+ * TODO(a11y): focus trap + restore, `aria-labelledby`/`aria-describedby` wiring,
+ * scroll-lock, portal, enter/exit animation. Private to the chat module.
+ *
+ * @module react/components/chat/ui/dialog
+ */
+import * as React from "../../../../../react/react.js";
+import { type ButtonProps } from "./button.js";
+/** Props accepted by `<Dialog>`. */
+export interface DialogProps {
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Dialog root — owns open state. */
+export declare function Dialog({ children, open, defaultOpen, onOpenChange, }: DialogProps): React.ReactElement;
+/** Trigger — opens the dialog. `asChild` merges onto the child element. */
+export declare function DialogTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+/** Modal surface — overlay + centered panel, rendered while open. */
+export declare function DialogContent({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+/** Left-aligned title + description block. */
+export declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Dialog title — Studio Heading level 2 (20px). Semibold so Inter reads at
+ * Studio's medium-on-Söhne weight (workbench heading convention). */
+export declare function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;
+/** Dialog description — body text, left-aligned. */
+export declare function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.ReactElement;
+/** Scrollable body area with a bottom edge-fade. */
+export declare function DialogBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Sticky footer row — action left, cancel right. */
+export declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Layout-neutral `<form>` shell (`display: contents`) wrapping header/body/footer. */
+export declare function DialogForm({ className, ...props }: React.FormHTMLAttributes<HTMLFormElement>): React.ReactElement;
+/** Props accepted by `<DialogAction>`. */
+export interface DialogActionProps extends ButtonProps {
+    isLoading?: boolean;
+}
+/** Recommended action button (primary, default size). */
+export declare function DialogAction({ isLoading, variant, size, type, ...props }: DialogActionProps): React.ReactElement;
+/** Alternate button (secondary, default size) that closes the dialog. */
+export declare function DialogCancel({ className, variant, size, onClick, ...props }: ButtonProps): React.ReactElement;
+/** Closes the dialog. `asChild` merges onto the child element. */
+export declare function DialogClose({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/dialog.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,116 @@
+/**
+ * Dialog — BASIC fork of @radix-ui/react-dialog with the same API shape (Root /
+ * Trigger / Content + Header / Title / Description / Body / Footer / Action /
+ * Cancel / Close / Form). Classes ported 1:1 from Studio's `Dialog` (tokens
+ * remapped; `Heading` level 2 + `Text` inlined). Modal overlay + centered panel;
+ * dismisses on `Escape` and overlay click.
+ *
+ * TODO(a11y): focus trap + restore, `aria-labelledby`/`aria-describedby` wiring,
+ * scroll-lock, portal, enter/exit animation. Private to the chat module.
+ *
+ * @module react/components/chat/ui/dialog
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { Slot } from "./slot.js";
+import { ScrollFade } from "./scroll-fade.js";
+import { Button, LoadingButton } from "./button.js";
+const DialogContext = React.createContext(null);
+function useDialog() {
+    const ctx = React.useContext(DialogContext);
+    if (!ctx)
+        throw new Error("Dialog parts must be used within <Dialog>");
+    return ctx;
+}
+/** Dialog root — owns open state. */
+export function Dialog({ 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]);
+    return (React.createElement(DialogContext.Provider, { value: { open: isOpen, setOpen } }, children));
+}
+/** Trigger — opens the dialog. `asChild` merges onto the child element. */
+export function DialogTrigger({ children, asChild, onClick, ...props }) {
+    const ctx = useDialog();
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(true);
+        }, ...props }, children));
+}
+/** Modal surface — overlay + centered panel, rendered while open. */
+export function DialogContent({ className, children, ...props }) {
+    const ctx = useDialog();
+    const panelRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!ctx.open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                ctx.setOpen(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        // Focus the first focusable descendant on open (radix-like) — e.g. a
+        // CommandInput — falling back to the panel itself. Full focus-trap is TODO.
+        const panel = panelRef.current;
+        const focusable = panel?.querySelector('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
+        (focusable ?? panel)?.focus();
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [ctx.open]);
+    if (!ctx.open)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 z-50" },
+        React.createElement("div", { className: "fixed inset-0 bg-[var(--overlay)]", onClick: () => ctx.setOpen(false) }),
+        React.createElement("div", { ref: panelRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: cn("fixed left-1/2 top-1/2 z-50 w-[calc(100%-3rem)] max-w-xl max-h-[85vh] -translate-x-1/2 -translate-y-1/2", "rounded-xl bg-[var(--dialog)] text-[var(--foreground)] shadow-lg outline-none overflow-hidden flex flex-col", className), ...props }, children)));
+}
+/** Left-aligned title + description block. */
+export function DialogHeader({ className, ...props }) {
+    return React.createElement("div", { className: cn("flex flex-col px-6 pt-6 shrink-0", className), ...props });
+}
+/** Dialog title — Studio Heading level 2 (20px). Semibold so Inter reads at
+ * Studio's medium-on-Söhne weight (workbench heading convention). */
+export function DialogTitle({ className, ...props }) {
+    return (React.createElement("h2", { className: cn("text-xl font-semibold text-[var(--foreground)]", className), ...props }));
+}
+/** Dialog description — body text, left-aligned. */
+export function DialogDescription({ className, ...props }) {
+    return (React.createElement("p", { className: cn("text-base font-normal text-[var(--foreground)] mt-2", className), ...props }));
+}
+/** Scrollable body area with a bottom edge-fade. */
+export function DialogBody({ className, children, ...props }) {
+    return (React.createElement(ScrollFade, { edges: "bottom", className: cn("px-6 mt-6 pb-1 min-h-0 flex flex-col gap-4 text-left", className), ...props }, children));
+}
+/** Sticky footer row — action left, cancel right. */
+export function DialogFooter({ className, ...props }) {
+    return React.createElement("div", { className: cn("p-6 flex justify-start gap-3 shrink-0", className), ...props });
+}
+/** Layout-neutral `<form>` shell (`display: contents`) wrapping header/body/footer. */
+export function DialogForm({ className, ...props }) {
+    return React.createElement("form", { className: cn("contents", className), ...props });
+}
+/** Recommended action button (primary, default size). */
+export function DialogAction({ isLoading, variant = "primary", size = "default", type = "button", ...props }) {
+    return (React.createElement(LoadingButton, { type: type, variant: variant, size: size, isLoading: Boolean(isLoading), ...props }));
+}
+/** Alternate button (secondary, default size) that closes the dialog. */
+export function DialogCancel({ className, variant = "secondary", size = "default", onClick, ...props }) {
+    const ctx = useDialog();
+    return (React.createElement(Button, { variant: variant, size: size, className: className, onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(false);
+        }, ...props }));
+}
+/** Closes the dialog. `asChild` merges onto the child element. */
+export function DialogClose({ children, asChild, onClick, ...props }) {
+    const ctx = useDialog();
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(false);
+        }, ...props }, children));
+}

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

@@ -0,0 +1,41 @@
+/**
+ * Drawer — BASIC bottom-sheet fork of Studio's `Drawer` (which is a large
+ * Vaul-style component). Same API shape for the parts we need: Root / Trigger /
+ * Content (overlay + sheet + drag handle) / Title / Header / Body / Footer /
+ * Close. Surface classes ported 1:1 from Studio (tokens remapped). Slides up
+ * from the bottom; dismisses on `Escape` and overlay click.
+ *
+ * TODO(a11y): focus trap + restore, drag-to-dismiss / snap points, scroll-lock,
+ * portal, enter/exit animation. Private to the chat module.
+ *
+ * @module react/components/chat/ui/drawer
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<Drawer>`. */
+export interface DrawerProps {
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Drawer root — owns open state. */
+export declare function Drawer({ children, open, defaultOpen, onOpenChange, }: DrawerProps): React.ReactElement;
+/** Trigger — opens the drawer. `asChild` merges onto the child element. */
+export declare function DrawerTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+/** Bottom sheet — overlay + sliding surface with a drag handle. */
+export declare function DrawerContent({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+/** Drawer title — 18px medium (Studio Heading-ish). Add `sr-only` to hide. */
+export declare function DrawerTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;
+/** Header column wrapper. */
+export declare function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Scrollable body area. */
+export declare function DrawerBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Sticky footer, full-width stacked actions. */
+export declare function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/** Closes the drawer. `asChild` merges onto the child element. */
+export declare function DrawerClose({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAcvD,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC1B,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,qCAAqC;AACrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAalC;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,EAC5B,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,CAe5F;AAED,mEAAmE;AACnE,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2ClE;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,YAAY,CAO/D;AAED,6BAA6B;AAC7B,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAEpB;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAOpB;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAC1B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAC5D,KAAK,CAAC,YAAY,CAUpB;AAED,kEAAkE;AAClE,wBAAgB,WAAW,CAAC,EAC1B,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,CAe5F"}

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

@@ -0,0 +1,92 @@
+/**
+ * Drawer — BASIC bottom-sheet fork of Studio's `Drawer` (which is a large
+ * Vaul-style component). Same API shape for the parts we need: Root / Trigger /
+ * Content (overlay + sheet + drag handle) / Title / Header / Body / Footer /
+ * Close. Surface classes ported 1:1 from Studio (tokens remapped). Slides up
+ * from the bottom; dismisses on `Escape` and overlay click.
+ *
+ * TODO(a11y): focus trap + restore, drag-to-dismiss / snap points, scroll-lock,
+ * portal, enter/exit animation. Private to the chat module.
+ *
+ * @module react/components/chat/ui/drawer
+ */
+import * as React from "../../../../../react/react.js";
+import { cn } from "../theme.js";
+import { Slot } from "./slot.js";
+const DrawerContext = React.createContext(null);
+function useDrawer() {
+    const ctx = React.useContext(DrawerContext);
+    if (!ctx)
+        throw new Error("Drawer parts must be used within <Drawer>");
+    return ctx;
+}
+/** Drawer root — owns open state. */
+export function Drawer({ 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]);
+    return (React.createElement(DrawerContext.Provider, { value: { open: isOpen, setOpen } }, children));
+}
+/** Trigger — opens the drawer. `asChild` merges onto the child element. */
+export function DrawerTrigger({ children, asChild, onClick, ...props }) {
+    const ctx = useDrawer();
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(true);
+        }, ...props }, children));
+}
+/** Bottom sheet — overlay + sliding surface with a drag handle. */
+export function DrawerContent({ children, className, ...props }) {
+    const ctx = useDrawer();
+    const sheetRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!ctx.open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                ctx.setOpen(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        const focusable = sheetRef.current?.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])');
+        (focusable ?? sheetRef.current)?.focus();
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [ctx.open]);
+    if (!ctx.open)
+        return null;
+    return (React.createElement("div", { className: "fixed inset-0 z-50" },
+        React.createElement("div", { className: "fixed inset-0 bg-[var(--overlay)]", onClick: () => ctx.setOpen(false) }),
+        React.createElement("div", { ref: sheetRef, role: "dialog", "aria-modal": "true", tabIndex: -1, className: cn("fixed inset-x-0 bottom-0 z-50 flex flex-col max-h-[85vh] w-full rounded-t-xl bg-[var(--drawer)] text-[var(--foreground)] outline-none", className), ...props },
+            React.createElement("div", { "aria-hidden": "true", className: "mx-auto mt-3 h-[3px] w-[30px] shrink-0 rounded-full bg-[var(--outline-border)]" }),
+            children)));
+}
+/** Drawer title — 18px medium (Studio Heading-ish). Add `sr-only` to hide. */
+export function DrawerTitle({ className, ...props }) {
+    return (React.createElement("h2", { className: cn("text-lg font-medium text-[var(--foreground)]", className), ...props }));
+}
+/** Header column wrapper. */
+export function DrawerHeader({ className, ...props }) {
+    return React.createElement("div", { className: cn("flex flex-col px-4.5 pt-1 pb-2 shrink-0", className), ...props });
+}
+/** Scrollable body area. */
+export function DrawerBody({ className, ...props }) {
+    return (React.createElement("div", { className: cn("flex-1 overflow-y-auto px-4.5 pb-4", className), ...props }));
+}
+/** Sticky footer, full-width stacked actions. */
+export function DrawerFooter({ className, ...props }) {
+    return (React.createElement("div", { className: cn("shrink-0 px-4 pb-4 pt-3 flex flex-col gap-3 [&>button]:w-full", className), ...props }));
+}
+/** Closes the drawer. `asChild` merges onto the child element. */
+export function DrawerClose({ children, asChild, onClick, ...props }) {
+    const ctx = useDrawer();
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, { ...(asChild ? {} : { type: "button" }), onClick: (e) => {
+            onClick?.(e);
+            ctx.setOpen(false);
+        }, ...props }, children));
+}

package/esm/src/react/components/chat/ui/dropdown-menu.d.ts

@@ -0,0 +1,63 @@
+/**
+ * DropdownMenu — BASIC fork of @radix-ui/react-dropdown-menu with the same API
+ * shape (Root / Trigger / Content / Group / Item / ItemMeta / Separator /
+ * Label). Classes are ported 1:1 from Studio's `DropdownMenu` (token names
+ * remapped to veryfront's `[var(--token)]` vocabulary). Opens below the
+ * trigger; dismisses on outside-click, `Escape`, and item select.
+ *
+ * TODO(a11y): roving focus + arrow-key navigation, typeahead, `Tab` handling,
+ * portal + collision-aware positioning (flip/shift), `aria-activedescendant`,
+ * RadioItem/CheckboxItem/Sub menus. Private to the chat module.
+ *
+ * @module react/components/chat/ui/dropdown-menu
+ */
+import * as React from "../../../../../react/react.js";
+/** Props accepted by `<DropdownMenu>`. */
+export interface DropdownMenuProps {
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** DropdownMenu root — owns open state and the positioning anchor. */
+export declare function DropdownMenu({ children, open, defaultOpen, onOpenChange, }: DropdownMenuProps): React.ReactElement;
+/** Trigger — toggles the menu. `asChild` merges onto the child element. */
+export declare function DropdownMenuTrigger({ children, asChild, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}): React.ReactElement;
+/** Props accepted by `<DropdownMenuContent>`. */
+export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment relative to the trigger. */
+    align?: "start" | "end";
+}
+/** Menu surface — rendered below the trigger while open. No border (Studio). */
+export declare function DropdownMenuContent({ children, className, align, ...props }: DropdownMenuContentProps): React.ReactElement | null;
+/** Groups related items with a tight inner gap (Studio: `gap-px p-0.5`). */
+export declare function DropdownMenuGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+/** Props accepted by `<DropdownMenuItem>`. */
+export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Called when the item is chosen (also closes the menu). */
+    onSelect?: () => void;
+    /** `asChild` merges item styling onto your own element. */
+    asChild?: boolean;
+}
+/** A selectable menu item. Icons render at `size-3.5` (14px). */
+export declare function DropdownMenuItem({ children, className, onSelect, onClick, disabled, asChild, ...props }: DropdownMenuItemProps): React.ReactElement;
+/** Trailing metadata text — keyboard shortcuts, counts, badges. */
+export declare function DropdownMenuItemMeta({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+/** Full-width divider between groups (Studio: `-mx-2.5 my-2`). */
+export declare function DropdownMenuSeparator({ className }: {
+    className?: string;
+}): React.ReactElement;
+/** Non-interactive section label — full-strength foreground (Studio). */
+export declare function DropdownMenuLabel({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/esm/src/react/components/chat/ui/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../../../src/src/react/components/chat/ui/dropdown-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,KAAK,MAAM,+BAA+B,CAAC;AAavD,0CAA0C;AAC1C,MAAM,WAAW,iBAAiB;IAChC,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,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAgBxC;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CAAC,EAClC,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,iDAAiD;AACjD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,KAAe,EACf,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmBtD;AAED,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAC/B,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzE,KAAK,CAAC,YAAY,CAMpB;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1F,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAyB5C;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB;AAED,kEAAkE;AAClE,wBAAgB,qBAAqB,CACnC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC,KAAK,CAAC,YAAY,CAEpB;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,CAWrB"}