cursedbelt 0.0.0 → 2.3.0

package/dist/react/components/DataTable/TableFilterBuilder.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter, Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { NativeSelect } from '../NativeSelect';
+import { Popover } from '../Popover';
+import { countActiveConditions, describeFilterQuery, EMPTY_FILTER_QUERY, FILTER_OP_LABELS, newCondition, newGroup, VALUELESS_OPS, } from './filterQuery';
+const OP_OPTIONS = Object.keys(FILTER_OP_LABELS).map((op) => ({
+    value: op,
+    label: FILTER_OP_LABELS[op],
+}));
+/**
+ * The TABLE's filter builder — `(A and B) or (C and D)`, and the UX is the hard half.
+ *
+ * ── 🔴 Why the name carries `Table`, 2026-09-13 ─────────────────────────────
+ * It was `FilterBuilder`, and `cursedesk` has a `FilterBuilder` of its own. The
+ * graduation pass that looked at the pair to decide which one should live here
+ * found they are not two copies of one component — they are two different
+ * components wearing one basename, which is the trap that makes the next person
+ * merge them wrongly:
+ *
+ * - **This one is a VIEW filter.** Two levels by construction (groups OR'd,
+ *   conditions AND'd inside one), values are strings, columns are `{key,label}`
+ *   with no type, and it narrows rows already on screen behind a popover on the
+ *   `DataTable` toolbar. Nothing it builds crosses a wire.
+ * - **`cursedesk`'s is a QUERY builder** — an arbitrarily-nested AND/OR/NOT
+ *   tree with per-type operator sets (`between`, `matches`, `in`, `isEmpty`),
+ *   range and set editors, `caseSensitive` per rule and a validator, editing
+ *   the exact `FilterNode` its API consumes so what is built is what the server
+ *   filters and exports by.
+ *
+ * Neither is the other generalised. Collapsing them would mean either giving a
+ * table toolbar a regex field and a three-deep nesting rule, or taking typed
+ * operators away from a filter the server evaluates — so they stay two, and
+ * this one says which it is. See {@link FilterQuery} for the shape it edits;
+ * the name of the thing it is NOT is `cursedesk`'s `ui/workbench/FilterBuilder`.
+ *
+ * The owner's closing clause is the acceptance test, not a nicety: *"easy enough
+ * that I don't give up on trying it."* So every decision here is made against
+ * "can somebody who did not write this finish a two-group filter":
+ *
+ * - **No Apply button and no draft state.** Every keystroke narrows the table
+ *   behind the popover, so you can see whether you are getting closer. A builder
+ *   whose result only appears after a commit makes you guess, and guessing wrong
+ *   twice is where people give up. `isActiveCondition` is what makes this
+ *   survivable — a half-typed condition is not yet a constraint, so the table
+ *   does not empty out the instant you add a row.
+ * - **The grammar is VISIBLE, not implied.** Groups are boxes, the word `OR`
+ *   sits between them on its own rule, and `and` is printed before every
+ *   condition after the first. Nobody has to know a precedence rule.
+ * - **Exactly two levels.** There is no "add nested group", because the moment
+ *   nesting exists the reader has to hold a tree in their head. Two levels
+ *   express his own worked example and everything shaped like it.
+ * - **Every row is removable, and so is the whole thing.** `Clear all` is
+ *   always reachable; a filter you cannot get out of is worse than none.
+ *
+ * The trigger carries the live count so the toolbar says how many constraints
+ * are on without opening anything (DESIGN.md §2 — one line, state legible on it).
+ */
+export function TableFilterBuilder({ columns, value, onChange, className, }) {
+    const [open, setOpen] = useState(false);
+    const activeCount = countActiveConditions(value);
+    const firstColumn = columns[0]?.key ?? '';
+    const labelOf = (key) => columns.find((c) => c.key === key)?.label ?? key;
+    const patchGroup = (groupId, next) => onChange({
+        groups: value.groups.map((group) => group.id === groupId ? { ...group, conditions: next(group.conditions) } : group),
+    });
+    if (columns.length === 0)
+        return null;
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, align: 'start', width: 520, arrow: false, trigger: _jsxs(Button, { size: 'sm', variant: activeCount > 0 ? 'secondary' : 'ghost', leftIcon: _jsx(Filter, {}), tooltip: activeCount > 0 ? describeFilterQuery(value, labelOf) : 'Build a filter', children: ["Filter", activeCount > 0 ? (_jsx("span", { className: 'ml-1.5 rounded-full bg-primary px-1.5 py-0.5 text-caption font-bold text-primary-foreground', children: activeCount })) : null] }), children: _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsxs("div", { className: 'flex items-center justify-between gap-2', children: [_jsx("span", { className: 'cb-meta-label', children: "Filter" }), _jsx("button", { 
+                            // guardrails-ignore no-raw-action-button: clears view state, mutates no record.
+                            type: 'button', onClick: () => onChange(EMPTY_FILTER_QUERY), disabled: value.groups.length === 0, className: 'rounded px-1.5 py-1 text-caption font-semibold uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40', children: "Clear all" })] }), value.groups.length === 0 ? (_jsxs("p", { className: 'px-1 py-2 text-sm text-muted-foreground', children: ["Match rows on any number of columns. Conditions inside a group must all match; add a second group to match ", _jsx("strong", { className: 'font-semibold text-foreground', children: "either" }), ' ', "set."] })) : null, _jsx("div", { className: 'flex max-h-[22rem] flex-col gap-2 overflow-y-auto', children: value.groups.map((group, groupIndex) => (_jsxs("div", { children: [groupIndex > 0 ? (_jsxs("div", { className: 'flex items-center gap-2 py-1.5', children: [_jsx("span", { className: 'h-px flex-1 bg-border' }), _jsx("span", { className: 'rounded-full border border-border bg-muted px-2 py-0.5 text-caption font-bold uppercase tracking-wider text-muted-foreground', children: "or" }), _jsx("span", { className: 'h-px flex-1 bg-border' })] })) : null, _jsxs("div", { className: 'rounded-lg border border-border bg-muted/30 p-2', children: [_jsx("div", { className: 'flex flex-col gap-1.5', children: group.conditions.map((condition, conditionIndex) => (_jsxs("div", { className: 'flex items-center gap-1.5', children: [_jsx("span", { className: 'w-9 shrink-0 text-right text-caption font-semibold uppercase tracking-wide text-muted-foreground', children: conditionIndex === 0 ? 'Where' : 'and' }), _jsx(NativeSelect, { size: 'sm', "aria-label": 'Column', className: 'min-w-0 flex-1', wrapperClassName: 'min-w-0 flex-1', value: condition.column, options: columns.map((c) => ({ value: c.key, label: c.label })), onChange: (e) => patchGroup(group.id, (list) => list.map((c) => (c.id === condition.id ? { ...c, column: e.target.value } : c))) }), _jsx(NativeSelect, { size: 'sm', "aria-label": 'Condition', className: 'min-w-0', wrapperClassName: 'w-40 shrink-0', value: condition.op, options: OP_OPTIONS, onChange: (e) => patchGroup(group.id, (list) => list.map((c) => c.id === condition.id ? { ...c, op: e.target.value } : c)) }), VALUELESS_OPS.has(condition.op) ? (_jsx("span", { "aria-hidden": true, className: 'w-36 shrink-0' })) : (_jsx(Input, { "aria-label": 'Value', className: 'h-8 w-36 shrink-0', value: condition.value, placeholder: 'value', onChange: (e) => patchGroup(group.id, (list) => list.map((c) => (c.id === condition.id ? { ...c, value: e.target.value } : c))) })), _jsx("button", { 
+                                                    // guardrails-ignore no-raw-action-button: removes a filter row, mutates no record.
+                                                    type: 'button', "aria-label": `Remove condition ${conditionIndex + 1}`, onClick: () => {
+                                                        const remaining = group.conditions.filter((c) => c.id !== condition.id);
+                                                        // Removing a group's last condition removes the GROUP —
+                                                        // an empty box with an OR rule above it is a dead end
+                                                        // the reader then has to clean up by hand.
+                                                        onChange(remaining.length > 0
+                                                            ? {
+                                                                groups: value.groups.map((g) => g.id === group.id ? { ...g, conditions: remaining } : g),
+                                                            }
+                                                            : { groups: value.groups.filter((g) => g.id !== group.id) });
+                                                    }, className: 'shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', children: _jsx(X, { className: 'size-4' }) })] }, condition.id))) }), _jsxs("button", { 
+                                        // guardrails-ignore no-raw-action-button: adds a filter row, mutates no record.
+                                        type: 'button', onClick: () => patchGroup(group.id, (list) => [...list, newCondition(firstColumn)]), className: cn('mt-1.5 inline-flex items-center gap-1 rounded px-1.5 py-1 text-caption font-semibold uppercase tracking-wide', 'text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: [_jsx(Plus, { className: 'size-3' }), " And"] })] })] }, group.id))) }), _jsx("div", { className: cn('flex items-center justify-end border-t border-border pt-2', className), children: _jsx(Button, { size: 'sm', variant: 'ghost', leftIcon: _jsx(Plus, {}), tooltip: value.groups.length === 0
+                            ? 'Add the first condition'
+                            : 'Match EITHER this set of conditions or a new one', onClick: () => onChange({ groups: [...value.groups, newGroup(firstColumn)] }), children: value.groups.length === 0 ? 'Add a condition' : 'Or…' }) })] }) }));
+}
+//# sourceMappingURL=TableFilterBuilder.js.map

package/dist/react/components/DataTable/TableFilterBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterBuilder.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/TableFilterBuilder.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/DataTable/TableViewToggle.d.ts

@@ -0,0 +1,22 @@
+import type { TableViewMode } from './types';
+export interface TableViewToggleProps {
+    value: TableViewMode;
+    onChange: (mode: TableViewMode) => void;
+    className?: string;
+}
+/**
+ * Rows ⇄ cards, for {@link DataTable}'s `viewMode`.
+ *
+ * Belongs in the toolbar's `extraActions`, which is the slot `TableToolbar`
+ * already documents as being for exactly this ("a view-mode toggle"). It is a
+ * separate component from the table for one reason: the toolbar is the caller's
+ * to compose, and a table that started rendering its own control would either
+ * duplicate the caller's toolbar or dictate its layout.
+ *
+ * 🔴 It is icon+label, not icon-only. `DESIGN.md` §5 wants a 44px tap target on
+ * a phone and §3 wants contrast; a bare pair of glyphs is the shape that reads
+ * as decoration and gets ignored — the owner's complaint about not being able
+ * to tell what a control does is the same complaint one level down.
+ */
+export declare function TableViewToggle({ value, onChange, className }: TableViewToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=TableViewToggle.d.ts.map

package/dist/react/components/DataTable/TableViewToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableViewToggle.d.ts","sourceRoot":"","sources":["../../../../src/react/components/DataTable/TableViewToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,+BA8BnF"}

package/dist/react/components/DataTable/TableViewToggle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGrid, Rows3 } from 'lucide-react';
+import { SegmentedControl } from '../SegmentedControl';
+/**
+ * Rows ⇄ cards, for {@link DataTable}'s `viewMode`.
+ *
+ * Belongs in the toolbar's `extraActions`, which is the slot `TableToolbar`
+ * already documents as being for exactly this ("a view-mode toggle"). It is a
+ * separate component from the table for one reason: the toolbar is the caller's
+ * to compose, and a table that started rendering its own control would either
+ * duplicate the caller's toolbar or dictate its layout.
+ *
+ * 🔴 It is icon+label, not icon-only. `DESIGN.md` §5 wants a 44px tap target on
+ * a phone and §3 wants contrast; a bare pair of glyphs is the shape that reads
+ * as decoration and gets ignored — the owner's complaint about not being able
+ * to tell what a control does is the same complaint one level down.
+ */
+export function TableViewToggle({ value, onChange, className }) {
+    return (_jsx(SegmentedControl, { className: className, "aria-label": 'View as', value: value, onChange: onChange, size: 'sm', options: [
+            {
+                value: 'table',
+                label: (_jsxs("span", { className: 'inline-flex items-center gap-1.5', children: [_jsx(Rows3, { size: 14, "aria-hidden": true }), "Rows"] })),
+            },
+            {
+                value: 'card',
+                label: (_jsxs("span", { className: 'inline-flex items-center gap-1.5', children: [_jsx(LayoutGrid, { size: 14, "aria-hidden": true }), "Cards"] })),
+            },
+        ] }));
+}
+//# sourceMappingURL=TableViewToggle.js.map

package/dist/react/components/DataTable/TableViewToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableViewToggle.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/TableViewToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AASvD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAwB;IAClF,OAAO,CACL,KAAC,gBAAgB,IACf,SAAS,EAAE,SAAS,gBACT,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,OAAO;gBACd,KAAK,EAAE,CACL,gBAAM,SAAS,EAAC,kCAAkC,aAChD,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,wBAAgB,YAE1B,CACR;aACF;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,KAAK,EAAE,CACL,gBAAM,SAAS,EAAC,kCAAkC,aAChD,KAAC,UAAU,IAAC,IAAI,EAAE,EAAE,wBAAgB,aAE/B,CACR;aACF;SACF,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/react/components/DataTable/Toolbar.d.ts

@@ -7,19 +7,38 @@ export interface TableToolbarProps<TRow> {
     searchPlaceholder?: string;
     /** Column-visibility menu. Default: true. */
     enableColumnVisibility?: boolean;
+    /** The `(A and B) or (C and D)` builder. Default: true. */
+    enableFilterBuilder?: boolean;
+    /** The dismissable sort-key chips. Default: true. */
+    enableSortStack?: boolean;
     onImport?: () => void;
     onExport?: () => void;
     /** Opens the record `Drawer` in create mode. */
     onAdd?: () => void;
     addLabel?: string;
-    /** Extra controls rendered next to the search box (e.g. a view-mode toggle). */
+    /** Extra controls rendered next to the search box (e.g. an app-specific filter). */
     extraActions?: ReactNode;
 }
 /**
- * The table toolbar: a debounce-free global search box (bound straight to TanStack's
- * global filter — single source of truth, no shadow state), the column-visibility menu,
- * and import/export/add actions. Pass it to `DataTable`'s `toolbar` render-prop so it
- * receives the live `table` instance.
+ * The table toolbar — ONE line, as DESIGN.md §2 requires: filters and view state
+ * left/centre, actions far right, never a second row.
+ *
+ * What sits on it, left to right: the search box with its use-time scope control
+ * ({@link SearchBox}), the filter builder ({@link TableFilterBuilder}), the sort stack
+ * ({@link SortStack}), anything the caller adds, then — right-aligned — the
+ * rows ⇄ cards toggle, the column menu, and import/export/add.
+ *
+ * 🔴 Everything but `onAdd`/`onImport`/`onExport` comes off the TABLE, through
+ * `table.options.meta.cbControls` ({@link DataTableControls}), and that is what
+ * makes this work for the tables that already exist. There are dozens of
+ * `toolbar={(table) => <TableToolbar table={table} onAdd={…} />}` call sites
+ * across ~17 consumer repos; had the new controls been props, every one of them
+ * would need editing before the owner could search a subset of columns anywhere.
+ * A caller composes its toolbar exactly as before and gets the capabilities.
+ *
+ * A table that renders no toolbar of its own gets this one anyway — `DataTable`
+ * renders it when `toolbar` is absent and `searchable` is not `false`. That is
+ * the *"present by DEFAULT, opted out of"* half of the owner's search request.
  */
-export declare function TableToolbar<TRow>({ table, enableSearch, searchPlaceholder, enableColumnVisibility, onImport, onExport, onAdd, addLabel, extraActions, }: TableToolbarProps<TRow>): import("react").JSX.Element;
+export declare function TableToolbar<TRow>({ table, enableSearch, searchPlaceholder, enableColumnVisibility, enableFilterBuilder, enableSortStack, onImport, onExport, onAdd, addLabel, extraActions, }: TableToolbarProps<TRow>): import("react").JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

package/dist/react/components/DataTable/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/react/components/DataTable/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,EACjC,KAAK,EACL,YAAmB,EACnB,iBAA6B,EAC7B,sBAA6B,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,YAAY,GACb,EAAE,iBAAiB,CAAC,IAAI,CAAC,+BA4CzB"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/react/components/DataTable/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,EACjC,KAAK,EACL,YAAmB,EACnB,iBAAiB,EACjB,sBAA6B,EAC7B,mBAA0B,EAC1B,eAAsB,EACtB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,YAAY,GACb,EAAE,iBAAiB,CAAC,IAAI,CAAC,+BAiFzB"}

package/dist/react/components/DataTable/Toolbar.js

@@ -1,17 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Download, Plus, Search, Upload } from 'lucide-react';
+import { Download, Plus, Upload } from 'lucide-react';
 import { Button } from '../Button';
-import { Input } from '../Input';
 import { Cluster, Split } from '../layout';
+import { SearchBox } from './SearchBox';
+import { SortStack } from './SortStack';
+import { TableFilterBuilder } from './TableFilterBuilder';
+import { TableViewToggle } from './TableViewToggle';
 import { ViewOptionsMenu } from './ViewOptionsMenu';
 /**
- * The table toolbar: a debounce-free global search box (bound straight to TanStack's
- * global filter — single source of truth, no shadow state), the column-visibility menu,
- * and import/export/add actions. Pass it to `DataTable`'s `toolbar` render-prop so it
- * receives the live `table` instance.
+ * The table toolbar — ONE line, as DESIGN.md §2 requires: filters and view state
+ * left/centre, actions far right, never a second row.
+ *
+ * What sits on it, left to right: the search box with its use-time scope control
+ * ({@link SearchBox}), the filter builder ({@link TableFilterBuilder}), the sort stack
+ * ({@link SortStack}), anything the caller adds, then — right-aligned — the
+ * rows ⇄ cards toggle, the column menu, and import/export/add.
+ *
+ * 🔴 Everything but `onAdd`/`onImport`/`onExport` comes off the TABLE, through
+ * `table.options.meta.cbControls` ({@link DataTableControls}), and that is what
+ * makes this work for the tables that already exist. There are dozens of
+ * `toolbar={(table) => <TableToolbar table={table} onAdd={…} />}` call sites
+ * across ~17 consumer repos; had the new controls been props, every one of them
+ * would need editing before the owner could search a subset of columns anywhere.
+ * A caller composes its toolbar exactly as before and gets the capabilities.
+ *
+ * A table that renders no toolbar of its own gets this one anyway — `DataTable`
+ * renders it when `toolbar` is absent and `searchable` is not `false`. That is
+ * the *"present by DEFAULT, opted out of"* half of the owner's search request.
  */
-export function TableToolbar({ table, enableSearch = true, searchPlaceholder = 'Search…', enableColumnVisibility = true, onImport, onExport, onAdd, addLabel = 'Add', extraActions, }) {
-    const globalFilter = table.getState().globalFilter ?? '';
-    return (_jsxs(Split, { className: 'gap-2 border-b border-border px-2 py-2', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 items-center gap-2', children: [enableSearch ? (_jsxs("div", { className: 'relative max-w-xs flex-1', children: [_jsx(Search, { className: '-translate-y-1/2 pointer-events-none absolute top-1/2 left-2.5 size-4 text-muted-foreground', "aria-hidden": true }), _jsx(Input, { type: 'search', "aria-label": 'Search', value: globalFilter, onChange: (e) => table.setGlobalFilter(e.target.value), placeholder: searchPlaceholder, className: 'h-9 pl-8' })] })) : null, extraActions] }), _jsxs(Cluster, { gap: 2, children: [enableColumnVisibility ? _jsx(ViewOptionsMenu, { table: table }) : null, onImport ? (_jsx(Button, { size: 'sm', variant: 'ghost', onClick: onImport, leftIcon: _jsx(Upload, {}), children: "Import" })) : null, onExport ? (_jsx(Button, { size: 'sm', variant: 'ghost', onClick: onExport, leftIcon: _jsx(Download, {}), children: "Export" })) : null, onAdd ? (_jsx(Button, { size: 'sm', variant: 'primary', onClick: onAdd, leftIcon: _jsx(Plus, {}), children: addLabel })) : null] })] }));
+export function TableToolbar({ table, enableSearch = true, searchPlaceholder, enableColumnVisibility = true, enableFilterBuilder = true, enableSortStack = true, onImport, onExport, onAdd, addLabel = 'Add', extraActions, }) {
+    const controls = table.options.meta?.cbControls;
+    // 🔴 `controls.searchText`, not `getState().globalFilter` — that state now
+    // carries the text AND the scope as one value (see `TableSearchState`), so
+    // reading it as a string would put `[object Object]` in the box. The fallback
+    // covers a table instance built by hand, outside `DataTable`.
+    const searchText = controls?.searchText ??
+        (typeof table.getState().globalFilter === 'string' ? table.getState().globalFilter : '');
+    return (_jsxs(Split, { className: 'gap-2 border-b border-border px-2 py-2', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 flex-wrap items-center gap-2', children: [enableSearch ? (_jsx(SearchBox, { value: searchText, onChange: (value) => controls ? controls.setSearchText(value) : table.setGlobalFilter(value), placeholder: searchPlaceholder, columns: controls?.searchColumns ?? [], scope: controls?.searchScope ?? null, onScopeChange: (scope) => controls?.setSearchScope(scope) })) : null, enableFilterBuilder && controls ? (_jsx(TableFilterBuilder, { columns: controls.filterColumns, value: controls.filterQuery, onChange: controls.setFilterQuery })) : null, enableSortStack && controls ? (_jsx(SortStack, { sorting: controls.sorting, labelOf: controls.labelOf, onToggleDirection: controls.toggleSortDirection, onRemove: controls.removeSortKey, onClear: controls.clearSorting })) : null, extraActions] }), _jsxs(Cluster, { gap: 2, children: [controls?.viewMode && controls.setViewMode ? (_jsx(TableViewToggle, { value: controls.viewMode, onChange: controls.setViewMode })) : null, enableColumnVisibility ? _jsx(ViewOptionsMenu, { table: table }) : null, onImport ? (_jsx(Button, { size: 'sm', variant: 'ghost', onClick: onImport, leftIcon: _jsx(Upload, {}), tooltip: 'Import', children: "Import" })) : null, onExport ? (_jsx(Button, { size: 'sm', variant: 'ghost', onClick: onExport, leftIcon: _jsx(Download, {}), tooltip: 'Export', children: "Export" })) : null, onAdd ? (_jsx(Button, { size: 'sm', variant: 'primary', onClick: onAdd, leftIcon: _jsx(Plus, {}), tooltip: addLabel, children: addLabel })) : null] })] }));
 }
 //# sourceMappingURL=Toolbar.js.map

package/dist/react/components/DataTable/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/Toolbar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAkBpD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAO,EACjC,KAAK,EACL,YAAY,GAAG,IAAI,EACnB,iBAAiB,GAAG,SAAS,EAC7B,sBAAsB,GAAG,IAAI,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,YAAY,GACY;IACxB,MAAM,YAAY,GAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAmC,IAAI,EAAE,CAAC;IAEjF,OAAO,CACL,MAAC,KAAK,IAAC,SAAS,EAAC,wCAAwC,aACvD,eAAK,SAAS,EAAC,wCAAwC,aACpD,YAAY,CAAC,CAAC,CAAC,CACd,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,MAAM,IACL,SAAS,EAAC,6FAA6F,wBAEvG,EACF,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAC,UAAU,GACpB,IACE,CACP,CAAC,CAAC,CAAC,IAAI,EACP,YAAY,IACT,EACN,MAAC,OAAO,IAAC,GAAG,EAAE,CAAC,aACZ,sBAAsB,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,EACjE,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAC,MAAM,KAAG,uBAEhE,CACV,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAC,QAAQ,KAAG,uBAElE,CACV,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAC,IAAI,KAAG,YACnE,QAAQ,GACF,CACV,CAAC,CAAC,CAAC,IAAI,IACA,IACJ,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/Toolbar.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/DataTable/ViewOptionsMenu.d.ts

@@ -4,9 +4,20 @@ export interface ViewOptionsMenuProps<TRow> {
     label?: string;
 }
 /**
- * Column-visibility toggles on the portal-based {@link DropdownMenu} (task 05/06) — never
- * clipped by the table's scroll container. Each hideable column is a checkbox item bound
- * to TanStack's `columnVisibility` state, so toggling one updates the table immediately.
+ * Column visibility, with **select all / deselect all** — unit
+ * `45-cursedbelt-tables` item 2.
+ *
+ * 🔴 It was a {@link DropdownMenu} and is now a {@link Popover} around the
+ * shared {@link ColumnChecklist}, for one measurable reason: a menu closes on
+ * every item click. Hiding six of an eleven-column table meant opening the menu
+ * six times, which is why "deselect all, then pick the three I want" is the
+ * shape people actually ask for — and it is unusable when each pick costs a
+ * re-open. The checklist is the SAME component the search-scope control uses
+ * (item 6 asks for it in the owner's own word: *"the same select-all /
+ * deselect-all column list"*), so the two can never drift apart.
+ *
+ * An `alwaysVisible` column has `getCanHide() === false` and never appears —
+ * offering a toggle that refuses is worse than not offering one.
  */
 export declare function ViewOptionsMenu<TRow>({ table, label }: ViewOptionsMenuProps<TRow>): import("react").JSX.Element | null;
 //# sourceMappingURL=ViewOptionsMenu.d.ts.map

package/dist/react/components/DataTable/ViewOptionsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewOptionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/react/components/DataTable/ViewOptionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAKnD,MAAM,WAAW,oBAAoB,CAAC,IAAI;IACxC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAiB,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,sCAoB7F"}
+{"version":3,"file":"ViewOptionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/react/components/DataTable/ViewOptionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAOnD,MAAM,WAAW,oBAAoB,CAAC,IAAI;IACxC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAiB,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,sCAoD7F"}

package/dist/react/components/DataTable/ViewOptionsMenu.js

@@ -1,21 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Columns3 } from 'lucide-react';
+import { useState } from 'react';
 import { Button } from '../Button';
-import { DropdownMenu } from '../DropdownMenu';
+import { Popover } from '../Popover';
+import { ColumnChecklist } from './ColumnChecklist';
 /**
- * Column-visibility toggles on the portal-based {@link DropdownMenu} (task 05/06) — never
- * clipped by the table's scroll container. Each hideable column is a checkbox item bound
- * to TanStack's `columnVisibility` state, so toggling one updates the table immediately.
+ * Column visibility, with **select all / deselect all** — unit
+ * `45-cursedbelt-tables` item 2.
+ *
+ * 🔴 It was a {@link DropdownMenu} and is now a {@link Popover} around the
+ * shared {@link ColumnChecklist}, for one measurable reason: a menu closes on
+ * every item click. Hiding six of an eleven-column table meant opening the menu
+ * six times, which is why "deselect all, then pick the three I want" is the
+ * shape people actually ask for — and it is unusable when each pick costs a
+ * re-open. The checklist is the SAME component the search-scope control uses
+ * (item 6 asks for it in the owner's own word: *"the same select-all /
+ * deselect-all column list"*), so the two can never drift apart.
+ *
+ * An `alwaysVisible` column has `getCanHide() === false` and never appears —
+ * offering a toggle that refuses is worse than not offering one.
  */
 export function ViewOptionsMenu({ table, label = 'Columns' }) {
+    const [open, setOpen] = useState(false);
     const columns = table.getAllColumns().filter((c) => c.getCanHide());
     if (!columns.length)
         return null;
-    return (_jsx(DropdownMenu, { align: 'end', trigger: _jsx(Button, { size: 'sm', variant: 'ghost', leftIcon: _jsx(Columns3, {}), children: label }), items: columns.map((col) => ({
-            key: col.id,
-            label: col.columnDef.meta?.label ?? col.id,
-            checked: col.getIsVisible(),
-            onClick: () => col.toggleVisibility(),
-        })) }));
+    const hiddenCount = columns.filter((c) => !c.getIsVisible()).length;
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, align: 'end', arrow: false, trigger: _jsxs(Button, { size: 'sm', variant: hiddenCount > 0 ? 'secondary' : 'ghost', leftIcon: _jsx(Columns3, {}), tooltip: hiddenCount > 0 ? `${hiddenCount} column(s) hidden` : label, children: [label, hiddenCount > 0 ? (_jsx("span", { className: 'ml-1.5 rounded-full bg-primary px-1.5 py-0.5 text-caption font-bold text-primary-foreground', children: hiddenCount })) : null] }), children: _jsxs("div", { className: 'flex flex-col gap-1.5', children: [_jsx("span", { className: 'cb-meta-label', children: "Columns" }), _jsx(ColumnChecklist, { "aria-label": 'Visible columns', selectAllLabel: 'Show all', selectNoneLabel: 'Hide all', items: columns.map((col) => ({
+                        key: col.id,
+                        label: col.columnDef.meta?.label ?? col.id,
+                        checked: col.getIsVisible(),
+                    })), onToggle: (key) => table.getColumn(key)?.toggleVisibility(), onSelectAll: () => table.toggleAllColumnsVisible(true), onSelectNone: () => {
+                        // Not `toggleAllColumnsVisible(false)`: that hides the pinned
+                        // (`alwaysVisible`) columns too in TanStack's implementation, and a
+                        // table with literally no columns is a blank rectangle the reader
+                        // then has to guess their way out of.
+                        for (const col of columns)
+                            col.toggleVisibility(false);
+                    } })] }) }));
 }
 //# sourceMappingURL=ViewOptionsMenu.js.map

package/dist/react/components/DataTable/ViewOptionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewOptionsMenu.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/ViewOptionsMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAO,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,EAA8B;IAC5F,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAC,KAAK,EACX,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAC,QAAQ,KAAG,YACrD,KAAK,GACC,EAEX,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,EAAE,GAAG,CAAC,EAAE;YACX,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,IAAI,GAAG,CAAC,EAAE;YAC1C,OAAO,EAAE,GAAG,CAAC,YAAY,EAAE;YAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,gBAAgB,EAAE;SACtC,CAAC,CAAC,GACH,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ViewOptionsMenu.js","sourceRoot":"","sources":["../../../../src/react/components/DataTable/ViewOptionsMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,eAAe,CAAO,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,EAA8B;IAC5F,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC;IAEpE,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EACrB,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,KAAK,EACZ,OAAO,EACL,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EAChD,QAAQ,EAAE,KAAC,QAAQ,KAAG,EACtB,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,mBAAmB,CAAC,CAAC,CAAC,KAAK,aAEnE,KAAK,EACL,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,eAAM,SAAS,EAAC,6FAA6F,YAC1G,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,IACD,YAGX,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAM,SAAS,EAAC,eAAe,wBAAe,EAC9C,KAAC,eAAe,kBACH,iBAAiB,EAC5B,cAAc,EAAC,UAAU,EACzB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;wBAC3B,GAAG,EAAE,GAAG,CAAC,EAAE;wBACX,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,IAAI,GAAG,CAAC,EAAE;wBAC1C,OAAO,EAAE,GAAG,CAAC,YAAY,EAAE;qBAC5B,CAAC,CAAC,EACH,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,gBAAgB,EAAE,EAC3D,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,IAAI,CAAC,EACtD,YAAY,EAAE,GAAG,EAAE;wBACjB,8DAA8D;wBAC9D,oEAAoE;wBACpE,kEAAkE;wBAClE,sCAAsC;wBACtC,KAAK,MAAM,GAAG,IAAI,OAAO;4BAAE,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBACzD,CAAC,GACD,IACE,GACE,CACX,CAAC;AACJ,CAAC"}

package/dist/react/components/DataTable/cells/CellRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/DataTable/cells/CellRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAKpD;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,IAAI,CAAC;IACV,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAE3F;AAoJD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAExF;AAED,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAEnE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,+BAGhG"}
+{"version":3,"file":"CellRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/react/components/DataTable/cells/CellRenderer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAOpD;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,IAAI,CAAC;IACV,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAE3F;AA2RD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAExF;AAED,2FAA2F;AAC3F,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAEnE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,+BAGhG"}

package/dist/react/components/DataTable/cells/CellRenderer.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatDateLocalSafe } from 'cwip/date';
+import { truncateMiddle } from 'cwip/string';
 import { Check, Paperclip } from 'lucide-react';
+import { cn } from '../../../lib/cn';
 import { Badge } from '../../Badge';
+import { STATUS_ATTENTION_TONE } from '../../StatusPill';
+import { CopyButton } from '../../CopyButton';
 import { Cluster } from '../../layout';
+import { resolveColumnAlign } from '../types';
 import { CodeCell } from './CodeCell';
 import { LinkCell } from './LinkCell';
 import { PasswordCell } from './PasswordCell';
+import { TruncatedText } from '../../TruncatedText';
 /* -------------------------------------------------------------------------- */
 /* Asset URL resolution (image/file)                                          */
 /* -------------------------------------------------------------------------- */
@@ -28,14 +35,7 @@ const optionLabel = (options, value) => {
     return typeof opt.label === 'string' ? opt.label : value;
 };
 /** Locale date, but never the dreaded "Invalid Date" — fall back to the raw string. */
-const formatDate = (value, withTime) => {
-    if (value == null || value === '')
-        return '';
-    const d = new Date(String(value));
-    if (Number.isNaN(d.getTime()))
-        return String(value);
-    return withTime ? d.toLocaleString() : d.toLocaleDateString();
-};
+const formatDate = (value, withTime) => formatDateLocalSafe(value, withTime ? { hour: 'numeric', minute: '2-digit' } : {});
 /* -------------------------------------------------------------------------- */
 /* Base registry                                                              */
 /* -------------------------------------------------------------------------- */
@@ -57,6 +57,32 @@ const BASE_CELL_REGISTRY = {
         const text = col.displayValue?.(value, row) ?? String(value);
         return _jsx("span", { className: 'tabular-nums', children: text });
     },
+    // A numeric magnitude with an embedded track bar — the spark-bar matrix cell
+    // (design manual: merge the ranking chart INTO the table so proportions and raw
+    // values share one asset instead of a chart + a card row repeating each other).
+    // `col.meta`: `max` (number) or `maxKey` (row field) sets the scale ceiling —
+    // give every row the SAME ceiling (the column max) so bar lengths compare;
+    // `barClassName` (string) or `barClassKey` (row field) recolors the fill;
+    // `showText: false` renders the bar alone. Text comes from `displayValue`.
+    bar: ({ col, value, row }) => {
+        if (value == null || value === '')
+            return _jsx(Empty, {});
+        const n = Number(value);
+        if (!Number.isFinite(n))
+            return _jsx(Empty, {});
+        const meta = col.meta ?? {};
+        const rowRec = row;
+        const maxRaw = typeof meta.maxKey === 'string' ? Number(rowRec[meta.maxKey]) : Number(meta.max);
+        const max = Number.isFinite(maxRaw) && maxRaw > 0 ? maxRaw : n > 0 ? n : 1;
+        const pct = Math.max(0, Math.min(100, (n / max) * 100));
+        const text = col.displayValue?.(value, row) ?? String(value);
+        const fillClass = typeof meta.barClassKey === 'string' && typeof rowRec[meta.barClassKey] === 'string'
+            ? rowRec[meta.barClassKey]
+            : typeof meta.barClassName === 'string'
+                ? meta.barClassName
+                : undefined;
+        return (_jsxs("div", { className: cn('flex min-w-0 flex-col gap-1', resolveColumnAlign(col) === 'right' && 'items-end'), children: [meta.showText === false ? null : _jsx("span", { className: 'tabular-nums', children: text }), _jsx("div", { className: 'h-1 w-full max-w-36 overflow-hidden rounded-full bg-muted', "aria-hidden": true, children: _jsx("div", { className: cn('h-full rounded-full bg-accent-solid', fillClass), style: { width: `${pct}%` } }) })] }));
+    },
     boolean: ({ value }) => value ? _jsx(Check, { className: 'size-4 text-success', "aria-label": 'Yes' }) : _jsx(Empty, {}),
     date: ({ value }) => {
         const text = formatDate(value, false);
@@ -99,6 +125,81 @@ const BASE_CELL_REGISTRY = {
     password: ({ value }) => _jsx(PasswordCell, { value: value == null ? '' : String(value) }),
     code: ({ col, value }) => (_jsx(CodeCell, { value: value == null ? '' : String(value), language: typeof col.meta?.language === 'string' ? col.meta.language : undefined })),
     url: ({ value }) => (value ? _jsx(LinkCell, { href: String(value) }) : _jsx(Empty, {})),
+    // Status/enum value as a tone-mapped pill — `col.meta.tones` maps raw values to
+    // Badge tones (e.g. { failed: 'error', running: 'sky' }); `col.meta.labels` maps
+    // raw values to display text. Unmapped values render a `default` badge, so a new
+    // enum member degrades to a plain pill instead of vanishing.
+    //
+    // `col.meta.quiet: true` flips that default for data-dense tables (design manual:
+    // "when everything is highlighted, nothing is highlighted"): only values named in
+    // `tones` earn a colored pill (the attention states — running/failed/…); everything
+    // else renders as plain muted text, so static states and categories stop shouting.
+    badge: ({ col, value, row }) => {
+        if (value == null || value === '')
+            return _jsx(Empty, {});
+        const v = String(value);
+        const tones = (col.meta?.tones ?? {});
+        const labels = (col.meta?.labels ?? {});
+        const label = col.displayValue?.(value, row) ?? labels[v] ?? v;
+        if (col.meta?.quiet === true && tones[v] === undefined) {
+            return _jsx("span", { className: 'text-sm text-muted-foreground', children: label });
+        }
+        return _jsx(Badge, { tone: tones[v] ?? 'default', children: label });
+    },
+    // Lifecycle status with the ATTENTION RATION built in — the default for any status
+    // column. Reads the shared {@link STATUS_ATTENTION_TONE} vocabulary (live=green,
+    // broken=red, held=amber), so every app's table agrees on which states shout and
+    // which stay plain muted text — no per-app tone maps, no per-column opt-in.
+    // `col.meta.tones` extends/overrides the shared map for app-specific states;
+    // `col.meta.labels`/`displayValue` rename raw values as in `badge`.
+    status: ({ col, value, row }) => {
+        if (value == null || value === '')
+            return _jsx(Empty, {});
+        const v = String(value);
+        const overrides = (col.meta?.tones ?? {});
+        const labels = (col.meta?.labels ?? {});
+        const label = col.displayValue?.(value, row) ?? labels[v] ?? v;
+        const tone = overrides[v] ?? STATUS_ATTENTION_TONE[v];
+        if (tone === undefined)
+            return _jsx("span", { className: 'text-sm text-muted-foreground', children: label });
+        return _jsx(Badge, { tone: tone, children: label });
+    },
+    // The anchor-column pattern for system entities (design manual §3: "sub-tier the
+    // data"): a human-readable primary line over a compact machine-identifier secondary
+    // line, both truncating cleanly inside the column track instead of stretching it.
+    //   value            → primary line (through `displayValue` when present)
+    //   meta.tooltipKey  → row field revealed on hover (default: the primary text) —
+    //                      point it at the raw system string the primary was derived from
+    //   meta.subKey      → row field for the secondary line (omit for a single line)
+    //   meta.subMono     → secondary renders monospace, mid-truncated (hash convention)
+    //   meta.subCopy     → secondary gains a CopyButton (never fires the row click)
+    //   meta.subMaxLength→ mid-truncation budget for a mono secondary (default 24)
+    'title-sub': ({ col, value, row }) => {
+        const primary = col.displayValue?.(value, row) ?? (value == null ? '' : String(value));
+        if (!primary)
+            return _jsx(Empty, {});
+        const tooltipKey = typeof col.meta?.tooltipKey === 'string' ? col.meta.tooltipKey : null;
+        const tooltip = tooltipKey ? String(row[tooltipKey] ?? primary) : primary;
+        const subKey = typeof col.meta?.subKey === 'string' ? col.meta.subKey : null;
+        const subRaw = subKey ? row[subKey] : null;
+        const sub = subRaw == null || subRaw === '' ? null : String(subRaw);
+        const subMono = col.meta?.subMono === true;
+        const subMax = typeof col.meta?.subMaxLength === 'number' ? col.meta.subMaxLength : 24;
+        return (_jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx(TruncatedText, { hint: tooltip, alwaysHint: tooltip !== primary, className: 'font-medium', children: primary }), sub ? (_jsxs("span", { className: 'flex min-w-0 items-center gap-1 text-xs text-muted-foreground', children: [_jsx(TruncatedText, { hint: sub, alwaysHint: subMono && truncateMiddle(sub, subMax) !== sub, className: cn(subMono && 'font-mono'), children: subMono ? truncateMiddle(sub, subMax) : sub }), col.meta?.subCopy === true ? (_jsx(CopyButton, { value: sub, confirmToast: false, stopPropagation: true, iconSize: 12, className: 'size-5' })) : null] })) : null] }));
+    },
+    // Long machine ids (task/attempt/commit hashes) — monospace, mid-string ellipsis
+    // (head + tail stay legible per the "tsk_01K…XETKJ" convention), the full value one
+    // hover away through the design system's Tooltip (never the native `title`, which
+    // the OS draws after a second and the owner's phone does not draw at all), and a
+    // copy affordance that never fires the row click.
+    'mono-id': ({ col, value }) => {
+        if (value == null || value === '')
+            return _jsx(Empty, {});
+        const v = String(value);
+        const max = typeof col.meta?.maxLength === 'number' ? col.meta.maxLength : 16;
+        const shown = truncateMiddle(v, max);
+        return (_jsxs("span", { className: 'inline-flex items-center gap-1', children: [_jsx(TruncatedText, { alwaysHint: shown !== v, hint: v, className: 'font-mono text-xs', children: shown }), _jsx(CopyButton, { value: v, confirmToast: false, stopPropagation: true, iconSize: 12, className: 'size-6' })] }));
+    },
     color: ({ value }) => {
         if (value == null || value === '')
             return _jsx(Empty, {});