@moldable-ai/ui 0.2.19 → 0.2.21

package/dist/components/ui/index.js

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './alert';
 export * from './alert-dialog';
+export * from './app-frame';
 export * from './aspect-ratio';
 export * from './avatar';
 export * from './badge';
@@ -13,41 +14,63 @@ export * from './carousel';
 export * from './chart';
 export * from './checkbox';
 export * from './collapsible';
+export * from './color-well';
+export * from './combobox';
 export * from './command';
+export * from './confirm-dialog';
 export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
+export * from './date-field';
+export * from './date-picker';
 export * from './empty';
+export * from './edge-fade';
 export * from './field';
 export * from './form';
+export * from './grid';
 export * from './hover-card';
+export * from './icon-button';
 export * from './input';
 export * from './input-group';
 export * from './input-otp';
+export * from './inspector';
 export * from './item';
 export * from './kbd';
 export * from './label';
+export * from './list';
 export * from './menubar';
+export * from './material';
+export * from './message-scroller';
 export * from './navigation-menu';
+export * from './navigation-button-group';
+export * from './notification-dot';
+export * from './number-input';
 export * from './pagination';
+export * from './panel';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';
 export * from './resizable';
 export * from './scroll-area';
+export * from './search-field';
 export * from './select';
+export * from './segmented-control';
 export * from './separator';
 export * from './sheet';
 export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
+export * from './split-view';
 export * from './spinner';
+export * from './status';
 export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export * from './text';
 export * from './toggle';
 export * from './toggle-group';
+export * from './toolbar';
 export * from './tooltip';

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

@@ -3,7 +3,7 @@ import { Button } from './button';
 import { type VariantProps } from 'class-variance-authority';
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Text } from './text';
+declare function Inspector({ className, ...props }: React.ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface InspectorSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare function InspectorSection({ title, actions, className, children, ...props }: InspectorSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function InspectorRow({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorLabel({ className, ...props }: React.ComponentProps<typeof Text>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorValue({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Inspector, InspectorContent, InspectorHeader, InspectorLabel, InspectorRow, InspectorSection, InspectorValue, };
+//# sourceMappingURL=inspector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../src/components/ui/inspector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAWxE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW5E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAqCvB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,cAAc,GACf,CAAA"}

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,28 @@
+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 ListSectionProps = Omit<React.ComponentProps<'div'>, 'role'>;
+declare function ListSection({ className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: ListSectionProps): import("react/jsx-runtime").JSX.Element;
+type ListSectionHeaderProps = Omit<React.ComponentProps<'div'>, 'id'>;
+declare function ListSectionHeader({ className, ...props }: ListSectionHeaderProps): 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, ListSection, ListSectionHeader, type ListProps, type ListSectionHeaderProps, type ListSectionProps, 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;AAO9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AA+CvD,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,2CAoMX;AAED,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;AAEjE,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,KAAK,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;AAErE,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAiBzE;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,2CA+Ef;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ1E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,CAAA"}

package/dist/components/ui/list.js

@@ -0,0 +1,235 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { getCollectionItemsInDomOrder, isInteractiveDescendant, } from './collection-navigation';
+const ListContext = React.createContext(null);
+const ListSectionContext = 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 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 });
+        return () => {
+            itemsRef.current.delete(value);
+            setActiveValueState((current) => (current === value ? null : current));
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        const items = getCollectionItemsInDomOrder(itemsRef.current).filter(([, item]) => !disabled && !item.disabled);
+        setActiveValueState((current) => {
+            if (current && items.some(([value]) => value === current))
+                return current;
+            return (items.find(([value]) => selection.has(value))?.[0] ??
+                items[0]?.[0] ??
+                null);
+        });
+    }, [children, disabled, selection]);
+    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 = getCollectionItemsInDomOrder(itemsRef.current).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 ListSection({ className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const headerId = React.useId();
+    return (_jsx(ListSectionContext.Provider, { value: { headerId }, children: _jsx("div", { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : (ariaLabelledBy ?? headerId), "data-slot": "list-section", className: cn('flex min-w-0 flex-col gap-0.5', className), ...props, children: children }) }));
+}
+function ListSectionHeader({ className, ...props }) {
+    const context = React.useContext(ListSectionContext);
+    if (!context) {
+        throw new Error('ListSectionHeader must be used inside ListSection');
+    }
+    return (_jsx("div", { id: context.headerId, "data-slot": "list-section-header", className: cn('text-muted-foreground px-2.5 py-1 text-xs font-medium', className), ...props }));
+}
+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, ListSection, ListSectionHeader, };

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const materialVariants: (props?: ({
+    shape?: "circle" | "rounded" | "capsule" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MaterialVariant = 'regular' | 'clear';
+export type MaterialShape = NonNullable<VariantProps<typeof materialVariants>['shape']>;
+export type MaterialElevation = 'none' | 'panel' | 'overlay';
+export interface MaterialProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof materialVariants> {
+    /**
+     * `regular` is the default for toolbars and control chrome. Reserve `clear`
+     * for compact controls floating above media or a richly colored canvas.
+     */
+    variant?: MaterialVariant;
+    elevation?: MaterialElevation;
+    interactive?: boolean;
+    asChild?: boolean;
+}
+declare function Material({ asChild, className, elevation, interactive, shape, variant, ...props }: MaterialProps): import("react/jsx-runtime").JSX.Element;
+declare const materialGroupSpacing: {
+    readonly compact: "gap-0.5 p-0.5";
+    readonly default: "gap-1 p-1";
+    readonly comfortable: "gap-1.5 p-1.5";
+};
+export interface MaterialGroupProps extends Omit<MaterialProps, 'asChild' | 'interactive'> {
+    spacing?: keyof typeof materialGroupSpacing;
+}
+/**
+ * A single sampled material layer for a related control cluster. Children
+ * should be ordinary transparent or ghost controls, not nested Materials.
+ */
+declare function MaterialGroup({ className, spacing, ...props }: MaterialGroupProps): import("react/jsx-runtime").JSX.Element;
+export { Material, MaterialGroup, materialVariants };
+//# sourceMappingURL=material.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../../src/components/ui/material.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,gBAAgB;;8EAWpB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,WAAW,CACrC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC/C,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC3C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAe,EACf,SAAS,EACT,SAAmB,EACnB,WAAmB,EACnB,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,2CAcf;AAED,QAAA,MAAM,oBAAoB;;;;CAIhB,CAAA;AAEV,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,aAAa,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAA;CAC5C;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/material.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils';
+import { cva } from 'class-variance-authority';
+const materialVariants = cva('moldable-material border text-inherit', {
+    variants: {
+        shape: {
+            rounded: 'rounded-overlay',
+            capsule: 'rounded-full',
+            circle: 'aspect-square rounded-full',
+        },
+    },
+    defaultVariants: {
+        shape: 'rounded',
+    },
+});
+function Material({ asChild = false, className, elevation = 'panel', interactive = false, shape, variant = 'regular', ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(Comp, { "data-slot": asChild ? undefined : 'material', "data-material": variant, "data-material-elevation": elevation, "data-material-interactive": interactive || undefined, "data-material-shape": shape ?? 'rounded', className: cn(materialVariants({ shape }), className), ...props }));
+}
+const materialGroupSpacing = {
+    compact: 'gap-0.5 p-0.5',
+    default: 'gap-1 p-1',
+    comfortable: 'gap-1.5 p-1.5',
+};
+/**
+ * A single sampled material layer for a related control cluster. Children
+ * should be ordinary transparent or ghost controls, not nested Materials.
+ */
+function MaterialGroup({ className, spacing = 'default', ...props }) {
+    return (_jsx(Material, { "data-slot": "material-group", className: cn('inline-flex min-w-0 items-center', materialGroupSpacing[spacing], className), ...props }));
+}
+export { Material, MaterialGroup, materialVariants };

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

@@ -0,0 +1,162 @@
+import { MessageScrollerPolicy } from './message-scroller-policy';
+export type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';
+export type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';
+export type MessageScrollerScrollOptions = {
+    align?: MessageScrollerScrollAlign;
+    behavior?: ScrollBehavior;
+    scrollMargin?: number;
+};
+export type MessageScrollerScrollable = {
+    start: boolean;
+    end: boolean;
+};
+export type MessageScrollerVisibilityState = {
+    currentAnchorId: string | null;
+    visibleMessageIds: string[];
+};
+export interface MessageScrollerControllerOptions {
+    autoScroll: boolean;
+    defaultScrollPosition: MessageScrollerDefaultScrollPosition;
+    scrollEdgeThreshold: number;
+    scrollPreviousItemPeek: number;
+    scrollMargin: number;
+}
+export interface ExternalStore<T> {
+    getSnapshot: () => T;
+    hasListeners: () => boolean;
+    setSnapshot: (next: T) => void;
+    subscribe: (listener: () => void, onFirst?: () => void, onLast?: () => void) => () => void;
+}
+export declare function createExternalStore<T>(initial: T, isEqual: (a: T, b: T) => boolean): ExternalStore<T>;
+export type ReadingLeaf = {
+    element: HTMLElement;
+    top: number;
+    bottom: number;
+};
+export declare function isMessageScrollerAtEnd(viewport: HTMLElement, threshold: number): boolean;
+/**
+ * Snapshot of the stable leaves the reader can currently see, preferring
+ * fine-grained `[data-message-scroll-anchor]` leaves (their tops do not move
+ * when a disclosure collapses inside the same message) over whole items.
+ */
+export declare function captureReadingLeaves(viewport: HTMLElement, content: HTMLElement, items: HTMLElement[]): ReadingLeaf[];
+/**
+ * Re-pins the first still-visible captured leaf after content above it
+ * changed size. Native scroll anchoring may already have compensated; the
+ * measured delta is zero then and this is deliberately a no-op.
+ */
+export declare function restoreReadingLeaves(viewport: HTMLElement, leaves: readonly ReadingLeaf[]): boolean;
+/**
+ * The single DOM-side owner of transcript scrolling. Every behavior that can
+ * move the viewport — follow-the-end, turn anchoring, prepend preservation,
+ * reading-position stability while rows above collapse — routes through this
+ * controller and its {@link MessageScrollerPolicy}, so nothing here can fight
+ * the reader (or another controller) for the scroll position.
+ */
+export declare class MessageScrollerController {
+    readonly scrollableStore: ExternalStore<MessageScrollerScrollable>;
+    readonly visibilityStore: ExternalStore<MessageScrollerVisibilityState>;
+    policy: MessageScrollerPolicy;
+    options: MessageScrollerControllerOptions;
+    preserveScrollOnPrepend: boolean;
+    private root;
+    private viewport;
+    private content;
+    private spacer;
+    private readonly messageElements;
+    private readonly handledTurnAnchors;
+    private readonly visibleMessageIds;
+    private readonly warmedItems;
+    private lastScrollTop;
+    private previousFirstItem;
+    private previousItemCount;
+    private anchoredElement;
+    private trackedFirstVisible;
+    private readingLeaves;
+    private pendingScrollToMessage;
+    private defaultPositionApplied;
+    private spacerHeight;
+    private spacerGap;
+    private programmaticDeadline;
+    private stateFrame;
+    private visibilityFrame;
+    private warmupHandle;
+    private warmupUsesIdleCallback;
+    private intersectionObserver;
+    constructor(options: MessageScrollerControllerOptions);
+    get viewportElement(): HTMLElement | null;
+    setRoot(element: HTMLElement | null): void;
+    setViewport(element: HTMLElement | null): void;
+    setContent(element: HTMLElement | null): void;
+    setSpacer(element: HTMLElement | null): void;
+    registerMessage(messageId: string, element: HTMLElement | null, previous: HTMLElement | null): void;
+    scrollToEnd: (options?: MessageScrollerScrollOptions) => boolean;
+    scrollToStart: (options?: MessageScrollerScrollOptions) => boolean;
+    scrollToMessage: (messageId: string, options?: MessageScrollerScrollOptions) => boolean;
+    scrollToElement(element: HTMLElement, options?: MessageScrollerScrollOptions, { keepPreviousPeek }?: {
+        keepPreviousPeek?: boolean;
+    }): boolean;
+    handleScroll(): void;
+    handleWheel(deltaY: number): void;
+    handleTouchMove(): void;
+    handleScrollKey(): void;
+    /**
+     * Content box resized (streaming growth, images decoding, disclosures
+     * collapsing, `content-visibility` reveals). Which way the viewport moves
+     * — if at all — is entirely the policy's call.
+     */
+    handleResize(): void;
+    /** Children of the content element changed. Runs before the next paint. */
+    handleContentMutation(): void;
+    observeVisibility(): void;
+    unobserveVisibility(): void;
+    resetDefaultPosition(): void;
+    updateOptions(options: MessageScrollerControllerOptions): void;
+    destroy(): void;
+    private applyDefaultPosition;
+    private anchorTurn;
+    private markTurnAnchorsHandled;
+    /**
+     * Older rows were inserted above the reader. Compensate the scroll offset
+     * by the tracked first-visible row's displacement in the same mutation
+     * pass, before the shifted layout can paint.
+     */
+    private preservePrependPosition;
+    private performScroll;
+    /**
+     * Snapshot of stable leaves the reader can see. When a disclosure above
+     * them collapses (or a hidden row re-measures), the first still-visible
+     * leaf is re-pinned so the text under the reader's eyes never shifts.
+     */
+    private snapshotReadingLeaves;
+    private restoreReadingPosition;
+    private trackFirstVisibleItem;
+    private scheduleStateCommit;
+    /**
+     * Once per frame: publish the scrollable edges and refresh the geometry
+     * snapshots (tracked first-visible row, reading leaves) that prepend
+     * preservation and reading-position restores compare against. Capturing
+     * here — instead of on every scroll event — bounds rect reads to one pass
+     * per frame.
+     */
+    private commitFrameState;
+    private applyStateAttributes;
+    private scheduleVisibilitySync;
+    private computeVisibility;
+    /**
+     * Rows outside the viewport skip rendering via `content-visibility: auto`
+     * and a placeholder intrinsic size. Their first reveal during an upward
+     * scroll pays first-time layout of complex markdown — felt as hitches on
+     * the first pass through history. Rendering each row once at idle records
+     * its real size (the `auto` keyword keeps last-remembered sizes), so the
+     * first real scroll finds everything measured and warm.
+     */
+    private scheduleWarmup;
+    private warmupBatch;
+    private cancelWarmup;
+    private flushPendingScrollToMessage;
+    private setSpacerHeight;
+    private itemChildren;
+    private isAtEnd;
+}
+//# sourceMappingURL=message-scroller-controller.d.ts.map