@elytracms/studio 0.0.58 → 0.0.60

package/dist/components/builder/canvas-dnd.js

@@ -0,0 +1,207 @@
+import { useEffect } from 'react';
+import { getNode, getParentInfo } 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 { wrapperAt } from './canvas-dom.js';
+/**
+ * Wire the canvas drag-and-drop listeners onto the iframe document (native —
+ * React's synthetic events don't cross frames). Returns the detach function.
+ */
+export function attachCanvasDndListeners(doc, deps) {
+    const { currentRoot, getManifest, dispatch } = deps;
+    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 = deps.isEditingTarget(e.target);
+        if (root && nodeId && nodeId !== root.id && !inEditor) {
+            wrapper.setAttribute('draggable', 'true');
+        }
+        else {
+            wrapper.removeAttribute('draggable');
+        }
+    };
+    const onDragStart = (e) => {
+        const event = e;
+        // Drags inside the live inline editor are native text drags — leave them alone.
+        if (deps.isEditingTarget(event.target))
+            return;
+        const wrapper = wrapperAt(event.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) {
+            event.preventDefault();
+            return;
+        }
+        beginDrag({ subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId }, event.dataTransfer);
+    };
+    const onDragOver = (e) => {
+        const event = e;
+        const drag = activeDrag();
+        if (!drag)
+            return;
+        const root = currentRoot();
+        if (!root)
+            return;
+        const wrapper = wrapperAt(event.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 ? (event.clientX - rect.left) / rect.width : 0.5,
+                y: rect.height > 0 ? (event.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;
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy';
+            }
+        }
+        else {
+            dropPlan = null;
+        }
+    };
+    const onDrop = (e) => {
+        const event = e;
+        const drag = activeDrag();
+        if (!drag)
+            return;
+        const plan = dropPlan;
+        clearIndicator();
+        if (!plan)
+            return;
+        event.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);
+    };
+}
+/**
+ * The React face of the canvas DnD wiring: attach on the iframe document once
+ * it exists, detach on doc swap/unmount. State lives in refs on purpose —
+ * listeners outlive renders and must read the *current* graph and editing
+ * session without re-subscribing on every edit.
+ */
+export function useCanvasDnd(doc, deps) {
+    const { presentRef, dispatch, studio, editingRef } = deps;
+    useEffect(() => {
+        if (!doc)
+            return;
+        return attachCanvasDndListeners(doc, {
+            currentRoot: () => presentRef.current,
+            getManifest: (id) => studio.registry.getManifest(id),
+            dispatch,
+            isEditingTarget: (target) => editingRef.current?.host.contains(target) ?? false,
+        });
+    }, [doc, dispatch, studio, presentRef, editingRef]);
+}
+//# sourceMappingURL=canvas-dnd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-dnd.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-dnd.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react'\nimport type { RefObject } from 'react'\nimport { getNode, getParentInfo } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport {\n  canNestInto,\n  containerFlowAxis,\n  dropIndicatorFor,\n  dropPositionForPoint,\n  resolveDrop,\n} from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { DropPlan, DropPosition, FlowAxis, ManifestRules } from '@elytracms/studio/lib/dnd/drop-rules'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { BuilderAction } from './builder-store'\nimport { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session'\nimport type { ActiveInlineEdit } from './canvas-inline-editing'\nimport { wrapperAt } from './canvas-dom'\n\n/**\n * Drag & drop on the canvas (EC-160), extracted from `BuilderCanvas` (EC-330).\n * Eligibility is the pure shared rule set (`lib/dnd/drop-rules`) — the same\n * functions the page tree consumes — evaluated live during `dragover`; the\n * wrapper under the pointer shows the resolution (`data-ec-drop`:\n * into/before/after, or `blocked` for a visible rejection). A completed drop\n * dispatches exactly one builder action (move or insert) → one operations\n * command → one undo step. Ineligible targets never `preventDefault`, so\n * releasing over one is a native no-op.\n *\n * The listener wiring is framework-free ({@link attachCanvasDndListeners},\n * the `clipboard-actions` pattern) so the whole gesture state machine —\n * arm-on-mousedown, live indicator, plan resolution, one-dispatch drop — is\n * unit-testable without a DOM environment; {@link useCanvasDnd} only owns the\n * React effect lifecycle.\n */\n\n/** The structural slice of the iframe document the DnD wiring needs. */\nexport interface CanvasDndDocument {\n  addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void\n  querySelector(selectors: string): Element | null\n}\n\nexport interface CanvasDndDeps {\n  /** The current composition root (read live — listeners outlive renders). */\n  currentRoot(): ComponentNode\n  /** Manifest lookup feeding the pure drop rules. */\n  getManifest(componentId: string): ManifestRules | undefined\n  dispatch(action: BuilderAction): void\n  /**\n   * Whether `target` sits inside the live inline editor (EC-158): a press\n   * there must keep native caret clicks/text selection, never start a node drag.\n   */\n  isEditingTarget(target: EventTarget | null): boolean\n}\n\n/**\n * Wire the canvas drag-and-drop listeners onto the iframe document (native —\n * React's synthetic events don't cross frames). Returns the detach function.\n */\nexport function attachCanvasDndListeners(doc: CanvasDndDocument, deps: CanvasDndDeps): () => void {\n  const { currentRoot, getManifest, dispatch } = deps\n\n  let dropWrapper: HTMLElement | null = null\n  let dropPlan: DropPlan | null = null\n  const clearIndicator = () => {\n    dropWrapper?.removeAttribute('data-ec-drop')\n    dropWrapper?.removeAttribute('data-ec-drop-axis')\n    dropWrapper = null\n    dropPlan = null\n  }\n  const showIndicator = (wrapper: HTMLElement | null, state: string | null, axis: FlowAxis) => {\n    if (dropWrapper && dropWrapper !== wrapper) {\n      dropWrapper.removeAttribute('data-ec-drop')\n      dropWrapper.removeAttribute('data-ec-drop-axis')\n    }\n    dropWrapper = wrapper\n    if (!wrapper) return\n    if (state) {\n      wrapper.setAttribute('data-ec-drop', state)\n      // Before/after bars render along the parent's flow axis (EC-162).\n      wrapper.setAttribute('data-ec-drop-axis', axis === 'horizontal' ? 'x' : 'y')\n    } else {\n      wrapper.removeAttribute('data-ec-drop')\n      wrapper.removeAttribute('data-ec-drop-axis')\n    }\n  }\n\n  // Wrappers are armed draggable per-gesture on mousedown, never via render\n  // state: the active inline editor (EC-158) must keep native caret clicks\n  // and text selection, so a press inside the editing host disarms its\n  // wrapper instead of starting a node drag.\n  const onMouseDown = (e: Event) => {\n    const wrapper = wrapperAt(e.target)\n    if (!wrapper) return\n    const root = currentRoot()\n    const nodeId = wrapper.getAttribute('data-ec-node-id')\n    const inEditor = deps.isEditingTarget(e.target)\n    if (root && nodeId && nodeId !== root.id && !inEditor) {\n      wrapper.setAttribute('draggable', 'true')\n    } else {\n      wrapper.removeAttribute('draggable')\n    }\n  }\n\n  const onDragStart = (e: Event) => {\n    const event = e as DragEvent\n    // Drags inside the live inline editor are native text drags — leave them alone.\n    if (deps.isEditingTarget(event.target)) return\n    const wrapper = wrapperAt(event.target)\n    if (!wrapper) return\n    const root = currentRoot()\n    const nodeId = wrapper.getAttribute('data-ec-node-id')!\n    const node = root ? getNode(root, nodeId) : undefined\n    if (!root || !node || nodeId === root.id) {\n      event.preventDefault()\n      return\n    }\n    beginDrag(\n      { subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId },\n      event.dataTransfer,\n    )\n  }\n\n  const onDragOver = (e: Event) => {\n    const event = e as DragEvent\n    const drag = activeDrag()\n    if (!drag) return\n    const root = currentRoot()\n    if (!root) return\n    const wrapper = wrapperAt(event.target)\n    // Empty space around the page subtree targets the root slot (append).\n    const refId = wrapper?.getAttribute('data-ec-node-id') ?? root.id\n    const refWrapper =\n      wrapper ?? (doc.querySelector(`[data-ec-node-id=\"${root.id}\"]`) as HTMLElement | null)\n    const refNode = getNode(root, refId)\n    if (!refNode) {\n      clearIndicator()\n      return\n    }\n    let position: DropPosition = 'into'\n    let flow: FlowAxis = 'vertical'\n    if (wrapper && refId !== root.id) {\n      const rect = wrapper.getBoundingClientRect()\n      // Hit-bands follow the parent's flow axis (EC-162); the cross-axis\n      // side bands of vertically flowing targets are the wrap gesture.\n      flow = containerFlowAxis(getParentInfo(root, refId)?.parent)\n      position = dropPositionForPoint({\n        x: rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5,\n        y: rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5,\n        flow,\n        nestable: canNestInto(getManifest, refNode.componentId),\n        edges: true,\n        wrappable: true,\n      })\n    }\n    const resolution = resolveDrop({\n      root,\n      getManifest,\n      subject: drag.subject,\n      location: { nodeId: refId, position },\n    })\n    showIndicator(refWrapper, dropIndicatorFor(resolution, position), flow)\n    if (resolution.eligible) {\n      dropPlan = resolution\n      event.preventDefault()\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy'\n      }\n    } else {\n      dropPlan = null\n    }\n  }\n\n  const onDrop = (e: Event) => {\n    const event = e as DragEvent\n    const drag = activeDrag()\n    if (!drag) return\n    const plan = dropPlan\n    clearIndicator()\n    if (!plan) return\n    event.preventDefault()\n    // Exactly one dispatch per completed drop (one undo step, one command).\n    if (plan.kind === 'move') {\n      dispatch({ type: 'move', id: plan.nodeId, target: plan.target })\n    } else if (plan.kind === 'wrap') {\n      // EC-162 gesture: reference + subject become a two-column Grid.\n      const subject =\n        plan.nodeId !== undefined\n          ? { kind: 'node' as const, nodeId: plan.nodeId }\n          : drag.buildNode\n            ? { kind: 'component' as const, node: drag.buildNode() }\n            : null\n      if (!subject) {\n        endDrag('cancelled')\n        return\n      }\n      dispatch({ type: 'wrap', referenceId: plan.referenceId, side: plan.side, subject })\n    } else if (drag.buildNode) {\n      dispatch({ type: 'insert', target: plan.target, node: drag.buildNode() })\n    } else {\n      endDrag('cancelled')\n      return\n    }\n    endDrag('dropped')\n  }\n\n  const onDragEnd = () => {\n    clearIndicator()\n    endDrag('cancelled')\n  }\n\n  const onDragLeave = (e: Event) => {\n    // Leaving the iframe document entirely (relatedTarget is null).\n    if (!(e as DragEvent).relatedTarget) clearIndicator()\n  }\n\n  // Cleanup when the drag ends anywhere (e.g. dropped on the page tree).\n  const unsubscribe = onDragSessionEnd(() => clearIndicator())\n\n  doc.addEventListener('mousedown', onMouseDown, true)\n  doc.addEventListener('dragstart', onDragStart)\n  doc.addEventListener('dragover', onDragOver)\n  doc.addEventListener('drop', onDrop)\n  doc.addEventListener('dragend', onDragEnd)\n  doc.addEventListener('dragleave', onDragLeave)\n  return () => {\n    unsubscribe()\n    clearIndicator()\n    doc.removeEventListener('mousedown', onMouseDown, true)\n    doc.removeEventListener('dragstart', onDragStart)\n    doc.removeEventListener('dragover', onDragOver)\n    doc.removeEventListener('drop', onDrop)\n    doc.removeEventListener('dragend', onDragEnd)\n    doc.removeEventListener('dragleave', onDragLeave)\n  }\n}\n\n/**\n * The React face of the canvas DnD wiring: attach on the iframe document once\n * it exists, detach on doc swap/unmount. State lives in refs on purpose —\n * listeners outlive renders and must read the *current* graph and editing\n * session without re-subscribing on every edit.\n */\nexport function useCanvasDnd(\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    /** The live inline-edit session (owned by `useCanvasInlineEditing`). */\n    editingRef: RefObject<ActiveInlineEdit | null>\n  },\n): void {\n  const { presentRef, dispatch, studio, editingRef } = deps\n  useEffect(() => {\n    if (!doc) return\n    return attachCanvasDndListeners(doc, {\n      currentRoot: () => presentRef.current,\n      getManifest: (id) => studio.registry.getManifest(id),\n      dispatch,\n      isEditingTarget: (target) => editingRef.current?.host.contains(target as Node) ?? false,\n    })\n  }, [doc, dispatch, studio, presentRef, editingRef])\n}\n"]}

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

@@ -0,0 +1,11 @@
+/**
+ * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the
+ * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor
+ * every iframe listener resolves gestures against — selection/hover
+ * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing
+ * (`canvas-inline-editing`) all share these two lookups.
+ */
+/** The node id of the editable wrapper containing `target`, or null. */
+export declare function nodeIdAt(target: EventTarget | null): string | null;
+/** The editable wrapper element containing `target`, or null. */
+export declare function wrapperAt(target: EventTarget | null): HTMLElement | null;

package/dist/components/builder/canvas-dom.js

@@ -0,0 +1,17 @@
+/**
+ * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the
+ * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor
+ * every iframe listener resolves gestures against — selection/hover
+ * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing
+ * (`canvas-inline-editing`) all share these two lookups.
+ */
+/** The node id of the editable wrapper containing `target`, or null. */
+export function nodeIdAt(target) {
+    return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null;
+}
+/** The editable wrapper element containing `target`, or null. */
+export function wrapperAt(target) {
+    const el = target;
+    return el?.closest?.('[data-ec-node-id]') ?? null;
+}
+//# sourceMappingURL=canvas-dom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-dom.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-dom.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wEAAwE;AACxE,MAAM,UAAU,QAAQ,CAAC,MAA0B;IACjD,OAAO,SAAS,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAA;AACnE,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,SAAS,CAAC,MAA0B;IAClD,MAAM,EAAE,GAAG,MAA4B,CAAA;IACvC,OAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,mBAAmB,CAAwB,IAAI,IAAI,CAAA;AAC3E,CAAC","sourcesContent":["/**\n * Shared canvas DOM helpers (EC-330): the per-node editable wrappers the\n * canvas renders (`decorateNode` stamps `data-ec-node-id`) are the anchor\n * every iframe listener resolves gestures against — selection/hover\n * (canvas.tsx), drag & drop (`canvas-dnd`), and inline editing\n * (`canvas-inline-editing`) all share these two lookups.\n */\n\n/** The node id of the editable wrapper containing `target`, or null. */\nexport function nodeIdAt(target: EventTarget | null): string | null {\n  return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null\n}\n\n/** The editable wrapper element containing `target`, or null. */\nexport function wrapperAt(target: EventTarget | null): HTMLElement | null {\n  const el = target as HTMLElement | null\n  return (el?.closest?.('[data-ec-node-id]') as HTMLElement | null) ?? null\n}\n"]}

package/dist/components/builder/canvas-inline-editing.d.ts

@@ -0,0 +1,91 @@
+import type { RefObject } from 'react';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
+import type { BuilderAction } from './builder-store.js';
+/**
+ * Inline editing on the canvas (EC-158 plain text, EC-159 rich text),
+ * extracted from `BuilderCanvas` (EC-330): 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. 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.
+ *
+ * The listener wiring is framework-free
+ * ({@link attachCanvasInlineEditingListeners}, the `clipboard-actions`
+ * pattern) so the begin/commit/cancel state machine is unit-testable without
+ * a DOM environment; {@link useCanvasInlineEditing} owns the React state the
+ * canvas renders from (the live rich-text host, the remount epochs) and the
+ * session ref other canvas listeners consult.
+ */
+/** A live inline-editing session bound to its DOM host (EC-158/EC-159). */
+export interface ActiveInlineEdit {
+    nodeId: string;
+    host: HTMLElement;
+    /** Finish the session exactly once (later calls are no-ops). */
+    finish: (mode: 'commit' | 'cancel') => void;
+}
+/** The structural slice of the iframe document the editing wiring needs. */
+export interface CanvasInlineEditingDocument {
+    addEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    removeEventListener(type: string, listener: (e: Event) => void, capture?: boolean): void;
+    getSelection(): Selection | null;
+    createRange(): Range;
+}
+export interface CanvasInlineEditingDeps {
+    /** The current composition root (read live — listeners outlive renders). */
+    currentRoot(): ComponentNode;
+    getManifest(componentId: string): ComponentManifest | undefined;
+    dispatch(action: BuilderAction): void;
+    /** The live session — imperative DOM state, mirrored for other listeners. */
+    getEditing(): ActiveInlineEdit | null;
+    setEditing(edit: ActiveInlineEdit | null): void;
+    /** Mirror the rich-text host into render state (mounts the mark toolbar). */
+    setRichEditHost(host: HTMLElement | null): void;
+    /**
+     * 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.
+     */
+    bumpRichEditEpoch(nodeId: string): void;
+}
+/**
+ * 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 declare function attachCanvasInlineEditingListeners(doc: CanvasInlineEditingDocument, deps: CanvasInlineEditingDeps): () => void;
+/** What `useCanvasInlineEditing` hands back to the canvas. */
+export interface CanvasInlineEditing {
+    /**
+     * The active session — imperative DOM state inside the iframe, not render
+     * state. Other canvas listeners (selection clicks, DnD arming, clipboard
+     * blocking) consult it live through this ref.
+     */
+    editingRef: RefObject<ActiveInlineEdit | null>;
+    /** The live rich-text host, mirrored into render state (mark toolbar mount). */
+    richEditHost: HTMLElement | null;
+    /** Per-node remount epochs — decorate keys change when a rich session ends. */
+    richEditEpochs: Record<string, number>;
+}
+/**
+ * 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 declare function useCanvasInlineEditing(doc: Document | null, deps: {
+    /** The live composition root (`builder.present`, mirrored into a ref). */
+    presentRef: RefObject<ComponentNode>;
+    dispatch: (action: BuilderAction) => void;
+    studio: StudioRegistry;
+}): CanvasInlineEditing;

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