@entifix/react-controls 0.1.0-0

package/dist/ui/organisms/entity-table/entity-table.js

@@ -0,0 +1,529 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { emptySelection, EntifixLogicError, extractMetaEntity, isSelected, selectionSize, toggleSelected } from '@entifix/core';
+import { Fragment, useRef, useState } from 'react';
+import { useErrorMessage, useT, useTranslateKey } from '../../../i18n/index.js';
+import { OVERFLOW_GLYPH, useCasesForSurface } from '../../actions/index.js';
+import { Button } from '../../atoms/button/index.js';
+import { CellValue } from '../../atoms/cell-value/index.js';
+import { Checkbox } from '../../atoms/field/index.js';
+import { Skeleton } from '../../atoms/skeleton/index.js';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableMessageRow, TableRow } from '../../atoms/table/index.js';
+import { Link } from '../../atoms/text/index.js';
+import { BulkActionBar } from '../../molecules/bulk-action-bar/index.js';
+import { BulkResult } from '../../molecules/bulk-result/index.js';
+import { ColumnSettings } from '../../molecules/column-settings/index.js';
+import { ConfirmDialog } from '../../molecules/confirm-dialog/index.js';
+import { EntityRecordCard } from '../../molecules/entity-record-card/index.js';
+import { FilterBuilder } from '../../molecules/filter-builder/index.js';
+import { LoadingBoundary } from '../../molecules/loading-boundary/index.js';
+import { Menu } from '../../molecules/menu/index.js';
+import { Pagination } from '../../molecules/pagination/index.js';
+import { SortBuilder } from '../../molecules/sort-builder/index.js';
+import { TableToolbar } from '../../molecules/table-toolbar/index.js';
+import { readEntityTableSlots } from './entity-table-slots.js';
+import { useEntityTableColumns } from './use-entity-table-columns.js';
+/**
+ * The grid and the card list are both rendered, and CSS picks one. A JS
+ * breakpoint hook would have to guess during SSR and correct after mount —
+ * a hydration mismatch on every page load. Classes are written out in full
+ * because Tailwind cannot see a class name that is concatenated at runtime.
+ */ const PIVOT_CLASS = {
+    sm: {
+        grid: 'hidden sm:block',
+        cards: 'sm:hidden'
+    },
+    md: {
+        grid: 'hidden md:block',
+        cards: 'md:hidden'
+    },
+    lg: {
+        grid: 'hidden lg:block',
+        cards: 'lg:hidden'
+    }
+};
+/**
+ * How many placeholder rows the built-in skeleton draws.
+ *
+ * The column count is taken from the real geometry, because that is the axis a
+ * mismatch shifts; the row count is capped instead of tracking `pageSize`, since
+ * a fifty-row page would otherwise paint fifty shimmer rows to stand in for
+ * content that arrives below the fold anyway.
+ */ const SKELETON_ROW_CAP = 5;
+export function EntityTable({ entityConstructor, isLoading, skeleton = true, error, items, totalItems, currentPage, pageSize, onPageChange, onPageSizeChange, hrefFor, newHref, onSelect, preferencesKey, showControls = true, pivotBreakpoint = 'md', filtering, sorting, onFilteringChange, onSortingChange, selection, onSelectionChange, metadata, isMetadataLoading = false, onBulkUseCase, onUseCase, bulkOutcomes, onBulkDismiss, onBulkRetry, isBulkRunning = false, children }) {
+    var _ref;
+    const t = useT();
+    // A descriptor's label is a runtime catalog key — the typed gate cannot see
+    // it, which is why `@r10c/i18n-check` is what catches a typo.
+    const translateKey = useTranslateKey();
+    const errorMessage = useErrorMessage();
+    const metaEntity = extractMetaEntity(entityConstructor);
+    const slots = readEntityTableSlots(children);
+    const [panel, setPanel] = useState('none');
+    /**
+   * A verb waiting to be confirmed, and what it will act on.
+   *
+   * ⚠️ **The table had no confirmation flow at all** until #216 moved a
+   * destructive verb onto it. It read `confirm.tone` — only to pick a tone for
+   * a button or a menu item — and then fired on the first click. `unpublish` is
+   * declared `destructive`, so a verb reachable from a row menu without this
+   * would have been a one-click unpublish with a red label explaining what had
+   * already happened.
+   *
+   * The state holds the confirmation itself rather than the descriptor, so the
+   * dialog cannot open for a verb that never asked for one — the same shape
+   * `EntityForm` uses, and for the same reason.
+   *
+   * It carries the **target** too, which the form's does not need: a form has
+   * one record and a table has a row or a selection, and those run through two
+   * different handlers with two different payloads.
+   */ const [pending, setPending] = useState(undefined);
+    const { columns, visibleColumns, hidden, setPersonalization } = useEntityTableColumns(entityConstructor, slots.columns, items[0], `entity-table:${(_ref = preferencesKey != null ? preferencesKey : metaEntity.key) != null ? _ref : metaEntity.name}`);
+    const pivot = PIVOT_CLASS[pivotBreakpoint];
+    // A picker's table is choosing *one* value; a multi-selection there would
+    // offer a set to a form member that holds a single reference, and the two
+    // controls would fight over the same row. This is a wiring mistake rather
+    // than a state, so it costs the render — the same call `EntityForm` makes
+    // for a link source aimed at a member no picker can edit.
+    if (onSelect !== undefined && selection !== undefined) {
+        throw new EntifixLogicError('EntityTable was given both `onSelect` and `selection`. A picker picks one ' + 'row and a selection accumulates many, so the row control cannot be both. ' + 'Drop `selection` inside a picker, or drop `onSelect` outside one.');
+    }
+    /**
+   * The selection, or `undefined` when the table is not selectable at all.
+   *
+   * One value rather than a `selection` prop beside a `selectable` boolean:
+   * two of them means every render site has to re-test both, and the second
+   * test is unreachable — which reads as a defensive check and is really dead
+   * code the coverage gate then cannot close.
+   */ const selectionState = selection !== undefined && onSelectionChange !== undefined ? selection : undefined;
+    const selectable = selectionState !== undefined;
+    const rowUseCases = useCasesForSurface('row-menu', metadata == null ? void 0 : metadata.useCases);
+    const bulkUseCases = useCasesForSurface('bulk-bar', metadata == null ? void 0 : metadata.useCases);
+    const toolbarUseCases = useCasesForSurface('table-toolbar', metadata == null ? void 0 : metadata.useCases);
+    const hasRowMenu = rowUseCases.length > 0 && onUseCase !== undefined;
+    /**
+   * What a `context-independent` collection verb acts on: everything the
+   * current filter matches.
+   *
+   * Not an empty `ids` selection, which would say "no rows" — the verb is
+   * available *without* a selection precisely because its subject is the
+   * collection, so the honest payload is the same filter the listing is
+   * showing, and the same one a "select all matching" escalation would send.
+   */ const everythingMatching = {
+        mode: 'matching',
+        filtering,
+        total: totalItems,
+        excluded: new Set()
+    };
+    const hasRowAction = onSelect !== undefined || hrefFor !== undefined || hasRowMenu;
+    const columnCount = visibleColumns.length + (hasRowAction ? 1 : 0) + (selectable ? 1 : 0);
+    /**
+   * The first load has nothing to show and is held with a skeleton; a refetch
+   * already has rows, so it keeps them and only marks the region busy. Splitting
+   * the two is what stops every pagination click flashing grey.
+   */ const isFirstLoad = isLoading && items.length === 0;
+    const isRefetching = isLoading && items.length > 0;
+    /** `true`/omitted → the built-in default; a node → that node; `false` → none. */ const customSkeleton = typeof skeleton === 'boolean' ? undefined : skeleton;
+    const showSkeleton = isFirstLoad && skeleton !== false;
+    const skeletonRows = Array.from({
+        length: Math.min(pageSize, SKELETON_ROW_CAP)
+    }, (_, index)=>index);
+    /**
+   * The refetch hint, and it is deliberately the only one: rows stay readable
+   * and simply dim, because a second skeleton over live data would be two
+   * loading signals in one region.
+   */ const busyClass = isRefetching ? 'opacity-60 transition-opacity duration-200 ease-smooth' : '';
+    const renderCell = (column, item)=>column.render ? column.render(item) : /*#__PURE__*/ _jsx(CellValue, {
+            value: item[column.name],
+            descriptor: column
+        });
+    /**
+   * The row a shift-click ranges *from* — the last box the user actually
+   * toggled. Held in a ref rather than state because it changes nothing on
+   * screen, and re-rendering the whole table on every click to remember an
+   * anchor is a cost with no visible return.
+   */ const anchorIndex = useRef(undefined);
+    const setSelection = (next)=>onSelectionChange == null ? void 0 : onSelectionChange(next);
+    const toggleRow = (index, checked, shiftKey, current)=>{
+        var _anchorIndex_current;
+        // A shift-click extends the last toggle across the rows *on this page*, in
+        // the direction the user dragged, and applies the new state to all of them.
+        const from = shiftKey ? (_anchorIndex_current = anchorIndex.current) != null ? _anchorIndex_current : index : index;
+        const [start, end] = from <= index ? [
+            from,
+            index
+        ] : [
+            index,
+            from
+        ];
+        let next = current;
+        for (const row of items.slice(start, end + 1)){
+            next = toggleSelected(next, row.id, checked);
+        }
+        anchorIndex.current = index;
+        setSelection(next);
+    };
+    /**
+   * The header box, and it has three states rather than two: none of this
+   * page's rows selected, all of them, or some. Without the third the box
+   * reads as "nothing is selected" while a bulk bar sits below it saying
+   * otherwise.
+   */ const pageIds = items.map((item)=>item.id);
+    const selectedOnPage = selectionState ? pageIds.filter((id)=>isSelected(selectionState, id)).length : 0;
+    const allOnPageSelected = pageIds.length > 0 && selectedOnPage === pageIds.length;
+    const someOnPageSelected = selectedOnPage > 0 && !allOnPageSelected;
+    const toggleAllOnPage = (checked, current)=>{
+        let next = current;
+        for (const id of pageIds)next = toggleSelected(next, id, checked);
+        anchorIndex.current = undefined;
+        setSelection(next);
+    };
+    /**
+   * How a row names itself to a screen reader.
+   *
+   * The first visible column's value, because that is what the user reads the
+   * row *as* — "Seleccionar Acme" rather than "Seleccionar fila 3", which tells
+   * them the position they can already see and not the thing they cannot.
+   */ const rowLabel = (item)=>{
+        // The first non-identifier column **that this row actually filled in**.
+        //
+        // An id names a row the way "row 3" does: it repeats what the user can
+        // already see. But skipping only the id is not enough — measured against
+        // the seeded catalog, where `code` is the first non-id column and is empty
+        // on every brand, so the label fell straight through to the id and never
+        // reached `name`. A column that is blank on this row names it no better
+        // than its position does, so the search continues past it.
+        //
+        // The id remains the last resort, because a row with nothing rendered
+        // still has to announce itself.
+        const named = visibleColumns.find((column)=>{
+            if (column.type === 'id') return false;
+            const value = item[column.name];
+            return value != null && String(value) !== '';
+        });
+        return named ? String(item[named.name]) : String(item.id);
+    };
+    const selectionCell = (item, index, // Passed in rather than closed over: this is only ever called under
+    // `selectable`, which already proves the selection exists, and reading the
+    // optional prop here would add a fallback arm that nothing can reach.
+    current)=>/*#__PURE__*/ _jsx(Checkbox, {
+            // Deliberately no `id`: both pivots are always in the DOM, so an id here
+            // would be emitted twice per row. `aria-label` names the control instead,
+            // and it names the *record* rather than the position.
+            "aria-label": t('table.selectRow', {
+                record: rowLabel(item)
+            }),
+            checked: isSelected(current, item.id),
+            disabled: isBulkRunning,
+            onChange: (event)=>toggleRow(index, event.currentTarget.checked, event.nativeEvent.shiftKey === true, current)
+        });
+    const runTarget = (key, target)=>{
+        if (target.kind === 'row') onUseCase == null ? void 0 : onUseCase(key, target.item);
+        else onBulkUseCase == null ? void 0 : onBulkUseCase(key, target.selection);
+    };
+    const invoke = (useCase, target)=>{
+        const confirm = useCase.confirm;
+        if (confirm) {
+            setPending({
+                key: useCase.key,
+                labelKey: useCase.labelKey,
+                confirm,
+                target
+            });
+            return;
+        }
+        runTarget(useCase.key, target);
+    };
+    const rowMenu = (item)=>hasRowMenu ? /*#__PURE__*/ _jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ _jsx(Menu.Trigger, {
+                    "aria-label": t('table.actions'),
+                    children: OVERFLOW_GLYPH
+                }),
+                /*#__PURE__*/ _jsx(Menu.Items, {
+                    children: rowUseCases.map((useCase)=>{
+                        var _useCase_confirm;
+                        return /*#__PURE__*/ _jsx(Menu.Item, {
+                            tone: ((_useCase_confirm = useCase.confirm) == null ? void 0 : _useCase_confirm.tone) === 'destructive' ? 'destructive' : 'neutral',
+                            onClick: ()=>invoke(useCase, {
+                                    kind: 'row',
+                                    item
+                                }),
+                            children: translateKey(useCase.labelKey)
+                        }, useCase.key);
+                    })
+                })
+            ]
+        }) : undefined;
+    /**
+   * Selection wins over navigation: a picker's row must set the value, not send
+   * the user away from the form they came from.
+   *
+   * The row menu sits *beside* whichever of the two applies rather than
+   * replacing it — "open this record" and "run a verb on it" are both true at
+   * once, and folding the first into the menu would bury the action every row
+   * of a list exists for.
+   */ const recordAction = (item)=>{
+        const primary = onSelect ? /*#__PURE__*/ _jsx(Button, {
+            type: "button",
+            variant: "secondary",
+            size: "sm",
+            onClick: ()=>onSelect(item),
+            children: t('table.select')
+        }) : hrefFor ? /*#__PURE__*/ _jsx(Link, {
+            href: hrefFor(item.id),
+            children: t('table.open')
+        }) : undefined;
+        const menu = rowMenu(item);
+        if (!menu) return primary;
+        return /*#__PURE__*/ _jsxs("span", {
+            className: "flex items-center gap-2xs",
+            children: [
+                primary,
+                menu
+            ]
+        });
+    };
+    /**
+   * "No records" is a statement about the data; after a failed load it would be
+   * a lie about it. The distinction matters most to the user who is deciding
+   * whether their catalog is empty or their backend is down.
+   */ const emptyMessage = error ? t('table.error') : t('table.empty');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-s",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                role: "status",
+                "aria-live": "polite",
+                className: "sr-only",
+                children: isFirstLoad ? t('table.loading') : ''
+            }),
+            showControls && /*#__PURE__*/ _jsx(TableToolbar, {
+                start: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        newHref && /*#__PURE__*/ _jsx(Link, {
+                            href: newHref,
+                            children: t('table.new')
+                        }),
+                        /*#__PURE__*/ _jsx(LoadingBoundary, {
+                            isLoading: isMetadataLoading,
+                            lines: 0,
+                            children: /*#__PURE__*/ _jsx(_Fragment, {
+                                children: toolbarUseCases.map((useCase)=>{
+                                    var _useCase_confirm;
+                                    return /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        variant: ((_useCase_confirm = useCase.confirm) == null ? void 0 : _useCase_confirm.tone) === 'destructive' ? 'destructive' : 'secondary',
+                                        size: "sm",
+                                        disabled: isBulkRunning,
+                                        onClick: ()=>onBulkUseCase == null ? void 0 : onBulkUseCase(useCase.key, everythingMatching),
+                                        children: translateKey(useCase.labelKey)
+                                    }, useCase.key);
+                                })
+                            })
+                        }),
+                        slots.toolbar
+                    ]
+                }),
+                end: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            variant: panel === 'filters' ? 'primary' : 'secondary',
+                            size: "sm",
+                            onClick: ()=>setPanel((current)=>current === 'filters' ? 'none' : 'filters'),
+                            children: t('table.filters')
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            variant: panel === 'sorting' ? 'primary' : 'secondary',
+                            size: "sm",
+                            onClick: ()=>setPanel((current)=>current === 'sorting' ? 'none' : 'sorting'),
+                            children: t('table.sorting')
+                        }),
+                        /*#__PURE__*/ _jsx(ColumnSettings, {
+                            columns: columns,
+                            hidden: hidden,
+                            onChange: setPersonalization
+                        })
+                    ]
+                }),
+                panel: panel === 'filters' ? /*#__PURE__*/ _jsx(FilterBuilder, {
+                    descriptors: columns.filter((column)=>column.filterable),
+                    value: filtering,
+                    onChange: (applied)=>onFilteringChange == null ? void 0 : onFilteringChange(applied)
+                }) : panel === 'sorting' ? /*#__PURE__*/ _jsx(SortBuilder, {
+                    descriptors: columns.filter((column)=>column.sortable),
+                    value: sorting,
+                    onChange: (applied)=>onSortingChange == null ? void 0 : onSortingChange(applied)
+                }) : undefined
+            }),
+            selectionState && selectionSize(selectionState) > 0 && /*#__PURE__*/ _jsx(BulkActionBar, {
+                count: selectionSize(selectionState),
+                useCases: bulkUseCases,
+                busy: isBulkRunning,
+                // Offered only when this page is fully ticked and the store holds
+                // more than the page — the escalation has somewhere to escalate to.
+                matchingTotal: selectionState.mode === 'ids' && allOnPageSelected && totalItems > items.length ? totalItems : undefined,
+                onSelectAllMatching: ()=>setSelection(everythingMatching),
+                onClear: ()=>setSelection(emptySelection()),
+                onUseCase: (useCase)=>invoke(useCase, {
+                        kind: 'selection',
+                        selection: selectionState
+                    })
+            }),
+            pending && /*#__PURE__*/ _jsx(ConfirmDialog, {
+                open: true,
+                tone: pending.confirm.tone,
+                title: translateKey(pending.labelKey),
+                message: translateKey(pending.confirm.messageKey),
+                busy: isBulkRunning,
+                onCancel: ()=>setPending(undefined),
+                onConfirm: ()=>{
+                    const { key, target } = pending;
+                    setPending(undefined);
+                    runTarget(key, target);
+                }
+            }),
+            bulkOutcomes && bulkOutcomes.length > 0 && onBulkDismiss && /*#__PURE__*/ _jsx(BulkResult, {
+                outcomes: bulkOutcomes,
+                busy: isBulkRunning,
+                labelFor: (id)=>{
+                    const row = items.find((item)=>item.id === id);
+                    return row ? rowLabel(row) : undefined;
+                },
+                onRetryFailed: onBulkRetry,
+                onDismiss: onBulkDismiss
+            }),
+            error && /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                "data-testid": "entity-table-error",
+                className: "rounded-sm border border-danger bg-danger-subtle px-s py-2xs text-step-sm text-danger",
+                children: errorMessage(error)
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: `${pivot.grid} ${busyClass}`,
+                children: /*#__PURE__*/ _jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHead, {
+                            children: slots.header ? slots.header.render(visibleColumns) : /*#__PURE__*/ _jsxs("tr", {
+                                children: [
+                                    selectable && /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                        children: /*#__PURE__*/ _jsx(Checkbox, {
+                                            "aria-label": t('table.selectAllOnPage'),
+                                            checked: allOnPageSelected,
+                                            indeterminate: someOnPageSelected,
+                                            disabled: isBulkRunning || items.length === 0,
+                                            onChange: (event)=>toggleAllOnPage(event.currentTarget.checked, selectionState)
+                                        })
+                                    }),
+                                    visibleColumns.map((column)=>{
+                                        var _column_header;
+                                        return /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                            children: (_column_header = column.header) != null ? _column_header : column.label
+                                        }, column.name);
+                                    }),
+                                    hasRowAction && /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                        children: t('table.actions')
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(TableBody, {
+                            "aria-busy": isLoading || undefined,
+                            children: [
+                                showSkeleton && (customSkeleton ? /*#__PURE__*/ _jsx(TableMessageRow, {
+                                    colSpan: columnCount,
+                                    children: customSkeleton
+                                }) : skeletonRows.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            selectable && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx(Skeleton, {
+                                                    shape: "line",
+                                                    className: "w-4"
+                                                })
+                                            }),
+                                            visibleColumns.map((column)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                    children: /*#__PURE__*/ _jsx(Skeleton, {
+                                                        shape: "line",
+                                                        className: "w-full"
+                                                    })
+                                                }, column.name)),
+                                            hasRowAction && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx(Skeleton, {
+                                                    shape: "line",
+                                                    className: "w-16"
+                                                })
+                                            })
+                                        ]
+                                    }, row))),
+                                !isLoading && items.length === 0 && /*#__PURE__*/ _jsx(TableMessageRow, {
+                                    colSpan: columnCount,
+                                    children: emptyMessage
+                                }),
+                                items.map((item, index)=>{
+                                    var _item_id, _item_id1;
+                                    return slots.row ? // A Fragment carries the key without wrapping the custom row in
+                                    // an element `<tbody>` would reject.
+                                    /*#__PURE__*/ _jsx(Fragment, {
+                                        children: slots.row.render(item, visibleColumns)
+                                    }, String((_item_id = item.id) != null ? _item_id : index)) : /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            selectionState && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: selectionCell(item, index, selectionState)
+                                            }),
+                                            visibleColumns.map((column)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                    children: renderCell(column, item)
+                                                }, column.name)),
+                                            hasRowAction && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: recordAction(item)
+                                            })
+                                        ]
+                                    }, String((_item_id1 = item.id) != null ? _item_id1 : index));
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${pivot.cards} flex flex-col gap-2xs ${busyClass}`,
+                "aria-busy": isLoading || undefined,
+                children: [
+                    showSkeleton && (customSkeleton != null ? customSkeleton : skeletonRows.map((row)=>/*#__PURE__*/ _jsx(EntityRecordCard, {
+                            columns: visibleColumns,
+                            renderCell: ()=>/*#__PURE__*/ _jsx(Skeleton, {
+                                    shape: "line",
+                                    className: "w-24"
+                                })
+                        }, row))),
+                    !isLoading && items.length === 0 && /*#__PURE__*/ _jsx("p", {
+                        className: "text-step-sm text-content-muted",
+                        children: emptyMessage
+                    }),
+                    items.map((item, index)=>{
+                        var _item_id;
+                        return /*#__PURE__*/ _jsx(EntityRecordCard, {
+                            columns: visibleColumns,
+                            // The card is handed the resolved columns themselves, so the
+                            // narrow layout goes through the exact same renderers as the grid.
+                            renderCell: (column)=>renderCell(column, item),
+                            leading: selectionState ? selectionCell(item, index, selectionState) : undefined,
+                            actions: recordAction(item)
+                        }, String((_item_id = item.id) != null ? _item_id : index));
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Pagination, {
+                currentPage: currentPage,
+                pageSize: pageSize,
+                totalItems: totalItems,
+                onPageChange: onPageChange,
+                onPageSizeChange: onPageSizeChange
+            }),
+            slots.rest
+        ]
+    });
+}
+
+//# sourceMappingURL=entity-table.js.map

package/dist/ui/organisms/entity-table/entity-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/organisms/entity-table/entity-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  emptySelection,\n  EntifixLogicError,\n  type Entity,\n  type EntityId,\n  type EntitySelection,\n  type EntitySorting,\n  extractMetaEntity,\n  type FilterGroup,\n  isSelected,\n  selectionSize,\n  toggleSelected,\n  type UseCaseDescriptor,\n} from '@entifix/core';\nimport { Fragment, type ReactNode, useRef, useState } from 'react';\n\nimport { useErrorMessage, useT, useTranslateKey } from '../../../i18n/index.js';\nimport { OVERFLOW_GLYPH, useCasesForSurface } from '../../actions/index.js';\nimport { Button } from '../../atoms/button/index.js';\nimport { CellValue } from '../../atoms/cell-value/index.js';\nimport { Checkbox } from '../../atoms/field/index.js';\nimport { Skeleton } from '../../atoms/skeleton/index.js';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableMessageRow,\n  TableRow,\n} from '../../atoms/table/index.js';\nimport { Link } from '../../atoms/text/index.js';\nimport { BulkActionBar } from '../../molecules/bulk-action-bar/index.js';\nimport { BulkResult } from '../../molecules/bulk-result/index.js';\nimport { ColumnSettings } from '../../molecules/column-settings/index.js';\nimport { ConfirmDialog } from '../../molecules/confirm-dialog/index.js';\nimport { EntityRecordCard } from '../../molecules/entity-record-card/index.js';\nimport { FilterBuilder } from '../../molecules/filter-builder/index.js';\nimport { LoadingBoundary } from '../../molecules/loading-boundary/index.js';\nimport { Menu } from '../../molecules/menu/index.js';\nimport { Pagination } from '../../molecules/pagination/index.js';\nimport { SortBuilder } from '../../molecules/sort-builder/index.js';\nimport { TableToolbar } from '../../molecules/table-toolbar/index.js';\nimport type {\n  EntityTableColumn,\n  EntityTablePivotBreakpoint,\n  EntityTableProps,\n} from './entity-table.types.js';\nimport { readEntityTableSlots } from './entity-table-slots.js';\nimport { useEntityTableColumns } from './use-entity-table-columns.js';\n\n/**\n * The grid and the card list are both rendered, and CSS picks one. A JS\n * breakpoint hook would have to guess during SSR and correct after mount —\n * a hydration mismatch on every page load. Classes are written out in full\n * because Tailwind cannot see a class name that is concatenated at runtime.\n */\nconst PIVOT_CLASS: Record<\n  EntityTablePivotBreakpoint,\n  { grid: string; cards: string }\n> = {\n  sm: { grid: 'hidden sm:block', cards: 'sm:hidden' },\n  md: { grid: 'hidden md:block', cards: 'md:hidden' },\n  lg: { grid: 'hidden lg:block', cards: 'lg:hidden' },\n};\n\ntype Panel = 'none' | 'filters' | 'sorting';\n\n/**\n * How many placeholder rows the built-in skeleton draws.\n *\n * The column count is taken from the real geometry, because that is the axis a\n * mismatch shifts; the row count is capped instead of tracking `pageSize`, since\n * a fifty-row page would otherwise paint fifty shimmer rows to stand in for\n * content that arrives below the fold anyway.\n */\nconst SKELETON_ROW_CAP = 5;\n\n/**\n * A table that builds itself from an entity's metadata: columns, labels, value\n * formatting and the filter/sort controls all come from `@accessor()`\n * declarations, so listing a new entity needs no bespoke table.\n *\n * Three things layer on top of that default:\n * - **personalization** — column order and visibility, persisted through the\n *   UI-preferences port (so it survives reloads and can later move server-side);\n * - **responsiveness** — below `pivotBreakpoint` rows pivot into label/value\n *   cards instead of scrolling sideways;\n * - **slots** — `<EntityColumn>` / `<EntityTableHeader>` / `<EntityTableRow>` /\n *   `<EntityTableToolbar>` children override any part of the default rendering.\n */\n/**\n * What a pending verb will act on once it is confirmed.\n *\n * A form has one record; a table has a row or a selection, and those reach two\n * different handlers with two different payloads. Carrying the selection itself\n * rather than reading it back at confirm time also removes a branch that could\n * not happen: the bulk bar only renders inside a truthy selection.\n */\ntype PendingTarget<TEntity extends Entity> =\n  | { kind: 'row'; item: TEntity }\n  | { kind: 'selection'; selection: EntitySelection<TEntity> };\n\nexport function EntityTable<TEntity extends Entity>({\n  entityConstructor,\n  isLoading,\n  skeleton = true,\n  error,\n  items,\n  totalItems,\n  currentPage,\n  pageSize,\n  onPageChange,\n  onPageSizeChange,\n  hrefFor,\n  newHref,\n  onSelect,\n  preferencesKey,\n  showControls = true,\n  pivotBreakpoint = 'md',\n  filtering,\n  sorting,\n  onFilteringChange,\n  onSortingChange,\n  selection,\n  onSelectionChange,\n  metadata,\n  isMetadataLoading = false,\n  onBulkUseCase,\n  onUseCase,\n  bulkOutcomes,\n  onBulkDismiss,\n  onBulkRetry,\n  isBulkRunning = false,\n  children,\n}: EntityTableProps<TEntity>) {\n  const t = useT();\n  // A descriptor's label is a runtime catalog key — the typed gate cannot see\n  // it, which is why `@r10c/i18n-check` is what catches a typo.\n  const translateKey = useTranslateKey();\n  const errorMessage = useErrorMessage();\n  const metaEntity = extractMetaEntity(entityConstructor);\n  const slots = readEntityTableSlots<TEntity>(children);\n  const [panel, setPanel] = useState<Panel>('none');\n\n  /**\n   * A verb waiting to be confirmed, and what it will act on.\n   *\n   * ⚠️ **The table had no confirmation flow at all** until #216 moved a\n   * destructive verb onto it. It read `confirm.tone` — only to pick a tone for\n   * a button or a menu item — and then fired on the first click. `unpublish` is\n   * declared `destructive`, so a verb reachable from a row menu without this\n   * would have been a one-click unpublish with a red label explaining what had\n   * already happened.\n   *\n   * The state holds the confirmation itself rather than the descriptor, so the\n   * dialog cannot open for a verb that never asked for one — the same shape\n   * `EntityForm` uses, and for the same reason.\n   *\n   * It carries the **target** too, which the form's does not need: a form has\n   * one record and a table has a row or a selection, and those run through two\n   * different handlers with two different payloads.\n   */\n  const [pending, setPending] = useState<\n    | {\n        key: string;\n        labelKey: string;\n        confirm: NonNullable<UseCaseDescriptor['confirm']>;\n        target: PendingTarget<TEntity>;\n      }\n    | undefined\n  >(undefined);\n\n  const { columns, visibleColumns, hidden, setPersonalization } =\n    useEntityTableColumns<TEntity>(\n      entityConstructor,\n      slots.columns,\n      items[0],\n      `entity-table:${preferencesKey ?? metaEntity.key ?? metaEntity.name}`,\n    );\n\n  const pivot = PIVOT_CLASS[pivotBreakpoint];\n\n  // A picker's table is choosing *one* value; a multi-selection there would\n  // offer a set to a form member that holds a single reference, and the two\n  // controls would fight over the same row. This is a wiring mistake rather\n  // than a state, so it costs the render — the same call `EntityForm` makes\n  // for a link source aimed at a member no picker can edit.\n  if (onSelect !== undefined && selection !== undefined) {\n    throw new EntifixLogicError(\n      'EntityTable was given both `onSelect` and `selection`. A picker picks one ' +\n        'row and a selection accumulates many, so the row control cannot be both. ' +\n        'Drop `selection` inside a picker, or drop `onSelect` outside one.',\n    );\n  }\n\n  /**\n   * The selection, or `undefined` when the table is not selectable at all.\n   *\n   * One value rather than a `selection` prop beside a `selectable` boolean:\n   * two of them means every render site has to re-test both, and the second\n   * test is unreachable — which reads as a defensive check and is really dead\n   * code the coverage gate then cannot close.\n   */\n  const selectionState =\n    selection !== undefined && onSelectionChange !== undefined\n      ? selection\n      : undefined;\n  const selectable = selectionState !== undefined;\n  const rowUseCases = useCasesForSurface('row-menu', metadata?.useCases);\n  const bulkUseCases = useCasesForSurface('bulk-bar', metadata?.useCases);\n  const toolbarUseCases = useCasesForSurface(\n    'table-toolbar',\n    metadata?.useCases,\n  );\n  const hasRowMenu = rowUseCases.length > 0 && onUseCase !== undefined;\n\n  /**\n   * What a `context-independent` collection verb acts on: everything the\n   * current filter matches.\n   *\n   * Not an empty `ids` selection, which would say \"no rows\" — the verb is\n   * available *without* a selection precisely because its subject is the\n   * collection, so the honest payload is the same filter the listing is\n   * showing, and the same one a \"select all matching\" escalation would send.\n   */\n  const everythingMatching: EntitySelection<TEntity> = {\n    mode: 'matching',\n    filtering,\n    total: totalItems,\n    excluded: new Set<EntityId>(),\n  };\n\n  const hasRowAction =\n    onSelect !== undefined || hrefFor !== undefined || hasRowMenu;\n  const columnCount =\n    visibleColumns.length + (hasRowAction ? 1 : 0) + (selectable ? 1 : 0);\n\n  /**\n   * The first load has nothing to show and is held with a skeleton; a refetch\n   * already has rows, so it keeps them and only marks the region busy. Splitting\n   * the two is what stops every pagination click flashing grey.\n   */\n  const isFirstLoad = isLoading && items.length === 0;\n  const isRefetching = isLoading && items.length > 0;\n\n  /** `true`/omitted → the built-in default; a node → that node; `false` → none. */\n  const customSkeleton = typeof skeleton === 'boolean' ? undefined : skeleton;\n  const showSkeleton = isFirstLoad && skeleton !== false;\n  const skeletonRows = Array.from(\n    { length: Math.min(pageSize, SKELETON_ROW_CAP) },\n    (_, index) => index,\n  );\n\n  /**\n   * The refetch hint, and it is deliberately the only one: rows stay readable\n   * and simply dim, because a second skeleton over live data would be two\n   * loading signals in one region.\n   */\n  const busyClass = isRefetching\n    ? 'opacity-60 transition-opacity duration-200 ease-smooth'\n    : '';\n\n  const renderCell = (\n    column: EntityTableColumn<TEntity>,\n    item: TEntity,\n  ): ReactNode =>\n    column.render ? (\n      column.render(item)\n    ) : (\n      <CellValue\n        value={(item as Record<string, unknown>)[column.name]}\n        descriptor={column}\n      />\n    );\n\n  /**\n   * The row a shift-click ranges *from* — the last box the user actually\n   * toggled. Held in a ref rather than state because it changes nothing on\n   * screen, and re-rendering the whole table on every click to remember an\n   * anchor is a cost with no visible return.\n   */\n  const anchorIndex = useRef<number | undefined>(undefined);\n\n  const setSelection = (next: EntitySelection<TEntity>) =>\n    onSelectionChange?.(next);\n\n  const toggleRow = (\n    index: number,\n    checked: boolean,\n    shiftKey: boolean,\n    current: EntitySelection<TEntity>,\n  ) => {\n    // A shift-click extends the last toggle across the rows *on this page*, in\n    // the direction the user dragged, and applies the new state to all of them.\n    const from = shiftKey ? (anchorIndex.current ?? index) : index;\n    const [start, end] = from <= index ? [from, index] : [index, from];\n\n    let next = current;\n    for (const row of items.slice(start, end + 1)) {\n      next = toggleSelected(next, row.id, checked);\n    }\n\n    anchorIndex.current = index;\n    setSelection(next);\n  };\n\n  /**\n   * The header box, and it has three states rather than two: none of this\n   * page's rows selected, all of them, or some. Without the third the box\n   * reads as \"nothing is selected\" while a bulk bar sits below it saying\n   * otherwise.\n   */\n  const pageIds = items.map(item => item.id);\n  const selectedOnPage = selectionState\n    ? pageIds.filter(id => isSelected(selectionState, id)).length\n    : 0;\n  const allOnPageSelected =\n    pageIds.length > 0 && selectedOnPage === pageIds.length;\n  const someOnPageSelected = selectedOnPage > 0 && !allOnPageSelected;\n\n  const toggleAllOnPage = (\n    checked: boolean,\n    current: EntitySelection<TEntity>,\n  ) => {\n    let next = current;\n    for (const id of pageIds) next = toggleSelected(next, id, checked);\n    anchorIndex.current = undefined;\n    setSelection(next);\n  };\n\n  /**\n   * How a row names itself to a screen reader.\n   *\n   * The first visible column's value, because that is what the user reads the\n   * row *as* — \"Seleccionar Acme\" rather than \"Seleccionar fila 3\", which tells\n   * them the position they can already see and not the thing they cannot.\n   */\n  const rowLabel = (item: TEntity): string => {\n    // The first non-identifier column **that this row actually filled in**.\n    //\n    // An id names a row the way \"row 3\" does: it repeats what the user can\n    // already see. But skipping only the id is not enough — measured against\n    // the seeded catalog, where `code` is the first non-id column and is empty\n    // on every brand, so the label fell straight through to the id and never\n    // reached `name`. A column that is blank on this row names it no better\n    // than its position does, so the search continues past it.\n    //\n    // The id remains the last resort, because a row with nothing rendered\n    // still has to announce itself.\n    const named = visibleColumns.find(column => {\n      if (column.type === 'id') return false;\n      const value = (item as Record<string, unknown>)[column.name];\n      return value != null && String(value) !== '';\n    });\n\n    return named\n      ? String((item as Record<string, unknown>)[named.name])\n      : String(item.id);\n  };\n\n  const selectionCell = (\n    item: TEntity,\n    index: number,\n    // Passed in rather than closed over: this is only ever called under\n    // `selectable`, which already proves the selection exists, and reading the\n    // optional prop here would add a fallback arm that nothing can reach.\n    current: EntitySelection<TEntity>,\n  ) => (\n    <Checkbox\n      // Deliberately no `id`: both pivots are always in the DOM, so an id here\n      // would be emitted twice per row. `aria-label` names the control instead,\n      // and it names the *record* rather than the position.\n      aria-label={t('table.selectRow', { record: rowLabel(item) })}\n      checked={isSelected(current, item.id)}\n      disabled={isBulkRunning}\n      onChange={event =>\n        toggleRow(\n          index,\n          event.currentTarget.checked,\n          (event.nativeEvent as MouseEvent).shiftKey === true,\n          current,\n        )\n      }\n    />\n  );\n\n  const runTarget = (key: string, target: PendingTarget<TEntity>) => {\n    if (target.kind === 'row') onUseCase?.(key, target.item);\n    else onBulkUseCase?.(key, target.selection);\n  };\n\n  const invoke = (\n    useCase: UseCaseDescriptor,\n    target: PendingTarget<TEntity>,\n  ) => {\n    const confirm = useCase.confirm;\n    if (confirm) {\n      setPending({\n        key: useCase.key,\n        labelKey: useCase.labelKey,\n        confirm,\n        target,\n      });\n      return;\n    }\n    runTarget(useCase.key, target);\n  };\n\n  const rowMenu = (item: TEntity) =>\n    hasRowMenu ? (\n      <Menu>\n        <Menu.Trigger aria-label={t('table.actions')}>\n          {OVERFLOW_GLYPH}\n        </Menu.Trigger>\n        <Menu.Items>\n          {rowUseCases.map(useCase => (\n            <Menu.Item\n              key={useCase.key}\n              tone={\n                useCase.confirm?.tone === 'destructive'\n                  ? 'destructive'\n                  : 'neutral'\n              }\n              onClick={() => invoke(useCase, { kind: 'row', item })}\n            >\n              {translateKey(useCase.labelKey)}\n            </Menu.Item>\n          ))}\n        </Menu.Items>\n      </Menu>\n    ) : undefined;\n\n  /**\n   * Selection wins over navigation: a picker's row must set the value, not send\n   * the user away from the form they came from.\n   *\n   * The row menu sits *beside* whichever of the two applies rather than\n   * replacing it — \"open this record\" and \"run a verb on it\" are both true at\n   * once, and folding the first into the menu would bury the action every row\n   * of a list exists for.\n   */\n  const recordAction = (item: TEntity) => {\n    const primary = onSelect ? (\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        onClick={() => onSelect(item)}\n      >\n        {t('table.select')}\n      </Button>\n    ) : hrefFor ? (\n      <Link href={hrefFor(item.id)}>{t('table.open')}</Link>\n    ) : undefined;\n\n    const menu = rowMenu(item);\n    if (!menu) return primary;\n\n    return (\n      <span className=\"flex items-center gap-2xs\">\n        {primary}\n        {menu}\n      </span>\n    );\n  };\n\n  /**\n   * \"No records\" is a statement about the data; after a failed load it would be\n   * a lie about it. The distinction matters most to the user who is deciding\n   * whether their catalog is empty or their backend is down.\n   */\n  const emptyMessage = error ? t('table.error') : t('table.empty');\n\n  return (\n    <div className=\"flex flex-col gap-s\">\n      {/*\n        One announcement for the whole table, not one per layout. Both the grid\n        and the card list are always in the DOM — CSS picks which is visible —\n        so a live region inside each meant assistive tech was told twice that\n        the table was loading. The shimmer itself is aria-hidden, so this is the\n        only thing that carries the news.\n      */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {isFirstLoad ? t('table.loading') : ''}\n      </span>\n\n      {showControls && (\n        <TableToolbar\n          start={\n            <>\n              {newHref && <Link href={newHref}>{t('table.new')}</Link>}\n              {/* Collection-bound verbs that need no selection. They sit with\n                  `New` rather than in the bulk bar, because the bulk bar only\n                  exists while rows are ticked and these are always available. */}\n              <LoadingBoundary isLoading={isMetadataLoading} lines={0}>\n                <>\n                  {toolbarUseCases.map(useCase => (\n                    <Button\n                      key={useCase.key}\n                      type=\"button\"\n                      variant={\n                        useCase.confirm?.tone === 'destructive'\n                          ? 'destructive'\n                          : 'secondary'\n                      }\n                      size=\"sm\"\n                      disabled={isBulkRunning}\n                      onClick={() =>\n                        onBulkUseCase?.(useCase.key, everythingMatching)\n                      }\n                    >\n                      {translateKey(useCase.labelKey)}\n                    </Button>\n                  ))}\n                </>\n              </LoadingBoundary>\n              {slots.toolbar}\n            </>\n          }\n          end={\n            <>\n              <Button\n                type=\"button\"\n                variant={panel === 'filters' ? 'primary' : 'secondary'}\n                size=\"sm\"\n                onClick={() =>\n                  setPanel(current =>\n                    current === 'filters' ? 'none' : 'filters',\n                  )\n                }\n              >\n                {t('table.filters')}\n              </Button>\n              <Button\n                type=\"button\"\n                variant={panel === 'sorting' ? 'primary' : 'secondary'}\n                size=\"sm\"\n                onClick={() =>\n                  setPanel(current =>\n                    current === 'sorting' ? 'none' : 'sorting',\n                  )\n                }\n              >\n                {t('table.sorting')}\n              </Button>\n              <ColumnSettings\n                columns={columns}\n                hidden={hidden}\n                onChange={setPersonalization}\n              />\n            </>\n          }\n          panel={\n            panel === 'filters' ? (\n              <FilterBuilder<TEntity>\n                descriptors={columns.filter(column => column.filterable)}\n                value={filtering}\n                onChange={(applied: FilterGroup<TEntity>) =>\n                  onFilteringChange?.(applied)\n                }\n              />\n            ) : panel === 'sorting' ? (\n              <SortBuilder<TEntity>\n                descriptors={columns.filter(column => column.sortable)}\n                value={sorting}\n                onChange={(applied: EntitySorting<TEntity>) =>\n                  onSortingChange?.(applied)\n                }\n              />\n            ) : undefined\n          }\n        />\n      )}\n\n      {/*\n        The bar appears when there is something selected and something to do\n        with it. It sits above the rows rather than floating over them: a fixed\n        overlay covers the last row of a short page, which is the row the user\n        most likely just ticked.\n      */}\n      {selectionState && selectionSize(selectionState) > 0 && (\n        <BulkActionBar\n          count={selectionSize(selectionState)}\n          useCases={bulkUseCases}\n          busy={isBulkRunning}\n          // Offered only when this page is fully ticked and the store holds\n          // more than the page — the escalation has somewhere to escalate to.\n          matchingTotal={\n            selectionState.mode === 'ids' &&\n            allOnPageSelected &&\n            totalItems > items.length\n              ? totalItems\n              : undefined\n          }\n          onSelectAllMatching={() => setSelection(everythingMatching)}\n          onClear={() => setSelection(emptySelection<TEntity>())}\n          onUseCase={useCase =>\n            invoke(useCase, { kind: 'selection', selection: selectionState })\n          }\n        />\n      )}\n\n      {pending && (\n        <ConfirmDialog\n          open\n          tone={pending.confirm.tone}\n          title={translateKey(pending.labelKey)}\n          message={translateKey(pending.confirm.messageKey)}\n          busy={isBulkRunning}\n          onCancel={() => setPending(undefined)}\n          onConfirm={() => {\n            const { key, target } = pending;\n            setPending(undefined);\n            runTarget(key, target);\n          }}\n        />\n      )}\n\n      {bulkOutcomes && bulkOutcomes.length > 0 && onBulkDismiss && (\n        <BulkResult\n          outcomes={bulkOutcomes}\n          busy={isBulkRunning}\n          labelFor={id => {\n            const row = items.find(item => item.id === id);\n            return row ? rowLabel(row) : undefined;\n          }}\n          onRetryFailed={onBulkRetry}\n          onDismiss={onBulkDismiss}\n        />\n      )}\n\n      {/*\n        Rendered once, outside both layouts, and independently of whether there\n        are rows: a refetch that fails leaves the previous page on screen, and\n        without this the user would read stale data as current.\n      */}\n      {error && (\n        <p\n          role=\"alert\"\n          data-testid=\"entity-table-error\"\n          className=\"rounded-sm border border-danger bg-danger-subtle px-s py-2xs text-step-sm text-danger\"\n        >\n          {errorMessage(error)}\n        </p>\n      )}\n\n      {/* Wide viewports: a grid. */}\n      <div className={`${pivot.grid} ${busyClass}`}>\n        <Table>\n          <TableHead>\n            {slots.header ? (\n              slots.header.render(visibleColumns)\n            ) : (\n              <tr>\n                {selectable && (\n                  <TableHeaderCell>\n                    <Checkbox\n                      aria-label={t('table.selectAllOnPage')}\n                      checked={allOnPageSelected}\n                      indeterminate={someOnPageSelected}\n                      disabled={isBulkRunning || items.length === 0}\n                      onChange={event =>\n                        toggleAllOnPage(\n                          event.currentTarget.checked,\n                          selectionState,\n                        )\n                      }\n                    />\n                  </TableHeaderCell>\n                )}\n                {visibleColumns.map(column => (\n                  <TableHeaderCell key={column.name}>\n                    {column.header ?? column.label}\n                  </TableHeaderCell>\n                ))}\n                {hasRowAction && (\n                  <TableHeaderCell>{t('table.actions')}</TableHeaderCell>\n                )}\n              </tr>\n            )}\n          </TableHead>\n          <TableBody aria-busy={isLoading || undefined}>\n            {/* Skeleton rows rather than the word \"Loading\", and one per column\n                rather than a single full-width blob: the placeholder occupies\n                the real grid, so the swap to rows shifts nothing sideways.\n                `TableMessageRow` is deliberately bypassed — it is one centred\n                full-span cell and cannot express the geometry. */}\n            {showSkeleton &&\n              (customSkeleton ? (\n                <TableMessageRow colSpan={columnCount}>\n                  {customSkeleton}\n                </TableMessageRow>\n              ) : (\n                skeletonRows.map(row => (\n                  <TableRow key={row}>\n                    {selectable && (\n                      <TableCell>\n                        <Skeleton shape=\"line\" className=\"w-4\" />\n                      </TableCell>\n                    )}\n                    {visibleColumns.map(column => (\n                      <TableCell key={column.name}>\n                        <Skeleton shape=\"line\" className=\"w-full\" />\n                      </TableCell>\n                    ))}\n                    {hasRowAction && (\n                      <TableCell>\n                        <Skeleton shape=\"line\" className=\"w-16\" />\n                      </TableCell>\n                    )}\n                  </TableRow>\n                ))\n              ))}\n            {!isLoading && items.length === 0 && (\n              <TableMessageRow colSpan={columnCount}>\n                {emptyMessage}\n              </TableMessageRow>\n            )}\n            {items.map((item, index) =>\n              slots.row ? (\n                // A Fragment carries the key without wrapping the custom row in\n                // an element `<tbody>` would reject.\n                <Fragment key={String(item.id ?? index)}>\n                  {slots.row.render(item, visibleColumns)}\n                </Fragment>\n              ) : (\n                <TableRow key={String(item.id ?? index)}>\n                  {selectionState && (\n                    <TableCell>\n                      {selectionCell(item, index, selectionState)}\n                    </TableCell>\n                  )}\n                  {visibleColumns.map(column => (\n                    <TableCell key={column.name}>\n                      {renderCell(column, item)}\n                    </TableCell>\n                  ))}\n                  {hasRowAction && <TableCell>{recordAction(item)}</TableCell>}\n                </TableRow>\n              ),\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Narrow viewports: the same columns pivoted into cards. */}\n      <div\n        className={`${pivot.cards} flex flex-col gap-2xs ${busyClass}`}\n        aria-busy={isLoading || undefined}\n      >\n        {/* The card pivot gets card-shaped placeholders, not a bare shimmer\n            block: the border, radius and padding are the geometry here. */}\n        {showSkeleton &&\n          (customSkeleton ??\n            skeletonRows.map(row => (\n              <EntityRecordCard\n                key={row}\n                columns={visibleColumns}\n                renderCell={() => <Skeleton shape=\"line\" className=\"w-24\" />}\n              />\n            )))}\n        {!isLoading && items.length === 0 && (\n          <p className=\"text-step-sm text-content-muted\">{emptyMessage}</p>\n        )}\n        {items.map((item, index) => (\n          <EntityRecordCard\n            key={String(item.id ?? index)}\n            columns={visibleColumns}\n            // The card is handed the resolved columns themselves, so the\n            // narrow layout goes through the exact same renderers as the grid.\n            renderCell={column =>\n              renderCell(column as EntityTableColumn<TEntity>, item)\n            }\n            leading={\n              selectionState\n                ? selectionCell(item, index, selectionState)\n                : undefined\n            }\n            actions={recordAction(item)}\n          />\n        ))}\n      </div>\n\n      <Pagination\n        currentPage={currentPage}\n        pageSize={pageSize}\n        totalItems={totalItems}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n      />\n\n      {slots.rest}\n    </div>\n  );\n}\n"],"names":["emptySelection","EntifixLogicError","extractMetaEntity","isSelected","selectionSize","toggleSelected","Fragment","useRef","useState","useErrorMessage","useT","useTranslateKey","OVERFLOW_GLYPH","useCasesForSurface","Button","CellValue","Checkbox","Skeleton","Table","TableBody","TableCell","TableHead","TableHeaderCell","TableMessageRow","TableRow","Link","BulkActionBar","BulkResult","ColumnSettings","ConfirmDialog","EntityRecordCard","FilterBuilder","LoadingBoundary","Menu","Pagination","SortBuilder","TableToolbar","readEntityTableSlots","useEntityTableColumns","PIVOT_CLASS","sm","grid","cards","md","lg","SKELETON_ROW_CAP","EntityTable","entityConstructor","isLoading","skeleton","error","items","totalItems","currentPage","pageSize","onPageChange","onPageSizeChange","hrefFor","newHref","onSelect","preferencesKey","showControls","pivotBreakpoint","filtering","sorting","onFilteringChange","onSortingChange","selection","onSelectionChange","metadata","isMetadataLoading","onBulkUseCase","onUseCase","bulkOutcomes","onBulkDismiss","onBulkRetry","isBulkRunning","children","t","translateKey","errorMessage","metaEntity","slots","panel","setPanel","pending","setPending","undefined","columns","visibleColumns","hidden","setPersonalization","key","name","pivot","selectionState","selectable","rowUseCases","useCases","bulkUseCases","toolbarUseCases","hasRowMenu","length","everythingMatching","mode","total","excluded","Set","hasRowAction","columnCount","isFirstLoad","isRefetching","customSkeleton","showSkeleton","skeletonRows","Array","from","Math","min","_","index","busyClass","renderCell","column","item","render","value","descriptor","anchorIndex","setSelection","next","toggleRow","checked","shiftKey","current","start","end","row","slice","id","pageIds","map","selectedOnPage","filter","allOnPageSelected","someOnPageSelected","toggleAllOnPage","rowLabel","named","find","type","String","selectionCell","aria-label","record","disabled","onChange","event","currentTarget","nativeEvent","runTarget","target","kind","invoke","useCase","confirm","labelKey","rowMenu","Trigger","Items","Item","tone","onClick","recordAction","primary","variant","size","href","menu","span","className","emptyMessage","div","role","aria-live","lines","toolbar","descriptors","filterable","applied","sortable","count","busy","matchingTotal","onSelectAllMatching","onClear","open","title","message","messageKey","onCancel","onConfirm","outcomes","labelFor","onRetryFailed","onDismiss","p","data-testid","header","tr","indeterminate","label","aria-busy","colSpan","shape","leading","actions","rest"],"mappings":"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"}