@elytracms/studio 0.0.57 → 0.0.59

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

@@ -1,27 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AlertTriangle, ChevronDown, ChevronUp, GripVertical, ImagePlus, Link2, MoreHorizontal, Pencil, Plus, RotateCcw, RotateCw, SlidersHorizontal, Trash2, Upload, X } from 'lucide-react';
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, Link2, Pencil, Plus, RotateCw, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router';
-import { BUILTIN_FIELD_CONTROLS, applySlugify, assetAcceptAttr, assetMatchesAccept, assetNode, assetSubfieldsOf, describeAccept, descendantIds, findSlugCollision, isFieldHidden, parentRelationField, readAssetId, resolveSlugPath, resolveUrlSegments, slugSourceValue, } from '@elytracms/core/cms-core';
+import { BUILTIN_FIELD_CONTROLS, applySlugify, descendantIds, findSlugCollision, parentRelationField, resolveSlugPath, resolveUrlSegments, slugSourceValue, } from '@elytracms/core/cms-core';
 import { resolveDeploymentRoutes } from '@elytracms/studio/lib/workspace';
-import { Button, Card, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, Input, Row, RowItem, Select, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { Button, Input, Row, RowItem, Select, Stack, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { activeLocaleValues } from '@elytracms/studio/lib/locale';
-import { applyAssetSelection, assetIdsOf, singleAssetIdOf } from '../assets/asset-selection.js';
-import { useOptionalAssets } from '../assets/assets-store.js';
-import { AssetThumb, FocalCropPreviews, FocalPointPicker, useAssetRecord } from '../assets/asset-thumb.js';
-import { newlyAddedAssetIds } from '../assets/focal-point.js';
-import { assetMetaFieldsOf, pruneMeta } from '../assets/asset-metadata.js';
-import { fieldLabel } from './cms-labels.js';
 import { useCollectionView } from '../collection-view/collection-view-context.js';
-import { useFieldDensity } from './field-density.js';
 import { useOptionalDocumentEditor } from './document-editor-context.js';
 import { toRefArray } from './cell.js';
 import { RelationPicker } from './relation-picker.js';
-import { AssetPicker } from './asset-picker.js';
 import { RichTextEditor } from './rich-text/index.js';
 import { DocumentUrlSegment } from './document-url-path.js';
+import { AssetField } from './asset-field.js';
+import { SegmentedOptions } from './field-control-lib.js';
+import { ObjectField } from './object-array-field.js';
 import { FieldRendererBoundary, FieldRendererIssue, useFieldRenderers, } from './field-renderer.js';
 /**
  * The document-editor field control. Resolves a project's custom renderer by the
@@ -32,6 +27,12 @@ import { FieldRendererBoundary, FieldRendererIssue, useFieldRenderers, } from '.
  * naming a control with NO renderer and NO built-in name (a typo) shows the
  * built-in with a loud issue — never a silent fall-through; otherwise the built-in
  * renders alone.
+ *
+ * EC-330 split: the asset-field family lives in `asset-field.tsx`, the object /
+ * repeater editors in `object-array-field.tsx`, and their pure companions
+ * (reorder/summary/depth/table decisions, the `options` segmented control) in
+ * `field-control-lib.tsx` — this file keeps the dispatcher plus the slug and
+ * relation controls.
  */
 export function FieldControl(props) {
     const renderers = useFieldRenderers();
@@ -107,21 +108,6 @@ function BuiltInFieldControl({ field, value, onChange, readOnly, id }) {
             return (_jsx(Input, { id: id, disabled: readOnly, value: typeof value === 'string' ? value : '', onChange: (e) => onChange(e.target.value || undefined) }));
     }
 }
-/**
- * EC-295: the `options` control — a `select` shown as inline segmented buttons
- * (`[[Page]] [URL] [File]`) instead of a dropdown. Engine built-in (no consumer
- * registration); single-select only. Each option shows `label ?? value` and a
- * `title` tooltip from the option's `description`; the field `default` + `readOnly`
- * flow through the shared form. Picks one — to allow an empty/unset value use the
- * default dropdown control.
- */
-export function SegmentedOptions({ field, value, onChange, readOnly, id, }) {
-    const current = typeof value === 'string' ? value : '';
-    return (_jsx(Row, { gap: "1", wrap: true, role: "radiogroup", id: id, "aria-label": fieldLabel(field), children: field.options.map((opt) => {
-            const active = current === opt.value;
-            return (_jsx(Button, { type: "button", variant: active ? 'default' : 'outline', size: "sm", role: "radio", "aria-checked": active, title: localizedLabel(opt.description) || undefined, disabled: readOnly, onClick: () => onChange(opt.value), children: localizedLabel(opt.label, opt.value) }, opt.value));
-        }) }));
-}
 /**
  * EC-315 — the smart slug / URL-segment control. A `text` field named `slug` (or any
  * `text` field with `form.control: 'slug'`) renders here instead of a bare input:
@@ -265,261 +251,6 @@ function SlugField({ field, value, onChange, readOnly, id, }) {
         (contextSegments.length > 0 ? `/${contextSegments.map((s) => s.text).join('/')}/` : '/');
     return (_jsxs(Stack, { gap: "2", children: [parts ? (_jsxs(Row, { gap: "1", align: "center", "data-testid": "slug-composed-path", children: [_jsx("span", { className: "inline-flex min-w-0 shrink-0 items-center rounded bg-muted/40 px-1.5 py-1 font-mono text-xs text-muted-foreground ring-1 ring-inset ring-border", title: prefixTitle, "data-testid": "slug-prefix", children: contextSegments.length === 0 ? (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground/50", children: "/" })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "text-muted-foreground/50", children: contextSegments.length > 1 ? '…/' : '/' }), lastContext ? (_jsx(DocumentUrlSegment, { segment: lastContext, projectId: editor?.projectId, collectionId: source.collectionId })) : null, _jsx("span", { "aria-hidden": true, className: "text-muted-foreground/50", children: "/" })] })) }), input, regenerateButton] })) : (_jsxs(Row, { gap: "1", align: "center", children: [input, regenerateButton] })), collisionMessage ? (_jsxs(Row, { gap: "1", align: "center", "data-testid": "slug-collision", children: [_jsx(AlertTriangle, { className: "size-3.5 shrink-0 text-warning", "aria-hidden": true }), _jsx(Text, { size: "xs", tone: "muted", children: collisionMessage })] })) : null] }));
 }
-function asRecord(value) {
-    return value !== null && typeof value === 'object' && !Array.isArray(value)
-        ? value
-        : {};
-}
-/**
- * Move `from` → `to`, returning a NEW array (all elements preserved). The repeater
- * applies the same `(from, to)` to its value array AND its parallel stable-key array,
- * so the two stay aligned through a reorder — a row's child/DOM state (an open
- * relation/asset picker, focus) never mis-associates (EC-253 C2, EC-294).
- */
-export function reorder(list, from, to) {
-    const next = list.slice();
-    const [moved] = next.splice(from, 1);
-    if (moved !== undefined)
-        next.splice(to, 0, moved);
-    return next;
-}
-const SUMMARY_PREFERRED_FIELDS = ['title', 'label', 'name', 'heading', 'text', 'linkType'];
-/**
- * A scannable one-line summary for a collapsed repeater item (EC-294): the first
- * meaningful scalar subfield value — preferring title-ish field names — else `#n`.
- * Pure (no store): summarises from the item's own scalar values, so it works for
- * any object shape without resolving relations/assets.
- */
-export function objectItemSummary(fields, item, index) {
-    const scalar = (name) => {
-        const v = item[name];
-        if (typeof v === 'string' && v.trim())
-            return v.trim();
-        if (typeof v === 'number' || typeof v === 'boolean')
-            return String(v);
-        return null;
-    };
-    const names = fields.map((f) => f.name);
-    for (const name of SUMMARY_PREFERRED_FIELDS) {
-        if (names.includes(name)) {
-            const s = scalar(name);
-            if (s)
-                return truncateSummary(s);
-        }
-    }
-    for (const name of names) {
-        const s = scalar(name);
-        if (s)
-            return truncateSummary(s);
-    }
-    return `#${index + 1}`;
-}
-function truncateSummary(s, max = 60) {
-    return s.length > max ? `${s.slice(0, max - 1)}…` : s;
-}
-// 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 + a matching faint tint, DISTINCT
-// per level so nesting reads at a glance. The outermost array (depth 0) starts at
-// the brand primary — no more neutral, un-encoded first level — then a fixed
-// high-contrast rotation whose adjacent hues never collide (primary→amber→green→red;
-// note `info` is a near-primary blue, so it is deliberately NOT adjacent to primary).
-// It cycles (mod) so pathological depth still renders. Literal classes so Tailwind emits them.
-const DEPTH_RAIL = ['border-l-primary', 'border-l-warning', 'border-l-success', 'border-l-destructive'];
-const DEPTH_TINT = ['bg-primary/5', 'bg-warning/5', 'bg-success/5', 'bg-destructive/5'];
-// `d` is always ≥ 0, so `d % length` is in-bounds — the assertion is sound and gives
-// callers a definite `string` (cn tolerates undefined, but tests read the value).
-export const depthRail = (d) => DEPTH_RAIL[d % DEPTH_RAIL.length];
-export const depthTint = (d) => DEPTH_TINT[d % DEPTH_TINT.length];
-// (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'));
-}
-/**
- * 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 useObjectArray(field, value, onChange) {
-    const items = Array.isArray(value) ? value : [];
-    const seq = useRef(0);
-    const keysRef = useRef([]);
-    if (keysRef.current.length !== items.length) {
-        keysRef.current = items.map((_, i) => keysRef.current[i] ?? seq.current++);
-    }
-    const keys = keysRef.current;
-    const commit = (nextItems, nextKeys) => {
-        keysRef.current = nextKeys;
-        onChange(nextItems);
-    };
-    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 = () => {
-        const seed = {};
-        for (const sub of field.fields)
-            if (sub.default !== undefined)
-                seed[sub.name] = sub.default;
-        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);
-    };
-    const [dragIndex, setDragIndex] = useState(null);
-    const [overIndex, setOverIndex] = useState(null);
-    const endDrag = () => {
-        setDragIndex(null);
-        setOverIndex(null);
-    };
-    const drop = (to) => {
-        if (dragIndex !== null && dragIndex !== to)
-            move(dragIndex, to);
-        endDrag();
-    };
-    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": translate('cms.field.itemActions'), 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, {}), " ", translate('cms.field.moveUp')] }), _jsxs(DropdownMenuItem, { disabled: index === count - 1, onClick: () => onMove(index, index + 1), children: [_jsx(ChevronDown, {}), " ", translate('cms.field.moveDown')] }), _jsxs(DropdownMenuItem, { onClick: onRemove, children: [_jsx(Trash2, {}), " ", translate('common.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: localizedLabel(sub.form?.description) || undefined, 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 (`multiple: false`) 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.multiple === false) {
-        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: translate(allExpanded ? 'cms.field.collapseAll' : 'cms.field.expandAll') }) })) : null, items.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", children: translate('cms.field.noItems') })) : (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": translate('cms.field.dragToReorder'), 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" }), " ", translate('cms.field.addItem')] })) : 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: translate('cms.field.noItems') }) }) })) : (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": translate('cms.field.dragToReorder'), 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" }), " ", translate('common.add')] }) })) : null] }));
-}
 function RelationField({ field, value, onChange, readOnly, }) {
     const source = useCollectionView();
     const editor = useOptionalDocumentEditor();
@@ -553,278 +284,4 @@ function RelationField({ field, value, onChange, readOnly, }) {
                     return (_jsx(RowItem, { "data-testid": "relation-value", actions: !readOnly ? (_jsxs(_Fragment, { children: [field.multiple === false ? (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": translate('cms.relation.change'), title: translate('cms.relation.change'), onClick: () => setOpen(true), children: _jsx(Pencil, {}) })) : null, _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": translate('common.remove'), title: translate('common.remove'), className: "hover:text-destructive", onClick: () => apply(refs.filter((r) => r.id !== ref.id)), children: _jsx(X, {}) })] })) : undefined, children: projectId ? (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.cmsDocument(ref.collection, ref.id) }, title: translate('cms.relation.openTitle', { title }), className: "text-sm font-medium hover:text-primary hover:underline", children: label })) : (_jsx(Text, { as: "span", size: "sm", weight: "medium", children: label })) }, `${ref.id}-${i}`));
                 }) })) : null, !readOnly && (refs.length === 0 || field.multiple) ? (_jsx(Row, { children: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(Plus, {}), " ", refs.length === 0 ? translate('cms.relation.pick') : translate('common.add')] }) })) : null, _jsx(RelationPicker, { targetCollection: field.target, multiple: field.multiple, value: refs, open: open, onOpenChange: setOpen, onChange: apply, excludeIds: excludeIds })] }));
 }
-/**
- * The asset field (EC-152 + EC-248). Beyond picking from the library it now shows
- * a focal-point-aware preview, uploads directly from the field (reusing the EC-152
- * upload path — no parallel uploader), and edits the selected image's alt + focal
- * point inline (persisted on the asset document, where delivery reads them, EC-230).
- * With no `<AssetsProvider>` (fixtures/playground) it degrades to the labelled-badge
- * picker — no preview/upload — so it stays usable without a real library.
- */
-function AssetField({ field, value, onChange, readOnly, }) {
-    const source = useCollectionView();
-    const assets = useOptionalAssets();
-    const density = useFieldDensity();
-    const compact = density === 'compact';
-    const [open, setOpen] = useState(false);
-    const [editing, setEditing] = useState(false);
-    const [dragging, setDragging] = useState(false);
-    // Names of files a drop/pick rejected against the field's `accept` (EC-301) — shown
-    // as a transient inline issue, cleared on the next valid upload. Never a silent drop.
-    const [rejected, setRejected] = useState([]);
-    // Asset ids known when an upload-from-field started; the effect below diffs the
-    // library against it to learn the new id (the `upload()` API returns nothing).
-    const pendingRef = useRef(null);
-    const assetCollectionId = source.assetCollectionId ?? 'asset';
-    const many = field.multiple;
-    const ids = many ? assetIdsOf(value) : [];
-    const single = !many ? singleAssetIdOf(value) : null;
-    // EC-301 per-use sub-fields: with `field.fields` the value stores asset ENVELOPES
-    // carrying the sub-field siblings (`{ type:'asset', id, caption }`); without them it
-    // stays bare ids (self-typed on save). Picks/edits preserve a placement's sub-fields.
-    const subFields = field.fields ?? [];
-    const hasSub = subFields.length > 0;
-    // The raw `many` entries (envelopes or bare ids), index-aligned with `ids`, so each
-    // gallery item can read/write its own sub-fields.
-    const entries = many && Array.isArray(value) ? value : [];
-    const libraryIds = useMemo(() => (assets?.status === 'ready' ? assets.assets.map((a) => a.id) : []), [assets]);
-    // Auto-select an asset uploaded FROM this field once it lands in the library.
-    useEffect(() => {
-        if (!pendingRef.current)
-            return;
-        const added = newlyAddedAssetIds(pendingRef.current, libraryIds);
-        if (added.length === 0)
-            return;
-        pendingRef.current = null;
-        if (many) {
-            const current = Array.isArray(value) ? value : [];
-            onChange([...current, ...added.map((id) => (hasSub ? assetNode(id) : id))]);
-        }
-        else {
-            onChange(hasSub ? assetNode(added[0], assetSubfieldsOf(value)) : applyAssetSelection(value, added[0], false));
-        }
-        // Reacts to the library set growing (an upload landing), not to unrelated
-        // value edits — `value`/`onChange` are read from the closure on purpose.
-    }, [libraryIds, many, hasSub, onChange, value]);
-    function uploadFiles(files) {
-        if (!assets || files.length === 0)
-            return;
-        // EC-301: a drag-drop bypasses the file dialog's `accept` filter — re-check each
-        // file against the field's `accept` and surface a visible issue for the rejects
-        // instead of silently uploading the wrong kind.
-        const ok = [];
-        const bad = [];
-        for (const file of files) {
-            if (assetMatchesAccept({ contentType: file.type, filename: file.name }, field.accept))
-                ok.push(file);
-            else
-                bad.push(file.name);
-        }
-        setRejected(bad);
-        if (ok.length === 0)
-            return;
-        // Remember the library set so the effect above can learn the new id and
-        // auto-select it once the upload lands (the upload API returns nothing).
-        pendingRef.current = new Set(libraryIds);
-        assets.upload(ok);
-    }
-    // Apply a picked asset id, preserving a placement's per-use sub-fields (EC-301).
-    // Without sub-fields it stays the plain id-list behaviour (self-typed on save).
-    function applyPicked(picked) {
-        if (!hasSub) {
-            onChange(applyAssetSelection(value, picked, field.multiple));
-            return;
-        }
-        if (many) {
-            if (picked === null || entries.some((e) => readAssetId(e) === picked))
-                return;
-            onChange([...entries, assetNode(picked)]);
-        }
-        else {
-            onChange(picked ? assetNode(picked, assetSubfieldsOf(value)) : undefined);
-        }
-    }
-    const canUpload = !readOnly && assets !== null;
-    // Drag-to-upload onto the field (EC-301): a depth counter keeps the overlay
-    // steady as the pointer crosses child element boundaries. `dragenter`/`dragleave`
-    // fire per descendant, so toggling on a bare `dragleave` blinks constantly; we
-    // only hide the overlay when the counter returns to zero (the pointer has truly
-    // left the field). The overlay is pointer-events-none, so it never fires its own
-    // enter/leave to confuse the count.
-    const dragDepth = useRef(0);
-    function onDragEnter(e) {
-        if (!canUpload)
-            return;
-        e.preventDefault();
-        dragDepth.current += 1;
-        if (!dragging)
-            setDragging(true);
-    }
-    function onDragOver(e) {
-        if (!canUpload)
-            return;
-        e.preventDefault(); // required so a drop is allowed
-    }
-    function onDragLeave() {
-        if (!canUpload)
-            return;
-        dragDepth.current -= 1;
-        if (dragDepth.current <= 0) {
-            dragDepth.current = 0;
-            setDragging(false);
-        }
-    }
-    function onDrop(e) {
-        if (!canUpload)
-            return;
-        e.preventDefault();
-        dragDepth.current = 0;
-        setDragging(false);
-        uploadFiles(Array.from(e.dataTransfer.files));
-    }
-    // While the picker is open the field is behind the modal, so any drop is happening
-    // INSIDE the dialog — detach the field's drag handlers entirely so a drop there can
-    // only be handled by the picker, never double-counted by the field too (EC-301). This
-    // is the belt to the picker's stopPropagation braces: the field cannot react at all.
-    const dragProps = canUpload && !open ? { onDragEnter, onDragOver, onDragLeave, onDrop } : {};
-    const selectButton = !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(ImagePlus, {}), " ", translate('common.select')] })) : null;
-    return (_jsxs(Stack, { gap: "2", className: cn('relative rounded-lg transition-shadow', dragging && 'ring-2 ring-primary ring-offset-2 ring-offset-background'), ...dragProps, children: [many && hasSub ? (_jsxs(Stack, { gap: "2", children: [entries.length > 0 ? (_jsx(Stack, { gap: "2", children: entries.map((entry, i) => {
-                            const aid = readAssetId(entry);
-                            if (!aid)
-                                return null;
-                            return (_jsx(AssetGalleryItem, { assetId: aid, collectionId: assetCollectionId, fields: subFields, value: assetSubfieldsOf(entry), readOnly: readOnly, idPrefix: `asset-${i}`, onChangeSubs: (next) => {
-                                    const nextEntries = entries.slice();
-                                    nextEntries[i] = assetNode(aid, next);
-                                    onChange(nextEntries);
-                                }, onRemove: readOnly ? undefined : () => onChange(entries.filter((_, j) => j !== i)) }, `${aid}-${i}`));
-                        }) })) : (_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, onSelect: () => setOpen(true) })), _jsx(Row, { gap: "2", wrap: true, align: "center", children: selectButton })] })) : many ? (_jsxs(Stack, { gap: "2", children: [ids.length > 0 ? (_jsx("div", { className: cn('grid gap-2', compact ? 'grid-cols-2' : 'grid-cols-3 sm:grid-cols-4'), children: ids.map((aid, i) => (_jsx(AssetChip, { assetId: aid, collectionId: assetCollectionId, onRemove: readOnly ? undefined : () => onChange(ids.filter((x) => x !== aid)) }, `${aid}-${i}`))) })) : (_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, onSelect: () => setOpen(true) })), _jsx(Row, { gap: "2", wrap: true, align: "center", children: selectButton })] })) : single && hasSub ? (_jsx(Card, { className: "border-l-2 border-l-border p-3", children: _jsxs(Stack, { gap: "3", children: [_jsx(AssetSinglePreview, { assetId: single, compact: compact, readOnly: readOnly, hasLibrary: assets !== null, fallbackTitle: source.titleOf({ collection: assetCollectionId, id: single }), selectButton: selectButton, onEdit: () => setEditing(true), onRemove: () => onChange(applyAssetSelection(value, null, field.multiple)) }), _jsx("div", { className: "border-t border-border/60 pt-3", children: _jsx(ObjectItemForm, { fields: subFields, value: assetSubfieldsOf(value), readOnly: readOnly, idPrefix: "asset-sub", onChange: (next) => onChange(assetNode(single, next)) }) })] }) })) : single ? (_jsx(AssetSinglePreview, { assetId: single, compact: compact, readOnly: readOnly, hasLibrary: assets !== null, fallbackTitle: source.titleOf({ collection: assetCollectionId, id: single }), selectButton: selectButton, onEdit: () => setEditing(true), onRemove: () => onChange(applyAssetSelection(value, null, field.multiple)) })) : (_jsxs(Stack, { gap: "2", children: [_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, onSelect: () => setOpen(true) }), _jsx(Row, { gap: "2", wrap: true, align: "center", children: selectButton })] })), !many && single && assets ? (_jsx(AssetOptionsDialog, { assetId: single, readOnly: readOnly, open: editing, onOpenChange: setEditing })) : null, _jsx(AssetPicker, { value: single, open: open, onOpenChange: setOpen, accept: assetAcceptAttr(field.accept), onChange: applyPicked }), rejected.length > 0 ? (_jsxs(Row, { gap: "2", align: "center", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0 text-warning" }), _jsx(Text, { size: "xs", tone: "muted", children: rejected.length === 1
-                            ? translate('cms.asset.rejected.one', {
-                                name: rejected[0],
-                                types: describeAccept(field.accept),
-                            })
-                            : translate('cms.asset.rejected.other', {
-                                count: rejected.length,
-                                types: describeAccept(field.accept),
-                            }) })] })) : null, dragging ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-lg border-2 border-dashed border-primary bg-background/85", children: _jsxs(Row, { gap: "2", align: "center", children: [_jsx(Upload, { className: "size-4 text-primary" }), _jsx(Text, { size: "sm", className: "font-medium", children: translate('cms.asset.dropToUpload') })] }) })) : null] }));
-}
-/** Empty-state placeholder shown when an asset field has no selection (EC-301). */
-function EmptyAssetState({ compact, canUpload, onSelect, }) {
-    return (_jsxs("button", { type: "button", onClick: onSelect, className: cn('grid w-full place-items-center gap-1 rounded-lg border border-dashed border-border bg-muted/30 text-center text-muted-foreground transition-colors hover:bg-muted/60', compact ? 'aspect-video' : 'aspect-[5/2]'), children: [_jsx(ImagePlus, { className: "size-6", "aria-hidden": true }), _jsx(Text, { size: "xs", tone: "muted", children: canUpload ? translate('cms.asset.selectOrDrop') : translate('cms.asset.selectAsset') })] }));
-}
-/** A large focal-aware preview of the selected asset (EC-301). */
-function AssetPreview({ assetId }) {
-    const record = useAssetRecord(assetId);
-    return _jsx(AssetThumb, { record: record, className: "aspect-[4/3] w-full" });
-}
-/** Filename + dimensions/type for the selected asset — the id is never shown (EC-301). */
-function AssetInfo({ assetId, fallbackTitle }) {
-    const record = useAssetRecord(assetId);
-    const name = record?.title ?? record?.filename ?? fallbackTitle ?? assetId;
-    const dims = record?.width && record?.height ? `${record.width}×${record.height}` : null;
-    const kind = record?.contentType?.split('/')[1]?.toUpperCase();
-    const meta = [dims, kind].filter(Boolean).join(' · ');
-    return (_jsxs(Stack, { gap: "1", children: [_jsx(Text, { size: "sm", className: "truncate font-medium", title: name, children: name }), meta ? (_jsx(Text, { size: "xs", tone: "subtle", children: meta })) : null] }));
-}
-/**
- * The selected image's alt text shown in the field (EC-301) — what an editor most
- * wants at a glance; edited in the options dialog. Reads `meta.alt` with the legacy
- * `alt` column as fallback, matching delivery.
- */
-function AssetAltLine({ assetId }) {
-    const record = useAssetRecord(assetId);
-    const metaAlt = typeof record?.meta?.alt === 'string' ? record.meta.alt : undefined;
-    const alt = metaAlt ?? record?.alt;
-    return (_jsxs(Row, { gap: "1", align: "baseline", className: "min-w-0", children: [_jsx(Text, { size: "xs", tone: "subtle", className: "shrink-0", children: translate('cms.asset.altLabel') }), _jsx(Text, { size: "xs", tone: alt ? 'muted' : 'subtle', className: cn('min-w-0 truncate', !alt && 'italic'), title: alt ?? undefined, children: alt || translate('cms.asset.notSet') })] }));
-}
-/** A single asset reference: focal-aware thumbnail + title, with an optional remove. */
-function AssetChip({ assetId, collectionId, onRemove, }) {
-    const source = useCollectionView();
-    const record = useAssetRecord(assetId);
-    const title = source.titleOf({ collection: collectionId, id: assetId });
-    return (_jsxs("div", { className: "group relative overflow-hidden rounded-lg border border-border bg-muted/40", children: [_jsx(AssetThumb, { record: record, alt: title, className: "aspect-square w-full rounded-none border-0" }), _jsxs(Row, { gap: "1", align: "center", className: "px-2 py-1", children: [_jsx(Text, { size: "xs", tone: "subtle", className: "min-w-0 flex-1 truncate", title: title, children: title }), onRemove ? (_jsx("button", { type: "button", "aria-label": translate('common.remove'), onClick: onRemove, className: "text-muted-foreground hover:text-destructive", children: _jsx(X, { className: "size-3.5" }) })) : null] })] }));
-}
-/**
- * The selected single asset's preview row (EC-301): large focal-aware preview + info
- * column (filename/dimensions, Select/Edit/Remove, alt). Extracted so it renders either
- * bare (a plain asset field) or inside the grouping card when the field carries per-use
- * sub-fields — the asset + its fields then read as one unit.
- */
-function AssetSinglePreview({ assetId, compact, readOnly, hasLibrary, fallbackTitle, selectButton, onEdit, onRemove, }) {
-    return (_jsxs("div", { className: compact ? 'flex flex-col gap-3' : 'flex gap-4', children: [_jsx("div", { className: compact ? 'w-full' : 'w-1/2 shrink-0', children: _jsx(AssetPreview, { assetId: assetId }) }), _jsxs(Stack, { gap: "2", className: cn('min-w-0', !compact && 'flex-1'), children: [_jsx(AssetInfo, { assetId: assetId, fallbackTitle: fallbackTitle }), !readOnly ? (_jsxs(Row, { gap: "2", wrap: true, align: "center", children: [selectButton, hasLibrary ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [_jsx(SlidersHorizontal, {}), " ", translate('common.edit')] })) : null, _jsxs(Button, { variant: "ghost", size: "sm", onClick: onRemove, children: [_jsx(Trash2, {}), " ", translate('common.remove')] })] })) : null, _jsx(AssetAltLine, { assetId: assetId })] })] }));
-}
-/**
- * One gallery placement when a `many` asset field declares per-use sub-fields (EC-301):
- * a thumbnail + filename + remove header over the placement's own sub-field form,
- * modelled on a repeater item card so a gallery's placements read as grouped units.
- */
-function AssetGalleryItem({ assetId, collectionId, fields, value, onChangeSubs, onRemove, readOnly, idPrefix, }) {
-    const source = useCollectionView();
-    const record = useAssetRecord(assetId);
-    const title = source.titleOf({ collection: collectionId, id: assetId });
-    return (_jsxs(Card, { className: "border-l-2 border-l-border p-0", children: [_jsxs(Row, { gap: "2", align: "center", className: "border-b border-border/60 bg-muted/30 px-2 py-1.5", children: [_jsx(AssetThumb, { record: record, alt: title, className: "size-10 shrink-0" }), _jsx(Text, { size: "sm", className: "min-w-0 flex-1 truncate font-medium", title: title, children: title }), onRemove ? (_jsx(Button, { variant: "ghost", size: "sm", "aria-label": translate('common.remove'), onClick: onRemove, children: _jsx(Trash2, { className: "size-3.5" }) })) : null] }), _jsx("div", { className: "px-3 pb-3", children: _jsx(ObjectItemForm, { fields: fields, value: value, onChange: onChangeSubs, readOnly: readOnly, idPrefix: idPrefix }) })] }));
-}
-/**
- * The image options dialog (EC-301): the focal point (engine-special visual
- * control) + the asset's **schema-driven** metadata, rendered from the
- * `kind:'asset'` collection's `fields` through the same generic field engine
- * documents use — so a project declares asset metadata (alt, copyright, credit, …)
- * in code, not hardcoded here. Edits persist on the asset, shared across every use.
- * Metadata is buffered locally and committed once on close (one write); the focal
- * point commits immediately (it drives a live visual). No-ops without a library.
- */
-function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, }) {
-    const source = useCollectionView();
-    const assets = useOptionalAssets();
-    const record = useAssetRecord(assetId);
-    const metaFields = useMemo(() => {
-        const assetCollectionId = source.assetCollectionId ?? 'asset';
-        const collection = source.collections.find((c) => c.id === assetCollectionId);
-        return collection ? assetMetaFieldsOf(collection) : [];
-    }, [source]);
-    // Local edit buffers, seeded once per open from the record (so an external edit
-    // still wins between opens). Metadata is non-localized in v1 (the asset
-    // resolution path is locale-agnostic) — localized asset metadata is a follow-up.
-    const [meta, setMeta] = useState({});
-    const [focal, setFocal] = useState(undefined);
-    const dirty = useRef(false);
-    const seeded = useRef(false);
-    useEffect(() => {
-        if (!open) {
-            seeded.current = false;
-            return;
-        }
-        if (seeded.current || !record)
-            return;
-        // Seed from the meta bag, but lift the legacy `alt` column in when meta lacks
-        // it (EC-301 transition): a not-yet-migrated asset still shows its alt, and
-        // saving writes it into meta — a lazy migration-on-edit, matching delivery's
-        // `meta.alt ?? record.alt` read fallback.
-        const seedMeta = { ...(record.alt !== undefined ? { alt: record.alt } : {}), ...(record.meta ?? {}) };
-        setMeta(seedMeta);
-        setFocal(record.focalPoint);
-        dirty.current = false;
-        seeded.current = true;
-    }, [open, record]);
-    function handleOpenChange(next) {
-        // Commit the buffered metadata once, on close (one write, not per keystroke).
-        if (!next && !readOnly && assets && dirty.current) {
-            void assets.updateMetadata(assetId, { meta: pruneMeta(meta) });
-            dirty.current = false;
-        }
-        onOpenChange(next);
-    }
-    function setField(name, value) {
-        dirty.current = true;
-        setMeta((m) => ({ ...m, [name]: value }));
-    }
-    // The focal point drives a live crop preview → commit immediately (optimistic
-    // marker), not deferred to close.
-    function commitFocal(point) {
-        if (readOnly || !assets)
-            return;
-        setFocal(point ?? undefined);
-        void assets.updateMetadata(assetId, { focalPoint: point });
-    }
-    return (_jsx(Dialog, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: translate('cms.asset.imageOptions.title') }), _jsx(DialogDescription, { children: translate('cms.asset.imageOptions.description') })] }), _jsxs(Stack, { gap: "3", children: [_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { align: "center", children: [_jsx(Text, { size: "sm", className: "font-medium", children: translate('cms.asset.focalPoint') }), _jsx(Spacer, {}), focal && !readOnly ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => commitFocal(null), children: [_jsx(RotateCcw, {}), " ", translate('cms.asset.resetToCentre')] })) : null] }), _jsx(FocalPointPicker, { record: record, point: focal, onChange: commitFocal, onPreview: setFocal, disabled: readOnly }), _jsx(Text, { size: "xs", tone: "subtle", children: translate('cms.asset.focalPointHint') }), _jsx(FocalCropPreviews, { record: record, point: focal })] }), metaFields.map((f) => (_jsx(Field, { label: fieldLabel(f), hint: localizedLabel(f.form?.description) || undefined, children: _jsx(FieldControl, { id: `asset-meta-${f.name}`, field: f, value: meta[f.name], readOnly: readOnly, onChange: (v) => setField(f.name, v) }) }, f.name))), metaFields.length === 0 ? (_jsxs(Text, { size: "sm", tone: "subtle", children: ["No editable metadata fields are declared on the asset collection. Add fields (e.g.", _jsx(Code, { tone: "muted", children: " alt" }), ", ", _jsx(Code, { tone: "muted", children: "copyright" }), ") to it in code."] })) : null] })] }) }));
-}
 //# sourceMappingURL=field-control.js.map