@pilotiq/pilotiq 0.1.0

package/dist/react/SchemaRenderer.js

@@ -0,0 +1,3458 @@
+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 { 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 { 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, } 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 { 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',
+};
+export function FormFields({ elements, values }) {
+    return (_jsx(_Fragment, { children: elements.map((el, i) => {
+            if (el['type'] !== 'field')
+                return null;
+            const name = String(el['name'] ?? '');
+            const merged = values && name in values
+                ? { ...el, defaultValue: values[name] }
+                : el;
+            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);
+    }
+    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, children: _jsx(Custom, { el: el, name: name, defaultValue: defaultValue, required: required, disabled: disabled, placeholder: placeholder }) }, index));
+    }
+    const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder);
+    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, children: input }, index));
+}
+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 }));
+        }
+        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;
+    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 && (_jsx("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: fields.map((f, i) => renderFormChild(f, i, initialValues, errors)) })), !hasForm && 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). */
+function renderActionLike(el, index, opts = {}) {
+    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) ───────────────────────────────────────
+/**
+ * Multi-step form layout. Tracks active step in `useState`, optionally
+ * persisted to localStorage. On Next click, POSTs `{ step, values }` to
+ * the form's `wizardUrl` (stamped by the route handler when the form
+ * has a Wizard descendant). 200 → advance; 422 → stamp inline errors;
+ * absent `wizardUrl` → advance immediately (no validation).
+ *
+ * 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.
+ */
+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 [active, setActive] = useState(startOnStep);
+    const [advancing, setAdvancing] = useState(false);
+    const [advanceError, setAdvanceError] = useState(null);
+    // Hydrate persisted step from localStorage after mount.
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const stored = window.localStorage.getItem(storageKey);
+            if (stored !== null) {
+                const n = Number(stored);
+                if (Number.isFinite(n) && n >= 0 && n < steps.length)
+                    setActive(n);
+            }
+        }
+        catch { /* ignore */ }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey]);
+    // Persist active step changes.
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(storageKey, String(active));
+        }
+        catch { /* ignore */ }
+    }, [storageKey, 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("button", { type: "button", disabled: isFirst || advancing, onClick: () => advance(active - 1), className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed", children: "Back" }), isLast
+                        ? _jsx("span", { className: "text-xs text-muted-foreground", children: "Submit the form to finish." })
+                        : _jsx("button", { type: "button", disabled: advancing, onClick: () => advance(active + 1), className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed", children: advancing ? 'Validating…' : 'Next' })] })] }, index));
+}
+// ─── 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 })] }));
+}
+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 })] }) }));
+}
+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" }) }));
+}
+function renderElement(el, index) {
+    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');
+            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 alertType = String(el['alertType'] ?? 'info');
+            const styles = alertStyles[alertType] ?? alertStyles['info'];
+            const title = el['title'] ? String(el['title']) : undefined;
+            const footer = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup');
+            return (_jsxs("div", { className: `rounded-lg border p-4 ${styles}`, children: [title && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: String(el['content'] ?? '') }), footer.length > 0 && (_jsx("div", { className: "flex items-center gap-2 mt-3", children: 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');
+            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);
+        case 'tabs':
+            return _jsx(TabsRenderer, { el: el, index: index }, index);
+        case 'tab':
+            // Tabs are rendered by their parent `tabs` element; standalone Tab is a no-op.
+            return null;
+        case 'listTabs':
+            return _jsx(ListTabsRenderer, { el: el }, index);
+        case 'relation-tabs':
+            return _jsx(RelationTabsRenderer, { el: el }, index);
+        case 'breadcrumbs':
+            return _jsx(BreadcrumbsRenderer, { el: 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);
+        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);
+        case 'action':
+            return renderAction(el, index);
+        case 'actionGroup':
+            return _jsx(ActionGroupTrigger, { el: el }, index);
+        case 'form': {
+            // Key on formId so SPA navigation between pages with different
+            // forms (list → edit, edit → edit-of-different-record, etc.)
+            // forces a fresh React mount. Form fields are uncontrolled
+            // (`defaultValue`), so without remount, prop updates wouldn't
+            // propagate into the rendered <input>s — the form would render
+            // with stale or empty values.
+            const formId = String(el['formId'] ?? index);
+            return _jsx(FormRenderer, { el: el }, formId);
+        }
+        case 'table':
+            return _jsx(TableRenderer, { el: el }, index);
+        case 'column':
+            // Columns are rendered by their parent table; standalone column is a no-op.
+            return null;
+        case 'stats':
+            return _jsx(StatsOverviewRenderer, { meta: el }, index);
+        case 'tableWidget':
+            return _jsx(TableWidgetRenderer, { meta: el }, index);
+        case 'view':
+            return _jsx(ViewRenderer, { meta: el }, index);
+        default: {
+            // Plan #15 Phase C — server-data widget elements registered by
+            // adapter packages (`@pilotiq/recharts` for `'chart'`, future
+            // `@pilotiq/chartjs`, etc.) dispatch through the runtime widget
+            // registry. The fallback error message points the consumer at the
+            // install command — silent `null` here would let a missing
+            // `registerChartRenderer()` slip through.
+            if (el['serverData'] === true) {
+                const widgetType = String(el.type ?? '');
+                const Renderer = getWidgetRenderer(widgetType);
+                if (Renderer)
+                    return _jsx(Renderer, { meta: el }, index);
+                return (_jsxs("div", { 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", role: "alert", children: ["No renderer registered for widget type ", _jsx("code", { className: "font-mono", children: widgetType }), ".", widgetType === 'chart' && (_jsxs(_Fragment, { children: [" Install ", _jsx("code", { className: "font-mono", children: "@pilotiq/recharts" }), " and call ", _jsx("code", { className: "font-mono", children: "registerChartRenderer()" }), " at app boot."] }))] }, index));
+            }
+            return null;
+        }
+    }
+}
+// ─── 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'),
+            ...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);
+    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 }));
+}
+/**
+ * List-page tab strip — Filament-style query shortcuts above the table
+ * ("All / Drafts / Published / Archived"). Each trigger is a real `<a>`
+ * (right-click / cmd-click "open in new tab" works); plain left-click is
+ * intercepted for SPA navigation. Active tab carries `data-active`.
+ *
+ * The server stamps `active` + per-tab `url` + resolved badge string on
+ * each `listTab` meta entry — this component just renders.
+ */
+function ListTabsRenderer({ el }) {
+    const navigate = useNavigate();
+    const tabs = (el.children ?? []).filter(c => c.type === 'listTab');
+    if (tabs.length === 0)
+        return null;
+    return (_jsx("div", { className: "border-b border-border", children: _jsx("nav", { className: "flex items-center gap-1 -mb-px overflow-x-auto", role: "tablist", children: tabs.map((t, i) => {
+                const name = String(t['name'] ?? '');
+                const label = String(t['label'] ?? name);
+                const active = Boolean(t['active']);
+                const url = String(t['url'] ?? `?tab=${encodeURIComponent(name)}`);
+                const iconKey = t['icon'] ? String(t['icon']) : undefined;
+                const Icon = iconKey ? (resolveIcon(iconKey) ?? CircleIcon) : undefined;
+                const badge = t['badge'] !== undefined ? String(t['badge']) : undefined;
+                const badgeKey = t['badgeColor'] ? String(t['badgeColor']) : (active ? 'primary' : 'gray');
+                const badgeCls = BADGE_COLOR_CLASSES[badgeKey] ?? BADGE_COLOR_CLASSES['gray'];
+                const triggerCls = [
+                    'inline-flex items-center gap-1.5 px-3 py-2 text-sm border-b-2 transition-colors whitespace-nowrap',
+                    active
+                        ? 'border-primary text-foreground font-medium'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',
+                ].join(' ');
+                const onClick = (e) => {
+                    if (e.button !== 0)
+                        return;
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                        return;
+                    e.preventDefault();
+                    void navigate(url);
+                };
+                return (_jsxs("a", { href: url, onClick: onClick, role: "tab", "aria-selected": active, "data-active": active || undefined, className: triggerCls, children: [Icon && _jsx(Icon, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { children: label }), badge !== undefined && (_jsx("span", { className: `ml-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${badgeCls}`, children: badge }))] }, i));
+            }) }) }));
+}
+/** Phase C — server-resolved breadcrumb chain rendered above any other
+ *  top-of-page chrome. The trailing item carries no `url` and renders
+ *  as plain text + `aria-current="page"`. SPA-navigates on plain
+ *  left-click; modified clicks fall through. */
+function BreadcrumbsRenderer({ el }) {
+    const navigate = useNavigate();
+    const items = el['items'] ?? [];
+    if (items.length < 2)
+        return null;
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "text-sm text-muted-foreground", children: _jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, i) => {
+                const isLast = i === items.length - 1;
+                const linkable = !!item.url && !isLast;
+                const onClick = (e) => {
+                    if (e.button !== 0)
+                        return;
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                        return;
+                    if (!item.url)
+                        return;
+                    e.preventDefault();
+                    void navigate(item.url);
+                };
+                return (_jsxs("li", { className: "inline-flex items-center gap-1.5", children: [linkable
+                            ? (_jsx("a", { href: item.url, onClick: onClick, className: "hover:text-foreground transition-colors", children: item.label }))
+                            : (_jsx("span", { "aria-current": isLast ? 'page' : undefined, className: isLast ? 'text-foreground font-medium' : undefined, children: item.label })), !isLast && (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground/50", children: "/" }))] }, `${i}:${item.label}`));
+            }) }) }));
+}
+/** Plan #11 — relation manager nav strip. Renders one anchor per tab;
+ *  the active tab gets the same border-primary styling as ListTabs.
+ *  SPA-navigates on plain left-click; cmd/ctrl/shift/middle-click fall
+ *  through so users can open a manager in a new tab. */
+function RelationTabsRenderer({ el }) {
+    const navigate = useNavigate();
+    const tabs = el['tabs'] ?? [];
+    if (tabs.length === 0)
+        return null;
+    return (_jsx("div", { className: "border-b border-border", children: _jsx("nav", { className: "flex items-center gap-1 -mb-px overflow-x-auto", role: "tablist", children: tabs.map((t, i) => {
+                const triggerCls = [
+                    'inline-flex items-center gap-1.5 px-3 py-2 text-sm border-b-2 transition-colors whitespace-nowrap',
+                    t.active
+                        ? 'border-primary text-foreground font-medium'
+                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',
+                ].join(' ');
+                const onClick = (e) => {
+                    if (e.button !== 0)
+                        return;
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                        return;
+                    e.preventDefault();
+                    void navigate(t.url);
+                };
+                return (_jsxs("a", { href: t.url, onClick: onClick, role: "tab", "aria-selected": t.active, "data-active": t.active || undefined, className: triggerCls, children: [_jsx(RelationTabIcon, { icon: t.icon }), _jsx("span", { children: t.label })] }, t.key + ':' + i));
+            }) }) }));
+}
+function RelationTabIcon({ icon }) {
+    // SerializedIcon is `string | { class: string }`. Use useIconFor to
+    // resolve component-typed icons through the Vite plugin's manifest.
+    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));
+                }) })] }));
+}
+/**
+ * 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');
+    // 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');
+    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 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;
+    // 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'] ?? '';
+    // 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 }
+                : {}),
+    };
+    // 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;
+    }
+    // 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 showHeaderBar = searchable || headerActions.length > 0 || showFiltersInToolbar || hasGroupPicker || hasSortPicker;
+    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 = columns.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) ? (_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);
+                                } }))] })) : _jsx("span", {}), headerActions.length > 0 && (_jsx("div", { className: "flex items-center gap-2", children: headerActions.map((a, i) => renderActionLike(a, i)) }))] })), hasFilters && filtersInModal && _jsx(ActiveFiltersBar, { filters: filters, prefix: queryPrefix }), hasFilters && filtersAbove && filtersOpen && (_jsx(FilterStrip, { filters: filters, prefix: queryPrefix })), hasBulkActions && someChecked && (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [selected.size, " selected"] }), _jsxs("div", { className: "flex items-center gap-2", children: [bulkActions.map((a, i) => renderActionLike(a, i, { ids: Array.from(selected) })), _jsx("button", { type: "button", onClick: () => setSelected(new Set()), className: "text-xs text-muted-foreground hover:text-foreground", children: "Clear" })] })] })), isCardsLayout ? (_jsx(CardsLayoutBody, { el: el, columns: columns, rows: rows, visibleIds: visibleIds, selected: selected, toggleRow: toggleRow, hasBulkActions: hasBulkActions, hasRowActions: hasRowActions, rowActions: rowActions, hasRecordUrl: hasRecordUrl, hasRecordClasses: hasRecordClasses, striped: striped, activeEmpty: activeEmpty, EmptyIcon: EmptyIcon, hasFilterOrSearch: hasFilterOrSearch, defaultGroup: defaultGroup, groupColumnLabel: groupColumnLabel, groupCollapsible: groupCollapsible, collapsedGroups: collapsedGroups, toggleGroupCollapsed: toggleGroupCollapsed, cardsPerRow: cardsPerRow, navigate: navigate })) : (_jsx("div", { className: "rounded-xl border bg-card overflow-hidden", children: _jsxs(DataTable, { children: [_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { children: [reorderColumnVisible && (_jsx(TableHead, { className: "w-9 px-2", "aria-label": "Reorder" })), hasBulkActions && (_jsx(TableHead, { className: "w-9 px-3", children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allChecked, onCheckedChange: () => toggleAll() }) })), columns.map((col, i) => {
+                                        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: groupCollapsible ? (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 text-left", onClick: () => toggleGroupCollapsed(groupValue), "aria-expanded": !isInCollapsedGroup, children: [_jsx(ChevronDownIcon, { className: [
+                                                                'size-4 transition-transform',
+                                                                isInCollapsedGroup ? '-rotate-90' : '',
+                                                            ].filter(Boolean).join(' ') }), _jsx(GroupHeaderText, { label: groupColumnLabel, value: groupValue, title: groupTitle, description: groupDescription })] })) : (_jsx(GroupHeaderText, { label: groupColumnLabel, value: groupValue, title: groupTitle, description: groupDescription })) }) }, `group-${id}`)), isInCollapsedGroup ? null : (_jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: [
+                                                rowClassName,
+                                                dragId === id ? 'opacity-50' : '',
+                                                dropAt === ri && dragId !== null ? 'border-t-2 border-t-primary' : '',
+                                            ].filter(Boolean).join(' ') || undefined, draggable: reorderEnabled || undefined, onDragStart: reorderEnabled ? onRowDragStart(id) : undefined, onDragOver: reorderEnabled ? onRowDragOver(ri) : undefined, onDrop: reorderEnabled ? onRowDrop : undefined, onDragEnd: reorderEnabled ? onRowDragEnd : undefined, children: [reorderColumnVisible && (_jsx(TableCell, { className: "w-9 px-2", children: _jsx("span", { "aria-label": reorderEnabled ? 'Drag to reorder' : 'Reorder paused — clear filters and sort to enable', className: reorderEnabled
+                                                            ? 'inline-flex cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing'
+                                                            : 'inline-flex cursor-not-allowed text-muted-foreground/40', children: _jsx(GripVerticalIcon, { className: "size-4" }) }) })), hasBulkActions && (_jsx(TableCell, { className: "w-9 px-3", children: _jsx(Checkbox, { "aria-label": `Select row ${id}`, checked: isSelected, onCheckedChange: () => toggleRow(id) }) })), columns.map((col, ci) => {
+                                                    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;
+                                                        return (_jsx(TableCell, { className: `text-sm text-foreground ${align} p-0`, style: widthStyle, children: _jsx(EditableComp, { url: editUrl, col: col, value: value, disabled: cellDisabled }) }, ci));
+                                                    }
+                                                    const 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, {}), columns.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, {}), columns.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, }) {
+    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 && (groupCollapsible ? (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground", onClick: () => toggleGroupCollapsed(section.groupValue), "aria-expanded": !collapsed, children: [_jsx(ChevronDownIcon, { className: [
+                                    'size-4 transition-transform',
+                                    collapsed ? '-rotate-90' : '',
+                                ].filter(Boolean).join(' ') }), _jsx(GroupHeaderText, { label: groupColumnLabel, value: section.groupValue, title: section.title, description: section.description })] })) : (_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: _jsx(GroupHeaderText, { label: groupColumnLabel, value: section.groupValue, title: section.title, description: section.description }) }))), !collapsed && (_jsx("div", { className: gridClass, children: section.indices.map((ri) => {
+                            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));
+        }) }));
+}
+export function SchemaRenderer({ elements, widgetData }) {
+    if (!elements || elements.length === 0)
+        return null;
+    // exactOptionalPropertyTypes: only spread `data` when defined.
+    const providerProps = widgetData !== undefined ? { data: widgetData } : {};
+    return (_jsx(WidgetDataProvider, { ...providerProps, children: _jsx("div", { className: "flex flex-col gap-6", children: elements.map((el, i) => renderElement(el, i)) }) }));
+}
+//# sourceMappingURL=SchemaRenderer.js.map