@atmos.build/ui 0.1.0

package/dist/components/collection-view/collection-view-settings.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, useCallback, useContext, useDeferredValue, useId, useMemo, useRef, useState, } from 'react';
+import { DragHandle, SortableList, reorderById } from '../sortable.js';
+import { ArrowDown, ArrowLeft, ArrowUp, ChevronRight, Plus, Search, Settings2, X, } from 'lucide-react';
+import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger, useStackedPopoverNavigation, } from '../popover-stack.js';
+import { Button } from '../button.js';
+import { Input } from '../input.js';
+import { cn } from '../../lib/cn.js';
+const rootPage = '__collection-view-settings-root__';
+const CollectionViewSettingsNavigationContext = createContext(null);
+export function useCollectionViewSettingsNavigation() {
+    const context = useContext(CollectionViewSettingsNavigationContext);
+    if (!context) {
+        throw new Error('useCollectionViewSettingsNavigation must be used inside CollectionViewSettings');
+    }
+    return context;
+}
+export function CollectionViewSettings({ labels, sections, identity, open: controlledOpen, defaultOpen = false, onOpenChange, align = 'end', triggerTestId, triggerClassName, contentClassName, showTriggerLabel = true, }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const headingId = useId();
+    const open = controlledOpen ?? uncontrolledOpen;
+    const navigation = useStackedPopoverNavigation(rootPage);
+    const resetNavigation = navigation.reset;
+    const activeSection = sections.find((section) => section.id === navigation.page);
+    const showRoot = navigation.page === rootPage || !activeSection;
+    const setOpen = useCallback((next) => {
+        if (controlledOpen === undefined)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (!next)
+            resetNavigation();
+    }, [controlledOpen, onOpenChange, resetNavigation]);
+    const navigationContext = useMemo(() => ({
+        page: navigation.page,
+        openPage: navigation.pushPage,
+        replacePage: navigation.replacePage,
+        goBack: navigation.goBack,
+        close: () => setOpen(false),
+    }), [navigation.page, navigation.pushPage, navigation.replacePage, navigation.goBack, setOpen]);
+    const title = showRoot ? labels.settings : activeSection.label;
+    return (_jsx(CollectionViewSettingsNavigationContext.Provider, { value: navigationContext, children: _jsxs(StackedPopover, { kind: "dialog", modal: true, open: open, onOpenChange: setOpen, children: [_jsx(StackedPopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: showTriggerLabel ? 'sm' : 'icon-sm', variant: showTriggerLabel ? 'outline' : 'ghost', className: cn('gap-1.5', triggerClassName), "aria-label": labels.settings, "data-testid": triggerTestId, children: [_jsx(Settings2, { className: "size-3.5", strokeWidth: 1.5 }), showTriggerLabel ? labels.settings : null] }) }), _jsxs(StackedPopoverContent, { align: align, "aria-labelledby": headingId, onEscapeKeyDown: navigation.onEscapeKeyDown, className: cn('w-[340px] max-w-[calc(100vw-1rem)] gap-0 p-0', contentClassName), children: [_jsx(CollectionViewSettingsHeader, { headingId: headingId, title: title, backLabel: labels.back, closeLabel: labels.close, canGoBack: !showRoot && navigation.canGoBack, onBack: navigation.goBack, onClose: () => setOpen(false) }), showRoot ? (_jsx(CollectionViewSettingsRoot, { identity: identity, sections: sections, onOpenSection: navigation.page === rootPage ? navigation.pushPage : navigation.replacePage })) : (_jsx(CollectionViewSettingsPage, { padding: activeSection.contentPadding, children: activeSection.content }))] })] }) }));
+}
+function CollectionViewSettingsHeader({ headingId, title, backLabel, closeLabel, canGoBack, onBack, onClose, }) {
+    return (_jsxs("header", { className: "border-border/60 flex h-11 items-center gap-2 border-b px-2.5", children: [canGoBack ? (_jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": backLabel, onClick: onBack, children: _jsx(ArrowLeft, { className: "size-4", strokeWidth: 1.5 }) })) : null, _jsx("h2", { id: headingId, className: "min-w-0 flex-1 truncate text-sm font-semibold", children: title }), _jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { className: "size-4", strokeWidth: 1.5 }) })] }));
+}
+function CollectionViewSettingsRoot({ identity, sections, onOpenSection, }) {
+    return (_jsxs("div", { className: "grid gap-1 p-2", children: [identity ? _jsx(CollectionViewSettingsIdentity, { ...identity }) : null, sections
+                .filter((section) => section.showInRoot !== false)
+                .map((section) => (_jsx(CollectionViewSettingsSectionRow, { ...section, onClick: () => onOpenSection(section.id) }, section.id)))] }));
+}
+export function CollectionViewSettingsIdentity({ name, icon, renameLabel, readOnly = false, onRename, }) {
+    const [edit, setEdit] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const cancelBlurRef = useRef(false);
+    const value = edit?.base === name ? edit.value : name;
+    const editable = Boolean(onRename) && !readOnly;
+    const commit = async () => {
+        if (cancelBlurRef.current) {
+            cancelBlurRef.current = false;
+            return;
+        }
+        const next = value.trim();
+        if (!next || next === name || !onRename) {
+            setEdit(null);
+            return;
+        }
+        setSaving(true);
+        try {
+            await onRename(next);
+            setEdit({ base: name, value: next });
+        }
+        catch {
+            setEdit(null);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs("div", { className: "border-border/60 mb-1 flex min-h-9 items-center gap-2 border-b px-2 pb-2 text-sm font-medium", children: [icon ? (_jsx("span", { className: "text-muted-foreground flex size-6 shrink-0 items-center justify-center [&>svg]:size-4", children: icon })) : null, editable ? (_jsx(Input, { value: value, disabled: saving, onChange: (event) => setEdit({ base: name, value: event.target.value }), onBlur: () => void commit(), onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        event.currentTarget.blur();
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                        cancelBlurRef.current = true;
+                        setEdit(null);
+                        event.currentTarget.blur();
+                    }
+                }, "aria-label": renameLabel, className: "h-8 text-sm" })) : (_jsx("span", { className: "truncate", children: name }))] }));
+}
+export function CollectionViewSettingsChoiceGroup({ value, choices, onChange, columns = 2, presentation = 'row', testIdPrefix, className, }) {
+    return (_jsx("div", { className: cn('grid gap-1.5', columns === 3 ? 'grid-cols-3' : 'grid-cols-2', className), children: choices.map((choice) => (_jsxs(Button, { type: "button", size: "sm", variant: value === choice.value ? 'secondary' : 'outline', "aria-pressed": value === choice.value, onClick: () => onChange(choice.value), "data-testid": testIdPrefix ? `${testIdPrefix}-${choice.value}` : undefined, className: cn('gap-2', presentation === 'tile' ? 'h-[72px] flex-col justify-center' : 'justify-start'), children: [choice.icon ? (_jsx("span", { className: "text-muted-foreground [&>svg]:size-4", children: choice.icon })) : null, choice.label] }, choice.value))) }));
+}
+export function CollectionViewSettingsSectionRow({ label, icon, summary, disabled, testId, onClick, }) {
+    return (_jsxs("button", { type: "button", disabled: disabled, "data-testid": testId, onClick: onClick, className: "hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring flex min-h-9 w-full items-center gap-2 rounded-md px-2 text-left text-sm outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", children: [icon ? (_jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center [&>svg]:size-4 [&>svg]:stroke-[1.5]", children: icon })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), summary !== undefined ? (_jsx("span", { className: "text-muted-foreground max-w-[45%] truncate text-xs", children: summary })) : null, _jsx(ChevronRight, { className: "text-muted-foreground size-3.5 shrink-0", strokeWidth: 1.5 })] }));
+}
+export function CollectionViewSettingsPage({ className, padding = 'default', ...props }) {
+    return (_jsx("div", { className: cn('grid max-h-[min(440px,70vh)] gap-2 overflow-y-auto', padding === 'none' ? 'p-0' : 'p-2', className), ...props }));
+}
+export function CollectionViewSettingsAddAction({ children, className, ...props }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "xs", className: cn('w-fit gap-1.5', className), ...props, children: [_jsx(Plus, { className: "size-3.5", strokeWidth: 1.5 }), children] }));
+}
+export function CollectionViewSettingsFieldPicker({ fields, labels, onSelect, selectedField, selectedFields, className, }) {
+    const [query, setQuery] = useState('');
+    const listboxId = useId();
+    const deferredQuery = useDeferredValue(query);
+    const normalizedQuery = deferredQuery.trim().toLocaleLowerCase();
+    const searchableFields = useMemo(() => fields.map((field) => ({
+        field,
+        searchText: [field.label, field.id, ...(field.keywords ?? [])]
+            .join(' ')
+            .toLocaleLowerCase(),
+    })), [fields]);
+    const matchingFields = useMemo(() => searchableFields.filter(({ searchText }) => searchText.includes(normalizedQuery)), [normalizedQuery, searchableFields]);
+    const visibleFields = matchingFields.slice(0, 100);
+    const hasMoreFields = matchingFields.length > visibleFields.length;
+    return (_jsxs("div", { className: cn('grid gap-1', className), children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2", strokeWidth: 1.5 }), _jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), "aria-label": labels.searchFields, "aria-controls": listboxId, placeholder: labels.searchFields, className: "h-8 pl-8 text-xs" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-label": labels.searchFields, "aria-multiselectable": selectedFields ? true : undefined, className: "grid gap-0.5", children: visibleFields.length > 0 ? (visibleFields.map(({ field }, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": selectedField === field.id || selectedFields?.has(field.id) === true, disabled: field.disabled, onClick: () => onSelect(field.id), className: "hover:bg-accent aria-selected:bg-accent focus-visible:ring-ring flex min-h-8 items-center gap-2 rounded-md px-2 text-left text-sm outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", children: [field.icon ? (_jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center [&>svg]:size-3.5", children: Children.toArray(field.icon) })) : null, _jsx("span", { className: "truncate", children: field.label })] }, `${field.id}-${index}`)))) : (_jsx("p", { className: "text-muted-foreground py-5 text-center text-xs", children: labels.noFields })) }), hasMoreFields ? (_jsx("p", { role: "status", className: "text-muted-foreground px-2 py-1 text-xs", children: labels.refineSearch })) : null] }));
+}
+export function CollectionViewSettingsSortPage({ sorts, fields, labels, onChange, createSort, className, addButtonTestId, noFieldsLabel = labels.searchFields, refineSearchLabel, }) {
+    const [picker, setPicker] = useState(null);
+    const editingSort = picker?.kind === 'edit' ? sorts.find((sort) => sort.id === picker.sortId) : undefined;
+    const usedFields = useMemo(() => new Set(sorts.map((sort) => sort.field)), [sorts]);
+    const pickerFields = useMemo(() => fields.filter((field) => field.id === editingSort?.field || !usedFields.has(field.id)), [editingSort?.field, fields, usedFields]);
+    const fieldsById = useMemo(() => new Map(fields.map((field) => [field.id, field])), [fields]);
+    if (picker) {
+        return (_jsx(CollectionViewSettingsFieldPicker, { fields: pickerFields, labels: {
+                searchFields: labels.searchFields,
+                noFields: noFieldsLabel,
+                refineSearch: refineSearchLabel,
+            }, selectedField: editingSort?.field, onSelect: (field) => {
+                if (picker.kind === 'new')
+                    onChange([...sorts, createSort(field)]);
+                else
+                    onChange(sorts.map((sort) => (sort.id === picker.sortId ? { ...sort, field } : sort)));
+                setPicker(null);
+            } }));
+    }
+    return (_jsxs("div", { className: cn('grid gap-2', className), children: [_jsx(SortableList, { items: [...sorts], keyOf: (sort) => sort.id, orientation: "vertical", handle: true, onReorder: (movedId, { beforeId }) => onChange(reorderById([...sorts], movedId, beforeId)), className: "flex flex-col gap-1.5", renderItem: (sort, { dragHandleProps, isDragging }) => {
+                    const field = fieldsById.get(sort.field);
+                    const DirectionIcon = sort.dir === 'asc' ? ArrowUp : ArrowDown;
+                    const directionLabel = sort.dir === 'asc' ? labels.ascending : labels.descending;
+                    return (_jsxs("div", { className: cn('border-border bg-background flex min-h-9 items-center gap-1 rounded-lg border p-1', isDragging && 'ring-ring shadow-md ring-1'), children: [_jsx(DragHandle, { dragHandleProps: dragHandleProps, "aria-label": labels.reorder }), _jsxs(Button, { type: "button", variant: "ghost", size: "xs", className: "min-w-0 flex-1 justify-start gap-1.5 font-normal", onClick: () => setPicker({ kind: 'edit', sortId: sort.id }), children: [field?.icon ? (_jsx("span", { className: "text-muted-foreground [&>svg]:size-3.5", children: field.icon })) : null, _jsx("span", { className: "truncate", children: field?.label ?? sort.field })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "xs", "aria-label": directionLabel, className: "gap-1 font-normal", onClick: () => onChange(sorts.map((candidate) => candidate.id === sort.id
+                                    ? { ...candidate, dir: candidate.dir === 'asc' ? 'desc' : 'asc' }
+                                    : candidate)), children: [_jsx(DirectionIcon, { className: "size-3.5", strokeWidth: 1.5 }), directionLabel] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": labels.remove, onClick: () => onChange(sorts.filter((candidate) => candidate.id !== sort.id)), children: _jsx(X, { className: "size-3.5", strokeWidth: 1.5 }) })] }));
+                } }), pickerFields.length > 0 ? (_jsx(CollectionViewSettingsAddAction, { onClick: () => setPicker({ kind: 'new' }), "data-testid": addButtonTestId, children: labels.addSort })) : null] }));
+}

package/dist/components/collection-view/collection-view.d.ts

@@ -0,0 +1,87 @@
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
+import type { CollectionPointerModifiers } from './use-collection-selection.js';
+export declare function CollectionView({ className, ...props }: ComponentProps<'section'>): import("react").JSX.Element;
+export declare function CollectionHeader({ className, ...props }: ComponentProps<'header'>): import("react").JSX.Element;
+export interface CollectionTitleProps extends Omit<ComponentProps<'div'>, 'title'> {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+}
+export declare function CollectionTitle({ icon, title, description, className, ...props }: CollectionTitleProps): import("react").JSX.Element;
+export declare function CollectionHeaderActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface CollectionQueryControlsProps extends ComponentProps<'div'> {
+    filter?: ReactNode;
+    sort?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare function CollectionQueryControls({ filter, sort, trailing, children, className, ...props }: CollectionQueryControlsProps): import("react").JSX.Element;
+export declare function CollectionQueryIndicator({ icon, label, className, ...props }: ComponentProps<'span'> & {
+    icon?: ReactNode;
+    label: ReactNode;
+}): import("react").JSX.Element;
+export interface CollectionSelectionBarProps extends ComponentProps<'div'> {
+    summary: ReactNode;
+    actions?: ReactNode;
+    summaryTone?: 'foreground' | 'muted';
+    chromeFont?: string;
+}
+export declare function CollectionSelectionBar({ summary, actions, summaryTone, chromeFont, children, className, ...props }: CollectionSelectionBarProps): import("react").JSX.Element;
+export declare function CollectionViewport({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** `motion` consumes the drag and animation callbacks under `animate` rather than forwarding them
+ *  to the DOM, so the section cannot honour them. */
+type CollectionGroupSectionDomProps = Omit<ComponentProps<'section'>, 'title' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart'>;
+export interface CollectionGroupSectionProps extends CollectionGroupSectionDomProps {
+    groupKey: string;
+    label: string;
+    icon?: ReactNode;
+    /** Overrides the child count shown next to the label. `null` hides the count entirely. */
+    count?: number | null;
+    collapsed?: boolean;
+    onToggleCollapse?: () => void;
+    hideHeader?: boolean;
+    /** Applied to the wrapper holding both the collapse control and `actions`, so a tint
+     *  covers the whole header row. Not the same element as `headerClassName`. */
+    tintClassName?: string;
+    headerClassName?: string;
+    chromeFont?: string;
+    actions?: ReactNode;
+    /** Drop-target ref for the whole section, paired with `isOver`. */
+    droppableRef?: Ref<HTMLElement>;
+    /** Reveals `emptyDropTarget` and tints it while a dragged item hovers the section. */
+    isOver?: boolean;
+    /** Rendered instead of children while the section is empty and expanded. */
+    emptyDropTarget?: ReactNode;
+    /** Opts into layout animation: the section animates its position, its body its size. */
+    animate?: boolean;
+    children?: ReactNode;
+}
+export declare function CollectionGroupSection({ groupKey, label, icon, count, collapsed, onToggleCollapse, hideHeader, tintClassName, headerClassName, chromeFont, actions, droppableRef, isOver, emptyDropTarget, animate, children, className, ...props }: CollectionGroupSectionProps): import("react").JSX.Element;
+export interface CollectionRowProps extends ComponentProps<'div'> {
+    /** Draws a hairline along the row's top edge, so the multi-line row styles read as
+     *  discrete records instead of one run of text. Inset past the selection gutter so the
+     *  rule starts at the content, and drawn as a pseudo-element to stay out of the layout. */
+    separatedAbove?: boolean;
+}
+export declare function CollectionRow({ separatedAbove, className, ...props }: CollectionRowProps): import("react").JSX.Element;
+export declare function CollectionRowSelection({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function CollectionRowContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface CollectionRowStateOptions {
+    selected?: boolean;
+    active?: boolean;
+    selectedAbove?: boolean;
+    selectedBelow?: boolean;
+}
+/** Row chrome shared by every collection list: hover/active/selected tints and the
+ *  squared-off corners that fuse a contiguous selection into one block. Each state
+ *  publishes its surface as --row-surface so ringed children can match it. The
+ *  focus-visible ring is 2px accent so a row holding real DOM focus stays
+ *  distinguishable from the 1px border ring that merely marks the pointer cursor. */
+export declare function collectionRowStateClass({ selected, active, selectedAbove, selectedBelow, }: CollectionRowStateOptions): string;
+export interface CollectionRowCheckboxProps extends Omit<ComponentProps<'button'>, 'onSelect' | 'onToggle'> {
+    selected: boolean;
+    active?: boolean;
+    onToggle: (modifiers: CollectionPointerModifiers) => void;
+}
+/** Selection control for list rows: hidden until the row is hovered, focused, or selected. */
+export declare function CollectionRowCheckbox({ selected, active, onToggle, className, ...props }: CollectionRowCheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/collection-view/collection-view.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children } from 'react';
+import { Check, ChevronRight } from 'lucide-react';
+import { motion, useReducedMotion } from 'motion/react';
+import { cn } from '../../lib/cn.js';
+/** Square gutter: matches the compact row height (h-9) so the checkbox is inset equally on every side. */
+const COLLECTION_ROW_GUTTER = '[--collection-row-gutter:2.25rem]';
+export function CollectionView({ className, ...props }) {
+    return (_jsx("section", { "data-slot": "collection-view", className: cn('bg-background text-foreground relative flex min-h-0 flex-1 flex-col', className), ...props }));
+}
+export function CollectionHeader({ className, ...props }) {
+    return (_jsx("header", { "data-slot": "collection-header", className: cn('mx-auto flex h-auto w-full max-w-5xl shrink-0 items-center gap-3 px-6 pt-3 pb-1', className), ...props }));
+}
+export function CollectionTitle({ icon, title, description, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "collection-title", className: cn('flex min-w-0 flex-1 items-center gap-2', className), ...props, children: [icon ? (_jsx("span", { "data-slot": "collection-title-icon", className: "flex size-5 shrink-0 items-center justify-center", children: icon })) : null, _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-[18px] leading-7 font-semibold", children: title }), description ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: description })) : null] })] }));
+}
+export function CollectionHeaderActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "collection-header-actions", className: cn('ml-auto flex shrink-0 items-center gap-1.5', className), ...props }));
+}
+export function CollectionQueryControls({ filter, sort, trailing, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "collection-query-controls", className: cn('border-border/60 flex min-h-10 shrink-0 items-center gap-1.5 border-b px-6', className), ...props, children: [filter ? _jsx("div", { "data-slot": "collection-filter-control", children: filter }) : null, sort ? _jsx("div", { "data-slot": "collection-sort-control", children: sort }) : null, children, trailing ? (_jsx("div", { "data-slot": "collection-query-trailing", className: "ml-auto flex items-center gap-1.5", children: trailing })) : null] }));
+}
+export function CollectionQueryIndicator({ icon, label, className, ...props }) {
+    return (_jsxs("span", { "data-slot": "collection-query-indicator", className: cn('border-border/70 bg-muted/45 text-foreground inline-flex h-7 min-w-0 items-center gap-1.5 rounded-lg border px-2 text-xs', className), ...props, children: [icon ? _jsx("span", { className: "text-muted-foreground [&>svg]:size-3.5", children: icon }) : null, _jsx("span", { className: "max-w-[24ch] truncate", children: label })] }));
+}
+export function CollectionSelectionBar({ summary, actions, summaryTone = 'foreground', chromeFont, children, className, ...props }) {
+    const hasControls = Boolean(children) || Boolean(actions);
+    return (_jsxs("div", { "data-slot": "collection-selection-bar", role: "toolbar", className: cn('border-border/60 bg-popover/95 ring-foreground/5 pointer-events-auto absolute bottom-6 left-1/2 z-40 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1.5 rounded-xl border px-2.5 py-1.5 shadow-lg ring-1 backdrop-blur', className), ...props, children: [_jsx("span", { role: "status", className: cn('shrink-0 px-1 text-[12px] font-medium whitespace-nowrap tabular-nums', summaryTone === 'muted' ? 'text-muted-foreground' : 'text-foreground', chromeFont), children: summary }), hasControls ? _jsx("span", { className: "bg-border/70 h-5 w-px shrink-0", "aria-hidden": true }) : null, children, actions ? (_jsx("div", { "data-slot": "collection-selection-actions", className: "flex items-center gap-1.5", children: actions })) : null] }));
+}
+export function CollectionViewport({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "collection-viewport", className: cn('min-h-0 flex-1 overflow-auto', className), ...props }));
+}
+export function CollectionGroupSection({ groupKey, label, icon, count, collapsed = false, onToggleCollapse, hideHeader, tintClassName, headerClassName, chromeFont, actions, droppableRef, isOver = false, emptyDropTarget, animate = false, children, className, ...props }) {
+    const reduceMotion = useReducedMotion();
+    const layoutTransition = reduceMotion
+        ? { duration: 0 }
+        : { duration: 0.16, ease: [0.2, 0, 0, 1] };
+    const childCount = Children.count(children);
+    const resolvedCount = count === undefined ? childCount : count;
+    const isEmpty = (resolvedCount ?? childCount) === 0;
+    const heading = (_jsxs(_Fragment, { children: [onToggleCollapse ? (_jsx(ChevronRight, { "aria-hidden": true, strokeWidth: 1.5, className: cn('text-muted-foreground/55 size-3.5 shrink-0 transition-transform motion-reduce:transition-none', !collapsed && 'rotate-90') })) : null, icon ? _jsx("span", { className: "inline-flex shrink-0 items-center", children: icon }) : null, _jsx("span", { className: "text-foreground/80 truncate font-medium", children: label }), resolvedCount === null ? null : (_jsx("span", { className: cn('text-muted-foreground/45 tabular-nums', !chromeFont && 'font-mono'), children: resolvedCount }))] }));
+    const header = hideHeader ? (_jsx("div", { className: "h-2", "aria-hidden": true })) : (_jsx("div", { className: "bg-background/95 sticky top-0 z-10 px-2 pt-2 pb-1 backdrop-blur-sm", children: _jsxs("div", { "data-slot": "collection-group-header", className: cn('group/gh flex h-7 min-w-0 items-center gap-1 rounded-lg', tintClassName, chromeFont), children: [onToggleCollapse ? (_jsx("button", { type: "button", onClick: onToggleCollapse, "aria-expanded": !collapsed, className: cn('hover:bg-muted/40 focus-visible:ring-ring flex h-7 min-w-0 flex-1 items-center gap-2 rounded-lg px-2 text-left text-[12px] focus-visible:ring-2 focus-visible:ring-offset-2', headerClassName), children: heading })) : (_jsx("div", { className: cn('flex h-7 min-w-0 flex-1 items-center gap-2 px-2 text-[12px]', headerClassName), children: heading })), actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-1 pr-1.5 opacity-0 group-focus-within/gh:opacity-100 group-hover/gh:opacity-100", children: actions })) : null] }) }));
+    const body = collapsed ? null : emptyDropTarget !== undefined && isEmpty ? (_jsx("div", { "data-slot": "collection-group-empty-drop", "data-over": isOver ? '' : undefined, className: cn('mx-2 my-1 flex h-9 items-center rounded-lg transition-colors motion-reduce:transition-none', isOver ? 'bg-muted/45 ring-border/70 ring-1 ring-inset' : 'hidden'), children: emptyDropTarget })) : (children);
+    const sectionProps = {
+        role: 'group',
+        'aria-label': label,
+        className: cn('scroll-mt-8', className),
+        ...props,
+        ref: droppableRef ?? props.ref,
+    };
+    if (!animate) {
+        return (_jsxs("section", { "data-slot": "collection-group-section", "data-group": groupKey, ...sectionProps, children: [header, body] }));
+    }
+    return (_jsxs(motion.section, { "data-slot": "collection-group-section", "data-group": groupKey, layout: "position", transition: layoutTransition, ...sectionProps, children: [header, _jsx(motion.div, { layout: "size", transition: layoutTransition, children: body })] }));
+}
+export function CollectionRow({ separatedAbove = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "collection-row", "data-separated-above": separatedAbove ? '' : undefined, className: cn(COLLECTION_ROW_GUTTER, 'relative mr-2 min-w-0', separatedAbove &&
+            "before:bg-border/60 before:absolute before:top-0 before:right-3 before:left-8 before:h-px before:content-['']", className), ...props }));
+}
+export function CollectionRowSelection({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "collection-row-selection", className: cn('absolute inset-y-0 left-0 flex w-(--collection-row-gutter) items-center justify-center', className), ...props }));
+}
+export function CollectionRowContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "collection-row-content", className: cn('min-w-0 flex-1 pr-2 pl-(--collection-row-gutter)', className), ...props }));
+}
+const COLLECTION_ROW_HOVER_SURFACE = 'hover:bg-(--collection-row-hover-surface) hover:[--row-surface:var(--collection-row-hover-surface)]';
+const COLLECTION_ROW_ACTIVE_SURFACE = 'bg-(--collection-row-active-surface) [--row-surface:var(--collection-row-active-surface)]';
+const COLLECTION_ROW_SELECTED_SURFACE = cn('bg-(--collection-row-selected-surface) [--row-surface:var(--collection-row-selected-surface)]', 'hover:bg-(--collection-row-selected-hover-surface) hover:[--row-surface:var(--collection-row-selected-hover-surface)]');
+/** Row chrome shared by every collection list: hover/active/selected tints and the
+ *  squared-off corners that fuse a contiguous selection into one block. Each state
+ *  publishes its surface as --row-surface so ringed children can match it. The
+ *  focus-visible ring is 2px accent so a row holding real DOM focus stays
+ *  distinguishable from the 1px border ring that merely marks the pointer cursor. */
+export function collectionRowStateClass({ selected = false, active = false, selectedAbove = false, selectedBelow = false, }) {
+    return cn('group/row cursor-pointer select-none', 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', !selected || (!selectedAbove && !selectedBelow)
+        ? 'rounded-lg'
+        : selectedAbove && selectedBelow
+            ? 'rounded-none'
+            : selectedAbove
+                ? 'rounded-t-none rounded-b-lg'
+                : 'rounded-b-none rounded-t-lg', active && 'ring-border ring-1 ring-inset', selected
+        ? COLLECTION_ROW_SELECTED_SURFACE
+        : active
+            ? cn(COLLECTION_ROW_ACTIVE_SURFACE, COLLECTION_ROW_HOVER_SURFACE)
+            : COLLECTION_ROW_HOVER_SURFACE);
+}
+/** Selection control for list rows: hidden until the row is hovered, focused, or selected. */
+export function CollectionRowCheckbox({ selected, active = false, onToggle, className, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "collection-row-checkbox", "data-row-checkbox": true, "aria-pressed": selected, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
+            event.stopPropagation();
+            onToggle({ metaKey: true, shiftKey: event.shiftKey });
+        }, className: cn('grid size-4 place-items-center rounded border transition-all', selected
+            ? 'bg-primary border-primary text-primary-foreground opacity-100'
+            : 'border-muted-foreground/40 text-transparent opacity-0 group-hover/row:opacity-100', active && !selected && 'opacity-100', className), ...props, children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) }));
+}

package/dist/components/collection-view/index.d.ts

@@ -0,0 +1,6 @@
+export { CollectionGroupSection, CollectionHeader, CollectionHeaderActions, CollectionQueryControls, CollectionQueryIndicator, CollectionRow, CollectionRowCheckbox, CollectionRowContent, CollectionRowSelection, CollectionSelectionBar, CollectionTitle, CollectionView, CollectionViewport, collectionRowStateClass, type CollectionGroupSectionProps, type CollectionRowCheckboxProps, type CollectionRowProps, type CollectionRowStateOptions, type CollectionQueryControlsProps, type CollectionSelectionBarProps, type CollectionTitleProps, } from './collection-view.js';
+export { useCollectionEscape, type CollectionEscapeOptions } from './use-collection-escape.js';
+export { CollectionViewSettings, CollectionViewSettingsAddAction, CollectionViewSettingsChoiceGroup, CollectionViewSettingsFieldPicker, CollectionViewSettingsIdentity, CollectionViewSettingsPage, CollectionViewSettingsSectionRow, CollectionViewSettingsSortPage, useCollectionViewSettingsNavigation, type CollectionViewSettingsChoice, type CollectionViewSettingsChoiceGroupProps, type CollectionViewSettingsField, type CollectionViewSettingsFieldPickerProps, type CollectionViewSettingsIdentityProps, type CollectionViewSettingsLabels, type CollectionViewSettingsNavigation, type CollectionViewSettingsProps, type CollectionViewSettingsSection, type CollectionViewSettingsSort, type CollectionViewSettingsSortPageProps, } from './collection-view-settings.js';
+export { CollectionViewSettingsGroupAxisPage, CollectionViewSettingsGroupPage, CollectionViewSettingsSelectRow, collectionViewSettingsRowClass, type CollectionViewSettingsGroupAxis, type CollectionViewSettingsGroupAxisPageLabels, type CollectionViewSettingsGroupAxisPageProps, type CollectionViewSettingsGroupItem, type CollectionViewSettingsGroupLabels, type CollectionViewSettingsGroupPageProps, type CollectionViewSettingsSelectRowOption, type CollectionViewSettingsSelectRowProps, } from './collection-view-group-settings.js';
+export { useCollectionSelection, type CollectionKeyboardInput, type CollectionPointerModifiers, type CollectionSelectionChange, type CollectionSelectionOptions, } from './use-collection-selection.js';
+export { useCollectionDetailNavigation, type CollectionDetailNavigationOptions, } from './use-collection-detail-navigation.js';

package/dist/components/collection-view/index.js

@@ -0,0 +1,6 @@
+export { CollectionGroupSection, CollectionHeader, CollectionHeaderActions, CollectionQueryControls, CollectionQueryIndicator, CollectionRow, CollectionRowCheckbox, CollectionRowContent, CollectionRowSelection, CollectionSelectionBar, CollectionTitle, CollectionView, CollectionViewport, collectionRowStateClass, } from './collection-view.js';
+export { useCollectionEscape } from './use-collection-escape.js';
+export { CollectionViewSettings, CollectionViewSettingsAddAction, CollectionViewSettingsChoiceGroup, CollectionViewSettingsFieldPicker, CollectionViewSettingsIdentity, CollectionViewSettingsPage, CollectionViewSettingsSectionRow, CollectionViewSettingsSortPage, useCollectionViewSettingsNavigation, } from './collection-view-settings.js';
+export { CollectionViewSettingsGroupAxisPage, CollectionViewSettingsGroupPage, CollectionViewSettingsSelectRow, collectionViewSettingsRowClass, } from './collection-view-group-settings.js';
+export { useCollectionSelection, } from './use-collection-selection.js';
+export { useCollectionDetailNavigation, } from './use-collection-detail-navigation.js';

package/dist/components/collection-view/use-collection-detail-navigation.d.ts

@@ -0,0 +1,11 @@
+export interface CollectionDetailNavigationOptions {
+    activeId?: string | null;
+    onOpen: (id: string) => void;
+    onClose?: () => void;
+    onBack?: () => void;
+}
+export declare function useCollectionDetailNavigation({ activeId, onOpen, onClose, onBack, }: CollectionDetailNavigationOptions): {
+    activeId: string | null;
+    open: (id: string) => void;
+    close: () => boolean;
+};

package/dist/components/collection-view/use-collection-detail-navigation.js

@@ -0,0 +1,12 @@
+import { useCallback, useMemo } from 'react';
+export function useCollectionDetailNavigation({ activeId, onOpen, onClose, onBack, }) {
+    const close = useCallback(() => {
+        if (activeId && onClose) {
+            onClose();
+            return true;
+        }
+        onBack?.();
+        return Boolean(onBack);
+    }, [activeId, onBack, onClose]);
+    return useMemo(() => ({ activeId: activeId ?? null, open: onOpen, close }), [activeId, close, onOpen]);
+}

package/dist/components/collection-view/use-collection-escape.d.ts

@@ -0,0 +1,9 @@
+export interface CollectionEscapeOptions {
+    closeOverlay?: () => boolean;
+    detailOpen?: boolean;
+    closeDetail?: () => void;
+    hasSelection?: boolean;
+    clearSelection?: () => void;
+    fallback?: () => void;
+}
+export declare function useCollectionEscape(options: CollectionEscapeOptions): () => boolean;

package/dist/components/collection-view/use-collection-escape.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+export function useCollectionEscape(options) {
+    return useCallback(() => {
+        if (options.closeOverlay?.())
+            return true;
+        if (options.detailOpen && options.closeDetail) {
+            options.closeDetail();
+            return true;
+        }
+        if (options.hasSelection && options.clearSelection) {
+            options.clearSelection();
+            return true;
+        }
+        if (options.fallback) {
+            options.fallback();
+            return true;
+        }
+        return false;
+    }, [options]);
+}

package/dist/components/collection-view/use-collection-selection.d.ts

@@ -0,0 +1,42 @@
+export type CollectionSelectionChange = ReadonlySet<string>;
+export interface CollectionSelectionOptions {
+    itemIds: readonly string[];
+    isSelectable?: (id: string) => boolean;
+    selectedIds?: CollectionSelectionChange;
+    defaultSelectedIds?: Iterable<string>;
+    defaultFocusedId?: string;
+    onSelectionChange?: (selectedIds: CollectionSelectionChange) => void;
+    onOpen?: (id: string) => void;
+    onDelete?: (ids: readonly string[]) => void;
+}
+export interface CollectionPointerModifiers {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+}
+export interface CollectionKeyboardInput {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    preventDefault?: () => void;
+}
+export declare function useCollectionSelection({ itemIds, isSelectable, selectedIds: controlledSelection, defaultSelectedIds, defaultFocusedId, onSelectionChange, onOpen, onDelete, }: CollectionSelectionOptions): {
+    selectedIds: Set<string>;
+    focusedId: string | undefined;
+    anchorId: string | undefined;
+    focusItem: (id: string | undefined, options?: {
+        establishAnchor?: boolean;
+    }) => void;
+    select: (id: string, modifiers?: CollectionPointerModifiers) => void;
+    activate: (id: string, modifiers?: CollectionPointerModifiers) => void;
+    handleKeyDown: (event: CollectionKeyboardInput) => void;
+    clearSelection: () => void;
+    getItemProps: (id: string) => {
+        role: "option";
+        'aria-selected': boolean;
+        tabIndex: number;
+        onClick: (modifiers: CollectionPointerModifiers) => void;
+        onKeyDown: (event: CollectionKeyboardInput) => void;
+    };
+};