@pilotiq/pilotiq 0.1.0

package/dist/react/fields/RepeaterInput.js

@@ -0,0 +1,705 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
+import { PlusIcon } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import { SchemaRenderer, dispatchHandlerAction } from '../SchemaRenderer.js';
+import { FormIdContext, useFormState } from '../FormStateContext.js';
+import { findFieldMeta } from '../formStateHelpers.js';
+import { useNavigate } from '../navigate.js';
+import { useToast } from '../Toaster.js';
+import { RowChromeIconButton, ReorderGrip, CollapseChevron, resolveRowChrome, DEFAULT_MOVE_UP, DEFAULT_MOVE_DOWN, DEFAULT_CLONE, DEFAULT_DELETE, } from './rowChromeButton.js';
+import { syncRowGates } from './syncRowGates.js';
+/**
+ * Pure reorder helper — used by both the HTML5 DnD path and the
+ * Up/Down button path. `insertBeforeIdx` is the boundary the dragged
+ * row should land at (range `0..rows.length`); after removing the
+ * source we adjust by -1 when the source sat below the target so the
+ * caller never has to think about post-removal index shifts.
+ *
+ * No-ops when the move would leave the array unchanged.
+ */
+export function reorderRows(rows, fromIdx, insertBeforeIdx) {
+    if (fromIdx < 0 || fromIdx >= rows.length)
+        return rows;
+    if (insertBeforeIdx < 0 || insertBeforeIdx > rows.length)
+        return rows;
+    if (fromIdx === insertBeforeIdx || fromIdx + 1 === insertBeforeIdx)
+        return rows;
+    const next = rows.slice();
+    const moved = next.splice(fromIdx, 1)[0];
+    const target = insertBeforeIdx > fromIdx ? insertBeforeIdx - 1 : insertBeforeIdx;
+    next.splice(target, 0, moved);
+    return next;
+}
+/**
+ * Tailwind v4 default breakpoint widths. Reused as container-query
+ * thresholds so authors can think in the same `sm/md/lg/xl/2xl` ladder
+ * regardless of viewport vs. container framing — at viewport width these
+ * fire identically to the corresponding `@media` queries.
+ */
+const RESPONSIVE_GRID_BREAKPOINTS = [
+    { key: 'sm', min: '40rem' },
+    { key: 'md', min: '48rem' },
+    { key: 'lg', min: '64rem' },
+    { key: 'xl', min: '80rem' },
+    { key: '2xl', min: '96rem' },
+];
+/**
+ * Compute the grid container's className / style / scoped-CSS block from
+ * a `meta.grid` value. Shared between Repeater and Builder so both render
+ * responsive grids identically.
+ *
+ * - `meta.grid` undefined → `{ hasGrid: false }` and the caller falls back
+ *   to a vertical flex stack.
+ * - Number form (`grid(2)`) → inline `gridTemplateColumns: repeat(N, …)`.
+ * - Object form (`grid({ default: 1, md: 2 })`) → a fresh `<style>` block
+ *   keyed off `scopeId` + a matching className on the container; default
+ *   columns drive the base rule, each declared breakpoint adds a
+ *   `@container` query override.
+ *
+ * Responsive mode requires a CQ context — the caller paints
+ * `wrapperStyle` (`container-type: inline-size`) on the outer wrapper so
+ * the grid's `@container` rules resolve against the Repeater's
+ * parent-allocated width, not the viewport. A 2-column Repeater dropped
+ * into a `Split` aside therefore folds back to 1 column once the aside
+ * is narrower than `md`, even on a wide screen.
+ *
+ * `scopeId` should be a stable per-field identifier (we use `useId()` from
+ * React — already isolated to this render's component instance).
+ */
+export function buildGridContainer(grid, scopeId) {
+    if (grid === undefined) {
+        return { hasGrid: false, className: 'flex flex-col gap-3', style: undefined, styleBlock: null, wrapperStyle: undefined };
+    }
+    if (typeof grid === 'number') {
+        return {
+            hasGrid: true,
+            className: 'grid gap-3',
+            style: { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` },
+            styleBlock: null,
+            wrapperStyle: undefined,
+        };
+    }
+    const cls = `pq-grid-${scopeId.replace(/:/g, '')}`;
+    const baseCols = typeof grid['default'] === 'number' ? grid['default'] : 1;
+    const rules = [
+        `.${cls} { display: grid; gap: 0.75rem; grid-template-columns: repeat(${baseCols}, minmax(0, 1fr)); }`,
+    ];
+    for (const bp of RESPONSIVE_GRID_BREAKPOINTS) {
+        const cols = grid[bp.key];
+        if (typeof cols !== 'number')
+            continue;
+        rules.push(`@container (min-width: ${bp.min}) { .${cls} { grid-template-columns: repeat(${cols}, minmax(0, 1fr)); } }`);
+    }
+    return {
+        hasGrid: true,
+        className: cls,
+        style: undefined,
+        styleBlock: _jsx("style", { children: rules.join('\n') }),
+        wrapperStyle: { containerType: 'inline-size' },
+    };
+}
+/**
+ * Repeater renderer (Plan #14).
+ *
+ * Rows are managed as local React state with stable `id` keys so
+ * uncontrolled inner inputs preserve their typed values across
+ * add/remove/reorder operations. Each row's resolved children meta is
+ * deep-cloned with a row-scoped prefix on every Field's `name` so
+ * submitted form bodies are flat-keyed (`items.0.product`, etc.) — the
+ * server's `coerceFormValues` re-groups them into an array.
+ *
+ * Reorder: native HTML5 drag-and-drop on each row, with a 2px drop
+ * indicator showing where the row will land. Up/Down buttons are kept
+ * as a keyboard fallback. Both paths route through `reorderRows()` so
+ * behavior is identical. Collapsed state persists per-row to
+ * `localStorage` under `pilotiq.repeater.<formId>.<fieldName>.<rowId>`
+ * when collapsible.
+ *
+ * Inner-field reactivity: this component does NOT integrate with
+ * `FormStateProvider` for nested-path live updates; that surgery is
+ * tracked separately. Repeaters with `live()` inner fields render
+ * today but the `live` trigger doesn't roundtrip.
+ */
+export function RepeaterInput({ el, name, disabled, }) {
+    // The parent <form>'s id, scoped via context. Falls back to the field
+    // name when no Form is in scope (defensive — Repeaters always render
+    // inside a Form on real pages, but Storybook / unit tests can mount
+    // them bare).
+    const formIdFromCtx = useContext(FormIdContext);
+    const formId = formIdFromCtx || `repeater-${name}`;
+    const meta = el;
+    const minItems = typeof meta.minItems === 'number' ? meta.minItems : undefined;
+    const maxItems = typeof meta.maxItems === 'number' ? meta.maxItems : undefined;
+    const collapsible = Boolean(meta.collapsible);
+    const defaultCollapsed = Boolean(meta.defaultCollapsed);
+    const accordion = Boolean(meta.accordion);
+    const reorderable = Boolean(meta.reorderable);
+    const cloneable = Boolean(meta.cloneable);
+    const simple = Boolean(meta.simple);
+    const buttons = meta.buttons;
+    // Customizer wins over the legacy `addActionLabel`. Default 'Add' is the
+    // final fallback; documented in `RepeaterField.addActionLabel`.
+    const addLabel = buttons?.add?.label
+        ?? (typeof meta.addActionLabel === 'string' ? meta.addActionLabel : 'Add');
+    const columns = typeof meta.columns === 'number' && meta.columns > 1 ? meta.columns : 1;
+    // Row-grid mode: scalar `grid: N` or responsive object `grid: { default, md, … }`
+    // lays rows in an n-column grid. Distinct from `columns` which grids the inner
+    // schema *inside* a row. We suppress the drop indicator in grid mode (a horizontal
+    // accent line reads wrong across grid cells); button reorder still works.
+    const gridScopeId = useId();
+    const gridContainer = useMemo(() => buildGridContainer(meta.grid, gridScopeId), [meta.grid, gridScopeId]);
+    // Table mode renders rows as `<tr>` and inner fields as `<td>`. Mutually
+    // exclusive with `simple` and `grid` (the field setters arbitrate).
+    // Collapsible / accordion are meaningless on `<tr>` rows so we ignore
+    // those flags in this path.
+    const tableColumns = meta.table?.columns;
+    const tableMode = Array.isArray(tableColumns) && tableColumns.length > 0;
+    const initialRows = useMemo(() => (meta.rows ?? []).map(r => ({
+        id: r.id,
+        children: r.children,
+        ...(r.itemLabel !== undefined ? { itemLabel: r.itemLabel } : {}),
+        ...(r.hidden ? { hidden: true } : {}),
+        ...(r.extraActions && r.extraActions.length > 0 ? { extraActions: r.extraActions } : {}),
+        ...(r.canDelete === false ? { canDelete: false } : {}),
+        ...(r.canClone === false ? { canClone: false } : {}),
+        ...(r.canReorder === false ? { canReorder: false } : {}),
+    })), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const [rows, setRows] = useState(initialRows);
+    const metaRows = meta.rows;
+    useEffect(() => {
+        if (!metaRows)
+            return;
+        setRows(prev => syncRowGates(prev, metaRows));
+    }, [metaRows]);
+    const [collapsed, setCollapsed] = useState(() => accordion ? {} : initSeedCollapsed(initialRows, formId, name, defaultCollapsed, collapsible));
+    // Accordion mode replaces the per-row collapsed map with a single open
+    // row id (or `null` for "all collapsed"). Persisted under a single
+    // `…accordion` storage key so reload + form swap restore the open row.
+    // Initial value: respect `defaultCollapsed` (start with everything
+    // collapsed when the author opted in), otherwise open the first
+    // visible row — Filament's posture, and matches the implicit user
+    // mental model that an accordion always shows *something*.
+    const [accordionOpenId, setAccordionOpenId] = useState(() => {
+        if (!accordion)
+            return null;
+        const stored = readAccordionFromStorage(formId, name);
+        if (stored !== undefined) {
+            // Storage may hold a stale id from before a row was deleted; if so,
+            // fall through to the default.
+            if (stored === '' || initialRows.some(r => r.id === stored))
+                return stored === '' ? null : stored;
+        }
+        if (defaultCollapsed)
+            return null;
+        const firstVisible = initialRows.find(r => !r.hidden);
+        return firstVisible?.id ?? null;
+    });
+    const atMin = minItems !== undefined && rows.length <= minItems;
+    const atMax = maxItems !== undefined && rows.length >= maxItems;
+    const addRow = () => {
+        if (atMax)
+            return;
+        const newRow = {
+            id: generateRowId(),
+            children: meta.template ?? [],
+        };
+        setRows(prev => [...prev, newRow]);
+        if (accordion) {
+            // New row should be the only one open — the user just asked for it.
+            setAccordionOpenId(newRow.id);
+            writeAccordionToStorage(formId, name, newRow.id);
+            return;
+        }
+        if (collapsible && defaultCollapsed) {
+            setCollapsed(prev => ({ ...prev, [newRow.id]: true }));
+            writeCollapsedToStorage(formId, name, newRow.id, true);
+        }
+    };
+    const removeRow = (id) => {
+        if (atMin)
+            return;
+        setRows(prev => prev.filter(r => r.id !== id));
+        if (accordion) {
+            if (accordionOpenId === id) {
+                setAccordionOpenId(null);
+                writeAccordionToStorage(formId, name, null);
+            }
+            return;
+        }
+        setCollapsed(prev => {
+            const { [id]: _drop, ...rest } = prev;
+            return rest;
+        });
+        deleteCollapsedFromStorage(formId, name, id);
+    };
+    const cloneRow = (id) => {
+        if (atMax)
+            return;
+        setRows(prev => {
+            const idx = prev.findIndex(r => r.id === id);
+            if (idx < 0)
+                return prev;
+            const source = prev[idx];
+            const clone = {
+                id: generateRowId(),
+                children: source.children,
+                ...(source.itemLabel !== undefined ? { itemLabel: source.itemLabel } : {}),
+            };
+            const next = prev.slice();
+            next.splice(idx + 1, 0, clone);
+            return next;
+        });
+    };
+    const moveRow = (id, dir) => {
+        setRows(prev => {
+            const idx = prev.findIndex(r => r.id === id);
+            if (idx < 0)
+                return prev;
+            // Skip past hidden neighbours so reorder operates between visible
+            // rows. Hidden rows hold their absolute slot — the visible row hops
+            // over them.
+            if (dir === -1) {
+                let target = idx - 1;
+                while (target >= 0 && prev[target]?.hidden)
+                    target--;
+                if (target < 0)
+                    return prev;
+                return reorderRows(prev, idx, target);
+            }
+            let target = idx + 1;
+            while (target < prev.length && prev[target]?.hidden)
+                target++;
+            if (target >= prev.length)
+                return prev;
+            return reorderRows(prev, idx, target + 1);
+        });
+    };
+    // ── DnD state ───────────────────────────────────────────
+    // dragId  — the row being dragged, or null when no drag is active.
+    // dropAt  — the boundary slot the cursor is currently over
+    //           (range 0..rows.length); null when not over a valid drop target.
+    const [dragId, setDragId] = useState(null);
+    const [dropAt, setDropAt] = useState(null);
+    // Generic on `HTMLElement` so the same handlers wire onto a `<div>`
+    // row (card / grid layouts) AND a `<tr>` row (table layout). Concrete
+    // refinement happens at the consumer's prop boundary.
+    const onRowDragStart = (id) => (e) => {
+        if (!reorderable || disabled)
+            return;
+        setDragId(id);
+        // dataTransfer needs *something* to register the drag in Firefox.
+        e.dataTransfer.effectAllowed = 'move';
+        try {
+            e.dataTransfer.setData('text/plain', id);
+        }
+        catch { /* IE quirk; ignore */ }
+    };
+    const onRowDragOver = (idx) => (e) => {
+        if (!reorderable || disabled || dragId === null)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        // Drop above this row when cursor is in its top half, below when in its bottom half.
+        const rect = e.currentTarget.getBoundingClientRect();
+        const aboveHalf = e.clientY < rect.top + rect.height / 2;
+        setDropAt(aboveHalf ? idx : idx + 1);
+    };
+    const onRowDrop = (e) => {
+        if (!reorderable || disabled || dragId === null || dropAt === null) {
+            setDragId(null);
+            setDropAt(null);
+            return;
+        }
+        e.preventDefault();
+        setRows(prev => {
+            const fromIdx = prev.findIndex(r => r.id === dragId);
+            if (fromIdx < 0)
+                return prev;
+            return reorderRows(prev, fromIdx, dropAt);
+        });
+        setDragId(null);
+        setDropAt(null);
+    };
+    const onRowDragEnd = () => {
+        setDragId(null);
+        setDropAt(null);
+    };
+    // ── Inner-field live re-resolve (Plan #14 v1.1) ─────────────
+    // Inner Repeater inputs are uncontrolled (so reorder/clone preserves
+    // typed values). To make `Field.live()` work on them, we delegate
+    // change/blur events at the container level: the dotted-path field
+    // name on `target.name` is enough to find the field meta and decide
+    // whether to fire. `triggerLive` then snapshots the form's full
+    // FormData and POSTs to the partial-resolve endpoint — see
+    // FormStateContext.
+    //
+    // React-controlled primitives that update via callbacks (Switch /
+    // Slider / Base UI Select / etc.) don't bubble native input events
+    // here. Each of those renderers calls `fs.triggerLive(value)`
+    // explicitly to compensate (Plan #14 v1.2). Native inputs
+    // (text/number/email/textarea/range/date/checkbox/radio) keep
+    // bubbling through this delegate as before.
+    const formState = useFormState();
+    const fireLive = (name, value, eventKind) => {
+        if (!formState)
+            return;
+        if (!name.includes('.'))
+            return; // top-level fields handle their own live trigger
+        const fieldMeta = findFieldMeta(formState.formMeta, name);
+        const liveCfg = fieldMeta?.['live'];
+        const hasJs = fieldMeta?.afterStateUpdatedJs !== undefined;
+        if (!liveCfg && !hasJs)
+            return;
+        if (liveCfg) {
+            const onBlurMode = typeof liveCfg === 'object' && liveCfg !== null
+                && liveCfg.onBlur === true;
+            if (eventKind === 'change' && onBlurMode)
+                return;
+            if (eventKind === 'blur' && !onBlurMode)
+                return;
+        }
+        else {
+            // JS-only handlers always fire immediately on change.
+            if (eventKind === 'blur')
+                return;
+        }
+        formState.triggerLive(name, value);
+    };
+    const onContainerChange = (e) => {
+        const t = e.target;
+        if (!t.name)
+            return;
+        fireLive(t.name, t.value, 'change');
+    };
+    const onContainerBlur = (e) => {
+        const t = e.target;
+        if (!t.name)
+            return;
+        fireLive(t.name, t.value, 'blur');
+    };
+    const toggleCollapsed = (id) => {
+        if (accordion) {
+            // Click the open row to collapse all; click any other row to swap.
+            // No "two rows open" state is reachable.
+            const next = accordionOpenId === id ? null : id;
+            setAccordionOpenId(next);
+            writeAccordionToStorage(formId, name, next);
+            return;
+        }
+        setCollapsed(prev => {
+            const nextValue = !prev[id];
+            writeCollapsedToStorage(formId, name, id, nextValue);
+            return { ...prev, [id]: nextValue };
+        });
+    };
+    // Visibility computed each render — hidden rows still occupy slots in
+    // `rows` (so values round-trip + reorder-around math stays simple), but
+    // they don't count for the user-facing empty state, drop indicator, or
+    // first/last-visible disable on Up/Down buttons.
+    const hasVisibleRow = rows.some(r => !r.hidden);
+    const firstVisibleIdx = rows.findIndex(r => !r.hidden);
+    const lastVisibleIdx = (() => {
+        for (let i = rows.length - 1; i >= 0; i--)
+            if (!rows[i]?.hidden)
+                return i;
+        return -1;
+    })();
+    if (tableMode && tableColumns) {
+        // Table mode renders rows as `<tr>` with the inner schema's fields
+        // as `<td>` cells. The reorder grip + extraActions + clone + delete
+        // strip lives in a final actions column (only mounted when any of
+        // those are configured). Hidden rows render with `display:none` on
+        // `<tr>` so values still round-trip on submit. Drop indicator is
+        // suppressed — a horizontal accent across `<td>` cells looks broken;
+        // button reorder + drag itself still move rows.
+        // Actions cell is always present in v1 — delete is implicit on every
+        // Repeater row, and reorder/clone/extraActions land here too. When
+        // every action happens to be disabled (e.g. atMin && no reorderable
+        // && no clone), the cell still renders for column-count consistency.
+        return (_jsx(RepeaterTableLayout, { rows: rows, name: name, formId: formId, disabled: disabled, columns: tableColumns, addLabel: addLabel, buttons: buttons, atMin: atMin, atMax: atMax, reorderable: reorderable, cloneable: cloneable, firstVisibleIdx: firstVisibleIdx, lastVisibleIdx: lastVisibleIdx, hasVisibleRow: hasVisibleRow, dragId: dragId, onAdd: addRow, onMoveUp: (id) => moveRow(id, -1), onMoveDown: (id) => moveRow(id, 1), onClone: cloneRow, onRemove: removeRow, onContainerChange: onContainerChange, onContainerBlur: onContainerBlur, onRowDragStart: onRowDragStart, onRowDragOver: onRowDragOver, onRowDrop: onRowDrop, onRowDragEnd: onRowDragEnd }));
+    }
+    // In grid mode the rows themselves are grid items — wrap them in a
+    // CSS grid; otherwise stack vertically. The empty state and Add
+    // button are rendered as siblings so they don't get pulled into the
+    // grid (Add stays at the natural bottom; empty state spans full).
+    return (_jsxs("div", { className: "flex flex-col gap-3", style: gridContainer.wrapperStyle, onChange: onContainerChange, onBlur: onContainerBlur, children: [!hasVisibleRow && (_jsxs("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: ["No items yet. Click ", addLabel, " to start."] })), gridContainer.styleBlock, _jsxs("div", { className: gridContainer.className, style: gridContainer.style, children: [rows.map((row, i) => (_jsxs(React.Fragment, { children: [!row.hidden && dropAt === i && !gridContainer.hasGrid && _jsx(DropIndicator, {}), _jsx(RepeaterRow, { row: row, index: i, isFirstVisible: i === firstVisibleIdx, isLastVisible: i === lastVisibleIdx, name: name, disabled: disabled, collapsible: collapsible, isCollapsed: collapsible && (accordion
+                                    ? accordionOpenId !== row.id
+                                    : (collapsed[row.id] ?? false)), reorderable: reorderable, cloneable: cloneable, simple: simple, atMin: atMin, atMax: atMax, columns: columns, buttons: buttons, isDragging: dragId === row.id, rowPath: `${name}.${i}`, onMoveUp: () => moveRow(row.id, -1), onMoveDown: () => moveRow(row.id, 1), onClone: () => cloneRow(row.id), onRemove: () => removeRow(row.id), onToggleCollapse: () => toggleCollapsed(row.id), onDragStart: onRowDragStart(row.id), onDragOver: onRowDragOver(i), onDrop: onRowDrop, onDragEnd: onRowDragEnd })] }, row.id))), dropAt === rows.length && !gridContainer.hasGrid && _jsx(DropIndicator, {})] }), _jsx(AddRowButton, { label: addLabel, buttons: buttons, disabled: disabled || atMax, onClick: addRow })] }));
+}
+/**
+ * Bottom Add button — outline shadcn `<Button>`. Reads the customizer
+ * (`addAction(RowButton.make()…)`) for icon + tooltip overrides; label
+ * is already pre-resolved upstream so the legacy `addActionLabel()` setter
+ * keeps working. Color override is intentionally ignored on the Add
+ * button to preserve the outline-button visual identity (icon-color
+ * tweaks would clash with the shadcn variant); use `Action.color()` on
+ * a custom header action if you need a different chrome there.
+ */
+function AddRowButton({ label, buttons, disabled, onClick, }) {
+    const { Icon, tooltip } = resolveRowChrome({ Icon: PlusIcon, label, tooltip: '', colorClass: '' }, buttons?.add);
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onClick, disabled: disabled, title: tooltip || undefined, className: "self-start", children: [_jsx(Icon, { className: "size-4" }), label] }));
+}
+function RepeaterRow({ row, index, isFirstVisible, isLastVisible, name, disabled, collapsible, isCollapsed, reorderable, cloneable, simple, atMin, atMax, columns, buttons, isDragging, rowPath, onMoveUp, onMoveDown, onClone, onRemove, onToggleCollapse, onDragStart, onDragOver, onDrop, onDragEnd, }) {
+    const prefix = `${name}.${index}`;
+    const namespaced = useMemo(() => row.children.map(c => prefixFieldNames(c, prefix)), [row.children, prefix]);
+    const headerLabel = row.itemLabel ?? `Item ${index + 1}`;
+    // Hidden rows: render only the inputs (and __id) inside a display:none
+    // wrapper so their values round-trip through FormData on submit. No
+    // chrome, no drag wiring, no labels — `itemHidden` is purely UX.
+    if (row.hidden) {
+        return (_jsxs("div", { style: { display: 'none' }, "data-pilotiq-repeater-row": "hidden", children: [_jsx("input", { type: "hidden", name: `${prefix}.__id`, value: row.id, readOnly: true }), _jsx(SchemaRenderer, { elements: namespaced })] }));
+    }
+    // Per-row capability gates — `itemCan*(rule)` server-resolved.
+    // `canDelete / canClone / canReorder === false` removes the matching
+    // button on this row; absent flags fall through to the global defaults.
+    const canDelete = row.canDelete !== false;
+    const canClone = row.canClone !== false;
+    const canReorder = row.canReorder !== false;
+    // Native HTML5 DnD only fires `dragstart` from elements with `draggable=true`.
+    // We attach it at the row container so the grip handle (and the empty
+    // header gutter, for forgiving aim) both initiate a drag. The handle's
+    // visual cursor + aria-label tell users where the affordance lives.
+    // Pinned rows (`canReorder === false`) lose drag-start; other rows can
+    // still drop next to them — see itemCanReorder docstring.
+    const dragProps = reorderable && !disabled && canReorder
+        ? {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDrop,
+            onDragEnd,
+        }
+        : {};
+    // Simple-mode: flatten the row to one input + inline action strip — no
+    // header, no border, no collapse (a single field has nothing to collapse).
+    // Reorder + delete still work; clone + extraActions are intentionally
+    // dropped since there's no "row identity" worth duplicating in the flat
+    // shape, and per-row buttons read cluttered next to a one-input row.
+    // FieldShell renders a label by default — for simple rows we want flush
+    // inputs (Filament's posture too), so we suppress the inner label by
+    // wrapping in a class that hides the FieldShell's label slot.
+    if (simple) {
+        return (_jsxs("div", { className: `flex items-center gap-2 transition-opacity ${isDragging ? 'opacity-50' : ''}`, "data-pilotiq-repeater-row": "simple", ...dragProps, children: [_jsx("input", { type: "hidden", name: `${prefix}.__id`, value: row.id, readOnly: true }), reorderable && canReorder && _jsx(ReorderGrip, { disabled: disabled, buttons: buttons }), _jsx("div", { className: "flex-1 [&_label]:sr-only", children: _jsx(SchemaRenderer, { elements: namespaced }) }), reorderable && canReorder && (_jsxs(_Fragment, { children: [_jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_UP, override: buttons?.moveUp, disabled: disabled || isFirstVisible, onClick: onMoveUp }), _jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_DOWN, override: buttons?.moveDown, disabled: disabled || isLastVisible, onClick: onMoveDown })] })), canDelete && (_jsx(RowChromeIconButton, { defaults: DEFAULT_DELETE, override: buttons?.delete, disabled: disabled || atMin, onClick: onRemove }))] }));
+    }
+    return (_jsxs("div", { className: `rounded-md border bg-card transition-opacity ${isDragging ? 'opacity-50' : ''}`, "data-pilotiq-repeater-row": "", ...dragProps, children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [reorderable && canReorder && _jsx(ReorderGrip, { disabled: disabled, buttons: buttons }), collapsible && (_jsx(CollapseChevron, { isCollapsed: isCollapsed, disabled: disabled, buttons: buttons, onToggle: onToggleCollapse })), _jsx("span", { className: "flex-1 truncate text-sm font-medium", children: headerLabel }), _jsx("input", { type: "hidden", name: `${prefix}.__id`, value: row.id, readOnly: true }), reorderable && canReorder && (_jsxs(_Fragment, { children: [_jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_UP, override: buttons?.moveUp, disabled: disabled || isFirstVisible, onClick: onMoveUp }), _jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_DOWN, override: buttons?.moveDown, disabled: disabled || isLastVisible, onClick: onMoveDown })] })), row.extraActions && row.extraActions.length > 0 && (_jsx(ExtraActionStrip, { actions: row.extraActions, rowPath: rowPath, disabled: disabled })), cloneable && canClone && (_jsx(RowChromeIconButton, { defaults: DEFAULT_CLONE, override: buttons?.clone, disabled: disabled || atMax, onClick: onClone })), canDelete && (_jsx(RowChromeIconButton, { defaults: DEFAULT_DELETE, override: buttons?.delete, disabled: disabled || atMin, onClick: onRemove }))] }), _jsx("div", { className: "p-3", style: isCollapsed ? { display: 'none' } : undefined, children: columns > 1
+                    ? (_jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: _jsx(SchemaRenderer, { elements: namespaced }) }))
+                    : _jsx(SchemaRenderer, { elements: namespaced }) })] }));
+}
+/**
+ * Per-row extraItemActions strip. Each button dispatches its handler
+ * action by snapshotting the parent `<form>` (so the server's
+ * `coerceFormValues` sees the row's submitted fields), then POSTs to the
+ * action's `dispatchUrl` with `_rowPath="<fieldName>.<index>"` in the
+ * body — the server uses that path to navigate into the field's row
+ * array and stamp `ctx.row = { index, id, values, fieldName }` on the
+ * handler context.
+ *
+ * v1 — handler-style only. `href` / `method` / modal-form actions inside
+ * `extraItemActions` are accepted by the type system but render here as
+ * no-op buttons (they have neither a `dispatchUrl` nor a row-aware fetch
+ * branch). Filament parity for those modes can land in a follow-up.
+ *
+ * Disabled actions render greyed out + skip dispatch (matches the
+ * `meta.disabled` stamp from `resolveExtraItemActions`).
+ */
+export function ExtraActionStrip({ actions, rowPath, disabled, }) {
+    const navigate = useNavigate();
+    const { notify } = useToast();
+    const onClick = (action) => async (e) => {
+        if (disabled || action['disabled'])
+            return;
+        const dispatchUrl = action['dispatchUrl'];
+        if (!dispatchUrl)
+            return;
+        const form = e.currentTarget.closest('form');
+        const snapshot = form ? new FormData(form) : new FormData();
+        await dispatchHandlerAction(dispatchUrl, [], navigate, notify, { _rowPath: rowPath }, snapshot);
+    };
+    return (_jsx(_Fragment, { children: actions.map((a, i) => {
+            const label = String(a['label'] ?? a['name'] ?? '');
+            const tooltip = a['tooltip'] ?? label;
+            const isDisabled = disabled || Boolean(a['disabled']);
+            const destructive = Boolean(a['destructive']);
+            return (_jsx("button", { type: "button", onClick: onClick(a), disabled: isDisabled, "aria-label": label, title: tooltip, "data-action-name": a['name'], className: `text-muted-foreground hover:text-foreground disabled:opacity-30 ${destructive ? 'hover:text-destructive' : ''}`.trim(), children: _jsx("span", { className: "text-xs font-medium", children: label }) }, i));
+        }) }));
+}
+/**
+ * 2px-tall horizontal accent line rendered between rows when the user
+ * drags a row over a valid drop boundary. Uses `pointer-events: none`
+ * so the underlying row's `dragover` keeps firing — without this, the
+ * indicator would steal events and the drop slot would flicker.
+ */
+function DropIndicator() {
+    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none h-0.5 rounded-full bg-primary" }));
+}
+/**
+ * Table-mode layout. Renders rows as `<tr>` and inner schema fields as
+ * `<td>` cells, with the supplied column headers in `<thead>`.
+ *
+ * Cells call `prefixFieldNames` to emit row-scoped flat dotted names
+ * (`items.0.name`, etc.) — same wire shape as the card layout, so
+ * `coerceFormValues` re-groups identically. The first inner FieldShell
+ * label is suppressed via a parent `[&_label]:sr-only` since the
+ * column header carries the labelling.
+ *
+ * The actions column hosts grip / Up / Down / clone / extraActions /
+ * delete affordances. We render it unconditionally so column count
+ * stays stable across rows even when individual buttons disable.
+ */
+function RepeaterTableLayout({ rows, name, formId: _formId, disabled, columns, addLabel, buttons, atMin, atMax, reorderable, cloneable, firstVisibleIdx, lastVisibleIdx, hasVisibleRow, dragId, onAdd, onMoveUp, onMoveDown, onClone, onRemove, onContainerChange, onContainerBlur, onRowDragStart, onRowDragOver, onRowDrop, onRowDragEnd, }) {
+    // The container div carries the change/blur delegates so live() events
+    // bubble identically to the card path. `[&_label]:sr-only` hides the
+    // FieldShell label across every cell (column header carries it).
+    return (_jsxs("div", { className: "flex flex-col gap-3", onChange: onContainerChange, onBlur: onContainerBlur, children: [!hasVisibleRow && (_jsxs("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: ["No items yet. Click ", addLabel, " to start."] })), hasVisibleRow && (_jsx("div", { className: "overflow-x-auto rounded-md border [&_label]:sr-only", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsxs("colgroup", { children: [columns.map((c, i) => (_jsx("col", { style: c.width ? { width: c.width } : undefined }, i))), _jsx("col", {})] }), _jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [columns.map((c, i) => (_jsxs("th", { scope: "col", className: `px-3 py-2 text-xs font-medium text-muted-foreground ${alignClass(c.alignment)}`, children: [c.label, c.required && _jsx("span", { className: "ml-0.5 text-destructive", children: "*" })] }, i))), _jsx("th", { scope: "col", className: "w-px", "aria-label": "Actions" })] }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsx(RepeaterTableRow, { row: row, index: i, name: name, disabled: disabled, columns: columns, reorderable: reorderable, cloneable: cloneable, buttons: buttons, isFirstVisible: i === firstVisibleIdx, isLastVisible: i === lastVisibleIdx, atMin: atMin, atMax: atMax, isDragging: dragId === row.id, rowPath: `${name}.${i}`, onMoveUp: () => onMoveUp(row.id), onMoveDown: () => onMoveDown(row.id), onClone: () => onClone(row.id), onRemove: () => onRemove(row.id), onDragStart: onRowDragStart(row.id), onDragOver: onRowDragOver(i), onDrop: onRowDrop, onDragEnd: onRowDragEnd }, row.id))) })] }) })), _jsx(AddRowButton, { label: addLabel, buttons: buttons, disabled: disabled || atMax, onClick: onAdd })] }));
+}
+function alignClass(a) {
+    if (a === 'right')
+        return 'text-right';
+    if (a === 'center')
+        return 'text-center';
+    return 'text-left';
+}
+function RepeaterTableRow({ row, index, name, disabled, columns, reorderable, cloneable, buttons, isFirstVisible, isLastVisible, atMin, atMax, isDragging, rowPath, onMoveUp, onMoveDown, onClone, onRemove, onDragStart, onDragOver, onDrop, onDragEnd, }) {
+    const prefix = `${name}.${index}`;
+    const namespaced = useMemo(() => row.children.map(c => prefixFieldNames(c, prefix)), [row.children, prefix]);
+    if (row.hidden) {
+        // Render the hidden envelope as a single full-span cell so column
+        // count stays valid; `display:none` ensures the row is invisible but
+        // still in the form's submit. Using `<tr style="display:none">`
+        // would warn under React strict-mode in Firefox; the wrapping cell
+        // keeps the markup HTML-valid.
+        return (_jsx("tr", { style: { display: 'none' }, "data-pilotiq-repeater-row": "hidden", children: _jsxs("td", { colSpan: columns.length + 1, children: [_jsx("input", { type: "hidden", name: `${prefix}.__id`, value: row.id, readOnly: true }), _jsx(SchemaRenderer, { elements: namespaced })] }) }));
+    }
+    // Pair each column header (in order) with the corresponding inner
+    // field meta. Extra fields beyond the column count fall through the
+    // last cell as stacked items — a misconfiguration but better than
+    // dropping them silently.
+    const fieldsPerCell = columns.map((_c, i) => i === columns.length - 1 ? namespaced.slice(i) : namespaced.slice(i, i + 1));
+    // Per-row capability gates — see RepeaterRow for the contract.
+    const canDelete = row.canDelete !== false;
+    const canClone = row.canClone !== false;
+    const canReorder = row.canReorder !== false;
+    const dragProps = reorderable && !disabled && canReorder
+        ? {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDrop,
+            onDragEnd,
+        }
+        : {};
+    return (_jsxs("tr", { className: `border-t align-top ${isDragging ? 'opacity-50' : ''}`, "data-pilotiq-repeater-row": "", ...dragProps, children: [_jsx("input", { type: "hidden", name: `${prefix}.__id`, value: row.id, readOnly: true }), columns.map((c, i) => (_jsx("td", { className: `px-3 py-2 ${alignClass(c.alignment)}`, children: _jsx(SchemaRenderer, { elements: fieldsPerCell[i] ?? [] }) }, i))), _jsx("td", { className: "whitespace-nowrap px-3 py-2 text-right", children: _jsxs("div", { className: "inline-flex items-center gap-1", children: [reorderable && canReorder && (_jsxs(_Fragment, { children: [_jsx(ReorderGrip, { disabled: disabled, buttons: buttons }), _jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_UP, override: buttons?.moveUp, disabled: disabled || isFirstVisible, onClick: onMoveUp }), _jsx(RowChromeIconButton, { defaults: DEFAULT_MOVE_DOWN, override: buttons?.moveDown, disabled: disabled || isLastVisible, onClick: onMoveDown })] })), row.extraActions && row.extraActions.length > 0 && (_jsx(ExtraActionStrip, { actions: row.extraActions, rowPath: rowPath, disabled: disabled })), cloneable && canClone && (_jsx(RowChromeIconButton, { defaults: DEFAULT_CLONE, override: buttons?.clone, disabled: disabled || atMax, onClick: onClone })), canDelete && (_jsx(RowChromeIconButton, { defaults: DEFAULT_DELETE, override: buttons?.delete, disabled: disabled || atMin, onClick: onRemove }))] }) })] }));
+}
+/**
+ * Recursively prefix every Field meta's `name` with a row-scoped path.
+ * Inner Repeaters get their own per-row prefixing so nested Repeater
+ * row inputs land at `items.0.modifiers.1.name`.
+ */
+function prefixFieldNames(el, prefix) {
+    if (el.type === 'field' && typeof el['name'] === 'string') {
+        const innerName = el['name'];
+        const newName = `${prefix}.${innerName}`;
+        if (el['fieldType'] === 'repeater') {
+            const m = el;
+            const rows = m.rows ?? [];
+            const tpl = m.template ?? [];
+            return {
+                ...el,
+                name: newName,
+                rows: rows.map(r => ({
+                    ...r,
+                    children: r.children.map(c => prefixFieldNames(c, `${newName}.${rows.indexOf(r)}`)),
+                })),
+                template: tpl.map(c => prefixFieldNames(c, `${newName}.0`)),
+            };
+        }
+        return { ...el, name: newName };
+    }
+    if (Array.isArray(el.children)) {
+        return {
+            ...el,
+            children: el.children.map(c => prefixFieldNames(c, prefix)),
+        };
+    }
+    return el;
+}
+let _rowSeqFallback = 0;
+function generateRowId() {
+    const c = globalThis.crypto;
+    if (c?.randomUUID)
+        return c.randomUUID();
+    return `row-${Date.now()}-${++_rowSeqFallback}`;
+}
+function collapsedStorageKey(formId, name, rowId) {
+    return `pilotiq.repeater.${formId}.${name}.${rowId}`;
+}
+function initSeedCollapsed(rows, formId, name, defaultValue, collapsible) {
+    if (!collapsible)
+        return {};
+    const out = {};
+    for (const row of rows) {
+        out[row.id] = readCollapsedFromStorage(formId, name, row.id, defaultValue);
+    }
+    return out;
+}
+function readCollapsedFromStorage(formId, name, rowId, defaultValue) {
+    if (typeof window === 'undefined')
+        return defaultValue;
+    try {
+        const raw = window.localStorage.getItem(collapsedStorageKey(formId, name, rowId));
+        if (raw === null)
+            return defaultValue;
+        return raw === 'true';
+    }
+    catch {
+        return defaultValue;
+    }
+}
+function writeCollapsedToStorage(formId, name, rowId, value) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.setItem(collapsedStorageKey(formId, name, rowId), String(value));
+    }
+    catch { /* quota exceeded — fall back to in-memory only */ }
+}
+function deleteCollapsedFromStorage(formId, name, rowId) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.removeItem(collapsedStorageKey(formId, name, rowId));
+    }
+    catch { /* ignore */ }
+}
+function accordionStorageKey(formId, name) {
+    return `pilotiq.repeater.${formId}.${name}.accordion`;
+}
+/**
+ * Read the persisted accordion-open row id. Returns `undefined` when no
+ * value is stored (so the caller can fall back to the default-open
+ * heuristic). Returns `''` when the user explicitly closed every row —
+ * the caller maps that to `null` openId.
+ */
+function readAccordionFromStorage(formId, name) {
+    if (typeof window === 'undefined')
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(accordionStorageKey(formId, name));
+        return raw === null ? undefined : raw;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writeAccordionToStorage(formId, name, openId) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        window.localStorage.setItem(accordionStorageKey(formId, name), openId ?? '');
+    }
+    catch { /* quota exceeded — fall back to in-memory only */ }
+}
+//# sourceMappingURL=RepeaterInput.js.map