@nadicodeai/ui 12.1.81 → 12.1.83

package/dist/components/collection-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgHF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,4BAqFA"}
+{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAoHF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,4BAuFA"}

package/dist/components/collection-filters.js

@@ -36,7 +36,7 @@ function FilterPicker({ facets, copy, initialField, returnFocus, children, }) {
                                 event.preventDefault();
                                 changeField(undefined);
                             }
-                        }, children: [_jsx(CommandInput, { ref: input, "aria-label": facet ? `${copy.searchValues}: ${facet.label}` : copy.searchFields, placeholder: facet ? copy.searchValues : copy.searchFields, value: search, onValueChange: setSearch }), _jsxs(CommandList, { label: facet?.label ?? copy.searchFields, children: [_jsx(CommandEmpty, { children: copy.empty }), _jsx(CommandGroup, { heading: facet?.label, children: facet ? (_jsxs(_Fragment, { children: [facet.value ? (_jsx(CommandItem, { value: facet.allLabel, onSelect: () => commit(""), children: facet.allLabel })) : null, facet.options.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [option.label], "data-checked": option.value === facet.value, onSelect: () => commit(option.value), children: [option.icon, _jsx("span", { className: option.mono ? "truncate nc-type-label-mono" : "truncate", children: option.label })] }, option.value)))] })) : (facets.map((item) => (_jsx(CommandItem, { value: item.label, onSelect: () => changeField(item.label), children: item.label }, item.label)))) })] })] }, field ?? "fields")] })] }));
+                        }, children: [_jsx(CommandInput, { ref: input, "aria-label": facet ? `${copy.searchValues}: ${facet.label}` : copy.searchFields, placeholder: facet ? copy.searchValues : copy.searchFields, value: search, onValueChange: setSearch }), _jsxs(CommandList, { label: facet?.label ?? copy.searchFields, children: [_jsx(CommandEmpty, { children: copy.empty }), _jsx(CommandGroup, { heading: facet?.label, children: facet ? (_jsxs(_Fragment, { children: [facet.value ? (_jsx(CommandItem, { value: facet.allLabel, onSelect: () => commit(""), children: facet.allLabel })) : null, facet.options.map((option) => (_jsxs(CommandItem, { value: option.value, keywords: [option.label], "data-checked": option.value === facet.value, onSelect: () => commit(option.value), children: [option.icon, _jsx("span", { className: option.mono ? "truncate font-label-mono text-label-mono" : "truncate", children: option.label })] }, option.value)))] })) : (facets.map((item) => (_jsx(CommandItem, { value: item.label, onSelect: () => changeField(item.label), children: item.label }, item.label)))) })] })] }, field ?? "fields")] })] }));
 }
 export function CollectionFilters({ facets, copy, }) {
     const addTrigger = React.useRef(null);
@@ -46,7 +46,7 @@ export function CollectionFilters({ facets, copy, }) {
                 .filter((facet) => facet.value)
                 .map((facet) => {
                 const selected = facet.options.find((option) => option.value === facet.value);
-                return (_jsxs(ButtonGroup, { "aria-label": facet.label, className: "min-w-0 max-w-full", children: [_jsx(FilterPicker, { facets: facets, copy: copy, initialField: facet.label, returnFocus: addTrigger, children: _jsxs(Button, { variant: "outline", className: "max-w-64", children: [facet.selectedIcon ?? selected?.icon, _jsxs("span", { className: "truncate", children: [facet.label, ":", " ", _jsx("span", { className: selected?.mono ? "nc-type-label-mono" : undefined, children: selected?.label ?? facet.value })] })] }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": `${copy.remove}: ${facet.label}`, onClick: () => {
+                return (_jsxs(ButtonGroup, { "aria-label": facet.label, className: "min-w-0 max-w-full", children: [_jsx(FilterPicker, { facets: facets, copy: copy, initialField: facet.label, returnFocus: addTrigger, children: _jsxs(Button, { variant: "outline", className: "max-w-64", children: [facet.selectedIcon ?? selected?.icon, _jsxs("span", { className: "truncate", children: [facet.label, ":", " ", _jsx("span", { className: selected?.mono ? "font-label-mono text-label-mono" : undefined, children: selected?.label ?? facet.value })] })] }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": `${copy.remove}: ${facet.label}`, onClick: () => {
                                 facet.onValueChange("");
                                 addTrigger.current?.focus();
                             }, children: _jsx(X, { "aria-hidden": "true" }) })] }, facet.label));
@@ -60,7 +60,7 @@ export function CollectionFilters({ facets, copy, }) {
                                 facet.onValueChange(value);
                                 addTrigger.current?.focus();
                             }, children: [option.icon, _jsxs("span", { className: "truncate", children: [facet.label, " ", _jsx("span", { className: option.mono
-                                                ? "text-foreground nc-type-label-mono"
+                                                ? "text-foreground font-label-mono text-label-mono"
                                                 : "font-medium text-foreground", children: option.label })] })] }, `${facet.label}:${value}`),
                     ]
                     : [];

package/dist/components/collection-toolbar.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * it is the plain row it always was, and a page whose rows never pass under
  * the bar asks for that plain row with `surface="plain"`.
  */
-const ON_PAGE = "sticky top-3 z-20 mb-3 rounded-xl p-2 nc-glass nc-elevation-floating";
+const ON_PAGE = "sticky top-3 z-20 mb-3 rounded-lg p-2 nc-glass nc-elevation-floating";
 const PLAIN = "relative mb-3";
 const IN_CARD = "[[data-slot=table-card-toolbar]_&]:relative [[data-slot=table-card-toolbar]_&]:z-auto [[data-slot=table-card-toolbar]_&]:mb-0 [[data-slot=table-card-toolbar]_&]:rounded-none [[data-slot=table-card-toolbar]_&]:p-0 [[data-slot=table-card-toolbar]_&]:pb-4 [[data-slot=table-card-toolbar]_&]:[background:none] [[data-slot=table-card-toolbar]_&]:[backdrop-filter:none] [[data-slot=table-card-toolbar]_&]:[box-shadow:none]";
 export function CollectionToolbar({ label, controls, search, actions, status, surface = "glass", ...props }) {

package/dist/components/combobox.js

@@ -26,7 +26,7 @@ function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));
 }
 function ComboboxItem({ className, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex min-h-touch-target w-full cursor-default items-center gap-2 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
 }
 function ComboboxGroup({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
@@ -44,10 +44,10 @@ function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-md border border-input bg-background bg-clip-padding px-control-padding-inline py-1 text-sm transition-colors focus-within:nc-focus-outline focus-within:outline-ring has-aria-invalid:border-destructive has-aria-invalid:nc-focus-outline has-aria-invalid:outline-destructive has-data-[slot=combobox-chip]:px-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-touch-target flex-wrap items-center gap-1 rounded-sm border border-input bg-background bg-clip-padding px-control-padding-inline py-1 text-sm transition-colors focus-within:nc-focus-outline focus-within:outline-ring has-aria-invalid:border-destructive has-aria-invalid:nc-focus-outline has-aria-invalid:outline-destructive has-data-[slot=combobox-chip]:px-1 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height", className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
 }
 function ComboboxChipsInput({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));

package/dist/components/command.js

@@ -9,10 +9,10 @@ function Command({ className, ...props }) {
     return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-lg! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
 }
 function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
-    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-md! bg-transparent p-0!", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-lg! bg-transparent p-0!", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
 }
 function CommandInput({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-md! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-sm! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
 }
 function CommandList({ className, ...props }) {
     return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className), ...props }));
@@ -27,7 +27,7 @@ function CommandSeparator({ className, ...props }) {
     return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("-mx-1 h-px bg-border", className), ...props }));
 }
 function CommandItem({ className, children, ...props }) {
-    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex min-h-touch-target cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
+    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex min-h-touch-target cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
 }
 function CommandShortcut({ className, ...props }) {
     return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className), ...props }));

package/dist/components/copy-button.d.ts

@@ -0,0 +1,9 @@
+export type CopyButtonProps = {
+    value: string;
+    copyLabel: string;
+    copiedLabel: string;
+    copyFailedLabel: string;
+    size?: "icon" | "icon-xs" | "icon-sm";
+};
+export declare function CopyButton(props: CopyButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/components/copy-button.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACvC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD"}

package/dist/components/copy-button.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useTransition } from "react";
+import { Check, CircleAlert, Copy } from "lucide-react";
+import { Button } from "./button.js";
+import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+export function CopyButton(props) {
+    return _jsx(CopyValueButton, { ...props }, props.value);
+}
+function CopyValueButton({ value, copyLabel, copiedLabel, copyFailedLabel, size = "icon", }) {
+    const [failed, setFailed] = useState(false);
+    const [pending, startTransition] = useTransition();
+    const { copyToClipboard, isCopied } = useCopyToClipboard({
+        text: value,
+        timeout: 2000,
+        onError: () => setFailed(true),
+    });
+    const copied = isCopied && !failed && !pending;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": copyLabel, "aria-busy": pending, title: failed ? copyFailedLabel : copyLabel, disabled: pending, focusableWhenDisabled: true, onClick: () => {
+                    setFailed(false);
+                    startTransition(async () => {
+                        await copyToClipboard();
+                    });
+                }, size: size, type: "button", variant: "ghost", children: pending ? (_jsx(Copy, { "data-icon": "inline-start" })) : failed ? (_jsx(CircleAlert, { "data-icon": "inline-start" })) : copied ? (_jsx(Check, { "data-icon": "inline-start" })) : (_jsx(Copy, { "data-icon": "inline-start" })) }), _jsx("span", { className: "sr-only", role: "status", children: pending ? "" : failed ? copyFailedLabel : copied ? copiedLabel : "" })] }));
+}

package/dist/components/data-table.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_includesString, filterFn_inNumberRange, filterFn_weakEquals, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, type CellData, type Column, type ColumnDef, type RowData } from "@tanstack/react-table";
 import { type EmptyStateProps } from "./empty-state.js";
+import { Table } from "./table.js";
 import { type TableCompactLayout } from "./table-layouts.js";
 type DataTableFeatures = {
     columnFilteringFeature: typeof columnFilteringFeature;
@@ -86,19 +87,18 @@ type DataTableBaseProps<TData extends RowData> = {
      * collection leaves it out, because the page heading already names it.
      */
     heading?: {
-        title: string;
+        title: React.ReactNode;
         description?: string;
     };
     /** A count or the paging under the rows; never a help sentence. */
     footer?: React.ReactNode;
     /**
-     * Draws the column header row. Rows explain themselves by their cells (an
-     * identity with its orb or mark, a status badge, a tag, a relative time), so
-     * the header row is kept for screen readers only. Opt in only for a table
-     * whose columns are figures a reader cannot tell apart without their names,
-     * such as statements or analytics.
+     * Visible by default so comparable columns retain their names. A self-describing
+     * entity list can set false; its headers remain available to screen readers.
      */
     showColumnHeaders?: boolean;
+    density?: React.ComponentProps<typeof Table>["density"];
+    interactive?: boolean;
     /** A fixed comparison inside an existing detail Card keeps that one frame. */
     embedded?: boolean;
     summary?: {
@@ -150,6 +150,6 @@ type DataTableRowNav<TData extends RowData> = {
 };
 export type DataTableProps<TData extends RowData> = DataTableBaseProps<TData> & DataTableRowNav<TData>;
 export declare function columnMenuLabel<TData extends RowData, TValue extends CellData = CellData>(column: DataTableColumn<TData, TValue>): string;
-export declare function DataTable<TData extends RowData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders, embedded, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink, renderToolbar, wrapCard, }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders, density, interactive, embedded, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink, renderToolbar, wrapCard, }: DataTableProps<TData>): React.JSX.Element;
 export {};
 //# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-table.js

@@ -9,7 +9,7 @@ import { Button } from "./button.js";
 import { CollectionToolbar } from "./collection-toolbar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { EmptyState } from "./empty-state.js";
-import { Table, TableBody, TableCell, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
+import { Table, TableCell, TableDetailRow, TableHead, TableHeader, TableRecordGroup, TableRow, } from "./table.js";
 import { TableCard } from "./table-card.js";
 import { tableCompactLayouts } from "./table-layouts.js";
 const dataTableFeatures = tableFeatures({
@@ -38,28 +38,14 @@ const dataTableFeatures = tableFeatures({
 function isNumericColumn(column) {
     return column.columnDef.meta?.numeric === true;
 }
-// DESIGN.md, "Tables and missing values": a row reads as its record's name on
-// one line, then facts at their own width. Against `table-layout: auto` a
-// declared width is only a hint and a percentage is honoured first, so a
-// control column asks for `1px`, the identity claims a third and gives it back
-// down to its floor with an ellipsis, a prose column holds its words on one
-// line up to a cap and cuts the rest with an ellipsis, and every other cell
-// holds its fact on one line. A record is one line at every desktop width.
 const NARROW_COLUMN_CLASS = "w-px whitespace-nowrap";
-const IDENTITY_COLUMN_CLASS = "w-1/3 max-w-0 min-w-24 sm:min-w-44";
+const IDENTITY_COLUMN_CLASS = "max-w-0 min-w-24";
 const IDENTITY_CONTENT_CLASS = "truncate";
 const PROSE_COLUMN_CLASS = "min-w-32";
-// A document's text, such as a legal table's, is read whole: it wraps between
-// words and is never cut, so its row grows instead.
 const WRAPPING_COLUMN_CLASS = "min-w-32 whitespace-normal align-top";
-// A one-track grid whose track runs from zero to the words' own width: the
-// cell asks for its words up to the cap, yet a narrow table can still shrink
-// the column to its floor instead of being pushed wider than its container.
 const PROSE_FRAME_CLASS = "grid grid-cols-[minmax(0,max-content)]";
 const PROSE_CONTENT_CLASS = "max-w-64 truncate";
 const CELL_INSET_CLASS = "px-4";
-// A name cut with an ellipsis is read whole on hover. The title is set when the
-// pointer or focus arrives, and only while some part of the name is cut.
 function titleWhenCut(event) {
     const element = event.currentTarget;
     const cut = [element, ...element.querySelectorAll("*")].some((node) => node.scrollWidth > node.clientWidth);
@@ -69,15 +55,13 @@ function titleWhenCut(event) {
     else
         element.removeAttribute("title");
 }
-// In the compact layout every other visible column already takes its narrowest
-// width, so the identity takes the whole rest of the row.
 const COMPACT_IDENTITY_CLASS = {
     tight: "@max-xl/table:w-full",
     standard: "@max-3xl/table:w-full",
     wide: "@max-5xl/table:w-full",
     spacious: "@max-6xl/table:w-full",
 };
-function widthClass(column, identityColumnId, compactLayout, identityAlone) {
+function widthClass(column, identityColumnId, compactLayout, identityAlone, balancedIdentity) {
     if (column.columnDef.meta?.narrow === true)
         return NARROW_COLUMN_CLASS;
     if (column.columnDef.meta?.prose === true)
@@ -86,11 +70,8 @@ function widthClass(column, identityColumnId, compactLayout, identityAlone) {
         return WRAPPING_COLUMN_CLASS;
     if (column.id !== identityColumnId)
         return false;
-    // Beside controls alone the identity takes the whole row, so the controls
-    // sit at its trailing edge instead of a third of the way across.
-    return cn(IDENTITY_COLUMN_CLASS, identityAlone && "w-full", compactLayout && COMPACT_IDENTITY_CLASS[compactLayout]);
+    return cn(IDENTITY_COLUMN_CLASS, balancedIdentity ? "w-1/4" : "w-1/3 sm:min-w-44", identityAlone && "w-full", compactLayout && COMPACT_IDENTITY_CLASS[compactLayout]);
 }
-// The id TanStack gives a column: its own, or the accessor key it reads.
 function definitionId(column) {
     if (!column)
         return undefined;
@@ -98,8 +79,6 @@ function definitionId(column) {
         return column.id;
     return "accessorKey" in column ? String(column.accessorKey) : undefined;
 }
-// The column-visibility menu and the detail row name each column by its
-// localized header; the id is a fallback for a header drawn by a function.
 export function columnMenuLabel(column) {
     const header = column.columnDef.header;
     return typeof header === "string" ? header : column.id;
@@ -158,12 +137,10 @@ const defaultRowLink = (props) => _jsx("a", { ...props });
 function DefaultToolbar({ actions }) {
     return actions ? _jsx(CollectionToolbar, { label: "", actions: actions }) : null;
 }
-export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = false, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, }) {
+export function DataTable({ columns, data, getRowId, filterColumnId, filterPlaceholder, primaryColumns, compactLayout: requestedCompactLayout, tableLabel, heading, footer, showColumnHeaders = true, density = "comfortable", interactive = true, embedded = false, summary, rowHref, rowLabel, primaryColumnId, empty, noMatchMessage, columnsLabel, clearSearchLabel, pageLabels, toolbarActions, externalFilter, sorting: externalSorting, pagination, renderRowLink = defaultRowLink, renderToolbar = DefaultToolbar, wrapCard, }) {
     const [sorting, setSorting] = React.useState([]);
     const [columnFilters, setColumnFilters] = React.useState([]);
     const [columnVisibility, setColumnVisibility] = React.useState({});
-    // One column absorbs the slack: a column of sentences when the table has
-    // one, otherwise the identity, the first column that is not a control.
     const identityColumnId = definitionId(columns.find((column) => column.meta?.narrow !== true && column.meta?.prose !== true && column.meta?.wraps !== true));
     const identityAlone = columns.every((column) => column.meta?.narrow === true || definitionId(column) === identityColumnId);
     // An external pager means `data` is already one bounded server page:
@@ -186,12 +163,12 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
             columnVisibility,
         },
     });
+    const balancedIdentity = showColumnHeaders && table.getVisibleLeafColumns().length > 5;
     const hasDetailColumns = table
         .getAllLeafColumns()
         .some((column) => !primaryColumns.includes(column.id));
     const compactLayout = hasDetailColumns
-        ? (requestedCompactLayout ??
-            (columns.length > 7 ? "spacious" : columns.length > 5 ? "wide" : "standard"))
+        ? (requestedCompactLayout ?? (table.getVisibleLeafColumns().length > 7 ? "wide" : "standard"))
         : undefined;
     const [shownLayout, layoutProbeRef] = useShownLayout();
     const canPreviousPage = pagination ? pagination.hasPrevious : table.getCanPreviousPage();
@@ -207,21 +184,16 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                         .filter((column) => column.getCanHide())
                         .map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: columnMenuLabel(column) }, column.id))) }) })] })) : null;
     const rows = table.getRowModel().rows;
-    const colSpan = Math.max(1, table.getVisibleLeafColumns().length);
     const renderRow = (row) => {
         const href = rowHref?.(row.original);
         const label = rowLabel?.(row.original);
         const visibleCells = row.getVisibleCells();
-        // The link rides one cell only, the named primary column or the first
-        // visible one, so the row is a single tab stop with a purposeful name.
         const configuredPrimaryVisible = primaryColumnId !== undefined && table.getColumn(primaryColumnId)?.getIsVisible();
         const primaryId = configuredPrimaryVisible ? primaryColumnId : visibleCells[0]?.column.id;
         const detailCells = visibleCells.filter((cell) => !primaryColumns.includes(cell.column.id));
         return (_jsxs(TableRecordGroup, { children: [_jsx(TableRow, { "data-href": href, className: cn(href && "cursor-pointer"), detailLayout: detailCells.length > 0 ? compactLayout : undefined, onClick: href
                         ? (event) => {
                             const target = event.target;
-                            // The row link and any interactive descendant own their own
-                            // clicks; only a bare-cell click is delegated to the link.
                             if (!(target instanceof Element) ||
                                 target.closest("a, button, input, select, textarea, label, [role='button'], [role='menuitem'], [role='checkbox']")) {
                                 return;
@@ -232,7 +204,7 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                         const numeric = isNumericColumn(cell.column);
                         const isPrimaryLink = href && cell.column.id === primaryId;
                         const collapsed = collapseClass(cell.column.id, primaryColumns, compactLayout);
-                        const className = cn(CELL_INSET_CLASS, numeric && "text-right tabular-nums wrap-normal", widthClass(cell.column, identityColumnId, compactLayout, identityAlone), collapsed);
+                        const className = cn(CELL_INSET_CLASS, numeric && "text-right tabular-nums wrap-normal", cell.column.columnDef.meta?.wraps && "whitespace-normal", widthClass(cell.column, identityColumnId, compactLayout, identityAlone, balancedIdentity), collapsed);
                         const drawnOnlyInDetailRow = Boolean(collapsed) && shownLayout === "details" && !isPrimaryLink;
                         if (drawnOnlyInDetailRow) {
                             return _jsx(TableCell, { className: className }, cell.id);
@@ -255,22 +227,20 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
                         value: flexRender(cell.column.columnDef.cell, cell.getContext()),
                     })) })) : null] }, row.id));
     };
-    const tableNode = (_jsxs(Table, { "aria-label": tableLabel, className: "nc-type-body-sm", compactDetails: compactLayout, children: [_jsx(TableHeader, { className: showColumnHeaders && rows.length > 0 ? undefined : "sr-only", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { className: cn(CELL_INSET_CLASS, isNumericColumn(header.column) && "text-right tabular-nums", widthClass(header.column, identityColumnId, compactLayout, identityAlone), collapseClass(header.column.id, primaryColumns, compactLayout)), children: header.isPlaceholder
+    const tableNode = rows.length === 0 ? (_jsx(EmptyState, { scope: "card", ...(filterValue && noMatchMessage && clearSearchLabel && filterColumn
+            ? {
+                kind: "noResults",
+                presentation: empty.presentation,
+                message: noMatchMessage,
+                clear: {
+                    label: clearSearchLabel,
+                    onClick: () => filterColumn.setFilterValue(""),
+                },
+            }
+            : empty) })) : (_jsxs(Table, { "aria-label": tableLabel, className: "text-body-sm", compactDetails: compactLayout, density: density, interactive: interactive, children: [_jsx(TableHeader, { className: showColumnHeaders ? undefined : "sr-only", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { className: cn(CELL_INSET_CLASS, isNumericColumn(header.column) && "text-right tabular-nums", widthClass(header.column, identityColumnId, compactLayout, identityAlone, balancedIdentity), collapseClass(header.column.id, primaryColumns, compactLayout)), children: header.isPlaceholder
                             ? null
-                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: compactLayout, probeRef: layoutProbeRef, children: rows.length > 0 ? (rows.map(renderRow)) : (_jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, className: cn(CELL_INSET_CLASS, "whitespace-normal"), children: _jsx(EmptyState, { scope: "card", ...(filterValue && noMatchMessage && clearSearchLabel && filterColumn
-                                    ? {
-                                        kind: "noResults",
-                                        message: noMatchMessage,
-                                        clear: {
-                                            label: clearSearchLabel,
-                                            onClick: () => filterColumn.setFilterValue(""),
-                                        },
-                                    }
-                                    : empty) }) }) }) })) })] }));
+                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(LayoutProbeLeadingRecords, { layout: compactLayout, probeRef: layoutProbeRef, children: rows.map(renderRow) })] }));
     const actions = columnsControl || toolbarActions ? (_jsxs(_Fragment, { children: [columnsControl, toolbarActions] })) : null;
-    // The toolbar belongs to the collection, so it sits at the top of the frame
-    // the collection owns: under the card's own title when it has one, and above
-    // the card when the page itself is the collection.
     const toolbarRow = renderToolbar({
         actions,
         ...(filterColumn
@@ -288,5 +258,5 @@ export function DataTable({ columns, data, getRowId, filterColumnId, filterPlace
             : {}),
     });
     const card = (_jsx(TableCard, { surface: embedded ? "plain" : "resting", ...(heading ? { title: heading.title } : {}), ...(heading?.description ? { description: heading.description } : {}), ...(heading && toolbarRow ? { toolbar: toolbarRow } : {}), ...(summary ? { summary } : {}), ...(footer ? { footer } : {}), children: tableNode }));
-    return (_jsxs("div", { className: "min-w-0 w-full nc-type-body-sm", "data-slot": "data-table", children: [heading ? null : toolbarRow, wrapCard ? wrapCard(card) : card, !pageLabels || pagination === false || (!canPreviousPage && !canNextPage) ? null : (_jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [_jsx(Button, { variant: "outline", onClick: goPreviousPage, disabled: !canPreviousPage || (pagination && pagination.isPending), children: pageLabels.previous }), _jsx(Button, { variant: "outline", onClick: goNextPage, disabled: !canNextPage || (pagination && pagination.isPending), children: pageLabels.next })] }))] }));
+    return (_jsxs("div", { className: "min-w-0 w-full text-body-sm", "data-slot": "data-table", children: [heading ? null : toolbarRow, wrapCard ? wrapCard(card) : card, !pageLabels || pagination === false || (!canPreviousPage && !canNextPage) ? null : (_jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [_jsx(Button, { variant: "outline", onClick: goPreviousPage, disabled: !canPreviousPage || (pagination && pagination.isPending), children: pageLabels.previous }), _jsx(Button, { variant: "outline", onClick: goNextPage, disabled: !canNextPage || (pagination && pagination.isPending), children: pageLabels.next })] }))] }));
 }

package/dist/components/dialog.js

@@ -43,12 +43,12 @@ function DialogBody({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-body", className: cn("-mx-nadicode-xxs flex min-h-0 flex-1 flex-col gap-nadicode-md overflow-y-auto px-nadicode-xxs", className), ...props }));
 }
 function DialogFooter({ className, showCloseButton = false, closeLabel = "Close", children, ...props }) {
-    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-nadicode-lg -mb-nadicode-lg flex flex-col-reverse gap-2 p-nadicode-md sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: closeLabel }))] }));
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-nadicode-lg -mb-nadicode-lg flex flex-col-reverse gap-2 rounded-b-lg border-t border-border bg-recessed px-nadicode-lg py-control-padding-inline sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: closeLabel }))] }));
 }
 function DialogTitle({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-base font-medium", className), ...props }));
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-heading-sm", className), ...props }));
 }
 function DialogDescription({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-body-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
 export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/drawer.js

@@ -66,7 +66,7 @@ function DrawerContent({ className, children, ...props }) {
  * adds no edge of its own.
  */
 function DrawerHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-0.5 border-b border-border p-nadicode-lg pb-nadicode-md group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className), ...props }));
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-0.5 p-nadicode-lg pb-nadicode-md group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className), ...props }));
 }
 /**
  * The part of a drawer that scrolls, between its header and footer, which stay
@@ -76,12 +76,12 @@ function DrawerBody({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-body", className: cn("flex min-h-0 flex-1 flex-col gap-nadicode-md overflow-y-auto p-nadicode-lg", className), ...props }));
 }
 function DrawerFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex shrink-0 flex-col gap-2 border-t border-border p-nadicode-md", className), ...props }));
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex shrink-0 flex-col gap-2 border-t border-border bg-recessed px-nadicode-lg py-control-padding-inline", className), ...props }));
 }
 function DrawerTitle({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("text-base font-medium text-foreground", className), ...props }));
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("text-heading-sm text-foreground", className), ...props }));
 }
 function DrawerDescription({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-balance text-muted-foreground", className), ...props }));
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-body-sm text-balance text-muted-foreground", className), ...props }));
 }
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/components/dropdown-menu.js

@@ -24,8 +24,8 @@ function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
 }
 function DropdownMenuItem({ className, iconOnly = false, inset, variant = "default", ...props }) {
-    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-soft-foreground data-[variant=destructive]:focus:bg-destructive-soft data-[variant=destructive]:focus:text-destructive-soft-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-soft-foreground", iconOnly &&
-            "size-8 min-w-touch-target shrink-0 justify-center rounded-md p-0 group-data-[density=comfortable]/menu:p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props }));
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-soft-foreground data-[variant=destructive]:focus:bg-destructive-soft data-[variant=destructive]:focus:text-destructive-soft-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-soft-foreground", iconOnly &&
+            "size-8 min-w-touch-target shrink-0 justify-center rounded-sm p-0 group-data-[density=comfortable]/menu:p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0", className), ...props }));
 }
 /**
  * A command in a record's or a page's menu: its label first, a decorative icon
@@ -41,20 +41,20 @@ function DropdownMenuSub({ ...props }) {
     return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
-    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:px-3 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
     return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-24", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
 }
 function DropdownMenuRadioGroup({ ...props }) {
     return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
 }
 function DropdownMenuRadioItem({ className, iconOnly = false, children, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", iconOnly &&
-            "size-8 min-w-touch-target justify-center rounded-md p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 data-checked:bg-muted data-checked:text-foreground", className), ...props, children: [!iconOnly ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) })) : null, children] }));
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-icon-only": iconOnly || undefined, "data-inset": inset, className: cn("relative flex min-h-touch-target cursor-default items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", iconOnly &&
+            "size-8 min-w-touch-target justify-center rounded-sm p-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 data-checked:bg-muted data-checked:text-foreground", className), ...props, children: [!iconOnly ? (_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) })) : null, children] }));
 }
 function DropdownMenuSeparator({ className, ...props }) {
     return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));

package/dist/components/empty-state.d.ts

@@ -1,38 +1,32 @@
 import type { EmptyArt } from "./empty-art.js";
 import { type PageCommand } from "./page-actions.js";
 import { type ResolvedMessage } from "./product-message.js";
-/**
- * What a place with nothing in it says (DESIGN.md "Elevation & Depth", the
- * absence paragraph):
- * - `firstUse`: a collection with no records yet whose kind has a picture in
- *   the approved set: the picture, a title, one line saying what will live
- *   there, and, when this viewer can add one, the action that adds the first
- *   record;
- * - `nothingYet`: a list with no picture of its own, such as invoices, history
- *   or a table inside a page: one line;
- * - `noResults`: a search or filter that matches nothing: one line and the way
- *   to clear it, with no picture;
- * - `failed`: a read that failed where the content would be: the warning mark
- *   and the catalogue's message, with its controls (Retry among them).
- */
 export type EmptyStateProps = {
     scope?: "page" | "region" | "card";
-} & ({
+} & (({
     kind: "firstUse";
-    picture: EmptyArt;
     title: string;
     description: string;
     action?: PageCommand;
+} & ({
+    presentation?: "illustrated";
+    picture: EmptyArt;
 } | {
+    presentation: "plain";
+    picture?: never;
+})) | {
     kind: "nothingYet";
     message: string;
+    presentation?: "plain" | "illustrated";
 } | {
     kind: "noResults";
     message: string;
     clear: PageCommand;
+    presentation?: "plain" | "illustrated";
 } | {
     kind: "failed";
     message: ResolvedMessage;
+    presentation?: "plain" | "illustrated";
 });
 export declare function EmptyState(props: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;CAAE,GAAG,CACnE;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAE,GAC1D;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,eAAe,CAAA;CAAE,CAC/C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA6ChD"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;CAAE,GAAG,CACnE,CAAC;IACC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,GAAG,CACA;IAAE,YAAY,CAAC,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAE,GACnD;IAAE,YAAY,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAC7C,CAAC,GACF;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;CAAE,GAC/E;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACxC,GACD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;CAAE,CACvF,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA6ChD"}

package/dist/components/empty-state.js

@@ -6,7 +6,7 @@ import { PageCommandButton } from "./page-actions.js";
 import { bodyBeyondTitle } from "./product-message.js";
 export function EmptyState(props) {
     const scope = props.scope ?? "region";
-    return (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, children: [_jsxs(EmptyHeader, { children: [props.kind === "firstUse" ? (_jsx(EmptyPicture, { size: scope === "page" ? "page" : "card", src: props.picture })) : null, props.kind === "failed" ? (_jsx(EmptyMedia, { variant: "icon", children: _jsx(AlertTriangleIcon, { "aria-hidden": "true" }) })) : null, props.kind === "firstUse" ? (_jsxs("div", { className: "grid gap-1", children: [_jsx(EmptyTitle, { children: _jsx("h2", { children: props.title }) }), _jsx(EmptyDescription, { children: props.description })] })) : props.kind === "failed" ? (_jsx(FailedRead, { message: props.message })) : (_jsx(EmptyDescription, { children: props.message }))] }), props.kind === "firstUse" && props.action ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.action, variant: "default" }) })) : null, props.kind === "noResults" ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.clear, variant: "outline" }) })) : null, props.kind === "failed" && props.message.actions.length > 0 ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: props.message.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] }));
+    return (_jsxs(Empty, { "data-empty-state": props.kind, scope: scope, presentation: props.presentation, children: [_jsxs(EmptyHeader, { children: [props.kind === "firstUse" && props.presentation !== "plain" ? (_jsx(EmptyPicture, { size: scope === "page" ? "page" : "card", src: props.picture })) : null, props.kind === "failed" ? (_jsx(EmptyMedia, { variant: "icon", children: _jsx(AlertTriangleIcon, { "aria-hidden": "true" }) })) : null, props.kind === "firstUse" ? (_jsxs("div", { className: "grid gap-1", children: [_jsx(EmptyTitle, { children: _jsx("h2", { children: props.title }) }), _jsx(EmptyDescription, { children: props.description })] })) : props.kind === "failed" ? (_jsx(FailedRead, { message: props.message })) : (_jsx(EmptyDescription, { children: props.message }))] }), props.kind === "firstUse" && props.action ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.action, variant: "default" }) })) : null, props.kind === "noResults" ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: _jsx(PageCommandButton, { command: props.clear, variant: "outline" }) })) : null, props.kind === "failed" && props.message.actions.length > 0 ? (_jsx(EmptyContent, { "data-empty-state-action": true, children: props.message.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) })) : null] }));
 }
 function FailedRead({ message }) {
     const body = bodyBeyondTitle(message);