@atmos.build/ui 0.1.0

package/dist/components/code-editor-theme.js

@@ -0,0 +1,100 @@
+'use client';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+/**
+ * How every CodeMirror surface in atmOS looks.
+ *
+ * The colours are the app's own tokens rather than a packaged editor theme, so an editor
+ * follows the workspace into dark mode and stays the same instrument whether it is holding
+ * a SQL statement, a formula, or a file off a machine. A packaged theme would be a second
+ * palette to keep in sync with the first, and it would be wrong the moment the app's is.
+ */
+export const atmosEditorTheme = EditorView.theme({
+    '&': {
+        color: 'var(--foreground)',
+        backgroundColor: 'transparent',
+    },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': {
+        fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+        lineHeight: '1.6',
+    },
+    '.cm-content': {
+        fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+        caretColor: 'var(--foreground)',
+        padding: '8px 0',
+    },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--foreground)' },
+    '.cm-placeholder': { color: 'var(--muted-foreground)' },
+    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: 'color-mix(in oklch, var(--primary) 22%, transparent)',
+    },
+    '.cm-activeLine': {
+        backgroundColor: 'color-mix(in oklch, var(--muted) 45%, transparent)',
+    },
+    '.cm-gutters': {
+        backgroundColor: 'transparent',
+        color: 'color-mix(in oklch, var(--muted-foreground) 70%, transparent)',
+        border: 'none',
+    },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'color-mix(in oklch, var(--muted) 45%, transparent)',
+        color: 'var(--foreground)',
+    },
+    '.cm-lineNumbers .cm-gutterElement': { padding: '0 8px 0 12px', minWidth: '0' },
+    '.cm-matchingBracket': {
+        backgroundColor: 'color-mix(in oklch, var(--primary) 18%, transparent)',
+        outline: 'none',
+        color: 'inherit',
+    },
+});
+/**
+ * One palette across every grammar. Markdown gets structure without changing size or
+ * family — a heading reads as a heading, but the file still reads as a file, which is the
+ * difference between an editor and a preview.
+ */
+export const atmosEditorHighlight = HighlightStyle.define([
+    {
+        tag: [t.keyword, t.modifier, t.operatorKeyword, t.controlKeyword, t.definitionKeyword],
+        color: 'var(--cm-keyword)',
+        fontWeight: '600',
+    },
+    {
+        tag: [t.typeName, t.standard(t.name), t.number, t.bool, t.null, t.atom],
+        color: 'var(--cm-number)',
+    },
+    { tag: [t.string, t.special(t.string), t.character], color: 'var(--cm-string)' },
+    {
+        tag: [t.function(t.variableName), t.function(t.propertyName), t.special(t.name)],
+        color: 'var(--cm-function)',
+    },
+    { tag: [t.propertyName, t.attributeName], color: 'var(--cm-name)' },
+    { tag: [t.name, t.variableName], color: 'var(--cm-ident)' },
+    {
+        tag: [
+            t.operator,
+            t.punctuation,
+            t.separator,
+            t.paren,
+            t.bracket,
+            t.squareBracket,
+            t.brace,
+        ],
+        color: 'var(--cm-operator)',
+    },
+    { tag: [t.comment, t.lineComment, t.blockComment], color: 'var(--muted-foreground)', fontStyle: 'italic' },
+    { tag: t.heading, color: 'var(--cm-keyword)', fontWeight: '600' },
+    { tag: t.strong, fontWeight: '600' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, color: 'var(--cm-function)', textDecoration: 'underline' },
+    { tag: t.url, color: 'var(--cm-string)' },
+    { tag: t.monospace, color: 'var(--cm-string)' },
+    { tag: [t.meta, t.processingInstruction], color: 'var(--muted-foreground)' },
+    { tag: t.invalid, color: 'var(--destructive)' },
+]);
+/** The theme and its highlighting, which are only ever wanted together. */
+export const atmosEditorAppearance = [
+    atmosEditorTheme,
+    syntaxHighlighting(atmosEditorHighlight),
+];

package/dist/components/collapsible-section-header.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const headerVariants: (props?: ({
+    size?: "panel" | "settings" | null | undefined;
+    variant?: "section" | "row" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CollapsibleSectionHeaderVariant = 'section' | 'row';
+type CollapsibleSectionHeaderContainerProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className'> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+type CollapsibleSectionHeaderCommonProps = Omit<React.ComponentProps<'button'>, 'onClick' | 'onToggle'> & VariantProps<typeof headerVariants> & {
+    open: boolean;
+    onToggle: () => void;
+    label: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    depth?: number;
+    badge?: React.ReactNode;
+    action?: React.ReactNode;
+    actionVisibility?: 'hover' | 'persistent' | 'always';
+    containerProps?: CollapsibleSectionHeaderContainerProps;
+    labelClassName?: string;
+    className?: string;
+};
+export type CollapsibleSectionHeaderProps = CollapsibleSectionHeaderCommonProps & ({
+    onLabelClick: React.MouseEventHandler<HTMLElement>;
+    labelProps?: Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'onClick'>;
+    toggleLabel: string;
+    onClick?: never;
+} | {
+    onLabelClick?: never;
+    labelProps?: never;
+    toggleLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+});
+export declare const CollapsibleSectionHeader: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "onClick" | "onToggle"> & VariantProps<(props?: ({
+    size?: "panel" | "settings" | null | undefined;
+    variant?: "section" | "row" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    open: boolean;
+    onToggle: () => void;
+    label: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    depth?: number;
+    badge?: React.ReactNode;
+    action?: React.ReactNode;
+    actionVisibility?: "hover" | "persistent" | "always";
+    containerProps?: CollapsibleSectionHeaderContainerProps;
+    labelClassName?: string;
+    className?: string;
+} & {
+    onLabelClick: React.MouseEventHandler<HTMLElement>;
+    labelProps?: Omit<React.ComponentPropsWithoutRef<"button">, "children" | "onClick">;
+    toggleLabel: string;
+    onClick?: never;
+}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "onClick" | "onToggle"> & VariantProps<(props?: ({
+    size?: "panel" | "settings" | null | undefined;
+    variant?: "section" | "row" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    open: boolean;
+    onToggle: () => void;
+    label: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    depth?: number;
+    badge?: React.ReactNode;
+    action?: React.ReactNode;
+    actionVisibility?: "hover" | "persistent" | "always";
+    containerProps?: CollapsibleSectionHeaderContainerProps;
+    labelClassName?: string;
+    className?: string;
+} & {
+    onLabelClick?: never;
+    labelProps?: never;
+    toggleLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export interface CollapsibleSectionContentProps extends React.ComponentProps<'div'> {
+    open?: boolean;
+    innerClassName?: string;
+    unmountOnExit?: boolean;
+}
+export declare const CollapsibleSectionContent: React.ForwardRefExoticComponent<Omit<CollapsibleSectionContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { headerVariants as collapsibleSectionHeaderVariants };

package/dist/components/collapsible-section-header.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/cn.js';
+import { RowTrailing } from './row-trailing.js';
+import { NavigableListItem } from './navigable-list.js';
+import { sidePanelRowClassName } from './side-panel-tokens.js';
+const headerVariants = cva('text-muted-foreground/75 flex min-w-0 cursor-pointer items-center font-medium outline-none transition-colors group-hover/section-header:text-foreground focus-visible:text-foreground', {
+    variants: {
+        size: {
+            panel: 'h-7 px-2 text-[11px]',
+            settings: 'h-6 px-2 text-[10.5px] text-muted-foreground/75',
+        },
+        variant: {
+            section: 'flex-1 gap-1.5',
+            // A row takes its left inset from the container, which is where depth is counted,
+            // so the trigger adds none of its own and lands on the same x as a labelled row.
+            row: 'gap-1 px-0 text-[12.5px] text-muted-foreground',
+        },
+    },
+    defaultVariants: { size: 'panel', variant: 'section' },
+});
+const Chevron = ({ open }) => (_jsx(ChevronRight, { "data-slot": "collapsible-section-chevron", className: cn('text-muted-foreground/70 size-2.5 shrink-0 opacity-0 transition-[opacity,transform] duration-125 ease-[var(--ease-out-expo)] group-hover/section-header:opacity-100 group-has-[:focus-visible]/section-header:opacity-100 motion-reduce:transition-none', open && 'rotate-90'), strokeWidth: 1.5, "aria-hidden": true }));
+export const CollapsibleSectionHeader = React.forwardRef(function CollapsibleSectionHeader({ open, onToggle, label, leadingIcon, depth = 0, badge, action, actionVisibility = 'hover', onLabelClick, labelProps, toggleLabel, containerProps, size, variant = 'section', className, labelClassName, onKeyDown, ...props }, ref) {
+    const actionSwapsWithBadge = Boolean(action) && actionVisibility === 'hover';
+    const labelId = React.useId();
+    const { style: containerStyle, ...restContainerProps } = containerProps ?? {};
+    const depthStyle = {
+        ...containerStyle,
+        ...(variant === 'row' ? { paddingLeft: 8 + depth * 12 } : {}),
+    };
+    const handleDisclosureKeyDown = (event, additionalHandler) => {
+        additionalHandler?.(event);
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key === 'ArrowRight' && !open) {
+            event.preventDefault();
+            onToggle();
+        }
+        else if (event.key === 'ArrowLeft' && open) {
+            event.preventDefault();
+            onToggle();
+        }
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "collapsible-section-header", "data-open": open, "data-variant": variant, "data-depth": depth, className: cn(sidePanelRowClassName(), 'group/section-header group/side-panel-item cursor-pointer px-0 pr-1', variant === 'row' && 'font-normal', className), style: depthStyle, ...restContainerProps, children: [onLabelClick ? (_jsxs("div", { "data-slot": "collapsible-section-label-trigger", className: cn('relative flex min-w-0 flex-1 items-center', 
+                // The toggle-button branch takes its left gutter from headerVariants; this
+                // branch has no such button, so it carries the same gutter itself — without
+                // it a clickable-label header sits a padding to the left of every sibling row.
+                variant === 'row' ? 'gap-2' : 'pl-2'), children: [_jsx(NavigableListItem, { children: _jsx("button", { type: "button", ...labelProps, "aria-labelledby": labelProps?.['aria-label'] ? undefined : labelId, onClick: onLabelClick, onKeyDown: (event) => handleDisclosureKeyDown(event, labelProps?.onKeyDown), className: cn('absolute inset-0 w-full rounded-md outline-none', labelProps?.className), ...props }) }), leadingIcon ? (_jsx("span", { "data-slot": "collapsible-section-leading-icon", className: "pointer-events-none relative flex size-4 shrink-0 items-center justify-center", children: leadingIcon })) : null, _jsx("span", { id: labelId, "data-slot": "collapsible-section-label", className: cn('pointer-events-none relative truncate text-[12.5px] font-medium', labelClassName), children: label }), _jsx("button", { type: "button", "aria-label": toggleLabel, "aria-expanded": open, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
+                            event.stopPropagation();
+                            onToggle();
+                        }, onKeyDown: handleDisclosureKeyDown, className: "relative flex size-7 shrink-0 items-center justify-center rounded-sm outline-none", children: _jsx(Chevron, { open: open }) }), actionSwapsWithBadge ? null : badge] })) : (_jsx(NavigableListItem, { children: _jsxs("button", { type: "button", "aria-expanded": open, onClick: onToggle, onKeyDown: handleDisclosureKeyDown, className: cn(headerVariants({ size, variant }), 'flex-1'), ...props, children: [leadingIcon ? (_jsx("span", { "data-slot": "collapsible-section-leading-icon", className: "flex size-4 shrink-0 items-center justify-center", children: leadingIcon })) : null, _jsx("span", { "data-slot": "collapsible-section-label", className: cn('truncate', labelClassName), children: label }), _jsx(Chevron, { open: open }), actionSwapsWithBadge || !badge ? null : _jsx("span", { className: "ml-auto", children: badge })] }) })), actionSwapsWithBadge ? (_jsx(RowTrailing, { className: "mr-1.5", resting: badge, actions: action })) : action ? (_jsx("span", { className: cn('ml-auto flex items-center gap-0.5', actionVisibility === 'persistent' &&
+                    'opacity-60 transition-opacity group-hover/section-header:opacity-100 group-has-[:focus-visible]/section-header:opacity-100'), children: action })) : null] }));
+});
+export const CollapsibleSectionContent = React.forwardRef(function CollapsibleSectionContent({ open = true, unmountOnExit = false, className, innerClassName, children, onTransitionEnd, ...props }, ref) {
+    const [present, setPresent] = React.useState(open);
+    React.useEffect(() => {
+        const reduceMotion = !open &&
+            unmountOnExit &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!open && !reduceMotion)
+            return;
+        const frame = window.requestAnimationFrame(() => setPresent(open));
+        return () => window.cancelAnimationFrame(frame);
+    }, [open, unmountOnExit]);
+    return (_jsx("div", { ref: ref, ...props, "data-slot": "collapsible-section-content", "data-open": open, "aria-hidden": open ? undefined : true, inert: open ? undefined : true, className: cn('grid overflow-hidden transition-[grid-template-rows,opacity] duration-150 ease-[var(--ease-out-expo)] motion-reduce:transition-none', open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0', className), onTransitionEnd: (event) => {
+            onTransitionEnd?.(event);
+            if (unmountOnExit &&
+                !open &&
+                event.target === event.currentTarget &&
+                event.propertyName === 'grid-template-rows') {
+                setPresent(false);
+            }
+        }, children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("div", { className: cn('origin-top transition-[opacity,transform] duration-125 ease-[var(--ease-out-expo)] motion-reduce:transition-none', open
+                    ? 'translate-y-0 scale-100 opacity-100 delay-50'
+                    : '-translate-y-0.5 scale-[0.97] opacity-0', innerClassName), children: !unmountOnExit || open || present ? children : null }) }) }));
+});
+export { headerVariants as collapsibleSectionHeaderVariants };

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

@@ -0,0 +1,73 @@
+import { type ReactNode } from 'react';
+import type { GroupItemOrder } from '../../lib/view-query/index.js';
+export declare const collectionViewSettingsRowClass: string;
+export interface CollectionViewSettingsGroupAxis {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface CollectionViewSettingsGroupItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    empty?: boolean;
+    hidden?: boolean;
+}
+export interface CollectionViewSettingsGroupLabels {
+    groupBy: string;
+    groupOrder: string;
+    orderManual: string;
+    orderAlphabetical: string;
+    orderItemCount: string;
+    hideEmptyGroups: string;
+    groups: string;
+    showAllGroups: string;
+    removeGrouping: string;
+    reorder: string;
+    showGroup: (group: string) => string;
+    hideGroup: (group: string) => string;
+}
+export interface CollectionViewSettingsGroupAxisPageLabels {
+    search: string;
+    noMatches: string;
+}
+export interface CollectionViewSettingsGroupAxisPageProps {
+    axes: readonly CollectionViewSettingsGroupAxis[];
+    value?: string;
+    onSelect: (id: string) => void;
+    labels: CollectionViewSettingsGroupAxisPageLabels;
+    testIdPrefix: string;
+}
+export interface CollectionViewSettingsSelectRowOption {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface CollectionViewSettingsSelectRowProps {
+    icon: ReactNode;
+    label: string;
+    value: string;
+    options: readonly CollectionViewSettingsSelectRowOption[];
+    selectedId: string;
+    onSelect?: (id: string) => void;
+    testId: string;
+}
+export interface CollectionViewSettingsGroupPageProps {
+    axes: readonly CollectionViewSettingsGroupAxis[];
+    value: string;
+    items: readonly CollectionViewSettingsGroupItem[];
+    itemOrder: GroupItemOrder;
+    hideEmptyGroups: boolean;
+    labels: CollectionViewSettingsGroupLabels;
+    testIdPrefix: string;
+    onOpenAxisPage: () => void;
+    onRemoveGrouping: () => void;
+    onItemOrderChange?: (next: GroupItemOrder) => void;
+    onReorderItems?: (ids: string[]) => void;
+    onHideEmptyGroupsChange?: (next: boolean) => void;
+    onToggleItemVisibility?: (id: string) => void;
+    onShowAllItems?: () => void;
+}
+export declare function CollectionViewSettingsSelectRow({ icon, label, value, options, selectedId, onSelect, testId, }: CollectionViewSettingsSelectRowProps): React.ReactElement;
+export declare function CollectionViewSettingsGroupAxisPage({ axes, value, onSelect, labels, testIdPrefix, }: CollectionViewSettingsGroupAxisPageProps): React.ReactElement;
+export declare function CollectionViewSettingsGroupPage({ axes, value, items, itemOrder, hideEmptyGroups, labels, testIdPrefix, onOpenAxisPage, onRemoveGrouping, onItemOrderChange, onReorderItems, onHideEmptyGroupsChange, onToggleItemVisibility, onShowAllItems, }: CollectionViewSettingsGroupPageProps): React.ReactElement;

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowDownUp, ChevronRight, Eye, EyeOff, GripVertical, Trash2, Type, } from 'lucide-react';
+import { Button } from '../button.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../command.js';
+import { DragHandle, SortableList } from '../sortable.js';
+import { Switch } from '../switch.js';
+import { CollectionViewSettingsSectionRow } from './collection-view-settings.js';
+import { viewListRowClass } from '../../lib/view-chrome.js';
+import { cn } from '../../lib/cn.js';
+export const collectionViewSettingsRowClass = cn(viewListRowClass, 'flex w-full items-center gap-2 text-left leading-none');
+const NO_GROUPING_AXIS_ID = 'none';
+export function CollectionViewSettingsSelectRow({ icon, label, value, options, selectedId, onSelect, testId, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setOpen((prev) => !prev), className: cn(collectionViewSettingsRowClass, 'text-foreground hover:bg-muted/55'), "data-testid": testId, children: [_jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx("span", { className: "text-muted-foreground max-w-[126px] truncate", children: value }), _jsx(ChevronRight, { className: cn('text-muted-foreground/70 size-4 shrink-0 transition-transform', open && 'rotate-90'), strokeWidth: 1.8 })] }), open ? (_jsx("div", { className: "border-border/60 bg-background mx-2 mb-1 grid gap-0.5 rounded-lg border p-1", children: options.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                        onSelect?.(option.id);
+                        setOpen(false);
+                    }, "data-checked": option.id === selectedId ? 'true' : undefined, className: cn(collectionViewSettingsRowClass, option.id === selectedId
+                        ? 'text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'), children: [option.icon ? _jsx("span", { className: "text-muted-foreground", children: option.icon }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })] }, option.id))) })) : null] }));
+}
+export function CollectionViewSettingsGroupAxisPage({ axes, value, onSelect, labels, testIdPrefix, }) {
+    return (_jsxs(Command, { className: "rounded-none bg-transparent p-0 pt-1", children: [_jsx(CommandInput, { variant: "boxed", placeholder: labels.search }), _jsxs(CommandList, { className: "max-h-[336px] px-2 pb-2", children: [_jsx(CommandEmpty, { className: "text-muted-foreground py-6 text-[12px]", children: labels.noMatches }), _jsx(CommandGroup, { className: "p-0", children: axes
+                            .filter((axis) => axis.id !== NO_GROUPING_AXIS_ID)
+                            .map((axis) => {
+                            const active = value === axis.id;
+                            return (_jsxs(CommandItem, { value: axis.label, "data-checked": active ? 'true' : undefined, onSelect: () => onSelect(axis.id), className: cn('text-[13px]', active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'), "data-testid": `${testIdPrefix}-groupby-${axis.id}`, children: [axis.icon ? _jsx("span", { className: "inline-flex shrink-0", children: axis.icon }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: axis.label })] }, axis.id));
+                        }) })] })] }));
+}
+export function CollectionViewSettingsGroupPage({ axes, value, items, itemOrder, hideEmptyGroups, labels, testIdPrefix, onOpenAxisPage, onRemoveGrouping, onItemOrderChange, onReorderItems, onHideEmptyGroupsChange, onToggleItemVisibility, onShowAllItems, }) {
+    const currentAxis = axes.find((axis) => axis.id === value);
+    const orderOptions = [
+        {
+            id: 'manual',
+            label: labels.orderManual,
+            icon: _jsx(GripVertical, { className: "size-4", strokeWidth: 1.7 }),
+        },
+        {
+            id: 'alphabetical',
+            label: labels.orderAlphabetical,
+            icon: _jsx(Type, { className: "size-4", strokeWidth: 1.7 }),
+        },
+        {
+            id: 'item_count',
+            label: labels.orderItemCount,
+            icon: _jsx(ArrowDownUp, { className: "size-4", strokeWidth: 1.7 }),
+        },
+    ];
+    const hiddenCount = items.filter((item) => item.hidden).length;
+    return (_jsxs("div", { className: "grid gap-0", children: [_jsx(CollectionViewSettingsSectionRow, { icon: currentAxis?.icon, label: labels.groupBy, summary: currentAxis?.label, onClick: onOpenAxisPage, testId: `${testIdPrefix}-group-setting-axis` }), _jsx(CollectionViewSettingsSelectRow, { icon: _jsx(GripVertical, { className: "size-4", strokeWidth: 1.7 }), label: labels.groupOrder, value: orderOptions.find((option) => option.id === itemOrder)?.label ?? labels.orderManual, options: orderOptions, selectedId: itemOrder, onSelect: (next) => onItemOrderChange?.(next), testId: `${testIdPrefix}-group-setting-order` }), _jsxs("label", { className: cn(collectionViewSettingsRowClass, 'text-foreground hover:bg-muted/55 cursor-pointer'), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.hideEmptyGroups }), _jsx(Switch, { size: "sm", checked: hideEmptyGroups, onCheckedChange: (next) => onHideEmptyGroupsChange?.(next), "aria-label": labels.hideEmptyGroups, "data-testid": `${testIdPrefix}-hide-empty-groups` })] }), _jsx("div", { className: "bg-border/60 mx-1 my-2 h-px" }), _jsxs("div", { className: "flex h-8 items-center justify-between gap-2 px-2", children: [_jsx("span", { className: "text-muted-foreground text-[12px] font-medium", children: labels.groups }), hiddenCount > 0 ? (_jsx(Button, { type: "button", variant: "link", onClick: onShowAllItems, className: "h-auto p-0 text-[12px]", "data-testid": `${testIdPrefix}-show-all-groups`, children: labels.showAllGroups })) : null] }), _jsx(SortableList, { items: [...items], keyOf: (item) => item.id, handle: true, disabled: !onReorderItems || items.length < 2, onReorder: (_, detail) => onReorderItems?.(detail.nextIds), className: "grid max-h-[176px] gap-0.5 overflow-y-auto pr-1", renderItem: (item, args) => (_jsx(GroupItemRow, { item: item, dragHandleProps: args.dragHandleProps, isDragging: args.isDragging, onToggleVisibility: onToggleItemVisibility, visibilityLabel: item.hidden ? labels.showGroup(item.label) : labels.hideGroup(item.label), reorderLabel: labels.reorder, testIdPrefix: testIdPrefix })) }), _jsx("div", { className: "bg-border/60 mx-1 my-2 h-px" }), _jsxs("button", { type: "button", onClick: onRemoveGrouping, className: cn(collectionViewSettingsRowClass, 'text-muted-foreground hover:bg-muted/55 hover:text-foreground'), "data-testid": `${testIdPrefix}-remove-grouping`, children: [_jsx(Trash2, { className: "size-4", strokeWidth: 1.7 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.removeGrouping })] })] }));
+}
+function GroupItemRow({ item, dragHandleProps, isDragging, onToggleVisibility, visibilityLabel, reorderLabel, testIdPrefix, }) {
+    return (_jsxs("div", { className: cn(collectionViewSettingsRowClass, 'group', item.hidden && 'text-muted-foreground/60', isDragging && 'relative z-10 opacity-70 shadow-sm'), children: [_jsx(DragHandle, { dragHandleProps: dragHandleProps, "aria-label": reorderLabel, className: "text-muted-foreground/60 size-4 shrink-0 opacity-100" }), item.icon ? _jsx("span", { className: "inline-flex shrink-0 items-center", children: item.icon }) : null, _jsx("span", { className: cn('min-w-0 flex-1 truncate text-[13px]', item.hidden ? 'line-through' : 'text-foreground/90', item.empty && !item.hidden && 'text-muted-foreground'), children: item.label }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => onToggleVisibility?.(item.id), "aria-pressed": !item.hidden, "aria-label": visibilityLabel, title: visibilityLabel, disabled: !onToggleVisibility, className: "text-muted-foreground hover:text-foreground size-6 rounded-lg", "data-testid": `${testIdPrefix}-toggle-group-${item.id}`, children: item.hidden ? (_jsx(EyeOff, { className: "size-3.5", strokeWidth: 1.7 })) : (_jsx(Eye, { className: "size-3.5", strokeWidth: 1.7 })) })] }));
+}

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

@@ -0,0 +1,115 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { StackedPopoverContent } from '../popover-stack.js';
+import { Button } from '../button.js';
+export interface CollectionViewSettingsLabels {
+    settings: string;
+    back: string;
+    close: string;
+    searchFields: string;
+    noFields: string;
+    refineSearch: string;
+}
+export interface CollectionViewSettingsSection {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    summary?: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    showInRoot?: boolean;
+    testId?: string;
+    contentPadding?: 'default' | 'none';
+}
+export interface CollectionViewSettingsProps {
+    labels: CollectionViewSettingsLabels;
+    sections: readonly CollectionViewSettingsSection[];
+    identity?: CollectionViewSettingsIdentityProps;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: ComponentProps<typeof StackedPopoverContent>['align'];
+    triggerTestId?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    showTriggerLabel?: boolean;
+}
+export interface CollectionViewSettingsIdentityProps {
+    name: string;
+    icon?: ReactNode;
+    renameLabel: string;
+    readOnly?: boolean;
+    onRename?: (name: string) => void | Promise<void>;
+}
+export interface CollectionViewSettingsChoice<TValue extends string> {
+    value: TValue;
+    label: string;
+    icon?: ReactNode;
+}
+export interface CollectionViewSettingsChoiceGroupProps<TValue extends string> {
+    value: TValue;
+    choices: readonly CollectionViewSettingsChoice<TValue>[];
+    onChange: (value: TValue) => void;
+    columns?: 2 | 3;
+    presentation?: 'row' | 'tile';
+    testIdPrefix?: string;
+    className?: string;
+}
+export interface CollectionViewSettingsNavigation {
+    page: string;
+    openPage: (page: string) => void;
+    replacePage: (page: string) => void;
+    goBack: () => void;
+    close: () => void;
+}
+export declare function useCollectionViewSettingsNavigation(): CollectionViewSettingsNavigation;
+export declare function CollectionViewSettings({ labels, sections, identity, open: controlledOpen, defaultOpen, onOpenChange, align, triggerTestId, triggerClassName, contentClassName, showTriggerLabel, }: CollectionViewSettingsProps): React.ReactElement;
+export declare function CollectionViewSettingsIdentity({ name, icon, renameLabel, readOnly, onRename, }: CollectionViewSettingsIdentityProps): React.ReactElement;
+export declare function CollectionViewSettingsChoiceGroup<TValue extends string>({ value, choices, onChange, columns, presentation, testIdPrefix, className, }: CollectionViewSettingsChoiceGroupProps<TValue>): React.ReactElement;
+export declare function CollectionViewSettingsSectionRow({ label, icon, summary, disabled, testId, onClick, }: Omit<CollectionViewSettingsSection, 'id' | 'content'> & {
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function CollectionViewSettingsPage({ className, padding, ...props }: ComponentProps<'div'> & {
+    padding?: 'default' | 'none';
+}): React.ReactElement;
+export declare function CollectionViewSettingsAddAction({ children, className, ...props }: ComponentProps<typeof Button>): React.ReactElement;
+export interface CollectionViewSettingsField<TField extends string = string> {
+    id: TField;
+    label: string;
+    icon?: ReactNode;
+    keywords?: readonly string[];
+    disabled?: boolean;
+}
+export interface CollectionViewSettingsFieldPickerProps<TField extends string = string> {
+    fields: readonly CollectionViewSettingsField<TField>[];
+    labels: Pick<CollectionViewSettingsLabels, 'searchFields' | 'noFields' | 'refineSearch'>;
+    onSelect: (field: TField) => void;
+    selectedField?: TField;
+    selectedFields?: ReadonlySet<TField>;
+    className?: string;
+}
+export declare function CollectionViewSettingsFieldPicker<TField extends string>({ fields, labels, onSelect, selectedField, selectedFields, className, }: CollectionViewSettingsFieldPickerProps<TField>): React.ReactElement;
+export interface CollectionViewSettingsSort<TField extends string = string> {
+    id: string;
+    field: TField;
+    dir: 'asc' | 'desc';
+}
+export interface CollectionViewSettingsSortPageProps<TField extends string = string> {
+    sorts: readonly CollectionViewSettingsSort<TField>[];
+    fields: readonly CollectionViewSettingsField<TField>[];
+    labels: {
+        addSort: string;
+        ascending: string;
+        descending: string;
+        chooseField: string;
+        remove: string;
+        reorder: string;
+        searchFields: string;
+    };
+    onChange: (sorts: CollectionViewSettingsSort<TField>[]) => void;
+    createSort: (field: TField) => CollectionViewSettingsSort<TField>;
+    className?: string;
+    addButtonTestId?: string;
+    noFieldsLabel?: string;
+    refineSearchLabel: string;
+}
+export declare function CollectionViewSettingsSortPage<TField extends string>({ sorts, fields, labels, onChange, createSort, className, addButtonTestId, noFieldsLabel, refineSearchLabel, }: CollectionViewSettingsSortPageProps<TField>): React.ReactElement;