@elytracms/studio 0.0.21 → 0.0.23

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronUp, Crosshair, GripVertical, Link2, Pencil, Plus, Trash2, Upload, X } from 'lucide-react';
+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 { Link, STUDIO_PROJECT_ROUTE, studioPath } from '@elytracms/studio/router';
-import { BUILTIN_FIELD_CONTROLS, descendantIds, isFieldHidden, parentRelationField } from '@elytracms/core/cms-core';
-import { Badge, Button, Card, Code, Field, Input, Row, Select, Spacer, Stack, Text } from '@elytracms/studio/ui';
+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 { cn } from '@elytracms/studio/lib/utils';
 import { applyAssetSelection, assetIdsOf, singleAssetIdOf } from '../assets/asset-selection';
 import { useOptionalAssets } from '../assets/assets-store';
-import { AssetThumb, FocalPointPicker, useAssetRecord } from '../assets/asset-thumb';
+import { AssetThumb, FocalCropPreviews, FocalPointPicker, useAssetRecord } from '../assets/asset-thumb';
 import { newlyAddedAssetIds } from '../assets/focal-point';
 import { fieldLabel, useCms } from './cms-store';
+import { useFieldDensity } from './field-density';
 import { useOptionalDocumentEditor } from './document-editor-context';
 import { toRefArray } from './cell';
 import { RelationPicker } from './relation-picker';
@@ -287,14 +288,6 @@ function RelationField({ field, value, onChange, readOnly, }) {
                 return (_jsxs(Badge, { variant: "info", children: [projectId ? (_jsxs(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: studioPath.cmsDocument(ref.collection, ref.id) }, title: `Open ${title}`, className: "inline-flex items-center gap-1 hover:underline", children: [_jsx(Link2, { className: "size-3" }), " ", title] })) : (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "size-3" }), " ", title] })), !readOnly ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: () => apply(refs.filter((r) => r.id !== ref.id)), className: "ml-1 hover:text-destructive", children: _jsx(X, { className: "size-3" }) })) : null] }, `${ref.id}-${i}`));
             }), !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(Pencil, {}), " ", refs.length > 0 ? 'Change' : 'Pick'] })) : null, _jsx(RelationPicker, { targetCollection: field.target, cardinality: field.cardinality, value: refs, open: open, onOpenChange: setOpen, onChange: apply, excludeIds: excludeIds })] }));
 }
-/** Translate a field's `accept` list into the file input's `accept` attribute. */
-function acceptAttr(accept) {
-    if (!accept || accept.length === 0)
-        return undefined;
-    // The field vocabulary is a coarse kind list (`image`, `file`); map the common
-    // `image` kind to the MIME wildcard the browser file dialog filters on.
-    return accept.map((a) => (a === 'image' ? 'image/*' : a)).join(',');
-}
 /**
  * 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
@@ -306,9 +299,14 @@ function acceptAttr(accept) {
 function AssetField({ field, value, onChange, readOnly, }) {
     const cms = useCms();
     const assets = useOptionalAssets();
+    const density = useFieldDensity();
+    const compact = density === 'compact';
     const [open, setOpen] = useState(false);
     const [editing, setEditing] = useState(false);
-    const fileInputRef = useRef(null);
+    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);
@@ -316,6 +314,14 @@ function AssetField({ field, value, onChange, readOnly, }) {
     const many = field.cardinality === 'many';
     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(() => {
@@ -325,61 +331,245 @@ function AssetField({ field, value, onChange, readOnly, }) {
         if (added.length === 0)
             return;
         pendingRef.current = null;
-        if (many)
-            onChange([...ids, ...added]);
-        else
-            onChange(applyAssetSelection(value, added[0], 'one'));
+        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], 'one'));
+        }
         // Reacts to the library set growing (an upload landing), not to unrelated
-        // value edits — `ids`/`value`/`onChange` are read from the closure on purpose.
-    }, [libraryIds, ids, many, onChange, value]);
-    function pickFiles() {
-        fileInputRef.current?.click();
-    }
-    function onFiles(e) {
-        const files = e.target.files;
-        if (!assets || !files || files.length === 0)
+        // 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(Array.from(files));
-        e.target.value = ''; // allow re-uploading the same file
+        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.cardinality));
+            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;
-    return (_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { gap: "2", wrap: true, align: "center", children: [many ? (ids.length > 0 ? (ids.map((aid, i) => (_jsx(AssetChip, { assetId: aid, collectionId: assetCollectionId, onRemove: readOnly ? undefined : () => onChange(ids.filter((x) => x !== aid)) }, `${aid}-${i}`)))) : (_jsx(Text, { size: "sm", tone: "subtle", children: "No assets" }))) : single ? (_jsx(AssetChip, { assetId: single, collectionId: assetCollectionId })) : (_jsx(Text, { size: "sm", tone: "subtle", children: "No asset" })), _jsx(Spacer, {}), field.accept && field.accept.length > 0 ? (_jsxs(Code, { tone: "muted", children: ["accepts ", field.accept.join(', ')] })) : null, !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(Pencil, {}), " ", many ? 'Add' : single ? 'Change' : 'Pick'] })) : null, canUpload ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: pickFiles, children: [_jsx(Upload, {}), " Upload"] })) : null, _jsx("input", { ref: fileInputRef, type: "file", multiple: many, accept: acceptAttr(field.accept), onChange: onFiles, className: "hidden" })] }), !many && single && assets ? (_jsxs(Stack, { gap: "2", children: [!readOnly ? (_jsx(Row, { gap: "2", children: _jsxs(Button, { variant: "ghost", size: "sm", "aria-expanded": editing, onClick: () => setEditing((v) => !v), children: [_jsx(Crosshair, {}), " ", editing ? 'Hide image settings' : 'Image settings'] }) })) : null, editing ? _jsx(AssetMetaEditor, { assetId: single, readOnly: readOnly }) : null] })) : null, _jsx(AssetPicker, { value: single, open: open, onOpenChange: setOpen, onChange: (next) => onChange(applyAssetSelection(value, next, field.cardinality)) })] }));
+    // 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));
+    }
+    const dragProps = canUpload ? { onDragEnter, onDragOver, onDragLeave, onDrop } : {};
+    const selectButton = !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(ImagePlus, {}), " 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 ? (
+            // Gallery with per-use sub-fields (EC-301): a card per placement — thumbnail +
+            // its own sub-field form — reusing the object/repeater item rendering.
+            _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 ? (
+            // Gallery: a grid of focal-aware previews + the single Select entry.
+            _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 ? (_jsxs(Stack, { gap: "3", children: [_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: single }) }), _jsxs(Stack, { gap: "2", className: cn('min-w-0', !compact && 'flex-1'), children: [_jsx(AssetInfo, { assetId: single, fallbackTitle: cms.titleOf({ collection: assetCollectionId, id: single }) }), !readOnly ? (_jsxs(Row, { gap: "2", wrap: true, align: "center", children: [selectButton, assets ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditing(true), children: [_jsx(SlidersHorizontal, {}), " Edit"] })) : null, _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onChange(applyAssetSelection(value, null, field.cardinality)), children: [_jsx(Trash2, {}), " Remove"] })] })) : null, _jsx(AssetAltLine, { assetId: single })] })] }), hasSub ? (_jsx(AssetSubfields, { fields: subFields, value: assetSubfieldsOf(value), readOnly: readOnly, idPrefix: "asset-sub", onChange: (next) => onChange(assetNode(single, next)) })) : null] })) : (_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" }), _jsxs(Text, { size: "xs", tone: "muted", children: [rejected.length === 1 ? `“${rejected[0]}”` : `${rejected.length} files`, " skipped \u2014 only", ' ', describeAccept(field.accept), " allowed here."] })] })) : 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: "Drop to upload" })] }) })) : 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 ? 'Select or drop an image' : 'Select an asset' })] }));
+}
+/** 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: "Alt:" }), _jsx(Text, { size: "xs", tone: alt ? 'muted' : 'subtle', className: cn('min-w-0 truncate', !alt && 'italic'), title: alt ?? undefined, children: alt || 'not set' })] }));
 }
 /** A single asset reference: focal-aware thumbnail + title, with an optional remove. */
 function AssetChip({ assetId, collectionId, onRemove, }) {
     const cms = useCms();
     const record = useAssetRecord(assetId);
     const title = cms.titleOf({ collection: collectionId, id: assetId });
-    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 rounded border border-border bg-muted/40 py-0.5 pl-0.5 pr-2", children: [_jsx(AssetThumb, { record: record, alt: title, className: "size-7" }), _jsx(Text, { size: "xs", tone: "subtle", className: "max-w-[10rem] truncate", children: title }), onRemove ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: onRemove, className: "hover:text-destructive", children: _jsx(X, { className: "size-3" }) })) : 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: [_jsx(Text, { size: "xs", tone: "subtle", className: "min-w-0 flex-1 truncate", title: title, children: title }), onRemove ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: onRemove, className: "text-muted-foreground hover:text-destructive", children: _jsx(X, { className: "size-3.5" }) })) : null] })] }));
+}
+/**
+ * The per-use sub-field group shown below a single asset (EC-301): a placement's own
+ * metadata (a `caption` here), distinct from the asset-level metadata in the options
+ * dialog. Reuses the object/repeater item form, so any sub-field type works for free.
+ */
+function AssetSubfields({ fields, value, onChange, readOnly, idPrefix, }) {
+    return (_jsxs(Card, { className: "border-l-2 border-l-border px-3 pb-3 pt-2", children: [_jsx(Text, { size: "xs", tone: "subtle", className: "font-medium uppercase tracking-wide", children: "This use" }), _jsx(ObjectItemForm, { fields: fields, value: value, onChange: onChange, readOnly: readOnly, idPrefix: idPrefix })] }));
+}
+/**
+ * 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. The
+ * `many` analogue of {@link AssetSubfields}, modelled on a repeater item card.
+ */
+function AssetGalleryItem({ assetId, collectionId, fields, value, onChangeSubs, onRemove, readOnly, idPrefix, }) {
+    const cms = useCms();
+    const record = useAssetRecord(assetId);
+    const title = cms.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": "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 }) })] }));
 }
 /**
- * Inline editor for a selected image's authoring metadata (EC-248): the focal
- * point (click-to-place over the preview) and alt text, both persisted on the
- * asset document via the EC-152 metadata path. Alt commits on blur; the focal
- * point commits per placement. No-ops without a mounted asset library.
+ * System columns the upload pipeline owns — never editable metadata, so they're
+ * excluded from the asset collection's schema-driven options form (EC-301). The
+ * filename + dimensions already show in the field's info column.
  */
-function AssetMetaEditor({ assetId, readOnly }) {
+const SYSTEM_ASSET_FIELDS = new Set([
+    'filename',
+    'url',
+    'contentType',
+    'byteSize',
+    'width',
+    'height',
+    'storageKey',
+    'title',
+]);
+/** Drop `undefined` values so the persisted meta bag stays JSON/Convex-clean. */
+function pruneMeta(meta) {
+    return Object.fromEntries(Object.entries(meta).filter(([, v]) => v !== undefined));
+}
+/**
+ * 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 cms = useCms();
     const assets = useOptionalAssets();
     const record = useAssetRecord(assetId);
-    const [alt, setAlt] = useState(record?.alt ?? '');
-    const recordAlt = record?.alt ?? '';
-    // Re-seed the local buffer when the underlying asset (or its stored alt) changes.
+    const metaFields = useMemo(() => {
+        const collection = cms.collections.find((c) => c.kind === 'asset');
+        return (collection?.fields ?? []).filter((f) => !SYSTEM_ASSET_FIELDS.has(f.name) && !f.form?.readOnly);
+    }, [cms]);
+    // 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(() => {
-        setAlt(recordAlt);
-    }, [assetId, recordAlt]);
-    if (!assets)
-        return null;
-    function commitFocal(point) {
-        if (readOnly)
+        if (!open) {
+            seeded.current = false;
             return;
-        void assets.updateMetadata(assetId, { focalPoint: point });
+        }
+        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 commitAlt() {
-        if (readOnly || alt === recordAlt)
+    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;
-        void assets.updateMetadata(assetId, { alt });
+        setFocal(point ?? undefined);
+        void assets.updateMetadata(assetId, { focalPoint: point });
     }
-    return (_jsxs(Stack, { gap: "2", className: "rounded-md border border-border bg-muted/30 p-3", children: [_jsx(Field, { label: "Focal point", hint: "Click the image to set the focal point used when it\u2019s cropped.", children: _jsx(FocalPointPicker, { record: record, point: record?.focalPoint, onChange: commitFocal, disabled: readOnly }) }), record?.focalPoint && !readOnly ? (_jsx(Row, { children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => commitFocal(null), children: "Reset to centre" }) })) : null, _jsx(Field, { label: "Alt text", hint: "Describes the image for screen readers and search.", children: _jsx(Input, { value: alt, readOnly: readOnly, onChange: (e) => setAlt(e.target.value), onBlur: commitAlt, placeholder: "Describe this image\u2026" }) })] }));
+    return (_jsx(Dialog, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Image options" }), _jsx(DialogDescription, { children: "Focal point and metadata \u2014 shared across every use of this image." })] }), _jsxs(Stack, { gap: "3", children: [_jsxs(Stack, { gap: "2", children: [_jsxs(Row, { align: "center", children: [_jsx(Text, { size: "sm", className: "font-medium", children: "Focal point" }), _jsx(Spacer, {}), focal && !readOnly ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => commitFocal(null), children: [_jsx(RotateCcw, {}), " Reset to centre"] })) : null] }), _jsx(FocalPointPicker, { record: record, point: focal, onChange: commitFocal, onPreview: setFocal, disabled: readOnly }), _jsx(Text, { size: "xs", tone: "subtle", children: "Click or drag on the image to set the focal point used when it\u2019s cropped." }), _jsx(FocalCropPreviews, { record: record, point: focal })] }), metaFields.map((f) => (_jsx(Field, { label: fieldLabel(f), hint: f.form?.description, 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