@elytracms/studio 0.0.94 → 0.0.96

package/dist/components/builder/composition-field-editor.js

@@ -8,6 +8,8 @@ import { cn } from '../../lib/utils.js';
 import { translate } from '../../lib/i18n/index.js';
 import { getStudioRegistry } from '../../lib/registry/index.js';
 import { BuilderProvider, useBuilder } from './builder-store.js';
+import { createCanvasSync } from './canvas-rebase.js';
+import { CanvasCommitProvider } from './canvas-commit-boundary.js';
 import { useCanvasViewports } from './canvas-breakpoints.js';
 import { BuilderCanvas } from './canvas.js';
 import { PageTree } from './page-tree.js';
@@ -123,13 +125,13 @@ export function CanvasRoleNotices({ notices }) {
 export function NoStackCanvasNotice() {
     return (_jsx(Panel, { "data-testid": "canvas-no-stack", className: "flex h-full min-h-0 items-center justify-center p-6", children: _jsxs(Row, { gap: "2", align: "center", className: "max-w-prose", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }), _jsx(Text, { size: "sm", tone: "muted", children: translate('builder.roles.noStack') })] }) }));
 }
-export function CompositionFieldEditor({ field, value, onChange, readOnly, trailingPanes, conflicts, }) {
+export function CompositionFieldEditor({ field, value, revision, change, onChange, commits, readOnly, trailingPanes, conflicts, }) {
     // Split the value ONCE at mount (EC-547): component nodes become the canvas
-    // roots; every other sequence item is preserved aside for write-back. The
-    // editor is uncontrolled thereafter — it is the source of truth while open and
-    // lifts changes out via onChange; re-opening the tab remounts from the current
-    // draft. (BuilderProvider reads `composition` only in its lazy initial state,
-    // so later prop changes are ignored regardless.)
+    // roots; every other sequence item is preserved aside for write-back. The store
+    // is the source of truth while open: it lifts its edits out via onChange, and a
+    // value that changes UNDERNEATH it (EC-630 — a colleague's patch, a write's
+    // canonical row) is REBASED into it by `CompositionSync`, never remounted.
+    // (BuilderProvider reads `composition` only in its lazy initial state.)
     const initial = useMemo(() => splitCompositionValue(value), []);
     // EC-591: the roles come from the project's component list (the registry).
     const registry = getStudioRegistry().registry;
@@ -142,25 +144,48 @@ export function CompositionFieldEditor({ field, value, onChange, readOnly, trail
     const fieldScope = useMemo(() => compositionFieldScope(field), [field]);
     if (!initialRoot)
         return _jsx(NoStackCanvasNotice, {});
-    return (_jsxs(BuilderProvider, { composition: initialRoot, preserved: initial.preserved, field: fieldScope, components: registry.lookup, layout: layout, children: [_jsx(CompositionLift, { onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(PropSyncProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, trailingPanes: trailingPanes, roleNotices: notices, conflicts: conflicts }) }) })] }));
+    return (_jsxs(BuilderProvider, { composition: initialRoot, preserved: initial.preserved, field: fieldScope, components: registry.lookup, layout: layout, children: [_jsx(CompositionSync, { revision: revision, change: change, onChange: onChange, readOnly: readOnly }), _jsx(CanvasCommitProvider, { value: commits ?? null, children: _jsx(ReuseProvider, { children: _jsx(PropSyncProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, trailingPanes: trailingPanes, roleNotices: notices, conflicts: conflicts }) }) }) })] }));
 }
 /**
- * Lifts committed edits out of the scoped store into the CMS draft. The first
- * render establishes the (container-normalized) baseline so simply opening the
- * tab never marks the document dirty; every subsequent change to the block list
- * OR to the preserved typography (EC-549: a run deleted or edited, or an undo of
- * either) emits the merged v2 sequence value (EC-547) — the canvas roots spliced
- * back between the preserved typography items, both read from the store.
- * Cardinality (`multiple`) no longer shapes the stored value: it is a validation
- * constraint over the one envelope (EC-500 D2).
+ * Keeps the scoped store and the CMS draft on ONE value, in both directions — the
+ * React shell of {@link createCanvasSync} (EC-630).
+ *
+ * **Lift** (the store → the draft): opening the tab lifts nothing (the
+ * container-normalized mount value is the first agreed value, so simply opening
+ * never marks the document dirty); every later change to the block list OR to the
+ * preserved typography (EC-549: a run deleted or edited, or an undo of either)
+ * emits the merged v2 sequence value (EC-547) — the canvas roots spliced back
+ * between the preserved typography items — with the value it was last agreed on,
+ * which the draft measures the canvas writer's delta from. Cardinality
+ * (`multiple`) no longer shapes the stored value: it is a validation constraint
+ * over the one envelope (EC-500 D2).
+ *
+ * **Rebase** (the draft → the store): a change of the field made UNDERNEATH the
+ * canvas (a colleague's patch by subscription, a write's canonical row, a resolved
+ * conflict), reported by the draft as `change`, is dispatched as `rebase` — the
+ * change lands, undo history and selection survive, undo never reverts it. This
+ * replaced the remount (`canvasNonce` on every change of the value), which reset
+ * both. The rebase effect is declared first: in one commit it runs before the lift.
  */
-function CompositionLift({ onChange, readOnly, }) {
+function CompositionSync({ revision, change, onChange, readOnly, }) {
     const builder = useBuilder();
     const blocks = builder.present.slots?.[DEFAULT_SLOT] ?? EMPTY_BLOCKS;
     const preserved = builder.preserved;
+    const rebased = builder.rebased;
+    const dispatch = builder.dispatch;
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
-    const baselineRef = useRef(null);
+    // EC-647: the mount value and the revision the draft held it at — one agreed pair.
+    const [sync] = useState(() => createCanvasSync(mergeCompositionValue(blocks, preserved), revision, change?.seq));
+    useEffect(() => {
+        // EC-226: a READ-ONLY canvas (the Published view) shows another perspective's
+        // value — the draft's changes are not its own.
+        if (readOnly || !change)
+            return;
+        const action = sync.changed(change);
+        if (action)
+            dispatch(action);
+    }, [change?.seq, readOnly]);
     useEffect(() => {
         // EC-226: never lift edits out of a READ-ONLY canvas (the Published view).
         // The canvas's keyboard listeners (clipboard paste/cut) aren't blocked by the
@@ -170,16 +195,10 @@ function CompositionLift({ onChange, readOnly, }) {
         // discarded on switch.
         if (readOnly)
             return;
-        const baseline = baselineRef.current;
-        if (baseline === null) {
-            baselineRef.current = { blocks, preserved: preserved };
-            return;
-        }
-        if (blocks !== baseline.blocks || preserved !== baseline.preserved) {
-            baselineRef.current = { blocks, preserved: preserved };
-            onChangeRef.current(mergeCompositionValue(blocks, preserved));
-        }
-    }, [blocks, preserved, readOnly]);
+        const lift = sync.stored(mergeCompositionValue(blocks, preserved), rebased);
+        if (lift)
+            onChangeRef.current(lift);
+    }, [blocks, preserved, rebased, readOnly]);
     return null;
 }
 const EMPTY_BLOCKS = [];

package/dist/components/builder/composition-field-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"composition-field-editor.js","sourceRoot":"","sources":["../../../src/components/builder/composition-field-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react'\nimport { DEFAULT_SLOT, mergeBlockRoots, splitBlockRoots } from '@elytracms/core/project-graph'\nimport type { ComponentNode, PreservedSequenceItem, SplitBlockRoots } from '@elytracms/core/project-graph'\nimport { DRAFT_PERSPECTIVE, fieldAllowList } from '@elytracms/core/cms-core'\nimport type { BlocksFieldDef } from '@elytracms/core/cms-core'\nimport type { ComponentRegistry } from '@elytracms/core/component-registry'\nimport type { BlockNode, BlockSequenceValue } from '@elytracms/core/rich-text'\nimport { Button, Panel, Row, Spacer, Text, Toolbar, ToolbarGroup, ToolbarSeparator } from '@elytracms/studio/ui'\nimport { cn } from '../../lib/utils'\nimport { translate } from '../../lib/i18n'\nimport type { MessageKey } from '../../lib/i18n'\nimport { getStudioRegistry } from '../../lib/registry'\nimport { BuilderProvider, useBuilder } from './builder-store'\nimport type { CompositionFieldScope } from './builder-store'\nimport { useCanvasViewports } from './canvas-breakpoints'\nimport type { ViewportOption } from './canvas-breakpoints'\nimport { BuilderCanvas } from './canvas'\nimport { PageTree } from './page-tree'\nimport { PropertyInspector } from './property-inspector'\nimport { InspectorSidebar } from '../inspector/inspector-sidebar'\nimport type { InspectorPane } from '../inspector/inspector-sidebar'\nimport { InsertMenu } from './insert-menu'\nimport type { InsertContext } from './insert-menu'\nimport { insertablePositions, resolveInsertContext, resolveInsertContextAt } from './insert-context'\nimport type { InsertPosition } from './insert-context'\nimport { InsertAffordanceProvider } from './insert-affordance-context'\nimport type { InsertAffordanceApi } from './insert-affordance-context'\nimport { PropSyncProvider } from './prop-sync-context'\nimport { ReuseProvider } from './reuse-context'\nimport { PlacementRefusalNotice } from './placement-refusal'\nimport { fieldLabel } from '../cms/cms-labels'\n\n/**\n * EC-188 — the block-field surface: one canvas engine mounted on a composition\n * **field value** (AD-12), not the project graph.\n *\n * The composition tree is wrapped in a synthetic single-page graph and edited by\n * a SCOPED `BuilderProvider` with **no `projectId`** (so the graph persister is a\n * no-op — builder-store.tsx). Every committed edit is lifted out via `onChange`\n * into the CMS document draft; the document's own Save persists it (the tree is\n * stored as document data, `v.any()`).\n *\n * EC-547 (EC-500 D1–D3): the stored value is the converged v2 block sequence\n * `{ version: 2, content: BlockNode[] }`. The canvas edits the sequence's\n * `elytra/component` nodes; typography nodes survive the session byte-for-byte\n * and keep their order relative to components on write-back (see\n * {@link splitCompositionValue} / {@link mergeCompositionValue}). Legacy bare\n * node/array values are still ACCEPTED on read during the staging window, but\n * every write emits v2. This reuses the real canvas + inspector +\n * blocks panel unchanged — the same EC-158–164 mechanics — without touching the\n * project-wide builder store. Surfaced on a dedicated \"Canvas\" fieldset tab in\n * the CMS detail editor so the page builder gets full screen real estate rather\n * than being crammed into the field list.\n */\n\nconst SYNTH_ROOT_ID = 'composition.root'\n\n/**\n * A sequence item the canvas does not natively edit (EC-547 / EC-500 D3):\n * typography nodes, unknown/future node kinds, even entries the v2 schema would\n * reject — the editor is not a validator, so they are carried BYTE-FOR-BYTE and\n * re-merged on write-back rather than parsed, rewritten, or dropped.\n * `componentPrefix` records how many component nodes preceded the item in the\n * original sequence — the anchor {@link mergeCompositionValue} splices by.\n */\nexport type PreservedBlockNode = PreservedSequenceItem<BlockNode>\n\n/** A field value split for canvas editing: component roots + everything else. */\nexport type SplitCompositionValue = SplitBlockRoots<BlockNode>\n\n/**\n * Split a stored blocks-field value into the component nodes the canvas edits\n * and the sequence items it must preserve (EC-547, the EC-500 round-trip law:\n * a projection may only rewrite nodes it natively edits). Typography items are\n * deliberately NOT surfaced as editable canvas blocks in v1 (EC-500 D3) — they\n * survive the editing session and keep their order on write-back.\n *\n * EC-576: the logic is core's {@link splitBlockRoots} — the ONE reader every\n * blocks writer shares. This is the canvas's typed view of it: project-graph\n * sits below rich-text and cannot name {@link BlockNode}, so the carried items\n * arrive `unknown`; they are typed here, not checked (preservation over parsing).\n */\nexport function splitCompositionValue(value: unknown): SplitCompositionValue {\n  return splitBlockRoots(value) as SplitCompositionValue\n}\n\n/**\n * Merge canvas-edited component roots back into the stored sequence (EC-547).\n * The merge rule — preserved items anchored to their ordinal position between\n * components, every root tagged, the write always v2 — is core's\n * {@link mergeBlockRoots} (EC-576: the same merge every blocks writer goes\n * through, via `editBlockRoots`). Typed here as the rich-text value.\n */\nexport function mergeCompositionValue(\n  roots: readonly ComponentNode[],\n  preserved: readonly PreservedBlockNode[],\n): BlockSequenceValue {\n  return mergeBlockRoots(roots, preserved)\n}\n\n/**\n * The field scope the editor's store carries (EC-554): the field's label (named\n * by refusal notices) and its EFFECTIVE top-level vocabulary (EC-584 — read through\n * the per-FieldType definition, `fieldAllowList`: the declared `allow`, else the\n * `blocks` default, any canvas-eligible component).\n */\nexport function compositionFieldScope(field: BlocksFieldDef): CompositionFieldScope {\n  // A blocks field always has a vocabulary (its type declares the default).\n  return { label: fieldLabel(field), allow: fieldAllowList(field)! }\n}\n\n/**\n * Wrap the field value's component roots in a synthetic root container (EC-287).\n * The builder store edits this single root-bearing composition directly; its\n * children are the field's component blocks, lifted back out via `onChange`.\n * EC-591: the root is the component that fills the `layout.stack` role — the\n * project's own, from its component list — never a hardcoded engine id.\n */\nfunction buildSyntheticRoot(roots: readonly ComponentNode[], stackComponentId: string): ComponentNode {\n  return {\n    id: SYNTH_ROOT_ID,\n    componentId: stackComponentId,\n    slots: { [DEFAULT_SLOT]: [...roots] },\n  }\n}\n\n/**\n * The canvas notices for roles nobody in the component list fills (EC-591) — each\n * names the gesture that is OFF because of it, so a missing role is visible, never\n * a silent dead affordance. Only gestures the canvas actually has are listed: the\n * `layout.stack` role is the canvas itself (see {@link CompositionFieldEditor}),\n * `layout.grid` the wrap-beside gesture, `text` the seeded layout presets.\n * (`richText` — the typography projection, EC-549 — and `image` — asset drop —\n * have no canvas gesture yet, so there is nothing to switch off.) Pure.\n */\nexport function canvasRoleNotices(registry: ComponentRegistry): MessageKey[] {\n  const notices: MessageKey[] = []\n  if (!registry.roleComponent('layout.grid')) notices.push('builder.roles.noGrid')\n  if (!registry.roleComponent('text')) notices.push('builder.roles.noText')\n  return notices\n}\n\n/** The role notices above the canvas (EC-591) — a standing truth about the component list. */\nexport function CanvasRoleNotices({ notices }: { notices: readonly MessageKey[] }) {\n  if (notices.length === 0) return null\n  return (\n    <div data-testid=\"canvas-role-notices\" className=\"shrink-0 border-b border-border bg-muted/40\">\n      {notices.map((key) => (\n        <Row key={key} gap=\"2\" align=\"center\" className=\"px-3 py-1.5\">\n          <AlertTriangle aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <Text size=\"xs\" tone=\"muted\">\n            {translate(key)}\n          </Text>\n        </Row>\n      ))}\n    </div>\n  )\n}\n\n/**\n * The canvas in place of the editor when nobody fills `layout.stack` (EC-591): the\n * blocks of a composition field compose inside that component, so there is no\n * canvas without it. The value is not touched — nothing mounts that could write.\n */\nexport function NoStackCanvasNotice() {\n  return (\n    <Panel data-testid=\"canvas-no-stack\" className=\"flex h-full min-h-0 items-center justify-center p-6\">\n      <Row gap=\"2\" align=\"center\" className=\"max-w-prose\">\n        <AlertTriangle aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.roles.noStack')}\n        </Text>\n      </Row>\n    </Panel>\n  )\n}\n\nexport function CompositionFieldEditor({\n  field,\n  value,\n  onChange,\n  readOnly,\n  trailingPanes,\n  conflicts,\n}: {\n  field: BlocksFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\n  /**\n   * EC-595 A2 — the field's per-field conflicts (a refused node patch: \"changed by X —\n   * take theirs / keep mine\"), rendered above the canvas: the canvas IS the field.\n   */\n  conflicts?: ReactNode\n  /** Inspector panes the document editor appends after the canvas-supplied\n   *  `Properties` pane (EC-224 — the frame-owned `Versions` pane). */\n  trailingPanes?: readonly InspectorPane[]\n}) {\n  // Split the value ONCE at mount (EC-547): component nodes become the canvas\n  // roots; every other sequence item is preserved aside for write-back. The\n  // editor is uncontrolled thereafter — it is the source of truth while open and\n  // lifts changes out via onChange; re-opening the tab remounts from the current\n  // draft. (BuilderProvider reads `composition` only in its lazy initial state,\n  // so later prop changes are ignored regardless.)\n  const initial = useMemo(() => splitCompositionValue(value), [])\n  // EC-591: the roles come from the project's component list (the registry).\n  const registry = getStudioRegistry().registry\n  const stack = registry.roleComponent('layout.stack')\n  const layout = registry.layout\n  const notices = useMemo(() => canvasRoleNotices(registry), [registry])\n  const initialRoot = useMemo(\n    () => (stack ? buildSyntheticRoot(initial.roots, stack.id) : null),\n    [initial, stack],\n  )\n  // EC-554: the field's `allow` travels WITH the store, so every placement\n  // surface (canvas + tree DnD, paste, the insert offer) judges the same value.\n  const fieldScope = useMemo(() => compositionFieldScope(field), [field])\n\n  if (!initialRoot) return <NoStackCanvasNotice />\n\n  return (\n    <BuilderProvider\n      composition={initialRoot}\n      preserved={initial.preserved}\n      field={fieldScope}\n      components={registry.lookup}\n      layout={layout}\n    >\n      <CompositionLift onChange={onChange} readOnly={readOnly} />\n      <ReuseProvider>\n        {/* EC-408: the field↔component selection-sync channel wraps BOTH the canvas\n            and the inspector (they reach each other through nothing else). */}\n        <PropSyncProvider>\n          <CompositionEditorShell\n            readOnly={readOnly}\n            trailingPanes={trailingPanes}\n            roleNotices={notices}\n            conflicts={conflicts}\n          />\n        </PropSyncProvider>\n      </ReuseProvider>\n    </BuilderProvider>\n  )\n}\n\n/**\n * Lifts committed edits out of the scoped store into the CMS draft. The first\n * render establishes the (container-normalized) baseline so simply opening the\n * tab never marks the document dirty; every subsequent change to the block list\n * OR to the preserved typography (EC-549: a run deleted or edited, or an undo of\n * either) emits the merged v2 sequence value (EC-547) — the canvas roots spliced\n * back between the preserved typography items, both read from the store.\n * Cardinality (`multiple`) no longer shapes the stored value: it is a validation\n * constraint over the one envelope (EC-500 D2).\n */\nfunction CompositionLift({\n  onChange,\n  readOnly,\n}: {\n  onChange: (value: unknown) => void\n  readOnly: boolean\n}) {\n  const builder = useBuilder()\n  const blocks = builder.present.slots?.[DEFAULT_SLOT] ?? EMPTY_BLOCKS\n  const preserved = builder.preserved\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  const baselineRef = useRef<{ blocks: readonly ComponentNode[]; preserved: readonly PreservedBlockNode[] } | null>(null)\n\n  useEffect(() => {\n    // EC-226: never lift edits out of a READ-ONLY canvas (the Published view).\n    // The canvas's keyboard listeners (clipboard paste/cut) aren't blocked by the\n    // visual `pointer-events-none`, so without this a Cmd+V could mutate the\n    // graph; refusing to lift keeps the document draft intact regardless. The\n    // editor remounts per perspective, so any transient in-canvas change is\n    // discarded on switch.\n    if (readOnly) return\n    const baseline = baselineRef.current\n    if (baseline === null) {\n      baselineRef.current = { blocks, preserved: preserved as readonly PreservedBlockNode[] }\n      return\n    }\n    if (blocks !== baseline.blocks || preserved !== baseline.preserved) {\n      baselineRef.current = { blocks, preserved: preserved as readonly PreservedBlockNode[] }\n      onChangeRef.current(mergeCompositionValue(blocks, preserved as readonly PreservedBlockNode[]))\n    }\n  }, [blocks, preserved, readOnly])\n\n  return null\n}\n\nconst EMPTY_BLOCKS: readonly ComponentNode[] = []\n\n/** A breakpoint preview-width toggle (EC-211/EC-250). Switching the viewport\n * resizes only the preview frame (not an undoable edit, writes no graph command).\n * The label is the breakpoint name (`Full`/`sm`/`md`/…) with the real px width in\n * the tooltip — so the switcher reflects the site's actual screens, not a fixed\n * desktop/tablet/phone triple. */\nfunction ViewportButton({ option }: { option: ViewportOption }) {\n  const builder = useBuilder()\n  const active = builder.viewport === option.key\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"ghost\"\n      aria-label={translate('builder.canvas.viewportPreviewAria', { label: option.label })}\n      aria-pressed={active}\n      title={\n        option.px !== undefined\n          ? `${option.label} · ${option.px}px`\n          : translate('builder.canvas.viewportWidthTitle', { label: option.label })\n      }\n      onClick={() => builder.dispatch({ type: 'viewport', viewport: option.key })}\n      className={cn('px-2 text-xs', active && 'bg-accent text-accent-foreground')}\n    >\n      {option.label}\n    </Button>\n  )\n}\n\n/** The centered breakpoint switcher (EC-250): the resolved viewport set, plus a\n * visible validation issue when a project declared breakpoints but none are usable. */\nfunction BreakpointSwitcher() {\n  const { viewports, issue } = useCanvasViewports()\n  return (\n    <Row gap=\"1\" align=\"center\">\n      <ToolbarGroup>\n        {viewports.map((v) => (\n          <ViewportButton key={v.key} option={v} />\n        ))}\n      </ToolbarGroup>\n      {issue ? (\n        <Row gap=\"1\" align=\"center\" className=\"text-amber-600 dark:text-amber-400\" title={issue}>\n          <AlertTriangle aria-hidden className=\"size-3.5\" />\n          <Text size=\"xs\">{translate('builder.canvas.breakpointsIssueLabel')}</Text>\n        </Row>\n      ) : null}\n    </Row>\n  )\n}\n\n/**\n * The slim editor surface — the canvas + layers + inspector, plus Insert and\n * undo/redo. It deliberately drops the project-builder *lifecycle* chrome\n * (publish, versions, AI, page SEO): the document owns the lifecycle, not the\n * field. It keeps spatial/preview controls — including the breakpoint\n * preview-width switcher (EC-211), a canvas concern, not a lifecycle one.\n */\nfunction CompositionEditorShell({\n  readOnly,\n  trailingPanes,\n  roleNotices,\n  conflicts,\n}: {\n  readOnly: boolean\n  /** EC-595 A2 — the field's conflict notices (see {@link CompositionFieldEditor}). */\n  conflicts?: ReactNode\n  /** Document-level panes appended after `Properties` (EC-224). */\n  trailingPanes?: readonly InspectorPane[]\n  /** Notices for the roles nobody fills (EC-591) — see {@link canvasRoleNotices}. */\n  roleNotices?: readonly MessageKey[]\n}) {\n  const builder = useBuilder()\n  const dispatch = builder.dispatch\n  const [insertContext, setInsertContext] = useState<InsertContext | null>(null)\n  const [insertOpen, setInsertOpen] = useState(false)\n  const rootId = builder.present.id\n\n  // The canvas SUPPLIES the `Properties` pane (EC-224); the document editor\n  // appends its own (`Versions`). Properties dims under read-only just as the\n  // whole inspector column used to — but the appended panes stay interactive.\n  const propertiesPane = useMemo<InspectorPane>(\n    () => ({\n      id: 'properties',\n      label: translate('builder.inspector.propertiesPane'),\n      icon: <SlidersHorizontal className=\"size-3.5\" />,\n      render: () => (\n        <div className={cn('h-full min-h-0 overflow-hidden', readOnly && 'pointer-events-none opacity-60')}>\n          <PropertyInspector />\n        </div>\n      ),\n    }),\n    [readOnly],\n  )\n  const panes = useMemo<InspectorPane[]>(\n    () => [propertiesPane, ...(trailingPanes ?? [])],\n    [propertiesPane, trailingPanes],\n  )\n\n  // The single insert entry point for BOTH the toolbar and the page tree's\n  // \"Add child\" (EC-383). It selects its target first so `builder.selectedId`\n  // is the one source of truth for where an insert lands: the toolbar resolves\n  // `builder.selectedId ?? rootId` while Add-child passes an explicit row, and\n  // without this sync clicking Add-child (which otherwise leaves selection put)\n  // could target a different node than the toolbar — surfacing as a mismatched\n  // (even empty \"No allowed components match\") insert dialog. Both now resolve\n  // the identical target + allow set for the same selection.\n  function openInsert(nodeId: string) {\n    // EC-584: the offer reads the store's placement scope — the field's vocabulary at\n    // the composition root, each slot's below — the same scope the reducer judges by.\n    const ctx = resolveInsertContext(builder, nodeId)\n    if (!ctx) return\n    if (nodeId !== builder.selectedId) dispatch({ type: 'select', id: nodeId })\n    setInsertContext(ctx)\n    setInsertOpen(true)\n  }\n\n  // EC-405: the in-canvas \"+\" affordances resolve the SAME slot rules through the\n  // shared position-carrying insert-context resolution, and open the panel at the\n  // clicked edge (an explicit position that survives to the insertion, rather than\n  // the panel re-deriving it from the selection). Re-memoized on every store change\n  // so the closures read the live graph.\n  const affordanceApi = useMemo<InsertAffordanceApi>(\n    () => ({\n      positionsFor: (nodeId: string) => insertablePositions(builder, nodeId),\n      openAt: (nodeId: string, position: InsertPosition) => {\n        const ctx = resolveInsertContextAt(builder, nodeId, position)\n        if (!ctx) return\n        if (nodeId !== builder.selectedId) dispatch({ type: 'select', id: nodeId })\n        setInsertContext(ctx)\n        setInsertOpen(true)\n      },\n    }),\n    [builder, dispatch],\n  )\n\n  return (\n    <InsertAffordanceProvider value={affordanceApi}>\n      <div className=\"flex h-full min-h-0 flex-col\">\n        <div className=\"shrink-0 border-b border-border\">\n          <Toolbar>\n            <ToolbarGroup>\n              <Button\n                size=\"icon-sm\"\n                variant=\"ghost\"\n                aria-label={translate('builder.canvas.undo')}\n                title={translate('builder.canvas.undo')}\n                disabled={readOnly || !builder.canUndo}\n                onClick={() => dispatch({ type: 'undo' })}\n              >\n                <Undo2 />\n              </Button>\n              <Button\n                size=\"icon-sm\"\n                variant=\"ghost\"\n                aria-label={translate('builder.canvas.redo')}\n                title={translate('builder.canvas.redo')}\n                disabled={readOnly || !builder.canRedo}\n                onClick={() => dispatch({ type: 'redo' })}\n              >\n                <Redo2 />\n              </Button>\n            </ToolbarGroup>\n            <ToolbarSeparator />\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              disabled={readOnly}\n              onClick={() => openInsert(builder.selectedId ?? rootId)}\n            >\n              <Plus /> {translate('builder.canvas.insert')}\n            </Button>\n            {/* Breakpoint preview-width switcher (EC-211/EC-250), centered over the\n              canvas via flanking spacers. A preview control, not an edit — stays\n              active even in read-only published preview. */}\n            <Spacer />\n            <BreakpointSwitcher />\n            <Spacer />\n          </Toolbar>\n        </div>\n\n        <div className=\"grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border\">\n          <Panel className={cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60')}>\n            <PageTree onAddChild={openInsert} />\n          </Panel>\n          <div className={cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60')}>\n            {conflicts ? <div className=\"shrink-0 border-b border-border p-2\">{conflicts}</div> : null}\n            {/* EC-584: a placement the reducer refused, with its reason — never a silent no-op. */}\n            <PlacementRefusalNotice\n              refusal={builder.refusal}\n              fieldLabel={builder.field.label}\n              onDismiss={() => dispatch({ type: 'clearRefusal' })}\n            />\n            <CanvasRoleNotices notices={roleNotices ?? []} />\n            {/* EC-300/AD-16: the read-only Published view resolves references against\n              the published perspective (honest preview); the editable Draft view\n              resolves drafts (a just-made reusable shows immediately). */}\n            <BuilderCanvas perspective={readOnly ? 'published' : DRAFT_PERSPECTIVE} />\n          </div>\n          <InspectorSidebar panes={panes} />\n        </div>\n\n        <InsertMenu context={insertContext} open={insertOpen} onOpenChange={setInsertOpen} />\n      </div>\n    </InsertAffordanceProvider>\n  )\n}\n"]}
+{"version":3,"file":"composition-field-editor.js","sourceRoot":"","sources":["../../../src/components/builder/composition-field-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { AlertTriangle, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react'\nimport { DEFAULT_SLOT, mergeBlockRoots, splitBlockRoots } from '@elytracms/core/project-graph'\nimport type { ComponentNode, PreservedSequenceItem, SplitBlockRoots } from '@elytracms/core/project-graph'\nimport { DRAFT_PERSPECTIVE, fieldAllowList } from '@elytracms/core/cms-core'\nimport type { BlocksFieldDef } from '@elytracms/core/cms-core'\nimport type { ComponentRegistry } from '@elytracms/core/component-registry'\nimport type { BlockNode, BlockSequenceValue } from '@elytracms/core/rich-text'\nimport { Button, Panel, Row, Spacer, Text, Toolbar, ToolbarGroup, ToolbarSeparator } from '@elytracms/studio/ui'\nimport { cn } from '../../lib/utils'\nimport { translate } from '../../lib/i18n'\nimport type { MessageKey } from '../../lib/i18n'\nimport { getStudioRegistry } from '../../lib/registry'\nimport { BuilderProvider, useBuilder } from './builder-store'\nimport type { CompositionFieldScope } from './builder-store'\nimport { createCanvasSync } from './canvas-rebase'\nimport type { CanvasFieldChange, CanvasLift } from './canvas-rebase'\nimport { CanvasCommitProvider } from './canvas-commit-boundary'\nimport type { CanvasCommitChannel } from './canvas-commit-boundary'\nimport { useCanvasViewports } from './canvas-breakpoints'\nimport type { ViewportOption } from './canvas-breakpoints'\nimport { BuilderCanvas } from './canvas'\nimport { PageTree } from './page-tree'\nimport { PropertyInspector } from './property-inspector'\nimport { InspectorSidebar } from '../inspector/inspector-sidebar'\nimport type { InspectorPane } from '../inspector/inspector-sidebar'\nimport { InsertMenu } from './insert-menu'\nimport type { InsertContext } from './insert-menu'\nimport { insertablePositions, resolveInsertContext, resolveInsertContextAt } from './insert-context'\nimport type { InsertPosition } from './insert-context'\nimport { InsertAffordanceProvider } from './insert-affordance-context'\nimport type { InsertAffordanceApi } from './insert-affordance-context'\nimport { PropSyncProvider } from './prop-sync-context'\nimport { ReuseProvider } from './reuse-context'\nimport { PlacementRefusalNotice } from './placement-refusal'\nimport { fieldLabel } from '../cms/cms-labels'\n\n/**\n * EC-188 — the block-field surface: one canvas engine mounted on a composition\n * **field value** (AD-12), not the project graph.\n *\n * The composition tree is wrapped in a synthetic single-page graph and edited by\n * a SCOPED `BuilderProvider` with **no `projectId`** (so the graph persister is a\n * no-op — builder-store.tsx). Every committed edit is lifted out via `onChange`\n * into the CMS document draft; the document's own Save persists it (the tree is\n * stored as document data, `v.any()`).\n *\n * EC-547 (EC-500 D1–D3): the stored value is the converged v2 block sequence\n * `{ version: 2, content: BlockNode[] }`. The canvas edits the sequence's\n * `elytra/component` nodes; typography nodes survive the session byte-for-byte\n * and keep their order relative to components on write-back (see\n * {@link splitCompositionValue} / {@link mergeCompositionValue}). Legacy bare\n * node/array values are still ACCEPTED on read during the staging window, but\n * every write emits v2. This reuses the real canvas + inspector +\n * blocks panel unchanged — the same EC-158–164 mechanics — without touching the\n * project-wide builder store. Surfaced on a dedicated \"Canvas\" fieldset tab in\n * the CMS detail editor so the page builder gets full screen real estate rather\n * than being crammed into the field list.\n */\n\nconst SYNTH_ROOT_ID = 'composition.root'\n\n/**\n * A sequence item the canvas does not natively edit (EC-547 / EC-500 D3):\n * typography nodes, unknown/future node kinds, even entries the v2 schema would\n * reject — the editor is not a validator, so they are carried BYTE-FOR-BYTE and\n * re-merged on write-back rather than parsed, rewritten, or dropped.\n * `componentPrefix` records how many component nodes preceded the item in the\n * original sequence — the anchor {@link mergeCompositionValue} splices by.\n */\nexport type PreservedBlockNode = PreservedSequenceItem<BlockNode>\n\n/** A field value split for canvas editing: component roots + everything else. */\nexport type SplitCompositionValue = SplitBlockRoots<BlockNode>\n\n/**\n * Split a stored blocks-field value into the component nodes the canvas edits\n * and the sequence items it must preserve (EC-547, the EC-500 round-trip law:\n * a projection may only rewrite nodes it natively edits). Typography items are\n * deliberately NOT surfaced as editable canvas blocks in v1 (EC-500 D3) — they\n * survive the editing session and keep their order on write-back.\n *\n * EC-576: the logic is core's {@link splitBlockRoots} — the ONE reader every\n * blocks writer shares. This is the canvas's typed view of it: project-graph\n * sits below rich-text and cannot name {@link BlockNode}, so the carried items\n * arrive `unknown`; they are typed here, not checked (preservation over parsing).\n */\nexport function splitCompositionValue(value: unknown): SplitCompositionValue {\n  return splitBlockRoots(value) as SplitCompositionValue\n}\n\n/**\n * Merge canvas-edited component roots back into the stored sequence (EC-547).\n * The merge rule — preserved items anchored to their ordinal position between\n * components, every root tagged, the write always v2 — is core's\n * {@link mergeBlockRoots} (EC-576: the same merge every blocks writer goes\n * through, via `editBlockRoots`). Typed here as the rich-text value.\n */\nexport function mergeCompositionValue(\n  roots: readonly ComponentNode[],\n  preserved: readonly PreservedBlockNode[],\n): BlockSequenceValue {\n  return mergeBlockRoots(roots, preserved)\n}\n\n/**\n * The field scope the editor's store carries (EC-554): the field's label (named\n * by refusal notices) and its EFFECTIVE top-level vocabulary (EC-584 — read through\n * the per-FieldType definition, `fieldAllowList`: the declared `allow`, else the\n * `blocks` default, any canvas-eligible component).\n */\nexport function compositionFieldScope(field: BlocksFieldDef): CompositionFieldScope {\n  // A blocks field always has a vocabulary (its type declares the default).\n  return { label: fieldLabel(field), allow: fieldAllowList(field)! }\n}\n\n/**\n * Wrap the field value's component roots in a synthetic root container (EC-287).\n * The builder store edits this single root-bearing composition directly; its\n * children are the field's component blocks, lifted back out via `onChange`.\n * EC-591: the root is the component that fills the `layout.stack` role — the\n * project's own, from its component list — never a hardcoded engine id.\n */\nfunction buildSyntheticRoot(roots: readonly ComponentNode[], stackComponentId: string): ComponentNode {\n  return {\n    id: SYNTH_ROOT_ID,\n    componentId: stackComponentId,\n    slots: { [DEFAULT_SLOT]: [...roots] },\n  }\n}\n\n/**\n * The canvas notices for roles nobody in the component list fills (EC-591) — each\n * names the gesture that is OFF because of it, so a missing role is visible, never\n * a silent dead affordance. Only gestures the canvas actually has are listed: the\n * `layout.stack` role is the canvas itself (see {@link CompositionFieldEditor}),\n * `layout.grid` the wrap-beside gesture, `text` the seeded layout presets.\n * (`richText` — the typography projection, EC-549 — and `image` — asset drop —\n * have no canvas gesture yet, so there is nothing to switch off.) Pure.\n */\nexport function canvasRoleNotices(registry: ComponentRegistry): MessageKey[] {\n  const notices: MessageKey[] = []\n  if (!registry.roleComponent('layout.grid')) notices.push('builder.roles.noGrid')\n  if (!registry.roleComponent('text')) notices.push('builder.roles.noText')\n  return notices\n}\n\n/** The role notices above the canvas (EC-591) — a standing truth about the component list. */\nexport function CanvasRoleNotices({ notices }: { notices: readonly MessageKey[] }) {\n  if (notices.length === 0) return null\n  return (\n    <div data-testid=\"canvas-role-notices\" className=\"shrink-0 border-b border-border bg-muted/40\">\n      {notices.map((key) => (\n        <Row key={key} gap=\"2\" align=\"center\" className=\"px-3 py-1.5\">\n          <AlertTriangle aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <Text size=\"xs\" tone=\"muted\">\n            {translate(key)}\n          </Text>\n        </Row>\n      ))}\n    </div>\n  )\n}\n\n/**\n * The canvas in place of the editor when nobody fills `layout.stack` (EC-591): the\n * blocks of a composition field compose inside that component, so there is no\n * canvas without it. The value is not touched — nothing mounts that could write.\n */\nexport function NoStackCanvasNotice() {\n  return (\n    <Panel data-testid=\"canvas-no-stack\" className=\"flex h-full min-h-0 items-center justify-center p-6\">\n      <Row gap=\"2\" align=\"center\" className=\"max-w-prose\">\n        <AlertTriangle aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.roles.noStack')}\n        </Text>\n      </Row>\n    </Panel>\n  )\n}\n\nexport function CompositionFieldEditor({\n  field,\n  value,\n  revision,\n  change,\n  onChange,\n  commits,\n  readOnly,\n  trailingPanes,\n  conflicts,\n}: {\n  field: BlocksFieldDef\n  /** The field's value at mount (the store is the source of truth while open). */\n  value: unknown\n  /**\n   * EC-647 — the revision the draft was at when {@link value} was read (its value and its\n   * revision travel together): the revision the canvas's first edit is authored at.\n   */\n  revision: number | undefined\n  /**\n   * EC-630 — the latest change of the field made UNDERNEATH the canvas (the document\n   * draft reports it); the store rebases onto it — and, EC-647, onto its revision.\n   */\n  change?: CanvasFieldChange\n  /**\n   * The store's value, lifted, with the value it was last agreed on with the draft — the\n   * base the canvas writer's delta is measured from — and the revision that was agreed\n   * at (EC-647: the edit's authoring revision).\n   */\n  onChange: (lift: CanvasLift) => void\n  /**\n   * EC-630 — the document's committer, for the inspector controls' commit boundaries\n   * (focus / blur / Enter at a position): a burst of typing commits on its control kind's\n   * policy, never per keystroke. Absent → every edit commits as the canvas writes it.\n   */\n  commits?: CanvasCommitChannel\n  readOnly: boolean\n  /**\n   * EC-595 A2 — the field's per-field conflicts (a refused node patch: \"changed by X —\n   * take theirs / keep mine\"), rendered above the canvas: the canvas IS the field.\n   */\n  conflicts?: ReactNode\n  /** Inspector panes the document editor appends after the canvas-supplied\n   *  `Properties` pane (EC-224 — the frame-owned `Versions` pane). */\n  trailingPanes?: readonly InspectorPane[]\n}) {\n  // Split the value ONCE at mount (EC-547): component nodes become the canvas\n  // roots; every other sequence item is preserved aside for write-back. The store\n  // is the source of truth while open: it lifts its edits out via onChange, and a\n  // value that changes UNDERNEATH it (EC-630 — a colleague's patch, a write's\n  // canonical row) is REBASED into it by `CompositionSync`, never remounted.\n  // (BuilderProvider reads `composition` only in its lazy initial state.)\n  const initial = useMemo(() => splitCompositionValue(value), [])\n  // EC-591: the roles come from the project's component list (the registry).\n  const registry = getStudioRegistry().registry\n  const stack = registry.roleComponent('layout.stack')\n  const layout = registry.layout\n  const notices = useMemo(() => canvasRoleNotices(registry), [registry])\n  const initialRoot = useMemo(\n    () => (stack ? buildSyntheticRoot(initial.roots, stack.id) : null),\n    [initial, stack],\n  )\n  // EC-554: the field's `allow` travels WITH the store, so every placement\n  // surface (canvas + tree DnD, paste, the insert offer) judges the same value.\n  const fieldScope = useMemo(() => compositionFieldScope(field), [field])\n\n  if (!initialRoot) return <NoStackCanvasNotice />\n\n  return (\n    <BuilderProvider\n      composition={initialRoot}\n      preserved={initial.preserved}\n      field={fieldScope}\n      components={registry.lookup}\n      layout={layout}\n    >\n      <CompositionSync revision={revision} change={change} onChange={onChange} readOnly={readOnly} />\n      <CanvasCommitProvider value={commits ?? null}>\n        <ReuseProvider>\n          {/* EC-408: the field↔component selection-sync channel wraps BOTH the canvas\n              and the inspector (they reach each other through nothing else). */}\n          <PropSyncProvider>\n            <CompositionEditorShell\n              readOnly={readOnly}\n              trailingPanes={trailingPanes}\n              roleNotices={notices}\n              conflicts={conflicts}\n            />\n          </PropSyncProvider>\n        </ReuseProvider>\n      </CanvasCommitProvider>\n    </BuilderProvider>\n  )\n}\n\n/**\n * Keeps the scoped store and the CMS draft on ONE value, in both directions — the\n * React shell of {@link createCanvasSync} (EC-630).\n *\n * **Lift** (the store → the draft): opening the tab lifts nothing (the\n * container-normalized mount value is the first agreed value, so simply opening\n * never marks the document dirty); every later change to the block list OR to the\n * preserved typography (EC-549: a run deleted or edited, or an undo of either)\n * emits the merged v2 sequence value (EC-547) — the canvas roots spliced back\n * between the preserved typography items — with the value it was last agreed on,\n * which the draft measures the canvas writer's delta from. Cardinality\n * (`multiple`) no longer shapes the stored value: it is a validation constraint\n * over the one envelope (EC-500 D2).\n *\n * **Rebase** (the draft → the store): a change of the field made UNDERNEATH the\n * canvas (a colleague's patch by subscription, a write's canonical row, a resolved\n * conflict), reported by the draft as `change`, is dispatched as `rebase` — the\n * change lands, undo history and selection survive, undo never reverts it. This\n * replaced the remount (`canvasNonce` on every change of the value), which reset\n * both. The rebase effect is declared first: in one commit it runs before the lift.\n */\nfunction CompositionSync({\n  revision,\n  change,\n  onChange,\n  readOnly,\n}: {\n  revision: number | undefined\n  change: CanvasFieldChange | undefined\n  onChange: (lift: CanvasLift) => void\n  readOnly: boolean\n}) {\n  const builder = useBuilder()\n  const blocks = builder.present.slots?.[DEFAULT_SLOT] ?? EMPTY_BLOCKS\n  const preserved = builder.preserved as readonly PreservedBlockNode[]\n  const rebased = builder.rebased\n  const dispatch = builder.dispatch\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  // EC-647: the mount value and the revision the draft held it at — one agreed pair.\n  const [sync] = useState(() => createCanvasSync(mergeCompositionValue(blocks, preserved), revision, change?.seq))\n\n  useEffect(() => {\n    // EC-226: a READ-ONLY canvas (the Published view) shows another perspective's\n    // value — the draft's changes are not its own.\n    if (readOnly || !change) return\n    const action = sync.changed(change)\n    if (action) dispatch(action)\n  }, [change?.seq, readOnly])\n\n  useEffect(() => {\n    // EC-226: never lift edits out of a READ-ONLY canvas (the Published view).\n    // The canvas's keyboard listeners (clipboard paste/cut) aren't blocked by the\n    // visual `pointer-events-none`, so without this a Cmd+V could mutate the\n    // graph; refusing to lift keeps the document draft intact regardless. The\n    // editor remounts per perspective, so any transient in-canvas change is\n    // discarded on switch.\n    if (readOnly) return\n    const lift = sync.stored(mergeCompositionValue(blocks, preserved), rebased)\n    if (lift) onChangeRef.current(lift)\n  }, [blocks, preserved, rebased, readOnly])\n\n  return null\n}\n\nconst EMPTY_BLOCKS: readonly ComponentNode[] = []\n\n/** A breakpoint preview-width toggle (EC-211/EC-250). Switching the viewport\n * resizes only the preview frame (not an undoable edit, writes no graph command).\n * The label is the breakpoint name (`Full`/`sm`/`md`/…) with the real px width in\n * the tooltip — so the switcher reflects the site's actual screens, not a fixed\n * desktop/tablet/phone triple. */\nfunction ViewportButton({ option }: { option: ViewportOption }) {\n  const builder = useBuilder()\n  const active = builder.viewport === option.key\n  return (\n    <Button\n      size=\"sm\"\n      variant=\"ghost\"\n      aria-label={translate('builder.canvas.viewportPreviewAria', { label: option.label })}\n      aria-pressed={active}\n      title={\n        option.px !== undefined\n          ? `${option.label} · ${option.px}px`\n          : translate('builder.canvas.viewportWidthTitle', { label: option.label })\n      }\n      onClick={() => builder.dispatch({ type: 'viewport', viewport: option.key })}\n      className={cn('px-2 text-xs', active && 'bg-accent text-accent-foreground')}\n    >\n      {option.label}\n    </Button>\n  )\n}\n\n/** The centered breakpoint switcher (EC-250): the resolved viewport set, plus a\n * visible validation issue when a project declared breakpoints but none are usable. */\nfunction BreakpointSwitcher() {\n  const { viewports, issue } = useCanvasViewports()\n  return (\n    <Row gap=\"1\" align=\"center\">\n      <ToolbarGroup>\n        {viewports.map((v) => (\n          <ViewportButton key={v.key} option={v} />\n        ))}\n      </ToolbarGroup>\n      {issue ? (\n        <Row gap=\"1\" align=\"center\" className=\"text-amber-600 dark:text-amber-400\" title={issue}>\n          <AlertTriangle aria-hidden className=\"size-3.5\" />\n          <Text size=\"xs\">{translate('builder.canvas.breakpointsIssueLabel')}</Text>\n        </Row>\n      ) : null}\n    </Row>\n  )\n}\n\n/**\n * The slim editor surface — the canvas + layers + inspector, plus Insert and\n * undo/redo. It deliberately drops the project-builder *lifecycle* chrome\n * (publish, versions, AI, page SEO): the document owns the lifecycle, not the\n * field. It keeps spatial/preview controls — including the breakpoint\n * preview-width switcher (EC-211), a canvas concern, not a lifecycle one.\n */\nfunction CompositionEditorShell({\n  readOnly,\n  trailingPanes,\n  roleNotices,\n  conflicts,\n}: {\n  readOnly: boolean\n  /** EC-595 A2 — the field's conflict notices (see {@link CompositionFieldEditor}). */\n  conflicts?: ReactNode\n  /** Document-level panes appended after `Properties` (EC-224). */\n  trailingPanes?: readonly InspectorPane[]\n  /** Notices for the roles nobody fills (EC-591) — see {@link canvasRoleNotices}. */\n  roleNotices?: readonly MessageKey[]\n}) {\n  const builder = useBuilder()\n  const dispatch = builder.dispatch\n  const [insertContext, setInsertContext] = useState<InsertContext | null>(null)\n  const [insertOpen, setInsertOpen] = useState(false)\n  const rootId = builder.present.id\n\n  // The canvas SUPPLIES the `Properties` pane (EC-224); the document editor\n  // appends its own (`Versions`). Properties dims under read-only just as the\n  // whole inspector column used to — but the appended panes stay interactive.\n  const propertiesPane = useMemo<InspectorPane>(\n    () => ({\n      id: 'properties',\n      label: translate('builder.inspector.propertiesPane'),\n      icon: <SlidersHorizontal className=\"size-3.5\" />,\n      render: () => (\n        <div className={cn('h-full min-h-0 overflow-hidden', readOnly && 'pointer-events-none opacity-60')}>\n          <PropertyInspector />\n        </div>\n      ),\n    }),\n    [readOnly],\n  )\n  const panes = useMemo<InspectorPane[]>(\n    () => [propertiesPane, ...(trailingPanes ?? [])],\n    [propertiesPane, trailingPanes],\n  )\n\n  // The single insert entry point for BOTH the toolbar and the page tree's\n  // \"Add child\" (EC-383). It selects its target first so `builder.selectedId`\n  // is the one source of truth for where an insert lands: the toolbar resolves\n  // `builder.selectedId ?? rootId` while Add-child passes an explicit row, and\n  // without this sync clicking Add-child (which otherwise leaves selection put)\n  // could target a different node than the toolbar — surfacing as a mismatched\n  // (even empty \"No allowed components match\") insert dialog. Both now resolve\n  // the identical target + allow set for the same selection.\n  function openInsert(nodeId: string) {\n    // EC-584: the offer reads the store's placement scope — the field's vocabulary at\n    // the composition root, each slot's below — the same scope the reducer judges by.\n    const ctx = resolveInsertContext(builder, nodeId)\n    if (!ctx) return\n    if (nodeId !== builder.selectedId) dispatch({ type: 'select', id: nodeId })\n    setInsertContext(ctx)\n    setInsertOpen(true)\n  }\n\n  // EC-405: the in-canvas \"+\" affordances resolve the SAME slot rules through the\n  // shared position-carrying insert-context resolution, and open the panel at the\n  // clicked edge (an explicit position that survives to the insertion, rather than\n  // the panel re-deriving it from the selection). Re-memoized on every store change\n  // so the closures read the live graph.\n  const affordanceApi = useMemo<InsertAffordanceApi>(\n    () => ({\n      positionsFor: (nodeId: string) => insertablePositions(builder, nodeId),\n      openAt: (nodeId: string, position: InsertPosition) => {\n        const ctx = resolveInsertContextAt(builder, nodeId, position)\n        if (!ctx) return\n        if (nodeId !== builder.selectedId) dispatch({ type: 'select', id: nodeId })\n        setInsertContext(ctx)\n        setInsertOpen(true)\n      },\n    }),\n    [builder, dispatch],\n  )\n\n  return (\n    <InsertAffordanceProvider value={affordanceApi}>\n      <div className=\"flex h-full min-h-0 flex-col\">\n        <div className=\"shrink-0 border-b border-border\">\n          <Toolbar>\n            <ToolbarGroup>\n              <Button\n                size=\"icon-sm\"\n                variant=\"ghost\"\n                aria-label={translate('builder.canvas.undo')}\n                title={translate('builder.canvas.undo')}\n                disabled={readOnly || !builder.canUndo}\n                onClick={() => dispatch({ type: 'undo' })}\n              >\n                <Undo2 />\n              </Button>\n              <Button\n                size=\"icon-sm\"\n                variant=\"ghost\"\n                aria-label={translate('builder.canvas.redo')}\n                title={translate('builder.canvas.redo')}\n                disabled={readOnly || !builder.canRedo}\n                onClick={() => dispatch({ type: 'redo' })}\n              >\n                <Redo2 />\n              </Button>\n            </ToolbarGroup>\n            <ToolbarSeparator />\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              disabled={readOnly}\n              onClick={() => openInsert(builder.selectedId ?? rootId)}\n            >\n              <Plus /> {translate('builder.canvas.insert')}\n            </Button>\n            {/* Breakpoint preview-width switcher (EC-211/EC-250), centered over the\n              canvas via flanking spacers. A preview control, not an edit — stays\n              active even in read-only published preview. */}\n            <Spacer />\n            <BreakpointSwitcher />\n            <Spacer />\n          </Toolbar>\n        </div>\n\n        <div className=\"grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border\">\n          <Panel className={cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60')}>\n            <PageTree onAddChild={openInsert} />\n          </Panel>\n          <div className={cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60')}>\n            {conflicts ? <div className=\"shrink-0 border-b border-border p-2\">{conflicts}</div> : null}\n            {/* EC-584: a placement the reducer refused, with its reason — never a silent no-op. */}\n            <PlacementRefusalNotice\n              refusal={builder.refusal}\n              fieldLabel={builder.field.label}\n              onDismiss={() => dispatch({ type: 'clearRefusal' })}\n            />\n            <CanvasRoleNotices notices={roleNotices ?? []} />\n            {/* EC-300/AD-16: the read-only Published view resolves references against\n              the published perspective (honest preview); the editable Draft view\n              resolves drafts (a just-made reusable shows immediately). */}\n            <BuilderCanvas perspective={readOnly ? 'published' : DRAFT_PERSPECTIVE} />\n          </div>\n          <InspectorSidebar panes={panes} />\n        </div>\n\n        <InsertMenu context={insertContext} open={insertOpen} onOpenChange={setInsertOpen} />\n      </div>\n    </InsertAffordanceProvider>\n  )\n}\n"]}

package/dist/components/builder/node-factory.js

@@ -21,6 +21,14 @@ import { componentBlockNode } from '@elytracms/core/rich-text';
 export function nodeFromManifest(manifest) {
     return componentBlockNode({ id: 'tmp', componentId: manifest.id, props: {} });
 }
+/**
+ * A fresh layout container's layout — the presets' (and so the Default tiles') own
+ * explicit values, the ones the wrap gesture writes too (`lib/dnd` `WRAP_GRID_OPTIONS`).
+ * EC-624: valid tokens; a container's absent gap means "None", so a fresh one says what
+ * it wants.
+ */
+const PRESET_GAP = '4';
+const PRESET_GRID_COLUMNS = 2;
 /** The display title of a role-filling component (its manifest title, else its id). */
 function titleOf(manifest) {
     return localizedStringVariants(manifest.title)[0] ?? manifest.id;
@@ -47,10 +55,14 @@ export function layoutPresets(registry) {
             key: 'stack',
             label: titleOf(stack),
             description: 'Vertical flex layout',
-            build: () => componentBlockNode({
+            build: () => 
+            // EC-624: the preset's own layout, as a valid token — it stored a legacy numeric
+            // `gap: 4` the token select refuses at publish. Not a manifest default (the gap
+            // has none: absent is the canvas's "None" step); the wrap gesture writes the same.
+            componentBlockNode({
                 id: 'tmp',
                 componentId: stack.id,
-                props: { gap: staticProp(4) },
+                props: { gap: staticProp(PRESET_GAP) },
                 slots: { children: [copy('First item'), copy('Second item')] },
             }),
         });
@@ -64,7 +76,7 @@ export function layoutPresets(registry) {
             build: () => componentBlockNode({
                 id: 'tmp',
                 componentId: grid.id,
-                props: { columns: staticProp(2), gap: staticProp(4) },
+                props: { columns: staticProp(PRESET_GRID_COLUMNS), gap: staticProp(PRESET_GAP) },
                 slots: { children: [copy('Cell one'), copy('Cell two')] },
             }),
         });

package/dist/components/builder/node-factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-factory.js","sourceRoot":"","sources":["../../../src/components/builder/node-factory.ts"],"names":[],"mappings":"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","sourcesContent":["import { layoutContainerKind, staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, ComponentRegistry } from '@elytracms/core/component-registry'\nimport { localizedStringVariants } from '@elytracms/core/cms-core'\nimport { componentBlockNode } from '@elytracms/core/rich-text'\n\n/**\n * Build a fresh node for a component (brief §8.2, EC-066). The placeholder id is\n * reassigned by the Builder store on insert. Required slots are left empty so\n * the renderer shows a missing-slot placeholder (EC-063) prompting the author to\n * fill them.\n *\n * EC-591 / ratified 2f: the node carries NO props. An absent prop is `undefined`\n * and the implementation's own default applies — on the canvas and on delivery\n * alike; the manifest `default` is an authoring hint (the inspector's greyed\n * placeholder), never baked into a stored node. (Until EC-591 every manifest\n * `default` was copied in here, so an insert and a \"copy exact configuration\"\n * paste of the same fixture stored — and rendered — different nodes.)\n *\n * EC-547 (EC-500 D1): every factory node goes through `componentBlockNode`, so\n * it carries the `elytra/component` discriminator from birth — a newly created\n * canvas node is a v2 block-sequence citizen without any tagging on write.\n */\nexport function nodeFromManifest(manifest: ComponentManifest): ComponentNode {\n  return componentBlockNode({ id: 'tmp', componentId: manifest.id, props: {} })\n}\n\n/** Layout helper presets (brief §8.2, EC-067) — seeded layout containers. */\nexport interface LayoutPreset {\n  key: string\n  label: string\n  description: string\n  build: () => ComponentNode\n}\n\n/** The display title of a role-filling component (its manifest title, else its id). */\nfunction titleOf(manifest: ComponentManifest): string {\n  return localizedStringVariants(manifest.title)[0] ?? manifest.id\n}\n\n/**\n * The layout presets the component LIST supports (EC-591): a seeded `Stack` and a\n * seeded `Grid` — built from whichever components fill the `layout.stack` /\n * `layout.grid` roles, seeded with the `text`-role component (a preset needs ≥2\n * children to survive EC-161 normalization, EC-383). No hardcoded engine ids: a\n * role nobody fills means its preset is not offered (the canvas notice says why),\n * and with no `text` component there is no seed copy, so no preset at all.\n * Container, Repeater and Switch are plain components — the blocks panel offers\n * them as their own tiles, from their manifests.\n */\nexport function layoutPresets(registry: ComponentRegistry): LayoutPreset[] {\n  const text = registry.roleComponent('text')\n  if (!text) return []\n  const copy = (value: string): ComponentNode =>\n    componentBlockNode({ id: 'tmp', componentId: text.id, props: { value: staticProp(value) } })\n  const presets: LayoutPreset[] = []\n  const stack = registry.roleComponent('layout.stack')\n  if (stack) {\n    presets.push({\n      key: 'stack',\n      label: titleOf(stack),\n      description: 'Vertical flex layout',\n      build: () =>\n        componentBlockNode({\n          id: 'tmp',\n          componentId: stack.id,\n          props: { gap: staticProp(4) },\n          slots: { children: [copy('First item'), copy('Second item')] },\n        }),\n    })\n  }\n  const grid = registry.roleComponent('layout.grid')\n  if (grid) {\n    presets.push({\n      key: 'grid',\n      label: titleOf(grid),\n      description: 'Multi-column grid',\n      build: () =>\n        componentBlockNode({\n          id: 'tmp',\n          componentId: grid.id,\n          props: { columns: staticProp(2), gap: staticProp(4) },\n          slots: { children: [copy('Cell one'), copy('Cell two')] },\n        }),\n    })\n  }\n  return presets\n}\n\n/**\n * Build a fresh node for insertion, seeding layout containers so they survive\n * (EC-383). A bare `Stack`/`Grid` inserts empty, and EC-161 normalization\n * dissolves BOTH empty and single-child containers on commit — so a bare\n * container insert vanishes instantly and reads as a broken insert. Seeding a\n * layout container exactly like its {@link layoutPresets} sibling (≥2 children)\n * gives it visible, survivable content, so the registry \"Default\" tile behaves\n * like the preset instead of disappearing. A component that fills no layout role\n * (a Container, a Repeater) is not normalized, so its bare node survives\n * untouched; every non-container manifest is returned unchanged (EC-066).\n */\nexport function seededNodeFromManifest(manifest: ComponentManifest, registry: ComponentRegistry): ComponentNode {\n  const kind = layoutContainerKind(manifest.id, registry.layout)\n  if (!kind) return nodeFromManifest(manifest)\n  const preset = layoutPresets(registry).find((p) => p.key === kind)\n  return preset ? preset.build() : nodeFromManifest(manifest)\n}\n"]}
+{"version":3,"file":"node-factory.js","sourceRoot":"","sources":["../../../src/components/builder/node-factory.ts"],"names":[],"mappings":"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","sourcesContent":["import { layoutContainerKind, staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, SpacingTokenName } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, ComponentRegistry } from '@elytracms/core/component-registry'\nimport { localizedStringVariants } from '@elytracms/core/cms-core'\nimport { componentBlockNode } from '@elytracms/core/rich-text'\n\n/**\n * Build a fresh node for a component (brief §8.2, EC-066). The placeholder id is\n * reassigned by the Builder store on insert. Required slots are left empty so\n * the renderer shows a missing-slot placeholder (EC-063) prompting the author to\n * fill them.\n *\n * EC-591 / ratified 2f: the node carries NO props. An absent prop is `undefined`\n * and the implementation's own default applies — on the canvas and on delivery\n * alike; the manifest `default` is an authoring hint (the inspector's greyed\n * placeholder), never baked into a stored node. (Until EC-591 every manifest\n * `default` was copied in here, so an insert and a \"copy exact configuration\"\n * paste of the same fixture stored — and rendered — different nodes.)\n *\n * EC-547 (EC-500 D1): every factory node goes through `componentBlockNode`, so\n * it carries the `elytra/component` discriminator from birth — a newly created\n * canvas node is a v2 block-sequence citizen without any tagging on write.\n */\nexport function nodeFromManifest(manifest: ComponentManifest): ComponentNode {\n  return componentBlockNode({ id: 'tmp', componentId: manifest.id, props: {} })\n}\n\n/**\n * A fresh layout container's layout — the presets' (and so the Default tiles') own\n * explicit values, the ones the wrap gesture writes too (`lib/dnd` `WRAP_GRID_OPTIONS`).\n * EC-624: valid tokens; a container's absent gap means \"None\", so a fresh one says what\n * it wants.\n */\nconst PRESET_GAP: SpacingTokenName = '4'\nconst PRESET_GRID_COLUMNS = 2\n\n/** Layout helper presets (brief §8.2, EC-067) — seeded layout containers. */\nexport interface LayoutPreset {\n  key: string\n  label: string\n  description: string\n  build: () => ComponentNode\n}\n\n/** The display title of a role-filling component (its manifest title, else its id). */\nfunction titleOf(manifest: ComponentManifest): string {\n  return localizedStringVariants(manifest.title)[0] ?? manifest.id\n}\n\n/**\n * The layout presets the component LIST supports (EC-591): a seeded `Stack` and a\n * seeded `Grid` — built from whichever components fill the `layout.stack` /\n * `layout.grid` roles, seeded with the `text`-role component (a preset needs ≥2\n * children to survive EC-161 normalization, EC-383). No hardcoded engine ids: a\n * role nobody fills means its preset is not offered (the canvas notice says why),\n * and with no `text` component there is no seed copy, so no preset at all.\n * Container, Repeater and Switch are plain components — the blocks panel offers\n * them as their own tiles, from their manifests.\n */\nexport function layoutPresets(registry: ComponentRegistry): LayoutPreset[] {\n  const text = registry.roleComponent('text')\n  if (!text) return []\n  const copy = (value: string): ComponentNode =>\n    componentBlockNode({ id: 'tmp', componentId: text.id, props: { value: staticProp(value) } })\n  const presets: LayoutPreset[] = []\n  const stack = registry.roleComponent('layout.stack')\n  if (stack) {\n    presets.push({\n      key: 'stack',\n      label: titleOf(stack),\n      description: 'Vertical flex layout',\n      build: () =>\n        // EC-624: the preset's own layout, as a valid token — it stored a legacy numeric\n        // `gap: 4` the token select refuses at publish. Not a manifest default (the gap\n        // has none: absent is the canvas's \"None\" step); the wrap gesture writes the same.\n        componentBlockNode({\n          id: 'tmp',\n          componentId: stack.id,\n          props: { gap: staticProp(PRESET_GAP) },\n          slots: { children: [copy('First item'), copy('Second item')] },\n        }),\n    })\n  }\n  const grid = registry.roleComponent('layout.grid')\n  if (grid) {\n    presets.push({\n      key: 'grid',\n      label: titleOf(grid),\n      description: 'Multi-column grid',\n      build: () =>\n        componentBlockNode({\n          id: 'tmp',\n          componentId: grid.id,\n          props: { columns: staticProp(PRESET_GRID_COLUMNS), gap: staticProp(PRESET_GAP) },\n          slots: { children: [copy('Cell one'), copy('Cell two')] },\n        }),\n    })\n  }\n  return presets\n}\n\n/**\n * Build a fresh node for insertion, seeding layout containers so they survive\n * (EC-383). A bare `Stack`/`Grid` inserts empty, and EC-161 normalization\n * dissolves BOTH empty and single-child containers on commit — so a bare\n * container insert vanishes instantly and reads as a broken insert. Seeding a\n * layout container exactly like its {@link layoutPresets} sibling (≥2 children)\n * gives it visible, survivable content, so the registry \"Default\" tile behaves\n * like the preset instead of disappearing. A component that fills no layout role\n * (a Container, a Repeater) is not normalized, so its bare node survives\n * untouched; every non-container manifest is returned unchanged (EC-066).\n */\nexport function seededNodeFromManifest(manifest: ComponentManifest, registry: ComponentRegistry): ComponentNode {\n  const kind = layoutContainerKind(manifest.id, registry.layout)\n  if (!kind) return nodeFromManifest(manifest)\n  const preset = layoutPresets(registry).find((p) => p.key === kind)\n  return preset ? preset.build() : nodeFromManifest(manifest)\n}\n"]}

package/dist/components/builder/property-inspector.js

@@ -10,7 +10,9 @@ import { localizedLabel, translate } from '../../lib/i18n/index.js';
 import { componentDisplayName } from '../../lib/persona/labels.js';
 import { PropValueControl } from '../cms/prop-fields.js';
 import { visiblePropFields } from '../cms/prop-visibility.js';
+import { commitPolicyOf } from '../cms/commit-policy.js';
 import { useBuilder } from './builder-store.js';
+import { CanvasCommitBoundary } from './canvas-commit-boundary.js';
 import { LayoutSection, layoutManagedPropNames } from './layout-inspector.js';
 import { usePropSync } from './prop-sync-context.js';
 import { RunInspector } from './run-inspector.js';
@@ -70,6 +72,6 @@ function PropField({ node, name, spec }) {
     return (_jsx("div", { ref: anchorRef, "data-ec-prop-anchor": name, onFocus: () => sync?.setHighlighted({ nodeId: node.id, propName: name }), onBlur: (e) => {
             if (!e.currentTarget.contains(e.relatedTarget))
                 sync?.setHighlighted(null);
-        }, children: _jsx(Field, { label: spec.form?.readOnly === true ? (_jsxs(Row, { gap: "2", children: [_jsx("span", { children: localizedLabel(spec.form?.label, name) }), _jsxs(Badge, { variant: "outline", children: [_jsx(Lock, { className: "size-3" }), " ", translate('cms.editor.readOnlyBadge')] })] })) : (localizedLabel(spec.form?.label, name)), htmlFor: id, hint: localizedLabel(spec.form?.description) || undefined, children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: value, onSet: (v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey }), onClear: () => builder.dispatch({ type: 'removeProp', id: node.id, name }) }) }) }));
+        }, children: _jsx(Field, { label: spec.form?.readOnly === true ? (_jsxs(Row, { gap: "2", children: [_jsx("span", { children: localizedLabel(spec.form?.label, name) }), _jsxs(Badge, { variant: "outline", children: [_jsx(Lock, { className: "size-3" }), " ", translate('cms.editor.readOnlyBadge')] })] })) : (localizedLabel(spec.form?.label, name)), htmlFor: id, hint: localizedLabel(spec.form?.description) || undefined, children: _jsx(CanvasCommitBoundary, { position: { node: node.id, prop: name }, policy: commitPolicyOf({ ...spec, name }), children: _jsx(PropValueControl, { id: id, name: name, spec: spec, value: value, onSet: (v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey }), onClear: () => builder.dispatch({ type: 'removeProp', id: node.id, name }) }) }) }) }));
 }
 //# sourceMappingURL=property-inspector.js.map

package/dist/components/builder/property-inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Lock } from 'lucide-react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport { getStudioRegistry } from '../../lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '../../lib/utils'\nimport { localizedLabel, translate } from '../../lib/i18n'\nimport { componentDisplayName } from '../../lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { visiblePropFields } from '../cms/prop-visibility'\nimport { useBuilder } from './builder-store'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\nimport { usePropSync } from './prop-sync-context'\nimport { RunInspector } from './run-inspector'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  // EC-549: a selected typography run is inspected (and edited, and deleted) here.\n  if (builder.selectedRun !== null) return <RunInspector run={builder.selectedRun} />\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const builder = useBuilder()\n  const layoutManaged = new Set(layoutManagedPropNames(node, builder.layout))\n  // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —\n  // evaluated against the node's effective sibling prop values, live as they change\n  // (the shared pure core in `cms/prop-visibility.ts`, EC-430).\n  const props = manifest ? visiblePropFields(manifest, node, layoutManaged) : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const sync = usePropSync()\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  // EC-408 FORWARD: a sub-part click that resolved to THIS prop scrolls its\n  // control into view and focuses the first focusable element. Keyed on the\n  // request object (a fresh nonce every request) so re-clicking re-focuses.\n  const request = sync?.focusRequest\n  useEffect(() => {\n    if (!request || request.nodeId !== node.id || request.propName !== name) return\n    const anchor = anchorRef.current\n    if (!anchor) return\n    anchor.scrollIntoView({ block: 'nearest' })\n    anchor\n      .querySelector<HTMLElement>('input, textarea, select, button, [contenteditable=\"true\"], [tabindex]')\n      ?.focus()\n  }, [request, node.id, name])\n\n  return (\n    // EC-408: the stable per-prop anchor. Focus (bubbling) inside any control\n    // highlights the matching sub-part on the canvas (REVERSE); blur that leaves\n    // the field clears it.\n    <div\n      ref={anchorRef}\n      data-ec-prop-anchor={name}\n      onFocus={() => sync?.setHighlighted({ nodeId: node.id, propName: name })}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync?.setHighlighted(null)\n      }}\n    >\n      {/* EC-393: honor `form.description` as the field hint, at parity with the document\n          form (`detail-editor.tsx` passes the same to its `Field`). */}\n      <Field\n        label={\n          spec.form?.readOnly === true ? (\n            // EC-395: the SAME read-only badge the document form renders next to a\n            // `read`-access field label (`detail-editor.tsx`'s `fieldLevelReadOnly`\n            // row) — identical icon, i18n key, and `Badge` variant, so a locked prop\n            // reads exactly like a locked document field, never a bespoke treatment.\n            <Row gap=\"2\">\n              <span>{localizedLabel(spec.form?.label, name)}</span>\n              <Badge variant=\"outline\">\n                <Lock className=\"size-3\" /> {translate('cms.editor.readOnlyBadge')}\n              </Badge>\n            </Row>\n          ) : (\n            localizedLabel(spec.form?.label, name)\n          )\n        }\n        htmlFor={id}\n        hint={localizedLabel(spec.form?.description) || undefined}\n      >\n        <PropValueControl\n          id={id}\n          name={name}\n          spec={spec}\n          value={value}\n          onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n          onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n        />\n      </Field>\n    </div>\n  )\n}\n\n"]}
+{"version":3,"file":"property-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/property-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react'\nimport { Lock } from 'lucide-react'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { manifestSlots } from '@elytracms/core/component-registry'\nimport type { FieldDef } from '@elytracms/core/cms-core'\nimport { getStudioRegistry } from '../../lib/registry'\nimport {\n  Badge,\n  Code,\n  Field,\n  InspectorSection,\n  PanelHeader,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { humanizeName } from '../../lib/utils'\nimport { localizedLabel, translate } from '../../lib/i18n'\nimport { componentDisplayName } from '../../lib/persona/labels'\nimport { PropValueControl } from '../cms/prop-fields'\nimport { visiblePropFields } from '../cms/prop-visibility'\nimport { commitPolicyOf } from '../cms/commit-policy'\nimport { useBuilder } from './builder-store'\nimport { CanvasCommitBoundary } from './canvas-commit-boundary'\nimport { LayoutSection, layoutManagedPropNames } from './layout-inspector'\nimport { usePropSync } from './prop-sync-context'\nimport { RunInspector } from './run-inspector'\n\nexport function PropertyInspector() {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const node = builder.selectedNode\n\n  // EC-549: a selected typography run is inspected (and edited, and deleted) here.\n  if (builder.selectedRun !== null) return <RunInspector run={builder.selectedRun} />\n\n  if (!node) {\n    return (\n      <div className=\"grid h-full place-items-center p-6 text-center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {translate('builder.inspector.emptySelection')}\n        </Text>\n      </div>\n    )\n  }\n\n  const manifest = studio.registry.getManifest(node.componentId)\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <PanelHeader>\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.inspector.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\" title={node.componentId}>\n          {componentDisplayName(node.componentId, manifest)}\n        </Code>\n      </PanelHeader>\n\n      <div className=\"min-h-0 flex-1 overflow-auto\">\n        <SettingsTab node={node} manifest={manifest} />\n      </div>\n    </div>\n  )\n}\n\n/** The full property surface: node identity, static props, condition, slots. */\nfunction SettingsTab({\n  node,\n  manifest,\n}: {\n  node: ComponentNode\n  manifest: ComponentManifest | undefined\n}) {\n  // Container layout props render in the dedicated Layout section (EC-162),\n  // not as a second set of generic controls.\n  const builder = useBuilder()\n  const layoutManaged = new Set(layoutManagedPropNames(node, builder.layout))\n  // EC-190: `blocks` props are slots; EC-393: `form.hidden` props are omitted —\n  // evaluated against the node's effective sibling prop values, live as they change\n  // (the shared pure core in `cms/prop-visibility.ts`, EC-430).\n  const props = manifest ? visiblePropFields(manifest, node, layoutManaged) : []\n  const slots = manifest ? manifestSlots(manifest) : []\n\n  return (\n    <>\n      {/* EC-192: the editor-facing inspector no longer renders the raw node id or\n          namespaced component id (the persona promise). The component's human name\n          is in the panel header (with the manifest id in its `title`); the canvas\n          and tree provide selection. */}\n      {/* Contextual layout inspector for Stack/Grid containers (EC-162). */}\n      <LayoutSection node={node} />\n\n      {!manifest ? (\n        <div className=\"p-3\">\n          <Badge variant=\"error\">{translate('builder.inspector.unknownComponent')}</Badge>\n          <Text size=\"xs\" tone=\"muted\" className=\"mt-2\">\n            {translate('builder.inspector.noManifest')}\n          </Text>\n        </div>\n      ) : (\n        <InspectorSection title={translate('builder.inspector.props')}>\n          {props.length === 0 ? (\n            <Text size=\"xs\" tone=\"subtle\">\n              {translate('builder.inspector.noEditableProps')}\n            </Text>\n          ) : (\n            <Stack gap=\"4\">\n              {props.map(([name, spec]) => (\n                // Key by node id so per-node local control state never leaks\n                // across a selection change to a same-named prop.\n                <PropField key={`${node.id}:${name}`} node={node} name={name} spec={spec} />\n              ))}\n            </Stack>\n          )}\n        </InspectorSection>\n      )}\n\n      {slots.length > 0 ? (\n        <InspectorSection title={translate('builder.inspector.slots')}>\n          <Stack gap=\"1\">\n            {slots.map((slot) => {\n              const count = node.slots?.[slot.name]?.length ?? 0\n              const missing = slot.required && count === 0\n              return (\n                <Row key={slot.name} gap=\"2\">\n                  <Text size=\"xs\" title={slot.name}>\n                    {humanizeName(slot.name)}\n                  </Text>\n                  {slot.required ? (\n                    <Badge variant={missing ? 'error' : 'outline'}>{translate('common.required')}</Badge>\n                  ) : null}\n                  <Spacer />\n                  <Text size=\"xs\" tone=\"subtle\" mono>\n                    {count}\n                  </Text>\n                </Row>\n              )\n            })}\n          </Stack>\n          <Text size=\"xs\" tone=\"subtle\" className=\"mt-2\">\n            {translate('builder.inspector.slotsHint')}\n          </Text>\n        </InspectorSection>\n      ) : null}\n    </>\n  )\n}\n\nfunction PropField({ node, name, spec }: { node: ComponentNode; name: string; spec: PropField }) {\n  const builder = useBuilder()\n  const sync = usePropSync()\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const value = node.props?.[name]\n  const id = `prop-${node.id}-${name}`\n  // Coalesce rapid edits to the same prop into one undo step (EC-190).\n  const coalesceKey = `${node.id}:${name}`\n\n  // EC-408 FORWARD: a sub-part click that resolved to THIS prop scrolls its\n  // control into view and focuses the first focusable element. Keyed on the\n  // request object (a fresh nonce every request) so re-clicking re-focuses.\n  const request = sync?.focusRequest\n  useEffect(() => {\n    if (!request || request.nodeId !== node.id || request.propName !== name) return\n    const anchor = anchorRef.current\n    if (!anchor) return\n    anchor.scrollIntoView({ block: 'nearest' })\n    anchor\n      .querySelector<HTMLElement>('input, textarea, select, button, [contenteditable=\"true\"], [tabindex]')\n      ?.focus()\n  }, [request, node.id, name])\n\n  return (\n    // EC-408: the stable per-prop anchor. Focus (bubbling) inside any control\n    // highlights the matching sub-part on the canvas (REVERSE); blur that leaves\n    // the field clears it.\n    <div\n      ref={anchorRef}\n      data-ec-prop-anchor={name}\n      onFocus={() => sync?.setHighlighted({ nodeId: node.id, propName: name })}\n      onBlur={(e) => {\n        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync?.setHighlighted(null)\n      }}\n    >\n      {/* EC-393: honor `form.description` as the field hint, at parity with the document\n          form (`detail-editor.tsx` passes the same to its `Field`). */}\n      <Field\n        label={\n          spec.form?.readOnly === true ? (\n            // EC-395: the SAME read-only badge the document form renders next to a\n            // `read`-access field label (`detail-editor.tsx`'s `fieldLevelReadOnly`\n            // row) — identical icon, i18n key, and `Badge` variant, so a locked prop\n            // reads exactly like a locked document field, never a bespoke treatment.\n            <Row gap=\"2\">\n              <span>{localizedLabel(spec.form?.label, name)}</span>\n              <Badge variant=\"outline\">\n                <Lock className=\"size-3\" /> {translate('cms.editor.readOnlyBadge')}\n              </Badge>\n            </Row>\n          ) : (\n            localizedLabel(spec.form?.label, name)\n          )\n        }\n        htmlFor={id}\n        hint={localizedLabel(spec.form?.description) || undefined}\n      >\n        {/* EC-630: the control commits on its kind's policy (blur / Enter / idle for\n            the text-like ones), never per keystroke. */}\n        <CanvasCommitBoundary position={{ node: node.id, prop: name }} policy={commitPolicyOf({ ...spec, name } as FieldDef)}>\n          <PropValueControl\n            id={id}\n            name={name}\n            spec={spec}\n            value={value}\n            onSet={(v) => builder.dispatch({ type: 'setProp', id: node.id, name, value: staticProp(v), coalesceKey })}\n            onClear={() => builder.dispatch({ type: 'removeProp', id: node.id, name })}\n          />\n        </CanvasCommitBoundary>\n      </Field>\n    </div>\n  )\n}\n\n"]}

package/dist/components/builder/run-inspector.js

@@ -5,8 +5,12 @@ import { DEFAULT_SLOT, allowListIds } from '@elytracms/core/project-graph';
 import { Button, Code, PanelHeader, Spacer, Stack, Text } from '@elytracms/studio/ui';
 import { translate } from '../../lib/i18n/index.js';
 import { RichTextEditor } from '../cms/rich-text/index.js';
+import { commitPolicyOf } from '../cms/commit-policy.js';
 import { useBuilder } from './builder-store.js';
+import { CanvasCommitBoundary } from './canvas-commit-boundary.js';
 import { runByKey, runValue } from './canvas-runs.js';
+/** A run is edited in the rich-text editor: THE declaration's policy for that control kind. */
+const RUN_COMMIT_POLICY = commitPolicyOf({ name: 'run', type: 'richText' });
 /**
  * The inspector for a selected typography RUN (EC-549, owner-ratified 4d) — loose prose
  * a `blocks` value legitimately carries (a surface switch, a transfer, an AI write).
@@ -23,11 +27,11 @@ export function RunInspector({ run: key }) {
     if (!run || !value)
         return null;
     const dispatch = builder.dispatch;
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "run-inspector", children: [_jsxs(PanelHeader, { children: [_jsx(Pilcrow, { "aria-hidden": true, className: "size-3.5 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('builder.run.title') }), _jsx(Spacer, {}), _jsx(Code, { tone: "muted", children: translate('builder.run.items', { count: run.members.length }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: _jsxs(Stack, { gap: "3", children: [_jsx(Text, { size: "xs", tone: "muted", children: translate('builder.run.hint') }), _jsx(RichTextEditor, { value: value, label: translate('builder.run.title'), allow: allowListIds(builder.field.allow), onChange: (next) => {
-                                const content = next && typeof next === 'object' && Array.isArray(next.content)
-                                    ? (next.content)
-                                    : [];
-                                dispatch({ type: 'setRun', run: key, content, coalesceKey: `run:${key}` });
-                            } }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => dispatch({ type: 'removeRun', run: key }), "data-testid": "run-delete", children: [_jsx(Trash2, {}), " ", translate('builder.run.delete')] })] }) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "run-inspector", children: [_jsxs(PanelHeader, { children: [_jsx(Pilcrow, { "aria-hidden": true, className: "size-3.5 text-muted-foreground" }), _jsx(Text, { size: "sm", weight: "semibold", children: translate('builder.run.title') }), _jsx(Spacer, {}), _jsx(Code, { tone: "muted", children: translate('builder.run.items', { count: run.members.length }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: _jsxs(Stack, { gap: "3", children: [_jsx(Text, { size: "xs", tone: "muted", children: translate('builder.run.hint') }), _jsx(CanvasCommitBoundary, { position: { run: key }, policy: RUN_COMMIT_POLICY, children: _jsx(RichTextEditor, { value: value, label: translate('builder.run.title'), allow: allowListIds(builder.field.allow), onChange: (next) => {
+                                    const content = next && typeof next === 'object' && Array.isArray(next.content)
+                                        ? (next.content)
+                                        : [];
+                                    dispatch({ type: 'setRun', run: key, content, coalesceKey: `run:${key}` });
+                                } }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => dispatch({ type: 'removeRun', run: key }), "data-testid": "run-delete", children: [_jsx(Trash2, {}), " ", translate('builder.run.delete')] })] }) })] }));
 }
 //# sourceMappingURL=run-inspector.js.map

package/dist/components/builder/run-inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"run-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/run-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react'\nimport { Pilcrow, Trash2 } from 'lucide-react'\nimport { DEFAULT_SLOT, allowListIds } from '@elytracms/core/project-graph'\nimport { Button, Code, PanelHeader, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '../../lib/i18n'\nimport { RichTextEditor } from '../cms/rich-text'\nimport { useBuilder } from './builder-store'\nimport { runByKey, runValue } from './canvas-runs'\n\n/**\n * The inspector for a selected typography RUN (EC-549, owner-ratified 4d) — loose prose\n * a `blocks` value legitimately carries (a surface switch, a transfer, an AI write).\n * Its text is edited HERE, in the rich-text editor (the v1 inline-editing deferral);\n * the canvas never creates loose prose and reordering it is not a v1 gesture. Every\n * edit and the delete are store actions on the preserved list (`setRun` /\n * `removeRun`), so undo restores them exactly.\n */\nexport function RunInspector({ run: key }: { run: number }) {\n  const builder = useBuilder()\n  const rootCount = builder.present.slots?.[DEFAULT_SLOT]?.length ?? 0\n  const run = runByKey(rootCount, builder.preserved, key)\n  const value = useMemo(() => (run ? runValue(builder.preserved, run) : undefined), [builder.preserved, run])\n  if (!run || !value) return null\n  const dispatch = builder.dispatch\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"run-inspector\">\n      <PanelHeader>\n        <Pilcrow aria-hidden className=\"size-3.5 text-muted-foreground\" />\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.run.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\">{translate('builder.run.items', { count: run.members.length })}</Code>\n      </PanelHeader>\n      <div className=\"min-h-0 flex-1 overflow-auto p-3\">\n        <Stack gap=\"3\">\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('builder.run.hint')}\n          </Text>\n          <RichTextEditor\n            value={value}\n            label={translate('builder.run.title')}\n            allow={allowListIds(builder.field.allow) as string[] | undefined}\n            onChange={(next) => {\n              const content =\n                next && typeof next === 'object' && Array.isArray((next as { content?: unknown }).content)\n                  ? ((next as { content: unknown[] }).content)\n                  : []\n              dispatch({ type: 'setRun', run: key, content, coalesceKey: `run:${key}` })\n            }}\n          />\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => dispatch({ type: 'removeRun', run: key })}\n            data-testid=\"run-delete\"\n          >\n            <Trash2 /> {translate('builder.run.delete')}\n          </Button>\n        </Stack>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"run-inspector.js","sourceRoot":"","sources":["../../../src/components/builder/run-inspector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react'\nimport { Pilcrow, Trash2 } from 'lucide-react'\nimport { DEFAULT_SLOT, allowListIds } from '@elytracms/core/project-graph'\nimport { Button, Code, PanelHeader, Spacer, Stack, Text } from '@elytracms/studio/ui'\nimport { translate } from '../../lib/i18n'\nimport { RichTextEditor } from '../cms/rich-text'\nimport { commitPolicyOf } from '../cms/commit-policy'\nimport { useBuilder } from './builder-store'\nimport { CanvasCommitBoundary } from './canvas-commit-boundary'\nimport { runByKey, runValue } from './canvas-runs'\n\n/** A run is edited in the rich-text editor: THE declaration's policy for that control kind. */\nconst RUN_COMMIT_POLICY = commitPolicyOf({ name: 'run', type: 'richText' })\n\n/**\n * The inspector for a selected typography RUN (EC-549, owner-ratified 4d) — loose prose\n * a `blocks` value legitimately carries (a surface switch, a transfer, an AI write).\n * Its text is edited HERE, in the rich-text editor (the v1 inline-editing deferral);\n * the canvas never creates loose prose and reordering it is not a v1 gesture. Every\n * edit and the delete are store actions on the preserved list (`setRun` /\n * `removeRun`), so undo restores them exactly.\n */\nexport function RunInspector({ run: key }: { run: number }) {\n  const builder = useBuilder()\n  const rootCount = builder.present.slots?.[DEFAULT_SLOT]?.length ?? 0\n  const run = runByKey(rootCount, builder.preserved, key)\n  const value = useMemo(() => (run ? runValue(builder.preserved, run) : undefined), [builder.preserved, run])\n  if (!run || !value) return null\n  const dispatch = builder.dispatch\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"run-inspector\">\n      <PanelHeader>\n        <Pilcrow aria-hidden className=\"size-3.5 text-muted-foreground\" />\n        <Text size=\"sm\" weight=\"semibold\">\n          {translate('builder.run.title')}\n        </Text>\n        <Spacer />\n        <Code tone=\"muted\">{translate('builder.run.items', { count: run.members.length })}</Code>\n      </PanelHeader>\n      <div className=\"min-h-0 flex-1 overflow-auto p-3\">\n        <Stack gap=\"3\">\n          <Text size=\"xs\" tone=\"muted\">\n            {translate('builder.run.hint')}\n          </Text>\n          {/* EC-630: the run is prose — one position, the field — and commits on the\n              rich-text control's policy (blur / idle), never per keystroke. */}\n          <CanvasCommitBoundary position={{ run: key }} policy={RUN_COMMIT_POLICY}>\n            <RichTextEditor\n              value={value}\n              label={translate('builder.run.title')}\n              allow={allowListIds(builder.field.allow) as string[] | undefined}\n              onChange={(next) => {\n                const content =\n                  next && typeof next === 'object' && Array.isArray((next as { content?: unknown }).content)\n                    ? ((next as { content: unknown[] }).content)\n                    : []\n                dispatch({ type: 'setRun', run: key, content, coalesceKey: `run:${key}` })\n              }}\n            />\n          </CanvasCommitBoundary>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => dispatch({ type: 'removeRun', run: key })}\n            data-testid=\"run-delete\"\n          >\n            <Trash2 /> {translate('builder.run.delete')}\n          </Button>\n        </Stack>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/cms/asset-field.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { AssetFieldDef, FieldDef } from '@elytracms/core/cms-core';
-import type { AssetRecord } from '@elytracms/core/persistence';
+import type { AssetReadLocale, AssetRecord } from '@elytracms/core/persistence';
 /**
  * The asset-field family (EC-152 + EC-248 + EC-301) — split from
  * `field-control.tsx` (EC-330): the {@link AssetField} control plus its
@@ -33,11 +33,14 @@ export interface PlacementForm {
  * 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 declare function AssetOptionsSections({ record, readOnly, metaFields, meta, onMetaField, focal, onFocalCommit, onFocalPreview, placement, whereUsed, replaceAction, replaced, }: {
+export declare function AssetOptionsSections({ record, readOnly, metaFields, meta, metaLocale, onMetaField, focal, onFocalCommit, onFocalPreview, placement, whereUsed, replaceAction, replaced, }: {
     record: AssetRecord | undefined;
     readOnly: boolean;
     metaFields: readonly FieldDef[];
+    /** The asset metadata form's values, in {@link metaLocale} (EC-632). */
     meta: Record<string, unknown>;
+    /** The locale a `localized: true` field is edited in (EC-632) — shown on its label. */
+    metaLocale?: AssetReadLocale | null;
     onMetaField: (name: string, value: unknown) => void;
     focal: {
         x: number;