@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/components/ui/editable-text.js

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import { Swap } from '../../motion/index.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Typography applied to both the trigger button and the editing input so the
+ * layout does not shift when entering or leaving edit mode.
+ */
+const editableTextVariants = cva('', {
+    variants: {
+        /**
+         * Visual scale. Heading presentations mirror the heading scale
+         * (font-semibold, tracking-tight). Body presentations set only size and
+         * line-height. Decoupled from the `as` prop so an `h1` can render at the
+         * `h3` visual size without breaking document outline.
+         */
+        presentation: {
+            h1: 'scroll-m-20 text-4xl font-semibold tracking-tight',
+            h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
+            h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+            h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+            h5: 'scroll-m-20 text-lg font-semibold tracking-tight',
+            h6: 'scroll-m-20 text-base font-semibold tracking-tight',
+            /** PaneHeader bold titles — matches `Heading level={1} size="3"` (H3 Normal). */
+            pageTitle: 'scroll-m-20 font-heading text-h3 font-medium leading-tight tracking-tight',
+            base: 'text-base leading-normal',
+            sm: 'text-sm leading-normal',
+        },
+        /**
+         * Text alignment. Applied to the trigger *and* the input from the same
+         * variant, so the text does not jump horizontally when entering edit mode —
+         * an input left at the browser default would always render left-aligned
+         * while a centred trigger sat above it.
+         */
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right',
+        },
+    },
+    defaultVariants: { presentation: 'base', align: 'left' },
+});
+/**
+ * `EditableText` — inline-rename primitive.
+ *
+ * Replaces Vibe's `EditableText` (sidebar rename, 2 call sites) **and**
+ * `EditableHeading` (chat header title, 1 call site). One component covers
+ * both: use `as` for heading semantics and `presentation` for visual size.
+ *
+ * ### Accessibility contract
+ *
+ * **Read mode:** a native `<button>` — keyboard-focusable, announces as
+ * interactive, activatable via Enter or Space.
+ *
+ * **Edit mode:** a `<input type="text">` — on entry, focus moves to the
+ * input and the existing text is pre-selected so typing immediately replaces.
+ *
+ * **Commit:** Enter or blur. Blur is the right default here because it
+ * mirrors every OS file-rename pattern — clicking away is "done".
+ *
+ * **Cancel:** Escape. The _original_ value is restored (not just edit mode
+ * exited). Focus returns to the trigger button.
+ *
+ * **Empty:** blank input is rejected on commit; `onCommit` is not called and
+ * the prior value is silently restored.
+ *
+ * **Focus return:** after commit or cancel, focus returns to the trigger
+ * button — not to `document.body`.
+ *
+ * **Mode-change perception:** the native `<button>` announces as interactive.
+ * On activation focus shifts to the input, which is the screen-reader cue for
+ * the mode change. No `aria-live` region is used — it would fire twice (once
+ * on enter, once on exit) and is noisier than the natural focus-based cue.
+ * A visually-hidden `aria-describedby` hint tells SR users how to activate
+ * without lengthening the button's primary label.
+ *
+ * **Layout stability:** the trigger button and the input share identical
+ * padding and a 1 px border (transparent on the button, `border-input` on
+ * the input) so the surrounding layout does not shift on mode change.
+ */
+function EditableText({ value, onCommit, placeholder = 'Untitled', disabled = false, defaultEditing = false, onEditingChange, as: Tag, presentation, align, className, 'aria-label': ariaLabel, ...rest }) {
+    const [editing, setEditingState] = useState(defaultEditing && !disabled);
+    const [draft, setDraft] = useState(defaultEditing ? value : '');
+    // Mirrors `editing` synchronously. The input leaving edit mode stays mounted for its exit
+    // crossfade, so it still receives the blur when focus returns to the trigger; this lets that
+    // late blur be ignored instead of committing a second time.
+    const editingRef = useRef(editing);
+    function setEditing(next) {
+        editingRef.current = next;
+        setEditingState(next);
+        onEditingChange?.(next);
+    }
+    const triggerRef = useRef(null);
+    const inputRef = useRef(null);
+    // Set true in the Escape handler so the blur that fires when the input
+    // unmounts does not also commit on top of the cancel path.
+    const cancelledRef = useRef(false);
+    // Prevents the focus-return effect from stealing focus on initial mount.
+    const wasEditingRef = useRef(false);
+    const hintId = useId();
+    // Focus management: enter / leave edit mode.
+    useEffect(() => {
+        if (editing) {
+            wasEditingRef.current = true;
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+        else if (wasEditingRef.current) {
+            // Return focus to trigger after commit or cancel.
+            triggerRef.current?.focus();
+        }
+    }, [editing]);
+    function startEditing() {
+        if (disabled)
+            return;
+        cancelledRef.current = false;
+        setDraft(value);
+        setEditing(true);
+    }
+    function commit() {
+        const trimmed = draft.trim();
+        if (trimmed.length > 0 && trimmed !== value) {
+            onCommit?.(trimmed);
+        }
+        // Empty or unchanged → restore silently. Either way exit edit mode.
+        setEditing(false);
+    }
+    function cancel() {
+        // Mark cancelled so the subsequent blur event does not double-commit.
+        cancelledRef.current = true;
+        // draft is discarded; the value prop retains the original.
+        setEditing(false);
+    }
+    function handleTriggerKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            startEditing();
+        }
+    }
+    function handleInputKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commit();
+        }
+        else if (e.key === 'Escape') {
+            cancel();
+        }
+    }
+    function handleBlur() {
+        if (cancelledRef.current || !editingRef.current) {
+            cancelledRef.current = false;
+            return;
+        }
+        commit();
+    }
+    const display = value;
+    const accessibleName = ariaLabel ?? (display || placeholder);
+    // Shared box model: identical padding + 1 px border keeps the layout
+    // stable across read/edit mode. The border is transparent on the trigger
+    // and `border-input` on the input.
+    const sharedBox = 'w-full rounded-sm border px-1 py-0.5 outline-none transition-colors bg-transparent';
+    const typographyClass = editableTextVariants({ presentation, align });
+    const trigger = (_jsx("button", { ref: triggerRef, type: "button", "data-slot": "editable-text", disabled: disabled, "aria-describedby": hintId, "aria-label": accessibleName, onClick: startEditing, onKeyDown: handleTriggerKeyDown, className: cn(sharedBox, 'cursor-text border-transparent text-foreground', 
+        // Hover affordance. Without it nothing signals the text is editable until it
+        // is focused, which leaves mouse users guessing. Revealing the field boundary
+        // on hover is the established inline-edit pattern, and because the border is
+        // already present-but-transparent it costs no layout shift.
+        'enabled:hover:border-input enabled:hover:bg-muted/50', 
+        // `enabled:` matters — CSS :hover still matches a disabled button, so without
+        // it a disabled field would light up on hover and look actionable.
+        'focus-visible:border-ring', 'disabled:cursor-not-allowed disabled:opacity-50', typographyClass), children: display ? (_jsx("span", { className: "block truncate", children: display })) : (_jsx("span", { className: "block truncate text-muted-foreground", children: placeholder })) }));
+    const input = (_jsx("input", { ref: inputRef, type: "text", "data-slot": "editable-text-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: handleInputKeyDown, onBlur: handleBlur, "aria-label": accessibleName, placeholder: placeholder, className: cn(sharedBox, 'border-input text-foreground', 'focus-visible:border-ring', 'placeholder:text-muted-foreground', typographyClass) }));
+    // Visually-hidden hint referenced by the trigger button's aria-describedby.
+    // Tells SR users how to activate without polluting the button's primary name
+    // (which would be repeated on every announce).
+    const hint = (_jsx("span", { id: hintId, className: "sr-only", children: "Press Enter or Space to rename." }));
+    // A `span.block`, not a `div`: this element is nested inside `<Tag>` when `as` is set,
+    // and the content model of h1–h6 is *phrasing* content, which a div is not. `block`
+    // makes it lay out identically, so this costs nothing and keeps the markup valid.
+    const root = (_jsxs("span", { "data-slot": "editable-text-root", className: cn('relative block w-full', className), ...rest, children: [hint, _jsx(Swap, { inline: true, swapKey: editing ? 'input' : 'trigger', className: "block w-full", children: editing ? input : trigger })] }));
+    if (Tag !== undefined) {
+        // Semantic heading wrapper so screen-reader users can reach this field by heading
+        // level. The interactive button lives inside the heading rather than the heading
+        // carrying role="button", which keeps the document outline intact.
+        return _jsx(Tag, { children: root });
+    }
+    return root;
+}
+export { EditableText, editableTextVariants };

package/dist/components/ui/heading.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Visual size scale for headings. Decoupled from the semantic level so an `h2`
+ * can render at the visual weight of an `h4` without breaking heading order.
+ */
+declare const headingVariants: (props?: ({
+    size?: "1" | "2" | "3" | "4" | "5" | "6" | null | undefined;
+    color?: "default" | "destructive" | "muted" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingProps = React.ComponentProps<'h1'> & VariantProps<typeof headingVariants> & {
+    /**
+     * Semantic HTML level (`h1`–`h6`). Governs document outline and screen-reader
+     * announcement. Defaults to `2`.
+     */
+    level?: HeadingLevel;
+    /** Truncate overflowing text with an ellipsis; the full text shows in a tooltip while clipped. */
+    ellipsis?: boolean;
+    /** Only with `ellipsis`. `false` turns the tooltip off; a string overrides its content. */
+    tooltip?: boolean | string;
+};
+declare function Heading({ className, level, size, color, ellipsis, tooltip, ref: forwardedRef, ...props }: HeadingProps): import("react").JSX.Element;
+export { Heading, headingVariants };
+export type { HeadingLevel, HeadingProps };

package/dist/components/ui/heading.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { TruncationTooltip, useTruncationTooltip } from './truncate.js';
+/**
+ * Visual size scale for headings. Decoupled from the semantic level so an `h2`
+ * can render at the visual weight of an `h4` without breaking heading order.
+ */
+const headingVariants = cva('font-heading font-semibold leading-tight tracking-tight text-foreground', {
+    variants: {
+        /**
+         * Visual size — what the heading *looks like*.
+         * Pick the level that fits the information hierarchy; pick the size that fits
+         * the visual hierarchy. They are independent.
+         */
+        size: {
+            '1': 'text-4xl',
+            '2': 'text-3xl',
+            '3': 'text-h3 font-medium',
+            '4': 'text-xl',
+            '5': 'text-lg',
+            '6': 'text-base',
+        },
+        /**
+         * Color role — maps to the semantic token layer.
+         */
+        color: {
+            default: 'text-foreground',
+            muted: 'text-muted-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive',
+        },
+    },
+    defaultVariants: {
+        size: '2',
+        color: 'default',
+    },
+});
+/**
+ * Token-backed heading primitive.
+ *
+ * The semantic level (`level` prop, controlling which `<h*>` tag is rendered)
+ * is intentionally decoupled from the visual size (`size` prop). This lets you
+ * render an `h2` at the visual scale of an `h4` — a real and common layout need
+ * — without breaking heading-order accessibility rules.
+ *
+ * ```tsx
+ * // Visually large, semantically h1 (page title)
+ * <Heading level={1} size="1">Page title</Heading>
+ *
+ * // Sub-section inside an h2, looks like h3 but is h3
+ * <Heading level={3} size="3">Section title</Heading>
+ *
+ * // Sidebar header: visually small but correctly h2
+ * <Heading level={2} size="5">Recent activity</Heading>
+ * ```
+ */
+/**
+ * Attach `node` to the caller's ref. Returns a detach function so React 19 callback-ref cleanups
+ * keep working: the caller's own cleanup when it returned one, else the legacy `ref(null)`.
+ */
+function attachRef(ref, node) {
+    if (typeof ref === 'function') {
+        const cleanup = ref(node);
+        return typeof cleanup === 'function' ? cleanup : () => ref(null);
+    }
+    if (ref) {
+        ref.current = node;
+        return () => {
+            ref.current = null;
+        };
+    }
+    return undefined;
+}
+function Heading({ className, level = 2, size, color, ellipsis = false, tooltip = true, ref: forwardedRef, ...props }) {
+    const Tag = `h${level}`;
+    const ref = useRef(null);
+    const setRef = useCallback((node) => {
+        ref.current = node;
+        if (!node)
+            return undefined;
+        const detach = attachRef(forwardedRef, node);
+        return () => {
+            ref.current = null;
+            detach?.();
+        };
+    }, [forwardedRef]);
+    const truncation = useTruncationTooltip(ref, ellipsis, tooltip, props.children);
+    return (_jsx(TruncationTooltip, { text: truncation.text, truncated: truncation.truncated, children: _jsx(Tag, { ref: setRef, "data-slot": "heading", className: cn(headingVariants({ size, color, className }), ellipsis && 'truncate'), ...props }) }));
+}
+export { Heading, headingVariants };

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,9 @@
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { type PopupVariant } from '../../motion/popup.js';
+declare function HoverCard({ actionsRef, onOpenChange, ...props }: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function HoverCardContent({ className, align, alignOffset, side, sideOffset, motion, ...props }: PreviewCardPrimitive.Popup.Props & {
+    /** `fade` only fades, for a list that opens on hover inside a dense form. */
+    motion?: Extract<PopupVariant, 'scale' | 'fade'>;
+} & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): import("react").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/ui/hover-card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+function HoverCard({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function HoverCardTrigger({ ...props }) {
+    return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({ className, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, motion = 'scale', ...props }) {
+    const renderPopup = usePopupRender(motion);
+    return (_jsx(PreviewCardPrimitive.Portal, { children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-(--z-dropdown) outline-none", children: _jsx(PreviewCardPrimitive.Popup, { render: renderPopup, "data-slot": "hover-card-content", className: cn('z-(--z-dropdown) w-80 rounded-lg border bg-popover p-4 shadow-md outline-none', className), ...props }) }) }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/ui/icon-button.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+/**
+ * Icon-only button. Wraps the generated `Button` primitive with `size="icon"`.
+ *
+ * `aria-label` is **required** at the type level — omitting it is a compile
+ * error, not an axe finding. Icon-only buttons with no accessible name are the
+ * most common a11y regression in icon-heavy UIs; this component makes it
+ * impossible to ship one accidentally.
+ *
+ * Sizes are restricted to the icon variants of `buttonVariants` so callers
+ * cannot accidentally render a text-button-sized icon target.
+ */
+declare const iconButtonVariants: (props?: ({
+    size?: "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type IconButtonProps = Omit<ComponentProps<typeof Button>, 'aria-label' | 'size'> & VariantProps<typeof iconButtonVariants> & {
+    /** Accessible name — required. Icon-only buttons without a label fail axe. */
+    'aria-label': string;
+};
+declare function IconButton({ size, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export { IconButton, iconButtonVariants };

package/dist/components/ui/icon-button.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+/**
+ * Icon-only button. Wraps the generated `Button` primitive with `size="icon"`.
+ *
+ * `aria-label` is **required** at the type level — omitting it is a compile
+ * error, not an axe finding. Icon-only buttons with no accessible name are the
+ * most common a11y regression in icon-heavy UIs; this component makes it
+ * impossible to ship one accidentally.
+ *
+ * Sizes are restricted to the icon variants of `buttonVariants` so callers
+ * cannot accidentally render a text-button-sized icon target.
+ */
+const iconButtonVariants = cva('', {
+    variants: {
+        size: {
+            'icon-xs': '',
+            'icon-sm': '',
+            icon: '',
+            'icon-lg': '',
+        },
+    },
+    defaultVariants: {
+        size: 'icon',
+    },
+});
+function IconButton({ size = 'icon', className, ...props }) {
+    return (_jsx(Button, { "data-slot": "icon-button", size: size ?? 'icon', className: cn(className), ...props }));
+}
+export { IconButton, iconButtonVariants };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { cn } from '../../lib/utils.js';
+function Input({ className, type, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn('h-8 w-full min-w-0 rounded-lg border border-input bg-transparent text-foreground px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:cursor-pointer file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:border-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40', className), ...props }));
+}
+export { Input };

package/dist/components/ui/kbd.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+type KbdVariant = 'default' | 'ghost';
+type KbdProps = React.ComponentProps<'kbd'> & {
+    /**
+     * `default` — bordered muted pill (dialogs, composer).
+     * `ghost` — calm glyphs only (left-nav shortcut hints).
+     */
+    variant?: KbdVariant;
+};
+declare function Kbd({ className, children, variant, ...props }: KbdProps): React.JSX.Element;
+declare function KbdGroup({ className, children, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Kbd, KbdGroup, type KbdProps, type KbdVariant };

package/dist/components/ui/kbd.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function Kbd({ className, children, variant = 'default', ...props }) {
+    return (_jsx("kbd", { "data-slot": "kbd", "data-variant": variant, className: cn('inline-flex items-center justify-center rounded font-mono text-body-3 text-muted-foreground', variant === 'ghost'
+            ? 'border-transparent bg-transparent px-1 py-0 font-normal shadow-none'
+            : 'border border-border bg-muted px-1.5 py-0.5 font-medium shadow-sm', className), ...props, children: children }));
+}
+function KbdGroup({ className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-0.5', className), ...props, children: children }));
+}
+export { Kbd, KbdGroup };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Label({ className, ...props }: React.ComponentProps<'label'>): React.JSX.Element;
+export { Label };

package/dist/components/ui/label.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function Label({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "label", className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), ...props }));
+}
+export { Label };

package/dist/components/ui/loader.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef } from 'react';
+declare const SIZE_WIDTH: {
+    readonly small: 29;
+    readonly medium: 58;
+    readonly large: 112;
+};
+type LoaderSizeName = keyof typeof SIZE_WIDTH;
+type LoaderSize = LoaderSizeName | {
+    width: number;
+};
+type LoaderProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+    /** Preset or `{ width }` (height = width / 2). Default `medium`. */
+    size?: LoaderSize;
+    /** Playback speed multiplier. Default 1. */
+    speed?: number;
+};
+declare function Loader({ className, size, speed, 'aria-label': ariaLabel, style, ...props }: LoaderProps): import("react").JSX.Element;
+export { Loader };
+export type { LoaderProps, LoaderSize, LoaderSizeName };

package/dist/components/ui/loader.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useReducedMotion } from '../../motion/index.js';
+import { cn } from '../../lib/utils.js';
+import loaderAnimation from './assets/loader.json.js';
+/**
+ * Region / page loading indicator — the motion team's Lottie (dots → tilde → circle).
+ * Use `Loader` when a page or region is loading; keep `Spinner` for inline action states
+ * (pending buttons, "load more", dialogs).
+ *
+ * Size presets (web): `small` 29×14.5, `medium` 58×29 (default), `large` 112×56.
+ * iOS `LoaderView` keeps its own presets (32×16 / 64×32 / 92×46).
+ * Height is always half the width (the export's 2:1 canvas). Tint follows `currentColor`
+ * (`text-foreground` by default) so light and dark stay readable. With reduced motion, holds
+ * still on the tilde (frame 98), matching iOS.
+ */
+const STILL_FRAME = 98;
+const ASPECT_RATIO = 2;
+const SIZE_WIDTH = {
+    small: 29,
+    medium: 58,
+    large: 112,
+};
+function widthOf(size) {
+    return typeof size === 'object' ? size.width : SIZE_WIDTH[size];
+}
+/** Parse `rgb()` / `rgba()` / `#rrggbb` from getComputedStyle into 0–1 Lottie channels. */
+function colorChannels(cssColor) {
+    const hex = /^#([0-9a-f]{6})$/i.exec(cssColor.trim());
+    if (hex?.[1]) {
+        const n = Number.parseInt(hex[1], 16);
+        return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255, 1];
+    }
+    const m = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(cssColor.trim());
+    if (!m)
+        return null;
+    const r = Number(m[1]);
+    const g = Number(m[2]);
+    const b = Number(m[3]);
+    const a = m[4] === undefined ? 1 : Number(m[4]);
+    if (![r, g, b, a].every((n) => Number.isFinite(n)))
+        return null;
+    return [r / 255, g / 255, b / 255, a];
+}
+/** Tint every solid fill/stroke and gradient stop so the mono export follows theme text. */
+function tintAnimationData(data, tint) {
+    const clone = structuredClone(data);
+    const visit = (node) => {
+        if (!node || typeof node !== 'object')
+            return;
+        if (Array.isArray(node)) {
+            for (const child of node)
+                visit(child);
+            return;
+        }
+        const obj = node;
+        const c = obj.c;
+        if (c && typeof c === 'object' && !Array.isArray(c)) {
+            const color = c;
+            if (Array.isArray(color.k) && typeof color.k[0] === 'number' && color.k.length >= 3) {
+                const alpha = typeof color.k[3] === 'number' ? color.k[3] : 1;
+                color.k = [tint[0], tint[1], tint[2], alpha];
+            }
+        }
+        const g = obj.g;
+        if (g && typeof g === 'object' && !Array.isArray(g)) {
+            const grad = g;
+            const stops = grad.k?.k;
+            if (Array.isArray(stops)) {
+                for (let i = 0; i + 3 < stops.length; i += 4) {
+                    if (typeof stops[i + 1] === 'number' &&
+                        typeof stops[i + 2] === 'number' &&
+                        typeof stops[i + 3] === 'number') {
+                        stops[i + 1] = tint[0];
+                        stops[i + 2] = tint[1];
+                        stops[i + 3] = tint[2];
+                    }
+                }
+            }
+        }
+        for (const value of Object.values(obj))
+            visit(value);
+    };
+    visit(clone);
+    return clone;
+}
+function Loader({ className, size = 'medium', speed = 1, 'aria-label': ariaLabel = 'Loading', style, ...props }) {
+    const rootRef = useRef(null);
+    const hostRef = useRef(null);
+    const animationRef = useRef(null);
+    const reduceMotion = useReducedMotion();
+    const width = widthOf(size);
+    const height = width / ASPECT_RATIO;
+    // Live foreground color (theme / caller `text-*` / style.color). Re-tint when it changes —
+    // Lottie bakes RGB into the SVG, so a mount-time snapshot would stay wrong after dark mode.
+    const [cssColor, setCssColor] = useState(null);
+    const styleColor = typeof style?.color === 'string' ? style.color : undefined;
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const sync = () => {
+            const next = getComputedStyle(root).color;
+            setCssColor((prev) => (prev === next ? prev : next));
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+        });
+        return () => observer.disconnect();
+    }, [className, styleColor]);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host || cssColor === null)
+            return;
+        // Dynamic import so jsdom (and any consumer that never mounts Loader) never
+        // evaluates lottie-web at module load — it touches canvas and throws without one.
+        let cancelled = false;
+        void import('lottie-web/build/player/lottie_light').then((mod) => {
+            if (cancelled || !hostRef.current)
+                return;
+            const lottie = mod.default;
+            const tint = colorChannels(cssColor) ?? [0.169, 0.169, 0.169, 1];
+            const data = tintAnimationData(loaderAnimation, tint);
+            const animation = lottie.loadAnimation({
+                container: hostRef.current,
+                renderer: 'svg',
+                loop: reduceMotion !== true,
+                autoplay: reduceMotion !== true,
+                animationData: data,
+                rendererSettings: {
+                    preserveAspectRatio: 'xMidYMid meet',
+                    progressiveLoad: true,
+                },
+            });
+            animation.setSpeed(speed);
+            if (reduceMotion === true) {
+                animation.goToAndStop(STILL_FRAME, true);
+            }
+            animationRef.current = animation;
+        });
+        return () => {
+            cancelled = true;
+            animationRef.current?.destroy();
+            animationRef.current = null;
+        };
+    }, [reduceMotion, speed, width, cssColor]);
+    const mergedStyle = {
+        width,
+        height,
+        ...style,
+    };
+    return (_jsx("span", { ref: rootRef, role: "status", "aria-label": ariaLabel, "data-slot": "loader", "data-size": typeof size === 'string' ? size : undefined, className: cn('inline-block text-foreground', className), style: mergedStyle, ...props, children: _jsx("span", { ref: hostRef, "aria-hidden": "true", className: "block size-full [&_svg]:block" }) }));
+}
+export { Loader };

package/dist/components/ui/message-toolbar.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface MessageToolbarProps extends ComponentProps<'div'> {
+    children?: ReactNode;
+}
+/**
+ * The hover-action strip on a message row (Figma "right actions group"): white background,
+ * ui-background hairline, Vibe medium 8px radius, Shadow/XS, and 8px padding and gaps around
+ * 24px icon buttons, so the strip is 42px tall.
+ */
+declare function MessageToolbar({ children, className, ...props }: MessageToolbarProps): import("react").JSX.Element;
+interface MessageToolbarButtonProps {
+    icon: ReactNode;
+    label: string;
+    /** Transient state that replaces the label in the tooltip and accessible name (e.g. "Copied!"). */
+    tooltip?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+declare function MessageToolbarButton({ icon, label, tooltip, onClick, active, }: MessageToolbarButtonProps): import("react").JSX.Element;
+export { MessageToolbar, MessageToolbarButton, type MessageToolbarButtonProps };