@lerianstudio/sindarian-ui 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/enterprise/data-table/index.d.ts

@@ -1,13 +1,53 @@
-import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState } from '@tanstack/react-table';
+import { type ColumnDef, type OnChangeFn, type RowData, type RowSelectionState, type SortingState, type VisibilityState } from '@tanstack/react-table';
 import { type EmptyStateProps } from '../empty-state';
 /**
- * Per-column opt-in for ledger numeric alignment. Set `meta: { numeric: true }`
- * on a money/number `ColumnDef` and DataTable right-aligns both the header and
- * its body cells (mono tabular figures).
+ * Per-column channel into the cells DataTable renders on the consumer's behalf:
+ * how a column aligns, what classes it carries on head and body, and whether it
+ * renders its own `<td>` at all. The member names are frozen by plan
+ * 2026-09-21-console-simplification C9.
  */
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Ledger numeric treatment: right-aligns the header and its body cells and
+         * gives the body mono tabular figures. `align` overrides the alignment half
+         * on its own — the figures stay mono.
+         */
         numeric?: boolean;
+        /**
+         * Column alignment, header and body. Beats `numeric`'s implicit right, so a
+         * money column can read left or centre without losing its figure treatment.
+         * With `renderOwnCell` it reaches the header only — the body cell is the
+         * consumer's, and so is aligning it.
+         */
+        align?: 'left' | 'right' | 'center';
+        /**
+         * Extra classes on this column's `<th>`, merged AFTER the table-level
+         * `headClassName` so one column can override what the table set for all.
+         */
+        headerClassName?: string;
+        /**
+         * Extra classes on this column's body `<td>`, merged after the numeric and
+         * density treatments. IGNORED when `renderOwnCell` is set: there is no cell
+         * of the table's left to carry them. Use `headerClassName` for the `<th>`,
+         * which the table still owns either way.
+         */
+        className?: string;
+        /**
+         * The column's `cell` renderer emits its own `<td>`; DataTable renders it
+         * bare rather than wrapping it. The HEADER is still the table's `<th>` —
+         * nothing about owning a body cell makes a column own its header, and a
+         * table whose head and body disagree on cell count is broken markup.
+         *
+         * So the split is by element, not by column: the head still takes `align`,
+         * `numeric`, `headerClassName` and the declared width, because the `<th>`
+         * is the table's to style; the BODY takes none of them, because the `<td>`
+         * is the consumer's. A money column declaring `align: 'right'` therefore
+         * gets a right-aligned header and must right-align its own cell to match —
+         * leave the cell's alignment out and the figures sit under a heading that
+         * points somewhere else.
+         */
+        renderOwnCell?: boolean;
     }
 }
 /**
@@ -71,6 +111,35 @@ type SortingProps = {
     /** Controlled sort updater (TanStack `OnChangeFn`). */
     onSortingChange: OnChangeFn<SortingState>;
 };
+/**
+ * Column visibility is controlled but, deliberately, NOT a required pair — a
+ * departure from the two unions above, and not drift. Those two are unions
+ * because each has an `enable*` flag whose "on" state is meaningless without
+ * the controlled pair. TanStack has no enable flag for visibility: the model is
+ * always running, and the only shipped consumer passes STATE WITH NO UPDATER,
+ * because a separate dropdown owns the state on the page. Requiring the pair
+ * would refuse that usage.
+ *
+ * What the union does forbid is the updater ALONE: TanStack reads an
+ * `on[State]Change` callback as a declaration of controlled state, so a
+ * callback with no `columnVisibility` freezes visibility at its initial value
+ * while the callback keeps firing. Prop names frozen by plan
+ * 2026-09-21-console-simplification C9.
+ *
+ * Omit both and the table keeps its own visibility state, exactly as before.
+ */
+type ColumnVisibilityProps = {
+    /** Controlled column-visibility state (TanStack `VisibilityState`). */
+    columnVisibility: VisibilityState;
+    /**
+     * Controlled updater (TanStack `OnChangeFn`). Optional: a consumer may
+     * drive the state from outside the table entirely.
+     */
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+} | {
+    columnVisibility?: undefined;
+    onColumnVisibilityChange?: undefined;
+};
 type DataTableBaseProps<TData> = {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
@@ -117,7 +186,8 @@ type DataTableBaseProps<TData> = {
     /**
      * Extra classes merged onto every header cell, after the kit label voice —
      * so a caller can override the voice's size/tracking/color for one table
-     * without restating the cluster. Per-column alignment stays `meta.numeric`.
+     * without restating the cluster. Per column, `meta.headerClassName` merges
+     * after this one and `meta.align` / `meta.numeric` own the alignment.
      */
     headClassName?: string;
     /**
@@ -127,7 +197,7 @@ type DataTableBaseProps<TData> = {
      */
     footer?: React.ReactNode;
 };
-export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps;
-export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
+export type DataTableProps<TData> = DataTableBaseProps<TData> & RowSelectionProps<TData> & SortingProps & ColumnVisibilityProps;
+export declare function DataTable<TData>({ columns, data, loading, skeletonRows, loadingLabel, empty, getRowId, flush, density, enableRowSelection, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, onRowActivate, rowHref, className, headClassName, footer }: DataTableProps<TData>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/enterprise/data-table/index.d.ts.map

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

package/dist/enterprise/data-table/index.js

@@ -65,8 +65,21 @@ const empty_state_1 = require("../empty-state");
 const column_size_1 = require("./column-size");
 const SELECTION_COLUMN_ID = '__select__';
 const CHECKBOX_CLASS = 'accent-primary block size-4';
-/** Right-aligned mono treatment for `meta: { numeric: true }` columns. */
-const NUMERIC_CELL_CLASS = 'text-right font-mono tabular-nums';
+/** Figure treatment for `meta: { numeric: true }` columns; the alignment half
+ * lives in ALIGN_CELL_CLASS so `meta.align` can override one without the other. */
+const NUMERIC_FIGURE_CLASS = 'font-mono tabular-nums';
+/**
+ * Body-cell alignment, one class per direction rather than a single string with
+ * `text-right` baked in: an explicit `meta.align` has to beat `numeric` by
+ * choosing the class, not by out-ordering it — tailwind-merge resolving two
+ * conflicting alignment utilities by source order is not a contract worth
+ * relying on.
+ */
+const ALIGN_CELL_CLASS = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
 /**
  * Keydown events whose target sits inside one of these are never hijacked
  * by the row-level keyboard handler — Space in a checkbox and Enter on an
@@ -116,7 +129,7 @@ function createSelectionColumn(getLabel) {
         cell: ({ row }) => (0, jsx_runtime_1.jsx)(RowSelectionCheckbox, { row: row, getLabel: getLabel })
     };
 }
-function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, onRowActivate, rowHref, className, headClassName, footer }) {
+function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLabel = 'Loading table rows', empty, getRowId, flush = false, density = 'comfortable', enableRowSelection = false, rowSelection, onRowSelectionChange, getRowSelectionLabel, enableSorting = false, sorting, onSortingChange, columnVisibility, onColumnVisibilityChange, onRowActivate, rowHref, className, headClassName, footer }) {
     const tableColumns = (0, react_1.useMemo)(() => enableRowSelection
         ? [createSelectionColumn(getRowSelectionLabel), ...columns]
         : columns, [columns, enableRowSelection, getRowSelectionLabel]);
@@ -142,12 +155,33 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
         manualSorting: true,
         enableSorting,
         onSortingChange: enableSorting ? onSortingChange : undefined,
+        // ⛔ EACH VISIBILITY ENTRY IS GUARDED ON ITS OWN PROP, NEVER ON THE OTHER.
+        //
+        // TanStack merges options as `{...defaultOptions, ...options}` and state as
+        // `{...internalState, ...options.state}`, both plain spreads — so a key
+        // present and holding `undefined` OVERWRITES what it was meant to leave
+        // alone. `onColumnVisibilityChange: undefined` replaces the feature's own
+        // `makeStateUpdater`, and `setColumnVisibility` reads
+        // `options.onColumnVisibilityChange == null ? void 0 : ...`, so it (and
+        // every `column.toggleVisibility` behind it) becomes a silent no-op.
+        // `columnVisibility: undefined` replaces the table's initial `{}`, so a
+        // consumer reading the slice gets `undefined` instead of an empty object.
+        //
+        // Guarding the UPDATER on the STATE put that `undefined` back for the
+        // union's first arm — state with no updater, which is the shipped console
+        // usage, where a separate dropdown owns the state. A table that passes
+        // neither prop is uncontrolled, exactly as before.
+        ...(onColumnVisibilityChange !== undefined && { onColumnVisibilityChange }),
         state: {
             rowSelection: enableRowSelection ? (rowSelection ?? {}) : undefined,
-            sorting: enableSorting ? (sorting ?? []) : undefined
+            sorting: enableSorting ? (sorting ?? []) : undefined,
+            ...(columnVisibility !== undefined && { columnVisibility })
         }
     });
-    const colCount = tableColumns.length;
+    // Visible, not declared: the skeleton grid and the empty row's colSpan have
+    // to match the header the table actually rendered, and a hidden column is in
+    // `tableColumns` but in no `<th>`.
+    const colCount = table.getVisibleLeafColumns().length;
     const dataRows = table.getRowModel().rows;
     const rowCount = dataRows.length;
     // Compact density overrides only THIS table's cell padding (tailwind-merge
@@ -265,13 +299,13 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
                     : rowCount === 0
                         ? 'No rows'
                         : `${rowCount} rows` }), (0, jsx_runtime_1.jsxs)(table_1.Table, { "aria-busy": loading ? 'true' : undefined, children: [(0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
-                                const numeric = header.column.columnDef.meta?.numeric;
-                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: numeric ? 'right' : undefined, "aria-sort": header.isPlaceholder
+                                const meta = header.column.columnDef.meta;
+                                return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { align: meta?.align ?? (meta?.numeric ? 'right' : undefined), "aria-sort": header.isPlaceholder
                                         ? undefined
                                         : ariaSortFor(header.column), 
                                     // Only a column that DECLARED sizing gets an inline width;
                                     // everything else keeps the auto table layout it has today.
-                                    style: (0, column_size_1.readPreferredColumnSize)(header.column), className: (0, utils_1.cn)(typography_1.LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName), children: header.isPlaceholder
+                                    style: (0, column_size_1.readPreferredColumnSize)(header.column), className: (0, utils_1.cn)(typography_1.LABEL_VOICE_CLASS, headDensityClass, header.column.id === SELECTION_COLUMN_ID && 'w-10', headClassName, meta?.headerClassName), children: header.isPlaceholder
                                         ? null
                                         : (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id));
                             }) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: loading ? (Array.from({ length: skeletonRows }).map((_, rowIndex) => ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: Array.from({ length: colCount }).map((__, cellIndex) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: cellDensityClass, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, `skeleton-${rowIndex}-${cellIndex}`))) }, `skeleton-${rowIndex}`)))) : rowCount === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { className: "hover:bg-transparent", children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: colCount, className: "p-0", children: (0, jsx_runtime_1.jsx)(empty_state_1.EmptyState, { title: empty?.title ?? 'Nothing here yet', description: empty?.description, icon: empty?.icon, action: empty?.action, 
@@ -294,7 +328,18 @@ function DataTable({ columns, data, loading = false, skeletonRows = 8, loadingLa
                                 ? (event) => handleRowKeyDown(event, row, rowIndex)
                                 : undefined, className: keyboardNav ? ROW_FOCUS_CLASS : undefined, "data-state": enableRowSelection && row.getIsSelected()
                                 ? 'selected'
-                                : undefined, children: row.getVisibleCells().map((cell) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { style: (0, column_size_1.readPreferredColumnSize)(cell.column), className: (0, utils_1.cn)(cell.column.columnDef.meta?.numeric && NUMERIC_CELL_CLASS, cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10'), onClick: cell.column.id === SELECTION_COLUMN_ID
-                                    ? stopPropagation
-                                    : undefined, children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) }), footer ? (0, jsx_runtime_1.jsx)(table_1.TableFooter, { children: footer }) : null] })] }));
+                                : undefined, children: row.getVisibleCells().map((cell) => {
+                                const meta = cell.column.columnDef.meta;
+                                const content = (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext());
+                                // The column owns its `<td>`: render the consumer's cell bare.
+                                // The kit's selection column is built here and carries no
+                                // meta, so it can never take this path.
+                                if (meta?.renderOwnCell) {
+                                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: content }, cell.id);
+                                }
+                                const align = meta?.align ?? (meta?.numeric ? 'right' : undefined);
+                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { style: (0, column_size_1.readPreferredColumnSize)(cell.column), className: (0, utils_1.cn)(meta?.numeric && NUMERIC_FIGURE_CLASS, align && ALIGN_CELL_CLASS[align], cellDensityClass, cell.column.id === SELECTION_COLUMN_ID && 'w-10', meta?.className), onClick: cell.column.id === SELECTION_COLUMN_ID
+                                        ? stopPropagation
+                                        : undefined, children: content }, cell.id));
+                            }) }, row.id)))) }), footer ? (0, jsx_runtime_1.jsx)(table_1.TableFooter, { children: footer }) : null] })] }));
 }

package/dist/esm/components/form/select-field/index.d.ts

@@ -15,6 +15,20 @@ type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChil
     required?: boolean;
     /** Copy for the "nothing to pick" row. Defaults to "No options found." */
     emptyMessage?: string;
+    /**
+     * Rendered inside the trigger, before the value — where a filter bar wants
+     * its glyph. On the single select it shares one flex box with the value so
+     * the trigger keeps exactly two children; on the multi select the trigger
+     * already groups them. The node itself is passed through untouched, with
+     * no `aria-hidden`: the prop takes an arbitrary node, and hiding it from
+     * the accessibility tree on the caller's behalf would silence a node the
+     * caller may have made meaningful on purpose. The trigger is named by its
+     * label and its value, so the node passed here should be decorative.
+     *
+     * Spacing is the caller's: the kit adds no margin, because a gap here
+     * would double with the one every existing call site already carries.
+     */
+    leadingIcon?: ReactNode;
     /**
      * Placed on the field's own root box, merged with its spacing rather than
      * replacing it. The root is the element a parent grid positions, so
@@ -47,6 +61,6 @@ type SelectFieldModeProps = {
     onChange?: (value: string) => void;
 };
 export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
-export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
+export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, leadingIcon, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/select-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0LAmB9D,gBAAgB,CAAC,CAAC,CAAC,sBAgIrB,CAAA"}

package/dist/esm/components/form/select-field/index.js

@@ -1,22 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
 import { MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue } from '../../../components/ui/multiple-select/index.js';
 import { Select, SelectContent, SelectEmpty, SelectTrigger, SelectValue } from '../../../components/ui/select/index.js';
 import { cn } from '../../../lib/utils.js';
-export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
+export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', leadingIcon, className, onChange, ...others }) => {
     // The props union already pairs `multi` with the callback shape that branch
     // emits, but destructuring an intersection loses that correlation — TS sees
     // two unrelated callbacks. Both branches report through this one seam, each
     // with the payload its own union member declared.
     const emitChange = onChange;
+    /**
+     * ⛔ THE GLYPH AND THE VALUE ARE ONE FLEX CHILD, NEVER TWO.
+     *
+     * `.select-trigger` is `flex w-full items-center justify-between`, so a
+     * third child makes it split the free space into TWO gaps: on any trigger
+     * wider than its content — which is every filter bar — the selected value
+     * drifted to the middle of the box instead of sitting beside the glyph.
+     * Wrapped, the trigger is back to two children, content and chevron,
+     * whatever the caller passes.
+     *
+     * `min-w-0` keeps the value truncating: the wrapper is the flex item now,
+     * and a flex item never shrinks below its own min-content width. The
+     * trigger's `VALUE_OVERFLOW_CLASS` reaches through it by descendant
+     * selector.
+     *
+     * No `gap`: the prop's contract is that spacing is the caller's (the Tracer
+     * filter bars carry their own `mr-2`), and a kit gap would double with it.
+     *
+     * The MULTI trigger needs none of this — it already renders its children
+     * inside one `flex grow flex-wrap` box, so the icon already shares a parent
+     * with the value and the trigger root already has exactly two children.
+     * Wrapping there would put the selected-value badges in a non-wrapping row
+     * and stop the trigger growing to a second line.
+     */
+    const withLeadingIcon = (value) => leadingIcon ? (_jsxs("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
     const renderItem = (field) => {
         return (_jsxs(FormItem, { required: required, className: className, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, disabled: disabled, ...field, children: [_jsx(MultipleSelectTrigger, { readOnly: readOnly, children: _jsx(MultipleSelectValue, { placeholder: placeholder }) }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
+                    }, disabled: disabled, ...field, children: [_jsxs(MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, _jsx(MultipleSelectValue, { placeholder: placeholder })] }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: cn(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: _jsx(SelectValue, { placeholder: placeholder }) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: cn(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon(_jsx(SelectValue, { placeholder: placeholder })) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
     };
     if (!control) {
         // `value` undefined leaves Radix to keep its own state, so an uncontrolled

package/dist/esm/components/page/index.d.ts

@@ -1,4 +1,38 @@
 export declare function PageRoot({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 export declare function PageView({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
-export declare function PageContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export type PageContentProps = React.ComponentProps<'div'> & {
+    /**
+     * How much room the container spends on padding.
+     *
+     * `'default'` is 64px a side at every width, and it is what every consumer
+     * that does not ask for anything gets, class for class.
+     *
+     * `'compact'` adds 16px a side below `sm` (640px) and changes nothing above
+     * it. On a 390px phone the default spends 128px — a third of the screen —
+     * before the page has drawn anything: measured at 390 on ten Product Console
+     * screens across Midaz, Pix, Payments, Reporter, Tracer, Flowker and
+     * Settings, each was left with 262px of content, and the pages adding their
+     * own `px-24` inside it were down to 70px, which is where a transaction
+     * receipt's amount ran off its card.
+     *
+     * WHY `max-sm:p-4` AND NOT THE MOBILE-FIRST `p-4 sm:p-16`. A base `p-4`
+     * REPLACES `p-16` for every caller, and `sm:p-16` then re-imposes 64px at
+     * desktop on the pages that deliberately asked for something else — a
+     * full-bleed page would grow a 64px frame at 1440. `max-sm:` only ADDS a rule
+     * below `sm`, so every call site renders identically from 640px up, whatever
+     * padding it passes.
+     *
+     * HOW A CALLER OPTS OUT. Pass the phone value too: `className="p-0
+     * max-sm:p-0"`. `cn` is tailwind-merge, so the caller's `max-sm:p-0` replaces
+     * this rule rather than stacking with it.
+     *
+     * AND AN AXIS PADDING HAS TO REPEAT ITSELF: `className="px-6 max-sm:px-6"`,
+     * never `px-6` alone. tailwind-merge does not treat `max-sm:p-4` and `px-6`
+     * as the same group, so it drops neither, and CSS then gives the media-query
+     * rule the last word — a lone `px-6` is silently 16px on both axes on a
+     * phone.
+     */
+    padding?: 'default' | 'compact';
+};
+export declare function PageContent({ className, padding, ...props }: PageContentProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAelB"}

package/dist/esm/components/page/index.js

@@ -6,6 +6,10 @@ export function PageRoot({ className, ...props }) {
 export function PageView({ className, ...props }) {
     return (_jsx("div", { "data-slot": "page-view", className: cn('flex min-h-0 flex-1', className), ...props }));
 }
-export function PageContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "page-content", className: cn('flex grow flex-col overflow-y-auto p-16', className), ...props }));
+export function PageContent({ className, padding = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "page-content", 
+        // Order is the contract, not a style: `className` last is what lets a
+        // caller's `p-0` beat `p-16` and a caller's `max-sm:p-0` replace the
+        // compact rule instead of stacking with it.
+        className: cn('flex grow flex-col overflow-y-auto p-16', padding === 'compact' && 'max-sm:p-4', className), ...props }));
 }

package/dist/esm/components/table/id-table-cell.d.ts

@@ -6,6 +6,14 @@ export type IdTableCellProps = Omit<React.ComponentProps<typeof TableCell>, 'onC
     head?: number;
     /** Characters kept from the end of the id. */
     tail?: number;
+    /**
+     * Accessible name for the copy button. Override for localization; the kit
+     * ships no i18n. The id is deliberately NOT interpolated into it — a column
+     * of thirty rows would announce thirty different names for the same action,
+     * and the id is already the cell's text and its `title`.
+     * @defaultValue 'Copy id'
+     */
+    copyLabel?: string;
 };
-export declare const IdTableCell: ({ id, onCopy, head, tail, ...others }: IdTableCellProps) => import("react").JSX.Element;
+export declare const IdTableCell: ({ id, onCopy, head, tail, copyLabel, ...others }: IdTableCellProps) => import("react").JSX.Element;
 //# sourceMappingURL=id-table-cell.d.ts.map

package/dist/esm/components/table/id-table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAA;AAS9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,uCAMzB,gBAAgB,gCAiClB,CAAA"}
+{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,uBAAuB,CAAA;AASnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,kDAOzB,gBAAgB,gCAqFlB,CAAA"}

package/dist/esm/components/table/id-table-cell.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TableCell, TableCellAction, TableCellWrapper } from '../../components/ui/table/index.js';
+import { TableCell, TableCellWrapper } from '../../components/ui/table/index.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/ui/tooltip/index.js';
 import { Copy } from 'lucide-react';
 /**
@@ -41,17 +41,65 @@ function truncateMiddle(id, head, tail) {
         ? id
         : `${id.slice(0, start)}…${id.slice(id.length - end)}`;
 }
-export const IdTableCell = ({ id, onCopy, head = DEFAULT_HEAD, tail = DEFAULT_TAIL, ...others }) => {
-    const handleCopyToClipboard = () => {
-        // The WHOLE id, never what is rendered. The cell is the only place most
-        // consoles expose it, and a truncated id pasted into a query matches
-        // nothing.
-        navigator.clipboard.writeText(id);
-        onCopy?.(id);
+export const IdTableCell = ({ id, onCopy, head = DEFAULT_HEAD, tail = DEFAULT_TAIL, copyLabel = 'Copy id', ...others }) => {
+    /**
+     * ⛔ THE COPY ACTION IS A NAMED BUTTON, NEVER A HANDLER ON THE `<td>`.
+     *
+     * On the cell it had no role, no tab stop and no accessible name: an
+     * operator who does not use a pointer could not copy an id from any table
+     * built on this kit, and a screen reader announced the cell as plain text.
+     * It also made the id column the one cell in a row-activating table that
+     * silently swallowed the click that opens the record.
+     */
+    const handleCopyToClipboard = async (event) => {
+        // A row that opens a record on click must not also open it on a copy.
+        event.stopPropagation();
+        // The same guard `CopyField` uses: an insecure context, and a browser
+        // without the API, both leave `navigator.clipboard` undefined, and the
+        // only thing this cell would otherwise do about it is throw an unhandled
+        // rejection out of a click handler. There is no input here to select as a
+        // fallback, so a silent no-op is the whole of what it can honestly offer.
+        if (!id || typeof navigator.clipboard?.writeText !== 'function') {
+            return;
+        }
+        try {
+            // The WHOLE id, never what is rendered. The cell is the only place most
+            // consoles expose it, and a truncated id pasted into a query matches
+            // nothing.
+            await navigator.clipboard.writeText(id);
+            onCopy?.(id);
+        }
+        catch {
+            // The browser refused the write: nothing reached the clipboard, so
+            // `onCopy` — which consumers hang their "copied" toast off — must not
+            // claim otherwise.
+        }
     };
-    return (_jsx(TableCell, { onClick: handleCopyToClipboard, 
+    return (_jsx(TableCell
+    // The tooltip is the styled affordance; `title` is the fallback that
+    // survives without it — a printed page, a portal that has not mounted,
+    // and the cell padding outside the trigger.
+    , { 
         // The tooltip is the styled affordance; `title` is the fallback that
         // survives without it — a printed page, a portal that has not mounted,
         // and the cell padding outside the trigger.
-        title: id, ...others, children: _jsxs(TableCellWrapper, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 300, children: [_jsx(TooltipTrigger, { children: id ? truncateMiddle(id, head, tail) : id }), _jsx(TooltipContent, { children: id })] }) }), _jsx(TableCellAction, { children: _jsx(Copy, { className: "size-3.5" }) })] }) }));
+        title: id, ...others, children: _jsxs(TableCellWrapper, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 300, children: [_jsx(TooltipTrigger, { children: id ? truncateMiddle(id, head, tail) : id }), _jsx(TooltipContent, { children: id })] }) }), id ? (_jsx("button", { type: "button", "aria-label": copyLabel, onClick: handleCopyToClipboard, 
+                    // ⛔ THREE RULES HERE, AND EVERY ONE IS A WAY THE CONTROL
+                    // DISAPPEARS RATHER THAN A DECORATION.
+                    //
+                    // `focus-visible:opacity-100`: a keyboard stop the operator cannot
+                    // see is the same dead end the `<td>` handler was.
+                    //
+                    // `[@media(hover:none)]:opacity-100`: a phone or a tablet has no
+                    // pointer to hover with, so `group-hover` never fires and the only
+                    // control that copies an id stayed fully transparent — invisible
+                    // AND unexplained on the one device where the id is hardest to
+                    // read off the screen. Written as an arbitrary variant because the
+                    // kit's Tailwind theme defines no named one.
+                    //
+                    // `size-6` with `-my-0.5`: WCAG 2.5.8 wants 24×24 CSS px, and the
+                    // glyph alone is 14. The negative margin pulls the button's outer
+                    // box back to the 20px line box of the cell's `text-sm` text, so
+                    // the target grows without the row growing under it.
+                    className: "focus-visible:ring-ring -my-0.5 ml-4 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-0 transition-opacity group-hover/table-cell:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none [@media(hover:none)]:opacity-100", children: _jsx(Copy, { className: "size-3.5" }) })) : null] }) }));
 };

package/dist/esm/components/table/index.d.ts

@@ -1,3 +1,4 @@
 export * from './id-table-cell.js';
+export * from './locked-table-actions.js';
 export * from './name-table-cell.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/esm/components/table/index.js

@@ -1,2 +1,3 @@
 export * from './id-table-cell.js';
+export * from './locked-table-actions.js';
 export * from './name-table-cell.js';

package/dist/esm/components/table/locked-table-actions.d.ts

@@ -1,7 +1,31 @@
 import React from 'react';
 export type LockedTableActionsProps = {
+    /** Why this record cannot be changed. It is the control's accessible name as well as the tooltip's text. */
     message: string;
     className?: string;
 };
+/**
+ * Where a row's action menu would be, on a record the ledger will not let
+ * anyone change — an external account, in double-entry terms.
+ *
+ * ⛔ THE TRIGGER IS A BUTTON. It used to be a `<div>`, so the ONLY explanation
+ * of why the menu is gone lived in a tooltip that a keyboard could not open and
+ * a screen reader had nothing to attach to: the row simply had one control
+ * fewer, unexplained.
+ *
+ * `aria-disabled`, not the `disabled` attribute: a truly disabled button takes
+ * no focus and fires no pointer events, so it would announce as unavailable and
+ * then refuse to open the tooltip that says WHY — the same dead end in a
+ * different shape. This one is reachable, announces its reason as its name,
+ * opens the tooltip on focus as well as hover, and does nothing when pressed.
+ *
+ * ⛔ DOING NOTHING TAKES A HANDLER. `aria-disabled` is a promise to the
+ * accessibility tree, not to the DOM: the press really does dispatch a click,
+ * and a click bubbles. Consumers put this where a row's action menu would be,
+ * in rows that open the record — so with no handler of its own the one control
+ * that says "you cannot change this" would open the record it refuses to
+ * change, from a pointer and, because a button turns Enter and Space into
+ * clicks, from a keyboard too.
+ */
 export declare const LockedTableActions: ({ message, className }: LockedTableActionsProps) => React.JSX.Element;
 //# sourceMappingURL=locked-table-actions.d.ts.map

package/dist/esm/components/table/locked-table-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locked-table-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/locked-table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,wBAGhC,uBAAuB,sBAkBzB,CAAA"}
+{"version":3,"file":"locked-table-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/locked-table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,4GAA4G;IAC5G,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,kBAAkB,GAAI,wBAGhC,uBAAuB,sBA6BzB,CAAA"}

package/dist/esm/components/table/locked-table-actions.js

@@ -2,6 +2,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LockIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/ui/tooltip/index.js';
 import { cn } from '../../lib/utils.js';
+/**
+ * Where a row's action menu would be, on a record the ledger will not let
+ * anyone change — an external account, in double-entry terms.
+ *
+ * ⛔ THE TRIGGER IS A BUTTON. It used to be a `<div>`, so the ONLY explanation
+ * of why the menu is gone lived in a tooltip that a keyboard could not open and
+ * a screen reader had nothing to attach to: the row simply had one control
+ * fewer, unexplained.
+ *
+ * `aria-disabled`, not the `disabled` attribute: a truly disabled button takes
+ * no focus and fires no pointer events, so it would announce as unavailable and
+ * then refuse to open the tooltip that says WHY — the same dead end in a
+ * different shape. This one is reachable, announces its reason as its name,
+ * opens the tooltip on focus as well as hover, and does nothing when pressed.
+ *
+ * ⛔ DOING NOTHING TAKES A HANDLER. `aria-disabled` is a promise to the
+ * accessibility tree, not to the DOM: the press really does dispatch a click,
+ * and a click bubbles. Consumers put this where a row's action menu would be,
+ * in rows that open the record — so with no handler of its own the one control
+ * that says "you cannot change this" would open the record it refuses to
+ * change, from a pointer and, because a button turns Enter and Space into
+ * clicks, from a keyboard too.
+ */
 export const LockedTableActions = ({ message, className }) => {
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: cn('border-border bg-muted flex size-9 items-center justify-center rounded-md border', className), children: _jsx(LockIcon, { size: 14, className: "text-muted-foreground" }) }) }), _jsx(TooltipContent, { side: "left", children: message })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-disabled": "true", "aria-label": message, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }, className: cn('border-border bg-muted flex size-9 items-center justify-center rounded-md border', 
+                        // Reachable is half the fix: a `border` over a `bg-muted` can
+                        // swallow the browser's default outline entirely, and the other
+                        // two cells in this table carry the same ring.
+                        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', className), children: _jsx(LockIcon, { size: 14, className: "text-muted-foreground" }) }) }), _jsx(TooltipContent, { side: "left", children: message })] }) }));
 };