@elytracms/studio 0.0.64 → 0.0.66

package/dist/components/builder/canvas.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { renderPageComposition } from '@elytracms/core/runtime-renderer';
+import { renderPageComposition, setEditingMarkers } from '@elytracms/core/runtime-renderer';
+import { getNode } from '@elytracms/core/project-graph';
 import { useParams } from '@elytracms/studio/router';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
@@ -12,13 +13,23 @@ import { CanvasThemeNotice } from './canvas-theme-notice.js';
 import { getCanvasStylesheetUrl } from './canvas-stylesheet.js';
 import { useBuilder } from './builder-store.js';
 import { useCanvasViewports, viewportWidth } from './canvas-breakpoints.js';
-import { nodeIdAt } from './canvas-dom.js';
+import { nodeIdAt, wrapperAt } from './canvas-dom.js';
 import { useCanvasDnd } from './canvas-dnd.js';
 import { useCanvasInlineEditing } from './canvas-inline-editing.js';
 import { useCanvasRenderContext } from './canvas-render-context.js';
 import { ClipboardNoticeOverlay, attachClipboardListeners, useStudioClipboard, } from './clipboard-actions.js';
 import { RichTextToolbar } from './rich-text-toolbar.js';
 import { SpacingHandles, hasSpacingHandles } from './spacing-handles.js';
+import { SelectionOverlay } from './selection-overlay.js';
+import { attachDeleteKeyListener } from './delete-key.js';
+import { usePropSync } from './prop-sync-context.js';
+import { resolvePropClick } from './prop-selection.js';
+// EC-408: the studio canvas is the ONE surface that turns editing markers on, so
+// `ecProp` in the base primitives emits `data-ec-prop` here. Delivery
+// (`@elytracms/next`) is a separate build that never imports this module, so its
+// singleton stays off and shipped pages carry zero marker noise. Module-level
+// (not an effect) so markers are on before the first primitive renders.
+setEditingMarkers(true);
 /**
  * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders
  * into a same-origin iframe via a React portal — true style isolation + true
@@ -88,7 +99,13 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
     // live session ref other listeners consult, the rich-text host (mark
     // toolbar), and the per-node remount epochs (decorate keys).
     const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio });
-    const { editingRef, richEditHost, richEditEpochs } = inline;
+    const { editingRef, richEditHost, richEditEpochs, editing } = inline;
+    // EC-408: the field↔component sync channel (null in the component preview,
+    // which has no inspector). Read live through a ref — the native iframe
+    // listeners outlive renders.
+    const propSync = usePropSync();
+    const propSyncRef = useRef(propSync);
+    propSyncRef.current = propSync;
     // Native selection/hover listeners inside the iframe document.
     useEffect(() => {
         if (!doc)
@@ -97,11 +114,28 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
             // Clicks inside the active inline editor are caret moves, not selection.
             if (editingRef.current?.host.contains(e.target))
                 return;
-            const id = nodeIdAt(e.target);
-            if (id) {
-                e.preventDefault();
-                dispatch({ type: 'select', id });
-            }
+            const wrapper = wrapperAt(e.target);
+            if (!wrapper)
+                return;
+            const id = wrapper.getAttribute('data-ec-node-id');
+            e.preventDefault();
+            dispatch({ type: 'select', id });
+            // EC-408: resolve the clicked sub-part to its `data-ec-prop` and, unless it
+            // is inline-editable (inline editing stays primary), ask the inspector to
+            // focus that prop's control. Unannotated components resolve no marker → the
+            // node-level select above is the whole behavior, exactly as before.
+            const sync = propSyncRef.current;
+            if (!sync)
+                return;
+            const node = getNode(presentRef.current, id);
+            const manifest = node ? studio.registry.getManifest(node.componentId) : undefined;
+            const { propName, focusField } = resolvePropClick({
+                target: e.target,
+                wrapper,
+                manifest,
+            });
+            if (propName && focusField)
+                sync.requestFocus({ nodeId: id, propName });
         };
         const onOver = (e) => dispatch({ type: 'hover', id: nodeIdAt(e.target) });
         const onLeave = () => dispatch({ type: 'hover', id: null });
@@ -113,7 +147,7 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
             doc.removeEventListener('mouseover', onOver);
             doc.removeEventListener('mouseleave', onLeave, true);
         };
-    }, [doc, dispatch, editingRef]);
+    }, [doc, dispatch, editingRef, presentRef, studio]);
     // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.
     useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef });
     // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page
@@ -133,6 +167,18 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
             getSelection: () => doc.getSelection(),
         });
     }, [doc, clipboard, editingRef]);
+    // Delete/Backspace removes the selected node (EC-404) — the keyboard remove
+    // the studio was missing, wired beside the clipboard listeners on the iframe
+    // document, guarded so typing in an inline editor edits text instead.
+    useEffect(() => {
+        if (!doc)
+            return;
+        return attachDeleteKeyListener(doc, {
+            getSelectedId: () => selectedIdRef.current,
+            remove: (id) => dispatch({ type: 'remove', id }),
+            getRootId: () => presentRef.current.id,
+        });
+    }, [doc, dispatch]);
     // The render context: the seven delivery-parity resolvers + the editable-
     // wrapper decorator (selection/hover, locale chips, remount epochs) — see
     // `canvas-render-context`.
@@ -145,8 +191,11 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
         richEditEpochs,
     });
     // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children
-    // gets draggable gap handles between them, portaled into the iframe.
-    const spacingTarget = doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)
+    // gets draggable gap handles between them, portaled into the iframe. Suppressed
+    // while an inline text/rich-text edit owns the node (EC-406 scope 4) — the
+    // [data-ec-editing] outline owns that state, exactly as the selection overlay
+    // yields; a content-drag is suppressed inside SpacingHandles via the drag session.
+    const spacingTarget = doc && !editing && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)
         ? builder.selectedNode
         : null;
     // EC-250: the preview frame width derives from the config-sourced breakpoints
@@ -158,6 +207,6 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
                         // Render the composition root directly (EC-287: no layout
                         // indirection — a page renders its blocks).
                         renderPageComposition(activeRoot, ctx), doc.body)
-                        : null, spacingTarget && doc ? (_jsx(SpacingHandles, { doc: doc, node: spacingTarget }, spacingTarget.id)) : null, richEditHost && doc ? _jsx(RichTextToolbar, { doc: doc, host: richEditHost }) : null] })] }));
+                        : null, doc ? _jsx(SelectionOverlay, { doc: doc, editing: editing }) : null, spacingTarget && doc ? (_jsx(SpacingHandles, { doc: doc, node: spacingTarget }, spacingTarget.id)) : null, richEditHost && doc ? _jsx(RichTextToolbar, { doc: doc, host: richEditHost }) : null] })] }));
 }
 //# sourceMappingURL=canvas.js.map

package/dist/components/builder/canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAA;AAC/E,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAGrE;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,WAAW,GAAG,OAAO,MAMnB,EAAE;IACJ,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAC5B,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAElC,gFAAgF;IAChF,6EAA6E;IAC7E,uDAAuD;IACvD,MAAM,UAAU,GAAkB,OAAO,CAAC,OAAO,CAAA;IACjD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAA;IAErD,0EAA0E;IAC1E,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;IACpC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;IAChD,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAA;IAE1C,gGAAgG;IAChG,+EAA+E;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAA2B,CAAA;IACrE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnG,8EAA8E;IAC9E,yEAAyE;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAA;IAE9E,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,eAAe,CAAA;QAC5C,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YAAE,OAAM;QACzB,wEAAwE;QACxE,2EAA2E;QAC3E,0EAA0E;QAC1E,gEAAgE;QAChE,qEAAqE;QACrE,sEAAsE;QACtE,2EAA2E;QAC3E,wEAAwE;QACxE,0EAA0E;QAC1E,sEAAsE;QACtE,2EAA2E;QAC3E,yEAAyE;QACzE,uEAAuE;QACvE,mEAAmE;QACnE,0CAA0C;QAC1C,gBAAgB,CAAC,CAAC,EAAE;YAClB,aAAa,EAAE,sBAAsB,EAAE;YACvC,YAAY;YACZ,KAAK,EAAE,4BAA4B,EAAE;YACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CACnB,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACzE,CAAC,CAAA;QACF,MAAM,CAAC,CAAC,CAAC,CAAA;IACX,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,KAAK,UAAU;YAAE,MAAM,EAAE,CAAA;IAC7E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,0EAA0E;IAC1E,qEAAqE;IACrE,6DAA6D;IAC7D,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAA;IAC5E,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,MAAM,CAAA;IAE3D,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,yEAAyE;YACzE,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAM;YAC/D,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;YAC7B,IAAI,EAAE,EAAE,CAAC;gBACP,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;YAClC,CAAC;QACH,CAAC,CAAA;QACD,MAAM,MAAM,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAChF,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3D,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QAC5C,GAAG,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QACzC,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACjD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;YAC/C,GAAG,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;YAC5C,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAE/B,gEAAgE;IAChE,YAAY,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAA;IAE/D,4EAA4E;IAC5E,0EAA0E;IAC1E,4EAA4E;IAC5E,uEAAuE;IACvE,8DAA8D;IAC9D,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,OAAO,wBAAwB,CAAC,GAAG,EAAE;YACnC,SAAS;YACT,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO;YAC1C,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,KAAK,IAAI;YAC5C,cAAc,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,SAAS;YACpD,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE;SACvC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAEhC,0EAA0E;IAC1E,0EAA0E;IAC1E,2BAA2B;IAC3B,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,sBAAsB,CAAC;QAClD,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,MAAM;QACN,WAAW;QACX,cAAc;KACf,CAAC,CAAA;IAEF,6EAA6E;IAC7E,qEAAqE;IACrE,MAAM,aAAa,GACjB,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACxF,CAAC,CAAC,OAAO,CAAC,YAAY;QACtB,CAAC,CAAC,IAAI,CAAA;IAEV,8EAA8E;IAC9E,2EAA2E;IAC3E,mBAAmB;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE1C,OAAO,CACL,eAAK,SAAS,EAAC,yFAAyF,aAEtG,KAAC,sBAAsB,KAAG,EAE1B,KAAC,iBAAiB,IAAC,MAAM,EAAE,WAAW,GAAI,EAC1C,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,MAAM,aACnG,iBACE,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,SAAS,CAAC,4BAA4B,CAAC,EAC9C,SAAS,EAAC,8EAA8E,EACxF,MAAM,EAAC,wDAAwD,GAC/D,EACD,GAAG;wBACF,CAAC,CAAC,YAAY;wBACV,0DAA0D;wBAC1D,4CAA4C;wBAC5C,qBAAqB,CAAC,UAAU,EAAE,GAAG,CAAC,EACtC,GAAG,CAAC,IAAI,CACT;wBACH,CAAC,CAAC,IAAI,EACP,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CACtB,KAAC,cAAc,IAAwB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,IAA/C,aAAa,CAAC,EAAE,CAAmC,CACzE,CAAC,CAAC,CAAC,IAAI,EAEP,YAAY,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IAC3E,IACF,CACP,CAAA;AACH,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { wireCanvasChrome } from './canvas-chrome'\nimport type { CanvasThemeStatus } from './canvas-chrome'\nimport { CanvasThemeNotice } from './canvas-theme-notice'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /\n  // broken stylesheet) drives the dev-only, never-blocking notice overlay.\n  const [themeStatus, setThemeStatus] = useState<CanvasThemeStatus | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet (new world: the chrome's neutral backdrop; legacy\n    // world: the studio `:root` tokens) supplies that backdrop once `.dark` is\n    // never added here (mirrors the components-preview surface, which wires\n    // through the same chrome). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than tokens, so it stays visible against a light\n    // page regardless. The full injection — stylesheet link, editing chrome,\n    // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,\n    // injected LAST so it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs } = inline\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const id = nodeIdAt(e.target)\n      if (id) {\n        e.preventDefault()\n        dispatch({ type: 'select', id })\n      }\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe.\n  const spacingTarget =\n    doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      {/* Canvas-theme classification notice (EC-414 AD-D): dev-only, never blocks. */}\n      <CanvasThemeNotice status={themeStatus} />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition, setEditingMarkers } from '@elytracms/core/runtime-renderer'\nimport { getNode } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { wireCanvasChrome } from './canvas-chrome'\nimport type { CanvasThemeStatus } from './canvas-chrome'\nimport { CanvasThemeNotice } from './canvas-theme-notice'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt, wrapperAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\nimport { SelectionOverlay } from './selection-overlay'\nimport { attachDeleteKeyListener } from './delete-key'\nimport { usePropSync } from './prop-sync-context'\nimport { resolvePropClick } from './prop-selection'\n\n// EC-408: the studio canvas is the ONE surface that turns editing markers on, so\n// `ecProp` in the base primitives emits `data-ec-prop` here. Delivery\n// (`@elytracms/next`) is a separate build that never imports this module, so its\n// singleton stays off and shipped pages carry zero marker noise. Module-level\n// (not an effect) so markers are on before the first primitive renders.\nsetEditingMarkers(true)\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /\n  // broken stylesheet) drives the dev-only, never-blocking notice overlay.\n  const [themeStatus, setThemeStatus] = useState<CanvasThemeStatus | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet (new world: the chrome's neutral backdrop; legacy\n    // world: the studio `:root` tokens) supplies that backdrop once `.dark` is\n    // never added here (mirrors the components-preview surface, which wires\n    // through the same chrome). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than tokens, so it stays visible against a light\n    // page regardless. The full injection — stylesheet link, editing chrome,\n    // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,\n    // injected LAST so it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs, editing } = inline\n\n  // EC-408: the field↔component sync channel (null in the component preview,\n  // which has no inspector). Read live through a ref — the native iframe\n  // listeners outlive renders.\n  const propSync = usePropSync()\n  const propSyncRef = useRef(propSync)\n  propSyncRef.current = propSync\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const wrapper = wrapperAt(e.target)\n      if (!wrapper) return\n      const id = wrapper.getAttribute('data-ec-node-id')!\n      e.preventDefault()\n      dispatch({ type: 'select', id })\n      // EC-408: resolve the clicked sub-part to its `data-ec-prop` and, unless it\n      // is inline-editable (inline editing stays primary), ask the inspector to\n      // focus that prop's control. Unannotated components resolve no marker → the\n      // node-level select above is the whole behavior, exactly as before.\n      const sync = propSyncRef.current\n      if (!sync) return\n      const node = getNode(presentRef.current, id)\n      const manifest = node ? studio.registry.getManifest(node.componentId) : undefined\n      const { propName, focusField } = resolvePropClick({\n        target: e.target as Element | null,\n        wrapper,\n        manifest,\n      })\n      if (propName && focusField) sync.requestFocus({ nodeId: id, propName })\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef, presentRef, studio])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // Delete/Backspace removes the selected node (EC-404) — the keyboard remove\n  // the studio was missing, wired beside the clipboard listeners on the iframe\n  // document, guarded so typing in an inline editor edits text instead.\n  useEffect(() => {\n    if (!doc) return\n    return attachDeleteKeyListener(doc, {\n      getSelectedId: () => selectedIdRef.current,\n      remove: (id) => dispatch({ type: 'remove', id }),\n      getRootId: () => presentRef.current.id,\n    })\n  }, [doc, dispatch])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe. Suppressed\n  // while an inline text/rich-text edit owns the node (EC-406 scope 4) — the\n  // [data-ec-editing] outline owns that state, exactly as the selection overlay\n  // yields; a content-drag is suppressed inside SpacingHandles via the drag session.\n  const spacingTarget =\n    doc && !editing && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      {/* Canvas-theme classification notice (EC-414 AD-D): dev-only, never blocks. */}\n      <CanvasThemeNotice status={themeStatus} />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {/* Selection/hover frames + frame controls, topmost over the page (EC-404). */}\n        {doc ? <SelectionOverlay doc={doc} editing={editing} /> : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}

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

@@ -12,7 +12,9 @@ import { PageTree } from './page-tree.js';
 import { PropertyInspector } from './property-inspector.js';
 import { InspectorSidebar } from '../inspector/inspector-sidebar.js';
 import { InsertMenu } from './insert-menu.js';
-import { resolveInsertContext } from './insert-context.js';
+import { insertablePositions, resolveInsertContext, resolveInsertContextAt } from './insert-context.js';
+import { InsertAffordanceProvider } from './insert-affordance-context.js';
+import { PropSyncProvider } from './prop-sync-context.js';
 import { ReuseProvider } from './reuse-context.js';
 /**
  * EC-188 — the block-field surface: one canvas engine mounted on a composition
@@ -54,7 +56,7 @@ export function CompositionFieldEditor({ field, value, onChange, readOnly, trail
     // (BuilderProvider reads `composition` only in its lazy initial state, so later
     // prop changes are ignored regardless.)
     const initialRoot = useMemo(() => buildSyntheticRoot(value), []);
-    return (_jsxs(BuilderProvider, { composition: initialRoot, children: [_jsx(CompositionLift, { multiple: field.multiple, onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, fieldAllow: field.allow, trailingPanes: trailingPanes }) })] }));
+    return (_jsxs(BuilderProvider, { composition: initialRoot, children: [_jsx(CompositionLift, { multiple: field.multiple, onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(PropSyncProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, fieldAllow: field.allow, trailingPanes: trailingPanes }) }) })] }));
 }
 /**
  * Lifts committed edits out of the scoped store into the CMS draft. The first
@@ -147,6 +149,23 @@ function CompositionEditorShell({ readOnly, fieldAllow, trailingPanes, }) {
         setInsertContext(ctx);
         setInsertOpen(true);
     }
-    return (_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 }) }), _jsx("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : 'draft' }) }), _jsx(InspectorSidebar, { panes: panes })] }), _jsx(InsertMenu, { context: insertContext, open: insertOpen, onOpenChange: setInsertOpen })] }));
+    // EC-405: the in-canvas "+" affordances resolve the SAME slot rules through the
+    // shared position-carrying insert-context resolution, and open the panel at the
+    // clicked edge (an explicit position that survives to the insertion, rather than
+    // 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),
+        openAt: (nodeId, position) => {
+            const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow);
+            if (!ctx)
+                return;
+            if (nodeId !== builder.selectedId)
+                dispatch({ type: 'select', id: nodeId });
+            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 }) }), _jsx("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : 'draft' }) }), _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 { AlertTriangle, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react'\nimport { DEFAULT_SLOT, blockRootsOf } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { BlocksFieldDef } from '@elytracms/core/cms-core'\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 { BuilderProvider, useBuilder } 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 { resolveInsertContext } from './insert-context'\nimport { ReuseProvider } from './reuse-context'\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()`). 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/** The implicit root container the field's blocks compose inside (like a page root). */\nconst SYNTH_ROOT_COMPONENT = 'base.Stack'\n\n/**\n * Wrap the field value's blocks into a synthetic root container (EC-287). The\n * builder store edits this single root-bearing composition directly; its\n * children are the field's blocks, lifted back out via `onChange`.\n */\nfunction buildSyntheticRoot(value: unknown): ComponentNode {\n  return {\n    id: SYNTH_ROOT_ID,\n    componentId: SYNTH_ROOT_COMPONENT,\n    slots: { [DEFAULT_SLOT]: blockRootsOf(value) },\n  }\n}\n\n/** Unwrap the synthetic root's children back to a field value per cardinality. */\nfunction unwrapValue(blocks: readonly ComponentNode[], multiple: boolean): unknown {\n  return multiple ? [...blocks] : blocks[0]\n}\n\nexport function CompositionFieldEditor({\n  field,\n  value,\n  onChange,\n  readOnly,\n  trailingPanes,\n}: {\n  field: BlocksFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\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  // Build the synthetic root ONCE from the value at mount. The editor is\n  // uncontrolled thereafter — it is the source of truth while open and lifts\n  // changes out via onChange; re-opening the tab remounts from the current draft.\n  // (BuilderProvider reads `composition` only in its lazy initial state, so later\n  // prop changes are ignored regardless.)\n  const initialRoot = useMemo(() => buildSyntheticRoot(value), [])\n\n  return (\n    <BuilderProvider composition={initialRoot}>\n      <CompositionLift multiple={field.multiple} onChange={onChange} readOnly={readOnly} />\n      <ReuseProvider>\n        <CompositionEditorShell\n          readOnly={readOnly}\n          fieldAllow={field.allow}\n          trailingPanes={trailingPanes}\n        />\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 * emits the unwrapped value.\n */\nfunction CompositionLift({\n  multiple,\n  onChange,\n  readOnly,\n}: {\n  multiple: boolean\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(unwrapValue(blocks, multiple))\n    }\n  }, [blocks, multiple, 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  fieldAllow,\n  trailingPanes,\n}: {\n  readOnly: boolean\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  fieldAllow?: readonly string[]\n  /** Document-level panes appended after `Properties` (EC-224). */\n  trailingPanes?: readonly InspectorPane[]\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\n          className={cn(\n            'h-full min-h-0 overflow-hidden',\n            readOnly && 'pointer-events-none opacity-60',\n          )}\n        >\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  return (\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\n          className={cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60')}\n        >\n          <PageTree onAddChild={openInsert} />\n        </Panel>\n        <div\n          className={cn(\n            'flex min-h-0 flex-col bg-background',\n            readOnly && 'pointer-events-none opacity-60',\n          )}\n        >\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'} />\n        </div>\n        <InspectorSidebar panes={panes} />\n      </div>\n\n      <InsertMenu context={insertContext} open={insertOpen} onOpenChange={setInsertOpen} />\n    </div>\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 { AlertTriangle, Plus, Redo2, SlidersHorizontal, Undo2 } from 'lucide-react'\nimport { DEFAULT_SLOT, blockRootsOf } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { BlocksFieldDef } from '@elytracms/core/cms-core'\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 { BuilderProvider, useBuilder } 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'\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()`). 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/** The implicit root container the field's blocks compose inside (like a page root). */\nconst SYNTH_ROOT_COMPONENT = 'base.Stack'\n\n/**\n * Wrap the field value's blocks into a synthetic root container (EC-287). The\n * builder store edits this single root-bearing composition directly; its\n * children are the field's blocks, lifted back out via `onChange`.\n */\nfunction buildSyntheticRoot(value: unknown): ComponentNode {\n  return {\n    id: SYNTH_ROOT_ID,\n    componentId: SYNTH_ROOT_COMPONENT,\n    slots: { [DEFAULT_SLOT]: blockRootsOf(value) },\n  }\n}\n\n/** Unwrap the synthetic root's children back to a field value per cardinality. */\nfunction unwrapValue(blocks: readonly ComponentNode[], multiple: boolean): unknown {\n  return multiple ? [...blocks] : blocks[0]\n}\n\nexport function CompositionFieldEditor({\n  field,\n  value,\n  onChange,\n  readOnly,\n  trailingPanes,\n}: {\n  field: BlocksFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\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  // Build the synthetic root ONCE from the value at mount. The editor is\n  // uncontrolled thereafter — it is the source of truth while open and lifts\n  // changes out via onChange; re-opening the tab remounts from the current draft.\n  // (BuilderProvider reads `composition` only in its lazy initial state, so later\n  // prop changes are ignored regardless.)\n  const initialRoot = useMemo(() => buildSyntheticRoot(value), [])\n\n  return (\n    <BuilderProvider composition={initialRoot}>\n      <CompositionLift multiple={field.multiple} 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 readOnly={readOnly} fieldAllow={field.allow} trailingPanes={trailingPanes} />\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 * emits the unwrapped value.\n */\nfunction CompositionLift({\n  multiple,\n  onChange,\n  readOnly,\n}: {\n  multiple: boolean\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(unwrapValue(blocks, multiple))\n    }\n  }, [blocks, multiple, 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  fieldAllow,\n  trailingPanes,\n}: {\n  readOnly: boolean\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  fieldAllow?: readonly string[]\n  /** Document-level panes appended after `Properties` (EC-224). */\n  trailingPanes?: readonly InspectorPane[]\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    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            {/* 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'} />\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

@@ -0,0 +1,38 @@
+/**
+ * Delete/Backspace removes the selected node (EC-404, scope 3) — the gap the
+ * findings batch surfaced: the studio had no keyboard remove at all except cut
+ * (⌘X). This sits beside the clipboard listeners (`attachClipboardListeners`),
+ * wired on the same two surfaces (the studio window for the page tree, the
+ * iframe document for the canvas), and reuses the SAME editing-context guard so
+ * pressing Backspace while typing in an input or an inline text/rich-text editor
+ * edits the text — never deletes the block.
+ */
+/**
+ * True when a key event's target owns its own text-editing behavior — a form
+ * field or any contenteditable (which includes the EC-158/EC-159 inline
+ * editors). The single guard for the Delete/Backspace remove, kept identical to
+ * the clipboard shortcuts' scope so the two can never disagree.
+ */
+export declare function isEditingContext(target: EventTarget | null): boolean;
+export interface DeleteKeyListenerOptions {
+    /** The current selection — the remove subject. */
+    getSelectedId: () => string | null;
+    /** Dispatch the remove (the existing `remove` tree action; one undo restores). */
+    remove: (id: string) => void;
+    /** The id that must never be removed (the composition root). */
+    getRootId: () => string | null;
+    /** Extra suppression (e.g. a read-only published preview). */
+    isDisabled?: () => boolean;
+}
+interface ListenerTarget {
+    addEventListener(type: string, listener: (e: Event) => void): void;
+    removeEventListener(type: string, listener: (e: Event) => void): void;
+}
+/**
+ * Wire Delete/Backspace → remove the selected node. Inert when the event
+ * targets an editing context, when nothing (or the root) is selected, or when
+ * disabled. Modifier combinations are ignored so it never shadows a browser
+ * shortcut (⌘Delete etc.).
+ */
+export declare function attachDeleteKeyListener(target: ListenerTarget, opts: DeleteKeyListenerOptions): () => void;
+export {};

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

@@ -0,0 +1,46 @@
+import { clipboardEventBlocked } from './clipboard-actions.js';
+/**
+ * Delete/Backspace removes the selected node (EC-404, scope 3) — the gap the
+ * findings batch surfaced: the studio had no keyboard remove at all except cut
+ * (⌘X). This sits beside the clipboard listeners (`attachClipboardListeners`),
+ * wired on the same two surfaces (the studio window for the page tree, the
+ * iframe document for the canvas), and reuses the SAME editing-context guard so
+ * pressing Backspace while typing in an input or an inline text/rich-text editor
+ * edits the text — never deletes the block.
+ */
+/**
+ * True when a key event's target owns its own text-editing behavior — a form
+ * field or any contenteditable (which includes the EC-158/EC-159 inline
+ * editors). The single guard for the Delete/Backspace remove, kept identical to
+ * the clipboard shortcuts' scope so the two can never disagree.
+ */
+export function isEditingContext(target) {
+    return clipboardEventBlocked(target);
+}
+/**
+ * Wire Delete/Backspace → remove the selected node. Inert when the event
+ * targets an editing context, when nothing (or the root) is selected, or when
+ * disabled. Modifier combinations are ignored so it never shadows a browser
+ * shortcut (⌘Delete etc.).
+ */
+export function attachDeleteKeyListener(target, opts) {
+    const onKeyDown = (e) => {
+        const event = e;
+        if (event.key !== 'Delete' && event.key !== 'Backspace')
+            return;
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        if (opts.isDisabled?.() ?? false)
+            return;
+        if (isEditingContext(event.target))
+            return;
+        const selectedId = opts.getSelectedId();
+        if (!selectedId || selectedId === opts.getRootId())
+            return;
+        event.preventDefault();
+        opts.remove(selectedId);
+    };
+    target.addEventListener('keydown', onKeyDown);
+    return () => target.removeEventListener('keydown', onKeyDown);
+}
+//# sourceMappingURL=delete-key.js.map

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

@@ -0,0 +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"]}

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

@@ -26,6 +26,7 @@ export interface DragSession {
     buildNode?: () => ComponentNode;
 }
 type EndListener = (outcome: DragOutcome, session: DragSession) => void;
+type StartListener = (session: DragSession) => void;
 /** Begin a drag session and stamp the dataTransfer (Firefox requires data to drag). */
 export declare function beginDrag(session: DragSession, dataTransfer: DataTransfer | null): void;
 /** The live session, or null when nothing Elytra-owned is being dragged. */
@@ -38,4 +39,11 @@ export declare function activeDrag(): DragSession | null;
 export declare function endDrag(outcome: DragOutcome): void;
 /** Subscribe to session end (indicator cleanup, blocks-panel close-on-drop). */
 export declare function onDragSessionEnd(listener: EndListener): () => void;
+/**
+ * Subscribe to session start — fired for EVERY drag source (canvas node, tree
+ * row, blocks-panel tile). The canvas insertion affordances (EC-405) use this to
+ * hide while a drag is live: the DnD before/after/into indicators own the "where
+ * it lands" story during a drag, so a competing "+" would be noise.
+ */
+export declare function onDragSessionStart(listener: StartListener): () => void;
 export {};

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

@@ -15,6 +15,7 @@
 export const ELYTRA_DND_MIME = 'application/x-elytra-canvas';
 let active = null;
 const endListeners = new Set();
+const startListeners = new Set();
 /** Begin a drag session and stamp the dataTransfer (Firefox requires data to drag). */
 export function beginDrag(session, dataTransfer) {
     active = session;
@@ -23,6 +24,8 @@ export function beginDrag(session, dataTransfer) {
         dataTransfer.setData('text/plain', session.label);
         dataTransfer.effectAllowed = session.subject.kind === 'node' ? 'move' : 'copy';
     }
+    for (const listener of [...startListeners])
+        listener(session);
 }
 /** The live session, or null when nothing Elytra-owned is being dragged. */
 export function activeDrag() {
@@ -48,4 +51,16 @@ export function onDragSessionEnd(listener) {
         endListeners.delete(listener);
     };
 }
+/**
+ * Subscribe to session start — fired for EVERY drag source (canvas node, tree
+ * row, blocks-panel tile). The canvas insertion affordances (EC-405) use this to
+ * hide while a drag is live: the DnD before/after/into indicators own the "where
+ * it lands" story during a drag, so a competing "+" would be noise.
+ */
+export function onDragSessionStart(listener) {
+    startListeners.add(listener);
+    return () => {
+        startListeners.delete(listener);
+    };
+}
 //# sourceMappingURL=drag-session.js.map

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;AAgB5D,IAAI,MAAM,GAAuB,IAAI,CAAA;AACrC,MAAM,YAAY,GAAG,IAAI,GAAG,EAAe,CAAA;AAE3C,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;AACH,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","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\n\nlet active: DragSession | null = null\nconst endListeners = new Set<EndListener>()\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}\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"]}
+{"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"]}

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

@@ -0,0 +1,19 @@
+import type { InsertPosition } from './insert-context.js';
+/**
+ * Bridges the in-canvas insertion affordances (EC-405) to the insert panel state
+ * that lives on the composition-field editor. The `SelectionOverlay` (portaled
+ * inside the canvas iframe) asks this context which positions are insertable for a
+ * node and opens the panel at a chosen one; the editor owns the panel's
+ * `open`/`context` state and the field-level `allow` leash. A separate module (not
+ * the editor) so the deep overlay can consume it without a canvas ↔ editor import
+ * cycle, and so any canvas mount WITHOUT an editor above it (component preview)
+ * simply reads `null` and shows no affordances — the `ReuseProvider` pattern.
+ */
+export interface InsertAffordanceApi {
+    /** The affordance positions (before/after/into) that may actually be inserted at `nodeId`. */
+    positionsFor(nodeId: string): InsertPosition[];
+    /** Select `nodeId` and open the blocks panel targeted at that exact position. */
+    openAt(nodeId: string, position: InsertPosition): void;
+}
+export declare const InsertAffordanceProvider: import("react").Provider<InsertAffordanceApi | null>;
+export declare function useInsertAffordance(): InsertAffordanceApi | null;

package/dist/components/builder/insert-affordance-context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const InsertAffordanceContext = createContext(null);
+export const InsertAffordanceProvider = InsertAffordanceContext.Provider;
+export function useInsertAffordance() {
+    return useContext(InsertAffordanceContext);
+}
+//# sourceMappingURL=insert-affordance-context.js.map

package/dist/components/builder/insert-affordance-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-affordance-context.js","sourceRoot":"","sources":["../../../src/components/builder/insert-affordance-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjD,MAAM,uBAAuB,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAA;AAE/E,MAAM,CAAC,MAAM,wBAAwB,GAAG,uBAAuB,CAAC,QAAQ,CAAA;AAExE,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,uBAAuB,CAAC,CAAA;AAC5C,CAAC","sourcesContent":["import { createContext, useContext } from 'react'\nimport type { InsertPosition } from './insert-context'\n\n/**\n * Bridges the in-canvas insertion affordances (EC-405) to the insert panel state\n * that lives on the composition-field editor. The `SelectionOverlay` (portaled\n * inside the canvas iframe) asks this context which positions are insertable for a\n * node and opens the panel at a chosen one; the editor owns the panel's\n * `open`/`context` state and the field-level `allow` leash. A separate module (not\n * the editor) so the deep overlay can consume it without a canvas ↔ editor import\n * cycle, and so any canvas mount WITHOUT an editor above it (component preview)\n * simply reads `null` and shows no affordances — the `ReuseProvider` pattern.\n */\nexport interface InsertAffordanceApi {\n  /** The affordance positions (before/after/into) that may actually be inserted at `nodeId`. */\n  positionsFor(nodeId: string): InsertPosition[]\n  /** Select `nodeId` and open the blocks panel targeted at that exact position. */\n  openAt(nodeId: string, position: InsertPosition): void\n}\n\nconst InsertAffordanceContext = createContext<InsertAffordanceApi | null>(null)\n\nexport const InsertAffordanceProvider = InsertAffordanceContext.Provider\n\nexport function useInsertAffordance(): InsertAffordanceApi | null {\n  return useContext(InsertAffordanceContext)\n}\n"]}