@moldable-ai/ui 0.2.19 → 0.2.20

package/dist/components/ui/inspector.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Text } from './text';
+function Inspector({ className, ...props }) {
+    return (_jsx("aside", { "data-slot": "inspector", className: cn('bg-background flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props }));
+}
+function InspectorHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "inspector-header", className: cn('border-border/70 flex min-h-9 shrink-0 items-center gap-2 border-b px-3 py-1.5', className), ...props }));
+}
+function InspectorContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "inspector-content", className: cn('min-h-0 flex-1 overflow-y-auto pb-[calc(var(--chat-safe-padding,0px)+0.75rem)]', className), ...props }));
+}
+function InspectorSection({ title, actions, className, children, ...props }) {
+    return (_jsxs("section", { "data-slot": "inspector-section", className: cn('border-border/60 border-b px-3 py-3 last:border-b-0', className), ...props, children: [title || actions ? (_jsxs("div", { "data-slot": "inspector-section-header", className: "mb-2 flex min-w-0 items-center gap-2", children: [title ? (_jsx(Text, { variant: "small-strong", color: "secondary", truncate: true, className: "uppercase tracking-wide", children: title })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, _jsx("div", { "data-slot": "inspector-section-content", className: "space-y-2", children: children })] }));
+}
+function InspectorRow({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "inspector-row", className: cn('grid min-h-7 grid-cols-[minmax(5rem,0.8fr)_minmax(0,1.2fr)] items-center gap-3', className), ...props }));
+}
+function InspectorLabel({ className, ...props }) {
+    return (_jsx(Text, { as: "label", variant: "small", color: "secondary", "data-slot": "inspector-label", className: cn('truncate', className), ...props }));
+}
+function InspectorValue({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "inspector-value", className: cn('min-w-0 justify-self-stretch', className), ...props }));
+}
+export { Inspector, InspectorContent, InspectorHeader, InspectorLabel, InspectorRow, InspectorSection, InspectorValue, };

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

@@ -1,4 +1,4 @@
 declare function Kbd({ className, ...props }: React.ComponentProps<'kbd'>): import("react/jsx-runtime").JSX.Element;
-declare function KbdGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<'kbd'>): import("react/jsx-runtime").JSX.Element;
 export { Kbd, KbdGroup };
 //# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type ListSelectionMode = 'none' | 'single' | 'multiple';
+type ListProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> & {
+    selectionMode?: ListSelectionMode;
+    selectedValues?: Iterable<string>;
+    defaultSelectedValues?: Iterable<string>;
+    onSelectionChange?: (values: ReadonlySet<string>) => void;
+    onAction?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    disabled?: boolean;
+};
+declare function List({ className, children, selectionMode, selectedValues, defaultSelectedValues, onSelectionChange, onAction, orientation, loop, disabled, role, onKeyDown, ref, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+type ListItemProps = Omit<React.ComponentProps<'div'>, 'value'> & {
+    value: string;
+    disabled?: boolean;
+};
+declare function ListItem({ className, children, value, disabled, onClick, onDoubleClick, onFocus, ref, role, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemActions({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, type ListProps, type ListSelectionMode, };
+//# sourceMappingURL=list.d.ts.map

package/dist/components/ui/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAmDvD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,cAAc,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACjC,qBAAqB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,aAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,WAAwB,EACxB,IAAY,EACZ,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAsMX;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,aAAa,2CAmFf;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,KAAK,SAAS,EACd,KAAK,iBAAiB,GACvB,CAAA"}

package/dist/components/ui/list.js

@@ -0,0 +1,224 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const ListContext = React.createContext(null);
+function useListContext(component) {
+    const context = React.useContext(ListContext);
+    if (!context) {
+        throw new Error(`${component} must be used inside List`);
+    }
+    return context;
+}
+function toSelection(values) {
+    return new Set(values ?? []);
+}
+function sameSelection(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const value of a) {
+        if (!b.has(value))
+            return false;
+    }
+    return true;
+}
+function isInteractiveDescendant(target, currentTarget) {
+    if (!(target instanceof HTMLElement) || target === currentTarget)
+        return false;
+    return Boolean(target.closest('a,button,input,select,textarea,[contenteditable="true"],[role="button"],[role="link"]'));
+}
+function List({ className, children, selectionMode = 'none', selectedValues, defaultSelectedValues, onSelectionChange, onAction, orientation = 'vertical', loop = false, disabled = false, role, onKeyDown, ref, ...props }) {
+    const rootRef = React.useRef(null);
+    const itemsRef = React.useRef(new Map());
+    const [activeValue, setActiveValueState] = React.useState(null);
+    const [uncontrolledSelection, setUncontrolledSelection] = React.useState(() => toSelection(defaultSelectedValues));
+    const controlledSelection = React.useMemo(() => selectedValues === undefined ? undefined : toSelection(selectedValues), [selectedValues]);
+    const selection = controlledSelection ?? uncontrolledSelection;
+    const setRef = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const registerItem = React.useCallback((value, node, itemDisabled) => {
+        if (!node)
+            return () => undefined;
+        itemsRef.current.set(value, { node, disabled: itemDisabled });
+        if (!disabled && !itemDisabled) {
+            setActiveValueState((current) => current ?? value);
+        }
+        return () => {
+            itemsRef.current.delete(value);
+            setActiveValueState((current) => {
+                if (current !== value)
+                    return current;
+                return ([...itemsRef.current.entries()].find(([, item]) => !disabled && !item.disabled)?.[0] ?? null);
+            });
+        };
+    }, [disabled]);
+    const setActiveValue = React.useCallback((value) => {
+        const item = itemsRef.current.get(value);
+        if (item && !item.disabled)
+            setActiveValueState(value);
+    }, []);
+    const commitSelection = React.useCallback((next) => {
+        if (sameSelection(selection, next))
+            return;
+        if (controlledSelection === undefined)
+            setUncontrolledSelection(next);
+        onSelectionChange?.(next);
+    }, [controlledSelection, onSelectionChange, selection]);
+    const select = React.useCallback((value) => {
+        if (disabled || selectionMode === 'none')
+            return;
+        const item = itemsRef.current.get(value);
+        if (!item || item.disabled)
+            return;
+        if (selectionMode === 'single') {
+            commitSelection(new Set([value]));
+            return;
+        }
+        const next = new Set(selection);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        commitSelection(next);
+    }, [commitSelection, disabled, selection, selectionMode]);
+    const activate = React.useCallback((value) => {
+        if (disabled || itemsRef.current.get(value)?.disabled)
+            return;
+        onAction?.(value);
+    }, [disabled, onAction]);
+    const moveFocus = React.useCallback((direction) => {
+        const items = [...itemsRef.current.entries()].filter(([, item]) => !disabled && !item.disabled);
+        if (items.length === 0)
+            return;
+        const currentIndex = items.findIndex(([value]) => value === activeValue);
+        let nextIndex = currentIndex;
+        if (direction === 'first')
+            nextIndex = 0;
+        if (direction === 'last')
+            nextIndex = items.length - 1;
+        if (direction === 'next') {
+            nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+            if (nextIndex >= items.length)
+                nextIndex = loop ? 0 : items.length - 1;
+        }
+        if (direction === 'previous') {
+            nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+            if (nextIndex < 0)
+                nextIndex = loop ? items.length - 1 : 0;
+        }
+        const [value, item] = items[nextIndex];
+        setActiveValueState(value);
+        item.node.focus();
+    }, [activeValue, disabled, loop]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled)
+            return;
+        const target = event.target;
+        if (target.dataset.slot !== 'list-item')
+            return;
+        const previousKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key === previousKey || event.key === nextKey) {
+            event.preventDefault();
+            moveFocus(event.key === previousKey ? 'previous' : 'next');
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            moveFocus(event.key === 'Home' ? 'first' : 'last');
+        }
+        else if (event.key === ' ') {
+            event.preventDefault();
+            if (activeValue)
+                select(activeValue);
+        }
+        else if (event.key === 'Enter' && activeValue) {
+            event.preventDefault();
+            if (selectionMode !== 'none')
+                select(activeValue);
+            activate(activeValue);
+        }
+    };
+    const context = React.useMemo(() => ({
+        activeValue,
+        disabled,
+        isSelected: (value) => selection.has(value),
+        registerItem,
+        select,
+        selectionMode,
+        setActiveValue,
+        activate,
+    }), [
+        activeValue,
+        activate,
+        disabled,
+        registerItem,
+        select,
+        selection,
+        selectionMode,
+        setActiveValue,
+    ]);
+    const resolvedRole = role ?? (selectionMode === 'none' ? 'list' : 'listbox');
+    return (_jsx(ListContext.Provider, { value: context, children: _jsx("div", { ref: setRef, role: resolvedRole, "aria-disabled": disabled || undefined, "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "aria-orientation": resolvedRole === 'listbox' ? orientation : undefined, "data-slot": "list", "data-disabled": disabled || undefined, "data-orientation": orientation, "data-selection-mode": selectionMode, className: cn('flex min-w-0 outline-none', orientation === 'vertical'
+                ? 'flex-col gap-0.5'
+                : 'flex-row items-center gap-1', className), onKeyDown: handleKeyDown, ...props, children: children }) }));
+}
+function ListItem({ className, children, value, disabled = false, onClick, onDoubleClick, onFocus, ref, role, ...props }) {
+    const context = useListContext('ListItem');
+    const { registerItem } = context;
+    const itemRef = React.useRef(null);
+    const isDisabled = context.disabled || disabled;
+    const isSelected = context.isSelected(value);
+    const isActive = context.activeValue === value;
+    const setRef = React.useCallback((node) => {
+        itemRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    React.useLayoutEffect(() => registerItem(value, itemRef.current, isDisabled), [isDisabled, registerItem, value]);
+    const resolvedRole = role ?? (context.selectionMode === 'none' ? 'listitem' : 'option');
+    return (_jsx("div", { ref: setRef, role: resolvedRole, tabIndex: isDisabled ? -1 : isActive ? 0 : -1, "aria-disabled": isDisabled || undefined, "aria-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-slot": "list-item", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, "data-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-value": value, className: cn('group/list-item relative flex min-w-0 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-none transition-colors duration-100', 'hover:bg-accent/60 focus-visible:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented ||
+                isDisabled ||
+                isInteractiveDescendant(event.target, event.currentTarget)) {
+                return;
+            }
+            context.setActiveValue(value);
+            event.currentTarget.focus();
+            context.select(value);
+        }, onDoubleClick: (event) => {
+            onDoubleClick?.(event);
+            if (event.defaultPrevented ||
+                isDisabled ||
+                isInteractiveDescendant(event.target, event.currentTarget)) {
+                return;
+            }
+            context.activate(value);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            if (!event.defaultPrevented && !isDisabled) {
+                context.setActiveValue(value);
+            }
+        }, ...props, children: children }));
+}
+function ListItemContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "list-item-content", className: cn('min-w-0 flex-1', className), ...props }));
+}
+function ListItemTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "list-item-title", className: cn('truncate font-medium', className), ...props }));
+}
+function ListItemDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "list-item-description", className: cn('text-muted-foreground truncate text-xs', className), ...props }));
+}
+function ListItemActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "list-item-actions", className: cn('ml-auto flex shrink-0 items-center gap-1', className), ...props }));
+}
+export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, };

package/dist/components/ui/message-scroller-layout-stability.d.ts

@@ -0,0 +1,33 @@
+import { type RefObject } from 'react';
+type ScrollToEnd = (options?: {
+    behavior?: ScrollBehavior;
+}) => boolean;
+type AnchorPosition = {
+    element: HTMLElement;
+    top: number;
+    bottom: number;
+};
+export type MessageScrollerLayoutSnapshot = {
+    anchors: AnchorPosition[];
+    atEnd: boolean;
+    scrollHeight: number;
+};
+export declare function isMessageScrollerAtEnd(viewport: HTMLElement): boolean;
+export declare function captureMessageScrollerLayout(viewport: HTMLElement): MessageScrollerLayoutSnapshot;
+/**
+ * Preserve the first previously visible stable leaf when content above it
+ * changes height. Native scroll anchoring may already have done this; in that
+ * case the measured delta is zero and this is deliberately a no-op.
+ */
+export declare function restoreMessageScrollerAnchor(viewport: HTMLElement, snapshot: MessageScrollerLayoutSnapshot): boolean;
+/**
+ * Complements shadcn's message scroller for mutable chat rows. The upstream
+ * primitive handles appends, prepends, and explicit jumps well, but a nested
+ * disclosure shrinking inside an existing row can look like user scroll
+ * intent. We remember whether the viewport was following the end before the
+ * resize and restore that mode, or preserve a visible content leaf when the
+ * user is reading higher in the transcript.
+ */
+export declare function useMessageScrollerLayoutStability(viewportRef: RefObject<HTMLElement | null>, scrollToEnd: ScrollToEnd): void;
+export {};
+//# sourceMappingURL=message-scroller-layout-stability.d.ts.map

package/dist/components/ui/message-scroller-layout-stability.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller-layout-stability.d.ts","sourceRoot":"","sources":["../../../src/components/ui/message-scroller-layout-stability.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAQzD,KAAK,WAAW,GAAG,CAAC,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,KAAK,OAAO,CAAA;AAEvE,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,WAAW,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,EAAE,OAAO,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAWD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,WAAW,GAAG,OAAO,CAKrE;AAED,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,WAAW,GACpB,6BAA6B,CAoB/B;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,6BAA6B,GACtC,OAAO,CAcT;AAED;;;;;;;GAOG;AACH,wBAAgB,iCAAiC,CAC/C,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1C,WAAW,EAAE,WAAW,QAqGzB"}

package/dist/components/ui/message-scroller-layout-stability.js

@@ -0,0 +1,153 @@
+import { useEffect, useRef } from 'react';
+const END_THRESHOLD_PX = 8;
+const POSITION_EPSILON_PX = 0.5;
+const USER_SCROLL_GRACE_MS = 300;
+const CONTENT_ANCHOR_SELECTOR = '[data-message-scroll-anchor]';
+const MESSAGE_ANCHOR_SELECTOR = '[data-message-id]';
+function relativePosition(element, viewport) {
+    const elementRect = element.getBoundingClientRect();
+    const viewportRect = viewport.getBoundingClientRect();
+    return {
+        top: elementRect.top - viewportRect.top,
+        bottom: elementRect.bottom - viewportRect.top,
+    };
+}
+export function isMessageScrollerAtEnd(viewport) {
+    return (viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <=
+        END_THRESHOLD_PX);
+}
+export function captureMessageScrollerLayout(viewport) {
+    // Prefer stable leaves within a message. A top-level message's own top does
+    // not move when content collapses inside it, so it is only a fallback when
+    // the visible leaf itself was removed by the disclosure transition.
+    const contentAnchors = Array.from(viewport.querySelectorAll(CONTENT_ANCHOR_SELECTOR));
+    const messageAnchors = Array.from(viewport.querySelectorAll(MESSAGE_ANCHOR_SELECTOR));
+    const anchors = [...contentAnchors, ...messageAnchors].map((element) => ({
+        element,
+        ...relativePosition(element, viewport),
+    }));
+    return {
+        anchors,
+        atEnd: isMessageScrollerAtEnd(viewport),
+        scrollHeight: viewport.scrollHeight,
+    };
+}
+/**
+ * Preserve the first previously visible stable leaf when content above it
+ * changes height. Native scroll anchoring may already have done this; in that
+ * case the measured delta is zero and this is deliberately a no-op.
+ */
+export function restoreMessageScrollerAnchor(viewport, snapshot) {
+    const anchor = snapshot.anchors.find(({ element, top, bottom }) => {
+        if (!element.isConnected)
+            return false;
+        const current = element.getBoundingClientRect();
+        return current.height > 0 && bottom > 0 && top < viewport.clientHeight;
+    });
+    if (!anchor)
+        return false;
+    const current = relativePosition(anchor.element, viewport);
+    const delta = current.top - anchor.top;
+    if (Math.abs(delta) <= POSITION_EPSILON_PX)
+        return false;
+    viewport.scrollTop += delta;
+    return true;
+}
+/**
+ * Complements shadcn's message scroller for mutable chat rows. The upstream
+ * primitive handles appends, prepends, and explicit jumps well, but a nested
+ * disclosure shrinking inside an existing row can look like user scroll
+ * intent. We remember whether the viewport was following the end before the
+ * resize and restore that mode, or preserve a visible content leaf when the
+ * user is reading higher in the transcript.
+ */
+export function useMessageScrollerLayoutStability(viewportRef, scrollToEnd) {
+    const snapshotRef = useRef(null);
+    const followEndRef = useRef(true);
+    const userInteractingRef = useRef(false);
+    const suspendStabilityUntilRef = useRef(0);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport || typeof ResizeObserver === 'undefined')
+            return;
+        snapshotRef.current = captureMessageScrollerLayout(viewport);
+        followEndRef.current = snapshotRef.current.atEnd;
+        let frame = 0;
+        const suspendForUserScroll = () => {
+            suspendStabilityUntilRef.current = Date.now() + USER_SCROLL_GRACE_MS;
+        };
+        const isUserScrolling = () => userInteractingRef.current ||
+            Date.now() < suspendStabilityUntilRef.current;
+        const handleWheel = (event) => {
+            suspendForUserScroll();
+            if (event.deltaY < 0)
+                followEndRef.current = false;
+            snapshotRef.current = captureMessageScrollerLayout(viewport);
+        };
+        const handlePointerDown = () => {
+            userInteractingRef.current = true;
+            suspendForUserScroll();
+            snapshotRef.current = captureMessageScrollerLayout(viewport);
+        };
+        const handlePointerUp = () => {
+            userInteractingRef.current = false;
+            suspendForUserScroll();
+        };
+        const captureAfterIntentionalScroll = () => {
+            const previous = snapshotRef.current;
+            const heightChanged = previous &&
+                Math.abs(previous.scrollHeight - viewport.scrollHeight) >
+                    POSITION_EPSILON_PX;
+            // A browser clamp caused by content shrinking is layout, not user intent.
+            // Explicit wheel or scrollbar interaction always wins over that heuristic.
+            if (isUserScrolling() || !heightChanged) {
+                if (isUserScrolling())
+                    suspendForUserScroll();
+                followEndRef.current = isMessageScrollerAtEnd(viewport);
+                snapshotRef.current = captureMessageScrollerLayout(viewport);
+            }
+        };
+        const resizeObserver = new ResizeObserver(() => {
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(() => {
+                const previous = snapshotRef.current;
+                if (isUserScrolling()) {
+                    snapshotRef.current = captureMessageScrollerLayout(viewport);
+                    return;
+                }
+                if (previous) {
+                    if (followEndRef.current) {
+                        // Public API resets the primitive's internal mode as well as the
+                        // DOM position after a shrink was mistaken for an upward scroll.
+                        scrollToEnd({ behavior: 'auto' });
+                    }
+                    else {
+                        restoreMessageScrollerAnchor(viewport, previous);
+                    }
+                }
+                snapshotRef.current = captureMessageScrollerLayout(viewport);
+            });
+        });
+        const content = viewport.querySelector('[data-slot="message-scroller-content"]');
+        if (content)
+            resizeObserver.observe(content);
+        viewport.addEventListener('wheel', handleWheel, { passive: true });
+        viewport.addEventListener('pointerdown', handlePointerDown, {
+            passive: true,
+        });
+        window.addEventListener('pointerup', handlePointerUp, { passive: true });
+        window.addEventListener('pointercancel', handlePointerUp, { passive: true });
+        viewport.addEventListener('scroll', captureAfterIntentionalScroll, {
+            passive: true,
+        });
+        return () => {
+            window.cancelAnimationFrame(frame);
+            resizeObserver.disconnect();
+            viewport.removeEventListener('wheel', handleWheel);
+            viewport.removeEventListener('pointerdown', handlePointerDown);
+            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointercancel', handlePointerUp);
+            viewport.removeEventListener('scroll', captureAfterIntentionalScroll);
+        };
+    }, [scrollToEnd, viewportRef]);
+}

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

@@ -0,0 +1,11 @@
+import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
+import * as React from 'react';
+import { Button } from './button';
+declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerViewport({ className, ref, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>): import("react/jsx-runtime").JSX.Element;
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, };
+//# sourceMappingURL=message-scroller.d.ts.map

package/dist/components/ui/message-scroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/ui/message-scroller.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,IAAI,wBAAwB,EAC3C,kBAAkB,EAClB,4BAA4B,EAC5B,4BAA4B,EAC7B,MAAM,gCAAgC,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,iBAAS,uBAAuB,CAC9B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,QAAQ,CAAC,2CAGtE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,IAAI,CAAC,2CAW5D;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,QAAQ,CAAC,2CAyBhE;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,OAAO,CAAC,2CAQ/D;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,IAAI,CAAC,2CAY5D;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAiB,EACjB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAqB,EACrB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,MAAM,CAAC,GAC7D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAyB9D;AAED,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,4BAA4B,EAC5B,4BAA4B,GAC7B,CAAA"}

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

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from '@shadcn/react/message-scroller';
+import { ArrowDown } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { useMessageScrollerLayoutStability } from './message-scroller-layout-stability';
+function MessageScrollerProvider(props) {
+    return _jsx(MessageScrollerPrimitive.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+    return (_jsx(MessageScrollerPrimitive.Root, { "data-slot": "message-scroller", className: cn('group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden', className), ...props }));
+}
+function MessageScrollerViewport({ className, ref, ...props }) {
+    const viewportRef = React.useRef(null);
+    const { scrollToEnd } = useMessageScroller();
+    useMessageScrollerLayoutStability(viewportRef, scrollToEnd);
+    const setViewportRef = React.useCallback((element) => {
+        viewportRef.current = element;
+        if (typeof ref === 'function')
+            ref(element);
+        else if (ref)
+            ref.current = element;
+    }, [ref]);
+    return (_jsx(MessageScrollerPrimitive.Viewport, { ref: setViewportRef, "data-slot": "message-scroller-viewport", className: cn('message-scroller-viewport size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [contain:content] [scrollbar-gutter:stable]', className), ...props }));
+}
+function MessageScrollerContent({ className, ...props }) {
+    return (_jsx(MessageScrollerPrimitive.Content, { "data-slot": "message-scroller-content", className: cn('flex h-max min-h-full flex-col', className), ...props }));
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+    return (_jsx(MessageScrollerPrimitive.Item, { "data-slot": "message-scroller-item", scrollAnchor: scrollAnchor, className: cn('min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]', className), ...props }));
+}
+function MessageScrollerButton({ direction = 'end', className, children, render, variant = 'secondary', size = 'icon-sm', ...props }) {
+    return (_jsx(MessageScrollerPrimitive.Button, { "data-slot": "message-scroller-button", "data-direction": direction, "data-variant": variant, "data-size": size, direction: direction, className: cn('border-border bg-background text-foreground hover:bg-muted hover:text-foreground absolute left-1/2 -translate-x-1/2 cursor-pointer transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[direction=end]:bottom-4 data-[direction=start]:top-4 data-[active=true]:translate-y-0 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:data-[active=false]:-translate-y-full data-[active=false]:scale-95 data-[active=true]:scale-100 data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[direction=start]:[&_svg]:rotate-180', className), render: render ?? _jsx(Button, { variant: variant, size: size }), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(ArrowDown, {}), _jsx("span", { className: "sr-only", children: direction === 'end' ? 'Scroll to end' : 'Scroll to start' })] })) }));
+}
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, };

package/dist/components/ui/notification-dot.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function NotificationDot({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { NotificationDot };
+//# sourceMappingURL=notification-dot.d.ts.map

package/dist/components/ui/notification-dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-dot.d.ts","sourceRoot":"","sources":["../../../src/components/ui/notification-dot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/notification-dot.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function NotificationDot({ className, ...props }) {
+    return (_jsx("span", { "aria-hidden": "true", "data-slot": "notification-dot", className: cn('bg-primary inline-block size-1.5 shrink-0 rounded-full', className), ...props }));
+}
+export { NotificationDot };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const numberInputVariants: (props?: ({
+    variant?: "default" | "filled" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface NumberInputProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'>, VariantProps<typeof numberInputVariants> {
+    value?: number | null;
+    defaultValue?: number;
+    onValueChange?: (value: number | null) => void;
+    unit?: React.ReactNode;
+    steppers?: boolean;
+}
+declare function NumberInput({ className, value, defaultValue, onValueChange, unit, steppers, variant, size, min, max, step, disabled, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export { NumberInput, numberInputVariants };
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/ui/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/number-input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,mBAAmB;;;8EAmBxB,CAAA;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACxD,EACD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,QAAe,EACf,OAAO,EACP,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmGlB;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/ui/number-input.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { cva } from 'class-variance-authority';
+const numberInputVariants = cva('border-input bg-transparent focus-within:border-ring focus-within:ring-ring/50 flex items-stretch overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', {
+    variants: {
+        variant: {
+            default: 'bg-background',
+            filled: 'bg-muted/60 border-transparent shadow-none',
+        },
+        size: {
+            sm: 'h-8',
+            default: 'h-9',
+            lg: 'h-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function NumberInput({ className, value, defaultValue, onValueChange, unit, steppers = true, variant, size, min, max, step = 1, disabled, ...props }) {
+    const controlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
+    const currentValue = controlled ? value : internalValue;
+    const commitValue = React.useCallback((nextValue) => {
+        if (!controlled)
+            setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    }, [controlled, onValueChange]);
+    const changeByStep = React.useCallback((direction) => {
+        const numericStep = typeof step === 'number' ? step : Number(step);
+        const safeStep = Number.isFinite(numericStep) ? numericStep : 1;
+        const baseValue = currentValue ?? 0;
+        let nextValue = baseValue + safeStep * direction;
+        const numericMin = min === undefined ? undefined : Number(min);
+        const numericMax = max === undefined ? undefined : Number(max);
+        if (numericMin !== undefined && Number.isFinite(numericMin)) {
+            nextValue = Math.max(numericMin, nextValue);
+        }
+        if (numericMax !== undefined && Number.isFinite(numericMax)) {
+            nextValue = Math.min(numericMax, nextValue);
+        }
+        commitValue(nextValue);
+    }, [commitValue, currentValue, max, min, step]);
+    return (_jsxs("div", { "data-slot": "number-input", "data-size": size ?? 'default', "data-variant": variant ?? 'default', className: cn(numberInputVariants({ variant, size }), className), children: [_jsx("input", { "data-slot": "number-input-field", type: "number", value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, className: "placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent px-3 text-sm outline-none disabled:cursor-not-allowed", onChange: (event) => {
+                    const nextValue = event.currentTarget.value === ''
+                        ? null
+                        : event.currentTarget.valueAsNumber;
+                    commitValue(Number.isNaN(nextValue) ? null : nextValue);
+                }, ...props }), unit ? (_jsx("span", { "data-slot": "number-input-unit", className: "text-muted-foreground flex shrink-0 items-center pr-2 text-xs", children: unit })) : null, steppers ? (_jsxs("span", { "data-slot": "number-input-steppers", className: "border-border/70 flex w-6 shrink-0 flex-col border-l", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Increase value", className: "h-1/2 min-h-0 w-full rounded-none border-b", onClick: () => changeByStep(1), children: _jsx(ChevronUpIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Decrease value", className: "h-1/2 min-h-0 w-full rounded-none", onClick: () => changeByStep(-1), children: _jsx(ChevronDownIcon, {}) })] })) : null] }));
+}
+export { NumberInput, numberInputVariants };