@elytracms/studio 0.0.92 → 0.0.94

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { AlertTriangle, Pilcrow, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react';
+import { AlertTriangle, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react';
 import { DEFAULT_SLOT, mergeBlockRoots, splitBlockRoots } from '@elytracms/core/project-graph';
-import { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core';
+import { DRAFT_PERSPECTIVE, fieldAllowList } from '@elytracms/core/cms-core';
 import { Button, Panel, Row, Spacer, Text, Toolbar, ToolbarGroup, ToolbarSeparator } from '@elytracms/studio/ui';
-import { cn } from '@elytracms/studio/lib/utils';
-import { translate } from '@elytracms/studio/lib/i18n';
-import { getStudioRegistry } from '@elytracms/studio/lib/registry';
+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 { useCanvasViewports } from './canvas-breakpoints.js';
 import { BuilderCanvas } from './canvas.js';
@@ -18,6 +18,7 @@ import { insertablePositions, resolveInsertContext, resolveInsertContextAt } fro
 import { InsertAffordanceProvider } from './insert-affordance-context.js';
 import { PropSyncProvider } from './prop-sync-context.js';
 import { ReuseProvider } from './reuse-context.js';
+import { PlacementRefusalNotice } from './placement-refusal.js';
 import { fieldLabel } from '../cms/cms-labels.js';
 /**
  * EC-188 — the block-field surface: one canvas engine mounted on a composition
@@ -69,11 +70,13 @@ export function mergeCompositionValue(roots, preserved) {
 }
 /**
  * The field scope the editor's store carries (EC-554): the field's label (named
- * by refusal notices) and its top-level `allow`, passed through verbatim — an
- * omitted `allow` stays `undefined` (EC-544: any registered component).
+ * by refusal notices) and its EFFECTIVE top-level vocabulary (EC-584 — read through
+ * the per-FieldType definition, `fieldAllowList`: the declared `allow`, else the
+ * `blocks` default, any canvas-eligible component).
  */
 export function compositionFieldScope(field) {
-    return { label: fieldLabel(field), allow: field.allow };
+    // A blocks field always has a vocabulary (its type declares the default).
+    return { label: fieldLabel(field), allow: fieldAllowList(field) };
 }
 /**
  * Wrap the field value's component roots in a synthetic root container (EC-287).
@@ -139,35 +142,22 @@ export function CompositionFieldEditor({ field, value, onChange, readOnly, trail
     const fieldScope = useMemo(() => compositionFieldScope(field), [field]);
     if (!initialRoot)
         return _jsx(NoStackCanvasNotice, {});
-    return (_jsxs(BuilderProvider, { composition: initialRoot, field: fieldScope, layout: layout, children: [_jsx(CompositionLift, { preserved: initial.preserved, onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(PropSyncProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, trailingPanes: trailingPanes, preservedCount: initial.preserved.length, roleNotices: notices, conflicts: conflicts }) }) })] }));
-}
-/**
- * EC-549 interim (scope item 3, the honesty floor): a mixed sequence's typography
- * items are preserved for write-back but NOT rendered on the canvas — and a canvas
- * that silently shows half the sequence lets an editor rearrange around content
- * they cannot see. Until typography items are first-class, path-addressed canvas
- * items (EC-549's main scope), the surface must SAY what it is not showing: a
- * persistent, non-dismissible count above the canvas. Deliberately NOT the
- * dismissible overlay shape (`CanvasThemeNotice`) — this states a standing truth
- * about the VALUE, not a one-time migration hint, and it must not cover blocks.
- */
-export function PreservedItemsNotice({ count }) {
-    if (count === 0)
-        return null;
-    return (_jsxs(Row, { gap: "2", align: "center", "data-testid": "composition-preserved-notice", className: "shrink-0 border-b border-border bg-muted/40 px-3 py-1.5", children: [_jsx(Pilcrow, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx(Text, { size: "xs", tone: "muted", children: translate('builder.composition.preservedNotice', { count }) })] }));
+    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 }) }) })] }));
 }
 /**
  * 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
- * emits the merged v2 sequence value (EC-547) — the canvas roots spliced back
- * between the preserved typography items. Cardinality (`multiple`) no longer
- * shapes the stored value: it is a validation constraint over the one envelope
- * (EC-500 D2), so the bare-object special case for `multiple: false` is gone.
+ * 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).
  */
-function CompositionLift({ preserved, onChange, readOnly, }) {
+function CompositionLift({ onChange, readOnly, }) {
     const builder = useBuilder();
     const blocks = builder.present.slots?.[DEFAULT_SLOT] ?? EMPTY_BLOCKS;
+    const preserved = builder.preserved;
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const baselineRef = useRef(null);
@@ -180,12 +170,13 @@ function CompositionLift({ preserved, onChange, readOnly, }) {
         // discarded on switch.
         if (readOnly)
             return;
-        if (baselineRef.current === null) {
-            baselineRef.current = blocks;
+        const baseline = baselineRef.current;
+        if (baseline === null) {
+            baselineRef.current = { blocks, preserved: preserved };
             return;
         }
-        if (blocks !== baselineRef.current) {
-            baselineRef.current = blocks;
+        if (blocks !== baseline.blocks || preserved !== baseline.preserved) {
+            baselineRef.current = { blocks, preserved: preserved };
             onChangeRef.current(mergeCompositionValue(blocks, preserved));
         }
     }, [blocks, preserved, readOnly]);
@@ -217,13 +208,9 @@ function BreakpointSwitcher() {
  * field. It keeps spatial/preview controls — including the breakpoint
  * preview-width switcher (EC-211), a canvas concern, not a lifecycle one.
  */
-function CompositionEditorShell({ readOnly, trailingPanes, preservedCount = 0, roleNotices, conflicts, }) {
+function CompositionEditorShell({ readOnly, trailingPanes, roleNotices, conflicts, }) {
     const builder = useBuilder();
     const dispatch = builder.dispatch;
-    // The field's top-level component vocabulary (EC-188) — the leash applied to
-    // inserts at the composition root so forbidden components aren't even offered.
-    // Read from the store's field scope (EC-554), the same value DnD and paste judge.
-    const fieldAllow = builder.field.allow;
     const [insertContext, setInsertContext] = useState(null);
     const [insertOpen, setInsertOpen] = useState(false);
     const rootId = builder.present.id;
@@ -246,7 +233,9 @@ function CompositionEditorShell({ readOnly, trailingPanes, preservedCount = 0, r
     // (even empty "No allowed components match") insert dialog. Both now resolve
     // the identical target + allow set for the same selection.
     function openInsert(nodeId) {
-        const ctx = resolveInsertContext(builder, nodeId, fieldAllow);
+        // EC-584: the offer reads the store's placement scope — the field's vocabulary at
+        // the composition root, each slot's below — the same scope the reducer judges by.
+        const ctx = resolveInsertContext(builder, nodeId);
         if (!ctx)
             return;
         if (nodeId !== builder.selectedId)
@@ -260,9 +249,9 @@ function CompositionEditorShell({ readOnly, trailingPanes, preservedCount = 0, r
     // the panel re-deriving it from the selection). Re-memoized on every store change
     // so the closures read the live graph.
     const affordanceApi = useMemo(() => ({
-        positionsFor: (nodeId) => insertablePositions(builder, nodeId, fieldAllow),
+        positionsFor: (nodeId) => insertablePositions(builder, nodeId),
         openAt: (nodeId, position) => {
-            const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow);
+            const ctx = resolveInsertContextAt(builder, nodeId, position);
             if (!ctx)
                 return;
             if (nodeId !== builder.selectedId)
@@ -270,7 +259,7 @@ function CompositionEditorShell({ readOnly, trailingPanes, preservedCount = 0, r
             setInsertContext(ctx);
             setInsertOpen(true);
         },
-    }), [builder, fieldAllow, dispatch]);
-    return (_jsx(InsertAffordanceProvider, { value: affordanceApi, children: _jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border", children: _jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.undo'), title: translate('builder.canvas.undo'), disabled: readOnly || !builder.canUndo, onClick: () => dispatch({ type: 'undo' }), children: _jsx(Undo2, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.redo'), title: translate('builder.canvas.redo'), disabled: readOnly || !builder.canRedo, onClick: () => dispatch({ type: 'redo' }), children: _jsx(Redo2, {}) })] }), _jsx(ToolbarSeparator, {}), _jsxs(Button, { size: "sm", variant: "ghost", disabled: readOnly, onClick: () => openInsert(builder.selectedId ?? rootId), children: [_jsx(Plus, {}), " ", translate('builder.canvas.insert')] }), _jsx(Spacer, {}), _jsx(BreakpointSwitcher, {}), _jsx(Spacer, {})] }) }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border", children: [_jsx(Panel, { className: cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60'), children: _jsx(PageTree, { onAddChild: openInsert }) }), _jsxs("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: [conflicts ? _jsx("div", { className: "shrink-0 border-b border-border p-2", children: conflicts }) : null, _jsx(PreservedItemsNotice, { count: preservedCount }), _jsx(CanvasRoleNotices, { notices: roleNotices ?? [] }), _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : DRAFT_PERSPECTIVE })] }), _jsx(InspectorSidebar, { panes: panes })] }), _jsx(InsertMenu, { context: insertContext, open: insertOpen, onOpenChange: setInsertOpen })] }) }));
+    }), [builder, dispatch]);
+    return (_jsx(InsertAffordanceProvider, { value: affordanceApi, children: _jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border", children: _jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.undo'), title: translate('builder.canvas.undo'), disabled: readOnly || !builder.canUndo, onClick: () => dispatch({ type: 'undo' }), children: _jsx(Undo2, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.redo'), title: translate('builder.canvas.redo'), disabled: readOnly || !builder.canRedo, onClick: () => dispatch({ type: 'redo' }), children: _jsx(Redo2, {}) })] }), _jsx(ToolbarSeparator, {}), _jsxs(Button, { size: "sm", variant: "ghost", disabled: readOnly, onClick: () => openInsert(builder.selectedId ?? rootId), children: [_jsx(Plus, {}), " ", translate('builder.canvas.insert')] }), _jsx(Spacer, {}), _jsx(BreakpointSwitcher, {}), _jsx(Spacer, {})] }) }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border", children: [_jsx(Panel, { className: cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60'), children: _jsx(PageTree, { onAddChild: openInsert }) }), _jsxs("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: [conflicts ? _jsx("div", { className: "shrink-0 border-b border-border p-2", children: conflicts }) : null, _jsx(PlacementRefusalNotice, { refusal: builder.refusal, fieldLabel: builder.field.label, onDismiss: () => dispatch({ type: 'clearRefusal' }) }), _jsx(CanvasRoleNotices, { notices: roleNotices ?? [] }), _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : DRAFT_PERSPECTIVE })] }), _jsx(InspectorSidebar, { panes: panes })] }), _jsx(InsertMenu, { context: insertContext, open: insertOpen, onOpenChange: setInsertOpen })] }) }));
 }
 //# sourceMappingURL=composition-field-editor.js.map

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, Pilcrow, 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 } 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 '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { MessageKey } from '@elytracms/studio/lib/i18n'\nimport { getStudioRegistry } from '@elytracms/studio/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 { 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 top-level `allow`, passed through verbatim — an\n * omitted `allow` stays `undefined` (EC-544: any registered component).\n */\nexport function compositionFieldScope(field: BlocksFieldDef): CompositionFieldScope {\n  return { label: fieldLabel(field), allow: field.allow }\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 composition={initialRoot} field={fieldScope} layout={layout}>\n      <CompositionLift preserved={initial.preserved} 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            preservedCount={initial.preserved.length}\n            roleNotices={notices}\n            conflicts={conflicts}\n          />\n        </PropSyncProvider>\n      </ReuseProvider>\n    </BuilderProvider>\n  )\n}\n\n/**\n * EC-549 interim (scope item 3, the honesty floor): a mixed sequence's typography\n * items are preserved for write-back but NOT rendered on the canvas — and a canvas\n * that silently shows half the sequence lets an editor rearrange around content\n * they cannot see. Until typography items are first-class, path-addressed canvas\n * items (EC-549's main scope), the surface must SAY what it is not showing: a\n * persistent, non-dismissible count above the canvas. Deliberately NOT the\n * dismissible overlay shape (`CanvasThemeNotice`) — this states a standing truth\n * about the VALUE, not a one-time migration hint, and it must not cover blocks.\n */\nexport function PreservedItemsNotice({ count }: { count: number }) {\n  if (count === 0) return null\n  return (\n    <Row\n      gap=\"2\"\n      align=\"center\"\n      data-testid=\"composition-preserved-notice\"\n      className=\"shrink-0 border-b border-border bg-muted/40 px-3 py-1.5\"\n    >\n      <Pilcrow aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('builder.composition.preservedNotice', { count })}\n      </Text>\n    </Row>\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 * emits the merged v2 sequence value (EC-547) — the canvas roots spliced back\n * between the preserved typography items. Cardinality (`multiple`) no longer\n * shapes the stored value: it is a validation constraint over the one envelope\n * (EC-500 D2), so the bare-object special case for `multiple: false` is gone.\n */\nfunction CompositionLift({\n  preserved,\n  onChange,\n  readOnly,\n}: {\n  preserved: readonly PreservedBlockNode[]\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 onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  const baselineRef = useRef<readonly ComponentNode[] | 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    if (baselineRef.current === null) {\n      baselineRef.current = blocks\n      return\n    }\n    if (blocks !== baselineRef.current) {\n      baselineRef.current = blocks\n      onChangeRef.current(mergeCompositionValue(blocks, preserved))\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  preservedCount = 0,\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  /** Preserved (non-component) sequence items the canvas cannot show (EC-549 interim). */\n  preservedCount?: number\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  // The field's top-level component vocabulary (EC-188) — the leash applied to\n  // inserts at the composition root so forbidden components aren't even offered.\n  // Read from the store's field scope (EC-554), the same value DnD and paste judge.\n  const fieldAllow = builder.field.allow\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    const ctx = resolveInsertContext(builder, nodeId, fieldAllow)\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, fieldAllow),\n      openAt: (nodeId: string, position: InsertPosition) => {\n        const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow)\n        if (!ctx) return\n        if (nodeId !== builder.selectedId) dispatch({ type: 'select', id: nodeId })\n        setInsertContext(ctx)\n        setInsertOpen(true)\n      },\n    }),\n    [builder, fieldAllow, 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            <PreservedItemsNotice count={preservedCount} />\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 { 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"]}

package/dist/components/builder/delete-key.d.ts

@@ -23,6 +23,11 @@ export interface DeleteKeyListenerOptions {
     getRootId: () => string | null;
     /** Extra suppression (e.g. a read-only published preview). */
     isDisabled?: () => boolean;
+    /**
+     * EC-549: remove the selected typography RUN, when one is selected (it takes
+     * precedence — a run and a node are never both selected); returns whether it did.
+     */
+    removeSelectedRun?: () => boolean;
 }
 interface ListenerTarget {
     addEventListener(type: string, listener: (e: Event) => void): void;

package/dist/components/builder/delete-key.js

@@ -34,6 +34,10 @@ export function attachDeleteKeyListener(target, opts) {
             return;
         if (isEditingContext(event.target))
             return;
+        if (opts.removeSelectedRun?.()) {
+            event.preventDefault();
+            return;
+        }
         const selectedId = opts.getSelectedId();
         if (!selectedId || selectedId === opts.getRootId())
             return;

package/dist/components/builder/delete-key.js.map

@@ -1 +1 @@
-{"version":3,"file":"delete-key.js","sourceRoot":"","sources":["../../../src/components/builder/delete-key.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D;;;;;;;;GAQG;AAEH;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAA0B;IACzD,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAA;AACtC,CAAC;AAkBD;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACrC,MAAsB,EACtB,IAA8B;IAE9B,MAAM,SAAS,GAAG,CAAC,CAAQ,EAAQ,EAAE;QACnC,MAAM,KAAK,GAAG,CAAkB,CAAA;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;YAAE,OAAM;QAC/D,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;YAAE,OAAM;QAC1D,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,KAAK;YAAE,OAAM;QACxC,IAAI,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC;YAAE,OAAM;QAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,IAAI,CAAC,UAAU,IAAI,UAAU,KAAK,IAAI,CAAC,SAAS,EAAE;YAAE,OAAM;QAC1D,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IACzB,CAAC,CAAA;IACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAC/D,CAAC","sourcesContent":["import { clipboardEventBlocked } from './clipboard-actions'\n\n/**\n * Delete/Backspace removes the selected node (EC-404, scope 3) — the gap the\n * findings batch surfaced: the studio had no keyboard remove at all except cut\n * (⌘X). This sits beside the clipboard listeners (`attachClipboardListeners`),\n * wired on the same two surfaces (the studio window for the page tree, the\n * iframe document for the canvas), and reuses the SAME editing-context guard so\n * pressing Backspace while typing in an input or an inline text/rich-text editor\n * edits the text — never deletes the block.\n */\n\n/**\n * True when a key event's target owns its own text-editing behavior — a form\n * field or any contenteditable (which includes the EC-158/EC-159 inline\n * editors). The single guard for the Delete/Backspace remove, kept identical to\n * the clipboard shortcuts' scope so the two can never disagree.\n */\nexport function isEditingContext(target: EventTarget | null): boolean {\n  return clipboardEventBlocked(target)\n}\n\nexport interface DeleteKeyListenerOptions {\n  /** The current selection — the remove subject. */\n  getSelectedId: () => string | null\n  /** Dispatch the remove (the existing `remove` tree action; one undo restores). */\n  remove: (id: string) => void\n  /** The id that must never be removed (the composition root). */\n  getRootId: () => string | null\n  /** Extra suppression (e.g. a read-only published preview). */\n  isDisabled?: () => boolean\n}\n\ninterface ListenerTarget {\n  addEventListener(type: string, listener: (e: Event) => void): void\n  removeEventListener(type: string, listener: (e: Event) => void): void\n}\n\n/**\n * Wire Delete/Backspace → remove the selected node. Inert when the event\n * targets an editing context, when nothing (or the root) is selected, or when\n * disabled. Modifier combinations are ignored so it never shadows a browser\n * shortcut (⌘Delete etc.).\n */\nexport function attachDeleteKeyListener(\n  target: ListenerTarget,\n  opts: DeleteKeyListenerOptions,\n): () => void {\n  const onKeyDown = (e: Event): void => {\n    const event = e as KeyboardEvent\n    if (event.key !== 'Delete' && event.key !== 'Backspace') return\n    if (event.metaKey || event.ctrlKey || event.altKey) return\n    if (opts.isDisabled?.() ?? false) return\n    if (isEditingContext(event.target)) return\n    const selectedId = opts.getSelectedId()\n    if (!selectedId || selectedId === opts.getRootId()) return\n    event.preventDefault()\n    opts.remove(selectedId)\n  }\n  target.addEventListener('keydown', onKeyDown)\n  return () => target.removeEventListener('keydown', onKeyDown)\n}\n"]}
+{"version":3,"file":"delete-key.js","sourceRoot":"","sources":["../../../src/components/builder/delete-key.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE3D;;;;;;;;GAQG;AAEH;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAA0B;IACzD,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAA;AACtC,CAAC;AAuBD;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACrC,MAAsB,EACtB,IAA8B;IAE9B,MAAM,SAAS,GAAG,CAAC,CAAQ,EAAQ,EAAE;QACnC,MAAM,KAAK,GAAG,CAAkB,CAAA;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;YAAE,OAAM;QAC/D,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;YAAE,OAAM;QAC1D,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,KAAK;YAAE,OAAM;QACxC,IAAI,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC;YAAE,OAAM;QAC1C,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAAE,CAAC;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,OAAM;QACR,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA;QACvC,IAAI,CAAC,UAAU,IAAI,UAAU,KAAK,IAAI,CAAC,SAAS,EAAE;YAAE,OAAM;QAC1D,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IACzB,CAAC,CAAA;IACD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAC/D,CAAC","sourcesContent":["import { clipboardEventBlocked } from './clipboard-actions'\n\n/**\n * Delete/Backspace removes the selected node (EC-404, scope 3) — the gap the\n * findings batch surfaced: the studio had no keyboard remove at all except cut\n * (⌘X). This sits beside the clipboard listeners (`attachClipboardListeners`),\n * wired on the same two surfaces (the studio window for the page tree, the\n * iframe document for the canvas), and reuses the SAME editing-context guard so\n * pressing Backspace while typing in an input or an inline text/rich-text editor\n * edits the text — never deletes the block.\n */\n\n/**\n * True when a key event's target owns its own text-editing behavior — a form\n * field or any contenteditable (which includes the EC-158/EC-159 inline\n * editors). The single guard for the Delete/Backspace remove, kept identical to\n * the clipboard shortcuts' scope so the two can never disagree.\n */\nexport function isEditingContext(target: EventTarget | null): boolean {\n  return clipboardEventBlocked(target)\n}\n\nexport interface DeleteKeyListenerOptions {\n  /** The current selection — the remove subject. */\n  getSelectedId: () => string | null\n  /** Dispatch the remove (the existing `remove` tree action; one undo restores). */\n  remove: (id: string) => void\n  /** The id that must never be removed (the composition root). */\n  getRootId: () => string | null\n  /** Extra suppression (e.g. a read-only published preview). */\n  isDisabled?: () => boolean\n  /**\n   * EC-549: remove the selected typography RUN, when one is selected (it takes\n   * precedence — a run and a node are never both selected); returns whether it did.\n   */\n  removeSelectedRun?: () => boolean\n}\n\ninterface ListenerTarget {\n  addEventListener(type: string, listener: (e: Event) => void): void\n  removeEventListener(type: string, listener: (e: Event) => void): void\n}\n\n/**\n * Wire Delete/Backspace → remove the selected node. Inert when the event\n * targets an editing context, when nothing (or the root) is selected, or when\n * disabled. Modifier combinations are ignored so it never shadows a browser\n * shortcut (⌘Delete etc.).\n */\nexport function attachDeleteKeyListener(\n  target: ListenerTarget,\n  opts: DeleteKeyListenerOptions,\n): () => void {\n  const onKeyDown = (e: Event): void => {\n    const event = e as KeyboardEvent\n    if (event.key !== 'Delete' && event.key !== 'Backspace') return\n    if (event.metaKey || event.ctrlKey || event.altKey) return\n    if (opts.isDisabled?.() ?? false) return\n    if (isEditingContext(event.target)) return\n    if (opts.removeSelectedRun?.()) {\n      event.preventDefault()\n      return\n    }\n    const selectedId = opts.getSelectedId()\n    if (!selectedId || selectedId === opts.getRootId()) return\n    event.preventDefault()\n    opts.remove(selectedId)\n  }\n  target.addEventListener('keydown', onKeyDown)\n  return () => target.removeEventListener('keydown', onKeyDown)\n}\n"]}

package/dist/components/builder/drag-session.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentNode } from '@elytracms/core/project-graph';
-import type { DragSubject } from '@elytracms/studio/lib/dnd/drop-rules';
+import type { DragSubject } from '../../lib/dnd/drop-rules.js';
 /**
  * The one live drag session (EC-160). HTML5 `dataTransfer` payloads are
  * unreadable during `dragover`, so the canvas, page tree, and blocks panel

package/dist/components/builder/drag-session.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-session.js","sourceRoot":"","sources":["../../../src/components/builder/drag-session.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AAEH,6EAA6E;AAC7E,MAAM,CAAC,MAAM,eAAe,GAAG,6BAA6B,CAAA;AAiB5D,IAAI,MAAM,GAAuB,IAAI,CAAA;AACrC,MAAM,YAAY,GAAG,IAAI,GAAG,EAAe,CAAA;AAC3C,MAAM,cAAc,GAAG,IAAI,GAAG,EAAiB,CAAA;AAE/C,uFAAuF;AACvF,MAAM,UAAU,SAAS,CAAC,OAAoB,EAAE,YAAiC;IAC/E,MAAM,GAAG,OAAO,CAAA;IAChB,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACpD,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACjD,YAAY,CAAC,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IAChF,CAAC;IACD,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,cAAc,CAAC;QAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC/D,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,UAAU;IACxB,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,OAAoB;IAC1C,IAAI,CAAC,MAAM;QAAE,OAAM;IACnB,MAAM,OAAO,GAAG,MAAM,CAAA;IACtB,MAAM,GAAG,IAAI,CAAA;IACb,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,YAAY,CAAC;QAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACtE,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,gBAAgB,CAAC,QAAqB;IACpD,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC1B,OAAO,GAAG,EAAE;QACV,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,QAAuB;IACxD,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC5B,OAAO,GAAG,EAAE;QACV,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC,CAAA;AACH,CAAC","sourcesContent":["import type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { DragSubject } from '@elytracms/studio/lib/dnd/drop-rules'\n\n/**\n * The one live drag session (EC-160). HTML5 `dataTransfer` payloads are\n * unreadable during `dragover`, so the canvas, page tree, and blocks panel\n * share this module-level session instead: the source begins it, every\n * surface reads it to resolve drop eligibility (via the pure rules in\n * `lib/dnd/drop-rules`), and exactly one place ends it — the drop handler\n * (`dropped`) or the source's `dragend` (`cancelled`). `endDrag` is\n * idempotent, so the source's trailing `dragend` after a successful drop\n * cannot double-commit or double-notify.\n *\n * The iframe canvas shares the parent window's JS realm (listeners are wired\n * from the parent), so one module instance covers all surfaces.\n */\n\n/** Custom MIME marking Elytra drags (lets surfaces ignore foreign drags). */\nexport const ELYTRA_DND_MIME = 'application/x-elytra-canvas'\n\nexport type DragSource = 'canvas' | 'tree' | 'blocks'\nexport type DragOutcome = 'dropped' | 'cancelled'\n\nexport interface DragSession {\n  subject: DragSubject\n  source: DragSource\n  /** Human label (drag text fallback). */\n  label: string\n  /** For `component` subjects: builds the subtree to insert (ids reassigned by the store). */\n  buildNode?: () => ComponentNode\n}\n\ntype EndListener = (outcome: DragOutcome, session: DragSession) => void\ntype StartListener = (session: DragSession) => void\n\nlet active: DragSession | null = null\nconst endListeners = new Set<EndListener>()\nconst startListeners = new Set<StartListener>()\n\n/** Begin a drag session and stamp the dataTransfer (Firefox requires data to drag). */\nexport function beginDrag(session: DragSession, dataTransfer: DataTransfer | null): void {\n  active = session\n  if (dataTransfer) {\n    dataTransfer.setData(ELYTRA_DND_MIME, session.label)\n    dataTransfer.setData('text/plain', session.label)\n    dataTransfer.effectAllowed = session.subject.kind === 'node' ? 'move' : 'copy'\n  }\n  for (const listener of [...startListeners]) listener(session)\n}\n\n/** The live session, or null when nothing Elytra-owned is being dragged. */\nexport function activeDrag(): DragSession | null {\n  return active\n}\n\n/**\n * End the live session (no-op when none is active) and notify subscribers.\n * Call with `dropped` from the drop handler that dispatched the action, and\n * with `cancelled` from the source's `dragend`.\n */\nexport function endDrag(outcome: DragOutcome): void {\n  if (!active) return\n  const session = active\n  active = null\n  for (const listener of [...endListeners]) listener(outcome, session)\n}\n\n/** Subscribe to session end (indicator cleanup, blocks-panel close-on-drop). */\nexport function onDragSessionEnd(listener: EndListener): () => void {\n  endListeners.add(listener)\n  return () => {\n    endListeners.delete(listener)\n  }\n}\n\n/**\n * Subscribe to session start — fired for EVERY drag source (canvas node, tree\n * row, blocks-panel tile). The canvas insertion affordances (EC-405) use this to\n * hide while a drag is live: the DnD before/after/into indicators own the \"where\n * it lands\" story during a drag, so a competing \"+\" would be noise.\n */\nexport function onDragSessionStart(listener: StartListener): () => void {\n  startListeners.add(listener)\n  return () => {\n    startListeners.delete(listener)\n  }\n}\n"]}
+{"version":3,"file":"drag-session.js","sourceRoot":"","sources":["../../../src/components/builder/drag-session.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;GAYG;AAEH,6EAA6E;AAC7E,MAAM,CAAC,MAAM,eAAe,GAAG,6BAA6B,CAAA;AAiB5D,IAAI,MAAM,GAAuB,IAAI,CAAA;AACrC,MAAM,YAAY,GAAG,IAAI,GAAG,EAAe,CAAA;AAC3C,MAAM,cAAc,GAAG,IAAI,GAAG,EAAiB,CAAA;AAE/C,uFAAuF;AACvF,MAAM,UAAU,SAAS,CAAC,OAAoB,EAAE,YAAiC;IAC/E,MAAM,GAAG,OAAO,CAAA;IAChB,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACpD,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;QACjD,YAAY,CAAC,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IAChF,CAAC;IACD,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,cAAc,CAAC;QAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC/D,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,UAAU;IACxB,OAAO,MAAM,CAAA;AACf,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,OAAoB;IAC1C,IAAI,CAAC,MAAM;QAAE,OAAM;IACnB,MAAM,OAAO,GAAG,MAAM,CAAA;IACtB,MAAM,GAAG,IAAI,CAAA;IACb,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,YAAY,CAAC;QAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AACtE,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,gBAAgB,CAAC,QAAqB;IACpD,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC1B,OAAO,GAAG,EAAE;QACV,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,QAAuB;IACxD,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC5B,OAAO,GAAG,EAAE;QACV,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACjC,CAAC,CAAA;AACH,CAAC","sourcesContent":["import type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { DragSubject } from '../../lib/dnd/drop-rules'\n\n/**\n * The one live drag session (EC-160). HTML5 `dataTransfer` payloads are\n * unreadable during `dragover`, so the canvas, page tree, and blocks panel\n * share this module-level session instead: the source begins it, every\n * surface reads it to resolve drop eligibility (via the pure rules in\n * `lib/dnd/drop-rules`), and exactly one place ends it — the drop handler\n * (`dropped`) or the source's `dragend` (`cancelled`). `endDrag` is\n * idempotent, so the source's trailing `dragend` after a successful drop\n * cannot double-commit or double-notify.\n *\n * The iframe canvas shares the parent window's JS realm (listeners are wired\n * from the parent), so one module instance covers all surfaces.\n */\n\n/** Custom MIME marking Elytra drags (lets surfaces ignore foreign drags). */\nexport const ELYTRA_DND_MIME = 'application/x-elytra-canvas'\n\nexport type DragSource = 'canvas' | 'tree' | 'blocks'\nexport type DragOutcome = 'dropped' | 'cancelled'\n\nexport interface DragSession {\n  subject: DragSubject\n  source: DragSource\n  /** Human label (drag text fallback). */\n  label: string\n  /** For `component` subjects: builds the subtree to insert (ids reassigned by the store). */\n  buildNode?: () => ComponentNode\n}\n\ntype EndListener = (outcome: DragOutcome, session: DragSession) => void\ntype StartListener = (session: DragSession) => void\n\nlet active: DragSession | null = null\nconst endListeners = new Set<EndListener>()\nconst startListeners = new Set<StartListener>()\n\n/** Begin a drag session and stamp the dataTransfer (Firefox requires data to drag). */\nexport function beginDrag(session: DragSession, dataTransfer: DataTransfer | null): void {\n  active = session\n  if (dataTransfer) {\n    dataTransfer.setData(ELYTRA_DND_MIME, session.label)\n    dataTransfer.setData('text/plain', session.label)\n    dataTransfer.effectAllowed = session.subject.kind === 'node' ? 'move' : 'copy'\n  }\n  for (const listener of [...startListeners]) listener(session)\n}\n\n/** The live session, or null when nothing Elytra-owned is being dragged. */\nexport function activeDrag(): DragSession | null {\n  return active\n}\n\n/**\n * End the live session (no-op when none is active) and notify subscribers.\n * Call with `dropped` from the drop handler that dispatched the action, and\n * with `cancelled` from the source's `dragend`.\n */\nexport function endDrag(outcome: DragOutcome): void {\n  if (!active) return\n  const session = active\n  active = null\n  for (const listener of [...endListeners]) listener(outcome, session)\n}\n\n/** Subscribe to session end (indicator cleanup, blocks-panel close-on-drop). */\nexport function onDragSessionEnd(listener: EndListener): () => void {\n  endListeners.add(listener)\n  return () => {\n    endListeners.delete(listener)\n  }\n}\n\n/**\n * Subscribe to session start — fired for EVERY drag source (canvas node, tree\n * row, blocks-panel tile). The canvas insertion affordances (EC-405) use this to\n * hide while a drag is live: the DnD before/after/into indicators own the \"where\n * it lands\" story during a drag, so a competing \"+\" would be noise.\n */\nexport function onDragSessionStart(listener: StartListener): () => void {\n  startListeners.add(listener)\n  return () => {\n    startListeners.delete(listener)\n  }\n}\n"]}

package/dist/components/builder/fixture-thumbnail.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '@elytracms/studio/lib/utils';
+import { cn } from '../../lib/utils.js';
 import { tileMonogram } from './blocks-model.js';
 /**
  * Blocks-panel tile previews (EC-439 AD-2): previews are ARTIFACTS, never

package/dist/components/builder/fixture-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;;;;;;;;;GAYG;AAEH,4FAA4F;AAC5F,MAAM,aAAa,GAAG,wDAAwD,CAAA;AAE9E;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,GAAG,EACH,GAAG,EACH,SAAS,GAOV;IACC,OAAO,CACL,gFAGE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,YAKjC,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG;YACR,sEAAsE;YACtE,8BAA8B;YAC9B,SAAS,EAAE,KAAK,EAChB,SAAS,EAAC,4DAA4D,GACtE,GACE,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAyC;IAC9F,OAAO,CACL,2GAIE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,yBAAyB,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,YAEjC,eAAM,SAAS,EAAC,6HAA6H,YAC1I,YAAY,CAAC,KAAK,CAAC,GACf,GACH,CACP,CAAA;AACH,CAAC","sourcesContent":["import { cn } from '@elytracms/studio/lib/utils'\nimport { tileMonogram } from './blocks-model'\n\n/**\n * Blocks-panel tile previews (EC-439 AD-2): previews are ARTIFACTS, never\n * runtime renders. A tile shows a curated `manifest.previewImage` (EC-409) or\n * an EC-440-generated fixture image through {@link PreviewImageThumbnail}, and\n * falls back to the deliberate icon+name placeholder\n * ({@link PlaceholderThumbnail}) when neither exists. The in-document live\n * fixture render (`ScaledFixtureThumbnail`, EC-164) is gone: since EC-414 the\n * consumer theme lives only in the canvas iframe, so no in-studio-document\n * render of consumer components can ever be styled correctly again.\n *\n * One frame per tile (AD-3): the tile's outer border is the ONLY border — the\n * preview inset is a borderless, tinted, rounded area.\n */\n\n/** The shared borderless 16/10 inset both preview tiers and the placeholder render into. */\nconst INSET_CLASSES = 'relative w-full overflow-hidden rounded-md bg-muted/40'\n\n/**\n * Preview-image tile (EC-409 curated / EC-440 generated): renders the resolved\n * `previewUrl` in the shared 16/10 inset, object-fit cover. The image is never\n * a fetch the engine performs, just an `<img>` with the consumer's URL string;\n * `alt` is the component title (already-localized manifest data).\n */\nexport function PreviewImageThumbnail({\n  src,\n  alt,\n  className,\n}: {\n  /** The resolved preview URL (curated `manifest.previewImage` or a generated artifact), passed through verbatim. */\n  src: string\n  /** The component title (localized manifest data — no new catalog string). */\n  alt: string\n  className?: string\n}) {\n  return (\n    <div\n      data-block-thumbnail\n      data-block-thumbnail-image\n      className={cn(INSET_CLASSES, className)}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {/* Deliberately NOT loading=\"lazy\": native lazy images need rendering\n          frames to trigger (occluded/headless windows never load them), and a\n          tile preview is a small asset. */}\n      <img\n        src={src}\n        alt={alt}\n        // The surrounding tile is the drag source; a natively draggable <img>\n        // would hijack the tile drag.\n        draggable={false}\n        className=\"pointer-events-none h-full w-full select-none object-cover\"\n      />\n    </div>\n  )\n}\n\n/**\n * The icon+name placeholder (EC-439 AD-2, tier 3): a deliberate glyph\n * treatment — a centered two-letter monogram derived from the component title\n * in a muted disc — never an empty box and never a lying render. Decorative\n * only (`aria-hidden`): the tile itself carries the accessible name.\n */\nexport function PlaceholderThumbnail({ title, className }: { title: string; className?: string }) {\n  return (\n    <div\n      aria-hidden\n      data-block-thumbnail\n      data-block-thumbnail-placeholder\n      className={cn(INSET_CLASSES, 'grid place-items-center', className)}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      <span className=\"grid size-10 select-none place-items-center rounded-full bg-muted text-sm font-semibold tracking-wide text-muted-foreground\">\n        {tileMonogram(title)}\n      </span>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"fixture-thumbnail.js","sourceRoot":"","sources":["../../../src/components/builder/fixture-thumbnail.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;;;;;;;;;;GAYG;AAEH,4FAA4F;AAC5F,MAAM,aAAa,GAAG,wDAAwD,CAAA;AAE9E;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,GAAG,EACH,GAAG,EACH,SAAS,GAOV;IACC,OAAO,CACL,gFAGE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,YAKjC,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG;YACR,sEAAsE;YACtE,8BAA8B;YAC9B,SAAS,EAAE,KAAK,EAChB,SAAS,EAAC,4DAA4D,GACtE,GACE,CACP,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAyC;IAC9F,OAAO,CACL,2GAIE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,yBAAyB,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,YAEjC,eAAM,SAAS,EAAC,6HAA6H,YAC1I,YAAY,CAAC,KAAK,CAAC,GACf,GACH,CACP,CAAA;AACH,CAAC","sourcesContent":["import { cn } from '../../lib/utils'\nimport { tileMonogram } from './blocks-model'\n\n/**\n * Blocks-panel tile previews (EC-439 AD-2): previews are ARTIFACTS, never\n * runtime renders. A tile shows a curated `manifest.previewImage` (EC-409) or\n * an EC-440-generated fixture image through {@link PreviewImageThumbnail}, and\n * falls back to the deliberate icon+name placeholder\n * ({@link PlaceholderThumbnail}) when neither exists. The in-document live\n * fixture render (`ScaledFixtureThumbnail`, EC-164) is gone: since EC-414 the\n * consumer theme lives only in the canvas iframe, so no in-studio-document\n * render of consumer components can ever be styled correctly again.\n *\n * One frame per tile (AD-3): the tile's outer border is the ONLY border — the\n * preview inset is a borderless, tinted, rounded area.\n */\n\n/** The shared borderless 16/10 inset both preview tiers and the placeholder render into. */\nconst INSET_CLASSES = 'relative w-full overflow-hidden rounded-md bg-muted/40'\n\n/**\n * Preview-image tile (EC-409 curated / EC-440 generated): renders the resolved\n * `previewUrl` in the shared 16/10 inset, object-fit cover. The image is never\n * a fetch the engine performs, just an `<img>` with the consumer's URL string;\n * `alt` is the component title (already-localized manifest data).\n */\nexport function PreviewImageThumbnail({\n  src,\n  alt,\n  className,\n}: {\n  /** The resolved preview URL (curated `manifest.previewImage` or a generated artifact), passed through verbatim. */\n  src: string\n  /** The component title (localized manifest data — no new catalog string). */\n  alt: string\n  className?: string\n}) {\n  return (\n    <div\n      data-block-thumbnail\n      data-block-thumbnail-image\n      className={cn(INSET_CLASSES, className)}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      {/* Deliberately NOT loading=\"lazy\": native lazy images need rendering\n          frames to trigger (occluded/headless windows never load them), and a\n          tile preview is a small asset. */}\n      <img\n        src={src}\n        alt={alt}\n        // The surrounding tile is the drag source; a natively draggable <img>\n        // would hijack the tile drag.\n        draggable={false}\n        className=\"pointer-events-none h-full w-full select-none object-cover\"\n      />\n    </div>\n  )\n}\n\n/**\n * The icon+name placeholder (EC-439 AD-2, tier 3): a deliberate glyph\n * treatment — a centered two-letter monogram derived from the component title\n * in a muted disc — never an empty box and never a lying render. Decorative\n * only (`aria-hidden`): the tile itself carries the accessible name.\n */\nexport function PlaceholderThumbnail({ title, className }: { title: string; className?: string }) {\n  return (\n    <div\n      aria-hidden\n      data-block-thumbnail\n      data-block-thumbnail-placeholder\n      className={cn(INSET_CLASSES, 'grid place-items-center', className)}\n      style={{ aspectRatio: '16 / 10' }}\n    >\n      <span className=\"grid size-10 select-none place-items-center rounded-full bg-muted text-sm font-semibold tracking-wide text-muted-foreground\">\n        {tileMonogram(title)}\n      </span>\n    </div>\n  )\n}\n"]}

package/dist/components/builder/insert-context.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentNode } from '@elytracms/core/project-graph';
-import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { ComponentNode, PlacementScope } from '@elytracms/core/project-graph';
+import type { StudioRegistry } from '../../lib/registry/index.js';
 import type { InsertContext } from './insert-menu.js';
 /**
  * Where an insert lands: the canvas insert-context resolution, shared by every
@@ -9,22 +9,18 @@ import type { InsertContext } from './insert-menu.js';
  * Canvas editor (`composition-field-editor.tsx`, EC-188/AD-12) can own it without
  * importing the dead shell. No UI here — pure graph/registry resolution.
  */
+/** What the resolution reads from the builder store: the tree and its placement scope (EC-584). */
+export interface InsertScope {
+    present: ComponentNode;
+    placement: PlacementScope;
+}
 /**
- * Resolve where an insert lands: into the node's child slot, else as a sibling.
- *
- * `fieldAllow` (EC-188) is the composition field's TOP-LEVEL vocabulary
- * (`field.allow`). It constrains ONLY inserts that land as a direct child of the
- * active page root — the top level of a composition field value — where it is
- * intersected into `slotAllow` so forbidden components are never even offered,
- * mirroring the top-level leash in `validateCompositionValue`. Deeper inserts keep
- * following each component's own slot `allow`. Callers that omit `fieldAllow` get
- * an unconstrained top level. EC-554: which placements the field governs is read
- * through `fieldAllowAt` — the SAME reader drag-and-drop and paste judge with, so
- * the offer and the placement can never disagree.
+ * Resolve where an insert lands: into the node's child slot, else as a sibling. The
+ * offered vocabulary is the landing position's (see {@link contextAt}) — the SAME
+ * reader the reducer, drag-and-drop and paste judge with, so the offer and the
+ * placement can never disagree.
  */
-export declare function resolveInsertContext(builder: {
-    present: ComponentNode;
-}, nodeId: string, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertContext | null;
+export declare function resolveInsertContext(builder: InsertScope, nodeId: string, studio?: StudioRegistry): InsertContext | null;
 /**
  * An in-canvas insertion position relative to a reference node (EC-405) — the
  * DnD position vocabulary (`lib/dnd/drop-rules`), narrowed to the three the
@@ -42,17 +38,15 @@ export type InsertPosition = 'before' | 'after' | 'into';
  * {@link primaryInsertSlot} (the same slot a drop `into` picks; `null` when the
  * node accepts no children), `before`/`after` use the reference's parent slot at
  * `index`/`index + 1` — so this surface and drag-insert can never disagree about
- * where a position lands or what it allows. `fieldAllow` (EC-188) still constrains
- * ONLY a direct child of the composition root, mirroring `resolveInsertContext`.
+ * where a position lands or what it allows (EC-584: the vocabulary is `allowAt`'s,
+ * exactly as in `resolveInsertContext`).
  */
-export declare function resolveInsertContextAt(builder: {
-    present: ComponentNode;
-}, nodeId: string, position: InsertPosition, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertContext | null;
+export declare function resolveInsertContextAt(builder: InsertScope, nodeId: string, position: InsertPosition, studio?: StudioRegistry): InsertContext | null;
 /**
  * Which affordance positions are actually insertable at `nodeId` (EC-405 scope 3):
  * a position is offered only when it structurally exists AND at least one registry
- * component may land there (the SAME slot-rule filter the tree/DnD and the blocks
- * panel apply — {@link hasInsertableComponent} over the resolved `slotAllow`), so a
+ * component may land there (the SAME judge the tree/DnD, the blocks panel and the
+ * reducer apply — {@link hasInsertableComponent} over the resolved `allow`), so a
  * blocked spot shows no dead button.
  *
  * An EMPTY, insertable container surfaces ONLY `into` — the meaningful action there
@@ -62,6 +56,4 @@ export declare function resolveInsertContextAt(builder: {
  * child already carries its own edge affordances, so a filled container needs no
  * center "+").
  */
-export declare function insertablePositions(builder: {
-    present: ComponentNode;
-}, nodeId: string, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertPosition[];
+export declare function insertablePositions(builder: InsertScope, nodeId: string, studio?: StudioRegistry): InsertPosition[];