@elytracms/studio 0.0.58 → 0.0.60

package/dist/components/builder/canvas.js

@@ -1,145 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { renderPageComposition } from '@elytracms/core/runtime-renderer';
 import { useParams } from '@elytracms/studio/router';
-import { getNode, getParentInfo, staticProp } from '@elytracms/core/project-graph';
-import { canNestInto, containerFlowAxis, dropIndicatorFor, dropPositionForPoint, resolveDrop, } from '@elytracms/studio/lib/dnd/drop-rules';
-import { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session.js';
-import { PRESERVE_NODE_ATTR, collectPreservedPairs, richTextDocFromDom, } from '@elytracms/core/rich-text';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
-import { useOptionalAssets } from '../assets/assets-store.js';
-import { resolveCanvasLink, resolveCanvasListing, resolveCanvasRelation, useData, } from '@elytracms/studio/lib/data';
-import { cmsBindingFallback, useStudioLocale } from '@elytracms/studio/lib/locale';
 import { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session';
+import { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace';
+import { applyCanvasChrome } from './canvas-chrome.js';
 import { getCanvasStylesheetUrl } from './canvas-stylesheet.js';
 import { useBuilder } from './builder-store.js';
-import { useReuse } from './reuse-context.js';
-import { reuseEmbedRef } from './reuse.js';
 import { useCanvasViewports, viewportWidth } from './canvas-breakpoints.js';
+import { nodeIdAt } 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 { createInlineEditSession, createInlineRichTextSession, findInlineTextHost, resolveInlineEditableProp, resolveInlineRichTextProp, } from './inline-edit.js';
 import { RichTextToolbar } from './rich-text-toolbar.js';
 import { SpacingHandles, hasSpacingHandles } from './spacing-handles.js';
-/** Selection/hover outlines, scoped to the per-node editable wrappers. */
-const OUTLINE_CSS = `
-  /* The canvas backdrop is deliberately always light/site-like (see the
-     wireUp note below) — force the native form-control/scrollbar theme to
-     match, so a page with real inputs never shows dark native chrome floating
-     on a light page. */
-  html { color-scheme: light; }
-  body { margin: 0; padding: 16px; }
-  .ec-editable { outline-offset: -1px; cursor: default; }
-  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75); }
-  .ec-editable[data-selected] { outline: 2px solid #5b8cff; }
-  /* Inline editing (EC-158 text, EC-159 rich text): the rendered element
-     itself becomes the editor — no overlay, no replacement input — so
-     typography, alignment, and layout are pixel-identical between edit and
-     render states. The wrapper keeps the selection outline; the host only
-     gets a caret. pre-wrap applies to PLAIN text hosts only — rich-text
-     markup must keep its rendered whitespace handling (no layout shift). */
-  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff; }
-  .ec-editable [data-ec-edit] { outline: none; cursor: text; }
-  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }
-  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,
-     images, embeds): visible and rendered, but not text-editable. */
-  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }
-  /* Floating mark toolbar (EC-159), portaled into the iframe. */
-  .ec-rt-toolbar { color-scheme: dark; }
-  .ec-rt-toolbar-row { display: flex; align-items: center; gap: 2px; padding: 3px;
-    border: 1px solid rgba(130,150,190,0.4); border-radius: 8px;
-    background: rgb(24,26,32); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
-  .ec-rt-toolbar-btn { min-width: 26px; height: 24px; padding: 0 7px; border: 0; border-radius: 5px;
-    background: transparent; color: rgb(225,228,236); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
-    cursor: pointer; }
-  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25); }
-  .ec-rt-toolbar-btn[data-active] { background: #5b8cff; color: white; }
-  .ec-rt-toolbar-input { width: 200px; height: 24px; padding: 0 7px; border-radius: 5px;
-    border: 1px solid rgba(130,150,190,0.4); background: rgb(16,18,22); color: rgb(225,228,236);
-    font: 12px/1 ui-sans-serif, system-ui, sans-serif; outline: none; }
-  /* Locale-fallback chips (EC-176): a node whose bound content is currently
-     served via locale fallback wears a small corner chip naming the locale it
-     actually came from — the canvas never silently mixes locales. */
-  .ec-editable[data-ec-locale-fallback] { position: relative; }
-  .ec-editable[data-ec-locale-fallback]::after {
-    content: attr(data-ec-locale-fallback);
-    position: absolute; top: 2px; right: 2px; z-index: 5; pointer-events: none;
-    padding: 0 4px; border-radius: 4px;
-    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif;
-    letter-spacing: 0.05em; text-transform: uppercase;
-    color: #fbbf24; background: rgba(180,83,9,0.25); border: 1px solid rgba(245,158,11,0.45);
-  }
-  /* Drag & drop states (EC-160/EC-162): eligibility comes from the shared pure
-     rules (lib/dnd/drop-rules); these classes only *show* the resolution.
-     Rejection is explicit and visible during the drag — never a silent failed
-     drop. Before/after bars follow the parent's flow axis (data-ec-drop-axis);
-     left/right are the wrap-into-columns gesture (violet, paired highlight). */
-  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399; outline-offset: -2px; background-color: rgba(52, 211, 153, 0.08); }
-  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8; }
-  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8; }
-  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8; }
-  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8; }
-  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }
-  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }
-  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444; outline-offset: -2px; background-color: rgba(239, 68, 68, 0.08); cursor: not-allowed; }
-`;
-function nodeIdAt(target) {
-    return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null;
-}
-function wrapperAt(target) {
-    const el = target;
-    return el?.closest?.('[data-ec-node-id]') ?? null;
-}
-/**
- * The rendered `.rich-text` element inside a node's wrapper — the rich-text
- * editing host (EC-159). Never crosses into a nested node's wrapper.
- */
-function findRichTextHost(wrapper) {
-    const host = wrapper.querySelector('.rich-text');
-    return host && host.closest('[data-ec-node-id]') === wrapper ? host : null;
-}
-/** Collect every node id under a root (the page subtree). */
-function collectIds(node, out = new Set()) {
-    out.add(node.id);
-    for (const children of Object.values(node.slots ?? {})) {
-        for (const child of children)
-            collectIds(child, out);
-    }
-    return out;
-}
 /**
  * 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
  * responsive widths. Each node is wrapped with an editable marker so clicks
  * select and hover/selection draw outlines. Native listeners bridge the iframe
- * boundary (React's synthetic events don't cross frames).
+ * boundary (React's synthetic events don't cross frames); the two big gesture
+ * state machines live in their own tested modules (EC-330): drag & drop in
+ * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and
+ * the render-context assembly in `canvas-render-context`.
  */
 export function BuilderCanvas({ perspective = 'draft', } = {}) {
     const builder = useBuilder();
     const { dispatch } = builder;
     const studio = getStudioRegistry();
-    const data = useData();
     // The edited composition root, composed for preview. EC-287 retired the project
     // graph and its published-graph preview; the canvas always renders the live,
     // editable draft (content publishing is per document).
     const activeRoot = builder.present;
     const iframeRef = useRef(null);
     const [doc, setDoc] = useState(null);
-    // Inline editing (EC-158/EC-159): the active session lives in a ref — it is
-    // imperative DOM state inside the iframe, not render state. Graph/page refs
-    // let the native dblclick handler read the *current* graph without
-    // re-subscribing listeners on every edit. The rich-text host additionally
-    // mirrors into render state so the floating mark toolbar can mount.
-    const editingRef = useRef(null);
-    const [richEditHost, setRichEditHost] = useState(null);
-    // A rich-text session mutates the rendered DOM behind React's back
-    // (contenteditable + mark commands), so finishing one must REMOUNT the
-    // node's subtree — bumping its epoch changes the decorate key, React
-    // discards the edited DOM wholesale and re-renders from the graph (the
-    // committed value, or the untouched original on cancel). Patching the old
-    // fiber tree against editor-mutated DOM would leave stale artifacts.
-    const [richEditEpochs, setRichEditEpochs] = useState({});
+    // Graph/selection refs let the native iframe listeners read the *current*
+    // state without re-subscribing on every edit.
     const presentRef = useRef(builder.present);
     presentRef.current = builder.present;
     const selectedIdRef = useRef(builder.selectedId);
@@ -159,34 +59,17 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
         // dark-themed and the iframe root inherits that class). The injected
         // canvas stylesheet's `:root` (light) tokens supply that backdrop for free
         // once `.dark` is never added here (mirrors the components-preview fix,
-        // `component-preview.tsx`). The editing chrome below (selection/hover
-        // outlines, drop indicators, the rich-text toolbar, locale-fallback chips)
-        // uses hardcoded colors rather than these tokens, so it stays visible
-        // against a light page regardless.
-        const appCss = getCanvasStylesheetUrl();
-        if (appCss && !d.getElementById('ec-app-css')) {
-            const link = d.createElement('link');
-            link.id = 'ec-app-css';
-            link.rel = 'stylesheet';
-            link.href = appCss;
-            d.head.appendChild(link);
-        }
-        if (!d.getElementById('ec-outline-css')) {
-            const style = d.createElement('style');
-            style.id = 'ec-outline-css';
-            style.textContent = OUTLINE_CSS;
-            d.head.appendChild(style);
-        }
-        if (kitTokensCss) {
-            const existing = d.getElementById('ec-kit-tokens');
-            if (existing)
-                existing.remove();
-            const style = d.createElement('style');
-            style.id = 'ec-kit-tokens';
-            style.textContent = kitTokensCss;
-            d.head.appendChild(style);
-        }
-        d.body.className = 'bg-background text-foreground font-sans';
+        // `component-preview.tsx`). The editing chrome (selection/hover outlines,
+        // drop indicators, the rich-text toolbar, locale-fallback chips) uses
+        // hardcoded colors rather than these tokens, so it stays visible against a
+        // light page regardless. The full injection — stylesheet link, editing
+        // chrome, kit tokens, and the consumer's `defineStudio({ canvas })` theme
+        // (EC-389, injected LAST so it wins) — lives in `applyCanvasChrome`.
+        applyCanvasChrome(d, {
+            stylesheetUrl: getCanvasStylesheetUrl(),
+            kitTokensCss,
+            theme: resolveDeploymentCanvasTheme(),
+        });
         setDoc(d);
     }, [kitTokensCss]);
     // Handle the already-loaded case (srcDoc may load before onLoad attaches).
@@ -194,6 +77,11 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
         if (iframeRef.current?.contentDocument?.readyState === 'complete')
             wireUp();
     }, [wireUp]);
+    // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the
+    // 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;
     // Native selection/hover listeners inside the iframe document.
     useEffect(() => {
         if (!doc)
@@ -218,399 +106,9 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
             doc.removeEventListener('mouseover', onOver);
             doc.removeEventListener('mouseleave', onLeave, true);
         };
-    }, [doc, dispatch]);
-    // Drag & drop on the canvas (EC-160). Eligibility is the pure shared rule
-    // set (`lib/dnd/drop-rules`) — the same functions the page tree consumes —
-    // evaluated live during `dragover`; the wrapper under the pointer shows the
-    // resolution (`data-ec-drop`: into/before/after, or `blocked` for a visible
-    // rejection). A completed drop dispatches exactly one builder action (move
-    // or insert) → one operations command → one undo step. Ineligible targets
-    // never `preventDefault`, so releasing over one is a native no-op.
-    useEffect(() => {
-        if (!doc)
-            return;
-        const getManifest = (id) => studio.registry.getManifest(id);
-        const currentRoot = () => presentRef.current;
-        let dropWrapper = null;
-        let dropPlan = null;
-        const clearIndicator = () => {
-            dropWrapper?.removeAttribute('data-ec-drop');
-            dropWrapper?.removeAttribute('data-ec-drop-axis');
-            dropWrapper = null;
-            dropPlan = null;
-        };
-        const showIndicator = (wrapper, state, axis) => {
-            if (dropWrapper && dropWrapper !== wrapper) {
-                dropWrapper.removeAttribute('data-ec-drop');
-                dropWrapper.removeAttribute('data-ec-drop-axis');
-            }
-            dropWrapper = wrapper;
-            if (!wrapper)
-                return;
-            if (state) {
-                wrapper.setAttribute('data-ec-drop', state);
-                // Before/after bars render along the parent's flow axis (EC-162).
-                wrapper.setAttribute('data-ec-drop-axis', axis === 'horizontal' ? 'x' : 'y');
-            }
-            else {
-                wrapper.removeAttribute('data-ec-drop');
-                wrapper.removeAttribute('data-ec-drop-axis');
-            }
-        };
-        // Wrappers are armed draggable per-gesture on mousedown, never via render
-        // state: the active inline editor (EC-158) must keep native caret clicks
-        // and text selection, so a press inside the editing host disarms its
-        // wrapper instead of starting a node drag.
-        const onMouseDown = (e) => {
-            const wrapper = wrapperAt(e.target);
-            if (!wrapper)
-                return;
-            const root = currentRoot();
-            const nodeId = wrapper.getAttribute('data-ec-node-id');
-            const inEditor = editingRef.current?.host.contains(e.target) ?? false;
-            if (root && nodeId && nodeId !== root.id && !inEditor) {
-                wrapper.setAttribute('draggable', 'true');
-            }
-            else {
-                wrapper.removeAttribute('draggable');
-            }
-        };
-        const onDragStart = (e) => {
-            // Drags inside the live inline editor are native text drags — leave them alone.
-            if (editingRef.current?.host.contains(e.target))
-                return;
-            const wrapper = wrapperAt(e.target);
-            if (!wrapper)
-                return;
-            const root = currentRoot();
-            const nodeId = wrapper.getAttribute('data-ec-node-id');
-            const node = root ? getNode(root, nodeId) : undefined;
-            if (!root || !node || nodeId === root.id) {
-                e.preventDefault();
-                return;
-            }
-            beginDrag({ subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId }, e.dataTransfer);
-        };
-        const onDragOver = (e) => {
-            const drag = activeDrag();
-            if (!drag)
-                return;
-            const root = currentRoot();
-            if (!root)
-                return;
-            const wrapper = wrapperAt(e.target);
-            // Empty space around the page subtree targets the root slot (append).
-            const refId = wrapper?.getAttribute('data-ec-node-id') ?? root.id;
-            const refWrapper = wrapper ?? doc.querySelector(`[data-ec-node-id="${root.id}"]`);
-            const refNode = getNode(root, refId);
-            if (!refNode) {
-                clearIndicator();
-                return;
-            }
-            let position = 'into';
-            let flow = 'vertical';
-            if (wrapper && refId !== root.id) {
-                const rect = wrapper.getBoundingClientRect();
-                // Hit-bands follow the parent's flow axis (EC-162); the cross-axis
-                // side bands of vertically flowing targets are the wrap gesture.
-                flow = containerFlowAxis(getParentInfo(root, refId)?.parent);
-                position = dropPositionForPoint({
-                    x: rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5,
-                    y: rect.height > 0 ? (e.clientY - rect.top) / rect.height : 0.5,
-                    flow,
-                    nestable: canNestInto(getManifest, refNode.componentId),
-                    edges: true,
-                    wrappable: true,
-                });
-            }
-            const resolution = resolveDrop({
-                root,
-                getManifest,
-                subject: drag.subject,
-                location: { nodeId: refId, position },
-            });
-            showIndicator(refWrapper, dropIndicatorFor(resolution, position), flow);
-            if (resolution.eligible) {
-                dropPlan = resolution;
-                e.preventDefault();
-                if (e.dataTransfer) {
-                    e.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy';
-                }
-            }
-            else {
-                dropPlan = null;
-            }
-        };
-        const onDrop = (e) => {
-            const drag = activeDrag();
-            if (!drag)
-                return;
-            const plan = dropPlan;
-            clearIndicator();
-            if (!plan)
-                return;
-            e.preventDefault();
-            // Exactly one dispatch per completed drop (one undo step, one command).
-            if (plan.kind === 'move') {
-                dispatch({ type: 'move', id: plan.nodeId, target: plan.target });
-            }
-            else if (plan.kind === 'wrap') {
-                // EC-162 gesture: reference + subject become a two-column Grid.
-                const subject = plan.nodeId !== undefined
-                    ? { kind: 'node', nodeId: plan.nodeId }
-                    : drag.buildNode
-                        ? { kind: 'component', node: drag.buildNode() }
-                        : null;
-                if (!subject) {
-                    endDrag('cancelled');
-                    return;
-                }
-                dispatch({ type: 'wrap', referenceId: plan.referenceId, side: plan.side, subject });
-            }
-            else if (drag.buildNode) {
-                dispatch({ type: 'insert', target: plan.target, node: drag.buildNode() });
-            }
-            else {
-                endDrag('cancelled');
-                return;
-            }
-            endDrag('dropped');
-        };
-        const onDragEnd = () => {
-            clearIndicator();
-            endDrag('cancelled');
-        };
-        const onDragLeave = (e) => {
-            // Leaving the iframe document entirely (relatedTarget is null).
-            if (!e.relatedTarget)
-                clearIndicator();
-        };
-        // Cleanup when the drag ends anywhere (e.g. dropped on the page tree).
-        const unsubscribe = onDragSessionEnd(() => clearIndicator());
-        doc.addEventListener('mousedown', onMouseDown, true);
-        doc.addEventListener('dragstart', onDragStart);
-        doc.addEventListener('dragover', onDragOver);
-        doc.addEventListener('drop', onDrop);
-        doc.addEventListener('dragend', onDragEnd);
-        doc.addEventListener('dragleave', onDragLeave);
-        return () => {
-            unsubscribe();
-            clearIndicator();
-            doc.removeEventListener('mousedown', onMouseDown, true);
-            doc.removeEventListener('dragstart', onDragStart);
-            doc.removeEventListener('dragover', onDragOver);
-            doc.removeEventListener('drop', onDrop);
-            doc.removeEventListener('dragend', onDragEnd);
-            doc.removeEventListener('dragleave', onDragLeave);
-        };
-    }, [doc, dispatch, studio]);
-    // Inline editing (EC-158 plain text, EC-159 rich text): double-click on a
-    // node whose manifest flags an inline-editable prop turns the *rendered
-    // element itself* contenteditable — no overlay, no input swap, so typography
-    // and layout are identical in edit and render states. A session finishes
-    // exactly once, and a commit dispatches exactly one `setProp` action — one
-    // undo step, mirrored as one `graph.setNodeProp` operations command by the
-    // builder-store persister. The graph stays the single source of truth.
-    //
-    // Commit/cancel gestures: plain text commits on Enter or blur; rich text is
-    // multiline, so plain Enter inserts a paragraph and the commit gesture is
-    // Cmd/Ctrl+Enter or blur (Enter-to-commit would make multi-paragraph content
-    // unauthorable in place). Esc always cancels, dispatching nothing.
-    useEffect(() => {
-        if (!doc)
-            return;
-        // ---- plain text (EC-158) ------------------------------------------------
-        const beginText = (wrapper, host, session) => {
-            let done = false;
-            const finish = (mode) => {
-                if (done)
-                    return;
-                done = true;
-                editingRef.current = null;
-                const text = host.textContent ?? '';
-                host.removeEventListener('keydown', onKeyDown);
-                host.removeEventListener('blur', onBlur);
-                host.removeAttribute('contenteditable');
-                host.removeAttribute('data-ec-edit');
-                wrapper.removeAttribute('data-ec-editing');
-                if (mode === 'commit') {
-                    const outcome = session.commit(text);
-                    if (outcome) {
-                        dispatch({
-                            type: 'setProp',
-                            id: outcome.nodeId,
-                            name: outcome.propName,
-                            value: staticProp(outcome.value),
-                        });
-                    }
-                }
-                else {
-                    const outcome = session.cancel();
-                    if (outcome)
-                        host.textContent = outcome.value;
-                }
-                doc.getSelection()?.removeAllRanges();
-            };
-            const onKeyDown = (e) => {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    finish('commit');
-                }
-                else if (e.key === 'Escape') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    finish('cancel');
-                }
-            };
-            const onBlur = () => finish('commit');
-            // `plaintext-only` keeps paste/typing plain; fall back where unsupported.
-            host.setAttribute('contenteditable', 'plaintext-only');
-            if (!host.isContentEditable)
-                host.setAttribute('contenteditable', 'true');
-            host.setAttribute('data-ec-edit', 'text');
-            wrapper.setAttribute('data-ec-editing', '');
-            host.addEventListener('keydown', onKeyDown);
-            host.addEventListener('blur', onBlur);
-            editingRef.current = { nodeId: session.nodeId, host, finish };
-            host.focus({ preventScroll: true });
-            // Keep the gesture's native caret/word selection when it landed inside
-            // the host; otherwise select the whole value.
-            const sel = doc.getSelection();
-            if (!sel || sel.rangeCount === 0 || !host.contains(sel.anchorNode)) {
-                const range = doc.createRange();
-                range.selectNodeContents(host);
-                sel?.removeAllRanges();
-                sel?.addRange(range);
-            }
-        };
-        // ---- rich text (EC-159) -------------------------------------------------
-        const beginRichText = (wrapper, nodeId, target) => {
-            const host = findRichTextHost(wrapper);
-            if (!host)
-                return;
-            // Pair the storage tree against the rendered DOM and stamp every
-            // non-invertible node (custom blocks, unknown nodes, images, embeds)
-            // with its exact JSON: they stay rendered *inside* the live editor as
-            // non-editable atoms and survive the session byte-exact. A pairing
-            // mismatch means the DOM diverged from the deterministic render —
-            // refuse to start rather than risk lossy parsing ("polished or absent").
-            const pairs = collectPreservedPairs(target.value.doc, host);
-            if (!pairs)
-                return;
-            const session = createInlineRichTextSession({
-                nodeId,
-                propName: target.propName,
-                original: target.value,
-            });
-            for (const pair of pairs) {
-                const el = pair.element;
-                el.setAttribute(PRESERVE_NODE_ATTR, JSON.stringify(pair.node));
-                el.setAttribute('contenteditable', 'false');
-            }
-            let done = false;
-            const finish = (mode) => {
-                if (done)
-                    return;
-                done = true;
-                editingRef.current = null;
-                setRichEditHost(null);
-                // Parse the edited DOM, detach the session, then bump the node's
-                // remount epoch: React discards the editor-mutated DOM and renders
-                // fresh from the graph — committed content or, on cancel, the
-                // untouched original. Never patch a fiber tree against DOM the
-                // editing commands rewrote.
-                const parsed = mode === 'commit' ? richTextDocFromDom(host) : null;
-                host.removeEventListener('keydown', onKeyDown);
-                host.removeEventListener('blur', onBlur);
-                host.removeAttribute('contenteditable');
-                host.removeAttribute('data-ec-edit');
-                wrapper.removeAttribute('data-ec-editing');
-                setRichEditEpochs((prev) => ({ ...prev, [nodeId]: (prev[nodeId] ?? 0) + 1 }));
-                if (parsed) {
-                    // An unchanged document commits nothing: the stored value is never
-                    // rewritten, so untouched content round-trips byte-identical.
-                    const outcome = session.commit(parsed.doc);
-                    if (outcome) {
-                        dispatch({
-                            type: 'setProp',
-                            id: outcome.nodeId,
-                            name: outcome.propName,
-                            value: staticProp(outcome.value),
-                        });
-                    }
-                }
-                else {
-                    session.cancel();
-                }
-                doc.getSelection()?.removeAllRanges();
-            };
-            const onKeyDown = (e) => {
-                if (e.key === 'Escape') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    finish('cancel');
-                }
-                else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    finish('commit');
-                }
-                // Plain Enter falls through: native paragraph insertion (multiline).
-            };
-            const onBlur = (e) => {
-                // Interacting with the floating toolbar is part of the session.
-                const next = e.relatedTarget;
-                if (next?.closest?.('[data-ec-rt-toolbar]'))
-                    return;
-                finish('commit');
-            };
-            host.setAttribute('contenteditable', 'true');
-            host.setAttribute('data-ec-edit', 'rich');
-            wrapper.setAttribute('data-ec-editing', '');
-            host.addEventListener('keydown', onKeyDown);
-            host.addEventListener('blur', onBlur);
-            editingRef.current = { nodeId, host, finish };
-            setRichEditHost(host);
-            host.focus({ preventScroll: true });
-        };
-        const onDblClick = (e) => {
-            const wrapper = wrapperAt(e.target);
-            if (!wrapper)
-                return;
-            const nodeId = wrapper.getAttribute('data-ec-node-id');
-            if (editingRef.current) {
-                // Double-click inside the live editor is native word selection.
-                if (editingRef.current.nodeId === nodeId)
-                    return;
-                editingRef.current.finish('commit');
-            }
-            const node = getNode(presentRef.current, nodeId);
-            if (!node)
-                return;
-            const manifest = studio.registry.getManifest(node.componentId);
-            const target = resolveInlineEditableProp(manifest, node);
-            if (target) {
-                const host = findInlineTextHost(wrapper, target.value);
-                if (!host || typeof host.focus !== 'function')
-                    return;
-                dispatch({ type: 'select', id: nodeId });
-                beginText(wrapper, host, createInlineEditSession({ nodeId, propName: target.propName, original: target.value }));
-                return;
-            }
-            const richTarget = resolveInlineRichTextProp(manifest, node);
-            if (!richTarget)
-                return;
-            dispatch({ type: 'select', id: nodeId });
-            beginRichText(wrapper, nodeId, richTarget);
-        };
-        doc.addEventListener('dblclick', onDblClick, true);
-        return () => {
-            doc.removeEventListener('dblclick', onDblClick, true);
-            // Teardown mid-session (doc swap/unmount): cancel — never dispatch from cleanup.
-            editingRef.current?.finish('cancel');
-        };
-    }, [doc, dispatch, studio]);
+    }, [doc, dispatch, editingRef]);
+    // 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
     // tree and blocks panel use, wired to the *iframe* document (events never
     // cross frames). Shortcuts stay inert while an inline editor is live and in
@@ -627,102 +125,18 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
             asyncClipboard: doc.defaultView?.navigator.clipboard,
             getSelection: () => doc.getSelection(),
         });
-    }, [doc, clipboard]);
-    // Only page nodes are editable; layout chrome (rendered around the page) is
-    // read-only context and must not be selectable (it isn't in the page tree).
-    const pageNodeIds = useMemo(() => collectIds(builder.present), [builder.present]);
-    // Bridge the renderer's untyped ItemContext (item: unknown) to the binding
-    // layer's RepeaterItemContext (item: JsonValue). The renderer feeds back values
-    // it resolved from JSON payloads, so the item is a JsonValue.
-    const resolveBinding = useCallback((ref, item) => data.resolveValue(ref, item ? { item: item.item, index: item.index } : undefined), [data]);
-    // EC-195: resolve an `asset`-typed Image prop (an asset id) to its url +
-    // intrinsic dimensions from the live asset library, so the canvas previews
-    // exactly what the host renders. A record without a resolved url (e.g. a
-    // never-served seed) → null → the implementation's visible empty state.
-    const assetsStore = useOptionalAssets();
-    const resolveAsset = useCallback((assetId) => {
-        const record = assetsStore?.assets.find((a) => a.id === assetId);
-        if (!record?.url)
-            return null;
-        return {
-            url: record.url,
-            width: record.width ?? null,
-            height: record.height ?? null,
-            alt: record.alt ?? null,
-            focalPoint: record.focalPoint ?? null,
-        };
-    }, [assetsStore]);
-    // Locale-fallback chips (EC-176): a node whose bound content currently
-    // previews via EC-018 locale fallback wears a corner chip naming the locale
-    // the value actually came from. Same decision function as the inspector's
-    // Content tab (`cmsBindingFallback`), so chip and label can never disagree.
-    const { locale: activeLocale } = useStudioLocale();
-    // EC-300: the reuse capability identifies a transcluding embed + its relation prop,
-    // so the canvas can detect a HARD reference whose target doesn't resolve and show a
-    // placeholder instead of an empty section. Null-safe (no provider / no capability).
-    const reuse = useReuse();
-    // EC-254: populate a block's `relation` prop (the editor's document pick — a
-    // ProductGrid's products, a Reusable's element) to delivery shape from the
-    // active content session, in the canvas's active locale, so the canvas previews
-    // picked documents exactly as the host renders them. The studio analog of the
-    // host's baked relations map. A missing/invisible target → null → the block's
-    // own empty state.
-    const resolveRelation = useCallback((ref) => resolveCanvasRelation(ref, activeLocale, perspective), [activeLocale, perspective]);
-    // EC-255: resolve a listing block's query (a ProductGrid keyed to a category) to
-    // its documents from the active content session, in the canvas's active locale, so
-    // the canvas previews a dynamic grid exactly as the host renders it. The studio
-    // analog of the host's baked listings map; an empty/invalid query → [] → the
-    // block's own empty state.
-    const resolveListing = useCallback((query) => resolveCanvasListing(query, activeLocale, perspective), [activeLocale, perspective]);
-    // EC-291: resolve a rich-text internal link (`{type:'reference'}`) to its target's
-    // URL path from the active content session, in the canvas's active locale — the
-    // studio analog of the host's baked links map. A missing/unpublished/unroutable
-    // target → null → the rich-text renderer shows the visible `unresolved-ref` issue.
-    const resolveLink = useCallback((ref) => resolveCanvasLink(ref, activeLocale, perspective), [activeLocale, perspective]);
-    // EC-300/AD-16: a transcluding embed whose target doesn't resolve in the active
-    // perspective renders a placeholder, never an empty section. `unpublished` = the
-    // target exists as a draft but isn't live (Published view of a draft-only reusable);
-    // `missing` = no resolvable target at all (deleted). `null` = resolves fine, or the
-    // node isn't an embed / has no target picked yet (its own empty state owns that).
-    const unresolvedReuse = useCallback((node) => {
-        const cap = reuse?.capability;
-        if (!cap)
-            return null;
-        const ref = reuseEmbedRef(node, cap);
-        if (!ref)
-            return null;
-        if (resolveCanvasRelation(ref, activeLocale, perspective))
-            return null;
-        return resolveCanvasRelation(ref, activeLocale, 'draft') ? 'unpublished' : 'missing';
-    }, [reuse, activeLocale, perspective]);
-    const localeFallbackOf = useCallback((node) => {
-        for (const value of Object.values(node.props ?? {})) {
-            if (value.kind !== 'binding')
-                continue;
-            const fallback = cmsBindingFallback(value.binding, data.getSource(value.binding.sourceId), activeLocale);
-            if (fallback)
-                return fallback.sourceLocale;
-        }
-        return undefined;
-    }, [data, activeLocale]);
-    const ctx = useMemo(() => ({
-        registry: studio.registry,
-        implementations: studio.implementations,
-        resolveBinding,
-        resolveAsset,
-        resolveRelation,
-        resolveListing,
-        resolveLink,
-        decorateNode: (node, rendered) => {
-            if (!pageNodeIds.has(node.id))
-                return rendered;
-            // An unresolved hard reference shows the placeholder in place of the empty
-            // transclusion; the node stays selectable, so its inspector relation chip
-            // (EC-296) deep-links to the reusable to edit/publish it.
-            const unresolved = unresolvedReuse(node);
-            return (_jsx("div", { "data-ec-node-id": node.id, className: "ec-editable", "data-selected": node.id === builder.selectedId || undefined, "data-hovered": node.id === builder.hoveredId || undefined, "data-ec-locale-fallback": localeFallbackOf(node), children: unresolved ? _jsx(UnresolvedReusablePlaceholder, { status: unresolved }) : rendered }, `${node.id}#${richEditEpochs[node.id] ?? 0}`));
-        },
-    }), [studio, resolveBinding, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, builder.selectedId, builder.hoveredId, localeFallbackOf, richEditEpochs]);
+    }, [doc, clipboard, editingRef]);
+    // The render context: the seven delivery-parity resolvers + the editable-
+    // wrapper decorator (selection/hover, locale chips, remount epochs) — see
+    // `canvas-render-context`.
+    const { ctx, pageNodeIds } = useCanvasRenderContext({
+        present: builder.present,
+        selectedId: builder.selectedId,
+        hoveredId: builder.hoveredId,
+        studio,
+        perspective,
+        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)
@@ -739,31 +153,4 @@ export function BuilderCanvas({ perspective = 'draft', } = {}) {
                         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] })] }));
 }
-/**
- * In-canvas placeholder for a transcluding embed whose target doesn't resolve
- * (EC-300/AD-16) — shown in place of the empty section so a hard reference never
- * silently vanishes. Rendered INTO the iframe (portal), which carries only the
- * project's stylesheet, so it uses inline styles rather than studio UI classes.
- * The node stays selectable; the inspector's `element` relation chip (EC-296)
- * deep-links to the reusable to edit or publish it.
- */
-function UnresolvedReusablePlaceholder({ status }) {
-    const title = status === 'unpublished'
-        ? translate('builder.canvas.reusableUnpublishedTitle')
-        : translate('builder.canvas.reusableMissingTitle');
-    const hint = status === 'unpublished'
-        ? translate('builder.canvas.reusableUnpublishedHint')
-        : translate('builder.canvas.reusableMissingHint');
-    return (_jsxs("div", { style: {
-            boxSizing: 'border-box',
-            border: '1px dashed rgba(120,120,120,0.5)',
-            borderRadius: 8,
-            padding: '24px 28px',
-            margin: '12px 16px',
-            background: 'rgba(127,127,127,0.06)',
-            color: 'rgba(90,90,90,0.95)',
-            font: '14px/1.5 system-ui, -apple-system, sans-serif',
-            textAlign: 'center',
-        }, children: [_jsxs("div", { style: { fontWeight: 600 }, children: ["\u26A0 ", title] }), _jsx("div", { style: { marginTop: 6, fontSize: 13, opacity: 0.85 }, children: hint })] }));
-}
 //# sourceMappingURL=canvas.js.map