@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/components/ui/message-toolbar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { IconButton } from './icon-button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+/**
+ * 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.
+ */
+function MessageToolbar({ children, className, ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx("div", { role: "toolbar", "data-slot": "message-toolbar", className: cn('flex items-center gap-2 rounded-lg border border-secondary bg-background p-2 shadow-xs', className), ...props, children: children }) }));
+}
+function MessageToolbarButton({ icon, label, tooltip, onClick, active, }) {
+    const name = tooltip ?? label;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { closeOnClick: false, render: _jsx(IconButton, { "aria-label": name, "aria-pressed": active, size: "icon-xs", variant: active ? 'secondary' : 'ghost', className: "rounded-[4px] text-icon hover:text-icon [&_svg:not([class*='size-'])]:size-4", onClick: onClick }), children: icon }), _jsx(TooltipContent, { side: "top", children: name })] }));
+}
+export { MessageToolbar, MessageToolbarButton };

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+/**
+ * Vibe's Modal: a 480px card with a 24px title, a 16px description, a close button in the
+ * corner and a footer of one primary and one optional secondary (tertiary) action.
+ * `Dialog` stays the general-purpose shadcn shape; reach for `Modal` where the design asks
+ * for the Vibe one.
+ */
+declare function Modal({ actionsRef, onOpenChange, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
+declare function ModalContent({ className, children, closeLabel, closeDisabled, ...props }: DialogPrimitive.Popup.Props & {
+    /** Accessible name of the corner close button. */
+    closeLabel?: string;
+    closeDisabled?: boolean;
+}): React.JSX.Element;
+declare function ModalHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ModalTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function ModalDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+/** Free-form body between the header and the footer. */
+declare function ModalBody({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+interface ModalAction {
+    label: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function ModalFooter({ className, primaryButton, secondaryButton, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & {
+    primaryButton: ModalAction;
+    secondaryButton?: ModalAction;
+}): React.JSX.Element;
+export { Modal, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, type ModalAction, };

package/dist/components/ui/modal.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, renderBackdrop, useModalRender, usePopupExit } from '../../motion/popup.js';
+import { presets } from '../../motion/config.js';
+import { X as XIcon } from '../../icons/index.js';
+import { Button } from './button.js';
+import { Spinner } from './spinner.js';
+/**
+ * Vibe's Modal: a 480px card with a 24px title, a 16px description, a close button in the
+ * corner and a footer of one primary and one optional secondary (tertiary) action.
+ * `Dialog` stays the general-purpose shadcn shape; reach for `Modal` where the design asks
+ * for the Vibe one.
+ */
+function Modal({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(DialogPrimitive.Root, { "data-slot": "modal", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function ModalContent({ className, children, closeLabel = 'Close', closeDisabled, ...props }) {
+    const renderPopup = useModalRender(presets.dialog);
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { render: renderBackdrop, "data-slot": "modal-overlay", className: "fixed inset-y-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] isolate z-(--z-modal) bg-black/30" }), _jsxs(DialogPrimitive.Popup, { render: renderPopup, "data-slot": "modal-content", className: cn('fixed top-1/2 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] mx-auto z-(--z-modal) flex w-[calc(100%-var(--overlay-inset-left,0px)-var(--overlay-inset-right,0px)-var(--modal-gutter,2rem))]! -translate-y-1/2 flex-col rounded-2xl bg-popover text-popover-foreground shadow-lg outline-none sm:max-w-120', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { "data-slot": "modal-close", disabled: closeDisabled, render: _jsx(Button, { variant: "ghost", size: "icon", className: "absolute top-5 right-5" }), children: [_jsx(XIcon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: closeLabel })] })] })] }));
+}
+function ModalHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "modal-header", className: cn('flex flex-col gap-2 px-8 pt-8 pe-16', className), ...props }));
+}
+function ModalTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "modal-title", className: cn('font-heading text-2xl font-medium text-foreground', className), ...props }));
+}
+function ModalDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "modal-description", className: cn('text-base text-muted-foreground', className), ...props }));
+}
+/** Free-form body between the header and the footer. */
+function ModalBody({ className, ...props }) {
+    return _jsx("div", { "data-slot": "modal-body", className: cn('px-8 pt-4', className), ...props });
+}
+const MODAL_BUTTON = 'h-10 px-4 text-base';
+function ModalFooter({ className, primaryButton, secondaryButton, ...props }) {
+    return (_jsxs("div", { "data-slot": "modal-footer", className: cn('flex justify-end gap-2 px-8 pt-8 pb-8', className), ...props, children: [secondaryButton ? (_jsx(Button, { type: "button", variant: "ghost", className: MODAL_BUTTON, disabled: secondaryButton.disabled, onClick: secondaryButton.onClick, children: secondaryButton.label })) : null, _jsxs(Button, { type: "button", className: MODAL_BUTTON, disabled: primaryButton.disabled || primaryButton.loading, onClick: primaryButton.onClick, children: [primaryButton.loading ? _jsx(Spinner, { className: "size-4", "aria-hidden": true }) : null, primaryButton.label] })] }));
+}
+export { Modal, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, };

package/dist/components/ui/nav-item.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type StatusDotProps } from './status-dot.js';
+interface NavItemProps extends Omit<ComponentProps<'button'>, 'children'> {
+    icon?: ReactNode;
+    /** One line. When it does not fit it fades out at the edge and slides into view on hover. */
+    label: ReactNode;
+    /** Extra classes for the label span (e.g. `font-medium` for unread). */
+    labelClassName?: string;
+    active?: boolean;
+    depth?: 0 | 1;
+    status?: StatusDotProps['status'];
+    statusLabel?: string;
+    /** `home` is the mobile Home dot (yellow Running pulse with a halo); everything else keeps the default. */
+    statusAppearance?: StatusDotProps['appearance'];
+    /** Always-visible trailing mark (e.g. unread dot). Does not hide on row hover. */
+    indicator?: ReactNode;
+    trailing?: ReactNode;
+    hoverActions?: ReactNode;
+    /** Show `hoverActions` without hover or focus (e.g. on the active row). */
+    actionsVisible?: boolean;
+    /** Keep `indicator` next to the actions instead of swapping it out while they show. */
+    keepIndicator?: boolean;
+}
+declare function NavItem({ icon, label, labelClassName, active, depth, status, statusLabel, statusAppearance, indicator, trailing, hoverActions, actionsVisible, keepIndicator, className, ...props }: NavItemProps): import("react").JSX.Element;
+export { NavItem, type NavItemProps };

package/dist/components/ui/nav-item.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, } from 'react';
+import { useTextDirection } from '../../direction/index.js';
+import { AnimatePresence, Swap, motion, useMotionValue, useTransform } from '../../motion/index.js';
+import { presets, scrollReveal } from '../../motion/config.js';
+import { revealMask } from '../../lib/reveal-mask.js';
+import { cn } from '../../lib/utils.js';
+import { StatusDot } from './status-dot.js';
+/**
+ * One-line label that fades out where it is clipped and, while `revealing`, slides the rest of
+ * itself into view at a reading pace (ChatGPT's sidebar titles). The fade follows the slide: the
+ * leading edge fades in as text leaves it, the trailing fade melts away as the last letters land.
+ */
+function RevealLabel({ revealing, className, children, }) {
+    const clipRef = useRef(null);
+    const textRef = useRef(null);
+    const rtl = useTextDirection() === 'rtl';
+    const [overflow, setOverflow] = useState(0);
+    const x = useMotionValue(0);
+    const overflowPx = useMotionValue(0);
+    const maskImage = useTransform([x, overflowPx], ([offset = 0, hidden = 0]) => revealMask(offset, hidden, rtl));
+    // The clip narrows on hover (actions take the trailing slot), so this re-measures then too.
+    useLayoutEffect(() => {
+        const clip = clipRef.current;
+        const text = textRef.current;
+        if (!clip || !text)
+            return;
+        const measure = () => {
+            const hidden = Math.max(0, text.scrollWidth - clip.clientWidth);
+            overflowPx.set(hidden);
+            setOverflow(hidden);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(clip);
+        observer.observe(text);
+        return () => observer.disconnect();
+    }, [overflowPx]);
+    const target = revealing ? overflow : 0;
+    return (_jsx(motion.span, { ref: clipRef, "data-slot": "nav-item-label", 
+        // The row button may carry a native shortcut title; an empty title here keeps it off the
+        // label, which shows its own full text on hover.
+        title: "", className: cn('flex min-w-0 flex-1 items-center overflow-hidden', className), style: { maskImage, WebkitMaskImage: maskImage }, children: _jsx(motion.span, { ref: textRef, className: "flex shrink-0 items-center whitespace-nowrap", style: { x }, animate: { x: rtl ? target : -target }, transition: target > 0 ? scrollReveal.to(target) : scrollReveal.back, children: children }) }));
+}
+function NavItem({ icon, label, labelClassName, active = false, depth = 0, status, statusLabel = '', statusAppearance, indicator, trailing, hoverActions, actionsVisible = false, keepIndicator = false, className, ...props }) {
+    // Hover or keyboard focus reveals a clipped label. Touch has no hover, so a tap must not
+    // start it moving just as the row navigates away.
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const onPointerEnter = (event) => setHovered(event.pointerType !== 'touch');
+    const onFocus = (event) => setFocused(event.target.matches(':focus-visible'));
+    // Row is a div so hoverActions (which hold buttons) sit beside the button, not inside it.
+    // Motion: the active and hover washes fade (`transition-colors`), a status change crossfades
+    // in the leading slot, and an indicator (unread dot, badge) pops in and out.
+    return (_jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: () => setHovered(false), onFocus: onFocus, onBlur: () => setFocused(false), className: cn('group/navitem flex h-8 w-full min-w-0 items-center gap-2 rounded-sm px-2 text-body-2 text-sidebar-foreground transition-colors', 'hover:bg-sidebar-accent has-[[data-slot=nav-item]:focus-visible]:ring-2 has-[[data-slot=nav-item]:focus-visible]:ring-ring', active && 'bg-selected text-selected-foreground hover:bg-selected', depth === 1 && 'pl-7', className), children: [_jsxs("button", { type: "button", "data-slot": "nav-item", "aria-current": active ? 'page' : undefined, className: "relative flex h-full min-w-0 flex-1 items-center gap-2 text-left outline-none", ...props, children: [status || icon ? (_jsx(Swap, { inline: true, swapKey: status ?? 'icon', "data-slot": "nav-item-leading", className: "flex size-4 shrink-0 items-center justify-center text-icon [&>svg]:size-4", children: status ? (_jsx(StatusDot, { status: status, label: statusLabel, size: "sm", appearance: statusAppearance })) : (icon) })) : null, _jsx(RevealLabel, { revealing: hovered || focused, className: labelClassName, children: label }), _jsx(AnimatePresence, { initial: false, children: indicator ? (_jsx(motion.span, { ...presets.pop, "data-slot": "nav-item-indicator", 
+                            // 24px slot, same as the hover action button: the dot and the "more" button
+                            // share one centre line. The button takes its place while the row is hovered.
+                            className: cn('flex size-6 shrink-0 items-center justify-center', hoverActions &&
+                                !keepIndicator &&
+                                'group-hover/navitem:hidden group-focus-within/navitem:hidden group-has-[[data-popup-open]]/navitem:hidden'), children: indicator }, "indicator")) : null }), trailing ? (_jsx("span", { className: "shrink-0 text-body-3 text-muted-foreground group-hover/navitem:hidden group-focus-within/navitem:hidden group-has-[[data-popup-open]]/navitem:hidden", children: trailing })) : null] }), hoverActions ? (
+            // Keep the trigger mounted while its portaled menu is open. `hidden` would
+            // collapse the anchor (focus leaves the row for the portal; pointer often
+            // does too) and Base UI's Positioner falls back to the top-left of the viewport.
+            _jsx("span", { className: cn('shrink-0 items-center gap-0.5 group-hover/navitem:flex group-focus-within/navitem:flex has-[[data-popup-open]]:flex', actionsVisible ? 'flex' : 'hidden'), children: hoverActions })) : null] }));
+}
+export { NavItem };

package/dist/components/ui/panel-section.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+interface PanelSectionProps {
+    title: string;
+    children: ReactNode;
+    /** Right-aligned controls on the title row (icon buttons, a small link). */
+    action?: ReactNode;
+    isEmpty?: boolean;
+    empty?: ReactNode;
+    defaultOpen?: boolean;
+    /** Controls the open state from outside; `defaultOpen` is then ignored. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * One block of the details pane: a collapsible title row (12px semibold primary text, an xs
+ * icon-button chevron in the icon colour after the title) and its secondary-text content. A
+ * layout-border hairline separates it from the next block, inset to 8px past the title on each
+ * side rather than running edge to edge. The pane stacks these; nothing else draws section chrome.
+ */
+declare function PanelSection({ title, children, action, isEmpty, empty, defaultOpen, open: openProp, onOpenChange, className, }: PanelSectionProps): import("react").JSX.Element;
+export { PanelSection, type PanelSectionProps };

package/dist/components/ui/panel-section.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { ChevronDown } from '../../icons/index.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible.js';
+import { Heading } from './heading.js';
+/**
+ * One block of the details pane: a collapsible title row (12px semibold primary text, an xs
+ * icon-button chevron in the icon colour after the title) and its secondary-text content. A
+ * layout-border hairline separates it from the next block, inset to 8px past the title on each
+ * side rather than running edge to edge. The pane stacks these; nothing else draws section chrome.
+ */
+function PanelSection({ title, children, action, isEmpty, empty, defaultOpen = true, open: openProp, onOpenChange, className, }) {
+    const [innerOpen, setInnerOpen] = useState(defaultOpen);
+    const open = openProp ?? innerOpen;
+    const setOpen = (next) => {
+        if (openProp === undefined)
+            setInnerOpen(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, render: _jsx("section", { "data-slot": "panel-section", className: cn('relative flex flex-col gap-2 px-5 py-3', 'after:absolute after:inset-x-3 after:bottom-0 after:h-px after:bg-border last:after:hidden', className) }), children: [_jsxs("div", { className: "flex min-h-6 items-center justify-between gap-2", children: [_jsx(Heading, { level: 3, size: "6", className: "min-w-0 text-body-3 leading-4 font-semibold text-foreground", children: _jsxs(CollapsibleTrigger, { className: "group/panel-section w-auto gap-1 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "truncate", children: title }), _jsx("span", { "data-slot": "panel-section-chevron", className: "flex size-6 shrink-0 items-center justify-center rounded-[min(var(--radius-md),10px)] text-icon transition-colors group-hover/panel-section:bg-accent", "aria-hidden": "true", children: _jsx(motion.span, { animate: { rotate: open ? 0 : -90 }, transition: transitions.base, className: "flex size-3 items-center justify-center", children: _jsx(ChevronDown, { className: "size-3" }) }) })] }) }), action ? (_jsx("span", { className: "flex shrink-0 items-center gap-0.5 text-foreground", children: action })) : null] }), _jsx(CollapsibleContent, { className: "text-muted-foreground", children: isEmpty ? empty : children })] }));
+}
+export { PanelSection };

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { type PopupVariant } from '../../motion/popup.js';
+declare function Popover({ actionsRef, onOpenChange, ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
+declare function PopoverClose({ ...props }: PopoverPrimitive.Close.Props): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, anchor, collisionAvoidance, collisionPadding, positionMethod, motion, ...props }: PopoverPrimitive.Popup.Props & {
+    /** `drift` fades and rises without the scale, for a list that belongs to a dense form. */
+    motion?: Exclude<PopupVariant, 'drift-tip'>;
+} & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor' | 'collisionAvoidance' | 'collisionPadding' | 'positionMethod'>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/dist/components/ui/popover.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+function Popover({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverClose({ ...props }) {
+    return _jsx(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverContent({ className, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, anchor, collisionAvoidance, collisionPadding, positionMethod, motion = 'scale', ...props }) {
+    const renderPopup = usePopupRender(motion);
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, collisionAvoidance: collisionAvoidance, collisionPadding: collisionPadding, positionMethod: positionMethod, className: "isolate z-(--z-dropdown)", children: _jsx(PopoverPrimitive.Popup, { render: renderPopup, "data-slot": "popover-content", className: cn('z-(--z-dropdown) flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden', className), ...props }) }) }));
+}
+function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn('flex flex-col gap-0.5 text-sm', className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn('font-medium', className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn('text-muted-foreground', className), ...props }));
+}
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

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

@@ -0,0 +1,5 @@
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+declare function Progress({ className, value, ...props }: ProgressPrimitive.Root.Props & {
+    value?: number;
+}): import("react").JSX.Element;
+export { Progress };

package/dist/components/ui/progress.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+function Progress({ className, value, ...props }) {
+    const renderIndicator = useCallback((indicatorProps) => {
+        const { style, ...rest } = indicatorProps;
+        // Base UI also sizes the indicator to `value`%; the translation below already carries the fill,
+        // so keep it full width or the bar shows `value`% of `value`%.
+        return (_jsx(motion.div, { ...rest, style: { ...style, width: '100%' }, animate: { x: `${-(100 - (value ?? 0))}%` }, transition: transitions.slow }));
+    }, [value]);
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: value, "aria-valuenow": value ?? undefined, className: cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className), ...props, children: _jsx(ProgressPrimitive.Track, { className: "h-full w-full", children: _jsx(ProgressPrimitive.Indicator, { render: renderIndicator, "data-slot": "progress-indicator", className: "h-full w-full bg-primary" }) }) }));
+}
+export { Progress };

package/dist/components/ui/provider-badge.d.ts

@@ -0,0 +1,22 @@
+import { type ProviderMarkType } from '../../icons/index.js';
+/**
+ * THE one place that decides which provider gets a badge on an agent's picture and with what
+ * artwork. A provider that is not listed (custom webhook, custom token-only, the Streams
+ * platform agent, anything newer than this map) shows no badge. The artwork is the provider's
+ * full-colour `ProviderMark` logo (white for the logos drawn black, in dark mode).
+ */
+export declare const PROVIDER_BADGE_MARKS: Readonly<Record<string, ProviderMarkType>>;
+/** The badge artwork for a provider type, or `null` when that provider shows none. */
+export declare const providerBadgeMarkOf: (type: string | null | undefined) => ProviderMarkType | null;
+/**
+ * The provider's logo on a plate that overhangs an agent picture's bottom-right corner. Render it
+ * as a sibling of the (clipped) picture inside a `relative` frame. Purely presentational: the
+ * caller decides whether to show it. Pass `label` to announce the provider, or omit it when an
+ * adjacent label already names it (the badge is then hidden from assistive tech).
+ */
+declare function ProviderBadge({ type, label, className, }: {
+    type: ProviderMarkType;
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { ProviderBadge };

package/dist/components/ui/provider-badge.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProviderMark } from '../../icons/index.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * THE one place that decides which provider gets a badge on an agent's picture and with what
+ * artwork. A provider that is not listed (custom webhook, custom token-only, the Streams
+ * platform agent, anything newer than this map) shows no badge. The artwork is the provider's
+ * full-colour `ProviderMark` logo (white for the logos drawn black, in dark mode).
+ */
+export const PROVIDER_BADGE_MARKS = {
+    claude: 'claude',
+    mistral: 'mistral',
+    elevenlabs: 'elevenlabs',
+    copilot_studio: 'copilot_studio',
+    cursor: 'cursor',
+    monday: 'monday',
+    sphera: 'sphera',
+    devin: 'devin',
+};
+/** The badge artwork for a provider type, or `null` when that provider shows none. */
+export const providerBadgeMarkOf = (type) => type ? (PROVIDER_BADGE_MARKS[type] ?? null) : null;
+/**
+ * Handoff geometry, as percentages of the agent frame so it scales with whatever size the call
+ * site gives the avatar: a 56px frame carries a 22px badge hanging 6px past its bottom-right
+ * corner (22/56 and 6/56). A 28px frame gets 11px and 3px.
+ */
+const BADGE_SIZE = '39.2857%';
+const BADGE_OFFSET = '-10.7143%';
+/**
+ * The provider's logo on a plate that overhangs an agent picture's bottom-right corner. Render it
+ * as a sibling of the (clipped) picture inside a `relative` frame. Purely presentational: the
+ * caller decides whether to show it. Pass `label` to announce the provider, or omit it when an
+ * adjacent label already names it (the badge is then hidden from assistive tech).
+ */
+function ProviderBadge({ type, label, className, }) {
+    return (_jsx("span", { "data-slot": "provider-badge", "data-provider": type, role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, className: cn('pointer-events-none absolute z-10 flex aspect-square items-center justify-center rounded-[27%] bg-background text-foreground shadow-sm ring-1 ring-border', className), style: { width: BADGE_SIZE, right: BADGE_OFFSET, bottom: BADGE_OFFSET }, children: _jsx(ProviderMark, { type: type, className: "size-[64%]" }) }));
+}
+export { ProviderBadge };

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react").JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props): import("react").JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/radio-group.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { motion } from '../../motion/index.js';
+import { scale, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/** Indicator dot pops in with a spring scale when the radio is selected. */
+function renderRadioIndicator(props, state) {
+    return (_jsx(motion.span, { ...props, initial: false, animate: { opacity: state.checked ? 1 : 0, scale: state.checked ? 1 : scale.pop }, transition: transitions.pop }));
+}
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn('grid gap-2', className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(Radio.Root, { "data-slot": "radio-group-item", className: cn(
+        // Match Checkbox: flex + shrink-0 so size-4 holds on the Base UI <span>
+        // and the indicator dot stays centered (without flex it sits off-kilter
+        // and card rows with items-start look vertically broken).
+        'relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-primary text-primary shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-primary', className), ...props, children: _jsx(Radio.Indicator, { "data-slot": "radio-group-indicator", render: renderRadioIndicator, keepMounted: true, className: "flex items-center justify-center", children: _jsx("span", { className: "block size-2 rounded-full bg-background" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/components/ui/reply-summary.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface ReplySummaryProps extends Omit<ComponentProps<'button'>, 'children'> {
+    avatars: ReactNode;
+    /** The reply count, or its full label ("3 Replies"). */
+    count: ReactNode;
+    lastReplyAt: ReactNode;
+    label: string;
+    status?: ReactNode;
+    /**
+     * The counts have not arrived yet. Same box as the loaded chip, but inert: pass skeletons for the
+     * slots that are still unknown and keep the rest, so the chip only fills in when the data lands.
+     */
+    pending?: boolean;
+}
+declare function ReplySummary({ avatars, count, lastReplyAt, label, status, pending, disabled, className, ...props }: ReplySummaryProps): import("react").JSX.Element;
+export { ReplySummary, type ReplySummaryProps };

package/dist/components/ui/reply-summary.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+function ReplySummary({ avatars, count, lastReplyAt, label, status, pending = false, disabled, className, ...props }) {
+    return (_jsxs("button", { type: "button", "aria-label": label, "aria-busy": pending || undefined, disabled: pending || disabled, "data-pending": pending ? '' : undefined, "data-slot": "reply-summary", 
+        // 8px padding inside a border that only takes colour on hover.
+        className: cn('flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-[8px] border border-transparent p-2 text-start text-body-2 outline-none transition-[background-color,border-color,box-shadow]', '[@media(hover:hover)]:hover:border-border [@media(hover:hover)]:hover:bg-background [@media(hover:hover)]:hover:shadow-xs focus-visible:ring-2 focus-visible:ring-ring', pending && 'pointer-events-none', className), ...props, children: [avatars, _jsx("span", { className: "shrink-0 whitespace-nowrap text-primary tabular-nums", children: count }), _jsx("span", { "data-slot": "reply-summary-last", className: "min-w-0 truncate whitespace-nowrap text-muted-foreground", children: lastReplyAt }), status] }));
+}
+export { ReplySummary };

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof Group>): React.JSX.Element;
+declare function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>): React.JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof Separator> & {
+    withHandle?: boolean;
+}): React.JSX.Element;
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/dist/components/ui/resizable.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { cn } from '../../lib/utils.js';
+import { GripVertical as GripVerticalIcon } from '../../icons/index.js';
+function ResizablePanelGroup({ className, ...props }) {
+    return (_jsx(Group, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[orientation=vertical]:flex-col', className), ...props }));
+}
+function ResizablePanel({ ...props }) {
+    return _jsx(Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0', className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: _jsx(GripVerticalIcon, { className: "size-2.5" }) })) }));
+}
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };