@pilotiq/pilotiq 0.7.1 → 0.8.0

package/dist/react/SchemaRenderer.js

@@ -1,65 +1,33 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
-import { getFieldRenderer } from './registry.js';
-import { getFieldLabelSlot } from './FieldLabelSlotRegistry.js';
-import { FormStateProvider, useFormState, FormIdContext } from './FormStateContext.js';
-import { Checkbox } from './ui/checkbox.js';
-import { Input } from './ui/input.js';
-import { Popover, PopoverTrigger, PopoverContent } from './ui/popover.js';
-import { FieldShell } from './fields/FieldShell.js';
-import { TextLikeInput } from './fields/TextLikeInput.js';
-import { useTextInputControls } from './fields/textInputControls.js';
-import { SelectFieldInput } from './fields/SelectFieldInput.js';
-import { ToggleFieldInput } from './fields/ToggleFieldInput.js';
-import { DateFieldInput } from './fields/DateFieldInput.js';
-import { HiddenInput } from './fields/HiddenInput.js';
-import { CheckboxInput } from './fields/CheckboxInput.js';
-import { RadioInput } from './fields/RadioInput.js';
-import { ToggleButtonsInput } from './fields/ToggleButtonsInput.js';
-import { CheckboxListInput } from './fields/CheckboxListInput.js';
-import { SliderInput } from './fields/SliderInput.js';
-import { ColorInput } from './fields/ColorInput.js';
-import { DateTimeInput } from './fields/DateTimeInput.js';
-import { KeyValueInput } from './fields/KeyValueInput.js';
-import { TagsInput } from './fields/TagsInput.js';
-import { FileUploadInput } from './fields/FileUploadInput.js';
-import { MarkdownInput } from './fields/MarkdownInput.js';
-import { RepeaterInput } from './fields/RepeaterInput.js';
-import { BuilderInput } from './fields/BuilderInput.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from './ui/dialog.js';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from './ui/select.js';
-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, Columns3Icon, } from 'lucide-react';
+import { CircleIcon } from 'lucide-react';
 import { useNavigate } from './navigate.js';
-import { parseDateRangeValue, encodeDateRangeValue, } from '../filters/DateRangeFilter.js';
-import { parseMultiSelectValue, encodeMultiSelectValue, } from '../filters/MultiSelectFilter.js';
-import { encodeFormFilterValue } from '../filters/FormFilter.js';
-import { parseQueryBuilderValue, encodeQueryBuilderValue, isQueryBuilderTree, } from '../filters/QueryBuilderFilter.js';
 import { useIconFor } from './icon-context.js';
-import { useToast } from './Toaster.js';
-import { getIcon } from '../icons/registry.js';
-import { pickEditableCell } from './cells/EditableCell.js';
 import { WidgetDataProvider } from './WidgetDataContext.js';
 import { StatsOverviewRenderer } from './widgets/StatsOverviewRenderer.js';
 import { TableWidgetRenderer } from './widgets/TableWidgetRenderer.js';
 import { ViewRenderer } from './widgets/ViewRenderer.js';
-import { getEntryComponent } from '../entries/registry.js';
 import { getSlotComponent } from '../slot-components/registry.js';
 import { getWidgetRenderer } from './widgetRegistry.js';
-function resolveIcon(name) {
-    if (!name)
-        return undefined;
-    return getIcon(name);
-}
-const alertStyles = {
-    info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200',
-    warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200',
-    success: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
-    danger: 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200',
-};
+import { BADGE_COLOR_CLASSES, } from './schemaRenderer/constants.js';
+import { resolveIcon, } from './schemaRenderer/helpers.js';
+import { renderSimpleElement } from './schemaRenderer/SimpleElements.js';
+import { AlertRenderer } from './schemaRenderer/AlertRenderer.js';
+import { SectionRenderer } from './schemaRenderer/SectionRenderer.js';
+import { TabsRenderer } from './schemaRenderer/TabsRenderer.js';
+import { WizardRenderer } from './schemaRenderer/WizardRenderer.js';
+import { renderEntry } from './schemaRenderer/EntryRenderer.js';
+import { dispatchHandlerAction as actionDispatchHandlerAction, } from './schemaRenderer/action/helpers.js';
+import { renderAction, renderActionLike as renderActionLikeImpl } from './schemaRenderer/action/renderAction.js';
+import { ActionGroupTrigger } from './schemaRenderer/action/ActionGroupTrigger.js';
+import { renderField as renderFieldImpl, } from './schemaRenderer/form/renderField.js';
+import { FormRenderer as FormRendererImpl, renderFormChild as renderFormChildImpl, } from './schemaRenderer/form/FormRenderer.js';
+import { TableRenderer as TableRendererImpl } from './schemaRenderer/table/TableRenderer.js';
+/**
+ * Re-export `dispatchHandlerAction` from the action helpers so existing
+ * consumers (e.g. `RepeaterInput.tsx`) keep working through this barrel.
+ * Phase 4 may shift these imports onto the action subpath directly.
+ */
+export const dispatchHandlerAction = actionDispatchHandlerAction;
 export function FormFields({ elements, values }) {
     return (_jsx(_Fragment, { children: elements.map((el, i) => {
             if (el['type'] !== 'field')
@@ -71,1693 +39,65 @@ export function FormFields({ elements, values }) {
             return renderField(merged, i);
         }) }));
 }
-// ─── Field rendering ────────────────────────────────────────
-//
-// Each input lives in its own file under `react/fields/`. This file
-// stays a thin dispatcher: parse meta → pick component → wrap in
-// `<FieldShell>`.
-function renderField(el, index) {
-    const fieldType = String(el['fieldType'] ?? 'text');
-    const name = String(el['name'] ?? '');
-    const label = String(el['label'] ?? name);
-    const required = Boolean(el['required']);
-    const disabled = Boolean(el['disabled']);
-    const placeholder = el['placeholder'] ? String(el['placeholder']) : undefined;
-    const defaultValue = el['defaultValue'];
-    const defaultStr = defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : undefined;
-    // Hidden fields render bare — no label, no shell, no chrome. Bail
-    // before the renderField switch + FieldShell wrap.
-    if (fieldType === 'hidden') {
-        return _jsx(HiddenInput, { name: name, defaultValue: defaultValue }, index);
-    }
-    // Field label slot — rendered next to the label when a plugin registered
-    // a component via registerFieldLabelSlot() and the field has aiActions +
-    // _agentRunBase stamped on its meta (set by tagFieldAiUrls in pageData).
-    const LabelSlot = getFieldLabelSlot();
-    const aiActions = Array.isArray(el['aiActions']) ? el['aiActions'] : undefined;
-    const agentRunBase = typeof el['_agentRunBase'] === 'string' ? el['_agentRunBase'] : undefined;
-    const labelSlot = (LabelSlot && aiActions?.length && agentRunBase)
-        ? _jsx(LabelSlot, { fieldName: name, actions: aiActions, agentRunBase: agentRunBase })
-        : undefined;
-    const autofocus = el['autofocus'] === true;
-    const extraInput = el['extraInputAttributes'];
-    const common = {
-        id: name,
-        name,
-        disabled,
-        placeholder,
-        required,
-        ...(defaultStr !== undefined ? { defaultValue: defaultStr } : {}),
-        ...(autofocus ? { autoFocus: true } : {}),
-        ...(extraInput ?? {}),
-    };
-    // External packages (e.g. @pilotiq/tiptap) register custom renderers
-    // for non-built-in fieldTypes. The registry wins over the built-in
-    // switch so consumers can override built-ins too if they want.
-    const Custom = getFieldRenderer(fieldType);
-    if (Custom) {
-        return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, labelSlot: labelSlot, children: _jsx(Custom, { el: el, name: name, defaultValue: defaultValue, required: required, disabled: disabled, placeholder: placeholder }) }, index));
-    }
-    // TextField (and slug) rich affordances live in a dedicated shell so
-    // `useTextInputControls` can hold reveal-toggle / mask state via React
-    // hooks (renderField itself is a plain function, hooks would violate
-    // rules-of-hooks here).
-    if (fieldType === 'text' || fieldType === 'slug') {
-        return (_jsx(TextFieldShell, { el: el, name: name, label: label, required: required, common: common, labelSlot: labelSlot }, index));
-    }
-    const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder);
-    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, labelSlot: labelSlot, children: input }, index));
-}
-/**
- * Component-shape TextField renderer — wraps the input shell so we can
- * use `useTextInputControls()` (which holds the eye-toggle / mask state).
- * Keeps `renderField` itself hook-free.
- */
-function TextFieldShell({ el, name, label, required, common, labelSlot, }) {
-    const controls = useTextInputControls(el, name, (m) => renderElement(m, 0));
-    // Build the input with all the new HTML attrs (inputMode /
-    // autocapitalize / list / maxLength + the password/text type from
-    // the controls hook).
-    const textExtra = {};
-    if (el['maxLength'] !== undefined)
-        textExtra['maxLength'] = Number(el['maxLength']);
-    if (el['inputMode'] !== undefined)
-        textExtra['inputMode'] = String(el['inputMode']);
-    if (el['autocapitalize'] !== undefined)
-        textExtra['autoCapitalize'] = String(el['autocapitalize']);
-    if (Array.isArray(el['datalist']))
-        textExtra['list'] = `${name}__datalist`;
-    const datalist = Array.isArray(el['datalist']) ? el['datalist'] : undefined;
-    const input = (_jsxs(_Fragment, { children: [_jsx(TextLikeInput, { el: el, name: name, common: common, type: controls.type, extraProps: textExtra, multiline: false, applyMask: controls.applyMask }), datalist && (_jsx("datalist", { id: `${name}__datalist`, children: datalist.map((v, i) => _jsx("option", { value: v }, i)) }))] }));
-    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, before: controls.before, after: controls.after, labelSlot: labelSlot, children: input }));
-}
-function renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder) {
-    switch (fieldType) {
-        case 'textarea': {
-            const autosize = el['autosize'] === true;
-            const cols = typeof el['cols'] === 'number' ? Number(el['cols']) : undefined;
-            const extra = {};
-            // `field-sizing-content` on the Textarea component already grows
-            // the box with content; `autosize()` just unsets the explicit
-            // `rows` so the browser doesn't reserve a fixed minimum height.
-            if (!autosize)
-                extra['rows'] = Number(el['rows']) || 4;
-            if (cols !== undefined)
-                extra['cols'] = cols;
-            if (el['disableGrammarly'] === true) {
-                extra['data-gramm'] = 'false';
-                extra['data-gramm_editor'] = 'false';
-                extra['data-enable-grammarly'] = 'false';
-            }
-            return (_jsx(TextLikeInput, { el: el, name: name, common: common, type: "text", extraProps: extra, multiline: true }));
-        }
-        case 'select': {
-            const options = el['options'] ?? [];
-            const createOption = el['createOption'];
-            const fieldLabel = String(el['label'] ?? name);
-            return (_jsx(SelectFieldInput, { name: name, defaultValue: defaultStr, disabled: disabled, required: required, placeholder: placeholder, options: options, fieldLabel: fieldLabel, ...(createOption ? { createOption } : {}) }));
-        }
-        case 'toggle': {
-            const initialChecked = defaultValue === true || defaultValue === 'true' || defaultValue === 1 || defaultValue === '1';
-            return _jsx(ToggleFieldInput, { name: name, defaultChecked: initialChecked, disabled: disabled });
-        }
-        case 'checkbox': {
-            const initialChecked = defaultValue === true || defaultValue === 'true' || defaultValue === 1 || defaultValue === '1';
-            return _jsx(CheckboxInput, { name: name, defaultChecked: initialChecked, disabled: disabled });
-        }
-        case 'radio': {
-            const options = el['options'] ?? [];
-            const inline = Boolean(el['inline']);
-            return (_jsx(RadioInput, { name: name, defaultValue: defaultStr, disabled: disabled, options: options, inline: inline }));
-        }
-        case 'toggleButtons': {
-            const options = el['options'] ?? [];
-            return (_jsx(ToggleButtonsInput, { name: name, defaultValue: defaultStr, disabled: disabled, options: options }));
-        }
-        case 'checkboxList': {
-            const options = el['options'] ?? [];
-            const columns = Number(el['columns']) || 1;
-            return (_jsx(CheckboxListInput, { name: name, defaultValue: defaultValue, disabled: disabled, options: options, columns: columns }));
-        }
-        case 'slider': {
-            return (_jsx(SliderInput, { name: name, defaultValue: defaultValue, disabled: disabled, min: Number(el['min']) || 0, max: Number(el['max']) || 100, step: Number(el['step']) || 1, showValue: Boolean(el['showValue']) }));
-        }
-        case 'color': {
-            return (_jsx(ColorInput, { name: name, defaultValue: defaultValue, disabled: disabled }));
-        }
-        case 'keyValue': {
-            return (_jsx(KeyValueInput, { name: name, defaultValue: defaultValue, disabled: disabled, keyLabel: String(el['keyLabel'] ?? 'Key'), valueLabel: String(el['valueLabel'] ?? 'Value'), addLabel: String(el['addLabel'] ?? 'Add row'), reorderable: Boolean(el['reorderable']) }));
-        }
-        case 'tagsInput': {
-            const suggestions = el['suggestions'] ?? [];
-            // separator: omitted → ',' (default); explicit null → null (disabled).
-            const separator = 'separator' in el
-                ? el['separator']
-                : ',';
-            const splitKeys = el['splitKeys'] ?? ['Enter'];
-            const maxTags = typeof el['maxTags'] === 'number' ? el['maxTags'] : null;
-            const reorderable = Boolean(el['reorderable']);
-            return (_jsx(TagsInput, { name: name, defaultValue: defaultValue, disabled: disabled, placeholder: placeholder, suggestions: suggestions, separator: separator, splitKeys: splitKeys, maxTags: maxTags, reorderable: reorderable }));
-        }
-        case 'fileUpload': {
-            return (_jsx(FileUploadInput, { name: name, defaultValue: defaultValue, disabled: disabled, accept: el['accept'], maxSize: typeof el['maxSize'] === 'number' ? el['maxSize'] : undefined, multiple: Boolean(el['multiple']), preview: el['preview'] !== false, directory: typeof el['directory'] === 'string' ? el['directory'] : undefined, uploadUrl: typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined, downloadable: Boolean(el['downloadable']), openable: Boolean(el['openable']), reorderable: Boolean(el['reorderable']), appendFiles: Boolean(el['appendFiles']), panelLayout: el['panelLayout'] === 'grid' ? 'grid'
-                    : el['panelLayout'] === 'integrated' ? 'integrated'
-                        : 'list', ...(el['automaticallyResize'] && typeof el['automaticallyResize'] === 'object'
-                    ? { automaticallyResize: el['automaticallyResize'] }
-                    : {}), imageEditor: Boolean(el['imageEditor']), circleCropper: Boolean(el['circleCropper']), automaticallyCropImagesToAspectRatio: Boolean(el['automaticallyCropImagesToAspectRatio']), ...(Array.isArray(el['imageEditorAspectRatioOptions'])
-                    ? { imageEditorAspectRatioOptions: el['imageEditorAspectRatioOptions'] }
-                    : {}) }));
-        }
-        case 'markdown': {
-            const toolbarButtons = el['toolbarButtons'] ?? [];
-            return (_jsx(MarkdownInput, { name: name, defaultValue: defaultValue, disabled: disabled, placeholder: placeholder, toolbarButtons: toolbarButtons, minHeight: typeof el['minHeight'] === 'string' ? el['minHeight'] : undefined, maxHeight: typeof el['maxHeight'] === 'string' ? el['maxHeight'] : undefined, fileAttachmentsDirectory: typeof el['fileAttachmentsDirectory'] === 'string' ? el['fileAttachmentsDirectory'] : undefined, fileAttachmentsVisibility: typeof el['fileAttachmentsVisibility'] === 'string' ? el['fileAttachmentsVisibility'] : undefined, uploadUrl: typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined }));
-        }
-        case 'repeater':
-            return _jsx(RepeaterInput, { el: el, name: name, disabled: disabled });
-        case 'builder':
-            return _jsx(BuilderInput, { el: el, name: name, disabled: disabled });
-        case 'dateTime': {
-            // Normalize various input shapes to YYYY-MM-DDTHH:mm.
-            let local;
-            if (defaultValue instanceof Date) {
-                local = isNaN(defaultValue.getTime())
-                    ? undefined
-                    : defaultValue.toISOString().slice(0, 16);
-            }
-            else if (typeof defaultValue === 'string' && defaultValue) {
-                const parsed = new Date(defaultValue);
-                local = isNaN(parsed.getTime()) ? undefined : parsed.toISOString().slice(0, 16);
-            }
-            return (_jsx(DateTimeInput, { name: name, defaultValue: local, disabled: disabled, placeholder: placeholder }));
-        }
-        case 'number': {
-            const numProps = {};
-            if (el['min'] !== undefined)
-                numProps['min'] = Number(el['min']);
-            if (el['max'] !== undefined)
-                numProps['max'] = Number(el['max']);
-            if (el['step'] !== undefined)
-                numProps['step'] = Number(el['step']);
-            return (_jsx(TextLikeInput, { el: el, name: name, common: common, type: "number", extraProps: numProps, multiline: false }));
-        }
-        case 'email':
-            return (_jsx(TextLikeInput, { el: el, name: name, common: common, type: "email", extraProps: {}, multiline: false }));
-        case 'date': {
-            // SSR may hand us a JS Date object directly; SPA JSON nav arrives as
-            // an ISO string. Normalize both into a `YYYY-MM-DD` slice — naive
-            // string slicing on `Date.toString()` ("Mon Apr 27 2026 ...") gives
-            // garbage when re-parsed, so handle the Date branch explicitly.
-            let iso;
-            if (defaultValue instanceof Date) {
-                iso = isNaN(defaultValue.getTime())
-                    ? undefined
-                    : defaultValue.toISOString().slice(0, 10);
-            }
-            else if (typeof defaultValue === 'string' && defaultValue) {
-                const parsed = new Date(defaultValue);
-                iso = isNaN(parsed.getTime())
-                    ? undefined
-                    : parsed.toISOString().slice(0, 10);
-            }
-            return (_jsx(DateFieldInput, { name: name, defaultValue: iso, disabled: disabled, placeholder: placeholder }));
-        }
-        case 'slug':
-        case 'text':
-        default: {
-            const textExtra = {};
-            if (el['maxLength'] !== undefined)
-                textExtra['maxLength'] = Number(el['maxLength']);
-            return (_jsx(TextLikeInput, { el: el, name: name, common: common, type: "text", extraProps: textExtra, multiline: false }));
-        }
-    }
-}
-/** Drain `notifications[]` from a JSON response into `useToast().notify`. */
-function dispatchNotifications(data, notify) {
-    const notifs = data.notifications;
-    if (!notifs || notifs.length === 0)
-        return;
-    for (const n of notifs)
-        notify(n);
-}
-/**
- * Fetch + JSON dispatch for form-method actions (Delete-style — no
- * server-rendered <form>, no 303 redirect, no full page reload). Sends
- * `_method` as a body field so Hono's POST handler dispatches the
- * intended verb. On success: drain notifications, SPA-navigate to the
- * server-supplied redirect (or stay on current path if none).
- *
- * Failure modes:
- *   - 4xx/5xx with `{ error }`: surfaced as an error toast.
- *   - Network errors: error toast with the exception message.
- */
-async function dispatchMethodAction(url, method, navigate, notify) {
-    try {
-        const fd = new FormData();
-        if (method !== 'post')
-            fd.append('_method', method);
-        const res = await fetch(url, {
-            method: 'POST',
-            headers: { 'Accept': 'application/json' },
-            body: fd,
-        });
-        const data = await res.json().catch(() => ({}));
-        if (!res.ok) {
-            const message = String(data.error ?? `Request failed (${res.status})`);
-            notify({ type: 'error', title: 'Action failed', body: message });
-            return;
-        }
-        dispatchNotifications(data, notify);
-        const redirect = String(data.redirect ?? '');
-        if (redirect)
-            navigate(redirect);
-        else if (typeof window !== 'undefined')
-            navigate(window.location.pathname + window.location.search);
-    }
-    catch (err) {
-        notify({ type: 'error', title: 'Action failed', body: err instanceof Error ? err.message : String(err) });
-    }
-}
-/**
- * Fetch + JSON dispatch for handler-style actions (no schema, no modal,
- * just a button). Sends `ids[]` plus arbitrary `values` fields. Server
- * returns `{ ok, redirect, notifications }` (or `{ ok: false, error }` on
- * failure). On success: drain notifications, SPA-navigate; on failure:
- * surface the error as a toast. No full page reload in any case.
- */
-export async function dispatchHandlerAction(url, ids, navigate, notify, values = {}, formSnapshot) {
-    try {
-        // When `formSnapshot` is set (Repeater / Builder `extraItemActions`
-        // dispatch), the snapshot already carries the form's full state — we
-        // just append `ids` / `values` on top so the server sees both the
-        // form body (for coerceFormValues + row hydration) and the action's
-        // own meta keys.
-        const fd = formSnapshot ?? new FormData();
-        for (const id of ids)
-            fd.append('ids', id);
-        for (const [k, v] of Object.entries(values))
-            fd.append(k, v);
-        const res = await fetch(url, {
-            method: 'POST',
-            headers: { 'Accept': 'application/json' },
-            body: fd,
-        });
-        // Download branch — handlers that return `{ download }` ask the server
-        // to write the body inline with `Content-Disposition: attachment`. Trip
-        // a browser download via a synthetic `<a download>` and exit early
-        // (no notify drain / no SPA-nav — the file IS the success signal).
-        if (res.ok && triggerDownloadIfAttachment(res)) {
-            await res.blob().then(triggerBlobDownload(res));
-            return;
-        }
-        const data = await res.json().catch(() => ({}));
-        if (!res.ok) {
-            const message = String(data.error ?? `Request failed (${res.status})`);
-            notify({ type: 'error', title: 'Action failed', body: message });
-            return;
-        }
-        dispatchNotifications(data, notify);
-        const redirect = String(data.redirect ?? '');
-        if (redirect)
-            navigate(redirect);
-        else if (typeof window !== 'undefined')
-            navigate(window.location.pathname + window.location.search);
-    }
-    catch (err) {
-        notify({ type: 'error', title: 'Action failed', body: err instanceof Error ? err.message : String(err) });
-    }
-}
-/** Returns true when the response carries `Content-Disposition: attachment`,
- *  which is how the route layer signals a download payload. The header
- *  match is case-insensitive (different runtimes normalize differently). */
-function triggerDownloadIfAttachment(res) {
-    const cd = res.headers.get('Content-Disposition') ?? res.headers.get('content-disposition') ?? '';
-    return cd.toLowerCase().includes('attachment');
-}
-/** Returns a closure that converts the blob into a download by clicking
- *  a synthetic `<a download="…">`. Filename is parsed from
- *  `Content-Disposition`'s `filename="…"` parameter; falls back to
- *  `'download'` when missing. Only mounted when `document` is present
- *  (no-op in SSR). */
-function triggerBlobDownload(res) {
-    const cd = res.headers.get('Content-Disposition') ?? res.headers.get('content-disposition') ?? '';
-    const match = cd.match(/filename\*?=(?:UTF-8'')?["']?([^"';\r\n]+)["']?/i);
-    const filename = (match?.[1] ?? 'download').trim();
-    return (blob) => {
-        if (typeof document === 'undefined' || typeof URL === 'undefined')
-            return;
-        const objUrl = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = objUrl;
-        a.download = filename;
-        a.style.display = 'none';
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(objUrl);
-    };
-}
-/**
- * Modal-form action dialog. Opens a Dialog with an optional form schema
- * (rendered from `meta.children`) plus header/footer chrome from
- * `meta.modal`. On submit, fetches the dispatchUrl with `Accept:
- * application/json` so the server can return:
- *   - 200 `{ ok: true, redirect }` → navigate (SPA via useNavigate)
- *   - 422 `{ ok: false, errors: { field: string[] } }` → inline errors
- *   - 500 `{ ok: false, error }` → server error banner
- *
- * Used for handler-style actions that have a schema and/or a modal config.
- * Replaces the older ConfirmActionDialog for that path; confirm-only
- * actions without a schema also flow through here (no fields rendered,
- * just header + footer = same UX as the old confirm dialog).
- */
-function ActionModalDialog({ trigger, meta, ids, initialValues = {}, open: controlledOpen, onOpenChange, }) {
-    const [internalOpen, setInternalOpen] = useState(false);
-    const isControlled = controlledOpen !== undefined;
-    const open = isControlled ? controlledOpen : internalOpen;
-    const setOpen = (o) => {
-        if (isControlled)
-            onOpenChange?.(o);
-        else
-            setInternalOpen(o);
-    };
-    const [errors, setErrors] = useState({});
-    const [serverError, setServerError] = useState(null);
-    const [submitting, setSubmitting] = useState(false);
-    const navigate = useNavigate();
-    const { notify } = useToast();
-    const modal = meta['modal'];
-    const confirm = meta['confirm'];
-    const destructive = Boolean(meta['destructive']);
-    const dispatchUrl = meta['dispatchUrl'];
-    const fields = (meta.children ?? []);
-    const hasForm = fields.length > 0;
-    // Filament v5 — auxiliary Elements stamped by the resolver between
-    // the body and the footer (Alert / Text / Heading / Action / …).
-    const contentFooter = (meta['modalContentFooter'] ?? []);
-    const heading = modal?.heading ?? confirm?.title ?? (hasForm ? String(meta['label'] ?? 'Submit') : 'Are you sure?');
-    const description = modal?.description ?? confirm?.message;
-    const submitLabel = modal?.submitLabel ?? (destructive ? 'Delete' : (hasForm ? 'Submit' : 'Confirm'));
-    const cancelLabel = modal?.cancelLabel ?? 'Cancel';
-    const widthClass = { sm: 'sm:max-w-sm', md: 'sm:max-w-lg', lg: 'sm:max-w-2xl', xl: 'sm:max-w-4xl' }[modal?.width ?? 'md'];
-    // Modal chrome extras (Tier-2 audit gap #2). Defaults match the
-    // previous renderer behaviour exactly — sparse meta keys round-trip
-    // as `undefined` so existing modals are byte-identical.
-    const closeByClickingAway = modal?.closeByClickingAway !== false;
-    const closeByEscaping = modal?.closeByEscaping !== false;
-    const stickyHeader = modal?.stickyHeader === true;
-    const stickyFooter = modal?.stickyFooter === true;
-    const showCloseButton = modal?.closeButton === true;
-    const alignmentClass = { start: 'text-left', center: 'text-center sm:text-left', end: 'text-right' }[modal?.alignment ?? 'center'];
-    const iconColorClass = modal?.iconColor
-        ? {
-            gray: 'text-muted-foreground',
-            primary: 'text-primary',
-            success: 'text-emerald-600 dark:text-emerald-300',
-            warning: 'text-amber-600   dark:text-amber-300',
-            destructive: 'text-destructive',
-            info: 'text-blue-600    dark:text-blue-300',
-        }[modal.iconColor]
-        : undefined;
-    // Existing default: only the submit button autofocuses (and only for
-    // confirm-only modals). When `modalAutofocus(false)` is set the user
-    // wants nothing to autofocus; `modalAutofocus(true)` shifts focus to
-    // the first form input via a mount-effect ref.
-    const explicitAutofocus = modal?.autofocus;
-    const submitAutofocus = explicitAutofocus === false ? false
-        : explicitAutofocus === true ? !hasForm
-            : !hasForm;
-    const formRef = useRef(null);
-    useEffect(() => {
-        if (!open || explicitAutofocus !== true || !hasForm)
-            return;
-        // Wait for the popup to mount + fields to render. Microtask is enough
-        // because Base UI's mount transition is decoupled from our render.
-        const id = window.requestAnimationFrame(() => {
-            const form = formRef.current;
-            if (!form)
-                return;
-            const target = form.querySelector('input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])');
-            if (target)
-                target.focus();
-        });
-        return () => window.cancelAnimationFrame(id);
-    }, [open, explicitAutofocus, hasForm]);
-    const reset = () => { setErrors({}); setServerError(null); setSubmitting(false); };
-    const onSubmit = async (e) => {
-        e.preventDefault();
-        if (!dispatchUrl)
-            return;
-        setSubmitting(true);
-        setServerError(null);
-        setErrors({});
-        const fd = new FormData(e.currentTarget);
-        for (const id of ids)
-            fd.append('ids', id);
-        try {
-            const res = await fetch(dispatchUrl, {
-                method: 'POST',
-                headers: { 'Accept': 'application/json' },
-                body: fd,
-            });
-            const data = await res.json().catch(() => ({}));
-            if (res.status === 422) {
-                setErrors(data.errors ?? {});
-                setSubmitting(false);
-                return;
-            }
-            if (!res.ok) {
-                setServerError(String(data.error ?? `Request failed (${res.status})`));
-                setSubmitting(false);
-                return;
-            }
-            setOpen(false);
-            reset();
-            // Server-emitted notifications come through the JSON response;
-            // surface them via the Toaster before navigating so the user
-            // sees the success/error toast even when navigation re-renders.
-            const notifs = data.notifications;
-            if (notifs && notifs.length > 0) {
-                for (const n of notifs)
-                    notify(n);
-            }
-            const redirect = String(data.redirect ?? '');
-            if (redirect)
-                navigate(redirect);
-            else if (typeof window !== 'undefined')
-                navigate(window.location.pathname + window.location.search);
-        }
-        catch (err) {
-            setServerError(err instanceof Error ? err.message : 'Submit failed');
-            setSubmitting(false);
-        }
-    };
-    const cancelClass = 'inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground';
-    const confirmClass = destructive
-        ? 'inline-flex items-center justify-center rounded-md bg-destructive px-3 h-9 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50'
-        : 'inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50';
-    // Resolved icon component for the modal header (Filament-style chrome
-    // — leading glyph next to the heading). Passed through `useIconFor`
-    // for the same registry lookup used by Resource / Page / Action icons.
-    const HeaderIcon = useIconFor(modal?.icon);
-    // Build a className for the popup that respects width + sticky-chrome
-    // + slideOver. Sticky modes give the popup a max height + overflow so
-    // the inner scroll surface exists for sticky to bite onto.
-    const stickyMode = stickyHeader || stickyFooter;
-    const popupClass = [
-        widthClass,
-        stickyMode ? 'max-h-[90vh] overflow-hidden p-0' : '',
-    ].filter(Boolean).join(' ');
-    // Inner scroll body (only used in sticky mode). When inactive the
-    // existing flat layout applies (header / fields / footer flow).
-    const headerCls = `${alignmentClass} ${stickyHeader ? 'sticky top-0 bg-background z-10 px-6 pt-6 pb-3 border-b' : ''}`.trim();
-    const footerCls = stickyFooter ? 'sticky bottom-0 bg-background z-10 px-6 py-3 border-t' : '';
-    const bodyCls = stickyMode ? 'flex-1 overflow-y-auto px-6 py-3' : '';
-    const formCls = stickyMode ? 'flex flex-col h-full' : '';
-    return (_jsxs(_Fragment, { children: [trigger?.(() => { reset(); setOpen(true); }), _jsx(Dialog, { open: open, disablePointerDismissal: !closeByClickingAway, onOpenChange: (o, details) => {
-                    // Cancel Esc-triggered closes when the user has opted out.
-                    // Base UI's `details.cancel()` aborts the open-state change.
-                    if (!o && !closeByEscaping && details && details.reason === 'escapeKey') {
-                        const cancel = details.cancel;
-                        if (typeof cancel === 'function')
-                            cancel();
-                        return;
-                    }
-                    if (!o)
-                        reset();
-                    setOpen(o);
-                }, children: _jsxs(DialogContent, { className: popupClass, children: [showCloseButton && (_jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOpen(false), className: "absolute top-3 right-3 z-20 inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: _jsx(XIcon, { className: "size-4" }) })), _jsxs("form", { ref: formRef, onSubmit: onSubmit, className: formCls, children: [_jsxs(DialogHeader, { className: headerCls, children: [_jsxs(DialogTitle, { className: modal?.icon ? 'flex items-center gap-2' : undefined, children: [HeaderIcon && (_jsx(HeaderIcon, { "aria-hidden": true, className: `size-5 shrink-0 ${iconColorClass ?? ''}`.trim() })), _jsx("span", { children: heading })] }), description && _jsx(DialogDescription, { children: description })] }), (hasForm || contentFooter.length > 0) && (_jsxs("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: [fields.map((f, i) => renderFormChild(f, i, initialValues, errors)), contentFooter.map((c, i) => renderElement(c, fields.length + i))] })), !hasForm && contentFooter.length === 0 && stickyMode && _jsx("div", { className: bodyCls }), serverError && (_jsx("p", { className: `py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim(), children: serverError })), _jsxs(DialogFooter, { className: footerCls, children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: cancelClass, children: cancelLabel }), _jsx("button", { type: "submit", disabled: submitting, autoFocus: submitAutofocus, className: confirmClass, children: submitting ? 'Working…' : submitLabel })] })] })] }) })] }));
-}
-/**
- * Confirm-style dialog wrapping an action's button. The trigger button is
- * rendered inline; clicking it opens the dialog. On confirm we run
- * `onConfirm` (which is action-style-specific — submit a form, programmatic
- * POST, etc.) and close the dialog. Used by submit-style and form-method
- * actions; handler-style + confirm/modal flows through ActionModalDialog
- * instead.
- */
-function ConfirmActionDialog({ trigger, title, message, destructive, onConfirm, }) {
-    const [open, setOpen] = useState(false);
-    const confirmClass = destructive
-        ? 'inline-flex items-center justify-center rounded-md bg-destructive px-3 h-9 text-sm font-medium text-destructive-foreground hover:bg-destructive/90'
-        : 'inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90';
-    return (_jsxs(_Fragment, { children: [trigger(() => setOpen(true)), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title ?? 'Are you sure?' }), _jsx(DialogDescription, { children: message })] }), _jsxs(DialogFooter, { children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground", children: "Cancel" }), _jsx("button", { type: "button", onClick: () => { setOpen(false); onConfirm(); }, className: confirmClass, autoFocus: true, children: destructive ? 'Delete' : 'Confirm' })] })] }) })] }));
-}
-/**
- * Button + optional confirm dialog for a form-method action (Delete and
- * the like). Click → fetch + JSON dispatch via `dispatchMethodAction` —
- * no full page reload, no server-rendered form. Confirm dialog gates the
- * dispatch when configured.
- */
-function MethodActionButton({ url, method, confirm, destructive, className, name, ariaLabel, tooltip, inner, }) {
-    const navigate = useNavigate();
-    const { notify } = useToast();
-    const dispatch = () => {
-        if (!url)
-            return;
-        void dispatchMethodAction(url, method, navigate, notify);
-    };
-    if (confirm) {
-        return (_jsx(ConfirmActionDialog, { title: confirm.title, message: confirm.message, destructive: destructive, onConfirm: dispatch, trigger: (open) => withTooltip(_jsx("button", { type: "button", onClick: open, className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }), tooltip) }));
-    }
-    return withTooltip(_jsx("button", { type: "button", onClick: dispatch, className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }), tooltip);
-}
-/**
- * Button for a handler-style action without confirm/modal. Click →
- * fetch + JSON via `dispatchHandlerAction`, then SPA-navigate +
- * show notifications. No full page reload.
- */
-function HandlerActionButton({ url, ids, className, name, ariaLabel, tooltip, inner, }) {
-    const navigate = useNavigate();
-    const { notify } = useToast();
-    return withTooltip(_jsx("button", { type: "button", onClick: () => void dispatchHandlerAction(url, ids, navigate, notify), className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }), tooltip);
-}
-/** Render either a single Action or an ActionGroup based on `el.type`.
- * Used by callsites that accept both (table header / bulk toolbars,
- * heading actions, container schemas). */
+/** Thin wrapper that binds the renderer-injected deps so call sites
+ *  inside this file can keep the original three-arg signature. The
+ *  action layer (Phase 3) lives behind `renderActionLikeImpl`; it needs
+ *  `renderElement` + `renderFormChild` for nested schemas + modal-form
+ *  bodies. Both are function declarations so hoisting handles the
+ *  forward reference cleanly. */
 function renderActionLike(el, index, opts = {}) {
-    if (el.type === 'slotComponent') {
-        // Plugin-contributed React mount — render through the main element
-        // dispatcher, which looks up the registered component and forwards
-        // its serialised props bag. Keeps every action-row slot (heading
-        // children, alert footer, empty-state footer, table-toolbar bulk
-        // strip) usable as a plugin extension point.
-        return renderElement(el, index);
-    }
-    if (el.type === 'actionGroup') {
-        return _jsx(ActionGroupTrigger, { el: el, ids: opts.ids ?? [] }, index);
-    }
-    return renderAction(el, index, opts);
-}
-/** Color preset → tailwind class group. `ghost` is bg-less and works
- * with hover:bg-accent. `destructive` uses a soft tonal style (Filament-
- * style) so per-row Delete buttons sit calmly next to primary actions
- * instead of shouting in saturated red — the modal confirm CTA still
- * renders solid red via its own hardcoded class. Others are solid + hover-
- * darken. */
-const COLOR_VARIANTS = {
-    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-    destructive: 'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60',
-    success: 'bg-emerald-600 text-white hover:bg-emerald-600/90',
-    warning: 'bg-amber-500 text-white hover:bg-amber-500/90',
-    info: 'bg-blue-600 text-white hover:bg-blue-600/90',
-    ghost: 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
-};
-/** Outlined variant — replaces solid bg with a border + transparent bg. */
-const OUTLINED_VARIANTS = {
-    primary: 'border border-primary/40 text-primary bg-transparent hover:bg-primary/10',
-    destructive: 'border border-destructive/40 text-destructive bg-transparent hover:bg-destructive/10',
-    success: 'border border-emerald-600/40 text-emerald-700 dark:text-emerald-400 bg-transparent hover:bg-emerald-600/10',
-    warning: 'border border-amber-500/40 text-amber-700 dark:text-amber-400 bg-transparent hover:bg-amber-500/10',
-    info: 'border border-blue-600/40 text-blue-700 dark:text-blue-400 bg-transparent hover:bg-blue-600/10',
-    ghost: 'border border-input text-foreground bg-transparent hover:bg-accent',
-};
-/** Size preset → tailwind sizing classes. Icon-only buttons use the
- * width=height variants from the second map. */
-const SIZE_CLASSES = {
-    sm: 'h-7 px-2 text-xs',
-    md: 'h-8 px-3 text-sm',
-    lg: 'h-10 px-4 text-base',
-};
-const ICON_SIZE_CLASSES = {
-    sm: 'h-7 w-7 text-xs',
-    md: 'h-8 w-8 text-sm',
-    lg: 'h-10 w-10 text-base',
-};
-/** Build the trigger button className from action meta + render context. */
-function actionButtonClass(el, opts) {
-    const destructive = Boolean(el['destructive']);
-    const placement = String(el['placement'] ?? 'inline');
-    const outlined = Boolean(el['outlined']);
-    const iconOnly = Boolean(el['iconOnly']);
-    const explicitColor = el['color'];
-    const explicitSize = el['size'];
-    // Color: explicit `.color()` wins; `destructive` flag falls back to
-    // 'destructive'; otherwise 'primary'.
-    const color = explicitColor ?? (destructive ? 'destructive' : 'primary');
-    const variant = (outlined ? OUTLINED_VARIANTS[color] : COLOR_VARIANTS[color]) ?? COLOR_VARIANTS['primary'];
-    // Size: explicit `.size()` wins; otherwise small for row context, md elsewhere.
-    const size = explicitSize ?? (opts.size === 'sm' || placement === 'row' ? 'sm' : 'md');
-    const sizingMap = iconOnly ? ICON_SIZE_CLASSES : SIZE_CLASSES;
-    const sizing = sizingMap[size] ?? sizingMap['md'];
-    return `relative inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition ${variant} ${sizing}`;
-}
-/** Render the action's icon (when set). String names resolve through the
- * user-extensible icon registry; missing names render nothing rather
- * than a fallback glyph (action icons are decorative, not load-bearing). */
-function renderActionIcon(el) {
-    const name = typeof el['icon'] === 'string' ? el['icon'] : undefined;
-    const Icon = resolveIcon(name);
-    if (!Icon)
-        return null;
-    return _jsx(Icon, { className: "size-4", "aria-hidden": "true" });
-}
-/** Tiny corner badge for actions that set `.badge(...)`. */
-function renderActionBadge(el) {
-    const value = el['badge'];
-    if (value === undefined || value === null || value === '')
-        return null;
-    const color = el['badgeColor'] ?? 'bg-primary text-primary-foreground';
-    return (_jsx("span", { className: `absolute -top-1 -right-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium ${color}`, children: String(value) }));
-}
-/** If `meta.tooltip` is set, wrap the trigger in a Tooltip. The Tooltip's
- * provider mounts on demand so multiple actions on a page don't share
- * state. */
-function withTooltip(node, tooltip) {
-    if (!tooltip)
-        return node;
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: () => node }), _jsx(TooltipContent, { children: tooltip })] }) }));
-}
-function renderAction(el, index, opts = {}) {
-    const name = String(el['name'] ?? '');
-    const label = String(el['label'] ?? name);
-    const destructive = Boolean(el['destructive']);
-    const href = el['href'];
-    const method = el['method'];
-    const actionUrl = el['action'];
-    const dispatchUrl = el['dispatchUrl'];
-    const submit = Boolean(el['submit']);
-    const confirm = el['confirm'];
-    const tooltip = el['tooltip'];
-    const iconOnly = Boolean(el['iconOnly']);
-    const isDisabled = Boolean(el['disabled']);
-    const className = actionButtonClass(el, opts) + (isDisabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '');
-    const icon = renderActionIcon(el);
-    const badge = renderActionBadge(el);
-    // Icon-only buttons hide the label visually but expose it via aria-label.
-    const ariaLabel = iconOnly ? label : undefined;
-    const inner = iconOnly ? _jsxs(_Fragment, { children: [icon, badge] }) : _jsxs(_Fragment, { children: [icon, _jsx("span", { children: label }), badge] });
-    // Submit-style action — renders as <button type="submit">. Optionally
-    // targets a specific form via the HTML `form="<id>"` attribute so the
-    // button can submit a form it lives outside of (e.g. a page-header
-    // Save button driving a form below). When `formField` is set, the
-    // button posts a sentinel name/value pair (e.g. `_continueCreate=1`)
-    // so the server can branch on which submit was clicked.
-    if (submit) {
-        const formTarget = el['form'];
-        const formField = el['formField'];
-        if (confirm) {
-            // Confirm-gated submit: render as type="button" so click opens the
-            // dialog instead of submitting; on confirm, programmatically submit
-            // the targeted form (or the closest enclosing form if no formTarget).
-            // `formField` is intentionally not threaded here — programmatic
-            // `requestSubmit()` has no submitter, so the name/value pair would
-            // be lost anyway. Pair `.confirm()` with a hidden input on the form
-            // if you need a sentinel under a confirm flow.
-            return (_jsx(ConfirmActionDialog, { title: confirm.title, message: confirm.message, destructive: destructive, onConfirm: () => {
-                    if (typeof document === 'undefined')
-                        return;
-                    const form = formTarget
-                        ? document.getElementById(formTarget)
-                        : document.querySelector('form');
-                    form?.requestSubmit();
-                }, trigger: (open) => withTooltip(_jsx("button", { type: "button", onClick: open, className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }), tooltip) }, index));
-        }
-        return withTooltip(_jsx("button", { type: "submit", form: formTarget, className: className, "data-action-name": name, "aria-label": ariaLabel, ...(formField ? { name: formField.name, value: formField.value } : {}), children: inner }, index), tooltip);
-    }
-    // Substitute the `:id` placeholder with the current row id when this
-    // action is rendered in a row context. Lets row-level link/form actions
-    // ship a single template URL like `/admin/articles/:id/edit`.
-    const rowId = opts.ids?.length === 1 ? opts.ids[0] : undefined;
-    const resolveTemplate = (s) => s && rowId ? s.replace(':id', rowId) : s;
-    // Link-style action.
-    if (href) {
-        return withTooltip(_jsx("a", { href: resolveTemplate(href), className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }, index), tooltip);
-    }
-    // Form-style action (POST/PUT/PATCH/DELETE) — fetch + JSON, no full reload.
-    if (method) {
-        const resolvedUrl = resolveTemplate(actionUrl);
-        return (_jsx(MethodActionButton, { url: resolvedUrl, method: method, confirm: confirm, destructive: destructive, className: className, name: name, ariaLabel: ariaLabel, tooltip: tooltip, inner: inner }, index));
-    }
-    // Handler-style action — fetch + JSON dispatch with `ids[]` body.
-    if (dispatchUrl) {
-        const ids = opts.ids ?? [];
-        const modal = el['modal'];
-        if (confirm || modal) {
-            return (_jsx(ActionModalDialog, { meta: el, ids: ids, trigger: (open) => withTooltip(_jsx("button", { type: "button", onClick: open, className: className, "data-action-name": name, "aria-label": ariaLabel, children: inner }), tooltip) }, index));
-        }
-        return (_jsx(HandlerActionButton, { url: dispatchUrl, ids: ids, className: className, name: name, ariaLabel: ariaLabel, tooltip: tooltip, inner: inner }, index));
-    }
-    // No dispatch wired (no href / method / dispatchUrl). Render a disabled
-    // placeholder so the user sees the button, but it does nothing.
-    return withTooltip(_jsx("button", { type: "button", disabled: true, className: className + ' opacity-50 cursor-not-allowed', "data-action-name": name, "aria-label": ariaLabel, children: inner }, index), tooltip);
-}
-// ─── Layout helpers ─────────────────────────────────────────
-/**
- * Map `meta._layout` (Plan #8 — `columnSpan / columnStart / columnOrder`)
- * onto Tailwind utility classes. Returns an empty string when the
- * element has no layout hints. Outside of a parent Grid/Split the
- * classes have no effect — Tailwind generates `col-span-*` /
- * `col-start-*` / `order-*` regardless of context.
- *
- * Tailwind's JIT only ships utilities up to a fixed range; clamp here
- * to the safe defaults (1..12 for col, 1..12 for order).
- */
-function layoutClasses(el) {
-    const layout = el['_layout'];
-    if (!layout)
-        return '';
-    const out = [];
-    if (typeof layout.columnSpan === 'number') {
-        const span = Math.max(1, Math.min(12, layout.columnSpan));
-        out.push(`col-span-${span}`);
-    }
-    if (typeof layout.columnStart === 'number') {
-        const start = Math.max(1, Math.min(12, layout.columnStart));
-        out.push(`col-start-${start}`);
-    }
-    if (typeof layout.columnOrder === 'number') {
-        const order = Math.max(1, Math.min(12, layout.columnOrder));
-        out.push(`order-${order}`);
-    }
-    return out.join(' ');
-}
-// ─── Container helpers ──────────────────────────────────────
-function renderChildren(children, gap = 'gap-4') {
-    if (!children || children.length === 0)
-        return null;
-    return (_jsx("div", { className: `flex flex-col ${gap}`, children: children.map((child, i) => renderElement(child, i)) }));
-}
-// ─── Tabs (stateful — needs useState) ────────────────────────
-/**
- * Active-filters bar — pill row above the table summarising every filter
- * with a current value. Each pill shows the filter's `indicator` text
- * (server-formatted via `Filter.indicator()` / per-subclass defaults) and
- * an `×` button that clears that filter's URL key in place. Clicking ×
- * also drops `?page` so users land on the first page of the relaxed set.
- *
- * Renders nothing when no filter has an indicator.
- */
-function ActiveFiltersBar({ filters, prefix }) {
-    const navigate = useNavigate();
-    const active = filters.filter(f => typeof f['indicator'] === 'string' && f['indicator'] !== '');
-    if (active.length === 0)
-        return null;
-    const clear = (name) => {
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        url.searchParams.delete(prefixK(prefix, name));
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    const clearAll = () => {
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        for (const f of active)
-            url.searchParams.delete(prefixK(prefix, String(f['name'] ?? '')));
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs", children: [active.map((f, i) => {
-                const name = String(f['name'] ?? '');
-                const indicator = String(f['indicator'] ?? '');
-                return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border bg-muted/40 pl-2.5 pr-1 py-0.5", children: [_jsx("span", { children: indicator }), _jsx("button", { type: "button", onClick: () => clear(name), "aria-label": `Clear filter ${indicator}`, className: "inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground", children: "\u00D7" })] }, i));
-            }), active.length > 1 && (_jsx("button", { type: "button", onClick: clearAll, className: "text-muted-foreground hover:text-foreground underline-offset-2 hover:underline", children: "Clear all" }))] }));
-}
-/**
- * Filter icon button + Popover containing every filter control.
- * Opens on click; the inner Selects don't dismiss the outer Popover when
- * an option is chosen (Base UI Popover doesn't auto-close on inner clicks).
- *
- * Each FilterSelect navigates the page on change (window.location), so the
- * filter form is no longer needed — keeps the search input in its own
- * lightweight form for native Enter-to-submit.
- */
-function FilterPopover({ filters, prefix }) {
-    const activeCount = filters.filter(f => {
-        const v = f['value'];
-        return typeof v === 'string' && v !== '';
-    }).length;
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: (props) => (_jsxs("button", { ...props, type: "button", "aria-label": "Filters", className: "relative inline-flex h-9 items-center justify-center gap-1.5 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground", children: [_jsx(FilterIcon, { className: "size-4" }), _jsx("span", { children: "Filters" }), activeCount > 0 && (_jsx("span", { className: "ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-primary-foreground", children: activeCount }))] })) }), _jsx(PopoverContent, { align: "start", className: filters.some(f => f['kind'] === 'queryBuilder')
-                    ? 'w-[36rem] max-w-[calc(100vw-2rem)] p-3'
-                    : 'w-72 p-3', children: _jsx("div", { className: "flex flex-col gap-3", children: filters.map((f, i) => renderFilterControl(f, i, prefix)) }) })] }));
-}
-/**
- * Inline strip of filter controls — used by `Table.filtersLayout('above-content'
- * | 'above-content-collapsible' | 'below-content')`. Mirrors `FilterPopover`'s
- * inner body but lays the controls out in a wrapping row instead of a
- * vertical stack inside a popover.
- */
-function FilterStrip({ filters, prefix }) {
-    if (filters.length === 0)
-        return null;
-    return (_jsx("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/30 p-3 sm:flex-row sm:flex-wrap sm:items-end", children: filters.map((f, i) => (_jsx("div", { className: "min-w-[12rem] flex-1 sm:max-w-xs", children: renderFilterControl(f, i, prefix) }, i))) }));
-}
-/**
- * Toolbar button paired with `FilterStrip` for `Table.filtersLayout(
- * 'above-content-collapsible')`. Visually matches the modal-mode trigger
- * (filter icon + "Filters" label + active-count badge) but flips a parent-
- * owned `open` state instead of opening a Popover.
- */
-function FilterStripToggle({ filters, open, onToggle, }) {
-    const activeCount = filters.filter(f => {
-        const v = f['value'];
-        return typeof v === 'string' && v !== '';
-    }).length;
-    return (_jsxs("button", { type: "button", "aria-label": "Filters", "aria-expanded": open, onClick: onToggle, className: "relative inline-flex h-9 items-center justify-center gap-1.5 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground", children: [_jsx(FilterIcon, { className: "size-4" }), _jsx("span", { children: "Filters" }), activeCount > 0 && (_jsx("span", { className: "ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-primary-foreground", children: activeCount }))] }));
-}
-/**
- * Render row actions inline. Each Action becomes a small button next to
- * the others; an `ActionGroup` placed in row position keeps its dropdown
- * via `ActionGroupTrigger` (the dropdown UX is opt-in via grouping, not
- * a default). Per-row visibility and disabled state come from the
- * server-side eval inside `dispatchTable` (`_visibleActions` /
- * `_disabledActions` keys on the row).
- *
- * Each Action's dispatch (link / fetch+JSON / modal / confirm) is handled
- * by `renderActionLike` → `renderAction`, same path as header / inline /
- * bulk placements. The `:id` substitution comes from `opts.ids = [rowId]`.
- */
-function renderRowActions(rowId, rowRecord, actions) {
-    const rowVisibleSet = new Set(rowRecord?.['_visibleActions'] ?? []);
-    const rowDisabledSet = new Set(rowRecord?.['_disabledActions'] ?? []);
-    const visible = actions.filter(a => {
-        if (!a['conditional'])
-            return true;
-        return rowVisibleSet.has(String(a['name'] ?? ''));
-    });
-    const decorate = (a) => {
-        const name = String(a['name'] ?? '');
-        if (rowDisabledSet.has(name)) {
-            return { ...a, disabled: true };
-        }
-        return a;
-    };
-    return (_jsx("div", { className: "flex items-center justify-end gap-1", children: visible.map((a, i) => renderActionLike(decorate(a), i, { ids: [rowId], size: 'sm' })) }));
-}
-/**
- * Trigger button + dropdown menu for an `ActionGroup` meta. Reuses the
- * action button styling helpers so a group's chrome (color/size/outlined/
- * tooltip/iconButton) matches a regular Action. Each child Action
- * dispatches via the same logic as `renderAction` — link/method/handler/
- * confirm/modal — but routed through a `pending` state so the dropdown
- * closes before any dialog opens (shadcn pattern: one popup at a time).
- */
-function ActionGroupTrigger({ el, ids = [], }) {
-    const [pending, setPending] = useState(null);
-    const navigate = useNavigate();
-    const { notify } = useToast();
-    const name = String(el['name'] ?? '');
-    const label = String(el['label'] ?? name);
-    const tooltip = el['tooltip'];
-    const iconOnly = Boolean(el['iconOnly']);
-    const isDisabled = Boolean(el['disabled']);
-    const childActions = (el.children ?? []).filter(c => c.type === 'action');
-    const className = actionButtonClass(el, {}) + (isDisabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '');
-    const ariaLabel = iconOnly ? label : undefined;
-    // Direct-dispatch path mirrors renderAction's branches but skipping
-    // confirm/modal (those queue into `pending` so the dropdown can close).
-    const dispatch = (action) => {
-        const href = action['href'];
-        const method = action['method'];
-        const actionUrl = action['action'];
-        const dispatchUrl = action['dispatchUrl'];
-        if (href) {
-            navigate(href);
-            return;
-        }
-        if (method && actionUrl) {
-            void dispatchMethodAction(actionUrl, method, navigate, notify);
-            return;
-        }
-        if (dispatchUrl) {
-            void dispatchHandlerAction(dispatchUrl, ids, navigate, notify);
-            return;
-        }
-    };
-    const onItemClick = (action) => {
-        if (action['modal'] || action['confirm']) {
-            setPending(action);
-            return;
-        }
-        dispatch(action);
-    };
-    const pendingHandler = pending && pending['dispatchUrl'];
-    const pendingConfirmOnly = pending && !pendingHandler && pending['confirm'];
-    const pendingConfirm = pendingConfirmOnly || pending?.['confirm'];
-    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: (props) => withTooltip(_jsx("button", { ...props, type: "button", className: className, "data-action-group-name": name, "aria-label": ariaLabel, children: iconOnly ? null : _jsx("span", { children: label }) }), tooltip) }), _jsx(DropdownMenuContent, { align: "end", children: childActions.map((a, i) => {
-                            const itemLabel = String(a['label'] ?? a['name'] ?? '');
-                            const destructive = Boolean(a['destructive']);
-                            const itemDisabled = Boolean(a['disabled']);
-                            return (_jsx(DropdownMenuItem, { destructive: destructive, disabled: itemDisabled, onClick: () => { if (!itemDisabled)
-                                    onItemClick(a); }, children: itemLabel }, i));
-                        }) })] }), pendingHandler && pending && (_jsx(ActionModalDialog, { meta: pending, ids: ids, open: true, onOpenChange: (o) => { if (!o)
-                    setPending(null); } })), _jsx(Dialog, { open: Boolean(pendingConfirmOnly), onOpenChange: (o) => { if (!o)
-                    setPending(null); }, children: _jsx(DialogContent, { children: pendingConfirmOnly && pendingConfirm && (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: pendingConfirm.title ?? 'Are you sure?' }), _jsx(DialogDescription, { children: pendingConfirm.message })] }), _jsxs(DialogFooter, { children: [_jsx("button", { type: "button", onClick: () => setPending(null), className: "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground", children: "Cancel" }), _jsx("button", { type: "button", autoFocus: true, onClick: () => {
-                                            const action = pending;
-                                            setPending(null);
-                                            if (action)
-                                                dispatch(action);
-                                        }, className: pending && pending['destructive']
-                                            ? 'inline-flex items-center justify-center rounded-md bg-destructive px-3 h-9 text-sm font-medium text-destructive-foreground hover:bg-destructive/90'
-                                            : 'inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90', children: pending && pending['destructive'] ? 'Delete' : 'Confirm' })] })] })) }) })] }));
-}
-function TabsRenderer({ el, index }) {
-    const tabs = (el.children ?? []).filter(c => c.type === 'tab');
-    if (tabs.length === 0)
-        return null;
-    const variant = el['variant'] === 'underline' ? 'underline' : 'pills';
-    const tabValues = tabs.map((_, i) => `tab-${i}`);
-    const defaultValue = tabValues[0];
-    // Underline variant overrides the primitive's pill chrome with a bottom
-    // border on the list and per-trigger underline-on-selected. No
-    // `<TabsIndicator>` is rendered, so there's no sliding pill to hide.
-    const listClass = variant === 'underline'
-        ? 'relative flex h-auto w-fit justify-start gap-0 rounded-none bg-transparent p-0 text-muted-foreground border-b border-border'
-        : undefined;
-    const triggerClass = variant === 'underline'
-        ? 'rounded-none border-0 border-b-2 border-transparent bg-transparent px-4 py-2 text-sm font-medium -mb-px data-[active]:border-primary data-[active]:text-foreground data-[active]:bg-transparent data-[active]:shadow-none'
-        : undefined;
-    return (_jsxs(Tabs, { defaultValue: defaultValue, children: [_jsx(TabsList, { className: listClass, children: tabs.map((tab, i) => (_jsxs(TabsTrigger, { value: tabValues[i], className: triggerClass, children: [String(tab['label'] ?? ''), tab['badge'] ? (_jsx("span", { className: "ml-2 text-xs px-1.5 py-0.5 rounded-full bg-muted", children: String(tab['badge']) })) : null] }, i))) }), tabs.map((tab, i) => (_jsx(TabsContent, { value: tabValues[i], className: "pt-2", children: renderChildren(tab['children']) }, i)))] }, index));
-}
-// ─── Section (stateful when collapsible) ────────────────────
-function SectionRenderer({ el, index }) {
-    const title = el['title'] ? String(el['title']) : undefined;
-    const description = el['description'] ? String(el['description']) : undefined;
-    const iconName = el['icon'] ? String(el['icon']) : undefined;
-    const badge = el['badge'] ? String(el['badge']) : undefined;
-    const columns = Number(el['columns'] ?? 1);
-    const collapsible = Boolean(el['collapsible']);
-    const compact = Boolean(el['compact']);
-    const dense = Boolean(el['dense']);
-    const secondary = Boolean(el['secondary']);
-    const afterHeader = el['afterHeader'] ?? [];
-    const persist = Boolean(el['persistCollapsed']);
-    const persistKey = el['persistKey']
-        ? `pilotiq.section.${String(el['persistKey'])}`
-        : title
-            ? `pilotiq.section.${title.toLowerCase().replace(/\s+/g, '-')}`
-            : undefined;
-    const [collapsed, setCollapsed] = useState(Boolean(el['defaultCollapsed']));
-    // Plan #8 — persist open/closed state to localStorage. Hydration-safe:
-    // initial render uses `defaultCollapsed`; effect overrides from storage
-    // after mount so server + client first paint agree.
-    useEffect(() => {
-        if (!persist || !persistKey)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        try {
-            const stored = window.localStorage.getItem(persistKey);
-            if (stored === '0')
-                setCollapsed(false);
-            if (stored === '1')
-                setCollapsed(true);
-        }
-        catch { /* localStorage may be unavailable (private mode) */ }
-    }, [persist, persistKey]);
-    useEffect(() => {
-        if (!persist || !persistKey)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        try {
-            window.localStorage.setItem(persistKey, collapsed ? '1' : '0');
-        }
-        catch { /* ignore */ }
-    }, [persist, persistKey, collapsed]);
-    // `dense` tightens the inner spacing between the section's children
-    // (orthogonal to `compact`, which trims the section's outer padding /
-    // heading). gap-2 ≈ 8px vs gap-4 ≈ 16px.
-    const innerGap = dense ? 'gap-2' : 'gap-4';
-    const gridClass = columns === 2 ? `grid grid-cols-2 ${innerGap}` : columns === 3 ? `grid grid-cols-3 ${innerGap}` : `flex flex-col ${innerGap}`;
-    const padding = compact ? 'p-3' : 'p-4';
-    const titleSize = compact ? 'text-sm' : 'text-base';
-    const Icon = resolveIcon(iconName);
-    // `secondary()` flips the section background to the muted token so it
-    // visually recedes beneath a primary section. The border thins to the
-    // same muted tone for the same reason — a sharp `border-input` line
-    // around a muted block looks like a typographic ledger rather than a
-    // grouping container.
-    const surfaceClass = secondary ? 'bg-muted/40 border-muted' : 'bg-card';
-    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 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();
-    const formId = formState?.formMeta['formId'] ? String(formState.formMeta['formId']) : undefined;
-    const wizardUrl = formState?.formMeta['wizardUrl'] ? String(formState.formMeta['wizardUrl']) : undefined;
-    const steps = (el.children ?? []).filter(c => c.type === 'step');
-    const skippable = Boolean(el['skippable']);
-    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 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);
-    // Persist active step changes to localStorage (when enabled).
-    useEffect(() => {
-        if (!storageKey)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        try {
-            window.localStorage.setItem(storageKey, String(active));
-        }
-        catch { /* ignore */ }
-    }, [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 (!queryKey)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        try {
-            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 */ }
-    }, [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));
-    }
-    const isLast = active === steps.length - 1;
-    const isFirst = active === 0;
-    const advance = async (target) => {
-        setAdvanceError(null);
-        if (!wizardUrl) {
-            setActive(target);
-            return;
-        }
-        setAdvancing(true);
-        try {
-            const values = formState?.values ?? {};
-            // Validate intermediate steps in order when jumping ahead.
-            const path = target > active
-                ? Array.from({ length: target - active }, (_, k) => active + k)
-                : [active]; // jumping back is unconstrained
-            let landed = active;
-            for (const stepIdx of path) {
-                const res = await fetch(wizardUrl, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-                    body: JSON.stringify({ step: stepIdx, values }),
-                });
-                if (res.status === 422) {
-                    const data = await res.json().catch(() => ({}));
-                    const errors = (data?.errors ?? {});
-                    if (formState?.applyErrors)
-                        formState.applyErrors(errors);
-                    landed = stepIdx;
-                    setAdvanceError('Please fix the highlighted fields.');
-                    break;
-                }
-                if (!res.ok) {
-                    setAdvanceError('Step validation failed.');
-                    break;
-                }
-                landed = stepIdx + 1;
-            }
-            setActive(target > active ? landed : target);
-        }
-        catch {
-            setAdvanceError('Step validation failed.');
-        }
-        finally {
-            setAdvancing(false);
-        }
-    };
-    return (_jsxs("div", { className: `flex flex-col gap-6 ${layoutClasses(el)}`.trim(), children: [_jsx("ol", { className: "flex items-center gap-3 overflow-x-auto", "aria-label": "Wizard progress", children: steps.map((s, i) => {
-                    const Icon = resolveIcon(s['icon'] ? String(s['icon']) : undefined);
-                    const reachable = skippable || i <= active;
-                    const isActive = i === active;
-                    const isDone = i < active;
-                    return (_jsxs("li", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("button", { type: "button", disabled: !reachable || advancing, onClick: () => reachable && advance(i), className: [
-                                    'flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition',
-                                    isActive ? 'border-primary bg-primary/10 text-foreground'
-                                        : isDone ? 'border-border text-muted-foreground hover:bg-muted'
-                                            : 'border-border text-muted-foreground',
-                                    reachable ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed',
-                                ].join(' '), "aria-current": isActive ? 'step' : undefined, children: [_jsx("span", { className: [
-                                            'flex size-5 items-center justify-center rounded-full text-[11px] font-semibold',
-                                            isActive ? 'bg-primary text-primary-foreground'
-                                                : 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(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 = {
-    default: '',
-    muted: 'text-muted-foreground',
-    primary: 'text-primary',
-    destructive: 'text-destructive',
-    success: 'text-emerald-600 dark:text-emerald-400',
-    warning: 'text-amber-600 dark:text-amber-400',
-    info: 'text-blue-600 dark:text-blue-400',
-};
-const TEXT_SIZE_CLASSES = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-};
-const TEXT_WEIGHT_CLASSES = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-};
-function renderText(el, index) {
-    const content = String(el['content'] ?? '');
-    const color = el['color'] ? String(el['color']) : undefined;
-    const size = el['size'] ? String(el['size']) : undefined;
-    const weight = el['weight'] ? String(el['weight']) : undefined;
-    const isBadge = el['badge'] === true;
-    if (isBadge) {
-        const badgeKey = el['badgeColor'] ? String(el['badgeColor']) : 'gray';
-        const cls = BADGE_COLOR_CLASSES[badgeKey] ?? BADGE_COLOR_CLASSES['gray'];
-        return (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`, children: content }, index));
-    }
-    // Defaults match the previous bare `<p>` for back-compat: text-sm + muted.
-    const sizeCls = size ? (TEXT_SIZE_CLASSES[size] ?? '') : 'text-sm';
-    const colorCls = color ? (TEXT_COLOR_CLASSES[color] ?? '') : 'text-muted-foreground';
-    const weightCls = weight ? (TEXT_WEIGHT_CLASSES[weight] ?? '') : '';
-    return (_jsx("p", { className: `${sizeCls} ${colorCls} ${weightCls}`.trim(), children: content }, index));
-}
-/** Coerce a `KeyValueEntry` state value (object | JSON string | …) into a
- *  flat record. Returns `null` when the value is empty or non-decodable. */
-function normalizeKeyValueValue(value) {
-    if (value === null || value === undefined || value === '')
-        return null;
-    if (typeof value === 'string') {
-        try {
-            const parsed = JSON.parse(value);
-            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
-                return parsed;
-            }
-        }
-        catch {
-            // Non-JSON string — fall through to null so the renderer shows the
-            // fallback rather than misrepresenting it as a one-row map.
-        }
-        return null;
-    }
-    if (Array.isArray(value))
-        return null;
-    if (typeof value === 'object')
-        return value;
-    return null;
-}
-/** Render a single kv cell value — primitives become their string form;
- *  nested objects/arrays JSON-stringify for compactness. */
-function formatKeyValueCell(value) {
-    if (value === null || value === undefined)
-        return '';
-    if (typeof value === 'object')
-        return JSON.stringify(value);
-    return String(value);
-}
-/**
- * Plan #16 — read-only label-value pair for `Resource.detail()` schemas.
- * Dispatches on `meta.entryType` (`'text' | 'badge' | 'icon' | 'image' | 'keyValue' | 'color'`).
- * Wraps the rendered value in `<EntryShell>` for the shared chrome
- * (label / helperText / tooltip / copyable trigger).
- */
-function renderEntry(el, index) {
-    const entryType = String(el['entryType'] ?? 'text');
-    const value = el['value'];
-    const fallback = el['default'] ? String(el['default']) : '—';
-    let body;
-    switch (entryType) {
-        case 'text': {
-            const formatted = el['_formatted'] !== undefined
-                ? String(el['_formatted'])
-                : (el['format']
-                    ? applyColumnFormat(value, el['format'])
-                    : (value === null || value === undefined || value === '' ? '' : String(value)));
-            const display = formatted === '' ? fallback : formatted;
-            const isFallback = formatted === '';
-            const isRichText = el['richtext'] === true && !isFallback;
-            const sizeKey = el['size'] ? String(el['size']) : 'sm';
-            const colorKey = el['color'] ? String(el['color']) : (isFallback ? 'muted' : 'default');
-            const weightKey = el['weight'] ? String(el['weight']) : 'normal';
-            const sizeCls = TEXT_SIZE_CLASSES[sizeKey] ?? 'text-sm';
-            const colorCls = TEXT_COLOR_CLASSES[colorKey] ?? '';
-            const weightCls = TEXT_WEIGHT_CLASSES[weightKey] ?? '';
-            const lineClamp = el['lineClamp'];
-            const wrap = el['wrap'] === true;
-            const style = {};
-            if (lineClamp !== undefined) {
-                style.display = '-webkit-box';
-                style.WebkitLineClamp = lineClamp;
-                style.WebkitBoxOrient = 'vertical';
-                style.overflow = 'hidden';
-            }
-            const wrapCls = wrap ? 'whitespace-pre-wrap' : (lineClamp !== undefined ? '' : 'whitespace-nowrap');
-            if (isRichText) {
-                // Server-rendered HTML from a registered richtext renderer (e.g.
-                // `@pilotiq/tiptap`). Wrap in `prose` for sensible default
-                // styling — matches the read-only `Markdown` / `Html` primes.
-                const proseSize = sizeKey === 'lg' || sizeKey === 'xl'
-                    ? 'prose-lg'
-                    : sizeKey === 'sm' || sizeKey === 'xs'
-                        ? 'prose-sm'
-                        : '';
-                body = (_jsx("div", { className: `prose max-w-none dark:prose-invert ${proseSize} ${colorCls} ${weightCls}`.trim(), style: style, dangerouslySetInnerHTML: { __html: display } }));
-                break;
-            }
-            body = (_jsx("span", { className: `${sizeCls} ${colorCls} ${weightCls} ${wrapCls}`.trim(), style: style, children: display }));
-            break;
-        }
-        case 'badge': {
-            const isBlank = value === null || value === undefined || value === '';
-            if (isBlank) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const map = el['colors'] ?? {};
-            const colorKey = map[String(value)] ?? 'gray';
-            const cls = BADGE_COLOR_CLASSES[colorKey] ?? BADGE_COLOR_CLASSES['gray'];
-            body = (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`, children: String(value) }));
-            break;
-        }
-        case 'icon': {
-            const isBlank = value === null || value === undefined || value === '';
-            const map = el['options'] ?? {};
-            const opt = isBlank ? undefined : map[String(value)];
-            if (!opt) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const Icon = resolveIcon(opt.icon) ?? CircleIcon;
-            const colorClass = opt.color ? (COLUMN_COLOR_CLASSES[opt.color] ?? '') : '';
-            const ariaLabel = opt.label ?? String(value);
-            body = _jsx(Icon, { className: `inline size-5 ${colorClass}`.trim(), "aria-label": ariaLabel });
-            break;
-        }
-        case 'image': {
-            const isBlank = value === null || value === undefined || value === '';
-            if (isBlank) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const url = String(value);
-            const width = el['imageWidth'] ?? el['imageSize'] ?? 64;
-            const height = el['imageHeight'] ?? el['imageSize'] ?? 64;
-            const shape = String(el['imageShape'] ?? 'rounded');
-            const shapeCls = shape === 'circle' ? 'rounded-full' : shape === 'square' ? '' : 'rounded-md';
-            body = (_jsx("img", { src: url, alt: "", width: width, height: height, className: `inline-block object-cover ${shapeCls}`.trim() }));
-            break;
-        }
-        case 'keyValue': {
-            const parsed = normalizeKeyValueValue(value);
-            const keys = parsed ? Object.keys(parsed) : [];
-            if (!parsed || keys.length === 0) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const keyLabel = el['keyLabel'] ? String(el['keyLabel']) : 'Key';
-            const valueLabel = el['valueLabel'] ? String(el['valueLabel']) : 'Value';
-            body = (_jsxs("table", { className: "w-full border border-border text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-muted/50 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [_jsx("th", { className: "border-b border-border px-2 py-1", children: keyLabel }), _jsx("th", { className: "border-b border-border px-2 py-1", children: valueLabel })] }) }), _jsx("tbody", { children: keys.map(k => (_jsxs("tr", { className: "border-t border-border first:border-t-0", children: [_jsx("td", { className: "px-2 py-1 align-top font-mono text-xs", children: k }), _jsx("td", { className: "px-2 py-1 align-top font-mono text-xs break-all", children: formatKeyValueCell(parsed[k]) })] }, k))) })] }));
-            break;
-        }
-        case 'color': {
-            const isBlank = value === null || value === undefined || value === '';
-            if (isBlank) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const hex = String(value);
-            const width = el['colorWidth'] ?? el['colorSize'] ?? 24;
-            const height = el['colorHeight'] ?? el['colorSize'] ?? 24;
-            const shape = String(el['colorShape'] ?? 'rounded');
-            const shapeCls = shape === 'circle' ? 'rounded-full' : shape === 'square' ? '' : 'rounded-md';
-            const showValue = el['showValue'] !== false;
-            body = (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: `inline-block border border-border ${shapeCls}`.trim(), style: { width, height, backgroundColor: hex }, "aria-label": hex }), showValue && (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: hex }))] }));
-            break;
-        }
-        case 'code': {
-            const isBlank = value === null || value === undefined || value === '';
-            if (isBlank) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const text = typeof value === 'string' ? value : String(value);
-            const lang = el['language'] ? String(el['language']) : undefined;
-            body = (_jsx("pre", { className: "rounded-md border border-border bg-muted/40 p-3 text-xs overflow-x-auto", "data-language": lang, children: _jsx("code", { className: "font-mono", children: text }) }));
-            break;
-        }
-        case 'component': {
-            const componentName = String(el['component'] ?? '');
-            if (!componentName) {
-                body = (_jsxs(EntryComponentError, { children: ["ComponentEntry is missing its ", _jsx("code", { className: "font-mono", children: "component" }), " name \u2014 set ", _jsx("code", { className: "font-mono", children: "static componentName = '...'" }), " on the subclass or call ", _jsx("code", { className: "font-mono", children: ".component('...')" }), " in the fluent form."] }));
-                break;
-            }
-            const Component = getEntryComponent(componentName);
-            if (!Component) {
-                body = (_jsxs(EntryComponentError, { children: ["No component registered under name ", _jsx("code", { className: "font-mono", children: componentName }), ". Register it at app boot:", _jsx("pre", { className: "mt-2 overflow-x-auto rounded bg-amber-100/60 p-2 text-xs dark:bg-amber-900/30", children: `import { registerEntryComponents } from '@pilotiq/pilotiq/entries'\nregisterEntryComponents({ ${componentName}: ${componentName} })` })] }));
-                break;
-            }
-            // Render-time errors propagate to React's nearest error boundary —
-            // surfacing them inline here would require wrapping every entry in
-            // its own boundary, which v1 doesn't ship. The two pre-render
-            // sentinels above (missing name / missing registration) cover the
-            // typical wiring mistakes.
-            body = _jsx(Component, { value: value });
-            break;
-        }
-        case 'repeatable': {
-            // Read-only sibling of `Repeater`. Reads `meta.rows` (resolved by
-            // `resolveRepeatableRows`) and dispatches on the chosen layout —
-            // `table > grid > stack`. Empty / non-array state falls through to
-            // the inherited `default()` placeholder, same as every other entry.
-            const rows = el['rows'] ?? [];
-            if (rows.length === 0) {
-                body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-                break;
-            }
-            const tableCfg = el['table'];
-            const gridN = el['grid'];
-            const innerCols = el['columns'];
-            const contained = el['contained'] !== false;
-            if (tableCfg && tableCfg.columns.length > 0) {
-                const cols = tableCfg.columns;
-                body = (_jsxs("table", { className: "w-full border border-border text-sm", children: [cols.some(c => c.width) && (_jsx("colgroup", { children: cols.map((c, i) => (_jsx("col", { style: c.width ? { width: c.width } : undefined }, i))) })), _jsx("thead", { children: _jsx("tr", { className: "bg-muted/50 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground", children: cols.map((c, i) => (_jsx("th", { className: `border-b border-border px-2 py-1 ${c.alignment === 'right' ? 'text-right' : c.alignment === 'center' ? 'text-center' : ''}`.trim(), children: c.label }, i))) }) }), _jsx("tbody", { children: rows.map(row => (_jsx("tr", { className: "border-t border-border first:border-t-0 align-top", children: row.children.map((child, i) => {
-                                    const align = cols[i]?.alignment;
-                                    const alignCls = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : '';
-                                    return (_jsx("td", { className: `px-2 py-1 ${alignCls}`.trim(), children: renderElement(child, i) }, i));
-                                }) }, row.id))) })] }));
-                break;
-            }
-            const cardCls = contained
-                ? 'rounded-md border border-border p-3 bg-background'
-                : '';
-            const innerColsCls = innerCols && innerCols >= 2
-                ? `grid gap-3 grid-cols-1 md:grid-cols-${Math.min(innerCols, 6)}`
-                : 'space-y-2';
-            const cards = rows.map(row => (_jsx("div", { className: `${cardCls} ${innerColsCls}`.trim(), children: row.children.map((child, i) => renderElement(child, i)) }, row.id)));
-            if (gridN && gridN >= 2) {
-                const cap = Math.min(gridN, 6);
-                body = (_jsx("div", { className: `w-full grid gap-3 grid-cols-1 md:grid-cols-${cap}`, children: cards }));
-                break;
-            }
-            body = _jsx("div", { className: "w-full space-y-3", children: cards });
-            break;
-        }
-        default:
-            body = _jsx("span", { className: "text-sm text-muted-foreground", children: fallback });
-    }
-    const copyable = el['copyable'];
-    const copyValue = el['_formatted'] !== undefined
-        ? String(el['_formatted'])
-        : value === null || value === undefined
-            ? ''
-            : typeof value === 'object'
-                ? JSON.stringify(value)
-                : String(value);
-    return (_jsx(EntryShell, { el: el, copyValue: copyable !== undefined ? copyValue : undefined, copyableLabel: copyable?.label, children: body }, index));
-}
-function EntryShell({ el, copyValue, copyableLabel, children }) {
-    const label = String(el['label'] ?? '');
-    const helperText = el['helperText'] ? String(el['helperText']) : undefined;
-    const tooltipText = el['tooltip'] ? String(el['tooltip']) : undefined;
-    const inline = el['inlineLabel'] === true;
-    const labelNode = label ? (_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-medium text-muted-foreground", children: [_jsx("span", { children: label }), tooltipText && _jsx(EntryTooltip, { text: tooltipText })] })) : null;
-    const valueRow = (_jsxs("div", { className: "flex items-center gap-2", children: [children, copyValue !== undefined && (_jsx(EntryCopyButton, { text: copyValue, label: copyableLabel ?? 'Copy' }))] }));
-    if (inline) {
-        return (_jsxs("div", { className: "flex items-baseline gap-3", children: [labelNode && _jsx("div", { className: "min-w-32", children: labelNode }), _jsxs("div", { className: "min-w-0 flex-1", children: [valueRow, helperText && _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: helperText })] })] }));
-    }
-    return (_jsxs("div", { className: "space-y-1", children: [labelNode, valueRow, helperText && _jsx("p", { className: "text-xs text-muted-foreground", children: helperText })] }));
+    return renderActionLikeImpl(el, index, opts, { renderElement, renderFormChild });
 }
-function EntryComponentError({ children }) {
-    return (_jsx("div", { role: "alert", className: "rounded-md border border-amber-500/40 bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-950/30 dark:text-amber-200", children: children }));
-}
-function EntryTooltip({ text }) {
-    const trigger = (_jsx("button", { type: "button", className: "inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border text-[10px] text-muted-foreground", "aria-label": text, children: "?" }));
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: () => trigger }), _jsx(TooltipContent, { children: text })] }) }));
+/** Thin wrapper around `renderFieldImpl` that pre-binds `renderElement`.
+ *  Lets `FormFields`, `renderFormChild`, and the renderElement switch
+ *  call the form-layer field renderer with the original two-arg signature. */
+function renderField(el, index) {
+    return renderFieldImpl(el, index, renderElement);
 }
-function EntryCopyButton({ text, label }) {
-    const [copied, setCopied] = useState(false);
-    const handleClick = () => {
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-            navigator.clipboard.writeText(text).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 1500);
-            }).catch(() => { });
-        }
-    };
-    return (_jsx("button", { type: "button", onClick: handleClick, "aria-label": label, title: label, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted", children: copied ? _jsx(CheckIcon, { className: "size-3.5" }) : _jsx(CopyIcon, { className: "size-3.5" }) }));
+/** Re-export the form-layer `renderFormChild` with `renderElement`
+ *  pre-bound, so external consumers (e.g. `SelectFieldInput.tsx`) keep
+ *  importing it from `SchemaRenderer.js` with the same four-arg signature.
+ *  Internal callers (action layer dialogs, ActionGroupTrigger) get the
+ *  same closure through prop injection. */
+export function renderFormChild(child, index, values, errors) {
+    return renderFormChildImpl(child, index, values, errors, renderElement);
 }
-// ─── Alert renderer ─────────────────────────────────────────
-//
-// Owns dismissal state (per-mount + optional localStorage persistence)
-// + icon dispatch + footer-actions alignment. Lifted out of the inline
-// `case 'alert'` branch when Alert gained `dismissible() / iconColor() /
-// footerActionsAlignment()` setters — those need component-local state
-// (the dismiss button, the persisted-dismissal hydration on mount), and
-// inlining the hooks under a switch arm is fragile.
-const ALERT_TYPE_ICONS = {
-    info: InfoIcon,
-    warning: TriangleAlertIcon,
-    success: CircleCheckIcon,
-    danger: CircleAlertIcon,
-};
-const ALERT_TYPE_DEFAULT_ICON_COLOR = {
-    info: 'info',
-    warning: 'warning',
-    success: 'success',
-    danger: 'destructive',
-};
-const ALERT_ACTIONS_ALIGNMENT = {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
+/** Local wrapper around the form-layer `FormRenderer` that pre-binds
+ *  `renderElement`. Kept thin so the switch case below stays a one-liner. */
+function FormRenderer({ el }) {
+    return _jsx(FormRendererImpl, { el: el, renderElement: renderElement });
+}
+/** Pre-bind the three injected deps that `TableRendererBody` needs:
+ *  - `renderElement` for column cells holding Element-typed children
+ *  - `renderActionLike` for row + bulk action dispatch
+ *  - `renderFormChild` for the inline-edit modal's form schema body */
+const tableBodyDeps = {
+    get renderElement() { return renderElement; },
+    get renderActionLike() { return renderActionLike; },
+    get renderFormChild() { return renderFormChild; },
 };
-function alertPersistKey(persistKey) {
-    return `pilotiq.alert.${persistKey}`;
-}
-function AlertRenderer(props) {
-    const { alertType, content, title, dismissible, persistDismissal, iconColor, actionsAlignment, footer, } = props;
-    const [dismissed, setDismissed] = useState(false);
-    // Hydrate persisted-dismissal on first paint. `useState(false)` keeps
-    // SSR + first client paint identical (Hydration safe); the effect
-    // flips to dismissed if localStorage has the flag set.
-    useEffect(() => {
-        if (!persistDismissal)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        try {
-            if (window.localStorage.getItem(alertPersistKey(persistDismissal)) === '1') {
-                setDismissed(true);
-            }
-        }
-        catch { /* localStorage blocked (Safari ITP / SSR) — render visible */ }
-    }, [persistDismissal]);
-    if (dismissed)
-        return null;
-    const styles = alertStyles[alertType] ?? alertStyles['info'];
-    const Icon = ALERT_TYPE_ICONS[alertType] ?? InfoIcon;
-    const iconColorKey = iconColor ?? ALERT_TYPE_DEFAULT_ICON_COLOR[alertType] ?? 'info';
-    const iconColorCls = TEXT_COLOR_CLASSES[iconColorKey] ?? '';
-    const alignCls = ALERT_ACTIONS_ALIGNMENT[actionsAlignment ?? 'start'] ?? 'justify-start';
-    const handleDismiss = () => {
-        setDismissed(true);
-        if (persistDismissal && typeof window !== 'undefined') {
-            try {
-                window.localStorage.setItem(alertPersistKey(persistDismissal), '1');
-            }
-            catch { /* localStorage blocked — dismiss is per-mount only */ }
-        }
-    };
-    return (_jsxs("div", { className: `relative rounded-lg border p-4 ${styles} ${dismissible ? 'pr-9' : ''}`, children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Icon, { className: `size-5 shrink-0 mt-0.5 ${iconColorCls}`, "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [title !== undefined && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: content }), footer.length > 0 && (_jsx("div", { className: `flex items-center gap-2 mt-3 ${alignCls}`, children: footer }))] })] }), dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, "aria-label": "Dismiss", title: "Dismiss", className: "absolute top-3 right-3 inline-flex h-6 w-6 items-center justify-center rounded opacity-70 hover:opacity-100 transition-opacity", children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) }))] }));
+/** Local wrapper around the table-layer `TableRenderer` that injects the
+ *  three renderer deps. The body lives behind a separate import so the
+ *  module cycle stays clean. */
+function TableRenderer({ el }) {
+    return _jsx(TableRendererImpl, { el: el, deps: tableBodyDeps });
 }
 function renderElement(el, index) {
+    // Stateless leaves + layout primitives — text/image/icon/markdown/html/
+    // heading/emptyState/divider/unorderedList/card/grid/group/split/fieldset.
+    // Returns undefined for unhandled types so the switch below picks them up.
+    const simple = renderSimpleElement(el, index, { renderElement, renderActionLike });
+    if (simple !== undefined)
+        return simple;
     switch (el.type) {
-        case 'text':
-            return renderText(el, index);
-        case 'image': {
-            const url = String(el['url'] ?? '');
-            const alt = String(el['alt'] ?? '');
-            const width = el['width'];
-            const height = el['height'];
-            const shape = String(el['shape'] ?? 'square');
-            const shapeCls = shape === 'circle' ? 'rounded-full' : shape === 'rounded' ? 'rounded-md' : '';
-            return (_jsx("img", { src: url, alt: alt, ...(width !== undefined ? { width } : {}), ...(height !== undefined ? { height } : {}), className: `inline-block object-cover ${shapeCls}` }, index));
-        }
-        case 'icon': {
-            const name = el['name'] ? String(el['name']) : undefined;
-            const size = el['size'] ?? 16;
-            const color = String(el['color'] ?? 'default');
-            const label = el['label'] ? String(el['label']) : undefined;
-            const Cmp = resolveIcon(name);
-            if (!Cmp)
-                return null;
-            const colorClass = COLUMN_COLOR_CLASSES[color] ?? '';
-            return (_jsx(Cmp, { className: `inline ${colorClass}`, ...(label ? { 'aria-label': label } : { 'aria-hidden': true }), style: { width: size, height: size } }, index));
-        }
-        case 'markdown':
-        case 'html': {
-            const html = String(el['html'] ?? '');
-            const prose = el['prose'] !== false;
-            const size = el['size'] ? String(el['size']) : undefined;
-            const proseCls = prose
-                ? `prose max-w-none ${size === 'sm' ? 'prose-sm' : size === 'lg' ? 'prose-lg' : ''}`.trim()
-                : '';
-            return (_jsx("div", { className: proseCls || undefined, dangerouslySetInnerHTML: { __html: html } }, index));
-        }
-        case 'heading': {
-            const level = el['level'] ?? 1;
-            const content = String(el['content'] ?? '');
-            const description = el['description'] ? String(el['description']) : undefined;
-            const headerActions = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent');
-            const Tag = level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3';
-            const sizes = { 1: 'text-2xl', 2: 'text-xl', 3: 'text-lg' };
-            const titleBlock = (_jsxs("div", { children: [_jsx(Tag, { className: `${sizes[level]} font-bold tracking-tight`, children: content }), description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description }))] }));
-            if (headerActions.length === 0) {
-                return _jsx("div", { children: titleBlock }, index);
-            }
-            return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [titleBlock, _jsx("div", { className: "flex items-center gap-2 shrink-0", children: headerActions.map((a, i) => renderActionLike(a, i)) })] }, index));
-        }
         case 'alert': {
             const footer = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent');
             return (_jsx(AlertRenderer, { alertType: String(el['alertType'] ?? 'info'), content: String(el['content'] ?? ''), ...(el['title'] !== undefined ? { title: String(el['title']) } : {}), ...(el['dismissible'] ? { dismissible: Boolean(el['dismissible']) } : {}), ...(el['persistDismissal'] !== undefined ? { persistDismissal: String(el['persistDismissal']) } : {}), ...(el['iconColor'] !== undefined ? { iconColor: String(el['iconColor']) } : {}), ...(el['actionsAlignment'] !== undefined ? { actionsAlignment: String(el['actionsAlignment']) } : {}), footer: footer.map((a, i) => renderActionLike(a, i)) }, index));
         }
-        case 'emptyState': {
-            const heading = String(el['heading'] ?? '');
-            const description = el['description'] ? String(el['description']) : undefined;
-            const iconName = el['icon'] ? String(el['icon']) : undefined;
-            const contained = el['contained'] !== false;
-            const Icon = iconName ? resolveIcon(iconName) : undefined;
-            const footer = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent');
-            const wrapper = contained
-                ? 'rounded-lg border border-border bg-card text-card-foreground py-12 px-6'
-                : 'py-8';
-            return (_jsxs("div", { className: `${wrapper} flex flex-col items-center text-center gap-3`, children: [Icon && _jsx(Icon, { className: "size-10 text-muted-foreground", "aria-hidden": "true" }), _jsx("h3", { className: "text-lg font-semibold", children: heading }), description && _jsx("p", { className: "text-sm text-muted-foreground max-w-md", children: description }), footer.length > 0 && (_jsx("div", { className: "flex items-center gap-2 mt-2", children: footer.map((a, i) => renderActionLike(a, i)) }))] }, index));
-        }
-        case 'divider': {
-            const label = el['label'] ? String(el['label']) : undefined;
-            return label
-                ? _jsxs("div", { className: "relative py-2", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("span", { className: "w-full border-t border-border" }) }), _jsx("div", { className: "relative flex justify-center", children: _jsx("span", { className: "bg-background px-2 text-xs text-muted-foreground", children: label }) })] }, index)
-                : _jsx("hr", { className: "border-border" }, index);
-        }
-        case 'unorderedList': {
-            const items = el['items'] ?? [];
-            const color = el['color'] ? String(el['color']) : undefined;
-            const size = el['size'] ? String(el['size']) : undefined;
-            const weight = el['weight'] ? String(el['weight']) : undefined;
-            const sizeCls = size ? (TEXT_SIZE_CLASSES[size] ?? '') : 'text-sm';
-            const colorCls = color ? (TEXT_COLOR_CLASSES[color] ?? '') : '';
-            const weightCls = weight ? (TEXT_WEIGHT_CLASSES[weight] ?? '') : '';
-            return (_jsx("ul", { className: `list-disc list-inside space-y-1 ${sizeCls} ${colorCls} ${weightCls}`.trim(), children: items.map((item, i) => (_jsx("li", { children: String(item) }, i))) }, index));
-        }
-        case 'card': {
-            const title = el['title'] ? String(el['title']) : undefined;
-            const description = el['description'] ? String(el['description']) : undefined;
-            return (_jsxs("div", { className: "rounded-xl border bg-card p-6 shadow-sm", children: [title && _jsx("h3", { className: "font-semibold mb-1", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: description }), renderChildren(el.children)] }, index));
-        }
         case 'section':
-            return _jsx(SectionRenderer, { el: el, index: index }, index);
+            return _jsx(SectionRenderer, { el: el, index: index, renderElement: renderElement }, index);
         case 'tabs':
-            return _jsx(TabsRenderer, { el: el, index: index }, index);
+            return _jsx(TabsRenderer, { el: el, index: index, renderElement: renderElement }, index);
         case 'tab':
             // Tabs are rendered by their parent `tabs` element; standalone Tab is a no-op.
             return null;
@@ -1770,55 +110,19 @@ function renderElement(el, index) {
         case 'listTab':
             // List tabs are rendered by their parent `listTabs` strip; standalone is a no-op.
             return null;
-        case 'grid': {
-            const columns = Math.max(1, Math.min(12, Number(el['columns'] ?? 2)));
-            const gapPx = el['gap'] !== undefined ? `${Number(el['gap'])}px` : undefined;
-            return (_jsx("div", { className: `grid gap-4 ${layoutClasses(el)}`.trim(), style: {
-                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-                    ...(gapPx ? { gap: gapPx } : {}),
-                }, children: (el.children ?? []).map((c, i) => renderElement(c, i)) }, index));
-        }
-        case 'group': {
-            const layout = layoutClasses(el);
-            return (_jsx("div", { className: layout || undefined, children: renderChildren(el.children) }, index));
-        }
-        case 'split': {
-            const from = el['from'] === 'left' ? 'left' : 'right';
-            const gap = Math.max(0, Math.min(12, Number(el['gap'] ?? 6)));
-            const children = el.children ?? [];
-            // Find the explicit aside child first; fall back to "second child is
-            // aside" so terse Split.make().schema([main, aside]) still works.
-            let asideIdx = children.findIndex(c => c['aside'] === true);
-            if (asideIdx === -1 && children.length >= 2)
-                asideIdx = 1;
-            const mainChildren = children.filter((_, i) => i !== asideIdx);
-            const asideChild = asideIdx >= 0 ? children[asideIdx] : undefined;
-            const orderClasses = from === 'left'
-                ? { aside: '@md:order-first', main: '@md:order-last' }
-                : { aside: '@md:order-last', main: '@md:order-first' };
-            return (_jsxs("div", { className: `@container flex flex-col @md:flex-row gap-${gap} ${layoutClasses(el)}`.trim(), children: [_jsx("div", { className: `flex flex-col gap-4 flex-1 min-w-0 ${orderClasses.main}`, children: mainChildren.map((c, i) => renderElement(c, i)) }), asideChild && (_jsx("aside", { className: `flex flex-col gap-4 @md:w-80 @md:shrink-0 ${orderClasses.aside}`, children: renderElement(asideChild, asideIdx) }))] }, index));
-        }
-        case 'fieldset': {
-            const label = String(el['label'] ?? '');
-            const columns = Math.max(1, Math.min(3, Number(el['columns'] ?? 1)));
-            const gridStyle = columns > 1
-                ? { display: 'grid', gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap: '1rem' }
-                : undefined;
-            return (_jsxs("fieldset", { className: `rounded-md border border-border px-4 pt-3 pb-4 ${layoutClasses(el)}`.trim(), children: [label && _jsx("legend", { className: "px-1 text-xs font-medium text-muted-foreground", children: label }), _jsx("div", { className: columns === 1 ? 'flex flex-col gap-3' : undefined, style: gridStyle, children: (el.children ?? []).map((c, i) => renderElement(c, i)) })] }, index));
-        }
         case 'wizard':
-            return _jsx(WizardRenderer, { el: el, index: index }, index);
+            return (_jsx(WizardRenderer, { el: el, index: index, deps: { renderElement } }, index));
         case 'step':
             // Steps are rendered by their parent Wizard; standalone Step is a no-op.
             return null;
         case 'field':
             return renderField(el, index);
         case 'entry':
-            return renderEntry(el, index);
+            return renderEntry(el, index, renderElement);
         case 'action':
-            return renderAction(el, index);
+            return renderAction(el, index, {}, { renderElement, renderFormChild });
         case 'actionGroup':
-            return _jsx(ActionGroupTrigger, { el: el }, index);
+            return (_jsx(ActionGroupTrigger, { el: el, renderFormChild: renderFormChild, renderElement: renderElement }, index));
         case 'form': {
             // Key on formId so SPA navigation between pages with different
             // forms (list → edit, edit → edit-of-different-record, etc.)
@@ -1870,954 +174,6 @@ function renderElement(el, index) {
         }
     }
 }
-// ─── Form ───────────────────────────────────────────────────
-function FormRenderer({ el }) {
-    const formId = String(el['formId'] ?? '');
-    const method = String(el['method'] ?? 'post').toLowerCase();
-    const action = el['action'] ? String(el['action']) : undefined;
-    const stateUrl = el['stateUrl'] ? String(el['stateUrl']) : undefined;
-    const serverValues = el['values'] ?? {};
-    const serverErrors = el['errors'] ?? {};
-    // Methods other than GET/POST are spoofed via _method, mirroring Laravel.
-    const httpMethod = method === 'get' ? 'get' : 'post';
-    const spoofedMethod = method !== 'get' && method !== 'post' ? method : undefined;
-    const navigate = useNavigate();
-    const { notify } = useToast();
-    // Client-side errors override server-rendered ones after a fetch-mode
-    // 422 response. Field values stay uncontrolled — the inputs in the DOM
-    // still hold whatever the user typed, so we don't need to mirror them.
-    const [clientErrors, setClientErrors] = useState(null);
-    const [submitting, setSubmitting] = useState(false);
-    const errors = clientErrors ?? serverErrors;
-    // Plan #14 — formRef is threaded into FormStateProvider so live triggers
-    // can snapshot the form's full DOM state via FormData (captures
-    // uncontrolled inner-Repeater inputs that don't participate in the
-    // controlled values map).
-    const formRef = useRef(null);
-    const formErrors = errors['_form'] ?? [];
-    const hasFieldErrors = Object.keys(errors).some(k => k !== '_form');
-    const onSubmit = async (e) => {
-        if (!action)
-            return; // no action URL → fall through to native submit
-        e.preventDefault();
-        if (submitting)
-            return;
-        setSubmitting(true);
-        setClientErrors(null);
-        try {
-            // Thread `event.submitter` so the clicked submit button's
-            // name/value pair lands in the FormData. Without this, secondary
-            // submits like "Create & create another" can't signal which
-            // button fired through the body. Supported in all evergreen
-            // browsers since 2022; cast through `as any` because TS lib.dom
-            // hasn't picked up the optional submitter argument on every
-            // version.
-            const submitter = e.nativeEvent.submitter;
-            const fd = new FormData(e.currentTarget, submitter ?? undefined);
-            const res = await fetch(action, {
-                method: 'POST',
-                headers: { 'Accept': 'application/json' },
-                body: fd,
-            });
-            const data = await res.json().catch(() => ({}));
-            if (res.status === 422) {
-                const next = data.errors ?? {};
-                setClientErrors(next);
-                // Surface a banner-level message if no field errors were returned
-                // — the form-level _form key lights up the existing banner.
-                setSubmitting(false);
-                return;
-            }
-            if (!res.ok) {
-                const message = String(data.error ?? `Request failed (${res.status})`);
-                notify({ type: 'error', title: 'Save failed', body: message });
-                setSubmitting(false);
-                return;
-            }
-            // Success — drain notifications and SPA-navigate to the redirect.
-            const notifs = data.notifications;
-            if (notifs && notifs.length > 0)
-                for (const n of notifs)
-                    notify(n);
-            const redirect = String(data.redirect ?? '');
-            // The server may force a navigate even when the redirect equals
-            // the current URL — used by "Create & create another" so the
-            // form remounts with empty defaults instead of preserving the
-            // just-submitted values. Otherwise: skip navigate when the
-            // redirect matches the current URL, since re-fetching the same
-            // page would force a form remount and reset scroll.
-            const force = Boolean(data.force);
-            const currentUrl = typeof window !== 'undefined'
-                ? window.location.pathname + window.location.search
-                : '';
-            if (redirect && (force || redirect !== currentUrl)) {
-                navigate(redirect);
-                // Don't reset submitting on success — the navigation will unmount us.
-            }
-            else {
-                setSubmitting(false);
-            }
-        }
-        catch (err) {
-            notify({ type: 'error', title: 'Save failed', body: err instanceof Error ? err.message : String(err) });
-            setSubmitting(false);
-        }
-    };
-    return (_jsxs("form", { ref: formRef, id: formId || undefined, "data-form-id": formId || undefined, method: httpMethod, action: action, onSubmit: onSubmit, className: "flex flex-col gap-6", children: [formId && _jsx("input", { type: "hidden", name: "_formId", value: formId }), spoofedMethod && _jsx("input", { type: "hidden", name: "_method", value: spoofedMethod }), (formErrors.length > 0 || hasFieldErrors) && (_jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/5 text-destructive p-3 text-sm", children: formErrors.length > 0 ? (_jsx("ul", { className: "list-disc pl-4", children: formErrors.map((msg, i) => _jsx("li", { children: msg }, i)) })) : ('Please correct the errors below.') })), _jsx(FormIdContext.Provider, { value: formId, children: stateUrl ? (_jsx(FormStateProvider, { initialMeta: el, initialErrors: errors, formRef: formRef, children: _jsx(FormBody, { fallbackChildren: el.children ?? [], fallbackValues: serverValues, fallbackErrors: errors }) })) : ((el.children ?? []).map((child, i) => renderFormChild(child, i, serverValues, errors))) })] }));
-}
-/**
- * Renders the controlled-form's children, sourcing them from the
- * `FormStateProvider`'s current `formMeta` (which gets replaced after
- * each live POST). Falls back to the props if (somehow) used outside a
- * provider — the shell only mounts this when `stateUrl` is set so the
- * fallback path is dead code in practice, but keeping it defensive.
- */
-function FormBody({ fallbackChildren, fallbackValues, fallbackErrors, }) {
-    const ctx = useFormState();
-    if (!ctx) {
-        return _jsx(_Fragment, { children: fallbackChildren.map((child, i) => renderFormChild(child, i, fallbackValues, fallbackErrors)) });
-    }
-    const children = (ctx.formMeta.children ?? []);
-    return _jsx(_Fragment, { children: children.map((child, i) => renderFormChild(child, i, ctx.values, ctx.errors)) });
-}
-/**
- * Render one child of a form's resolved schema with per-field values + errors.
- *
- * Exported so sibling renderers (e.g. `SelectFieldInput`'s inline-create
- * modal) can render a sub-schema with the same FieldShell + error-stamping
- * conventions as the parent form. Public surface beyond the file boundary
- * stays narrow — callers should pass `child.type === 'field'` elements;
- * non-field elements fall through to `renderElement`.
- */
-export function renderFormChild(child, index, values, errors) {
-    if (child.type === 'field') {
-        const name = String(child['name'] ?? '');
-        const fieldErrors = errors[name] ?? [];
-        const value = values[name];
-        return (_jsxs("div", { className: "flex flex-col gap-1", children: [renderFieldWithValue(child, index, value), fieldErrors.map((msg, i) => (_jsx("p", { className: "text-xs text-destructive", children: msg }, i)))] }, index));
-    }
-    return renderElement(child, index);
-}
-function renderFieldWithValue(el, index, value) {
-    // The form-state value (from `withValues` / record-fill) wins when present;
-    // otherwise the meta's own `defaultValue` (Plan #6 `Field.default()`) survives.
-    const enriched = value !== undefined
-        ? { ...el, defaultValue: value }
-        : el;
-    return renderField(enriched, index);
-}
-// Mirror of `prefixedKey` in `elements/dispatchTable.ts`. Kept inline so
-// SchemaRenderer doesn't drag the server-side dispatcher into the client
-// bundle.
-function prefixK(prefix, key) {
-    return prefix === undefined || prefix === '' ? key : `${prefix}_${key}`;
-}
-let cachedSearchString = null;
-let cachedSearchParams = null;
-function getCurrentSearchParams() {
-    if (typeof window === 'undefined')
-        return null;
-    const s = window.location.search;
-    if (s === cachedSearchString && cachedSearchParams)
-        return cachedSearchParams;
-    cachedSearchString = s;
-    cachedSearchParams = new URLSearchParams(s);
-    return cachedSearchParams;
-}
-function SearchFormHiddenInputs({ prefix }) {
-    const sp = getCurrentSearchParams();
-    if (!sp)
-        return _jsx(_Fragment, {});
-    const searchKey = prefixK(prefix, 'search');
-    const pageKey = prefixK(prefix, 'page');
-    const inputs = [];
-    let i = 0;
-    for (const [k, v] of sp) {
-        if (k === searchKey || k === pageKey)
-            continue;
-        inputs.push(_jsx("input", { type: "hidden", name: k, value: v }, i++));
-    }
-    return _jsx(_Fragment, { children: inputs });
-}
-function buildTableQuery(state, override, pathname, filterValues = {}, prefix) {
-    const merged = { ...state, ...override };
-    const params = new URLSearchParams();
-    // Foreign URL params (other tables' state, app-level params) round-trip
-    // verbatim so this builder only ever rewrites its own slice.
-    const currentParams = getCurrentSearchParams();
-    if (currentParams) {
-        const ours = new Set([
-            prefixK(prefix, 'search'),
-            prefixK(prefix, 'sort'),
-            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) {
-            if (ours.has(k))
-                continue;
-            params.set(k, v);
-        }
-    }
-    // Carry forward active filter values so sort/pagination links don't
-    // accidentally clear them. Filter names can't collide with reserved
-    // keys (search/sort/page/perPage/group) — that's enforced upstream.
-    for (const [name, val] of Object.entries(filterValues)) {
-        if (val)
-            params.set(prefixK(prefix, name), val);
-    }
-    if (merged.search)
-        params.set(prefixK(prefix, 'search'), merged.search);
-    if (merged.sort)
-        params.set(prefixK(prefix, 'sort'), `${merged.sort.column}:${merged.sort.direction}`);
-    if (merged.page && merged.page > 1)
-        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
-    // to the dashboard and blanks the page during SPA navigation.
-    const base = pathname || (typeof window !== 'undefined' ? window.location.pathname : '');
-    return qs ? `${base}?${qs}` : (base || '#');
-}
-function nextSortDir(current, column) {
-    if (current?.column === column) {
-        return { column, direction: current.direction === 'asc' ? 'desc' : 'asc' };
-    }
-    return { column, direction: 'asc' };
-}
-/** Map ColumnColor → tailwind text-color class. Used by TextColumn and
- * IconColumn alike. */
-const COLUMN_COLOR_CLASSES = {
-    default: '',
-    muted: 'text-muted-foreground',
-    primary: 'text-primary',
-    destructive: 'text-destructive',
-    success: 'text-emerald-600 dark:text-emerald-400',
-    warning: 'text-amber-600 dark:text-amber-400',
-    info: 'text-blue-600 dark:text-blue-400',
-};
-const COLUMN_WEIGHT_CLASSES = {
-    normal: 'font-normal',
-    medium: 'font-medium',
-    semibold: 'font-semibold',
-    bold: 'font-bold',
-};
-const BADGE_COLOR_CLASSES = {
-    gray: 'bg-muted text-muted-foreground',
-    primary: 'bg-primary/10 text-primary',
-    success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
-    warning: 'bg-amber-100  text-amber-800  dark:bg-amber-900/40  dark:text-amber-200',
-    destructive: 'bg-destructive/10 text-destructive',
-    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
-};
-/** Apply a built-in `ColumnFormat` to a raw value; returns a string. */
-function applyColumnFormat(value, format) {
-    if (value === null || value === undefined || value === '')
-        return '';
-    switch (format['kind']) {
-        case 'dateTime': {
-            const d = value instanceof Date ? value : new Date(String(value));
-            if (isNaN(d.getTime()))
-                return String(value);
-            // Default — locale-aware short date+time. Custom patterns aren't
-            // supported (no date-fns dep); pattern is kept on meta for future use.
-            return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
-        }
-        case 'since': {
-            const d = value instanceof Date ? value : new Date(String(value));
-            if (isNaN(d.getTime()))
-                return String(value);
-            const seconds = Math.round((Date.now() - d.getTime()) / 1000);
-            const abs = Math.abs(seconds);
-            const past = seconds >= 0;
-            const fmt = (n, unit) => past ? `${n} ${unit}${n === 1 ? '' : 's'} ago` : `in ${n} ${unit}${n === 1 ? '' : 's'}`;
-            if (abs < 60)
-                return past ? 'just now' : 'in a moment';
-            if (abs < 3600)
-                return fmt(Math.floor(abs / 60), 'minute');
-            if (abs < 86400)
-                return fmt(Math.floor(abs / 3600), 'hour');
-            if (abs < 2592000)
-                return fmt(Math.floor(abs / 86400), 'day');
-            if (abs < 31536000)
-                return fmt(Math.floor(abs / 2592000), 'month');
-            return fmt(Math.floor(abs / 31536000), 'year');
-        }
-        case 'money': {
-            const n = typeof value === 'number' ? value : Number(value);
-            if (isNaN(n))
-                return String(value);
-            const currency = String(format['currency'] ?? 'USD');
-            const locale = format['locale'];
-            return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(n);
-        }
-        case 'numeric': {
-            const n = typeof value === 'number' ? value : Number(value);
-            if (isNaN(n))
-                return String(value);
-            const decimals = format['decimals'];
-            const locale = format['locale'];
-            const opts = {};
-            if (decimals !== undefined) {
-                opts.minimumFractionDigits = decimals;
-                opts.maximumFractionDigits = decimals;
-            }
-            return new Intl.NumberFormat(locale, opts).format(n);
-        }
-        case 'limit': {
-            const s = String(value);
-            const n = format['chars'];
-            return s.length > n ? s.slice(0, n) + '…' : s;
-        }
-        case 'words': {
-            const s = String(value).trim();
-            if (s.length === 0)
-                return s;
-            const tokens = s.split(/\s+/);
-            const n = format['words'];
-            return tokens.length > n ? tokens.slice(0, n).join(' ') + '…' : s;
-        }
-        default:
-            return String(value);
-    }
-}
-/** Render a cell. Honors the column's `columnType` (badge/icon/boolean/
- * image), built-in `format` spec, and per-row `_formatted[name]`
- * overrides from server-side `formatStateUsing` callbacks. */
-function formatCell(value, col, row) {
-    if (col === undefined) {
-        // Legacy raw-value fallback for non-column callsites.
-        if (value === null || value === undefined)
-            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
-        if (value instanceof Date)
-            return value.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
-        if (typeof value === 'boolean')
-            return value ? 'Yes' : 'No';
-        if (typeof value === 'object')
-            return JSON.stringify(value);
-        return String(value);
-    }
-    const columnType = String(col['columnType'] ?? 'text');
-    const fallback = col['default'];
-    // Per-row server-eval result wins over everything.
-    const colName = String(col['name'] ?? '');
-    const formatted = row?.['_formatted']?.[colName];
-    const richtext = row?.['_richtextCells']?.[colName] === true;
-    const isBlank = value === null || value === undefined || value === '';
-    if (formatted !== undefined && formatted !== '') {
-        return wrapCell(formatted, col, richtext);
-    }
-    if (isBlank) {
-        return _jsx("span", { className: "text-muted-foreground", children: fallback ?? '—' });
-    }
-    switch (columnType) {
-        case 'badge': {
-            const map = col['badgeColors'] ?? {};
-            const color = map[String(value)] ?? 'gray';
-            const cls = BADGE_COLOR_CLASSES[color] ?? BADGE_COLOR_CLASSES['gray'];
-            return (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`, children: String(value) }));
-        }
-        case 'icon':
-        case 'boolean': {
-            const map = col['iconOptions'] ?? {};
-            const opt = map[String(value)];
-            if (!opt)
-                return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
-            const Icon = resolveIcon(opt.icon) ?? CircleIcon;
-            const colorClass = opt.color ? (COLUMN_COLOR_CLASSES[opt.color] ?? '') : '';
-            return _jsx(Icon, { className: `size-4 inline ${colorClass}`, "aria-label": String(value) });
-        }
-        case 'image': {
-            const url = String(value);
-            const size = col['imageSize'] ?? 32;
-            const shape = col['imageShape'] === 'circle' ? 'rounded-full' : 'rounded-md';
-            return (_jsx("img", { src: url, alt: "", width: size, height: size, className: `${shape} object-cover` }));
-        }
-        case 'color': {
-            const css = String(value);
-            const shape = col['colorShape'];
-            const shapeClass = shape === 'circle' ? 'rounded-full' :
-                shape === 'square' ? 'rounded-none' : 'rounded';
-            const hideValue = col['colorHideValue'] === true;
-            return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: `size-4 border border-border ${shapeClass}`, style: { backgroundColor: css }, "aria-hidden": "true" }), !hideValue && _jsx("span", { className: "text-sm", children: css })] }));
-        }
-        default: {
-            // Array-valued cells — `bulleted()` wins over `listWithLineBreaks()`
-            // when both are set. Falls through to the standard string path for
-            // non-array values so the per-cell formatters keep working.
-            if (Array.isArray(value)) {
-                const items = value.map(v => String(v));
-                if (col['bulleted'] === true) {
-                    return wrapCellList(items, col, 'bulleted');
-                }
-                if (col['listWithLineBreaks'] === true) {
-                    return wrapCellList(items, col, 'lines');
-                }
-                // Bare array — comma-join (matches the existing legacy fallback).
-                return wrapCell(items.join(', '), col);
-            }
-            // Text column — apply built-in format, then wrapper.
-            const fmt = col['format'];
-            const display = fmt ? applyColumnFormat(value, fmt) : String(value);
-            return wrapCell(display, col);
-        }
-    }
-}
-/** Apply text-rendering chrome (color, weight, line-clamp, wrap, tooltip)
- * to a stringified cell value. Used by the text and per-row formatter
- * paths so styling stays consistent. When `asHtml` is true the content
- * is server-rendered HTML (e.g. from the registered richtext renderer)
- * and gets injected via `dangerouslySetInnerHTML`. */
-function wrapCell(content, col, asHtml = false) {
-    const color = col['color'];
-    const weight = col['weight'];
-    const tooltip = col['tooltip'];
-    const wrapping = Boolean(col['wrap']);
-    const clamp = col['lineClamp'];
-    const copyMsg = col['copyMessage'];
-    const colorCls = color ? (COLUMN_COLOR_CLASSES[color] ?? '') : '';
-    const weightCls = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : '';
-    const wrapCls = wrapping ? 'whitespace-normal' : '';
-    const clampStyle = clamp !== undefined
-        ? { display: '-webkit-box', WebkitLineClamp: String(clamp), WebkitBoxOrient: 'vertical', overflow: 'hidden' }
-        : undefined;
-    const valueNode = asHtml
-        ? (_jsx("span", { className: `prose prose-sm max-w-none dark:prose-invert ${colorCls} ${weightCls} ${wrapCls}`.trim(), title: tooltip, style: clampStyle, dangerouslySetInnerHTML: { __html: content } }))
-        : (_jsx("span", { className: `${colorCls} ${weightCls} ${wrapCls}`.trim(), title: tooltip, style: clampStyle, children: content }));
-    if (copyMsg === undefined)
-        return valueNode;
-    // Copy-to-clipboard trigger — copies the rendered text. For richtext
-    // cells the underlying source isn't separately stamped on the wire
-    // (would double the row payload), so the rendered HTML is what gets
-    // copied; admins comfortable with HTML still get something usable.
-    return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [valueNode, _jsx(CellCopyButton, { text: content, label: copyMsg })] }));
-}
-/** Tabular-list rendering used by `Column.bulleted()` /
- * `Column.listWithLineBreaks()`. `mode='bulleted'` mounts a `<ul>` with
- * bullet markers; `mode='lines'` separates entries with `<br>`. Both
- * inherit the same color / weight / wrap / tooltip / clamp chrome as
- * the text path. Empty arrays fall through to the muted dash. */
-function wrapCellList(items, col, mode) {
-    if (items.length === 0) {
-        const fallback = col['default'] ?? '—';
-        return _jsx("span", { className: "text-muted-foreground", children: fallback });
-    }
-    const color = col['color'];
-    const weight = col['weight'];
-    const tooltip = col['tooltip'];
-    const colorCls = color ? (COLUMN_COLOR_CLASSES[color] ?? '') : '';
-    const weightCls = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : '';
-    if (mode === 'bulleted') {
-        return (_jsx("ul", { className: `list-disc pl-4 space-y-0.5 ${colorCls} ${weightCls}`.trim(), title: tooltip, children: items.map((s, i) => _jsx("li", { children: s }, i)) }));
-    }
-    return (_jsx("span", { className: `${colorCls} ${weightCls}`.trim(), title: tooltip, children: items.map((s, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("br", {}), s] }, i))) }));
-}
-/** Slim copy-to-clipboard button used by `Column.copyMessage()`. The
- * label doubles as the toast text. Mirrors `EntryCopyButton`'s shape
- * but compact enough to live inline next to a cell value. */
-function CellCopyButton({ text, label }) {
-    const [copied, setCopied] = useState(false);
-    const handleClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-            navigator.clipboard.writeText(text).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 1500);
-            }).catch(() => { });
-        }
-    };
-    return (_jsx("button", { type: "button", onClick: handleClick, "aria-label": copied ? label : 'Copy', title: copied ? label : 'Copy', "data-no-row-nav": true, className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted", children: copied ? _jsx(CheckIcon, { className: "size-3" }) : _jsx(CopyIcon, { className: "size-3" }) }));
-}
-function rowId(row, index) {
-    if (row && typeof row === 'object' && 'id' in row) {
-        const id = row.id;
-        if (id !== undefined && id !== null)
-            return String(id);
-    }
-    return String(index);
-}
-/**
- * Filter dropdown that updates the URL directly on change. We don't rely
- * on a wrapping `<form>` because filters now live inside a portaled
- * Popover (the search input keeps its own form for Enter-to-submit).
- *
- * Empty value (`''`) is the "All" sentinel — the param is removed from
- * the URL rather than serialized as `&name=`.
- */
-function FilterSelect({ name, label, defaultValue, placeholder, options, prefix, }) {
-    const [value, setValue] = useState(defaultValue);
-    const navigate = useNavigate();
-    const onChange = (next) => {
-        const v = typeof next === 'string' ? next : '';
-        setValue(v);
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        const k = prefixK(prefix, name);
-        if (v === '')
-            url.searchParams.delete(k);
-        else
-            url.searchParams.set(k, v);
-        // Filter changes reset pagination — first page of the new result set.
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        // SPA navigate via context (vike's navigate when mounted under the
-        // Vike-generated +Layout). Fallback is full reload — see useNavigate.
-        void navigate(url.pathname + url.search);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { size: "sm", className: "w-full", children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "", children: placeholder }), options.map(o => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value)))] })] })] }));
-}
-/**
- * Heading-row text for a group band. Shows `<label>: <value-or-title>`
- * with an optional description below. Reused for both collapsible and
- * static heading rows.
- */
-function GroupHeaderText({ label, value, title, description, }) {
-    const display = title ?? value ?? '';
-    return (_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsxs("span", { children: [label && _jsxs("span", { className: "text-muted-foreground/70", children: [label, ": "] }), _jsx("span", { className: "text-foreground", children: display || 'Ungrouped' })] }), description && (_jsx("span", { className: "text-[10px] font-normal normal-case text-muted-foreground/80", children: description }))] }));
-}
-/**
- * "Group by" dropdown rendered above the table when 2+ TableGroups
- * are registered (or 1 group with rich metadata). Selecting "None"
- * sets `?group=` (empty) which explicitly overrides `defaultGroup`.
- *
- * URL-driven — `onChange` builds the next href via `buildTableQuery`
- * and SPA-navigates; the page re-renders with the new active group.
- */
-function TableGroupPicker({ options, active, onChange, }) {
-    const value = active ?? '';
-    return (_jsxs(Select, { value: value, onValueChange: (v) => onChange(typeof v === 'string' ? v : ''), children: [_jsx(SelectTrigger, { size: "sm", className: "h-9 w-44", children: _jsx(SelectValue, { placeholder: "Group by\u2026" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "", children: "No grouping" }), options.map(o => (_jsx(SelectItem, { value: o.column, children: o.label }, o.column)))] })] }));
-}
-/**
- * Pair-of-date-inputs filter for `kind === 'dateRange'`. Each side
- * navigates the URL on change, encoding the pair as `from..to` keyed
- * off the filter name. Empty pair drops the URL key.
- */
-function FilterDateRange({ name, label, defaultValue, placeholder, includesTime, minDate, maxDate, prefix, }) {
-    const initial = parseDateRangeValue(defaultValue);
-    const [from, setFrom] = useState(initial.from ?? '');
-    const [to, setTo] = useState(initial.to ?? '');
-    const navigate = useNavigate();
-    const inputType = includesTime ? 'datetime-local' : 'date';
-    const navigateTo = (nextFrom, nextTo) => {
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        const encoded = encodeDateRangeValue({ from: nextFrom, to: nextTo });
-        const k = prefixK(prefix, name);
-        if (encoded === '')
-            url.searchParams.delete(k);
-        else
-            url.searchParams.set(k, encoded);
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    const onFromChange = (e) => {
-        const v = e.target.value;
-        setFrom(v);
-        navigateTo(v, to);
-    };
-    const onToChange = (e) => {
-        const v = e.target.value;
-        setTo(v);
-        navigateTo(from, v);
-    };
-    const onClear = () => {
-        setFrom('');
-        setTo('');
-        navigateTo('', '');
-    };
-    const hasValue = from !== '' || to !== '';
-    return (_jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: inputType, value: from, onChange: onFromChange, placeholder: placeholder, "aria-label": `${label} from`, ...(minDate !== undefined ? { min: minDate } : {}), ...(maxDate !== undefined ? { max: maxDate } : {}), className: "h-8 text-xs" }), _jsx("span", { className: "text-muted-foreground", children: "\u2192" }), _jsx(Input, { type: inputType, value: to, onChange: onToChange, placeholder: placeholder, "aria-label": `${label} to`, ...(minDate !== undefined ? { min: minDate } : {}), ...(maxDate !== undefined ? { max: maxDate } : {}), className: "h-8 text-xs" }), hasValue && (_jsx("button", { type: "button", onClick: onClear, "aria-label": `Clear ${label}`, className: "text-muted-foreground hover:text-foreground px-1", children: "\u00D7" }))] })] }));
-}
-/**
- * Multi-value filter for `kind === 'multiSelect'`. Renders a checkbox
- * stack inside the popover; toggling a box patches the comma-separated
- * URL value for the filter's name. Empty selection drops the URL key.
- */
-function FilterMultiSelect({ name, label, defaultValue, options, prefix, }) {
-    const [selected, setSelected] = useState(() => parseMultiSelectValue(defaultValue));
-    const navigate = useNavigate();
-    const apply = (next) => {
-        setSelected(next);
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        const encoded = encodeMultiSelectValue(next);
-        const k = prefixK(prefix, name);
-        if (encoded === '')
-            url.searchParams.delete(k);
-        else
-            url.searchParams.set(k, encoded);
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    const toggle = (value, checked) => {
-        const next = checked
-            ? [...selected.filter(v => v !== value), value]
-            : selected.filter(v => v !== value);
-        apply(next);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("div", { className: "flex flex-col gap-1.5", children: options.map(o => {
-                    const checked = selected.includes(o.value);
-                    return (_jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer", children: [_jsx(Checkbox, { checked: checked, onCheckedChange: (c) => toggle(o.value, c === true) }), _jsx("span", { children: o.label })] }, o.value));
-                }) })] }));
-}
-/**
- * Multi-field filter for `kind === 'form'`. The popover renders an inner
- * sub-form with the user-declared schema; submitting bundles all named
- * inputs into a `Record<string, unknown>`, JSON-encodes the non-empty
- * subset under the filter's URL key, and SPA-navigates. Empty submit
- * drops the URL key entirely.
- *
- * The fields' `defaultValue` were pre-hydrated server-side from the
- * active URL value (see `FormFilter.toMeta`), so an existing filter
- * round-trips into the form on render. Inputs are uncontrolled — we
- * read state via `new FormData(form)` on submit, matching how the
- * outer page-level Form works on full submit.
- */
-function FilterForm({ name, label, defaultValue, formSchema, prefix, }) {
-    const formRef = useRef(null);
-    const navigate = useNavigate();
-    const hasValue = defaultValue !== '' && defaultValue !== '{}';
-    const onApply = (e) => {
-        e?.preventDefault();
-        if (!formRef.current)
-            return;
-        const fd = new FormData(formRef.current);
-        const values = {};
-        for (const [key, val] of fd.entries()) {
-            const existing = values[key];
-            if (existing === undefined) {
-                values[key] = val;
-            }
-            else if (Array.isArray(existing)) {
-                existing.push(val);
-            }
-            else {
-                values[key] = [existing, val];
-            }
-        }
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        const encoded = encodeFormFilterValue(values);
-        const k = prefixK(prefix, name);
-        if (encoded === '')
-            url.searchParams.delete(k);
-        else
-            url.searchParams.set(k, encoded);
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    const onClear = () => {
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        url.searchParams.delete(prefixK(prefix, name));
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), _jsxs("form", { ref: formRef, onSubmit: onApply, className: "flex flex-col gap-2", children: [formSchema.map((child, i) => renderFormChild(child, i, {}, {})), _jsxs("div", { className: "flex gap-2 pt-1", children: [_jsx("button", { type: "submit", className: "inline-flex h-8 items-center justify-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: "Apply" }), hasValue && (_jsx("button", { type: "button", onClick: onClear, className: "inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground", children: "Clear" }))] })] })] }));
-}
-/**
- * Composable advanced filter for `kind === 'queryBuilder'`. v2 emits a
- * full tree — root AND/OR connector + nested groups arbitrarily deep —
- * JSON-encoded into a single URL key on Apply (see
- * `encodeQueryBuilderValue`).
- *
- * State is local — typing into a value input doesn't navigate. Only the
- * Apply button writes the URL. This mirrors `FilterForm`'s behavior and
- * keeps the popover quiet under the cursor.
- */
-function FilterQueryBuilder({ name, label, defaultValue, constraints, prefix, }) {
-    const navigate = useNavigate();
-    const initialTree = parseQueryBuilderValue(defaultValue);
-    const [tree, setTree] = useState(initialTree);
-    const hasValue = defaultValue !== '' && initialTree.rules.length > 0;
-    const onApply = (e) => {
-        e?.preventDefault();
-        if (typeof window === 'undefined')
-            return;
-        const encoded = encodeQueryBuilderValue(tree);
-        const url = new URL(window.location.href);
-        const k = prefixK(prefix, name);
-        if (encoded === '')
-            url.searchParams.delete(k);
-        else
-            url.searchParams.set(k, encoded);
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    const onClear = () => {
-        setTree({ operator: 'and', rules: [] });
-        if (typeof window === 'undefined')
-            return;
-        const url = new URL(window.location.href);
-        url.searchParams.delete(prefixK(prefix, name));
-        url.searchParams.delete(prefixK(prefix, 'page'));
-        void navigate(url.pathname + url.search);
-    };
-    if (constraints.length === 0) {
-        return (_jsxs("div", { className: "text-muted-foreground text-xs", children: [label, ": no constraints declared."] }));
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-2 min-w-[24rem]", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), _jsxs("form", { onSubmit: onApply, className: "flex flex-col gap-2", children: [_jsx(QueryBuilderGroup, { tree: tree, constraints: constraints, isRoot: true, onChange: setTree }), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx("div", { className: "flex-1" }), _jsx("button", { type: "submit", className: "inline-flex h-8 items-center justify-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: "Apply" }), (hasValue || tree.rules.length > 0) && (_jsx("button", { type: "button", onClick: onClear, className: "inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground", children: "Clear" }))] })] })] }));
-}
-/**
- * Recursive group renderer — emits a connector picker (AND / OR) at the
- * top, a vertical stack of children (rules and sub-groups), and footer
- * buttons for "+ Add condition" and "+ Add group". Calls `onChange` with
- * the updated sub-tree so parents can splice it back into their own
- * `rules` array. Root groups skip the outer border so the popover doesn't
- * carry a redundant frame; nested groups draw a faint left rule + soft
- * background so the nesting is visible without blowing up the width.
- */
-function QueryBuilderGroup({ tree, constraints, isRoot, onChange, onRemove, }) {
-    const constraintMap = new Map();
-    for (const c of constraints)
-        constraintMap.set(c.name, c);
-    const setOperator = (op) => {
-        onChange({ ...tree, operator: op });
-    };
-    const updateChildAt = (index, next) => {
-        onChange({ ...tree, rules: tree.rules.map((r, i) => i === index ? next : r) });
-    };
-    const removeChildAt = (index) => {
-        onChange({ ...tree, rules: tree.rules.filter((_, i) => i !== index) });
-    };
-    const addRule = () => {
-        const first = constraints[0];
-        if (!first)
-            return;
-        onChange({
-            ...tree,
-            rules: [...tree.rules, {
-                    constraint: first.name,
-                    operator: first.defaultOperator ?? first.operators[0]?.name ?? 'equals',
-                    value: undefined,
-                }],
-        });
-    };
-    const addGroup = () => {
-        onChange({
-            ...tree,
-            rules: [...tree.rules, { operator: 'and', rules: [] }],
-        });
-    };
-    const wrapper = isRoot
-        ? 'flex flex-col gap-2'
-        : 'flex flex-col gap-2 rounded-md border-l-2 border-primary/40 bg-muted/30 pl-2 py-2 pr-2';
-    return (_jsxs("div", { className: wrapper, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ConnectorToggle, { value: tree.operator, onChange: setOperator }), _jsx("span", { className: "text-muted-foreground text-[11px]", children: tree.operator === 'and' ? 'Match all of the following' : 'Match any of the following' }), !isRoot && onRemove && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1" }), _jsx("button", { type: "button", onClick: onRemove, "aria-label": "Remove group", className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "\u00D7" })] }))] }), tree.rules.length === 0 && (_jsx("div", { className: "text-muted-foreground text-xs italic", children: "No conditions yet." })), tree.rules.map((child, i) => {
-                if (isQueryBuilderTree(child)) {
-                    return (_jsx(QueryBuilderGroup, { tree: child, constraints: constraints, isRoot: false, onChange: (next) => updateChildAt(i, next), onRemove: () => removeChildAt(i) }, i));
-                }
-                return (_jsx(QueryBuilderRow, { rule: child, constraints: constraints, constraintMeta: constraintMap.get(child.constraint), onConstraintChange: (v) => {
-                        const c = constraintMap.get(v);
-                        if (!c)
-                            return;
-                        updateChildAt(i, {
-                            constraint: v,
-                            operator: c.defaultOperator ?? c.operators[0]?.name ?? 'equals',
-                            value: undefined,
-                        });
-                    }, onOperatorChange: (v) => {
-                        updateChildAt(i, {
-                            ...child,
-                            operator: v,
-                            value: undefined,
-                        });
-                    }, onValueChange: (v) => updateChildAt(i, { ...child, value: v }), onRemove: () => removeChildAt(i) }, i));
-            }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", onClick: addRule, className: "inline-flex h-8 items-center justify-center rounded-md border border-dashed border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground", children: "+ Add condition" }), _jsx("button", { type: "button", onClick: addGroup, className: "inline-flex h-8 items-center justify-center rounded-md border border-dashed border-input bg-background px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground", children: "+ Add group" })] })] }));
-}
-/**
- * Compact AND/OR segmented control used at the head of every group. Pure
- * presentation — the parent owns the value.
- */
-function ConnectorToggle({ value, onChange, }) {
-    const base = 'inline-flex h-7 items-center px-2 text-[11px] font-medium uppercase tracking-wide transition';
-    const on = 'bg-primary text-primary-foreground';
-    const off = 'bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground';
-    return (_jsxs("div", { className: "inline-flex overflow-hidden rounded-md border border-input", children: [_jsx("button", { type: "button", onClick: () => onChange('and'), className: `${base} ${value === 'and' ? on : off}`, "aria-pressed": value === 'and', children: "AND" }), _jsx("button", { type: "button", onClick: () => onChange('or'), className: `${base} ${value === 'or' ? on : off}`, "aria-pressed": value === 'or', children: "OR" })] }));
-}
-/**
- * One condition row inside `FilterQueryBuilder`. Three controls
- * left-to-right: constraint picker, operator picker, value input. The
- * value input dispatches off the operator's `valueKind` — `none` hides
- * it entirely, `numberRange` / `dateRange` mount a pair, otherwise a
- * single typed input.
- */
-function QueryBuilderRow({ rule, constraints, constraintMeta, onConstraintChange, onOperatorChange, onValueChange, onRemove, }) {
-    const operators = constraintMeta?.operators ?? [];
-    const activeOp = operators.find(o => o.name === rule.operator);
-    const valueKind = activeOp?.valueKind ?? 'text';
-    return (_jsxs("div", { className: "flex items-start gap-1.5 rounded-md border border-input bg-background p-2", children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-1.5", children: [_jsxs(Select, { value: rule.constraint, onValueChange: (v) => onConstraintChange(typeof v === 'string' ? v : ''), children: [_jsx(SelectTrigger, { size: "sm", className: "h-8 w-36 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: constraints.map(c => (_jsx(SelectItem, { value: c.name, children: c.label }, c.name))) })] }), _jsxs(Select, { value: rule.operator, onValueChange: (v) => onOperatorChange(typeof v === 'string' ? v : ''), children: [_jsx(SelectTrigger, { size: "sm", className: "h-8 w-32 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: operators.map(o => (_jsx(SelectItem, { value: o.name, children: o.label }, o.name))) })] }), _jsx(QueryBuilderValueInput, { kind: valueKind, value: rule.value, options: constraintMeta?.options, onChange: onValueChange })] }), _jsx("button", { type: "button", onClick: onRemove, "aria-label": "Remove condition", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "\u00D7" })] }));
-}
-/**
- * Operator-aware value control. Switches over the constraint operator's
- * `valueKind` and mounts the matching input. Value shapes:
- * - `text / number / date / dateTime / select`  → scalar
- * - `multiSelect`                                → string[]
- * - `numberRange / dateRange`                    → [string, string]
- * - `boolean / none`                              → null / undefined
- */
-function QueryBuilderValueInput({ kind, value, options, onChange, }) {
-    if (kind === 'none' || kind === 'boolean')
-        return null;
-    if (kind === 'select') {
-        const opts = options ?? [];
-        const v = value === undefined || value === null ? '' : String(value);
-        return (_jsxs(Select, { value: v, onValueChange: (next) => onChange(typeof next === 'string' ? next : ''), children: [_jsx(SelectTrigger, { size: "sm", className: "h-8 min-w-32 text-xs", children: _jsx(SelectValue, { placeholder: "Pick\u2026" }) }), _jsx(SelectContent, { children: opts.map(o => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] }));
-    }
-    if (kind === 'multiSelect') {
-        const opts = options ?? [];
-        const list = Array.isArray(value) ? value.map(v => String(v)) : [];
-        const toggle = (val) => {
-            if (list.includes(val))
-                onChange(list.filter(v => v !== val));
-            else
-                onChange([...list, val]);
-        };
-        return (_jsx("div", { className: "flex flex-wrap items-center gap-1", children: opts.map(o => {
-                const active = list.includes(o.value);
-                return (_jsx("button", { type: "button", onClick: () => toggle(o.value), className: 'inline-flex h-7 items-center rounded-md border px-2 text-xs ' +
-                        (active
-                            ? 'border-primary bg-primary text-primary-foreground'
-                            : 'border-input bg-background hover:bg-accent'), children: o.label }, o.value));
-            }) }));
-    }
-    if (kind === 'numberRange') {
-        const [min, max] = Array.isArray(value) ? [value[0], value[1]] : [undefined, undefined];
-        return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: "number", className: "h-8 w-24 text-xs", value: min === undefined || min === null ? '' : String(min), onChange: (e) => onChange([e.target.value, max ?? '']), placeholder: "Min" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "\u2013" }), _jsx(Input, { type: "number", className: "h-8 w-24 text-xs", value: max === undefined || max === null ? '' : String(max), onChange: (e) => onChange([min ?? '', e.target.value]), placeholder: "Max" })] }));
-    }
-    if (kind === 'dateRange') {
-        const [from, to] = Array.isArray(value) ? [value[0], value[1]] : [undefined, undefined];
-        return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { type: "date", className: "h-8 w-36 text-xs", value: from === undefined || from === null ? '' : String(from), onChange: (e) => onChange([e.target.value, to ?? '']) }), _jsx("span", { className: "text-muted-foreground text-xs", children: "\u2192" }), _jsx(Input, { type: "date", className: "h-8 w-36 text-xs", value: to === undefined || to === null ? '' : String(to), onChange: (e) => onChange([from ?? '', e.target.value]) })] }));
-    }
-    if (kind === 'date' || kind === 'dateTime') {
-        const v = value === undefined || value === null ? '' : String(value);
-        return (_jsx(Input, { type: kind === 'dateTime' ? 'datetime-local' : 'date', className: "h-8 w-44 text-xs", value: v, onChange: (e) => onChange(e.target.value) }));
-    }
-    if (kind === 'number') {
-        const v = value === undefined || value === null ? '' : String(value);
-        return (_jsx(Input, { type: "number", className: "h-8 w-32 text-xs", value: v, onChange: (e) => onChange(e.target.value), placeholder: "Value" }));
-    }
-    // Default: text
-    const v = value === undefined || value === null ? '' : String(value);
-    return (_jsx(Input, { type: "text", className: "h-8 min-w-32 flex-1 text-xs", value: v, onChange: (e) => onChange(e.target.value), placeholder: "Value" }));
-}
-function renderFilterControl(el, index, prefix) {
-    const name = String(el['name'] ?? '');
-    const label = String(el['label'] ?? name);
-    const kind = String(el['kind'] ?? 'select');
-    const value = el['value'] ? String(el['value']) : '';
-    const placeholder = el['placeholder'] ? String(el['placeholder']) : 'All';
-    if (kind === 'queryBuilder') {
-        const constraints = el['constraints'] ?? [];
-        return (_jsx(FilterQueryBuilder, { name: name, label: label, defaultValue: value, constraints: constraints, prefix: prefix }, index));
-    }
-    if (kind === 'form') {
-        const formSchema = el['formSchema'] ?? [];
-        return (_jsx(FilterForm, { name: name, label: label, defaultValue: value, formSchema: formSchema, prefix: prefix }, index));
-    }
-    if (kind === 'boolean') {
-        return (_jsx(FilterSelect, { name: name, label: label, defaultValue: value, placeholder: placeholder, options: [{ value: '1', label: 'Yes' }, { value: '0', label: 'No' }], prefix: prefix }, index));
-    }
-    if (kind === 'multiSelect') {
-        const options = el['options'] ?? [];
-        return (_jsx(FilterMultiSelect, { name: name, label: label, defaultValue: value, options: options, prefix: prefix }, index));
-    }
-    if (kind === 'dateRange') {
-        const includesTime = Boolean(el['includesTime']);
-        const minDate = el['minDate'] ? String(el['minDate']) : undefined;
-        const maxDate = el['maxDate'] ? String(el['maxDate']) : undefined;
-        return (_jsx(FilterDateRange, { name: name, label: label, defaultValue: value, placeholder: placeholder, includesTime: includesTime, prefix: prefix, ...(minDate !== undefined ? { minDate } : {}), ...(maxDate !== undefined ? { maxDate } : {}) }, index));
-    }
-    // 'ternary' and 'select' both render as a single-select dropdown,
-    // differing only in their server-supplied option set.
-    const options = el['options'] ?? [];
-    return (_jsx(FilterSelect, { name: name, label: label, defaultValue: value, placeholder: placeholder, options: options, prefix: prefix }, index));
-}
-/**
- * Resolve the record URL for a single data cell. Column-level override
- * (`Column.recordUrl(fn)` → `_columnRecordUrls[name]`) wins over the
- * table-level `Table.recordUrl(fn)` (`_recordUrl`). Explicit per-column
- * opt-out (`Column.recordUrl(false)` → `meta.recordUrl === false`)
- * suppresses the link entirely. Returns `undefined` when the cell is
- * not linkable, in which case the renderer leaves it unwrapped.
- */
-function resolveColumnUrl(col, tableUrl, colUrls) {
-    if (col['recordUrl'] === false)
-        return undefined;
-    const own = colUrls[String(col['name'] ?? '')];
-    if (own !== undefined)
-        return own;
-    return tableUrl;
-}
-/**
- * Cell-level link wrapper. Renders a real `<a href>` so right-click /
- * cmd-click / middle-click "open in new tab" works, but intercepts plain
- * left-clicks for SPA navigation via `useNavigate()`. Modified clicks
- * (cmd / ctrl / shift / alt / non-primary buttons) fall through to the
- * browser's default link behavior.
- */
-function RecordCellLink({ 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: "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>`
@@ -2919,939 +275,7 @@ function RelationTabIcon({ icon }) {
     const Icon = useIconFor(icon);
     if (!Icon)
         return null;
-    return _jsx(Icon, { className: "size-4", "aria-hidden": "true" });
-}
-/**
- * Sort-by dropdown for `contentLayout: 'cards'`. Since the column-header
- * row (which usually doubles as the sort affordance) is hidden in cards
- * mode, this picker appears in the top bar instead. Each `Column` flagged
- * `.sortable()` contributes two options — ascending and descending —
- * yielding "Title (A→Z) / Title (Z→A) / Date (oldest first) / Date (newest
- * first)" style entries. Selecting an option resets `?page=1`.
- */
-function SortByPicker({ columns, active, onChange, }) {
-    const sortable = columns.filter(c => Boolean(c['sortable']));
-    if (sortable.length === 0)
-        return null;
-    const value = active ? `${active.column}:${active.direction}` : '';
-    return (_jsxs(Select, { value: value, onValueChange: (v) => {
-            if (typeof v !== 'string' || v === '')
-                return;
-            const idx = v.indexOf(':');
-            if (idx < 0)
-                return;
-            const col = v.slice(0, idx);
-            const dir = v.slice(idx + 1) === 'desc' ? 'desc' : 'asc';
-            onChange(col, dir);
-        }, children: [_jsx(SelectTrigger, { size: "sm", className: "h-9 w-44", children: _jsx(SelectValue, { placeholder: "Sort by\u2026" }) }), _jsx(SelectContent, { children: sortable.map(col => {
-                    const name = String(col['name'] ?? '');
-                    const label = String(col['label'] ?? name);
-                    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
- * can't construct them at runtime via template literals (`grid-cols-${n}`
- * would never be matched). Limit to 1–6 columns + 12 — covers every
- * reasonable card grid; bigger values are silently capped at 6 for
- * non-base breakpoints in `cardsPerRowClasses`.
- */
-const CARDS_GRID_COLS_BASE = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-2',
-    3: 'grid-cols-3',
-    4: 'grid-cols-4',
-    5: 'grid-cols-5',
-    6: 'grid-cols-6',
-    12: 'grid-cols-12',
-};
-const CARDS_GRID_COLS_SM = {
-    1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3',
-    4: 'sm:grid-cols-4', 5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6',
-    12: 'sm:grid-cols-12',
-};
-const CARDS_GRID_COLS_MD = {
-    1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-6',
-    12: 'md:grid-cols-12',
-};
-const CARDS_GRID_COLS_LG = {
-    1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3',
-    4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6',
-    12: 'lg:grid-cols-12',
-};
-const CARDS_GRID_COLS_XL = {
-    1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3',
-    4: 'xl:grid-cols-4', 5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6',
-    12: 'xl:grid-cols-12',
-};
-const CARDS_GRID_COLS_2XL = {
-    1: '2xl:grid-cols-1', 2: '2xl:grid-cols-2', 3: '2xl:grid-cols-3',
-    4: '2xl:grid-cols-4', 5: '2xl:grid-cols-5', 6: '2xl:grid-cols-6',
-    12: '2xl:grid-cols-12',
-};
-function pickCardCols(table, raw) {
-    if (raw === undefined)
-        return undefined;
-    if (table[raw])
-        return table[raw];
-    // Snap unsupported values to nearest available — values outside [1,6]∪{12}
-    // round down. Already-clamped to [1,12] server-side.
-    if (raw >= 12)
-        return table[12];
-    if (raw >= 6)
-        return table[6];
-    if (raw >= 5)
-        return table[5];
-    if (raw >= 4)
-        return table[4];
-    if (raw >= 3)
-        return table[3];
-    if (raw >= 2)
-        return table[2];
-    return table[1];
-}
-/** Build a Tailwind grid-cols class string from a per-row config. Default
- * `{ default: 1, sm: 2, lg: 3 }` mirrors Filament's typical card grid. */
-function cardsPerRowClasses(opts) {
-    const cfg = opts ?? {};
-    const baseN = cfg['default'] ?? 1;
-    const out = [pickCardCols(CARDS_GRID_COLS_BASE, baseN)];
-    if (cfg['sm'] !== undefined) {
-        const c = pickCardCols(CARDS_GRID_COLS_SM, cfg['sm']);
-        if (c)
-            out.push(c);
-    }
-    if (cfg['md'] !== undefined) {
-        const c = pickCardCols(CARDS_GRID_COLS_MD, cfg['md']);
-        if (c)
-            out.push(c);
-    }
-    if (cfg['lg'] !== undefined) {
-        const c = pickCardCols(CARDS_GRID_COLS_LG, cfg['lg']);
-        if (c)
-            out.push(c);
-    }
-    if (cfg['xl'] !== undefined) {
-        const c = pickCardCols(CARDS_GRID_COLS_XL, cfg['xl']);
-        if (c)
-            out.push(c);
-    }
-    if (cfg['2xl'] !== undefined) {
-        const c = pickCardCols(CARDS_GRID_COLS_2XL, cfg['2xl']);
-        if (c)
-            out.push(c);
-    }
-    // Unset fallback covers Filament's typical default — 1 column on mobile,
-    // 2 on small screens, 3 on large.
-    if (Object.keys(cfg).length === 0) {
-        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
-    }
-    return out.join(' ');
-}
-/**
- * Tier-3 deferred-load shell. When `Resource.deferLoading = true`, the
- * SSR pass marks each Table on the page as `deferred` + stamps a
- * `tableUrl`. This wrapper paints a skeleton on first frame and fetches
- * the actual rows from the JSON endpoint after mount; the inner
- * `TableRendererBody` renders identically against either the SSR meta
- * (non-deferred case) or the fetched meta (deferred case).
- *
- * SPA nav with a query change re-runs SSR, which re-stamps `deferred`
- * — so the URL-change effect fires another fetch. The skeleton frame
- * still shows current sort / search / page / filter chrome because the
- * SSR pass mirrors URL state on the deferred Table.
- */
-function TableRenderer({ el }) {
-    const isDeferred = el['deferred'] === true && typeof el['tableUrl'] === 'string';
-    const tableUrl = isDeferred ? el['tableUrl'] : '';
-    // Track the URL search string so a navigation that changes filters /
-    // sort / page re-fires the fetch. Initialized lazy on first client
-    // render; on the SSR pass we just fall through to skeleton.
-    const [search, setSearch] = useState(() => typeof window === 'undefined' ? '' : window.location.search);
-    useEffect(() => {
-        if (!isDeferred)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        setSearch(window.location.search);
-    }, [isDeferred, el]);
-    const [deferredMeta, setDeferredMeta] = useState(null);
-    const [deferredError, setDeferredError] = useState(null);
-    useEffect(() => {
-        if (!isDeferred || !tableUrl)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        let cancelled = false;
-        setDeferredMeta(null);
-        setDeferredError(null);
-        fetch(tableUrl + search, {
-            headers: { 'Accept': 'application/json' },
-            credentials: 'same-origin',
-        })
-            .then(async (r) => {
-            const data = (await r.json());
-            if (cancelled)
-                return;
-            if (data.ok && Array.isArray(data.tables) && data.tables.length > 0) {
-                setDeferredMeta(data.tables[0]);
-            }
-            else {
-                setDeferredError(data.error ?? 'Failed to load table');
-            }
-        })
-            .catch(err => {
-            if (cancelled)
-                return;
-            setDeferredError(err instanceof Error ? err.message : 'Failed to load table');
-        });
-        return () => { cancelled = true; };
-    }, [isDeferred, tableUrl, search]);
-    if (isDeferred && deferredError) {
-        return (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: ["Failed to load table: ", deferredError] }));
-    }
-    if (isDeferred && !deferredMeta) {
-        return _jsx(TableSkeleton, { el: el });
-    }
-    return _jsx(TableRendererBody, { el: isDeferred ? deferredMeta : el });
-}
-/**
- * Skeleton placeholder painted while a deferred-loaded table fetches
- * its rows. Mirrors the table's heading + description chrome (already
- * present on `el`) so the frame doesn't pop layout when the real rows
- * arrive. Renders a small column header strip + 5 placeholder rows.
- */
-function TableSkeleton({ el }) {
-    const heading = typeof el['heading'] === 'string' ? el['heading'] : undefined;
-    const description = typeof el['description'] === 'string' ? el['description'] : undefined;
-    const children = el.children ?? [];
-    const colCount = Math.max(1, children.filter(c => c.type === 'column').length);
-    return (_jsxs("div", { className: "space-y-3", children: [(heading || description) ? (_jsxs("div", { className: "space-y-1", children: [heading ? _jsx("div", { className: "text-lg font-semibold", children: heading }) : null, description ? _jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null] })) : null, _jsxs("div", { className: "rounded-md border", children: [_jsx("div", { className: "grid border-b bg-muted/50 px-4 py-2", style: { gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }, children: Array.from({ length: colCount }).map((_, i) => (_jsx("div", { className: "h-4 w-20 rounded bg-muted-foreground/20" }, i))) }), _jsx("div", { className: "divide-y", children: Array.from({ length: 5 }).map((_, rowIdx) => (_jsx("div", { className: "grid items-center px-4 py-3", style: { gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }, children: Array.from({ length: colCount }).map((_, colIdx) => (_jsx("div", { className: "h-4 w-2/3 rounded bg-muted-foreground/10 animate-pulse" }, colIdx))) }, rowIdx))) })] })] }));
-}
-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');
-    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 (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
-    // 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;
-        if (typeof window === 'undefined')
-            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);
-            try {
-                const stored = window.localStorage.getItem(groupStorageKey(v));
-                next[v] = stored === null ? groupDefaultCollapsed : stored === '1';
-            }
-            catch {
-                next[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 };
-            if (typeof window !== 'undefined') {
-                try {
-                    window.localStorage.setItem(groupStorageKey(groupValue), nextOpen ? '1' : '0');
-                }
-                catch { /* private mode / quota — silent */ }
-            }
-            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;
-        });
-    };
-    // ── Reorder DnD state + handlers ──────────────────────
-    // dragId — the row currently being dragged (string id), or null.
-    // dropAt — the boundary the cursor is hovering (0..rows.length), or null.
-    const [dragId, setDragId] = useState(null);
-    const [dropAt, setDropAt] = useState(null);
-    const onRowDragStart = (id) => (e) => {
-        if (!reorderEnabled)
-            return;
-        setDragId(id);
-        e.dataTransfer.effectAllowed = 'move';
-        try {
-            e.dataTransfer.setData('text/plain', id);
-        }
-        catch { /* IE quirk */ }
-    };
-    const onRowDragOver = (idx) => (e) => {
-        if (!reorderEnabled || dragId === null)
-            return;
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'move';
-        const rect = e.currentTarget.getBoundingClientRect();
-        const aboveHalf = e.clientY < rect.top + rect.height / 2;
-        setDropAt(aboveHalf ? idx : idx + 1);
-    };
-    const onRowDrop = async (e) => {
-        if (!reorderEnabled || dragId === null || dropAt === null || !reorderUrl) {
-            setDragId(null);
-            setDropAt(null);
-            return;
-        }
-        e.preventDefault();
-        const fromIdx = visibleIds.findIndex(id => id === dragId);
-        setDragId(null);
-        setDropAt(null);
-        if (fromIdx < 0)
-            return;
-        const target = dropAt > fromIdx ? dropAt - 1 : dropAt;
-        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 onRowDragEnd = () => {
-        setDragId(null);
-        setDropAt(null);
-    };
-    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;
-        if (typeof window === 'undefined')
-            return false;
-        try {
-            const stored = window.localStorage.getItem(filtersStripStorageKey);
-            // 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.
-            if (stored === null)
-                return Object.keys(activeFilters).length > 0;
-            return stored === '1';
-        }
-        catch {
-            return false;
-        }
-    });
-    const toggleFiltersOpen = () => {
-        setFiltersOpen(prev => {
-            const next = !prev;
-            if (typeof window !== 'undefined') {
-                try {
-                    window.localStorage.setItem(filtersStripStorageKey, next ? '1' : '0');
-                }
-                catch { /* private mode / quota — silent */ }
-            }
-            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;
-    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 })), 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 })), 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']);
-                                        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) }))] })), (() => {
-                                            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 }))] }));
-}
-/**
- * Card-grid body for `Table.contentLayout('cards')`. Renders the rows
- * area only — the surrounding chrome (heading / search / filters /
- * pagination / bulk-action toolbar / "Sort by" picker) lives in the
- * parent `TableRendererBody` so both layouts share it.
- *
- * Each card renders its `_cardChildren` schema via the standard
- * `renderElement` walker, so any display-Element (Heading, Text, Image,
- * Icon, Badge entries, layout primitives, etc.) drops in without a new
- * renderer. Per-row chrome attaches via the same `_recordUrl` /
- * `_recordClasses` / `_visibleActions` / `_disabledActions` keys the
- * table-mode renderer reads from — `loadTableRecords` is unchanged.
- *
- * Group banding splits the rows into contiguous sections by
- * `_groupValue`, emitting a heading row above each section. The user's
- * 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, 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)
-    const gridClass = `grid gap-4 ${cardsPerRowClasses(cardsPerRow)}`;
-    if (rows.length === 0) {
-        return (_jsx("div", { className: "rounded-xl border bg-card 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.' }))] }) }));
-    }
-    const sections = [];
-    if (defaultGroup === undefined) {
-        sections.push({ indices: rows.map((_, i) => i) });
-    }
-    else {
-        let current;
-        for (let i = 0; i < rows.length; i++) {
-            const r = rows[i];
-            const v = String(r['_groupValue'] ?? '');
-            if (current === undefined || current.groupValue !== v) {
-                const title = r['_groupTitle'];
-                const description = r['_groupDescription'];
-                current = { groupValue: v, indices: [], ...(title ? { title } : {}), ...(description ? { description } : {}) };
-                sections.push(current);
-            }
-            current.indices.push(i);
-        }
-    }
-    return (_jsx("div", { className: "flex flex-col gap-4", children: sections.map((section, si) => {
-            const collapsed = groupCollapsible
-                && section.groupValue !== undefined
-                && collapsedGroups[section.groupValue] === true;
-            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);
-                            const recordUrl = hasRecordUrl ? recordObj['_recordUrl'] : undefined;
-                            const customRowClasses = hasRecordClasses
-                                ? recordObj['_recordClasses'] ?? ''
-                                : '';
-                            const cardChildren = recordObj['_cardChildren'] ?? [];
-                            const cardClassName = [
-                                'group relative flex flex-col gap-3 rounded-xl border bg-card p-4 transition-colors',
-                                recordUrl ? 'hover:border-primary/40 hover:bg-accent/30' : '',
-                                isSelected ? 'border-primary ring-2 ring-primary/20' : '',
-                                customRowClasses,
-                            ].filter(Boolean).join(' ');
-                            const onLinkClick = (e) => {
-                                if (e.button !== 0)
-                                    return;
-                                if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
-                                    return;
-                                e.preventDefault();
-                                if (recordUrl)
-                                    void navigate(recordUrl);
-                            };
-                            return (_jsxs("div", { className: cardClassName, children: [recordUrl !== undefined && (_jsx("a", { href: recordUrl, onClick: onLinkClick, "aria-label": "Open record", className: "absolute inset-0 z-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx("span", { className: "sr-only", children: "Open record" }) })), hasBulkActions && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(Checkbox, { "aria-label": `Select row ${id}`, checked: isSelected, onCheckedChange: () => toggleRow(id), "data-no-row-nav": true }) })), _jsx("div", { className: "relative z-[1] flex flex-col gap-3", children: cardChildren.length === 0 ? (_jsx("div", { className: "text-xs italic text-muted-foreground", children: "No card content configured." })) : cardChildren.map((c, i) => renderElement(c, i)) }), hasRowActions && (_jsx("div", { className: "relative z-10 mt-auto flex items-center justify-end pt-2 border-t border-border/60", children: renderRowActions(id, recordObj, rowActions) }))] }, id));
-                        }) }))] }, si));
-        }) }));
+    return _jsx(Icon, { className: "size-4 inline", "aria-hidden": "true" });
 }
 export function SchemaRenderer({ elements, widgetData }) {
     if (!elements || elements.length === 0)