@elytracms/studio 0.0.92 → 0.0.93

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

@@ -1,21 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ImagePlus, RotateCcw, SlidersHorizontal, Trash2, Upload, X } from 'lucide-react';
+import { GripVertical, ImagePlus, Link2, RotateCcw, SlidersHorizontal, Trash2, Upload, X } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { assetNode, assetSubfieldsOf, readAssetId, selfTypeFieldValue } from '@elytracms/core/cms-core';
-import { Button, Card, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Field, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { assetAlt } from '@elytracms/core/persistence';
+import { assetNode, assetSubfieldsOf, moveAssetPlacement, readAssetId, removeAssetPlacementAt, selfTypeFieldValue, } from '@elytracms/core/cms-core';
+import { Button, Card, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Field, Heading, Row, Separator, Spacer, Stack, Text, } from '@elytracms/studio/ui';
+import { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router';
 import { cn } from '@elytracms/studio/lib/utils';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
-import { appendAssetSelections, applyAssetSelection, assetIdsOf, removeAssetPlacementAt, singleAssetIdOf, } from '../assets/asset-selection.js';
+import { appendAssetSelections, 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 { assetPickerBinding, splitByAccept, uploadBatchProgress } from './asset-picker-core.js';
-import { assetMetaFieldsOf, pruneMeta } from '../assets/asset-metadata.js';
+import { assetPickerBinding, batchAttachment, splitByAccept, uploadBatchProgress } from './asset-picker-core.js';
+import { assetMetaFieldsOf, assetMetaSeed, pruneMeta } from '../assets/asset-metadata.js';
+import { ReplaceFileButton } from '../assets/replace-file.js';
 import { fieldLabel } from './cms-labels.js';
 import { useCollectionView } from '../collection-view/collection-view-context.js';
 import { useFieldDensity } from './field-density.js';
 import { AssetPicker, AssetRejectedNotice } from './asset-picker.js';
 import { FieldControl } from './field-control.js';
 import { ObjectItemForm } from './object-array-field.js';
+import { FieldPathContext, useFieldPath } from './field-anchors.js';
 /**
  * The asset-field family (EC-152 + EC-248 + EC-301) — split from
  * `field-control.tsx` (EC-330): the {@link AssetField} control plus its
@@ -42,9 +46,19 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
     const assets = useOptionalAssets();
     const density = useFieldDensity();
     const compact = density === 'compact';
+    // EC-582 / EC-572 #1: the anchor prefix of this field — a gallery placement's sub-field
+    // inputs are stamped `<field>/<entry index>/<sub-field>`, the path the validator gives
+    // their issues (a single placement's are `<field>/<sub-field>`, stamped by the form).
+    const fieldPath = useFieldPath();
     const [open, setOpen] = useState(false);
-    const [editing, setEditing] = useState(false);
+    // The placement whose image options dialog is open (EC-588 2i: every placement of a
+    // gallery has one, not only a single field's): its gallery index, or `null` for a
+    // single field's one placement.
+    const [editing, setEditing] = useState(null);
     const [dragging, setDragging] = useState(false);
+    // Reorder by drag (EC-588 2i): the gallery index being dragged and the one under it.
+    const [moveFrom, setMoveFrom] = useState(null);
+    const [moveOver, setMoveOver] = useState(null);
     // 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([]);
@@ -73,22 +87,15 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
         const batch = pendingRef.current;
         if (!batch || !assets)
             return;
-        const progress = uploadBatchProgress(batch, assets, field.accept);
-        if (progress.added.length === 0) {
-            if (progress.settled)
-                pendingRef.current = null; // everything failed — disarm
+        // EC-588 2i: the one batch-attach rule (the picker runs it too) — a `many` field
+        // appends the whole batch once it settles, IN FILE ORDER; a single field takes the
+        // first arrival.
+        const { attach, disarm } = batchAttachment(uploadBatchProgress(batch, assets, field.accept), many);
+        if (disarm)
+            pendingRef.current = null;
+        if (attach.length === 0)
             return;
-        }
-        if (many) {
-            const next = appendAssetSelections(value, progress.added);
-            if (next !== value)
-                onChange(next);
-            if (progress.settled)
-                pendingRef.current = null;
-            return;
-        }
-        pendingRef.current = null;
-        const next = applyAssetSelection(value, progress.added[0], false);
+        const next = many ? appendAssetSelections(value, attach) : applyAssetSelection(value, attach[0], false);
         if (next !== value)
             onChange(next);
         // Reacts to the assets store changing (an upload landing in the library, the
@@ -114,6 +121,47 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
             onChange(next);
     });
     const canUpload = !readOnly && assets !== null;
+    // The open dialog's placement: which asset it shows, and — when the field declares
+    // per-use sub-fields — the placement form it edits ("In this place").
+    const editTarget = (() => {
+        if (!editing)
+            return null;
+        if (editing.index === null) {
+            if (!single)
+                return null;
+            if (!hasSub)
+                return { assetId: single };
+            return {
+                assetId: single,
+                placement: {
+                    fields: subFields,
+                    value: assetSubfieldsOf(value),
+                    onChange: (next) => onChange(assetNode(single, next)),
+                },
+            };
+        }
+        if (!hasSub) {
+            const aid = ids[editing.index];
+            return aid ? { assetId: aid } : null;
+        }
+        const entry = entries.filter((e) => readAssetId(e) !== undefined)[editing.index];
+        const aid = readAssetId(entry);
+        if (!aid)
+            return null;
+        const raw = entries.indexOf(entry);
+        return {
+            assetId: aid,
+            placement: {
+                fields: subFields,
+                value: assetSubfieldsOf(entry),
+                onChange: (next) => {
+                    const nextEntries = entries.slice();
+                    nextEntries[raw] = assetNode(aid, next);
+                    onChange(nextEntries);
+                },
+            },
+        };
+    })();
     // 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
@@ -121,8 +169,10 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
     // 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);
+    // Only a FILE drag is an upload: a gallery reorder drag (EC-588) is not.
+    const isFileDrag = (e) => Array.from(e.dataTransfer.types).includes('Files');
     function onDragEnter(e) {
-        if (!canUpload)
+        if (!canUpload || !isFileDrag(e))
             return;
         e.preventDefault();
         dragDepth.current += 1;
@@ -130,12 +180,12 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
             setDragging(true);
     }
     function onDragOver(e) {
-        if (!canUpload)
+        if (!canUpload || !isFileDrag(e))
             return;
         e.preventDefault(); // required so a drop is allowed
     }
-    function onDragLeave() {
-        if (!canUpload)
+    function onDragLeave(e) {
+        if (!canUpload || !isFileDrag(e))
             return;
         dragDepth.current -= 1;
         if (dragDepth.current <= 0) {
@@ -144,7 +194,7 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
         }
     }
     function onDrop(e) {
-        if (!canUpload)
+        if (!canUpload || !isFileDrag(e))
             return;
         e.preventDefault();
         dragDepth.current = 0;
@@ -156,17 +206,62 @@ export function AssetField({ field, value: stored, onChange, readOnly, }) {
     // 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 } : {};
+    // Reorder by drag (EC-588 2i): one placement moves, every entry verbatim — core's
+    // `moveAssetPlacement`, the same index counting as the remove.
+    const reorderable = many && !readOnly && ids.length > 1;
+    function reorderProps(i) {
+        if (!reorderable)
+            return {};
+        return {
+            onDragOver: (e) => {
+                if (moveFrom === null)
+                    return;
+                e.preventDefault();
+                if (moveOver !== i)
+                    setMoveOver(i);
+            },
+            onDrop: (e) => {
+                if (moveFrom === null)
+                    return;
+                e.preventDefault();
+                const next = moveAssetPlacement(value, moveFrom, i);
+                setMoveFrom(null);
+                setMoveOver(null);
+                if (next !== value)
+                    onChange(next);
+            },
+        };
+    }
+    function moveHandle(i) {
+        if (!reorderable)
+            return null;
+        return (_jsx("span", { draggable: true, onDragStart: (e) => {
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.setData('text/plain', String(i));
+                setMoveFrom(i);
+            }, onDragEnd: () => {
+                setMoveFrom(null);
+                setMoveOver(null);
+            }, "aria-label": translate('cms.field.dragToReorder'), className: "cursor-grab text-muted-foreground/60 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) }));
+    }
+    const moveTint = (i) => cn(moveFrom === i && 'opacity-50', moveOver === i && moveFrom !== null && moveFrom !== i && 'ring-2 ring-primary/50');
     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, readOnly: readOnly, 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(removeAssetPlacementAt(value, i)) }, `${aid}-${i}`))) })) : (_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, readOnly: readOnly, 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, many)) }), _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, many)) })) : (_jsxs(Stack, { gap: "2", children: [_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, readOnly: readOnly, 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, { open: open, onOpenChange: setOpen, ...pickerBinding }), _jsx(AssetRejectedNotice, { rejected: rejected, accept: field.accept }), 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] }));
+                            // The gallery position of this placement (readable entries only) — the
+                            // index the one remove rule counts (core `removeAssetPlacementAt`).
+                            const galleryIndex = entries.slice(0, i).filter((e) => readAssetId(e) !== undefined).length;
+                            return (_jsx("div", { className: cn('rounded-lg', moveTint(galleryIndex)), ...reorderProps(galleryIndex), children: _jsx(FieldPathContext.Provider, { value: fieldPath === null ? null : `${fieldPath}/${i}`, children: _jsx(AssetGalleryItem, { assetId: aid, collectionId: assetCollectionId, fields: subFields, value: assetSubfieldsOf(entry), readOnly: readOnly, idPrefix: `asset-${i}`, handle: moveHandle(galleryIndex), onChangeSubs: (next) => {
+                                            const nextEntries = entries.slice();
+                                            nextEntries[i] = assetNode(aid, next);
+                                            onChange(nextEntries);
+                                        }, onEdit: assets ? () => setEditing({ index: galleryIndex }) : undefined, onRemove: readOnly ? undefined : () => onChange(removeAssetPlacementAt(value, galleryIndex)) }) }) }, `${aid}-${i}`));
+                        }) })) : (_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, readOnly: readOnly, 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("div", { className: cn('rounded-lg', moveTint(i)), ...reorderProps(i), children: _jsx(AssetChip, { assetId: aid, collectionId: assetCollectionId, handle: moveHandle(i), onEdit: assets ? () => setEditing({ index: i }) : undefined, onRemove: readOnly ? undefined : () => onChange(removeAssetPlacementAt(value, i)) }) }, `${aid}-${i}`))) })) : (_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, readOnly: readOnly, 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({ index: null }), onRemove: () => onChange(applyAssetSelection(value, null, many)) }), _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({ index: null }), onRemove: () => onChange(applyAssetSelection(value, null, many)) })) : (_jsxs(Stack, { gap: "2", children: [_jsx(EmptyAssetState, { compact: compact, canUpload: canUpload, readOnly: readOnly, onSelect: () => setOpen(true) }), _jsx(Row, { gap: "2", wrap: true, align: "center", children: selectButton })] })), editTarget && assets ? (_jsx(AssetOptionsDialog, { assetId: editTarget.assetId, readOnly: readOnly, open: true, onOpenChange: (next) => {
+                    if (!next)
+                        setEditing(null);
+                }, ...(editTarget.placement ? { placement: editTarget.placement } : {}) })) : null, _jsx(AssetPicker, { open: open, onOpenChange: setOpen, ...pickerBinding }), _jsx(AssetRejectedNotice, { rejected: rejected, accept: field.accept }), 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).
@@ -204,21 +299,23 @@ function AssetInfo({ assetId, fallbackTitle }) {
 }
 /**
  * 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.
+ * wants at a glance; edited in the options dialog. Read through THE reader (EC-587),
+ * so the field shows exactly what delivery serves.
  */
 function AssetAltLine({ assetId }) {
     const record = useAssetRecord(assetId);
-    const metaAlt = typeof record?.meta?.alt === 'string' ? record.meta.alt : undefined;
-    const alt = metaAlt ?? record?.alt;
+    const alt = record ? assetAlt(record) : null;
     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, }) {
+/**
+ * A single asset reference: focal-aware thumbnail + title, with an optional drag
+ * handle (reorder, EC-588), image options and remove.
+ */
+function AssetChip({ assetId, collectionId, handle, onEdit, 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] })] }));
+    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: [handle, _jsx(Text, { size: "xs", tone: "subtle", className: "min-w-0 flex-1 truncate", title: title, children: title }), onEdit ? (_jsx("button", { type: "button", "aria-label": translate('cms.asset.imageOptions.title'), onClick: onEdit, className: "text-muted-foreground hover:text-foreground", children: _jsx(SlidersHorizontal, { className: "size-3.5" }) })) : null, 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
@@ -234,22 +331,28 @@ function AssetSinglePreview({ assetId, compact, readOnly, hasLibrary, fallbackTi
  * 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, }) {
+function AssetGalleryItem({ assetId, collectionId, fields, value, onChangeSubs, handle, onEdit, 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 }) })] }));
+    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: [handle, _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 }), onEdit ? (_jsx(Button, { variant: "ghost", size: "sm", "aria-label": translate('cms.asset.imageOptions.title'), onClick: onEdit, children: _jsx(SlidersHorizontal, { className: "size-3.5" }) })) : null, 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.
+ * The image options dialog (EC-301 → EC-588, ratified 2i): the two schemas an image
+ * has, shown apart (`EC-565` § "2i widened").
+ * - **In this place** — the PLACEMENT schema: the asset field's (or prop's) per-use
+ *   sub-fields (a caption, a badge layout), true of this one use only; written into the
+ *   field value. Present only when the field declares sub-fields.
+ * - **About this image — applies everywhere it is used** — the ASSET schema: the focal
+ *   point and the `kind:'asset'` collection's fields over the asset's `meta` bag (alt,
+ *   copyright, credit, …), rendered through the generic field engine documents use;
+ *   persisted on the asset, so it changes every use — the Where-used panel (the asset's
+ *   library page) is one click away.
+ * Asset metadata is buffered locally and committed once on close (one write); the
+ * focal point commits immediately (it drives a live visual); the placement form writes
+ * through to the field as it is edited. No-ops without a library.
  */
-function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, }) {
+function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, placement, }) {
     const source = useCollectionView();
     const assets = useOptionalAssets();
     const record = useAssetRecord(assetId);
@@ -260,7 +363,7 @@ function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, }) {
     }, [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.
+    // resolution path is locale-agnostic) — localized asset metadata is EC-565 2a.
     const [meta, setMeta] = useState({});
     const [focal, setFocal] = useState(undefined);
     const dirty = useRef(false);
@@ -272,12 +375,10 @@ function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, }) {
         }
         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);
+        // Seed from the meta bag with a legacy `alt` column lifted in (EC-587,
+        // `assetMetaSeed`): a not-yet-migrated asset shows its alt, and the save writes it
+        // to `meta.alt` and clears the column (`assetMetadataWrite`).
+        setMeta(assetMetaSeed(record));
         setFocal(record.focalPoint);
         dirty.current = false;
         seeded.current = true;
@@ -302,6 +403,29 @@ function AssetOptionsDialog({ assetId, readOnly, open, onOpenChange, }) {
         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] })] }) }));
+    // EC-568: Replace file, from the dialog. Pending metadata edits are committed FIRST, so
+    // the buffer cannot overwrite what the new file brings; the focal point is kept and the
+    // dialog says to check it (the ticket's recommendation for open question 1).
+    const [replaced, setReplaced] = useState(false);
+    const replaceAction = record ? (_jsx(ReplaceFileButton, { record: record, disabled: readOnly, beforeReplace: async () => {
+            if (assets && dirty.current) {
+                dirty.current = false;
+                await assets.updateMetadata(assetId, { meta: pruneMeta(meta) });
+            }
+        }, onReplaced: (asset) => {
+            setMeta(assetMetaSeed(asset));
+            setFocal(asset.focalPoint);
+            dirty.current = false;
+            setReplaced(true);
+        } })) : null;
+    const whereUsed = source.projectId !== undefined ? (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId: source.projectId, _splat: studioPath.asset(assetId) }, className: "inline-flex items-center gap-1 text-xs text-primary hover:underline", children: [_jsx(Link2, { className: "size-3" }), " ", translate('cms.asset.imageOptions.whereUsed')] })) : null;
+    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') })] }), _jsx(AssetOptionsSections, { record: record, readOnly: readOnly, metaFields: metaFields, meta: meta, onMetaField: setField, focal: focal, onFocalCommit: commitFocal, onFocalPreview: setFocal, whereUsed: whereUsed, replaceAction: replaceAction, replaced: replaced, ...(placement ? { placement } : {}) })] }) }));
+}
+/**
+ * The two sections of the image options dialog (EC-588 2i), stateless — exported so a
+ * node smoke render can pin the split (the dialog itself portals, `null` in node).
+ */
+export function AssetOptionsSections({ record, readOnly, metaFields, meta, onMetaField, focal, onFocalCommit, onFocalPreview, placement, whereUsed, replaceAction, replaced, }) {
+    return (_jsxs(Stack, { gap: "4", children: [placement && placement.fields.length > 0 ? (_jsxs(Stack, { gap: "2", "data-ec-asset-options": "placement", children: [_jsxs(Stack, { gap: "1", children: [_jsx(Heading, { level: 3, size: "h4", children: translate('cms.asset.imageOptions.placementTitle') }), _jsx(Text, { size: "xs", tone: "subtle", children: translate('cms.asset.imageOptions.placementHint') })] }), _jsx(ObjectItemForm, { fields: placement.fields, value: placement.value, readOnly: readOnly, idPrefix: "asset-options-placement", onChange: placement.onChange }), _jsx(Separator, {})] })) : null, _jsxs(Stack, { gap: "3", "data-ec-asset-options": "asset", children: [_jsxs(Stack, { gap: "1", children: [_jsxs(Row, { align: "center", children: [_jsx(Heading, { level: 3, size: "h4", children: translate('cms.asset.imageOptions.assetTitle') }), _jsx(Spacer, {}), whereUsed] }), _jsx(Text, { size: "xs", tone: "subtle", children: translate('cms.asset.imageOptions.assetHint') }), replaceAction ? _jsx(Row, { gap: "2", align: "center", wrap: true, children: replaceAction }) : null] }), _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: () => onFocalCommit(null), children: [_jsx(RotateCcw, {}), " ", translate('cms.asset.resetToCentre')] })) : null] }), _jsx(FocalPointPicker, { record: record, point: focal, onChange: onFocalCommit, onPreview: onFocalPreview, disabled: readOnly }), replaced ? (_jsx(Text, { size: "xs", className: "font-medium", "data-ec-asset-options": "replaced", children: translate('cms.asset.replacedCheckFocal') })) : null, _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) => onMetaField(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=asset-field.js.map