@pilotiq/pilotiq 0.6.2 → 0.7.0

package/dist/react/SchemaRenderer.js

@@ -32,7 +32,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '
 import { Table as DataTable, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './ui/table.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './ui/tooltip.js';
-import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, InfoIcon, TriangleAlertIcon, CircleCheckIcon, CircleAlertIcon, } from 'lucide-react';
+import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, InfoIcon, TriangleAlertIcon, CircleCheckIcon, CircleAlertIcon, Columns3Icon, } from 'lucide-react';
 import { useNavigate } from './navigate.js';
 import { parseDateRangeValue, encodeDateRangeValue, } from '../filters/DateRangeFilter.js';
 import { parseMultiSelectValue, encodeMultiSelectValue, } from '../filters/MultiSelectFilter.js';
@@ -1094,16 +1094,59 @@ function SectionRenderer({ el, index }) {
     return (_jsxs("section", { className: `flex flex-col ${compact ? 'gap-2' : 'gap-3'} rounded-lg border ${surfaceClass} ${padding} ${layoutClasses(el)}`.trim(), children: [(title || description || collapsible || badge || afterHeader.length > 0) && (_jsxs("header", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [Icon && _jsx(Icon, { className: "size-4 mt-0.5 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [title && _jsx("h3", { className: `${titleSize} font-semibold`, children: title }), badge && (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: badge }))] }), description && _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [afterHeader.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: afterHeader.map((a, i) => renderElement(a, i)) })), collapsible && (_jsx("button", { type: "button", onClick: () => setCollapsed(c => !c), className: "text-xs text-muted-foreground hover:text-foreground", children: collapsed ? 'Expand' : 'Collapse' }))] })] })), !collapsed && el.children && el.children.length > 0 && (_jsx("div", { className: gridClass, children: el.children.map((c, i) => renderElement(c, i)) }))] }, index));
 }
 // ─── Wizard (Plan #8) ───────────────────────────────────────
+/**
+ * Resolve the initial active step for `WizardRenderer`. Priority:
+ * 1. URL `?<queryKey>=N` (1-based — wizards expose human-friendly indexes
+ *    when `Wizard.persistStepInQueryString()` is enabled).
+ * 2. `localStorage[<storageKey>]` (0-based, set by the persist effect).
+ * 3. `startOnStep` configured on the Wizard.
+ *
+ * SSR-safe: returns `startOnStep` when `window` is undefined.
+ */
+function readInitialWizardStep(total, startOnStep, storageKey, queryKey) {
+    if (typeof window === 'undefined')
+        return startOnStep;
+    if (queryKey) {
+        try {
+            const raw = new URL(window.location.href).searchParams.get(queryKey);
+            if (raw !== null && raw !== '') {
+                const n = Number(raw) - 1;
+                if (Number.isFinite(n) && n >= 0 && n < total)
+                    return n;
+            }
+        }
+        catch { /* ignore */ }
+    }
+    if (storageKey) {
+        try {
+            const stored = window.localStorage.getItem(storageKey);
+            if (stored !== null) {
+                const n = Number(stored);
+                if (Number.isFinite(n) && n >= 0 && n < total)
+                    return n;
+            }
+        }
+        catch { /* ignore */ }
+    }
+    return startOnStep;
+}
 /**
  * Multi-step form layout. Tracks active step in `useState`, optionally
- * persisted to localStorage. On Next click, POSTs `{ step, values }` to
- * the form's `wizardUrl` (stamped by the route handler when the form
- * has a Wizard descendant). 200 → advance; 422 → stamp inline errors;
- * absent `wizardUrl` → advance immediately (no validation).
+ * persisted to localStorage and/or the URL query string. On Next click,
+ * POSTs `{ step, values }` to the form's `wizardUrl` (stamped by the
+ * route handler when the form has a Wizard descendant). 200 → advance;
+ * 422 → stamp inline errors; absent `wizardUrl` → advance immediately
+ * (no validation).
  *
  * Inactive steps render hidden (display:none) rather than unmounted so
  * controlled inputs preserve their values across step transitions and
  * cross-step `$get` works on the resolved meta.
+ *
+ * Nav buttons honor `Wizard.submitAction() / nextAction() / previousAction()`
+ * — chrome (label / icon / color / size / outlined / iconOnly / tooltip /
+ * disabled rules) carries through to the rendered button while the click
+ * behavior stays hardwired (advance / recede / submit-form). Bare wizards
+ * keep the built-in defaults.
  */
 function WizardRenderer({ el, index }) {
     const formState = useFormState();
@@ -1114,37 +1157,47 @@ function WizardRenderer({ el, index }) {
     const startOnStep = Math.max(0, Math.min(Math.max(0, steps.length - 1), Number(el['startOnStep'] ?? 0)));
     const persist = el['persist'] !== false;
     const storageKey = persist && formId ? `pilotiq.wizard.${formId}.step` : undefined;
-    const [active, setActive] = useState(startOnStep);
+    const queryKey = typeof el['persistStepInQueryString'] === 'string'
+        ? String(el['persistStepInQueryString'])
+        : undefined;
+    const submitActionMeta = el['submitAction'];
+    const nextActionMeta = el['nextAction'];
+    const previousActionMeta = el['previousAction'];
+    // Initial-step resolution priority: URL (?<key>=N, 1-based) > localStorage >
+    // startOnStep. URL wins on first paint so deep links land on the right step
+    // before localStorage can override. Lazy initializer — resolution runs once.
+    const [active, setActive] = useState(() => readInitialWizardStep(steps.length, startOnStep, storageKey, queryKey));
     const [advancing, setAdvancing] = useState(false);
     const [advanceError, setAdvanceError] = useState(null);
-    // Hydrate persisted step from localStorage after mount.
+    // Persist active step changes to localStorage (when enabled).
     useEffect(() => {
         if (!storageKey)
             return;
         if (typeof window === 'undefined')
             return;
         try {
-            const stored = window.localStorage.getItem(storageKey);
-            if (stored !== null) {
-                const n = Number(stored);
-                if (Number.isFinite(n) && n >= 0 && n < steps.length)
-                    setActive(n);
-            }
+            window.localStorage.setItem(storageKey, String(active));
         }
         catch { /* ignore */ }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storageKey]);
-    // Persist active step changes.
+    }, [storageKey, active]);
+    // Mirror active step to the URL via replaceState — purely client-side state
+    // sync, no SPA re-fetch. 1-based externally; cleared when on the first step
+    // so bare URLs don't grow ?step=1 noise.
     useEffect(() => {
-        if (!storageKey)
+        if (!queryKey)
             return;
         if (typeof window === 'undefined')
             return;
         try {
-            window.localStorage.setItem(storageKey, String(active));
+            const url = new URL(window.location.href);
+            if (active === 0)
+                url.searchParams.delete(queryKey);
+            else
+                url.searchParams.set(queryKey, String(active + 1));
+            window.history.replaceState(window.history.state, '', url.toString());
         }
         catch { /* ignore */ }
-    }, [storageKey, active]);
+    }, [queryKey, active]);
     if (steps.length === 0) {
         return (_jsx("div", { className: "rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground", children: "No steps configured." }, index));
     }
@@ -1211,9 +1264,43 @@ function WizardRenderer({ el, index }) {
                                                 : isDone ? 'bg-muted-foreground/20 text-foreground'
                                                     : 'bg-muted text-muted-foreground',
                                         ].join(' '), children: Icon ? _jsx(Icon, { className: "size-3", "aria-hidden": "true" }) : i + 1 }), _jsx("span", { className: "font-medium", children: String(s['label'] ?? `Step ${i + 1}`) })] }), i < steps.length - 1 && _jsx("span", { className: "h-px w-6 bg-border", "aria-hidden": "true" })] }, i));
-                }) }), Boolean(steps[active]?.['description']) && (_jsx("p", { className: "text-sm text-muted-foreground", children: String(steps[active]['description']) })), steps.map((s, i) => (_jsx("div", { className: i === active ? 'flex flex-col gap-4' : 'hidden', "aria-hidden": i === active ? undefined : true, children: (s.children ?? []).map((c, ci) => renderElement(c, ci)) }, i))), advanceError && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: advanceError })), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("button", { type: "button", disabled: isFirst || advancing, onClick: () => advance(active - 1), className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed", children: "Back" }), isLast
-                        ? _jsx("span", { className: "text-xs text-muted-foreground", children: "Submit the form to finish." })
-                        : _jsx("button", { type: "button", disabled: advancing, onClick: () => advance(active + 1), className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed", children: advancing ? 'Validating…' : 'Next' })] })] }, index));
+                }) }), Boolean(steps[active]?.['description']) && (_jsx("p", { className: "text-sm text-muted-foreground", children: String(steps[active]['description']) })), steps.map((s, i) => (_jsx("div", { className: i === active ? 'flex flex-col gap-4' : 'hidden', "aria-hidden": i === active ? undefined : true, children: (s.children ?? []).map((c, ci) => renderElement(c, ci)) }, i))), advanceError && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: advanceError })), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(WizardNavButton, { actionMeta: previousActionMeta, fallbackLabel: "Back", disabled: isFirst || advancing, onClick: () => advance(active - 1) }), isLast
+                        ? (submitActionMeta
+                            ? _jsx(WizardNavButton, { actionMeta: submitActionMeta, fallbackLabel: "Submit", type: "submit", disabled: advancing })
+                            : _jsx("span", { className: "text-xs text-muted-foreground", children: "Submit the form to finish." }))
+                        : _jsx(WizardNavButton, { actionMeta: nextActionMeta, fallbackLabel: advancing ? 'Validating…' : 'Next', disabled: advancing, onClick: () => advance(active + 1) })] })] }, index));
+}
+/**
+ * Renders one wizard nav slot (Back / Next / Submit). Falls back to plain
+ * built-in chrome (border button for Back, primary button for Next/Submit)
+ * when no `actionMeta` is supplied; otherwise reads the resolved Action's
+ * chrome (`label / icon / color / size / outlined / iconOnly / tooltip /
+ * disabled`) and applies it to a button whose click is hardwired by the
+ * surrounding wizard. `type="submit"` lets the Submit slot trigger the
+ * surrounding form's onSubmit dispatcher (no `onClick` needed).
+ *
+ * Hidden actions (`.visible(false)` resolved-away) drop the slot entirely
+ * — the resolver returns `undefined` for hidden Action elements, which
+ * arrives here as `actionMeta == null` so we fall through to the default
+ * chrome. Use `Wizard.skippable()` semantics to hide nav buttons when
+ * appropriate; for permanent removal subclass the wizard.
+ */
+function WizardNavButton({ actionMeta, fallbackLabel, type = 'button', disabled, onClick, }) {
+    // Bare default — keep historical chrome for back-compat (un-customized
+    // wizards look identical to before this change).
+    if (!actionMeta) {
+        const isPrimary = type === 'submit' || fallbackLabel !== 'Back';
+        return (_jsx("button", { type: type, disabled: disabled, onClick: onClick, className: isPrimary
+                ? 'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
+                : 'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed', children: fallbackLabel }));
+    }
+    const ownDisabled = Boolean(actionMeta['disabled']);
+    const label = String(actionMeta['label'] ?? fallbackLabel);
+    const tooltip = actionMeta['tooltip'] ? String(actionMeta['tooltip']) : undefined;
+    const iconOnly = Boolean(actionMeta['iconOnly']);
+    const className = actionButtonClass(actionMeta, {});
+    const node = (_jsxs("button", { type: type, disabled: disabled || ownDisabled, onClick: onClick, className: `${className} disabled:opacity-50 disabled:cursor-not-allowed`, "aria-label": iconOnly ? label : undefined, children: [renderActionIcon(actionMeta), !iconOnly && _jsx("span", { children: label }), renderActionBadge(actionMeta)] }));
+    return _jsx(_Fragment, { children: withTooltip(node, tooltip) });
 }
 // ─── Top-level dispatch ─────────────────────────────────────
 const TEXT_COLOR_CLASSES = {
@@ -1965,6 +2052,7 @@ function buildTableQuery(state, override, pathname, filterValues = {}, prefix) {
             prefixK(prefix, 'page'),
             prefixK(prefix, 'perPage'),
             prefixK(prefix, 'group'),
+            prefixK(prefix, 'groupKey'),
             ...Object.keys(filterValues).map(n => prefixK(prefix, n)),
         ]);
         for (const [k, v] of currentParams) {
@@ -1988,6 +2076,12 @@ function buildTableQuery(state, override, pathname, filterValues = {}, prefix) {
         params.set(prefixK(prefix, 'page'), String(merged.page));
     if (merged.group !== undefined)
         params.set(prefixK(prefix, 'group'), merged.group);
+    // groupKey is sparse — only writes when the override sets a non-empty
+    // value. Drill-out (chip ×) passes `''` to clear; the foreign-param
+    // dedupe set above already filtered the stale value out, so an empty
+    // override produces a URL without the key.
+    if (merged.groupKey)
+        params.set(prefixK(prefix, 'groupKey'), merged.groupKey);
     const qs = params.toString();
     // Always anchor to a real pathname — Vike's client-side router treats
     // a bare `?qs` href as a fresh URL with empty pathname, which routes
@@ -2687,6 +2781,43 @@ function RecordCellLink({ href, navigate, children, }) {
     };
     return (_jsx("a", { href: href, onClick: onClick, className: "block px-2 py-2 text-inherit no-underline hover:text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: children }));
 }
+/**
+ * "Drilled into <Label>: <Value>" chip above the table when a group
+ * heading has been clicked. The × clears `?<prefix>groupKey=`, returning
+ * the table to its banded view. Real `<a href>` with `useNavigate()`
+ * intercept on plain left-click so cmd-click / middle-click open a
+ * fresh tab (rare but valid for sharing the banded view URL).
+ */
+function ActiveGroupKeyChip({ label, value, displayValue, clearHref, navigate, }) {
+    const onClick = (e) => {
+        if (e.button !== 0)
+            return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        e.preventDefault();
+        void navigate(clearHref);
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Drilled into" }), _jsxs("span", { className: "font-medium text-foreground", children: [label ? `${label}: ` : '', displayValue || value] }), _jsx("a", { href: clearHref, onClick: onClick, "aria-label": "Clear drill-in", className: "ms-auto text-muted-foreground hover:text-foreground", children: "\u00D7" })] }));
+}
+/**
+ * Group-heading text wrapped in a real `<a href>` that SPA-navs into the
+ * drilled-in URL. Plain left-click intercepts for `useNavigate()`;
+ * cmd/ctrl/shift-click + middle-click fall through to the browser so
+ * "open in new tab" semantics work. Visually inherits the heading
+ * styling — the link adds underline-on-hover affordance without
+ * disturbing the surrounding text-transform / size.
+ */
+function GroupHeadingLink({ href, navigate, children, }) {
+    const onClick = (e) => {
+        if (e.button !== 0)
+            return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        e.preventDefault();
+        void navigate(href);
+    };
+    return (_jsx("a", { href: href, onClick: onClick, className: "inline-flex items-center gap-1 text-inherit no-underline hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: children }));
+}
 /**
  * List-page tab strip — Filament-style query shortcuts above the table
  * ("All / Drafts / Published / Archived"). Each trigger is a real `<a>`
@@ -2818,6 +2949,26 @@ function SortByPicker({ columns, active, onChange, }) {
                     return (_jsxs(React.Fragment, { children: [_jsxs(SelectItem, { value: `${name}:asc`, children: [label, " (A\u2192Z)"] }), _jsxs(SelectItem, { value: `${name}:desc`, children: [label, " (Z\u2192A)"] })] }, name));
                 }) })] }));
 }
+/**
+ * Toolbar dropdown for `Column.toggleable()` columns. Lists every
+ * toggleable column with a checkbox; toggling writes through to a
+ * caller-supplied `onToggle` (the `TableRendererBody` owns the state
+ * + the localStorage round-trip). Mounted only when at least one
+ * column is toggleable.
+ */
+function ColumnsToggleDropdown({ columns, hidden, onToggle, }) {
+    if (columns.length === 0)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: (props) => (_jsxs("button", { ...props, type: "button", className: "inline-flex h-9 items-center gap-1.5 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground hover:bg-accent", "aria-label": "Show or hide columns", children: [_jsx(Columns3Icon, { className: "h-4 w-4", "aria-hidden": "true" }), _jsx("span", { children: "Columns" })] })) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[12rem]", children: columns.map((col, i) => {
+                    const name = String(col['name'] ?? '');
+                    const label = String(col['label'] ?? name);
+                    const isHidden = hidden.has(name);
+                    return (_jsxs(DropdownMenuItem, { 
+                        // Suppress menu-close so users can toggle multiple columns
+                        // without re-opening the dropdown.
+                        closeOnClick: false, onClick: () => onToggle(name, !isHidden), children: [_jsx("span", { className: "inline-flex w-4 items-center justify-center", children: !isHidden && _jsx(CheckIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx("span", { children: label })] }, i));
+                }) })] }));
+}
 /**
  * Lookup tables for responsive grid column-counts in `contentLayout:
  * 'cards'`. Tailwind's JIT scanner needs **literal** class strings; we
@@ -3003,6 +3154,11 @@ function TableRendererBody({ el }) {
     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');
@@ -3011,6 +3167,7 @@ function TableRendererBody({ el }) {
     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'] ?? [];
@@ -3026,6 +3183,11 @@ function TableRendererBody({ el }) {
         })
         : 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.
@@ -3074,6 +3236,67 @@ function TableRendererBody({ el }) {
     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 (typeof window === 'undefined')
+            return;
+        if (toggleableColumns.length === 0)
+            return;
+        const next = new Set();
+        for (const col of toggleableColumns) {
+            const name = String(col['name']);
+            const cfg = col['toggleable'];
+            try {
+                const stored = window.localStorage.getItem(columnsVisibilityKey(name));
+                if (stored === '1')
+                    next.add(name);
+                else if (stored === '0') { /* visible */ }
+                else if (cfg?.initiallyHidden)
+                    next.add(name);
+            }
+            catch {
+                if (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);
+            if (typeof window !== 'undefined') {
+                try {
+                    window.localStorage.setItem(columnsVisibilityKey(name), nextHidden ? '1' : '0');
+                }
+                catch { /* private mode / quota — silent */ }
+            }
+            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
@@ -3156,6 +3379,7 @@ function TableRendererBody({ el }) {
         ...(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
@@ -3166,6 +3390,12 @@ function TableRendererBody({ el }) {
         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());
@@ -3328,7 +3558,8 @@ function TableRendererBody({ el }) {
     // 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 showHeaderBar = searchable || headerActions.length > 0 || showFiltersInToolbar || hasGroupPicker || hasSortPicker;
+    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
@@ -3348,7 +3579,7 @@ function TableRendererBody({ el }) {
         !searchActive &&
         currentPage === 1;
     const reorderColumnVisible = reorderableColumn !== undefined;
-    const totalCols = columns.length
+    const totalCols = visibleColumns.length
         + (hasBulkActions ? 1 : 0)
         + (hasRowActions ? 1 : 0)
         + (reorderColumnVisible ? 1 : 0);
@@ -3365,7 +3596,7 @@ function TableRendererBody({ el }) {
     // 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) ? (_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 })), hasFilters && filtersCollapsible && (_jsx(FilterStripToggle, { filters: filters, open: filtersOpen, onToggle: toggleFiltersOpen })), hasGroupPicker && (_jsx(TableGroupPicker, { options: groupOptions, active: defaultGroup, onChange: (value) => {
+    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 })), 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);
@@ -3373,7 +3604,23 @@ function TableRendererBody({ el }) {
                                 } })), hasSortPicker && (_jsx(SortByPicker, { columns: sortableColumns, active: currentSort, onChange: (column, direction) => {
                                     const href = buildTableQuery(state, { sort: { column, direction }, page: 1 }, currentPath, activeFilters, queryPrefix);
                                     navigate(href);
-                                } }))] })) : _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 })), 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, { el: el, columns: columns, rows: rows, visibleIds: visibleIds, selected: selected, toggleRow: toggleRow, hasBulkActions: hasBulkActions, hasRowActions: hasRowActions, rowActions: rowActions, hasRecordUrl: hasRecordUrl, hasRecordClasses: hasRecordClasses, striped: striped, activeEmpty: activeEmpty, EmptyIcon: EmptyIcon, hasFilterOrSearch: hasFilterOrSearch, defaultGroup: defaultGroup, groupColumnLabel: groupColumnLabel, groupCollapsible: groupCollapsible, collapsedGroups: collapsedGroups, toggleGroupCollapsed: toggleGroupCollapsed, cardsPerRow: cardsPerRow, navigate: navigate })) : (_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() }) })), columns.map((col, i) => {
+                                } })), 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 })), 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, { el: el, columns: columns, rows: rows, visibleIds: visibleIds, selected: selected, toggleRow: toggleRow, hasBulkActions: hasBulkActions, hasRowActions: hasRowActions, rowActions: rowActions, hasRecordUrl: hasRecordUrl, hasRecordClasses: hasRecordClasses, striped: striped, activeEmpty: activeEmpty, EmptyIcon: EmptyIcon, hasFilterOrSearch: hasFilterOrSearch, defaultGroup: defaultGroup, groupColumnLabel: groupColumnLabel, groupCollapsible: groupCollapsible, collapsedGroups: collapsedGroups, toggleGroupCollapsed: toggleGroupCollapsed, cardsPerRow: cardsPerRow, navigate: navigate, groupHeadingScopable: groupHeadingScopable, buildGroupKeyHref: buildGroupKeyHref })) : (_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']);
@@ -3428,16 +3675,28 @@ function TableRendererBody({ el }) {
                                     .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: groupCollapsible ? (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 text-left", onClick: () => toggleGroupCollapsed(groupValue), "aria-expanded": !isInCollapsedGroup, children: [_jsx(ChevronDownIcon, { className: [
-                                                                'size-4 transition-transform',
-                                                                isInCollapsedGroup ? '-rotate-90' : '',
-                                                            ].filter(Boolean).join(' ') }), _jsx(GroupHeaderText, { label: groupColumnLabel, value: groupValue, title: groupTitle, description: groupDescription })] })) : (_jsx(GroupHeaderText, { label: groupColumnLabel, value: groupValue, title: groupTitle, description: groupDescription })) }) }, `group-${id}`)), isInCollapsedGroup ? null : (_jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: [
+                                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) }) })), columns.map((col, ci) => {
+                                                            : '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'
@@ -3459,7 +3718,9 @@ function TableRendererBody({ el }) {
                                                         : null;
                                                     if (EditableComp && editUrl !== undefined) {
                                                         const cellDisabled = col['disabled'] === true || cellDisabledMap?.[name] === true;
-                                                        return (_jsx(TableCell, { className: `text-sm text-foreground ${align} p-0`, style: widthStyle, children: _jsx(EditableComp, { url: editUrl, col: col, value: value, disabled: cellDisabled }) }, ci));
+                                                        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);
@@ -3480,7 +3741,7 @@ function TableRendererBody({ el }) {
                                             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, {}), columns.map((col, ci) => {
+                                            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'
@@ -3489,7 +3750,7 @@ function TableRendererBody({ el }) {
                                                         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, {}), columns.map((col, ci) => {
+                            }) }), 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'
@@ -3516,7 +3777,7 @@ function TableRendererBody({ el }) {
  * configured per-card grid (`cardsPerRow`) re-applies inside every
  * section so the column count stays consistent.
  */
-function CardsLayoutBody({ el, columns, rows, visibleIds, selected, toggleRow, hasBulkActions, hasRowActions, rowActions, hasRecordUrl, hasRecordClasses, striped, activeEmpty, EmptyIcon, hasFilterOrSearch, defaultGroup, groupColumnLabel, groupCollapsible, collapsedGroups, toggleGroupCollapsed, cardsPerRow, navigate, }) {
+function CardsLayoutBody({ el, columns, rows, visibleIds, selected, toggleRow, hasBulkActions, hasRowActions, rowActions, hasRecordUrl, hasRecordClasses, striped, activeEmpty, EmptyIcon, hasFilterOrSearch, defaultGroup, groupColumnLabel, groupCollapsible, collapsedGroups, toggleGroupCollapsed, cardsPerRow, navigate, groupHeadingScopable, buildGroupKeyHref, }) {
     void el; // keep prop for future telemetry; silences unused-prop lint
     void columns;
     void striped; // visual stripes don't apply to cards (each card has its own surface)
@@ -3549,10 +3810,22 @@ function CardsLayoutBody({ el, columns, rows, visibleIds, selected, toggleRow, h
             const collapsed = groupCollapsible
                 && section.groupValue !== undefined
                 && collapsedGroups[section.groupValue] === true;
-            return (_jsxs("div", { className: "flex flex-col gap-3", children: [section.groupValue !== undefined && (groupCollapsible ? (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground", onClick: () => toggleGroupCollapsed(section.groupValue), "aria-expanded": !collapsed, children: [_jsx(ChevronDownIcon, { className: [
-                                    'size-4 transition-transform',
-                                    collapsed ? '-rotate-90' : '',
-                                ].filter(Boolean).join(' ') }), _jsx(GroupHeaderText, { label: groupColumnLabel, value: section.groupValue, title: section.title, description: section.description })] })) : (_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: _jsx(GroupHeaderText, { label: groupColumnLabel, value: section.groupValue, title: section.title, description: section.description }) }))), !collapsed && (_jsx("div", { className: gridClass, children: section.indices.map((ri) => {
+            return (_jsxs("div", { className: "flex flex-col gap-3", children: [section.groupValue !== undefined && (() => {
+                        const drillable = groupHeadingScopable === true
+                            && buildGroupKeyHref !== undefined
+                            && section.groupValue !== '';
+                        const headingText = (_jsx(GroupHeaderText, { label: groupColumnLabel, value: section.groupValue, title: section.title, description: section.description }));
+                        const headingNode = drillable
+                            ? _jsx(GroupHeadingLink, { href: buildGroupKeyHref(section.groupValue), navigate: navigate, children: headingText })
+                            : headingText;
+                        if (groupCollapsible) {
+                            return (_jsxs("div", { className: "flex w-full items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: [_jsx("button", { type: "button", className: "inline-flex items-center", onClick: () => toggleGroupCollapsed(section.groupValue), "aria-expanded": !collapsed, "aria-label": collapsed ? 'Expand group' : 'Collapse group', children: _jsx(ChevronDownIcon, { className: [
+                                                'size-4 transition-transform',
+                                                collapsed ? '-rotate-90' : '',
+                                            ].filter(Boolean).join(' ') }) }), headingNode] }));
+                        }
+                        return (_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: headingNode }));
+                    })(), !collapsed && (_jsx("div", { className: gridClass, children: section.indices.map((ri) => {
                             const id = visibleIds[ri];
                             const recordObj = rows[ri];
                             const isSelected = selected.has(id);