@atmos.build/ui 0.1.0

package/dist/components/view-query-controls.d.ts

@@ -0,0 +1,159 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Button } from './button.js';
+import type { FieldRegistry, FilterOp } from '../lib/view-query/index.js';
+import type { FormatDateTime } from '../lib/date-time-format.js';
+import { type ViewSortEditorLabels, type ViewSortEditorSort } from './view-sort-editor.js';
+export interface ViewQueryField {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    keywords?: string[];
+}
+export interface ViewFilterControlLabels {
+    addFilter: string;
+    searchFields: string;
+    noFields: string;
+    addGroup?: string;
+}
+export interface ViewFilterControlProps {
+    fields: ViewQueryField[];
+    labels: ViewFilterControlLabels;
+    onAddFilter: (field: string) => void;
+    onAddGroup?: () => void;
+    iconOnly?: boolean;
+    /** Replaces the default funnel glyph in `iconOnly` mode — a plus reads as "add another". */
+    icon?: ReactNode;
+    active?: boolean;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    testId?: string;
+}
+export interface ViewSortControlLabels extends ViewSortEditorLabels {
+    sort: string;
+    sortedBy: (field: string) => string;
+}
+export interface ViewSortControlProps<TSort extends ViewSortEditorSort = ViewSortEditorSort> {
+    sorts: TSort[];
+    fields: ViewQueryField[];
+    labels: ViewSortControlLabels;
+    onChange: (sorts: TSort[]) => void;
+    createSort: (field: string) => TSort;
+    iconOnly?: boolean;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    testId?: string;
+    addButtonTestId?: string;
+}
+export interface ViewFilterChipProps {
+    label: string;
+    editor: ReactNode;
+    removeLabel: string;
+    onRemove: () => void;
+    icon?: ReactNode;
+    editorLabel?: string;
+    className?: string;
+}
+export declare function ViewFilterControl({ fields, labels, onAddFilter, onAddGroup, iconOnly, icon, active, align, className, testId, }: ViewFilterControlProps): React.ReactElement;
+export declare function ViewSortControl<TSort extends ViewSortEditorSort>({ sorts, fields, labels, onChange, createSort, iconOnly, align, className, testId, addButtonTestId, }: ViewSortControlProps<TSort>): React.ReactElement;
+export declare function ViewFilterChip({ label, editor, removeLabel, onRemove, icon, editorLabel, className, }: ViewFilterChipProps): React.ReactElement;
+export type ViewQueryChipProps = ComponentProps<'div'>;
+/**
+ * Reads a query clause as `property · verb · value`, each part its own trigger.
+ * Dividers are inserted between the parts so callers cannot render an
+ * inconsistent chip; conditional parts may be `null`.
+ */
+export declare function ViewQueryChip({ children, className, ...props }: ViewQueryChipProps): React.ReactElement;
+export interface ViewQueryChipSegmentProps extends ComponentProps<typeof Button> {
+    icon?: ReactNode;
+    muted?: boolean;
+    chevron?: boolean;
+    iconOnly?: boolean;
+}
+export declare function ViewQueryChipSegment({ icon, muted, chevron, iconOnly, children, className, ...props }: ViewQueryChipSegmentProps): React.ReactElement;
+export interface ViewQueryChipInputProps extends ComponentProps<'input'> {
+    quoted?: boolean;
+}
+/** Value segment that stays a live text/number field instead of opening a popover. */
+export declare function ViewQueryChipInput({ quoted, className, ...props }: ViewQueryChipInputProps): React.ReactElement;
+export interface ViewQueryOperator {
+    id: string;
+    label: string;
+}
+export interface ViewQueryFilterChipLabels {
+    searchFields: string;
+    noFields: string;
+    searchOperators: string;
+    noOperators: string;
+    actions: string;
+    remove: string;
+    convertToGroup?: string;
+}
+export interface ViewQueryFilterChipProps extends ViewQueryChipProps {
+    field: string;
+    fields: ViewQueryField[];
+    operator: string;
+    operators: ViewQueryOperator[];
+    labels: ViewQueryFilterChipLabels;
+    /** Value segment, owned by the caller because only it knows the field's shape. */
+    value?: ReactNode;
+    onChangeField: (field: string) => void;
+    onChangeOperator: (operator: string) => void;
+    onRemove: () => void;
+    onConvertToGroup?: () => void;
+}
+/** One filter clause, read left to right as property · verb · value, each part editable in place. */
+export declare function ViewQueryFilterChip({ field, fields, operator, operators, labels, value, onChangeField, onChangeOperator, onRemove, onConvertToGroup, ...props }: ViewQueryFilterChipProps): React.ReactElement;
+export interface ViewQueryChipActionsProps {
+    label: string;
+    removeLabel: string;
+    onRemove: () => void;
+    convertLabel?: string;
+    onConvertToGroup?: () => void;
+}
+/** Trailing overflow segment shared by every chip: remove, plus whatever the clause supports. */
+export declare function ViewQueryChipActions({ label, removeLabel, onRemove, convertLabel, onConvertToGroup, }: ViewQueryChipActionsProps): React.ReactElement;
+export interface FilterEditorOption {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface FilterEditorCtx {
+    registry: FieldRegistry;
+    fieldLabel: (field: string) => string;
+    fieldIcon: (field: string) => ReactNode;
+    operatorLabel: (operator: FilterOp) => string;
+    /**
+     * Called per field while rendering, never eagerly for the whole registry, so a
+     * consumer can answer with options that only exist once its rows have loaded.
+     * Omit it when the field can name its own options through `selectOptions`.
+     */
+    optionsFor?: (field: string) => readonly FilterEditorOption[];
+    /** Host-bound date formatter carrying the viewer's date-format preference. */
+    format?: FormatDateTime;
+}
+export interface FilterEditorLabels {
+    filterValue: string;
+    emptyFilterValue: string;
+    searchValues: string;
+    noValues: string;
+    valuePlaceholder: string;
+    relativeDays: string;
+    booleanTrue: string;
+    booleanFalse: string;
+}
+export declare function filterEditorOptions(ctx: FilterEditorCtx, field: string): readonly FilterEditorOption[];
+export declare function ViewFilterSummaryRow({ label, onRemove, removeLabel, icon, }: {
+    label: string;
+    onRemove: () => void;
+    removeLabel: string;
+    icon?: ReactNode;
+}): React.ReactElement;
+export declare function ViewSortSummaryRow({ label, dir, ascendingLabel, descendingLabel, removeLabel, onToggleDir, onRemove, }: {
+    label: string;
+    dir: 'asc' | 'desc';
+    ascendingLabel: string;
+    descendingLabel: string;
+    removeLabel: string;
+    onToggleDir: () => void;
+    onRemove: () => void;
+}): React.ReactElement;

package/dist/components/view-query-controls.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Two chips live here on purpose. `ViewQueryFilterChip` is the query-DSL chip: it
+// requires `field`, `fields[]`, `operator` and `operators[]`, and renders two
+// mandatory searchable selectors. `ViewFilterChip` is the ad-hoc chip, kept for
+// surfaces with no DSL behind them: one such chip holds a plain React enum edited
+// with radio buttons, another pairs an id list with an any/all toggle whose operator
+// equivalent has no `FilterOp` member. Neither chip is a duplicate of the other;
+// collapsing them would force one of the two shapes to lie.
+//
+// `ObjectsFilterEditorCtx` in the web app is a third editor context, still separate
+// from `FilterEditorCtx` below, pending the objects-table migration.
+import { Children, Fragment, useState } from 'react';
+import { ArrowDown, ArrowDownUp, ArrowUp, ChevronDown, ListFilter, MoreHorizontal, Plus, SquareSplitVertical, X, } from 'lucide-react';
+import { Button } from './button.js';
+import { ButtonGroup, ButtonGroupSeparator } from './button-group.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from './command.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { PropertySelector } from './property-selector.js';
+import { ViewSortEditor, } from './view-sort-editor.js';
+import { viewControlClass, viewListRowClass, viewPopoverContentClass, viewSegmentControlClass, } from '../lib/view-chrome.js';
+import { cn } from '../lib/cn.js';
+const viewCommandClass = '[&_[data-slot=command-input-wrapper]]:px-2 [&_[data-slot=command-input-wrapper]]:py-1.5 [&_[data-slot=command-input]]:text-[12px] [&_[data-slot=command-item]]:min-h-7 [&_[data-slot=command-item]]:rounded-md [&_[data-slot=command-item]]:px-1.5 [&_[data-slot=command-item]]:py-1 [&_[data-slot=command-item]]:text-[12px]';
+const viewSettingsRowClass = cn(viewListRowClass, 'flex w-full items-center gap-2 text-left leading-none');
+export function ViewFilterControl({ fields, labels, onAddFilter, onAddGroup, iconOnly = false, icon, active = false, align = 'start', className, testId = 'view-query-add-filter', }) {
+    const [open, setOpen] = useState(false);
+    const hasGroupAction = Boolean(labels.addGroup && onAddGroup);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: iconOnly ? 'icon-sm' : 'sm', variant: iconOnly ? 'ghost' : 'dashed', className: cn(iconOnly
+                        ? 'text-muted-foreground hover:text-foreground'
+                        : cn(viewControlClass, 'border-border/70 text-muted-foreground bg-transparent'), active && (iconOnly ? 'bg-muted/45 text-foreground' : 'text-foreground'), className), title: labels.addFilter, "aria-label": iconOnly ? labels.addFilter : undefined, "data-testid": testId, "data-active": active ? 'true' : undefined, children: iconOnly ? ((icon ?? _jsx(ListFilter, { className: "size-3.5", strokeWidth: 1.5 }))) : (_jsxs(_Fragment, { children: [_jsx(Plus, { className: "size-3", strokeWidth: 1.5 }), labels.addFilter] })) }) }), _jsx(PopoverContent, { align: align, className: cn('w-[230px] p-0', viewPopoverContentClass), children: _jsxs(Command, { className: viewCommandClass, children: [_jsx(CommandInput, { variant: "inline", placeholder: labels.searchFields }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { className: "text-muted-foreground py-4 text-[12px]", children: labels.noFields }), _jsx(CommandGroup, { children: fields.map((field) => (_jsxs(CommandItem, { value: [field.label, field.id, ...(field.keywords ?? [])].join(' '), onSelect: () => {
+                                            onAddFilter(field.id);
+                                            setOpen(false);
+                                        }, children: [field.icon ? (_jsx("span", { className: "text-muted-foreground/70 inline-flex size-3.5 shrink-0 items-center justify-center", children: field.icon })) : null, _jsx("span", { className: "truncate", children: field.label })] }, field.id))) }), hasGroupAction ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { className: "mx-1 my-1" }), _jsx(CommandGroup, { children: _jsxs(CommandItem, { value: labels.addGroup, onSelect: () => {
+                                                    onAddGroup?.();
+                                                    setOpen(false);
+                                                }, className: "text-primary", children: [_jsx(Plus, { className: "text-primary/70 size-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "truncate", children: labels.addGroup })] }) })] })) : null] })] }) })] }));
+}
+export function ViewSortControl({ sorts, fields, labels, onChange, createSort, iconOnly = false, align = 'end', className, testId = 'view-query-sort', addButtonTestId, }) {
+    const [open, setOpen] = useState(false);
+    const firstSort = sorts[0];
+    const firstFieldLabel = firstSort
+        ? (fields.find((field) => field.id === firstSort.field)?.label ?? firstSort.field)
+        : '';
+    const summary = firstSort ? labels.sortedBy(firstFieldLabel) : labels.sort;
+    const extraSortCount = sorts.length > 1 ? `+${sorts.length - 1}` : null;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: iconOnly ? 'icon-sm' : 'sm', variant: iconOnly ? 'ghost' : 'outline', className: cn(iconOnly
+                        ? 'text-muted-foreground hover:text-foreground'
+                        : cn(viewControlClass, 'text-muted-foreground'), sorts.length > 0 && 'bg-muted/45 text-foreground', className), title: labels.sort, "aria-label": iconOnly ? labels.sort : undefined, "data-testid": testId, "data-active": sorts.length > 0 ? 'true' : undefined, children: [_jsx(ArrowDownUp, { className: "size-3.5", strokeWidth: 1.5 }), !iconOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "max-w-[20ch] truncate", children: summary }), extraSortCount ? (_jsx("span", { className: "text-muted-foreground shrink-0 font-normal", children: extraSortCount })) : null] })) : null] }) }), _jsx(PopoverContent, { align: align, className: cn('w-[360px] max-w-[92vw] p-2', viewPopoverContentClass), children: _jsx(ViewSortEditor, { sorts: sorts, fields: fields, onChange: (next) => onChange(next), createSort: (field) => createSort(field), labels: labels, addButtonTestId: addButtonTestId }) })] }));
+}
+export function ViewFilterChip({ label, editor, removeLabel, onRemove, icon, editorLabel, className, }) {
+    return (_jsxs("div", { className: cn('border-border/70 bg-background inline-flex h-7 min-w-0 rounded-lg border', className), children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": editorLabel, className: "text-foreground h-full min-w-0 justify-start gap-1.5 rounded-r-none px-2 text-[12px] font-normal", children: [icon ? (_jsx("span", { className: "text-muted-foreground/70 inline-flex size-3.5 shrink-0 items-center justify-center", children: icon })) : null, _jsx("span", { className: "truncate", children: label })] }) }), _jsx(PopoverContent, { align: "start", className: cn('w-[280px] p-2', viewPopoverContentClass), children: editor })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onRemove, "aria-label": removeLabel, className: "border-border/70 text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-full w-7 shrink-0 rounded-l-none border-l", children: _jsx(X, { className: "size-3.5", strokeWidth: 1.5 }) })] }));
+}
+/**
+ * Reads a query clause as `property · verb · value`, each part its own trigger.
+ * Dividers are inserted between the parts so callers cannot render an
+ * inconsistent chip; conditional parts may be `null`.
+ */
+export function ViewQueryChip({ children, className, ...props }) {
+    const parts = Children.toArray(children);
+    return (_jsx(ButtonGroup, { className: cn('h-7 text-[12px]', className), ...props, children: parts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(ButtonGroupSeparator, {}) : null, part] }, index))) }));
+}
+export function ViewQueryChipSegment({ icon, muted = false, chevron = true, iconOnly = false, children, className, ...props }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "xs", ...props, className: cn(viewSegmentControlClass, muted ? 'text-muted-foreground' : 'text-foreground/90', iconOnly && 'w-7 px-0', className), children: [icon ? (_jsx("span", { className: "text-muted-foreground/70 inline-flex size-3.5 shrink-0 items-center justify-center", children: icon })) : null, iconOnly ? null : _jsx("span", { className: "max-w-[22ch] truncate", children: children }), chevron ? _jsx(ChevronDown, { className: "text-muted-foreground/55 size-3 shrink-0" }) : null] }));
+}
+/** Value segment that stays a live text/number field instead of opening a popover. */
+export function ViewQueryChipInput({ quoted = false, className, ...props }) {
+    return (_jsxs("span", { className: "border-input focus-within:border-ring focus-within:ring-ring/50 inline-flex h-7 items-center gap-0.5 rounded-lg border px-2 text-[12px] transition-colors focus-within:ring-3", children: [quoted ? _jsx("span", { className: "text-muted-foreground/55", children: "\u201C" }) : null, _jsx("input", { ...props, className: cn('text-foreground/90 placeholder:text-muted-foreground/55 min-w-0 bg-transparent outline-none', className) }), quoted ? _jsx("span", { className: "text-muted-foreground/55", children: "\u201D" }) : null] }));
+}
+/** One filter clause, read left to right as property · verb · value, each part editable in place. */
+export function ViewQueryFilterChip({ field, fields, operator, operators, labels, value, onChangeField, onChangeOperator, onRemove, onConvertToGroup, ...props }) {
+    const selectedField = fields.find((candidate) => candidate.id === field);
+    const selectedOperator = operators.find((candidate) => candidate.id === operator);
+    return (_jsxs(ViewQueryChip, { ...props, children: [_jsx(ViewQuerySegmentSelector, { items: fields.map((candidate) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    icon: candidate.icon,
+                    keywords: candidate.keywords,
+                    selected: candidate.id === field,
+                })), searchPlaceholder: labels.searchFields, emptyLabel: labels.noFields, onSelect: onChangeField, children: _jsx(ViewQueryChipSegment, { icon: selectedField?.icon, className: "font-medium", children: selectedField?.label ?? field }) }), _jsx(ViewQuerySegmentSelector, { items: operators.map((candidate) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    selected: candidate.id === operator,
+                })), searchPlaceholder: labels.searchOperators, emptyLabel: labels.noOperators, onSelect: onChangeOperator, children: _jsx(ViewQueryChipSegment, { muted: true, children: selectedOperator?.label ?? operator }) }), value, _jsx(ViewQueryChipActions, { label: labels.actions, removeLabel: labels.remove, onRemove: onRemove, convertLabel: labels.convertToGroup, onConvertToGroup: onConvertToGroup })] }));
+}
+function ViewQuerySegmentSelector({ items, searchPlaceholder, emptyLabel, onSelect, children, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsx(PropertySelector, { open: open, onOpenChange: setOpen, triggerAsChild: true, items: items, onSelect: (item) => onSelect(item.id), searchPlaceholder: searchPlaceholder, labels: { noMatches: emptyLabel }, "aria-label": searchPlaceholder, children: children }));
+}
+/** Trailing overflow segment shared by every chip: remove, plus whatever the clause supports. */
+export function ViewQueryChipActions({ label, removeLabel, onRemove, convertLabel, onConvertToGroup, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ViewQueryChipSegment, { iconOnly: true, chevron: false, muted: true, "aria-label": label, title: label, icon: _jsx(MoreHorizontal, { className: "size-3", strokeWidth: 2.25 }) }) }), _jsxs(PopoverContent, { align: "start", className: cn('w-[220px] p-1', viewPopoverContentClass), children: [onConvertToGroup && convertLabel ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            onConvertToGroup();
+                            setOpen(false);
+                        }, className: cn(viewListRowClass, 'w-full justify-start gap-2 font-normal'), children: [_jsx(SquareSplitVertical, { className: "text-muted-foreground size-3.5", strokeWidth: 1.8 }), convertLabel] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            onRemove();
+                            setOpen(false);
+                        }, className: cn(viewListRowClass, 'text-destructive hover:bg-destructive/10 hover:text-destructive w-full justify-start gap-2 font-normal'), children: [_jsx(X, { className: "size-3.5", strokeWidth: 1.8 }), removeLabel] })] })] }));
+}
+export function filterEditorOptions(ctx, field) {
+    return ctx.optionsFor?.(field) ?? ctx.registry.meta[field]?.selectOptions?.() ?? [];
+}
+export function ViewFilterSummaryRow({ label, onRemove, removeLabel, icon, }) {
+    return (_jsxs("div", { className: cn(viewSettingsRowClass, 'group text-foreground hover:bg-accent hover:text-accent-foreground'), children: [icon ?? _jsx(ListFilter, { className: "text-muted-foreground/70 size-4", strokeWidth: 1.5 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onRemove, "aria-label": removeLabel, className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive pointer-events-none size-6 rounded-md opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100", children: _jsx(X, { className: "size-3.5", strokeWidth: 1.5 }) })] }));
+}
+export function ViewSortSummaryRow({ label, dir, ascendingLabel, descendingLabel, removeLabel, onToggleDir, onRemove, }) {
+    const DirectionIcon = dir === 'asc' ? ArrowUp : ArrowDown;
+    return (_jsxs("div", { className: "border-border/60 bg-background flex h-9 items-center gap-2 rounded-lg border px-2 text-[13px]", children: [_jsx(ArrowDownUp, { className: "text-muted-foreground/70 size-4", strokeWidth: 1.5 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onToggleDir, className: "text-muted-foreground hover:text-foreground h-7 gap-1.5 rounded-lg px-2 text-[12px] font-normal", children: [_jsx(DirectionIcon, { className: "size-3.5", strokeWidth: 1.5 }), dir === 'asc' ? ascendingLabel : descendingLabel] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onRemove, "aria-label": removeLabel, className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive size-7 rounded-lg", children: _jsx(X, { className: "size-3.5", strokeWidth: 1.5 }) })] }));
+}

package/dist/components/view-save-menu.d.ts

@@ -0,0 +1,20 @@
+export interface ViewSaveMenuLabels {
+    saving: string;
+    savePersonal: string;
+    saveShared: string;
+    saveAsPersonal: string;
+    saveAsShared: string;
+    saveOptions: string;
+}
+export interface ViewSaveMenuProps {
+    dirty: boolean;
+    saving: boolean;
+    shared: boolean;
+    labels: ViewSaveMenuLabels;
+    testId: string;
+    onSaveInPlace: () => void;
+    onSaveAsPersonal: () => void;
+    onSaveAsShared: () => void;
+    className?: string;
+}
+export declare function ViewSaveMenu({ dirty, saving, shared, labels, testId, onSaveInPlace, onSaveAsPersonal, onSaveAsShared, className, }: ViewSaveMenuProps): React.ReactElement | null;

package/dist/components/view-save-menu.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { Button } from './button.js';
+import { ButtonGroup, ButtonGroupSeparator } from './button-group.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { viewPrimaryControlClass } from '../lib/view-chrome.js';
+import { cn } from '../lib/cn.js';
+export function ViewSaveMenu({ dirty, saving, shared, labels, testId, onSaveInPlace, onSaveAsPersonal, onSaveAsShared, className, }) {
+    if (!dirty)
+        return null;
+    return (_jsxs(ButtonGroup, { className: className, "data-testid": testId, children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: saving, onClick: onSaveInPlace, className: cn(viewPrimaryControlClass, 'shrink-0'), "data-testid": `${testId}-in-place`, children: saving ? labels.saving : shared ? labels.saveShared : labels.savePersonal }), _jsx(ButtonGroupSeparator, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: saving, className: cn(viewPrimaryControlClass, 'h-7 w-8 shrink-0 px-0'), "aria-label": labels.saveOptions, "data-testid": `${testId}-options`, children: _jsx(ChevronDown, { className: "size-3.5", strokeWidth: 1.7 }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: cn('w-56', className), children: [_jsx(DropdownMenuItem, { onSelect: onSaveAsPersonal, "data-testid": `${testId}-as-personal`, children: labels.saveAsPersonal }), _jsx(DropdownMenuItem, { onSelect: onSaveAsShared, "data-testid": `${testId}-as-shared`, children: labels.saveAsShared })] })] })] }));
+}

package/dist/components/view-sort-editor.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+export type ViewSortDirection = 'asc' | 'desc';
+export interface ViewSortEditorSort {
+    id: string;
+    field: string;
+    dir: ViewSortDirection;
+}
+export interface ViewSortEditorField {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface ViewSortEditorLabels {
+    addSort: string;
+    ascending: string;
+    descending: string;
+    chooseField: string;
+    noMatches: string;
+    remove: string;
+    reorder: string;
+    searchFields: string;
+}
+export interface ViewSortEditorProps {
+    sorts: ViewSortEditorSort[];
+    fields: ViewSortEditorField[];
+    labels: ViewSortEditorLabels;
+    onChange: (sorts: ViewSortEditorSort[]) => void;
+    createSort: (field: string) => ViewSortEditorSort;
+    className?: string;
+    menuContentClassName?: string;
+    fieldWidthClassName?: string;
+    addButtonTestId?: string;
+}
+export declare const viewEditorControlClassName = "h-7 min-w-0 rounded-lg px-2 text-[12px] font-normal leading-none";
+export declare const viewEditorIconClassName = "size-3.5 shrink-0";
+export declare const viewEditorFieldWidthClassName = "w-[136px]";
+export declare const viewSortEditorControlClassName = "h-7 min-w-0 rounded-lg px-2 text-[12px] font-normal leading-none";
+export declare const viewSortEditorIconClassName = "size-3.5 shrink-0";
+export declare const viewSortEditorFieldWidthClassName = "w-[136px]";
+export declare function ViewSortEditor({ sorts, fields, labels, onChange, createSort, className, menuContentClassName, fieldWidthClassName, addButtonTestId, }: ViewSortEditorProps): React.ReactElement;

package/dist/components/view-sort-editor.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowDown, ArrowUp, ChevronDown, Plus, X } from 'lucide-react';
+import { Button } from './button.js';
+import { PropertySelector } from './property-selector.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select.js';
+import { DragHandle, SortableList, reorderById } from './sortable.js';
+import { cn } from '../lib/cn.js';
+export const viewEditorControlClassName = 'h-7 min-w-0 rounded-lg px-2 text-[12px] font-normal leading-none';
+export const viewEditorIconClassName = 'size-3.5 shrink-0';
+export const viewEditorFieldWidthClassName = 'w-[136px]';
+export const viewSortEditorControlClassName = viewEditorControlClassName;
+export const viewSortEditorIconClassName = viewEditorIconClassName;
+export const viewSortEditorFieldWidthClassName = viewEditorFieldWidthClassName;
+export function ViewSortEditor({ sorts, fields, labels, onChange, createSort, className, menuContentClassName, fieldWidthClassName = viewEditorFieldWidthClassName, addButtonTestId, }) {
+    const [addOpen, setAddOpen] = useState(false);
+    const used = new Set(sorts.map((sort) => sort.field));
+    const available = fields.filter((field) => !used.has(field.id));
+    const itemsForFields = (fieldIds, selected) => fieldIds.flatMap((fieldId) => {
+        const field = fields.find((option) => option.id === fieldId);
+        if (!field)
+            return [];
+        return [{ ...field, selected: selected === field.id }];
+    });
+    const addItems = itemsForFields(available.map((field) => field.id));
+    const onReorderSort = (movedId, { beforeId }) => {
+        onChange(reorderById(sorts, movedId, beforeId));
+    };
+    const addSort = (field) => {
+        onChange([...sorts, createSort(field)]);
+        setAddOpen(false);
+    };
+    const selectorLabels = { noMatches: labels.noMatches };
+    return (_jsxs("div", { className: cn('grid gap-2', className), children: [_jsx(SortableList, { items: sorts, keyOf: (sort) => sort.id, orientation: "vertical", handle: true, onReorder: onReorderSort, className: "flex flex-col gap-1.5", renderItem: (sort, { dragHandleProps, isDragging }) => {
+                    const fieldIds = fields
+                        .filter((field) => field.id === sort.field || !used.has(field.id))
+                        .map((field) => field.id);
+                    const field = fields.find((option) => option.id === sort.field);
+                    return (_jsx(ViewSortEditorRow, { sort: sort, field: field, fieldItems: itemsForFields(fieldIds, sort.field), labels: labels, fieldWidthClassName: fieldWidthClassName, menuContentClassName: menuContentClassName, dragHandleProps: dragHandleProps, isDragging: isDragging, onFieldChange: (fieldId) => onChange(sorts.map((entry) => entry.id === sort.id ? { ...entry, field: fieldId } : entry)), onDirChange: (dir) => onChange(sorts.map((entry) => (entry.id === sort.id ? { ...entry, dir } : entry))), onRemove: () => onChange(sorts.filter((entry) => entry.id !== sort.id)) }));
+                } }), available.length > 0 ? (_jsx(PropertySelector, { open: addOpen, onOpenChange: setAddOpen, items: addItems, onSelect: (item) => addSort(item.id), searchPlaceholder: labels.searchFields, "aria-label": labels.addSort, labels: selectorLabels, contentClassName: fieldWidthClassName, children: _jsxs(Button, { type: "button", variant: "outline", size: "xs", className: cn(viewEditorControlClassName, 'gap-1.5'), "data-testid": addButtonTestId, children: [_jsx(Plus, { className: viewEditorIconClassName, strokeWidth: 1.8 }), " ", labels.addSort] }) })) : null] }));
+}
+function ViewSortEditorRow({ sort, field, fieldItems, labels, fieldWidthClassName, menuContentClassName, dragHandleProps, isDragging, onFieldChange, onDirChange, onRemove, }) {
+    const [fieldOpen, setFieldOpen] = useState(false);
+    const DirectionIcon = sort.dir === 'asc' ? ArrowUp : ArrowDown;
+    return (_jsxs("div", { className: cn('group grid grid-cols-[20px_minmax(0,max-content)_minmax(0,max-content)_28px] items-center gap-1.5 rounded-lg bg-background py-0.5', isDragging && 'opacity-70 shadow'), children: [_jsx(DragHandle, { dragHandleProps: dragHandleProps, "aria-label": labels.reorder, className: "size-4 justify-self-center text-muted-foreground/60 opacity-100" }), _jsx(PropertySelector, { open: fieldOpen, onOpenChange: setFieldOpen, items: fieldItems, onSelect: (item) => onFieldChange(item.id), searchPlaceholder: labels.searchFields, "aria-label": labels.chooseField, labels: { noMatches: labels.noMatches }, contentClassName: fieldWidthClassName, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn(viewEditorControlClassName, 'justify-between gap-1.5', fieldWidthClassName), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [field?.icon, _jsx("span", { className: "truncate", title: field?.label ?? sort.field, children: field?.label ?? sort.field })] }), _jsx(ChevronDown, { className: cn(viewEditorIconClassName, 'text-muted-foreground/70') })] }) }), _jsxs(Select, { value: sort.dir, onValueChange: (value) => onDirChange(value), children: [_jsx(SelectTrigger, { size: "sm", className: cn(viewEditorControlClassName, fieldWidthClassName), children: _jsx(SelectValue, { children: _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(DirectionIcon, { className: viewEditorIconClassName }), _jsx("span", { className: "truncate", children: sort.dir === 'asc' ? labels.ascending : labels.descending })] }) }) }), _jsxs(SelectContent, { className: menuContentClassName, children: [_jsxs(SelectItem, { value: "asc", children: [_jsx(ArrowUp, { className: viewEditorIconClassName }), labels.ascending] }), _jsxs(SelectItem, { value: "desc", children: [_jsx(ArrowDown, { className: viewEditorIconClassName }), labels.descending] })] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onRemove, "aria-label": labels.remove, className: "size-7 shrink-0 rounded-lg text-muted-foreground hover:bg-destructive/10 hover:text-destructive", children: _jsx(X, { className: viewEditorIconClassName }) })] }));
+}

package/dist/components/voice-line.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type LucideIcon } from 'lucide-react';
+export type VoiceLineState = 'idle' | 'generating' | 'speaking' | 'listening' | 'verifying' | 'reprompt';
+export interface VoiceLineProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Which turn state the single morphing surface currently shows. */
+    state: VoiceLineState;
+    /** The one cross-fading line — the system's spoken line, or the caller's transcript. */
+    caption?: React.ReactNode;
+    /** Short role label shown in the tinted chip (e.g. "System" / "Listening…"). */
+    who?: string;
+    /** Overrides the state's default glyph. */
+    icon?: LucideIcon;
+    /** Dims the caption and shows a blinking caret — a live/partial transcript. */
+    partial?: boolean;
+    /** Audio analyser: TTS frequency data while `speaking`+`active`, mic time-domain while `listening`. */
+    analyser?: AnalyserNode | null;
+    /** Whether TTS audio is actively playing (speaking waveform reads live levels vs. resting). */
+    active?: boolean;
+    /** Optional 0..1 listening level fallback when there is no mic analyser. */
+    micLevel?: number;
+    /** Silence/endpoint countdown in ms; renders a shrinking ring while listening. */
+    countdownMs?: number;
+    /** Stacked conversation surface or a compact waveform row for an enclosing overlay. */
+    layout?: 'stacked' | 'waveform';
+    /** Loading treatment for compact waveform layouts. */
+    loadingVisualization?: 'ripple' | 'shimmer-bars';
+    /** Fixed bar count instead of filling the width — compact surfaces want fewer bars. */
+    bars?: number;
+}
+/**
+ * The unified voice line — one dynamic-island pill whose tint, glyph, caption and
+ * waveform cross-fade between speaking → listening → verifying → reprompt. It is a
+ * single morphing surface (never two stacked boxes): the system's spoken line and the
+ * caller's transcribed line share it. Presentational; the caption is announced via
+ * aria-live so the spoken/heard line reaches a screen reader.
+ */
+export declare function VoiceLine({ state, caption, who, icon, partial, analyser, active, micLevel, countdownMs, layout, loadingVisualization, bars, className, ...props }: VoiceLineProps): React.JSX.Element;