@elytracms/studio 0.0.58 → 0.0.59

package/dist/components/builder/canvas-inline-editing.js

@@ -0,0 +1,242 @@
+import { useEffect, useRef, useState } from 'react';
+import { getNode, staticProp } from '@elytracms/core/project-graph';
+import { PRESERVE_NODE_ATTR, collectPreservedPairs, richTextDocFromDom, } from '@elytracms/core/rich-text';
+import { createInlineEditSession, createInlineRichTextSession, findInlineTextHost, resolveInlineEditableProp, resolveInlineRichTextProp, } from './inline-edit.js';
+import { wrapperAt } from './canvas-dom.js';
+/**
+ * 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;
+}
+/**
+ * Wire the inline-editing dblclick listener onto the iframe document (native —
+ * React's synthetic events don't cross frames). Returns the detach function;
+ * detaching mid-session cancels it (never dispatch from cleanup).
+ */
+export function attachCanvasInlineEditingListeners(doc, deps) {
+    const { dispatch } = deps;
+    // ---- plain text (EC-158) ------------------------------------------------
+    const beginText = (wrapper, host, session) => {
+        let done = false;
+        const finish = (mode) => {
+            if (done)
+                return;
+            done = true;
+            deps.setEditing(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);
+        deps.setEditing({ 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;
+            deps.setEditing(null);
+            deps.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');
+            deps.bumpRichEditEpoch(nodeId);
+            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);
+        deps.setEditing({ nodeId, host, finish });
+        deps.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');
+        const editing = deps.getEditing();
+        if (editing) {
+            // Double-click inside the live editor is native word selection.
+            if (editing.nodeId === nodeId)
+                return;
+            editing.finish('commit');
+        }
+        const node = getNode(deps.currentRoot(), nodeId);
+        if (!node)
+            return;
+        const manifest = deps.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.
+        deps.getEditing()?.finish('cancel');
+    };
+}
+/**
+ * The React face of the canvas inline editing (EC-158/EC-159): owns the
+ * session ref and the render state (`richEditHost`, `richEditEpochs`), wires
+ * the dblclick listener when the iframe document exists, and cancels a live
+ * session on teardown.
+ */
+export function useCanvasInlineEditing(doc, deps) {
+    const editingRef = useRef(null);
+    const [richEditHost, setRichEditHost] = useState(null);
+    const [richEditEpochs, setRichEditEpochs] = useState({});
+    const { presentRef, dispatch, studio } = deps;
+    useEffect(() => {
+        if (!doc)
+            return;
+        return attachCanvasInlineEditingListeners(doc, {
+            currentRoot: () => presentRef.current,
+            getManifest: (id) => studio.registry.getManifest(id),
+            dispatch,
+            getEditing: () => editingRef.current,
+            setEditing: (edit) => {
+                editingRef.current = edit;
+            },
+            setRichEditHost,
+            bumpRichEditEpoch: (nodeId) => setRichEditEpochs((prev) => ({ ...prev, [nodeId]: (prev[nodeId] ?? 0) + 1 })),
+        });
+    }, [doc, dispatch, studio, presentRef]);
+    return { editingRef, richEditHost, richEditEpochs };
+}
+//# sourceMappingURL=canvas-inline-editing.js.map

package/dist/components/builder/canvas-inline-editing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-inline-editing.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-inline-editing.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport type { RefObject } from 'react'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport { getNode, staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport {\n  PRESERVE_NODE_ATTR,\n  collectPreservedPairs,\n  richTextDocFromDom,\n} from '@elytracms/core/rich-text'\nimport type { RtDomElement } from '@elytracms/core/rich-text'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { BuilderAction } from './builder-store'\nimport {\n  createInlineEditSession,\n  createInlineRichTextSession,\n  findInlineTextHost,\n  resolveInlineEditableProp,\n  resolveInlineRichTextProp,\n} from './inline-edit'\nimport type { InlineEditSession, InlineRichTextProp } from './inline-edit'\nimport { wrapperAt } from './canvas-dom'\n\n/**\n * Inline editing on the canvas (EC-158 plain text, EC-159 rich text),\n * extracted from `BuilderCanvas` (EC-330): double-click on a node whose\n * manifest flags an inline-editable prop turns the *rendered element itself*\n * contenteditable — no overlay, no input swap, so typography and layout are\n * identical in edit and render states. A session finishes exactly once, and a\n * commit dispatches exactly one `setProp` action — one undo step. The graph\n * stays the single source of truth.\n *\n * Commit/cancel gestures: plain text commits on Enter or blur; rich text is\n * multiline, so plain Enter inserts a paragraph and the commit gesture is\n * Cmd/Ctrl+Enter or blur (Enter-to-commit would make multi-paragraph content\n * unauthorable in place). Esc always cancels, dispatching nothing.\n *\n * The listener wiring is framework-free\n * ({@link attachCanvasInlineEditingListeners}, the `clipboard-actions`\n * pattern) so the begin/commit/cancel state machine is unit-testable without\n * a DOM environment; {@link useCanvasInlineEditing} owns the React state the\n * canvas renders from (the live rich-text host, the remount epochs) and the\n * session ref other canvas listeners consult.\n */\n\n/** A live inline-editing session bound to its DOM host (EC-158/EC-159). */\nexport interface ActiveInlineEdit {\n  nodeId: string\n  host: HTMLElement\n  /** Finish the session exactly once (later calls are no-ops). */\n  finish: (mode: 'commit' | 'cancel') => void\n}\n\n/** The structural slice of the iframe document the editing wiring needs. */\nexport interface CanvasInlineEditingDocument {\n  addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  getSelection(): Selection | null\n  createRange(): Range\n}\n\nexport interface CanvasInlineEditingDeps {\n  /** The current composition root (read live — listeners outlive renders). */\n  currentRoot(): ComponentNode\n  getManifest(componentId: string): ComponentManifest | undefined\n  dispatch(action: BuilderAction): void\n  /** The live session — imperative DOM state, mirrored for other listeners. */\n  getEditing(): ActiveInlineEdit | null\n  setEditing(edit: ActiveInlineEdit | null): void\n  /** Mirror the rich-text host into render state (mounts the mark toolbar). */\n  setRichEditHost(host: HTMLElement | null): void\n  /**\n   * A rich-text session mutates the rendered DOM behind React's back\n   * (contenteditable + mark commands), so finishing one must REMOUNT the\n   * node's subtree — bumping its epoch changes the decorate key, React\n   * discards the edited DOM wholesale and re-renders from the graph (the\n   * committed value, or the untouched original on cancel). Patching the old\n   * fiber tree against editor-mutated DOM would leave stale artifacts.\n   */\n  bumpRichEditEpoch(nodeId: string): void\n}\n\n/**\n * The rendered `.rich-text` element inside a node's wrapper — the rich-text\n * editing host (EC-159). Never crosses into a nested node's wrapper.\n */\nfunction findRichTextHost(wrapper: HTMLElement): HTMLElement | null {\n  const host = wrapper.querySelector('.rich-text') as HTMLElement | null\n  return host && host.closest('[data-ec-node-id]') === wrapper ? host : null\n}\n\n/**\n * Wire the inline-editing dblclick listener onto the iframe document (native —\n * React's synthetic events don't cross frames). Returns the detach function;\n * detaching mid-session cancels it (never dispatch from cleanup).\n */\nexport function attachCanvasInlineEditingListeners(\n  doc: CanvasInlineEditingDocument,\n  deps: CanvasInlineEditingDeps,\n): () => void {\n  const { dispatch } = deps\n\n  // ---- plain text (EC-158) ------------------------------------------------\n  const beginText = (wrapper: HTMLElement, host: HTMLElement, session: InlineEditSession) => {\n    let done = false\n    const finish = (mode: 'commit' | 'cancel') => {\n      if (done) return\n      done = true\n      deps.setEditing(null)\n      const text = host.textContent ?? ''\n      host.removeEventListener('keydown', onKeyDown)\n      host.removeEventListener('blur', onBlur)\n      host.removeAttribute('contenteditable')\n      host.removeAttribute('data-ec-edit')\n      wrapper.removeAttribute('data-ec-editing')\n      if (mode === 'commit') {\n        const outcome = session.commit(text)\n        if (outcome) {\n          dispatch({\n            type: 'setProp',\n            id: outcome.nodeId,\n            name: outcome.propName,\n            value: staticProp(outcome.value),\n          })\n        }\n      } else {\n        const outcome = session.cancel()\n        if (outcome) host.textContent = outcome.value\n      }\n      doc.getSelection()?.removeAllRanges()\n    }\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('commit')\n      } else if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('cancel')\n      }\n    }\n    const onBlur = () => finish('commit')\n    // `plaintext-only` keeps paste/typing plain; fall back where unsupported.\n    host.setAttribute('contenteditable', 'plaintext-only')\n    if (!host.isContentEditable) host.setAttribute('contenteditable', 'true')\n    host.setAttribute('data-ec-edit', 'text')\n    wrapper.setAttribute('data-ec-editing', '')\n    host.addEventListener('keydown', onKeyDown)\n    host.addEventListener('blur', onBlur)\n    deps.setEditing({ nodeId: session.nodeId, host, finish })\n    host.focus({ preventScroll: true })\n    // Keep the gesture's native caret/word selection when it landed inside\n    // the host; otherwise select the whole value.\n    const sel = doc.getSelection()\n    if (!sel || sel.rangeCount === 0 || !host.contains(sel.anchorNode)) {\n      const range = doc.createRange()\n      range.selectNodeContents(host)\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    }\n  }\n\n  // ---- rich text (EC-159) -------------------------------------------------\n  const beginRichText = (wrapper: HTMLElement, nodeId: string, target: InlineRichTextProp) => {\n    const host = findRichTextHost(wrapper)\n    if (!host) return\n    // Pair the storage tree against the rendered DOM and stamp every\n    // non-invertible node (custom blocks, unknown nodes, images, embeds)\n    // with its exact JSON: they stay rendered *inside* the live editor as\n    // non-editable atoms and survive the session byte-exact. A pairing\n    // mismatch means the DOM diverged from the deterministic render —\n    // refuse to start rather than risk lossy parsing (\"polished or absent\").\n    const pairs = collectPreservedPairs(target.value.doc, host as unknown as RtDomElement)\n    if (!pairs) return\n    const session = createInlineRichTextSession({\n      nodeId,\n      propName: target.propName,\n      original: target.value,\n    })\n    for (const pair of pairs) {\n      const el = pair.element as unknown as HTMLElement\n      el.setAttribute(PRESERVE_NODE_ATTR, JSON.stringify(pair.node))\n      el.setAttribute('contenteditable', 'false')\n    }\n    let done = false\n    const finish = (mode: 'commit' | 'cancel') => {\n      if (done) return\n      done = true\n      deps.setEditing(null)\n      deps.setRichEditHost(null)\n      // Parse the edited DOM, detach the session, then bump the node's\n      // remount epoch: React discards the editor-mutated DOM and renders\n      // fresh from the graph — committed content or, on cancel, the\n      // untouched original. Never patch a fiber tree against DOM the\n      // editing commands rewrote.\n      const parsed = mode === 'commit' ? richTextDocFromDom(host as unknown as RtDomElement) : null\n      host.removeEventListener('keydown', onKeyDown)\n      host.removeEventListener('blur', onBlur)\n      host.removeAttribute('contenteditable')\n      host.removeAttribute('data-ec-edit')\n      wrapper.removeAttribute('data-ec-editing')\n      deps.bumpRichEditEpoch(nodeId)\n      if (parsed) {\n        // An unchanged document commits nothing: the stored value is never\n        // rewritten, so untouched content round-trips byte-identical.\n        const outcome = session.commit(parsed.doc)\n        if (outcome) {\n          dispatch({\n            type: 'setProp',\n            id: outcome.nodeId,\n            name: outcome.propName,\n            value: staticProp(outcome.value as unknown as JsonValue),\n          })\n        }\n      } else {\n        session.cancel()\n      }\n      doc.getSelection()?.removeAllRanges()\n    }\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('cancel')\n      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        e.stopPropagation()\n        finish('commit')\n      }\n      // Plain Enter falls through: native paragraph insertion (multiline).\n    }\n    const onBlur = (e: FocusEvent) => {\n      // Interacting with the floating toolbar is part of the session.\n      const next = e.relatedTarget as HTMLElement | null\n      if (next?.closest?.('[data-ec-rt-toolbar]')) return\n      finish('commit')\n    }\n    host.setAttribute('contenteditable', 'true')\n    host.setAttribute('data-ec-edit', 'rich')\n    wrapper.setAttribute('data-ec-editing', '')\n    host.addEventListener('keydown', onKeyDown)\n    host.addEventListener('blur', onBlur)\n    deps.setEditing({ nodeId, host, finish })\n    deps.setRichEditHost(host)\n    host.focus({ preventScroll: true })\n  }\n\n  const onDblClick = (e: Event) => {\n    const wrapper = wrapperAt(e.target)\n    if (!wrapper) return\n    const nodeId = wrapper.getAttribute('data-ec-node-id')!\n    const editing = deps.getEditing()\n    if (editing) {\n      // Double-click inside the live editor is native word selection.\n      if (editing.nodeId === nodeId) return\n      editing.finish('commit')\n    }\n    const node = getNode(deps.currentRoot(), nodeId)\n    if (!node) return\n    const manifest = deps.getManifest(node.componentId)\n    const target = resolveInlineEditableProp(manifest, node)\n    if (target) {\n      const host = findInlineTextHost(wrapper, target.value) as HTMLElement | null\n      if (!host || typeof host.focus !== 'function') return\n      dispatch({ type: 'select', id: nodeId })\n      beginText(\n        wrapper,\n        host,\n        createInlineEditSession({ nodeId, propName: target.propName, original: target.value }),\n      )\n      return\n    }\n    const richTarget = resolveInlineRichTextProp(manifest, node)\n    if (!richTarget) return\n    dispatch({ type: 'select', id: nodeId })\n    beginRichText(wrapper, nodeId, richTarget)\n  }\n\n  doc.addEventListener('dblclick', onDblClick, true)\n  return () => {\n    doc.removeEventListener('dblclick', onDblClick, true)\n    // Teardown mid-session (doc swap/unmount): cancel — never dispatch from cleanup.\n    deps.getEditing()?.finish('cancel')\n  }\n}\n\n/** What `useCanvasInlineEditing` hands back to the canvas. */\nexport interface CanvasInlineEditing {\n  /**\n   * The active session — imperative DOM state inside the iframe, not render\n   * state. Other canvas listeners (selection clicks, DnD arming, clipboard\n   * blocking) consult it live through this ref.\n   */\n  editingRef: RefObject<ActiveInlineEdit | null>\n  /** The live rich-text host, mirrored into render state (mark toolbar mount). */\n  richEditHost: HTMLElement | null\n  /** Per-node remount epochs — decorate keys change when a rich session ends. */\n  richEditEpochs: Record<string, number>\n}\n\n/**\n * The React face of the canvas inline editing (EC-158/EC-159): owns the\n * session ref and the render state (`richEditHost`, `richEditEpochs`), wires\n * the dblclick listener when the iframe document exists, and cancels a live\n * session on teardown.\n */\nexport function useCanvasInlineEditing(\n  doc: Document | null,\n  deps: {\n    /** The live composition root (`builder.present`, mirrored into a ref). */\n    presentRef: RefObject<ComponentNode>\n    dispatch: (action: BuilderAction) => void\n    studio: StudioRegistry\n  },\n): CanvasInlineEditing {\n  const editingRef = useRef<ActiveInlineEdit | null>(null)\n  const [richEditHost, setRichEditHost] = useState<HTMLElement | null>(null)\n  const [richEditEpochs, setRichEditEpochs] = useState<Record<string, number>>({})\n  const { presentRef, dispatch, studio } = deps\n\n  useEffect(() => {\n    if (!doc) return\n    return attachCanvasInlineEditingListeners(doc, {\n      currentRoot: () => presentRef.current,\n      getManifest: (id) => studio.registry.getManifest(id),\n      dispatch,\n      getEditing: () => editingRef.current,\n      setEditing: (edit) => {\n        editingRef.current = edit\n      },\n      setRichEditHost,\n      bumpRichEditEpoch: (nodeId) =>\n        setRichEditEpochs((prev) => ({ ...prev, [nodeId]: (prev[nodeId] ?? 0) + 1 })),\n    })\n  }, [doc, dispatch, studio, presentRef])\n\n  return { editingRef, richEditHost, richEditEpochs }\n}\n"]}

package/dist/components/builder/canvas-render-context.d.ts

@@ -0,0 +1,83 @@
+import type { RenderContext, ResolveAsset, ResolveBinding, ResolveLink, ResolveListing, ResolveRelation } from '@elytracms/core/runtime-renderer';
+import type { BindingReference, ComponentNode } from '@elytracms/core/project-graph';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { CanvasPerspective } from '@elytracms/studio/lib/data';
+import type { ReuseCapability } from './reuse.js';
+/**
+ * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the
+ * seven injected resolvers that make the iframe preview match delivery —
+ * bindings, assets (EC-195), relations (EC-254), listings (EC-255), rich-text
+ * links (EC-291) — plus the per-node decorator that stamps the editable
+ * wrappers (selection/hover state, locale-fallback chips EC-176, rich-text
+ * remount epochs, and the EC-300 unresolved-reusable placeholder).
+ *
+ * The context assembly is a pure factory ({@link createCanvasRenderContext})
+ * over pure decision helpers ({@link unresolvedReuseStatus},
+ * {@link firstBindingFallbackLocale}), so the decoration and resolver wiring
+ * are unit-testable without providers; {@link useCanvasRenderContext} binds
+ * them to the live stores.
+ */
+/** Collect every node id under a root (the page subtree). */
+export declare function collectIds(node: ComponentNode, out?: Set<string>): Set<string>;
+/**
+ * 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).
+ */
+export declare function unresolvedReuseStatus(node: ComponentNode, capability: ReuseCapability | null | undefined, resolveAt: (ref: {
+    collection: string;
+    id: string;
+}, perspective: CanvasPerspective) => unknown, perspective: CanvasPerspective): 'unpublished' | 'missing' | null;
+/**
+ * Locale-fallback chips (EC-176): the locale the node's first fallback-served
+ * bound prop actually came from, or undefined when every bound value is a real
+ * translation (or nothing is bound). Pure over an injected per-binding decision
+ * (the hook wires `cmsBindingFallback` — the same decision function as the
+ * inspector's Content tab, so chip and label can never disagree).
+ */
+export declare function firstBindingFallbackLocale(node: ComponentNode, fallbackOf: (binding: BindingReference) => {
+    sourceLocale: string;
+} | null): string | undefined;
+/** Everything the pure context factory needs — resolvers plus decoration state. */
+export interface CanvasRenderContextDeps {
+    registry: RenderContext['registry'];
+    implementations: RenderContext['implementations'];
+    resolveBinding: ResolveBinding;
+    resolveAsset: ResolveAsset;
+    resolveRelation: ResolveRelation;
+    resolveListing: ResolveListing;
+    resolveLink: ResolveLink;
+    /** Only page nodes are editable; layout chrome must not be decorated. */
+    pageNodeIds: ReadonlySet<string>;
+    selectedId: string | null;
+    hoveredId: string | null;
+    /** Per-node remount epochs from the inline rich-text editing (EC-159). */
+    richEditEpochs: Record<string, number>;
+    unresolvedReuse(node: ComponentNode): 'unpublished' | 'missing' | null;
+    localeFallbackOf(node: ComponentNode): string | undefined;
+}
+/**
+ * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce
+ * the same context, so the decorator's wrapper markup is pinnable in tests.
+ */
+export declare function createCanvasRenderContext(deps: CanvasRenderContextDeps): RenderContext;
+/**
+ * The live canvas render context: binds the pure factory to the studio's
+ * stores (data sources, asset library, active locale, reuse capability) for
+ * the given perspective. Returns the context plus the page-node id set the
+ * canvas also needs for spacing-handle gating.
+ */
+export declare function useCanvasRenderContext(args: {
+    /** The edited composition root (`builder.present`). */
+    present: ComponentNode;
+    selectedId: string | null;
+    hoveredId: string | null;
+    studio: StudioRegistry;
+    perspective: CanvasPerspective;
+    richEditEpochs: Record<string, number>;
+}): {
+    ctx: RenderContext;
+    pageNodeIds: ReadonlySet<string>;
+};

package/dist/components/builder/canvas-render-context.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { translate } from '@elytracms/studio/lib/i18n';
+import { resolveCanvasLink, resolveCanvasListing, resolveCanvasRelation, useData, } from '@elytracms/studio/lib/data';
+import { cmsBindingFallback, useStudioLocale } from '@elytracms/studio/lib/locale';
+import { useOptionalAssets } from '../assets/assets-store.js';
+import { useReuse } from './reuse-context.js';
+import { reuseEmbedRef } from './reuse.js';
+/**
+ * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the
+ * seven injected resolvers that make the iframe preview match delivery —
+ * bindings, assets (EC-195), relations (EC-254), listings (EC-255), rich-text
+ * links (EC-291) — plus the per-node decorator that stamps the editable
+ * wrappers (selection/hover state, locale-fallback chips EC-176, rich-text
+ * remount epochs, and the EC-300 unresolved-reusable placeholder).
+ *
+ * The context assembly is a pure factory ({@link createCanvasRenderContext})
+ * over pure decision helpers ({@link unresolvedReuseStatus},
+ * {@link firstBindingFallbackLocale}), so the decoration and resolver wiring
+ * are unit-testable without providers; {@link useCanvasRenderContext} binds
+ * them to the live stores.
+ */
+/** Collect every node id under a root (the page subtree). */
+export 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;
+}
+/**
+ * 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).
+ */
+export function unresolvedReuseStatus(node, capability, resolveAt, perspective) {
+    if (!capability)
+        return null;
+    const ref = reuseEmbedRef(node, capability);
+    if (!ref)
+        return null;
+    if (resolveAt(ref, perspective))
+        return null;
+    return resolveAt(ref, 'draft') ? 'unpublished' : 'missing';
+}
+/**
+ * Locale-fallback chips (EC-176): the locale the node's first fallback-served
+ * bound prop actually came from, or undefined when every bound value is a real
+ * translation (or nothing is bound). Pure over an injected per-binding decision
+ * (the hook wires `cmsBindingFallback` — the same decision function as the
+ * inspector's Content tab, so chip and label can never disagree).
+ */
+export function firstBindingFallbackLocale(node, fallbackOf) {
+    for (const value of Object.values(node.props ?? {})) {
+        if (value.kind !== 'binding')
+            continue;
+        const fallback = fallbackOf(value.binding);
+        if (fallback)
+            return fallback.sourceLocale;
+    }
+    return undefined;
+}
+/**
+ * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce
+ * the same context, so the decorator's wrapper markup is pinnable in tests.
+ */
+export function createCanvasRenderContext(deps) {
+    return {
+        registry: deps.registry,
+        implementations: deps.implementations,
+        resolveBinding: deps.resolveBinding,
+        resolveAsset: deps.resolveAsset,
+        resolveRelation: deps.resolveRelation,
+        resolveListing: deps.resolveListing,
+        resolveLink: deps.resolveLink,
+        decorateNode: (node, rendered) => {
+            if (!deps.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 = deps.unresolvedReuse(node);
+            return (_jsx("div", { "data-ec-node-id": node.id, className: "ec-editable", "data-selected": node.id === deps.selectedId || undefined, "data-hovered": node.id === deps.hoveredId || undefined, "data-ec-locale-fallback": deps.localeFallbackOf(node), children: unresolved ? _jsx(UnresolvedReusablePlaceholder, { status: unresolved }) : rendered }, `${node.id}#${deps.richEditEpochs[node.id] ?? 0}`));
+        },
+    };
+}
+/**
+ * The live canvas render context: binds the pure factory to the studio's
+ * stores (data sources, asset library, active locale, reuse capability) for
+ * the given perspective. Returns the context plus the page-node id set the
+ * canvas also needs for spacing-handle gating.
+ */
+export function useCanvasRenderContext(args) {
+    const { present, selectedId, hoveredId, studio, perspective, richEditEpochs } = args;
+    const data = useData();
+    // 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(present), [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]);
+    const unresolvedReuse = useCallback((node) => unresolvedReuseStatus(node, reuse?.capability, (ref, p) => resolveCanvasRelation(ref, activeLocale, p), perspective), [reuse, activeLocale, perspective]);
+    const localeFallbackOf = useCallback((node) => firstBindingFallbackLocale(node, (binding) => cmsBindingFallback(binding, data.getSource(binding.sourceId), activeLocale)), [data, activeLocale]);
+    const ctx = useMemo(() => createCanvasRenderContext({
+        registry: studio.registry,
+        implementations: studio.implementations,
+        resolveBinding,
+        resolveAsset,
+        resolveRelation,
+        resolveListing,
+        resolveLink,
+        pageNodeIds,
+        selectedId,
+        hoveredId,
+        richEditEpochs,
+        unresolvedReuse,
+        localeFallbackOf,
+    }), [studio, resolveBinding, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, localeFallbackOf, richEditEpochs]);
+    return { ctx, pageNodeIds };
+}
+/**
+ * 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-render-context.js.map

package/dist/components/builder/canvas-render-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-render-context.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-render-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo } from 'react'\nimport type {\n  RenderContext,\n  ResolveAsset,\n  ResolveBinding,\n  ResolveLink,\n  ResolveListing,\n  ResolveRelation,\n} from '@elytracms/core/runtime-renderer'\nimport type { BindingReference, ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport {\n  resolveCanvasLink,\n  resolveCanvasListing,\n  resolveCanvasRelation,\n  useData,\n} from '@elytracms/studio/lib/data'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { cmsBindingFallback, useStudioLocale } from '@elytracms/studio/lib/locale'\nimport { useOptionalAssets } from '../assets/assets-store'\nimport { useReuse } from './reuse-context'\nimport { reuseEmbedRef } from './reuse'\nimport type { ReuseCapability } from './reuse'\n\n/**\n * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the\n * seven injected resolvers that make the iframe preview match delivery —\n * bindings, assets (EC-195), relations (EC-254), listings (EC-255), rich-text\n * links (EC-291) — plus the per-node decorator that stamps the editable\n * wrappers (selection/hover state, locale-fallback chips EC-176, rich-text\n * remount epochs, and the EC-300 unresolved-reusable placeholder).\n *\n * The context assembly is a pure factory ({@link createCanvasRenderContext})\n * over pure decision helpers ({@link unresolvedReuseStatus},\n * {@link firstBindingFallbackLocale}), so the decoration and resolver wiring\n * are unit-testable without providers; {@link useCanvasRenderContext} binds\n * them to the live stores.\n */\n\n/** Collect every node id under a root (the page subtree). */\nexport function collectIds(node: ComponentNode, out: Set<string> = new Set()): Set<string> {\n  out.add(node.id)\n  for (const children of Object.values(node.slots ?? {})) {\n    for (const child of children) collectIds(child, out)\n  }\n  return out\n}\n\n/**\n * EC-300/AD-16: a transcluding embed whose target doesn't resolve in the active\n * perspective renders a placeholder, never an empty section. `unpublished` = the\n * target exists as a draft but isn't live (Published view of a draft-only reusable);\n * `missing` = no resolvable target at all (deleted). `null` = resolves fine, or the\n * node isn't an embed / has no target picked yet (its own empty state owns that).\n */\nexport function unresolvedReuseStatus(\n  node: ComponentNode,\n  capability: ReuseCapability | null | undefined,\n  resolveAt: (ref: { collection: string; id: string }, perspective: CanvasPerspective) => unknown,\n  perspective: CanvasPerspective,\n): 'unpublished' | 'missing' | null {\n  if (!capability) return null\n  const ref = reuseEmbedRef(node, capability)\n  if (!ref) return null\n  if (resolveAt(ref, perspective)) return null\n  return resolveAt(ref, 'draft') ? 'unpublished' : 'missing'\n}\n\n/**\n * Locale-fallback chips (EC-176): the locale the node's first fallback-served\n * bound prop actually came from, or undefined when every bound value is a real\n * translation (or nothing is bound). Pure over an injected per-binding decision\n * (the hook wires `cmsBindingFallback` — the same decision function as the\n * inspector's Content tab, so chip and label can never disagree).\n */\nexport function firstBindingFallbackLocale(\n  node: ComponentNode,\n  fallbackOf: (binding: BindingReference) => { sourceLocale: string } | null,\n): string | undefined {\n  for (const value of Object.values(node.props ?? {})) {\n    if (value.kind !== 'binding') continue\n    const fallback = fallbackOf(value.binding)\n    if (fallback) return fallback.sourceLocale\n  }\n  return undefined\n}\n\n/** Everything the pure context factory needs — resolvers plus decoration state. */\nexport interface CanvasRenderContextDeps {\n  registry: RenderContext['registry']\n  implementations: RenderContext['implementations']\n  resolveBinding: ResolveBinding\n  resolveAsset: ResolveAsset\n  resolveRelation: ResolveRelation\n  resolveListing: ResolveListing\n  resolveLink: ResolveLink\n  /** Only page nodes are editable; layout chrome must not be decorated. */\n  pageNodeIds: ReadonlySet<string>\n  selectedId: string | null\n  hoveredId: string | null\n  /** Per-node remount epochs from the inline rich-text editing (EC-159). */\n  richEditEpochs: Record<string, number>\n  unresolvedReuse(node: ComponentNode): 'unpublished' | 'missing' | null\n  localeFallbackOf(node: ComponentNode): string | undefined\n}\n\n/**\n * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce\n * the same context, so the decorator's wrapper markup is pinnable in tests.\n */\nexport function createCanvasRenderContext(deps: CanvasRenderContextDeps): RenderContext {\n  return {\n    registry: deps.registry,\n    implementations: deps.implementations,\n    resolveBinding: deps.resolveBinding,\n    resolveAsset: deps.resolveAsset,\n    resolveRelation: deps.resolveRelation,\n    resolveListing: deps.resolveListing,\n    resolveLink: deps.resolveLink,\n    decorateNode: (node, rendered) => {\n      if (!deps.pageNodeIds.has(node.id)) return rendered\n      // An unresolved hard reference shows the placeholder in place of the empty\n      // transclusion; the node stays selectable, so its inspector relation chip\n      // (EC-296) deep-links to the reusable to edit/publish it.\n      const unresolved = deps.unresolvedReuse(node)\n      return (\n        <div\n          // The epoch suffix forces a remount after a rich-text editing\n          // session mutated this node's rendered DOM (see richEditEpochs).\n          key={`${node.id}#${deps.richEditEpochs[node.id] ?? 0}`}\n          data-ec-node-id={node.id}\n          className=\"ec-editable\"\n          data-selected={node.id === deps.selectedId || undefined}\n          data-hovered={node.id === deps.hoveredId || undefined}\n          data-ec-locale-fallback={deps.localeFallbackOf(node)}\n        >\n          {unresolved ? <UnresolvedReusablePlaceholder status={unresolved} /> : rendered}\n        </div>\n      )\n    },\n  }\n}\n\n/**\n * The live canvas render context: binds the pure factory to the studio's\n * stores (data sources, asset library, active locale, reuse capability) for\n * the given perspective. Returns the context plus the page-node id set the\n * canvas also needs for spacing-handle gating.\n */\nexport function useCanvasRenderContext(args: {\n  /** The edited composition root (`builder.present`). */\n  present: ComponentNode\n  selectedId: string | null\n  hoveredId: string | null\n  studio: StudioRegistry\n  perspective: CanvasPerspective\n  richEditEpochs: Record<string, number>\n}): { ctx: RenderContext; pageNodeIds: ReadonlySet<string> } {\n  const { present, selectedId, hoveredId, studio, perspective, richEditEpochs } = args\n  const data = useData()\n\n  // Only page nodes are editable; layout chrome (rendered around the page) is\n  // read-only context and must not be selectable (it isn't in the page tree).\n  const pageNodeIds = useMemo(() => collectIds(present), [present])\n\n  // Bridge the renderer's untyped ItemContext (item: unknown) to the binding\n  // layer's RepeaterItemContext (item: JsonValue). The renderer feeds back values\n  // it resolved from JSON payloads, so the item is a JsonValue.\n  const resolveBinding: ResolveBinding = useCallback(\n    (ref, item) =>\n      data.resolveValue(ref, item ? { item: item.item as JsonValue, index: item.index } : undefined),\n    [data],\n  )\n\n  // EC-195: resolve an `asset`-typed Image prop (an asset id) to its url +\n  // intrinsic dimensions from the live asset library, so the canvas previews\n  // exactly what the host renders. A record without a resolved url (e.g. a\n  // never-served seed) → null → the implementation's visible empty state.\n  const assetsStore = useOptionalAssets()\n  const resolveAsset: ResolveAsset = useCallback(\n    (assetId) => {\n      const record = assetsStore?.assets.find((a) => a.id === assetId)\n      if (!record?.url) return null\n      return {\n        url: record.url,\n        width: record.width ?? null,\n        height: record.height ?? null,\n        alt: record.alt ?? null,\n        focalPoint: record.focalPoint ?? null,\n      }\n    },\n    [assetsStore],\n  )\n\n  // Locale-fallback chips (EC-176): a node whose bound content currently\n  // previews via EC-018 locale fallback wears a corner chip naming the locale\n  // the value actually came from. Same decision function as the inspector's\n  // Content tab (`cmsBindingFallback`), so chip and label can never disagree.\n  const { locale: activeLocale } = useStudioLocale()\n  // EC-300: the reuse capability identifies a transcluding embed + its relation prop,\n  // so the canvas can detect a HARD reference whose target doesn't resolve and show a\n  // placeholder instead of an empty section. Null-safe (no provider / no capability).\n  const reuse = useReuse()\n\n  // EC-254: populate a block's `relation` prop (the editor's document pick — a\n  // ProductGrid's products, a Reusable's element) to delivery shape from the\n  // active content session, in the canvas's active locale, so the canvas previews\n  // picked documents exactly as the host renders them. The studio analog of the\n  // host's baked relations map. A missing/invisible target → null → the block's\n  // own empty state.\n  const resolveRelation: ResolveRelation = useCallback(\n    (ref) => resolveCanvasRelation(ref, activeLocale, perspective),\n    [activeLocale, perspective],\n  )\n\n  // EC-255: resolve a listing block's query (a ProductGrid keyed to a category) to\n  // its documents from the active content session, in the canvas's active locale, so\n  // the canvas previews a dynamic grid exactly as the host renders it. The studio\n  // analog of the host's baked listings map; an empty/invalid query → [] → the\n  // block's own empty state.\n  const resolveListing: ResolveListing = useCallback(\n    (query) => resolveCanvasListing(query, activeLocale, perspective),\n    [activeLocale, perspective],\n  )\n\n  // EC-291: resolve a rich-text internal link (`{type:'reference'}`) to its target's\n  // URL path from the active content session, in the canvas's active locale — the\n  // studio analog of the host's baked links map. A missing/unpublished/unroutable\n  // target → null → the rich-text renderer shows the visible `unresolved-ref` issue.\n  const resolveLink: ResolveLink = useCallback(\n    (ref) => resolveCanvasLink(ref, activeLocale, perspective),\n    [activeLocale, perspective],\n  )\n\n  const unresolvedReuse = useCallback(\n    (node: ComponentNode): 'unpublished' | 'missing' | null =>\n      unresolvedReuseStatus(\n        node,\n        reuse?.capability,\n        (ref, p) => resolveCanvasRelation(ref, activeLocale, p),\n        perspective,\n      ),\n    [reuse, activeLocale, perspective],\n  )\n\n  const localeFallbackOf = useCallback(\n    (node: ComponentNode): string | undefined =>\n      firstBindingFallbackLocale(node, (binding) =>\n        cmsBindingFallback(binding, data.getSource(binding.sourceId), activeLocale),\n      ),\n    [data, activeLocale],\n  )\n\n  const ctx: RenderContext = useMemo(\n    () =>\n      createCanvasRenderContext({\n        registry: studio.registry,\n        implementations: studio.implementations,\n        resolveBinding,\n        resolveAsset,\n        resolveRelation,\n        resolveListing,\n        resolveLink,\n        pageNodeIds,\n        selectedId,\n        hoveredId,\n        richEditEpochs,\n        unresolvedReuse,\n        localeFallbackOf,\n      }),\n    [studio, resolveBinding, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, localeFallbackOf, richEditEpochs],\n  )\n\n  return { ctx, pageNodeIds }\n}\n\n/**\n * In-canvas placeholder for a transcluding embed whose target doesn't resolve\n * (EC-300/AD-16) — shown in place of the empty section so a hard reference never\n * silently vanishes. Rendered INTO the iframe (portal), which carries only the\n * project's stylesheet, so it uses inline styles rather than studio UI classes.\n * The node stays selectable; the inspector's `element` relation chip (EC-296)\n * deep-links to the reusable to edit or publish it.\n */\nfunction UnresolvedReusablePlaceholder({ status }: { status: 'unpublished' | 'missing' }) {\n  const title =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedTitle')\n      : translate('builder.canvas.reusableMissingTitle')\n  const hint =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedHint')\n      : translate('builder.canvas.reusableMissingHint')\n  return (\n    <div\n      style={{\n        boxSizing: 'border-box',\n        border: '1px dashed rgba(120,120,120,0.5)',\n        borderRadius: 8,\n        padding: '24px 28px',\n        margin: '12px 16px',\n        background: 'rgba(127,127,127,0.06)',\n        color: 'rgba(90,90,90,0.95)',\n        font: '14px/1.5 system-ui, -apple-system, sans-serif',\n        textAlign: 'center',\n      }}\n    >\n      <div style={{ fontWeight: 600 }}>⚠ {title}</div>\n      <div style={{ marginTop: 6, fontSize: 13, opacity: 0.85 }}>{hint}</div>\n    </div>\n  )\n}\n"]}

package/dist/components/builder/canvas.d.ts

@@ -4,7 +4,10 @@ import type { CanvasPerspective } from '@elytracms/studio/lib/data';
  * 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 declare function BuilderCanvas({ perspective, }?: {
     /** Resolve references against this perspective (EC-300/AD-16). The editable Draft