@pilotiq/pilotiq 0.7.2 → 0.8.1

package/dist/react/schemaRenderer/table/TableRendererBody.js

@@ -0,0 +1,555 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { ChevronDownIcon, GripVerticalIcon, InboxIcon } from 'lucide-react';
+import { useNavigate } from '../../navigate.js';
+import { readStoredFlag, writeStoredFlag } from '../../persistedState.js';
+import { useToast } from '../../Toaster.js';
+import { Checkbox } from '../../ui/checkbox.js';
+import { Input } from '../../ui/input.js';
+import { Table as DataTable, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '../../ui/table.js';
+import { pickEditableCell } from '../../cells/EditableCell.js';
+import { resolveIcon } from '../helpers.js';
+import { buildTableQuery, nextSortDir, prefixK, SearchFormHiddenInputs, } from './url.js';
+import { formatCell, rowId } from './formatCell.js';
+import { ActiveFiltersBar, ColumnsToggleDropdown, FilterPopover, FilterStrip, FilterStripToggle, GroupHeaderText, resolveColumnUrl, SortByPicker, TableGroupPicker, } from './filters.js';
+import { ActiveGroupKeyChip, GroupHeadingLink, RecordCellLink } from './links.js';
+import { CardsLayoutBody } from './CardsLayoutBody.js';
+import { renderRowActions } from './renderRowActions.js';
+import { useRowReorderDnd } from '../../fields/useRowReorderDnd.js';
+export function TableRendererBody({ el, deps }) {
+    const { renderElement, renderActionLike, renderFormChild } = deps;
+    const navigate = useNavigate();
+    const children = el.children ?? [];
+    const columns = children.filter(c => c.type === 'column');
+    // `Column.toggleable()` columns — sourced from the resolved meta. The
+    // user's per-table visibility map is owned + persisted below; the full
+    // `columns` list stays available for the toolbar dropdown so hidden
+    // columns can be re-shown without a roundtrip.
+    const toggleableColumns = columns.filter(c => c['toggleable'] !== undefined);
+    // Actions and ActionGroups share placement — both show up in the
+    // header/bulk/row toolbars depending on their `placement` field.
+    const actionLike = children.filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent');
+    const filters = children.filter(c => c.type === 'filter');
+    const hasRecordUrl = Boolean(el['recordUrl']);
+    const hasRecordClasses = Boolean(el['recordClasses']);
+    const pollInterval = typeof el['pollInterval'] === 'number' ? el['pollInterval'] : undefined;
+    const defaultGroup = typeof el['defaultGroup'] === 'string' ? el['defaultGroup'] : undefined;
+    const activeGroupKey = typeof el['activeGroupKey'] === 'string' ? el['activeGroupKey'] : undefined;
+    const summaries = el['summaries'];
+    const groupSummaries = el['groupSummaries'];
+    const groupOptions = el['groups'] ?? [];
+    // Active group's registered metadata (if any). Falls back to a synth
+    // for the bare-column form so the heading row still has a label.
+    const activeGroupMeta = defaultGroup
+        ? (groupOptions.find(g => g.column === defaultGroup) ?? {
+            column: defaultGroup,
+            label: (() => {
+                const col = columns.find(c => c['name'] === defaultGroup);
+                return col ? String(col['label'] ?? defaultGroup) : defaultGroup;
+            })(),
+        })
+        : undefined;
+    const groupColumnLabel = activeGroupMeta?.label;
+    // Heading text becomes a real `<a href>` when the active group opts in
+    // via `.scopable()`. Synthesized bare-column groups can't be scopable
+    // (no builder call ran).
+    const groupHeadingScopable = activeGroupMeta !== undefined
+        && activeGroupMeta.scopable === true;
+    // Auto-refresh: re-visit current URL on a timer so sort/filter/pagination
+    // state survives. Pause while the document is hidden — background tabs
+    // shouldn't keep hammering the server.
+    useEffect(() => {
+        if (!pollInterval || pollInterval <= 0)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        let timerId;
+        const tick = () => navigate(window.location.pathname + window.location.search);
+        const start = () => {
+            if (timerId === undefined)
+                timerId = setInterval(tick, pollInterval * 1000);
+        };
+        const stop = () => {
+            if (timerId !== undefined) {
+                clearInterval(timerId);
+                timerId = undefined;
+            }
+        };
+        if (document.visibilityState === 'visible')
+            start();
+        const onVis = () => {
+            if (document.visibilityState === 'visible')
+                start();
+            else
+                stop();
+        };
+        document.addEventListener('visibilitychange', onVis);
+        return () => {
+            document.removeEventListener('visibilitychange', onVis);
+            stop();
+        };
+    }, [pollInterval, navigate]);
+    // Group actions by placement. `inline` defaults to header so it shows up
+    // somewhere visible — explicit placements always win.
+    const placementOf = (a) => String(a['placement'] ?? 'inline');
+    const headerActions = actionLike.filter(a => { const p = placementOf(a); return p === 'header' || p === 'inline'; });
+    const bulkActions = actionLike.filter(a => placementOf(a) === 'bulk');
+    const rowActions = actionLike.filter(a => placementOf(a) === 'row');
+    const rawRows = el['rows'] ?? [];
+    const total = el['total'] ?? rawRows.length;
+    const search = el['search'];
+    const currentSort = el['currentSort'];
+    const currentPage = el['currentPage'] ?? 1;
+    const perPage = el['perPage'];
+    const searchable = Boolean(el['searchable']);
+    const currentPath = el['currentPath'] ?? '';
+    // `Column.toggleable()` user-visibility map. Persisted per-table at
+    // `pilotiq.table.<currentPath>.columns.<name>` ('1' = hidden,
+    // '0' = visible). On first paint, fall back to `meta.toggleable.initiallyHidden`.
+    // SSR returns the meta default — the localStorage hydrate happens
+    // inside the effect so server + first client render match.
+    const columnsVisibilityKey = (name) => `pilotiq.table.${currentPath}.columns.${name}`;
+    const initialHidden = () => {
+        const out = new Set();
+        for (const col of toggleableColumns) {
+            const cfg = col['toggleable'];
+            if (cfg?.initiallyHidden)
+                out.add(String(col['name']));
+        }
+        return out;
+    };
+    const [hiddenColumns, setHiddenColumns] = useState(initialHidden);
+    useEffect(() => {
+        if (toggleableColumns.length === 0)
+            return;
+        const next = new Set();
+        for (const col of toggleableColumns) {
+            const name = String(col['name']);
+            const cfg = col['toggleable'];
+            if (readStoredFlag(columnsVisibilityKey(name), Boolean(cfg?.initiallyHidden))) {
+                next.add(name);
+            }
+        }
+        setHiddenColumns(next);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPath, toggleableColumns.length]);
+    const toggleColumnHidden = (name, nextHidden) => {
+        setHiddenColumns(prev => {
+            const next = new Set(prev);
+            if (nextHidden)
+                next.add(name);
+            else
+                next.delete(name);
+            writeStoredFlag(columnsVisibilityKey(name), nextHidden);
+            return next;
+        });
+    };
+    // Filtered column list used by every render path (header, body cells,
+    // group + footer summaries, empty-state colSpan). Non-toggleable
+    // columns always survive.
+    const visibleColumns = columns.filter(c => !hiddenColumns.has(String(c['name'])));
+    // Tier-3 — when the table opts into `Table.queryStringIdentifier(...)`,
+    // every URL key (search / sort / page / perPage / group / filter names)
+    // gets prefixed with `${id}_` so multiple tables on one page don't
+    // collide on `?search=` etc. Bare keys still apply when unset.
+    const queryPrefix = typeof el['queryStringIdentifier'] === 'string'
+        ? el['queryStringIdentifier']
+        : undefined;
+    // Reorderable rows — grip column + HTML5 DnD wiring. Rows live in
+    // local state during a drag so the optimistic reorder happens
+    // immediately; on POST failure we roll back to the server's order.
+    const reorderableColumn = typeof el['reorderableColumn'] === 'string' ? el['reorderableColumn'] : undefined;
+    const reorderUrl = typeof el['reorderUrl'] === 'string' ? el['reorderUrl'] : undefined;
+    const [reorderRowsLocal, setReorderRowsLocal] = useState(null);
+    const rows = reorderRowsLocal ?? rawRows;
+    const { notify } = useToast();
+    // Read the explicit `?group=` value out of the URL so sort/pagination
+    // links preserve "None" overrides (`?group=`). Server render: no URL,
+    // so we fall back to `defaultGroup` from the meta — which is already
+    // the reconciled active column.
+    const urlGroup = typeof window === 'undefined'
+        ? undefined
+        : (() => {
+            const sp = new URLSearchParams(window.location.search);
+            const k = prefixK(queryPrefix, 'group');
+            return sp.has(k) ? sp.get(k) : undefined;
+        })();
+    // Collapsible groups — per-group fold state. Keyed by `_groupValue`
+    // (the raw column value, NOT the resolved title) so rows that share a
+    // group key fold together. Persisted in localStorage at
+    // `pilotiq.table.<currentPath>.groups.<column>.<value>`. Default-
+    // collapsed groups derive their initial state from `meta.collapsed`.
+    const groupCollapsible = activeGroupMeta?.collapsible === true;
+    const groupDefaultCollapsed = activeGroupMeta?.collapsed === true;
+    const groupStorageKey = (groupValue) => `pilotiq.table.${currentPath}.groups.${defaultGroup ?? ''}.${groupValue}`;
+    // Lazy-init from localStorage on mount; SSR returns the meta default.
+    const [collapsedGroups, setCollapsedGroups] = useState({});
+    useEffect(() => {
+        if (!groupCollapsible || !defaultGroup)
+            return;
+        // Walk the rendered rows once on mount, picking up persisted state.
+        const next = {};
+        const seen = new Set();
+        for (const row of rows) {
+            const v = String(row['_groupValue'] ?? '');
+            if (seen.has(v))
+                continue;
+            seen.add(v);
+            next[v] = readStoredFlag(groupStorageKey(v), groupDefaultCollapsed);
+        }
+        setCollapsedGroups(next);
+        // Re-run if the active group changes — different values, different
+        // localStorage namespace.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultGroup, groupCollapsible, groupDefaultCollapsed, currentPath]);
+    const toggleGroupCollapsed = (groupValue) => {
+        setCollapsedGroups(prev => {
+            const nextOpen = !prev[groupValue];
+            const next = { ...prev, [groupValue]: nextOpen };
+            writeStoredFlag(groupStorageKey(groupValue), nextOpen);
+            return next;
+        });
+    };
+    const state = {
+        ...(search !== undefined ? { search } : {}),
+        ...(currentSort !== undefined ? { sort: currentSort } : {}),
+        page: currentPage,
+        ...(urlGroup !== undefined ? { group: urlGroup }
+            : defaultGroup !== undefined ? { group: defaultGroup }
+                : {}),
+        ...(activeGroupKey !== undefined ? { groupKey: activeGroupKey } : {}),
+    };
+    // Snapshot active filter values for sort/pagination href construction.
+    // Filter form submits already carry these (selects are inside the
+    // form); `<a href>` links don't, so we re-emit them here.
+    const activeFilters = {};
+    for (const f of filters) {
+        const v = f['value'];
+        if (typeof v === 'string' && v !== '')
+            activeFilters[String(f['name'])] = v;
+    }
+    // Drill-in / drill-out URL builders for the group heading link and the
+    // active-key chip's clear button. Drill-in sets `?<prefix>groupKey=v`
+    // and resets `page`; drill-out clears it. Both round-trip foreign
+    // params (other tables' state) through `buildTableQuery`.
+    const buildGroupKeyHref = (value) => buildTableQuery(state, { groupKey: value, page: 1 }, currentPath, activeFilters, queryPrefix);
+    const drillOutHref = () => buildTableQuery(state, { groupKey: '', page: 1 }, currentPath, activeFilters, queryPrefix);
+    // Track which row ids are currently checked. Keyed by id (string), not
+    // by index, so pagination and re-renders don't drop selection state.
+    const [selected, setSelected] = useState(() => new Set());
+    const visibleIds = rows.map((row, i) => rowId(row, i));
+    const allChecked = visibleIds.length > 0 && visibleIds.every(id => selected.has(id));
+    const someChecked = selected.size > 0;
+    const toggleRow = (id) => {
+        setSelected(prev => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const toggleAll = () => {
+        setSelected(prev => {
+            if (visibleIds.every(id => prev.has(id))) {
+                const next = new Set(prev);
+                for (const id of visibleIds)
+                    next.delete(id);
+                return next;
+            }
+            const next = new Set(prev);
+            for (const id of visibleIds)
+                next.add(id);
+            return next;
+        });
+    };
+    if (columns.length === 0) {
+        return (_jsx("div", { className: "rounded-xl border bg-card p-6 text-sm text-muted-foreground", children: "No columns configured for this table." }));
+    }
+    const isCardsLayout = el['contentLayout'] === 'cards';
+    const cardsPerRow = el['cardsPerRow'];
+    const totalPages = perPage && perPage > 0 ? Math.max(1, Math.ceil(total / perPage)) : 1;
+    const showPagination = totalPages > 1;
+    const hasFilters = filters.length > 0;
+    // Filter layout positions (Filament v5). `'modal'` (default) keeps the
+    // toolbar Filters button + popover. The three inline modes lay every
+    // filter widget out as a wrapping strip in the matching slot. The
+    // collapsible variant adds a toolbar toggle + per-table-path persisted
+    // open state.
+    const filtersLayout = el['filtersLayout'] ?? 'modal';
+    const filtersInModal = filtersLayout === 'modal';
+    const filtersAbove = filtersLayout === 'above-content'
+        || filtersLayout === 'above-content-collapsible';
+    const filtersBelow = filtersLayout === 'below-content';
+    const filtersCollapsible = filtersLayout === 'above-content-collapsible';
+    const filtersStripStorageKey = `pilotiq.table.${currentPath}.filters.open`;
+    const [filtersOpen, setFiltersOpen] = useState(() => {
+        if (!filtersCollapsible)
+            return true;
+        // Default to OPEN when filters are active (URL carried filter values
+        // in) so the user can see what's filtering — same UX cue as the
+        // active-filters pill row.
+        return readStoredFlag(filtersStripStorageKey, Object.keys(activeFilters).length > 0);
+    });
+    const toggleFiltersOpen = () => {
+        setFiltersOpen(prev => {
+            const next = !prev;
+            writeStoredFlag(filtersStripStorageKey, next);
+            return next;
+        });
+    };
+    // Show the "Group by" dropdown when 2+ groups are registered, or 1
+    // group with rich metadata (label/collapsible/etc.). A single bare
+    // `defaultGroup('col')` with no `groups([...])` registration shouldn't
+    // render the picker — there's nothing to pick.
+    const hasGroupPicker = groupOptions.length >= 2
+        || (groupOptions.length === 1 && Boolean(groupOptions[0].collapsible
+            || groupOptions[0].collapsed
+            || groupOptions[0].date));
+    const sortableColumns = isCardsLayout ? columns.filter(c => Boolean(c['sortable'])) : [];
+    const hasSortPicker = isCardsLayout && sortableColumns.length > 0;
+    // Only modal + collapsible mount a toolbar widget; the always-visible
+    // strip modes don't add anything to the header bar.
+    const showFiltersInToolbar = hasFilters && (filtersInModal || filtersCollapsible);
+    const hasColumnsToggle = toggleableColumns.length > 0;
+    const showHeaderBar = searchable || headerActions.length > 0 || showFiltersInToolbar || hasGroupPicker || hasSortPicker || hasColumnsToggle;
+    const hasBulkActions = bulkActions.length > 0;
+    const hasRowActions = rowActions.length > 0;
+    // Drag-to-reorder is enabled only when the visible rows ARE the
+    // canonical sort. Filters / search / non-default sort / pagination
+    // beyond page 1 all break that invariant; we render the grip column
+    // greyed-out instead of letting the user reorder a slice that won't
+    // round-trip cleanly. `reorderableColumn` is set server-side when
+    // `Table.reorderable()` opts in.
+    const sortMatchesReorder = currentSort?.column === reorderableColumn &&
+        currentSort?.direction === 'asc';
+    const filtersActive = Object.keys(activeFilters).length > 0;
+    const searchActive = typeof search === 'string' && search !== '';
+    const reorderEnabled = reorderableColumn !== undefined &&
+        reorderUrl !== undefined &&
+        sortMatchesReorder &&
+        !filtersActive &&
+        !searchActive &&
+        currentPage === 1;
+    const reorderColumnVisible = reorderableColumn !== undefined;
+    // ── Reorder DnD state + handlers ──────────────────────
+    const { dragId, dropAt, onDragStart: onRowDragStart, onDragOver: onRowDragOver, onDrop: onRowDrop, onDragEnd: onRowDragEnd, } = useRowReorderDnd({
+        enabled: reorderEnabled,
+        onDrop: async (fromId, at) => {
+            if (!reorderUrl)
+                return;
+            const fromIdx = visibleIds.findIndex(id => id === fromId);
+            if (fromIdx < 0)
+                return;
+            const target = at > fromIdx ? at - 1 : at;
+            if (target === fromIdx)
+                return;
+            const reordered = rows.slice();
+            const moved = reordered.splice(fromIdx, 1)[0];
+            reordered.splice(target, 0, moved);
+            const newIds = reordered.map((row, i) => rowId(row, i));
+            const previousLocal = reorderRowsLocal;
+            setReorderRowsLocal(reordered);
+            try {
+                const res = await fetch(reorderUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+                    body: JSON.stringify({ ids: newIds }),
+                });
+                if (!res.ok)
+                    throw new Error(`Reorder failed (${res.status})`);
+            }
+            catch (err) {
+                // Roll back to server order. The toast surfaces the failure;
+                // next page render fetches the persisted column.
+                setReorderRowsLocal(previousLocal);
+                notify({
+                    type: 'error',
+                    title: 'Could not save new order',
+                    body: err instanceof Error ? err.message : 'Reorder failed',
+                });
+            }
+        },
+    });
+    const totalCols = visibleColumns.length
+        + (hasBulkActions ? 1 : 0)
+        + (hasRowActions ? 1 : 0)
+        + (reorderColumnVisible ? 1 : 0);
+    // Top-bar chrome (heading / description / striped / emptyState).
+    const tableHeading = el['heading'];
+    const tableDescription = el['description'];
+    const striped = Boolean(el['striped']);
+    const emptyState = el['emptyState'];
+    const filteredEmptyState = el['filteredEmptyState'];
+    const hasFilterOrSearch = (search !== undefined && search !== '') ||
+        Object.keys(activeFilters).length > 0;
+    // Distinct copy when a query / filter is active. Falls back to
+    // `emptyState` when `filteredEmptyState` is not set, preserving the
+    // pre-2026-05-04 behavior for tables that haven't opted in.
+    const activeEmpty = (hasFilterOrSearch && filteredEmptyState) ? filteredEmptyState : emptyState;
+    const EmptyIcon = activeEmpty?.icon ? (resolveIcon(activeEmpty.icon) ?? InboxIcon) : InboxIcon;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [(tableHeading || tableDescription) && (_jsxs("div", { className: "flex flex-col gap-1", children: [tableHeading && _jsx("h2", { className: "text-lg font-semibold", children: tableHeading }), tableDescription && _jsx("p", { className: "text-sm text-muted-foreground", children: tableDescription })] })), showHeaderBar && (_jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between", children: [(searchable || showFiltersInToolbar || hasGroupPicker || hasSortPicker || hasColumnsToggle) ? (_jsxs("div", { className: "flex items-center gap-2", children: [searchable && (_jsxs("form", { method: "get", action: currentPath || undefined, className: "flex items-end gap-2", children: [_jsx(SearchFormHiddenInputs, { prefix: queryPrefix }), _jsx(Input, { type: "search", name: prefixK(queryPrefix, 'search'), defaultValue: search ?? '', placeholder: "Search\u2026", className: "h-9 w-64" }), _jsx("button", { type: "submit", className: "sr-only", tabIndex: -1, "aria-hidden": "true", children: "Apply" })] })), hasFilters && filtersInModal && (_jsx(FilterPopover, { filters: filters, prefix: queryPrefix, renderFormChild: renderFormChild })), hasFilters && filtersCollapsible && (_jsx(FilterStripToggle, { filters: filters, open: filtersOpen, onToggle: toggleFiltersOpen })), hasGroupPicker && (_jsx(TableGroupPicker, { options: groupOptions, active: defaultGroup, onChange: (value) => {
+                                    // value === '' → explicit "None" (clears defaultGroup);
+                                    // value !== '' → switch to that column.
+                                    const href = buildTableQuery(state, { page: 1, group: value }, currentPath, activeFilters, queryPrefix);
+                                    navigate(href);
+                                } })), hasSortPicker && (_jsx(SortByPicker, { columns: sortableColumns, active: currentSort, onChange: (column, direction) => {
+                                    const href = buildTableQuery(state, { sort: { column, direction }, page: 1 }, currentPath, activeFilters, queryPrefix);
+                                    navigate(href);
+                                } })), toggleableColumns.length > 0 && (_jsx(ColumnsToggleDropdown, { columns: toggleableColumns, hidden: hiddenColumns, onToggle: toggleColumnHidden }))] })) : _jsx("span", {}), headerActions.length > 0 && (_jsx("div", { className: "flex items-center gap-2", children: headerActions.map((a, i) => renderActionLike(a, i)) }))] })), hasFilters && filtersInModal && _jsx(ActiveFiltersBar, { filters: filters, prefix: queryPrefix }), hasFilters && filtersAbove && filtersOpen && (_jsx(FilterStrip, { filters: filters, prefix: queryPrefix, renderFormChild: renderFormChild })), activeGroupKey !== undefined && (_jsx(ActiveGroupKeyChip, { label: groupColumnLabel ?? defaultGroup ?? '', value: activeGroupKey, displayValue: (() => {
+                    // Prefer a row-resolved `_groupTitle` (server stamped via
+                    // `getTitleFromRecordUsing`) so the chip reads the same as
+                    // a banded heading. Falls back to the raw bucket key when
+                    // no row matched — empty drilled-in pages still show what
+                    // they're drilled into.
+                    for (const r of rows) {
+                        const obj = r;
+                        if (String(obj['_groupValue'] ?? '') !== activeGroupKey)
+                            continue;
+                        const t = obj['_groupTitle'];
+                        if (typeof t === 'string' && t !== '')
+                            return t;
+                        break;
+                    }
+                    return activeGroupKey;
+                })(), clearHref: drillOutHref(), navigate: navigate })), hasBulkActions && someChecked && (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [selected.size, " selected"] }), _jsxs("div", { className: "flex items-center gap-2", children: [bulkActions.map((a, i) => renderActionLike(a, i, { ids: Array.from(selected) })), _jsx("button", { type: "button", onClick: () => setSelected(new Set()), className: "text-xs text-muted-foreground hover:text-foreground", children: "Clear" })] })] })), isCardsLayout ? (_jsx(CardsLayoutBody, { rows: rows, visibleIds: visibleIds, selected: selected, toggleRow: toggleRow, hasBulkActions: hasBulkActions, hasRowActions: hasRowActions, rowActions: rowActions, hasRecordUrl: hasRecordUrl, hasRecordClasses: hasRecordClasses, activeEmpty: activeEmpty, EmptyIcon: EmptyIcon, hasFilterOrSearch: hasFilterOrSearch, defaultGroup: defaultGroup, groupColumnLabel: groupColumnLabel, groupCollapsible: groupCollapsible, collapsedGroups: collapsedGroups, toggleGroupCollapsed: toggleGroupCollapsed, cardsPerRow: cardsPerRow, navigate: navigate, groupHeadingScopable: groupHeadingScopable, buildGroupKeyHref: buildGroupKeyHref, renderElement: renderElement, renderRowActions: (id, recordObj, actions) => renderRowActions(id, recordObj, actions, renderActionLike) })) : (_jsx("div", { className: "rounded-xl border bg-card overflow-hidden", children: _jsxs(DataTable, { children: [_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { children: [reorderColumnVisible && (_jsx(TableHead, { className: "w-9 px-2", "aria-label": "Reorder" })), hasBulkActions && (_jsx(TableHead, { className: "w-9 px-3", children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allChecked, onCheckedChange: () => toggleAll() }) })), visibleColumns.map((col, i) => {
+                                        const name = String(col['name'] ?? '');
+                                        const label = String(col['label'] ?? name);
+                                        const sortable = Boolean(col['sortable']);
+                                        const isActive = currentSort?.column === name;
+                                        if (!sortable) {
+                                            return (_jsx(TableHead, { className: "text-xs uppercase tracking-wider", children: label }, i));
+                                        }
+                                        const next = nextSortDir(currentSort, name);
+                                        const href = buildTableQuery(state, { sort: next, page: 1 }, currentPath, activeFilters, queryPrefix);
+                                        return (_jsx(TableHead, { className: "text-xs uppercase tracking-wider", children: _jsxs("a", { href: href, className: "inline-flex items-center gap-1 hover:text-foreground", children: [label, _jsx("span", { className: "text-muted-foreground/70", children: isActive ? (currentSort.direction === 'asc' ? '↑' : '↓') : '↕' })] }) }, i));
+                                    }), hasRowActions && (_jsx(TableHead, { className: "w-px text-right text-xs uppercase tracking-wider", children: _jsx("span", { className: "sr-only", children: "Actions" }) }))] }) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: totalCols, className: "py-12 text-center", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [_jsx(EmptyIcon, { className: "size-8 opacity-60" }), _jsx("p", { className: "text-base font-medium text-foreground", children: activeEmpty?.heading
+                                                    ?? (hasFilterOrSearch ? 'No matching records' : 'No records yet') }), (activeEmpty?.description ||
+                                                (hasFilterOrSearch && !activeEmpty?.description)) && (_jsx("p", { className: "text-sm", children: activeEmpty?.description
+                                                    ?? 'Try clearing filters or adjusting your search.' }))] }) }) })) : rows.map((row, ri) => {
+                                const id = visibleIds[ri];
+                                const recordObj = row;
+                                const isSelected = selected.has(id);
+                                const stripedClass = striped && ri % 2 === 1 ? 'bg-muted/30' : '';
+                                // Group banding — emit a heading row whenever `_groupValue`
+                                // differs from the previous row. The first row in any group
+                                // gets the heading; rows within keep their normal chrome.
+                                const groupValue = defaultGroup
+                                    ? String(recordObj['_groupValue'] ?? '')
+                                    : undefined;
+                                const groupTitle = defaultGroup
+                                    ? recordObj['_groupTitle']
+                                    : undefined;
+                                const groupDescription = defaultGroup
+                                    ? recordObj['_groupDescription']
+                                    : undefined;
+                                const prevGroupValue = defaultGroup && ri > 0
+                                    ? String((rows[ri - 1]['_groupValue'] ?? ''))
+                                    : undefined;
+                                const showGroupHeader = defaultGroup !== undefined && groupValue !== prevGroupValue;
+                                // Hide data rows whose group is collapsed. The heading row
+                                // for that group still renders (so the user can re-expand).
+                                const isInCollapsedGroup = groupCollapsible && groupValue !== undefined && collapsedGroups[groupValue] === true;
+                                // Filament-style per-cell linking. Each data cell wraps
+                                // its content in a real `<a href>` when the column resolves
+                                // to a record URL — column override (`Column.recordUrl(fn)`)
+                                // beats inheritance from the table (`Table.recordUrl(fn)`),
+                                // and `Column.recordUrl(false)` opts out. Action and bulk
+                                // cells are never wrapped, so clicks there fire only their
+                                // own handlers — no event-bubbling gymnastics.
+                                const tableUrl = hasRecordUrl ? recordObj['_recordUrl'] : undefined;
+                                const colUrls = recordObj['_columnRecordUrls'] ?? {};
+                                const rowHasAnyLink = tableUrl !== undefined || Object.keys(colUrls).length > 0;
+                                const customRowClasses = hasRecordClasses
+                                    ? recordObj['_recordClasses'] ?? ''
+                                    : '';
+                                const rowClassName = [stripedClass, rowHasAnyLink ? 'cursor-pointer' : '', customRowClasses]
+                                    .filter(Boolean)
+                                    .join(' ')
+                                    .trim();
+                                return (_jsxs(React.Fragment, { children: [showGroupHeader && (_jsx(TableRow, { className: "bg-muted/40 hover:bg-muted/40", children: _jsx(TableCell, { colSpan: totalCols, className: "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: (() => {
+                                                    const drillable = groupHeadingScopable
+                                                        && groupValue !== undefined
+                                                        && groupValue !== '';
+                                                    const headingText = (_jsx(GroupHeaderText, { label: groupColumnLabel, value: groupValue, title: groupTitle, description: groupDescription }));
+                                                    const headingNode = drillable
+                                                        ? _jsx(GroupHeadingLink, { href: buildGroupKeyHref(groupValue), navigate: navigate, children: headingText })
+                                                        : headingText;
+                                                    if (groupCollapsible) {
+                                                        return (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("button", { type: "button", className: "inline-flex items-center", onClick: () => toggleGroupCollapsed(groupValue), "aria-expanded": !isInCollapsedGroup, "aria-label": isInCollapsedGroup ? 'Expand group' : 'Collapse group', children: _jsx(ChevronDownIcon, { className: [
+                                                                            'size-4 transition-transform',
+                                                                            isInCollapsedGroup ? '-rotate-90' : '',
+                                                                        ].filter(Boolean).join(' ') }) }), headingNode] }));
+                                                    }
+                                                    return headingNode;
+                                                })() }) }, `group-${id}`)), isInCollapsedGroup ? null : (_jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: [
+                                                rowClassName,
+                                                dragId === id ? 'opacity-50' : '',
+                                                dropAt === ri && dragId !== null ? 'border-t-2 border-t-primary' : '',
+                                            ].filter(Boolean).join(' ') || undefined, draggable: reorderEnabled || undefined, onDragStart: reorderEnabled ? onRowDragStart(id) : undefined, onDragOver: reorderEnabled ? onRowDragOver(ri) : undefined, onDrop: reorderEnabled ? onRowDrop : undefined, onDragEnd: reorderEnabled ? onRowDragEnd : undefined, children: [reorderColumnVisible && (_jsx(TableCell, { className: "w-9 px-2", children: _jsx("span", { "aria-label": reorderEnabled ? 'Drag to reorder' : 'Reorder paused — clear filters and sort to enable', className: reorderEnabled
+                                                            ? 'inline-flex cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing'
+                                                            : 'inline-flex cursor-not-allowed text-muted-foreground/40', children: _jsx(GripVerticalIcon, { className: "size-4" }) }) })), hasBulkActions && (_jsx(TableCell, { className: "w-9 px-3", children: _jsx(Checkbox, { "aria-label": `Select row ${id}`, checked: isSelected, onCheckedChange: () => toggleRow(id) }) })), visibleColumns.map((col, ci) => {
+                                                    const name = String(col['name'] ?? '');
+                                                    const value = recordObj[name];
+                                                    const align = col['alignment'] === 'center' ? 'text-center'
+                                                        : col['alignment'] === 'end' ? 'text-right'
+                                                            : 'text-left';
+                                                    const widthStyle = col['width']
+                                                        ? { width: String(col['width']) }
+                                                        : undefined;
+                                                    // Inline-edit cells take priority over read-only chrome.
+                                                    // `_cellEditable[name]` is set per row by `loadTableRecords`
+                                                    // only when `R.canEdit(user, row)` passed; the URL was
+                                                    // stamped by `tagCellEditUrls` immediately after.
+                                                    const editableMap = recordObj['_cellEditable'];
+                                                    const editUrlMap = recordObj['_cellEditUrls'];
+                                                    const cellDisabledMap = recordObj['_cellDisabled'];
+                                                    const editUrl = editableMap?.[name] ? editUrlMap?.[name] : undefined;
+                                                    const EditableComp = editUrl !== undefined
+                                                        ? pickEditableCell(String(col['columnType'] ?? 'text'))
+                                                        : null;
+                                                    if (EditableComp && editUrl !== undefined) {
+                                                        const cellDisabled = col['disabled'] === true || cellDisabledMap?.[name] === true;
+                                                        const cellSelectOptionsMap = recordObj['_cellSelectOptions'];
+                                                        const rowOptions = cellSelectOptionsMap?.[name];
+                                                        return (_jsx(TableCell, { className: `text-sm text-foreground ${align} p-0`, style: widthStyle, children: _jsx(EditableComp, { url: editUrl, col: col, value: value, disabled: cellDisabled, ...(rowOptions ? { rowOptions } : {}) }) }, ci));
+                                                    }
+                                                    const cellContent = formatCell(value, col, recordObj);
+                                                    const colUrl = resolveColumnUrl(col, tableUrl, colUrls);
+                                                    return (_jsx(TableCell, { className: `text-sm text-foreground ${align} p-0`, style: widthStyle, children: colUrl !== undefined
+                                                            ? _jsx(RecordCellLink, { href: colUrl, navigate: navigate, children: cellContent })
+                                                            : _jsx("div", { className: "px-2 py-2", children: cellContent }) }, ci));
+                                                }), hasRowActions && (_jsx(TableCell, { className: "w-px text-right", children: renderRowActions(id, recordObj, rowActions, renderActionLike) }))] })), (() => {
+                                            if (!groupSummaries)
+                                                return null;
+                                            if (groupValue === undefined)
+                                                return null;
+                                            if (isInCollapsedGroup)
+                                                return null;
+                                            const isLastInGroup = ri === rows.length - 1
+                                                || String((rows[ri + 1]['_groupValue'] ?? '')) !== groupValue;
+                                            if (!isLastInGroup)
+                                                return null;
+                                            const perCol = groupSummaries[groupValue];
+                                            if (!perCol || Object.keys(perCol).length === 0)
+                                                return null;
+                                            return (_jsxs(TableRow, { className: "bg-muted/20 hover:bg-muted/20", children: [reorderColumnVisible && _jsx(TableCell, {}), hasBulkActions && _jsx(TableCell, {}), visibleColumns.map((col, ci) => {
+                                                        const name = String(col['name'] ?? '');
+                                                        const align = col['alignment'] === 'center' ? 'text-center'
+                                                            : col['alignment'] === 'end' ? 'text-right'
+                                                                : 'text-left';
+                                                        const items = perCol[name];
+                                                        return (_jsx(TableCell, { className: `text-xs font-medium ${align} px-2 py-1.5`, children: items?.map((s, i) => (_jsxs("div", { className: "leading-tight", children: [s.label && _jsxs("span", { className: "text-muted-foreground", children: [s.label, ": "] }), _jsx("span", { children: s.value })] }, i))) }, ci));
+                                                    }), hasRowActions && _jsx(TableCell, {})] }, `group-summary-${id}`));
+                                        })()] }, id));
+                            }) }), summaries && Object.keys(summaries).length > 0 && (_jsx(TableFooter, { children: _jsxs(TableRow, { children: [reorderColumnVisible && _jsx(TableCell, {}), hasBulkActions && _jsx(TableCell, {}), visibleColumns.map((col, ci) => {
+                                        const name = String(col['name'] ?? '');
+                                        const align = col['alignment'] === 'center' ? 'text-center'
+                                            : col['alignment'] === 'end' ? 'text-right'
+                                                : 'text-left';
+                                        const items = summaries[name];
+                                        return (_jsx(TableCell, { className: `text-sm font-medium ${align}`, children: items?.map((s, i) => (_jsxs("div", { className: "leading-tight", children: [s.label && _jsxs("span", { className: "text-muted-foreground", children: [s.label, ": "] }), _jsx("span", { children: s.value })] }, i))) }, ci));
+                                    }), hasRowActions && _jsx(TableCell, {})] }) }))] }) })), showPagination && (_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsxs("span", { children: ["Page ", currentPage, " of ", totalPages, total > 0 ? ` · ${total} record${total === 1 ? '' : 's'}` : ''] }), _jsxs("div", { className: "flex items-center gap-2", children: [currentPage > 1 && (_jsx("a", { href: buildTableQuery(state, { page: currentPage - 1 }, currentPath, activeFilters, queryPrefix), className: "rounded-md border px-3 py-1 text-xs hover:bg-muted", children: "\u2190 Previous" })), currentPage < totalPages && (_jsx("a", { href: buildTableQuery(state, { page: currentPage + 1 }, currentPath, activeFilters, queryPrefix), className: "rounded-md border px-3 py-1 text-xs hover:bg-muted", children: "Next \u2192" }))] })] })), hasFilters && filtersBelow && (_jsx(FilterStrip, { filters: filters, prefix: queryPrefix, renderFormChild: renderFormChild }))] }));
+}
+//# sourceMappingURL=TableRendererBody.js.map