@elytracms/studio 0.0.25 → 0.0.27

package/dist/components/cms/field-control.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, ChevronDown, ChevronUp, GripVertical, ImagePlus, Link2, Pencil, Plus, RotateCcw, SlidersHorizontal, Trash2, Upload, X } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, ChevronDown, ChevronUp, GripVertical, ImagePlus, Link2, MoreHorizontal, Pencil, Plus, RotateCcw, SlidersHorizontal, Trash2, Upload, X } from 'lucide-react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router';
 import { BUILTIN_FIELD_CONTROLS, assetAcceptAttr, assetMatchesAccept, assetNode, assetSubfieldsOf, describeAccept, descendantIds, isFieldHidden, parentRelationField, readAssetId, } from '@elytracms/core/cms-core';
-import { Badge, Button, Card, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Field, Input, Row, Select, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { Badge, Button, Card, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, Input, Row, Select, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { applyAssetSelection, assetIdsOf, singleAssetIdOf } from '../assets/asset-selection';
 import { useOptionalAssets } from '../assets/assets-store';
@@ -148,45 +148,36 @@ export function objectItemSummary(fields, item, index) {
 function truncateSummary(s, max = 60) {
     return s.length > max ? `${s.slice(0, max - 1)}…` : s;
 }
-/**
- * The nested subfield form for one object item (EC-253). Reuses {@link FieldControl}
- * recursively, so any subfield type — including a nested object/repeater — works for
- * free. Writing a subfield merges it back into the item and bubbles the new item up.
- */
-function ObjectItemForm({ fields, value, onChange, readOnly, idPrefix, }) {
-    return (_jsx(Stack, { gap: "3", className: "mt-2", children: fields.map((sub) => {
-            // EC-273: a conditionally-hidden subfield (its predicate keys off the item's
-            // own sibling values) is omitted — e.g. a discriminated link's `href` shows
-            // only when `linkType === 'href'`. Re-evaluated as the item is edited.
-            if (isFieldHidden(sub, { values: value }))
-                return null;
-            const subId = `${idPrefix}-${sub.name}`;
-            return (_jsx(Field, { htmlFor: subId, hint: sub.form?.description, label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: fieldLabel(sub) }), sub.validation?.required ? _jsx("span", { className: "text-destructive", children: "*" }) : null] }), children: _jsx(FieldControl, { id: subId, field: sub, value: value[sub.name], readOnly: readOnly, onChange: (next) => {
-                        const updated = { ...value };
-                        if (next === undefined)
-                            delete updated[sub.name];
-                        else
-                            updated[sub.name] = next;
-                        onChange(updated);
-                    } }) }, sub.name));
-        }) }));
+// EC-305: nested-array depth, propagated via context so each array level can encode
+// its depth (rail colour + tint) without prop-drilling through FieldControl's many
+// branches. The detail editor renders top-level fields with the default depth 0.
+const ArrayDepthContext = createContext(0);
+const useArrayDepth = () => useContext(ArrayDepthContext);
+// (B) Depth-keyed visuals: a coloured left rail + subtle tint so three levels deep
+// no longer read as four identical borders. Literal classes so Tailwind emits them.
+const DEPTH_RAIL = ['border-l-border', 'border-l-primary/60', 'border-l-info/60', 'border-l-warning/60'];
+const DEPTH_TINT = ['', 'bg-muted/20', 'bg-muted/30', 'bg-muted/40'];
+const depthRail = (d) => DEPTH_RAIL[Math.min(d, DEPTH_RAIL.length - 1)];
+const depthTint = (d) => DEPTH_TINT[Math.min(d, DEPTH_TINT.length - 1)];
+// (C) An object array renders as a compact TABLE when every subfield is a scalar (a
+// flat row) and there are few enough columns to read; richer/nested object types stay
+// as cards with depth encoding (B). Conditional (function-hidden) subfields force the
+// card path — a table has no place to show/hide a column per row.
+const TABULAR_FIELD_TYPES = new Set(['text', 'number', 'boolean', 'select', 'date']);
+const MAX_TABLE_COLUMNS = 4;
+export function isTabularObjectType(field) {
+    return (field.fields.length > 0 &&
+        field.fields.length <= MAX_TABLE_COLUMNS &&
+        field.fields.every((f) => TABULAR_FIELD_TYPES.has(f.type) && typeof f.form?.hidden !== 'function'));
 }
 /**
- * Object / repeater field control (EC-253). `cardinality: 'one'` renders a single
- * nested form in a card; `'many'` renders an add/remove/reorder list of item cards.
- * Editing happens entirely inside the shared field form — no canvas escape (unlike
- * `blocks`), so props and document fields share this control.
+ * Shared array state for an object repeater (EC-253/EC-294/EC-305): the value-only
+ * items + a parallel stable-key list kept in lockstep through every structural op
+ * (the EC-253 C2 key↔value lock), add/remove/move, and native drag-reorder. Used by
+ * both the card list (B) and the table (C) so they behave identically.
  */
-function ObjectField({ field, value, onChange, readOnly, id, }) {
-    if (field.cardinality !== 'many') {
-        return (_jsx(Card, { className: "border-l-2 border-l-border p-3", children: _jsx(ObjectItemForm, { fields: field.fields, value: asRecord(value), readOnly: readOnly, idPrefix: id, onChange: onChange }) }));
-    }
+function useObjectArray(field, value, onChange) {
     const items = Array.isArray(value) ? value : [];
-    // Stable React keys for the value-only items (they carry no intrinsic id). Index
-    // keys would mis-associate a row's child/DOM state (an open relation/asset picker,
-    // focus) when rows are reordered or removed; we keep a parallel id list in lockstep
-    // with structural ops, reconciled by length when the array is replaced wholesale
-    // (e.g. switching documents). Edits keep the keys — only structure changes them.
     const seq = useRef(0);
     const keysRef = useRef([]);
     if (keysRef.current.length !== items.length) {
@@ -197,8 +188,6 @@ function ObjectField({ field, value, onChange, readOnly, id, }) {
         keysRef.current = nextKeys;
         onChange(nextItems);
     };
-    // The same (from,to) drives both the value array AND the parallel key array, so
-    // they stay aligned through a reorder (EC-253 C2 / EC-294).
     const move = (from, to) => commit(reorder(items, from, to), reorder(keys, from, to));
     const removeAt = (i) => commit(items.filter((_, j) => j !== i), keys.filter((_, j) => j !== i));
     const addItem = () => {
@@ -206,25 +195,15 @@ function ObjectField({ field, value, onChange, readOnly, id, }) {
         for (const sub of field.fields)
             if (sub.default !== undefined)
                 seed[sub.name] = sub.default;
-        commit([...items, seed], [...keys, seq.current++]);
+        const key = seq.current++;
+        commit([...items, seed], [...keys, key]);
+        return key;
     };
     const setItem = (i, updated) => {
         const nextItems = items.slice();
         nextItems[i] = updated;
         commit(nextItems, keys);
     };
-    // EC-294: per-item collapse (ephemeral disclosure state keyed by the stable key —
-    // not persisted) + native drag-to-reorder. ▲/▼ stay as the keyboard/a11y fallback.
-    const [collapsedKeys, setCollapsedKeys] = useState(() => new Set());
-    const toggleCollapsed = (key) => setCollapsedKeys((prev) => {
-        const next = new Set(prev);
-        if (next.has(key))
-            next.delete(key);
-        else
-            next.add(key);
-        return next;
-    });
-    const allCollapsed = items.length > 0 && keys.every((k) => collapsedKeys.has(k));
     const [dragIndex, setDragIndex] = useState(null);
     const [overIndex, setOverIndex] = useState(null);
     const endDrag = () => {
@@ -236,26 +215,135 @@ function ObjectField({ field, value, onChange, readOnly, id, }) {
             move(dragIndex, to);
         endDrag();
     };
-    return (_jsxs(Stack, { gap: "2", children: [items.length > 1 && !readOnly ? (_jsx(Row, { justify: "end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCollapsedKeys(allCollapsed ? new Set() : new Set(keys)), children: allCollapsed ? 'Expand all' : 'Collapse all' }) })) : null, items.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", children: "No items" })) : (items.map((item, i) => {
-                // keysRef is reconciled to items.length above, so keys[i] is always present;
-                // `?? i` only satisfies noUncheckedIndexedAccess (never taken at runtime).
-                const key = keys[i] ?? i;
-                const record = asRecord(item);
-                const isCollapsed = collapsedKeys.has(key);
-                return (_jsxs(Card, { onDragOver: (e) => {
-                        if (dragIndex === null)
-                            return;
-                        e.preventDefault();
-                        if (overIndex !== i)
-                            setOverIndex(i);
-                    }, onDrop: () => drop(i), className: cn('border-l-2 border-l-border p-0', dragIndex === i ? 'opacity-50' : '', overIndex === i && dragIndex !== null && dragIndex !== i
-                        ? 'border-l-primary ring-1 ring-primary/40'
-                        : ''), children: [_jsxs(Row, { className: "select-none border-b border-border/60 bg-muted/30 px-2 py-1.5", children: [!readOnly ? (_jsx("span", { draggable: true, onDragStart: (e) => {
-                                        e.dataTransfer.effectAllowed = 'move';
-                                        e.dataTransfer.setData('text/plain', String(i));
-                                        setDragIndex(i);
-                                    }, onDragEnd: endDrag, "aria-label": "Drag to reorder", className: "cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) })) : null, _jsxs("button", { type: "button", onClick: () => toggleCollapsed(key), "aria-expanded": !isCollapsed, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronDown, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', isCollapsed ? '-rotate-90' : ''), "aria-hidden": true }), _jsx(Text, { size: "sm", className: "min-w-0 truncate font-medium", children: objectItemSummary(field.fields, record, i) })] }), !readOnly ? (_jsxs(Row, { gap: "1", children: [_jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Move up", disabled: i === 0, onClick: () => move(i, i - 1), children: _jsx(ChevronUp, { className: "size-3" }) }), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Move down", disabled: i === items.length - 1, onClick: () => move(i, i + 1), children: _jsx(ChevronDown, { className: "size-3" }) }), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Remove item", onClick: () => removeAt(i), children: _jsx(Trash2, { className: "size-3" }) })] })) : null] }), !isCollapsed ? (_jsx("div", { className: "px-3 pb-3", children: _jsx(ObjectItemForm, { fields: field.fields, value: record, readOnly: readOnly, idPrefix: `${id}-${i}`, onChange: (updated) => setItem(i, updated) }) })) : null] }, key));
-            })), !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: addItem, children: [_jsx(Plus, { className: "size-3" }), " Add item"] })) : null] }));
+    return { items, keys, move, removeAt, addItem, setItem, dragIndex, overIndex, setDragIndex, setOverIndex, endDrag, drop };
+}
+/**
+ * (E) Chrome reduction: the per-row move/remove controls collapse into one hover/
+ * focus overflow menu, so a row reads as content, not a six-button toolbar. Drag is
+ * the primary reorder; the arrows stay here for keyboard/a11y.
+ */
+function ItemOverflowMenu({ index, count, onMove, onRemove, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Item actions", children: _jsx(MoreHorizontal, { className: "size-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: index === 0, onClick: () => onMove(index, index - 1), children: [_jsx(ChevronUp, {}), " Move up"] }), _jsxs(DropdownMenuItem, { disabled: index === count - 1, onClick: () => onMove(index, index + 1), children: [_jsx(ChevronDown, {}), " Move down"] }), _jsxs(DropdownMenuItem, { onClick: onRemove, children: [_jsx(Trash2, {}), " Remove"] })] })] }));
+}
+/**
+ * The nested subfield form for one object item (EC-253). Reuses {@link FieldControl}
+ * recursively, so any subfield type — including a nested object/repeater — works for
+ * free. Writing a subfield merges it back into the item and bubbles the new item up.
+ */
+function ObjectItemForm({ fields, value, onChange, readOnly, idPrefix, }) {
+    return (_jsx(Stack, { gap: "3", className: "mt-2", children: fields.map((sub) => {
+            // EC-273: a conditionally-hidden subfield (its predicate keys off the item's
+            // own sibling values) is omitted — e.g. a discriminated link's `href` shows
+            // only when `linkType === 'href'`. Re-evaluated as the item is edited.
+            if (isFieldHidden(sub, { values: value }))
+                return null;
+            const subId = `${idPrefix}-${sub.name}`;
+            return (_jsx(Field, { htmlFor: subId, hint: sub.form?.description, label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: fieldLabel(sub) }), sub.validation?.required ? _jsx("span", { className: "text-destructive", children: "*" }) : null] }), children: _jsx(FieldControl, { id: subId, field: sub, value: value[sub.name], readOnly: readOnly, onChange: (next) => {
+                        const updated = { ...value };
+                        if (next === undefined)
+                            delete updated[sub.name];
+                        else
+                            updated[sub.name] = next;
+                        onChange(updated);
+                    } }) }, sub.name));
+        }) }));
+}
+/**
+ * Object / repeater field control (EC-253), legibility-rebuilt (EC-305). A single
+ * object (`cardinality: 'one'`) renders a depth-encoded card; an array (`'many'`)
+ * dispatches by shape: a **flat** object type (all scalar subfields) → a compact
+ * editable TABLE (C); a richer/nested type → a card list with depth encoding (B),
+ * summary-first collapse (D), and reduced per-row chrome (E). Editing stays in the
+ * shared field form — no canvas escape (unlike `blocks`) — so props and document
+ * fields share this control. Depth flows via {@link ArrayDepthContext}.
+ */
+function ObjectField({ field, value, onChange, readOnly, id, }) {
+    const depth = useArrayDepth();
+    if (field.cardinality !== 'many') {
+        return (_jsx(Card, { className: cn('border-l-2 p-3', depthRail(depth), depthTint(depth)), children: _jsx(ArrayDepthContext.Provider, { value: depth + 1, children: _jsx(ObjectItemForm, { fields: field.fields, value: asRecord(value), readOnly: readOnly, idPrefix: id, onChange: onChange }) }) }));
+    }
+    const props = { field, value, onChange, readOnly, id, depth };
+    return isTabularObjectType(field) ? _jsx(ObjectTableField, { ...props }) : _jsx(ObjectCardList, { ...props });
+}
+/**
+ * (B + D + E) The card list for a nested/rich object array: depth-encoded cards
+ * (coloured rail + tint), items collapsed by default to a scannable summary outline
+ * (D), accordion expansion (open one → collapse siblings), and the per-row controls
+ * collapsed into one overflow menu (E). Drag-to-reorder; arrows live in the menu for
+ * a11y. Nested arrays render one depth deeper via the context provider.
+ */
+function ObjectCardList({ field, value, onChange, readOnly, id, depth }) {
+    const arr = useObjectArray(field, value, onChange);
+    const { items, keys } = arr;
+    // (D) Default COLLAPSED: track which keys are EXPANDED (empty = all collapsed).
+    // (B) Accordion: expanding one collapses the siblings.
+    const [expandedKeys, setExpandedKeys] = useState(() => new Set());
+    const toggle = (key) => setExpandedKeys((prev) => {
+        if (prev.has(key)) {
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+        }
+        return new Set([key]);
+    });
+    const allExpanded = items.length > 0 && keys.every((k) => expandedKeys.has(k));
+    const onAdd = () => setExpandedKeys(new Set([arr.addItem()]));
+    return (_jsx(ArrayDepthContext.Provider, { value: depth + 1, children: _jsxs(Stack, { gap: "2", children: [items.length > 1 && !readOnly ? (_jsx(Row, { justify: "end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setExpandedKeys(allExpanded ? new Set() : new Set(keys)), children: allExpanded ? 'Collapse all' : 'Expand all' }) })) : null, items.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", children: "No items" })) : (items.map((item, i) => {
+                    // keysRef is reconciled to items.length, so keys[i] is always present;
+                    // `?? i` only satisfies noUncheckedIndexedAccess (never taken at runtime).
+                    const key = keys[i] ?? i;
+                    const record = asRecord(item);
+                    const isExpanded = expandedKeys.has(key);
+                    return (_jsxs(Card, { onDragOver: (e) => {
+                            if (arr.dragIndex === null)
+                                return;
+                            e.preventDefault();
+                            if (arr.overIndex !== i)
+                                arr.setOverIndex(i);
+                        }, onDrop: () => arr.drop(i), className: cn('border-l-2 p-0', depthRail(depth), depthTint(depth), arr.dragIndex === i ? 'opacity-50' : '', arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i
+                            ? 'border-l-primary ring-1 ring-primary/40'
+                            : ''), children: [_jsxs(Row, { className: "select-none border-b border-border/60 bg-muted/20 px-2 py-1.5", children: [!readOnly ? (_jsx("span", { draggable: true, onDragStart: (e) => {
+                                            e.dataTransfer.effectAllowed = 'move';
+                                            e.dataTransfer.setData('text/plain', String(i));
+                                            arr.setDragIndex(i);
+                                        }, onDragEnd: arr.endDrag, "aria-label": "Drag to reorder", className: "cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) })) : null, _jsxs("button", { type: "button", onClick: () => toggle(key), "aria-expanded": isExpanded, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronDown, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', isExpanded ? '' : '-rotate-90'), "aria-hidden": true }), _jsx(Text, { size: "sm", className: "min-w-0 truncate font-medium", children: objectItemSummary(field.fields, record, i) })] }), !readOnly ? (_jsx(ItemOverflowMenu, { index: i, count: items.length, onMove: arr.move, onRemove: () => arr.removeAt(i) })) : null] }), isExpanded ? (_jsx("div", { className: "px-3 pb-3", children: _jsx(ObjectItemForm, { fields: field.fields, value: record, readOnly: readOnly, idPrefix: `${id}-${i}`, onChange: (updated) => arr.setItem(i, updated) }) })) : null] }, key));
+                })), !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onAdd, children: [_jsx(Plus, { className: "size-3" }), " Add item"] })) : null] }) }));
+}
+/**
+ * (C) A compact editable table for a FLAT object array — columns are the scalar
+ * subfields, one row per item. Kills the card-stack sprawl for the commonest case
+ * (option lists, opening hours, social links). Drag-reorder + an overflow menu per
+ * row; cells reuse {@link FieldControl} so each subfield keeps its native control.
+ */
+function ObjectTableField({ field, value, onChange, readOnly, id, depth }) {
+    const arr = useObjectArray(field, value, onChange);
+    const { items, keys } = arr;
+    const cols = field.fields;
+    const span = cols.length + (readOnly ? 0 : 2);
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-md border border-border border-l-2', depthRail(depth), depthTint(depth)), children: [_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/30 text-left", children: [!readOnly ? _jsx("th", { className: "w-7" }) : null, cols.map((c) => (_jsxs("th", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [fieldLabel(c), c.validation?.required ? _jsx("span", { className: "text-destructive", children: " *" }) : null] }, c.name))), !readOnly ? _jsx("th", { className: "w-9" }) : null] }) }), _jsx("tbody", { children: items.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: span, className: "px-2 py-2 text-muted-foreground", children: _jsx(Text, { size: "sm", tone: "subtle", children: "No items" }) }) })) : (items.map((item, i) => {
+                            const key = keys[i] ?? i;
+                            const record = asRecord(item);
+                            return (_jsxs("tr", { onDragOver: (e) => {
+                                    if (arr.dragIndex === null)
+                                        return;
+                                    e.preventDefault();
+                                    if (arr.overIndex !== i)
+                                        arr.setOverIndex(i);
+                                }, onDrop: () => arr.drop(i), className: cn('border-b border-border/40 align-top last:border-0', arr.dragIndex === i ? 'opacity-50' : '', arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i
+                                    ? 'bg-primary/5'
+                                    : ''), children: [!readOnly ? (_jsx("td", { className: "px-1 py-1", children: _jsx("span", { draggable: true, onDragStart: (e) => {
+                                                e.dataTransfer.effectAllowed = 'move';
+                                                e.dataTransfer.setData('text/plain', String(i));
+                                                arr.setDragIndex(i);
+                                            }, onDragEnd: arr.endDrag, "aria-label": "Drag to reorder", className: "inline-flex cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) }) })) : null, cols.map((c) => (_jsx("td", { className: "px-2 py-1", children: _jsx(FieldControl, { id: `${id}-${i}-${c.name}`, field: c, value: record[c.name], readOnly: readOnly, onChange: (next) => {
+                                                const updated = { ...record };
+                                                if (next === undefined)
+                                                    delete updated[c.name];
+                                                else
+                                                    updated[c.name] = next;
+                                                arr.setItem(i, updated);
+                                            } }) }, c.name))), !readOnly ? (_jsx("td", { className: "px-1 py-1", children: _jsx(ItemOverflowMenu, { index: i, count: items.length, onMove: arr.move, onRemove: () => arr.removeAt(i) }) })) : null] }, key));
+                        })) })] }), !readOnly ? (_jsx("div", { className: "border-t border-border/60 p-1.5", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => arr.addItem(), children: [_jsx(Plus, { className: "size-3" }), " Add"] }) })) : null] }));
 }
 function RelationField({ field, value, onChange, readOnly, }) {
     const cms = useCms();