@elytracms/studio 0.0.1

package/dist/components/builder/canvas.js

@@ -0,0 +1,723 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { renderCompositionInLayout } from '@elytracms/runtime-renderer';
+import { useParams } from '@elytracms/studio/router';
+import { getNode, getParentInfo, parseProjectGraph, staticProp } from '@elytracms/project-graph';
+import { toProjectGraph } from '@elytracms/studio/lib/working-graph';
+import { canNestInto, containerFlowAxis, dropIndicatorFor, dropPositionForPoint, resolveDrop, } from '@elytracms/studio/lib/dnd/drop-rules';
+import { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session';
+import { PRESERVE_NODE_ATTR, collectPreservedPairs, richTextDocFromDom, } from '@elytracms/rich-text';
+import { getStudioRegistry } from '@elytracms/studio/lib/registry';
+import { useOptionalAssets } from '../assets/assets-store';
+import { resolveCanvasListing, resolveCanvasRelation, useData } from '@elytracms/studio/lib/data';
+import { cmsBindingFallback, useStudioLocale } from '@elytracms/studio/lib/locale';
+import { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session';
+import { useCollab } from '../collab/collab-context';
+import { getCanvasStylesheetUrl } from './canvas-stylesheet';
+import { useBuilder } from './builder-store';
+import { ClipboardNoticeOverlay, attachClipboardListeners, useStudioClipboard, } from './clipboard-actions';
+import { createInlineEditSession, createInlineRichTextSession, findInlineTextHost, resolveInlineEditableProp, resolveInlineRichTextProp, } from './inline-edit';
+import { RichTextToolbar } from './rich-text-toolbar';
+import { SpacingHandles, hasSpacingHandles } from './spacing-handles';
+const VIEWPORT_WIDTH = {
+    desktop: '100%',
+    tablet: '768px',
+    mobile: '390px',
+};
+/** Selection/hover outlines, scoped to the per-node editable wrappers. */
+const OUTLINE_CSS = `
+  html { color-scheme: dark; }
+  body { margin: 0; padding: 16px; }
+  .ec-editable { outline-offset: -1px; cursor: default; }
+  .ec-editable[data-hovered]:not([data-selected]) { outline: 1px dashed rgba(130,150,190,0.75); }
+  .ec-editable[data-selected] { outline: 2px solid #5b8cff; }
+  /* Inline editing (EC-158 text, EC-159 rich text): the rendered element
+     itself becomes the editor — no overlay, no replacement input — so
+     typography, alignment, and layout are pixel-identical between edit and
+     render states. The wrapper keeps the selection outline; the host only
+     gets a caret. pre-wrap applies to PLAIN text hosts only — rich-text
+     markup must keep its rendered whitespace handling (no layout shift). */
+  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff; }
+  .ec-editable [data-ec-edit] { outline: none; cursor: text; }
+  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }
+  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,
+     images, embeds): visible and rendered, but not text-editable. */
+  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }
+  /* Floating mark toolbar (EC-159), portaled into the iframe. */
+  .ec-rt-toolbar { color-scheme: dark; }
+  .ec-rt-toolbar-row { display: flex; align-items: center; gap: 2px; padding: 3px;
+    border: 1px solid rgba(130,150,190,0.4); border-radius: 8px;
+    background: rgb(24,26,32); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
+  .ec-rt-toolbar-btn { min-width: 26px; height: 24px; padding: 0 7px; border: 0; border-radius: 5px;
+    background: transparent; color: rgb(225,228,236); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
+    cursor: pointer; }
+  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25); }
+  .ec-rt-toolbar-btn[data-active] { background: #5b8cff; color: white; }
+  .ec-rt-toolbar-input { width: 200px; height: 24px; padding: 0 7px; border-radius: 5px;
+    border: 1px solid rgba(130,150,190,0.4); background: rgb(16,18,22); color: rgb(225,228,236);
+    font: 12px/1 ui-sans-serif, system-ui, sans-serif; outline: none; }
+  /* Locale-fallback chips (EC-176): a node whose bound content is currently
+     served via locale fallback wears a small corner chip naming the locale it
+     actually came from — the canvas never silently mixes locales. */
+  .ec-editable[data-ec-locale-fallback] { position: relative; }
+  .ec-editable[data-ec-locale-fallback]::after {
+    content: attr(data-ec-locale-fallback);
+    position: absolute; top: 2px; right: 2px; z-index: 5; pointer-events: none;
+    padding: 0 4px; border-radius: 4px;
+    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif;
+    letter-spacing: 0.05em; text-transform: uppercase;
+    color: #fbbf24; background: rgba(180,83,9,0.25); border: 1px solid rgba(245,158,11,0.45);
+  }
+  /* Drag & drop states (EC-160/EC-162): eligibility comes from the shared pure
+     rules (lib/dnd/drop-rules); these classes only *show* the resolution.
+     Rejection is explicit and visible during the drag — never a silent failed
+     drop. Before/after bars follow the parent's flow axis (data-ec-drop-axis);
+     left/right are the wrap-into-columns gesture (violet, paired highlight). */
+  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399; outline-offset: -2px; background-color: rgba(52, 211, 153, 0.08); }
+  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8; }
+  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8; }
+  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8; }
+  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8; }
+  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }
+  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa; background-color: rgba(167, 139, 250, 0.1); }
+  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444; outline-offset: -2px; background-color: rgba(239, 68, 68, 0.08); cursor: not-allowed; }
+`;
+function nodeIdAt(target) {
+    return wrapperAt(target)?.getAttribute('data-ec-node-id') ?? null;
+}
+function wrapperAt(target) {
+    const el = target;
+    return el?.closest?.('[data-ec-node-id]') ?? null;
+}
+/**
+ * The rendered `.rich-text` element inside a node's wrapper — the rich-text
+ * editing host (EC-159). Never crosses into a nested node's wrapper.
+ */
+function findRichTextHost(wrapper) {
+    const host = wrapper.querySelector('.rich-text');
+    return host && host.closest('[data-ec-node-id]') === wrapper ? host : null;
+}
+/** Collect every node id under a root (the page subtree). */
+function collectIds(node, out = new Set()) {
+    out.add(node.id);
+    for (const children of Object.values(node.slots ?? {})) {
+        for (const child of children)
+            collectIds(child, out);
+    }
+    return out;
+}
+/**
+ * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders
+ * into a same-origin iframe via a React portal — true style isolation + true
+ * responsive widths. Each node is wrapped with an editable marker so clicks
+ * select and hover/selection draw outlines. Native listeners bridge the iframe
+ * boundary (React's synthetic events don't cross frames).
+ */
+export function BuilderCanvas() {
+    const builder = useBuilder();
+    const { dispatch } = builder;
+    const studio = getStudioRegistry();
+    const data = useData();
+    const collab = useCollab();
+    // Draft vs published preview (EC-123): in published mode render the live version (read-only),
+    // distinct from the live draft the editor mutates. Single-environment (EC-179).
+    const published = collab.previewMode === 'published';
+    const publishedGraph = useMemo(() => {
+        if (!published)
+            return null;
+        const versionId = collab.collab.publishing.state(collab.projectId).publishedVersionId;
+        const version = versionId ? collab.collab.versions.get(collab.projectId, versionId) : undefined;
+        if (!version)
+            return null;
+        const parsed = parseProjectGraph(version.snapshot);
+        return parsed.ok ? parsed.graph : null;
+    }, [published, collab]);
+    const editable = !published;
+    // The active editable working page (root-bearing surface composed into its
+    // layout for preview). A published snapshot is a canonical layouts-only
+    // graph — it has no editable page, so published preview renders the bare
+    // layout chrome only (the legacy `/builder` page editor is in-memory now).
+    const activePage = builder.present.pages.find((p) => p.id === builder.pageId) ?? builder.present.pages[0];
+    const iframeRef = useRef(null);
+    const [doc, setDoc] = useState(null);
+    // Inline editing (EC-158/EC-159): the active session lives in a ref — it is
+    // imperative DOM state inside the iframe, not render state. Graph/page refs
+    // let the native dblclick handler read the *current* graph without
+    // re-subscribing listeners on every edit. The rich-text host additionally
+    // mirrors into render state so the floating mark toolbar can mount.
+    const editingRef = useRef(null);
+    const [richEditHost, setRichEditHost] = useState(null);
+    // A rich-text session mutates the rendered DOM behind React's back
+    // (contenteditable + mark commands), so finishing one must REMOUNT the
+    // node's subtree — bumping its epoch changes the decorate key, React
+    // discards the edited DOM wholesale and re-renders from the graph (the
+    // committed value, or the untouched original on cancel). Patching the old
+    // fiber tree against editor-mutated DOM would leave stale artifacts.
+    const [richEditEpochs, setRichEditEpochs] = useState({});
+    const presentRef = useRef(builder.present);
+    presentRef.current = builder.present;
+    const pageIdRef = useRef(builder.pageId);
+    pageIdRef.current = builder.pageId;
+    const selectedIdRef = useRef(builder.selectedId);
+    selectedIdRef.current = builder.selectedId;
+    // When the project was created from a starter kit, its brand token palette drives the canvas UI
+    // (EC-117) — injected after app.css so the kit's overrides win in the cascade.
+    const params = useParams({ strict: false });
+    const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined;
+    const wireUp = useCallback(() => {
+        const d = iframeRef.current?.contentDocument;
+        if (!d || !d.body)
+            return;
+        d.documentElement.classList.add('dark');
+        const appCss = getCanvasStylesheetUrl();
+        if (appCss && !d.getElementById('ec-app-css')) {
+            const link = d.createElement('link');
+            link.id = 'ec-app-css';
+            link.rel = 'stylesheet';
+            link.href = appCss;
+            d.head.appendChild(link);
+        }
+        if (!d.getElementById('ec-outline-css')) {
+            const style = d.createElement('style');
+            style.id = 'ec-outline-css';
+            style.textContent = OUTLINE_CSS;
+            d.head.appendChild(style);
+        }
+        if (kitTokensCss) {
+            const existing = d.getElementById('ec-kit-tokens');
+            if (existing)
+                existing.remove();
+            const style = d.createElement('style');
+            style.id = 'ec-kit-tokens';
+            style.textContent = kitTokensCss;
+            d.head.appendChild(style);
+        }
+        d.body.className = 'bg-background text-foreground font-sans';
+        setDoc(d);
+    }, [kitTokensCss]);
+    // Handle the already-loaded case (srcDoc may load before onLoad attaches).
+    useEffect(() => {
+        if (iframeRef.current?.contentDocument?.readyState === 'complete')
+            wireUp();
+    }, [wireUp]);
+    // Native selection/hover listeners inside the iframe document.
+    useEffect(() => {
+        if (!doc)
+            return;
+        const onClick = (e) => {
+            // Clicks inside the active inline editor are caret moves, not selection.
+            if (editingRef.current?.host.contains(e.target))
+                return;
+            const id = nodeIdAt(e.target);
+            if (id) {
+                e.preventDefault();
+                dispatch({ type: 'select', id });
+            }
+        };
+        const onOver = (e) => dispatch({ type: 'hover', id: nodeIdAt(e.target) });
+        const onLeave = () => dispatch({ type: 'hover', id: null });
+        doc.addEventListener('click', onClick, true);
+        doc.addEventListener('mouseover', onOver);
+        doc.addEventListener('mouseleave', onLeave, true);
+        return () => {
+            doc.removeEventListener('click', onClick, true);
+            doc.removeEventListener('mouseover', onOver);
+            doc.removeEventListener('mouseleave', onLeave, true);
+        };
+    }, [doc, dispatch]);
+    // Drag & drop on the canvas (EC-160). Eligibility is the pure shared rule
+    // set (`lib/dnd/drop-rules`) — the same functions the page tree consumes —
+    // evaluated live during `dragover`; the wrapper under the pointer shows the
+    // resolution (`data-ec-drop`: into/before/after, or `blocked` for a visible
+    // rejection). A completed drop dispatches exactly one builder action (move
+    // or insert) → one operations command → one undo step. Ineligible targets
+    // never `preventDefault`, so releasing over one is a native no-op.
+    useEffect(() => {
+        if (!doc || !editable)
+            return;
+        const getManifest = (id) => studio.registry.getManifest(id);
+        const currentRoot = () => presentRef.current.pages.find((p) => p.id === pageIdRef.current)?.root;
+        let dropWrapper = null;
+        let dropPlan = null;
+        const clearIndicator = () => {
+            dropWrapper?.removeAttribute('data-ec-drop');
+            dropWrapper?.removeAttribute('data-ec-drop-axis');
+            dropWrapper = null;
+            dropPlan = null;
+        };
+        const showIndicator = (wrapper, state, axis) => {
+            if (dropWrapper && dropWrapper !== wrapper) {
+                dropWrapper.removeAttribute('data-ec-drop');
+                dropWrapper.removeAttribute('data-ec-drop-axis');
+            }
+            dropWrapper = wrapper;
+            if (!wrapper)
+                return;
+            if (state) {
+                wrapper.setAttribute('data-ec-drop', state);
+                // Before/after bars render along the parent's flow axis (EC-162).
+                wrapper.setAttribute('data-ec-drop-axis', axis === 'horizontal' ? 'x' : 'y');
+            }
+            else {
+                wrapper.removeAttribute('data-ec-drop');
+                wrapper.removeAttribute('data-ec-drop-axis');
+            }
+        };
+        // Wrappers are armed draggable per-gesture on mousedown, never via render
+        // state: the active inline editor (EC-158) must keep native caret clicks
+        // and text selection, so a press inside the editing host disarms its
+        // wrapper instead of starting a node drag.
+        const onMouseDown = (e) => {
+            const wrapper = wrapperAt(e.target);
+            if (!wrapper)
+                return;
+            const root = currentRoot();
+            const nodeId = wrapper.getAttribute('data-ec-node-id');
+            const inEditor = editingRef.current?.host.contains(e.target) ?? false;
+            if (root && nodeId && nodeId !== root.id && !inEditor) {
+                wrapper.setAttribute('draggable', 'true');
+            }
+            else {
+                wrapper.removeAttribute('draggable');
+            }
+        };
+        const onDragStart = (e) => {
+            // Drags inside the live inline editor are native text drags — leave them alone.
+            if (editingRef.current?.host.contains(e.target))
+                return;
+            const wrapper = wrapperAt(e.target);
+            if (!wrapper)
+                return;
+            const root = currentRoot();
+            const nodeId = wrapper.getAttribute('data-ec-node-id');
+            const node = root ? getNode(root, nodeId) : undefined;
+            if (!root || !node || nodeId === root.id) {
+                e.preventDefault();
+                return;
+            }
+            beginDrag({ subject: { kind: 'node', nodeId, componentId: node.componentId }, source: 'canvas', label: node.componentId }, e.dataTransfer);
+        };
+        const onDragOver = (e) => {
+            const drag = activeDrag();
+            if (!drag)
+                return;
+            const root = currentRoot();
+            if (!root)
+                return;
+            const wrapper = wrapperAt(e.target);
+            // Empty space around the page subtree targets the root slot (append).
+            const refId = wrapper?.getAttribute('data-ec-node-id') ?? root.id;
+            const refWrapper = wrapper ?? doc.querySelector(`[data-ec-node-id="${root.id}"]`);
+            const refNode = getNode(root, refId);
+            if (!refNode) {
+                clearIndicator();
+                return;
+            }
+            let position = 'into';
+            let flow = 'vertical';
+            if (wrapper && refId !== root.id) {
+                const rect = wrapper.getBoundingClientRect();
+                // Hit-bands follow the parent's flow axis (EC-162); the cross-axis
+                // side bands of vertically flowing targets are the wrap gesture.
+                flow = containerFlowAxis(getParentInfo(root, refId)?.parent);
+                position = dropPositionForPoint({
+                    x: rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5,
+                    y: rect.height > 0 ? (e.clientY - rect.top) / rect.height : 0.5,
+                    flow,
+                    nestable: canNestInto(getManifest, refNode.componentId),
+                    edges: true,
+                    wrappable: true,
+                });
+            }
+            const resolution = resolveDrop({
+                root,
+                getManifest,
+                subject: drag.subject,
+                location: { nodeId: refId, position },
+            });
+            showIndicator(refWrapper, dropIndicatorFor(resolution, position), flow);
+            if (resolution.eligible) {
+                dropPlan = resolution;
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = drag.subject.kind === 'node' ? 'move' : 'copy';
+                }
+            }
+            else {
+                dropPlan = null;
+            }
+        };
+        const onDrop = (e) => {
+            const drag = activeDrag();
+            if (!drag)
+                return;
+            const plan = dropPlan;
+            clearIndicator();
+            if (!plan)
+                return;
+            e.preventDefault();
+            // Exactly one dispatch per completed drop (one undo step, one command).
+            if (plan.kind === 'move') {
+                dispatch({ type: 'move', id: plan.nodeId, target: plan.target });
+            }
+            else if (plan.kind === 'wrap') {
+                // EC-162 gesture: reference + subject become a two-column Grid.
+                const subject = plan.nodeId !== undefined
+                    ? { kind: 'node', nodeId: plan.nodeId }
+                    : drag.buildNode
+                        ? { kind: 'component', node: drag.buildNode() }
+                        : null;
+                if (!subject) {
+                    endDrag('cancelled');
+                    return;
+                }
+                dispatch({ type: 'wrap', referenceId: plan.referenceId, side: plan.side, subject });
+            }
+            else if (drag.buildNode) {
+                dispatch({ type: 'insert', target: plan.target, node: drag.buildNode() });
+            }
+            else {
+                endDrag('cancelled');
+                return;
+            }
+            endDrag('dropped');
+        };
+        const onDragEnd = () => {
+            clearIndicator();
+            endDrag('cancelled');
+        };
+        const onDragLeave = (e) => {
+            // Leaving the iframe document entirely (relatedTarget is null).
+            if (!e.relatedTarget)
+                clearIndicator();
+        };
+        // Cleanup when the drag ends anywhere (e.g. dropped on the page tree).
+        const unsubscribe = onDragSessionEnd(() => clearIndicator());
+        doc.addEventListener('mousedown', onMouseDown, true);
+        doc.addEventListener('dragstart', onDragStart);
+        doc.addEventListener('dragover', onDragOver);
+        doc.addEventListener('drop', onDrop);
+        doc.addEventListener('dragend', onDragEnd);
+        doc.addEventListener('dragleave', onDragLeave);
+        return () => {
+            unsubscribe();
+            clearIndicator();
+            doc.removeEventListener('mousedown', onMouseDown, true);
+            doc.removeEventListener('dragstart', onDragStart);
+            doc.removeEventListener('dragover', onDragOver);
+            doc.removeEventListener('drop', onDrop);
+            doc.removeEventListener('dragend', onDragEnd);
+            doc.removeEventListener('dragleave', onDragLeave);
+        };
+    }, [doc, editable, dispatch, studio]);
+    // Inline editing (EC-158 plain text, EC-159 rich text): double-click on a
+    // node whose manifest flags an inline-editable prop turns the *rendered
+    // element itself* contenteditable — no overlay, no input swap, so typography
+    // and layout are identical in edit and render states. A session finishes
+    // exactly once, and a commit dispatches exactly one `setProp` action — one
+    // undo step, mirrored as one `graph.setNodeProp` operations command by the
+    // builder-store persister. The graph stays the single source of truth.
+    //
+    // Commit/cancel gestures: plain text commits on Enter or blur; rich text is
+    // multiline, so plain Enter inserts a paragraph and the commit gesture is
+    // Cmd/Ctrl+Enter or blur (Enter-to-commit would make multi-paragraph content
+    // unauthorable in place). Esc always cancels, dispatching nothing.
+    useEffect(() => {
+        if (!doc || !editable)
+            return;
+        // ---- plain text (EC-158) ------------------------------------------------
+        const beginText = (wrapper, host, session) => {
+            let done = false;
+            const finish = (mode) => {
+                if (done)
+                    return;
+                done = true;
+                editingRef.current = null;
+                const text = host.textContent ?? '';
+                host.removeEventListener('keydown', onKeyDown);
+                host.removeEventListener('blur', onBlur);
+                host.removeAttribute('contenteditable');
+                host.removeAttribute('data-ec-edit');
+                wrapper.removeAttribute('data-ec-editing');
+                if (mode === 'commit') {
+                    const outcome = session.commit(text);
+                    if (outcome) {
+                        dispatch({
+                            type: 'setProp',
+                            id: outcome.nodeId,
+                            name: outcome.propName,
+                            value: staticProp(outcome.value),
+                        });
+                    }
+                }
+                else {
+                    const outcome = session.cancel();
+                    if (outcome)
+                        host.textContent = outcome.value;
+                }
+                doc.getSelection()?.removeAllRanges();
+            };
+            const onKeyDown = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    finish('commit');
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    finish('cancel');
+                }
+            };
+            const onBlur = () => finish('commit');
+            // `plaintext-only` keeps paste/typing plain; fall back where unsupported.
+            host.setAttribute('contenteditable', 'plaintext-only');
+            if (!host.isContentEditable)
+                host.setAttribute('contenteditable', 'true');
+            host.setAttribute('data-ec-edit', 'text');
+            wrapper.setAttribute('data-ec-editing', '');
+            host.addEventListener('keydown', onKeyDown);
+            host.addEventListener('blur', onBlur);
+            editingRef.current = { nodeId: session.nodeId, host, finish };
+            host.focus({ preventScroll: true });
+            // Keep the gesture's native caret/word selection when it landed inside
+            // the host; otherwise select the whole value.
+            const sel = doc.getSelection();
+            if (!sel || sel.rangeCount === 0 || !host.contains(sel.anchorNode)) {
+                const range = doc.createRange();
+                range.selectNodeContents(host);
+                sel?.removeAllRanges();
+                sel?.addRange(range);
+            }
+        };
+        // ---- rich text (EC-159) -------------------------------------------------
+        const beginRichText = (wrapper, nodeId, target) => {
+            const host = findRichTextHost(wrapper);
+            if (!host)
+                return;
+            // Pair the storage tree against the rendered DOM and stamp every
+            // non-invertible node (custom blocks, unknown nodes, images, embeds)
+            // with its exact JSON: they stay rendered *inside* the live editor as
+            // non-editable atoms and survive the session byte-exact. A pairing
+            // mismatch means the DOM diverged from the deterministic render —
+            // refuse to start rather than risk lossy parsing ("polished or absent").
+            const pairs = collectPreservedPairs(target.value.doc, host);
+            if (!pairs)
+                return;
+            const session = createInlineRichTextSession({
+                nodeId,
+                propName: target.propName,
+                original: target.value,
+            });
+            for (const pair of pairs) {
+                const el = pair.element;
+                el.setAttribute(PRESERVE_NODE_ATTR, JSON.stringify(pair.node));
+                el.setAttribute('contenteditable', 'false');
+            }
+            let done = false;
+            const finish = (mode) => {
+                if (done)
+                    return;
+                done = true;
+                editingRef.current = null;
+                setRichEditHost(null);
+                // Parse the edited DOM, detach the session, then bump the node's
+                // remount epoch: React discards the editor-mutated DOM and renders
+                // fresh from the graph — committed content or, on cancel, the
+                // untouched original. Never patch a fiber tree against DOM the
+                // editing commands rewrote.
+                const parsed = mode === 'commit' ? richTextDocFromDom(host) : null;
+                host.removeEventListener('keydown', onKeyDown);
+                host.removeEventListener('blur', onBlur);
+                host.removeAttribute('contenteditable');
+                host.removeAttribute('data-ec-edit');
+                wrapper.removeAttribute('data-ec-editing');
+                setRichEditEpochs((prev) => ({ ...prev, [nodeId]: (prev[nodeId] ?? 0) + 1 }));
+                if (parsed) {
+                    // An unchanged document commits nothing: the stored value is never
+                    // rewritten, so untouched content round-trips byte-identical.
+                    const outcome = session.commit(parsed.doc);
+                    if (outcome) {
+                        dispatch({
+                            type: 'setProp',
+                            id: outcome.nodeId,
+                            name: outcome.propName,
+                            value: staticProp(outcome.value),
+                        });
+                    }
+                }
+                else {
+                    session.cancel();
+                }
+                doc.getSelection()?.removeAllRanges();
+            };
+            const onKeyDown = (e) => {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    finish('cancel');
+                }
+                else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    finish('commit');
+                }
+                // Plain Enter falls through: native paragraph insertion (multiline).
+            };
+            const onBlur = (e) => {
+                // Interacting with the floating toolbar is part of the session.
+                const next = e.relatedTarget;
+                if (next?.closest?.('[data-ec-rt-toolbar]'))
+                    return;
+                finish('commit');
+            };
+            host.setAttribute('contenteditable', 'true');
+            host.setAttribute('data-ec-edit', 'rich');
+            wrapper.setAttribute('data-ec-editing', '');
+            host.addEventListener('keydown', onKeyDown);
+            host.addEventListener('blur', onBlur);
+            editingRef.current = { nodeId, host, finish };
+            setRichEditHost(host);
+            host.focus({ preventScroll: true });
+        };
+        const onDblClick = (e) => {
+            const wrapper = wrapperAt(e.target);
+            if (!wrapper)
+                return;
+            const nodeId = wrapper.getAttribute('data-ec-node-id');
+            if (editingRef.current) {
+                // Double-click inside the live editor is native word selection.
+                if (editingRef.current.nodeId === nodeId)
+                    return;
+                editingRef.current.finish('commit');
+            }
+            const page = presentRef.current.pages.find((p) => p.id === pageIdRef.current);
+            const node = page ? getNode(page.root, nodeId) : undefined;
+            if (!node)
+                return;
+            const manifest = studio.registry.getManifest(node.componentId);
+            const target = resolveInlineEditableProp(manifest, node);
+            if (target) {
+                const host = findInlineTextHost(wrapper, target.value);
+                if (!host || typeof host.focus !== 'function')
+                    return;
+                dispatch({ type: 'select', id: nodeId });
+                beginText(wrapper, host, createInlineEditSession({ nodeId, propName: target.propName, original: target.value }));
+                return;
+            }
+            const richTarget = resolveInlineRichTextProp(manifest, node);
+            if (!richTarget)
+                return;
+            dispatch({ type: 'select', id: nodeId });
+            beginRichText(wrapper, nodeId, richTarget);
+        };
+        doc.addEventListener('dblclick', onDblClick, true);
+        return () => {
+            doc.removeEventListener('dblclick', onDblClick, true);
+            // Teardown mid-session (doc swap/unmount): cancel — never dispatch from cleanup.
+            editingRef.current?.finish('cancel');
+        };
+    }, [doc, editable, dispatch, studio]);
+    // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page
+    // tree and blocks panel use, wired to the *iframe* document (events never
+    // cross frames). Shortcuts stay inert while an inline editor is live and in
+    // form fields; the iframe's own navigator.clipboard does the async I/O
+    // (Chromium scopes clipboard access to the focused document).
+    const clipboard = useStudioClipboard();
+    useEffect(() => {
+        if (!doc || !editable)
+            return;
+        return attachClipboardListeners(doc, {
+            clipboard,
+            getSelectedId: () => selectedIdRef.current,
+            isBlocked: () => editingRef.current !== null,
+            asyncClipboard: doc.defaultView?.navigator.clipboard,
+            getSelection: () => doc.getSelection(),
+        });
+    }, [doc, editable, clipboard]);
+    // Only page nodes are editable; layout chrome (rendered around the page) is
+    // read-only context and must not be selectable (it isn't in the page tree).
+    const pageNodeIds = useMemo(() => {
+        const page = builder.present.pages.find((p) => p.id === builder.pageId);
+        return page ? collectIds(page.root) : new Set();
+    }, [builder.present, builder.pageId]);
+    // 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-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), [activeLocale]);
+    // 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), [activeLocale]);
+    const localeFallbackOf = useCallback((node) => {
+        for (const value of Object.values(node.props ?? {})) {
+            if (value.kind !== 'binding')
+                continue;
+            const fallback = cmsBindingFallback(value.binding, data.getSource(value.binding.sourceId), activeLocale);
+            if (fallback)
+                return fallback.sourceLocale;
+        }
+        return undefined;
+    }, [data, activeLocale]);
+    const ctx = useMemo(() => ({
+        registry: studio.registry,
+        implementations: studio.implementations,
+        resolveBinding,
+        resolveAsset,
+        resolveRelation,
+        resolveListing,
+        decorateNode: (node, rendered) => editable && pageNodeIds.has(node.id) ? (_jsx("div", { "data-ec-node-id": node.id, className: "ec-editable", "data-selected": node.id === builder.selectedId || undefined, "data-hovered": node.id === builder.hoveredId || undefined, "data-ec-locale-fallback": localeFallbackOf(node), children: rendered }, `${node.id}#${richEditEpochs[node.id] ?? 0}`)) : (rendered),
+    }), [studio, resolveBinding, resolveAsset, resolveRelation, resolveListing, pageNodeIds, builder.selectedId, builder.hoveredId, editable, localeFallbackOf, richEditEpochs]);
+    // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children
+    // gets draggable gap handles between them, portaled into the iframe.
+    const spacingTarget = editable && doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)
+        ? builder.selectedNode
+        : null;
+    return (_jsxs("div", { className: "canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6", children: [editable ? _jsx(ClipboardNoticeOverlay, {}) : null, published ? (_jsx("div", { className: "pointer-events-none absolute left-1/2 top-3 z-10 -translate-x-1/2", children: _jsx("span", { className: "rounded-full border border-info/30 bg-info/10 px-2.5 py-0.5 text-xs font-medium text-info", children: publishedGraph ? 'Published preview' : 'Nothing published' }) })) : null, _jsxs("div", { style: { width: VIEWPORT_WIDTH[builder.viewport], maxWidth: '100%' }, className: "flex", children: [_jsx("iframe", { ref: iframeRef, onLoad: wireUp, title: "Page preview", className: "min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md", srcDoc: "<!doctype html><html><head></head><body></body></html>" }), doc
+                        ? createPortal(published
+                            ? // Published preview: a layouts-only snapshot has no editable
+                                // page, so render the bare published layout chrome (empty
+                                // composition into the first layout), or nothing when absent.
+                                publishedGraph
+                                    ? renderCompositionInLayout(publishedGraph, publishedGraph.layouts[0]?.id, [], ctx)
+                                    : null
+                            : // Editable: compose the active working page's root into its
+                                // layout (or bare when it has no layout).
+                                activePage
+                                    ? renderCompositionInLayout(toProjectGraph(builder.present), activePage.layoutId, activePage.root, ctx)
+                                    : null, doc.body)
+                        : null, spacingTarget && doc ? (_jsx(SpacingHandles, { doc: doc, node: spacingTarget }, spacingTarget.id)) : null, richEditHost && doc ? _jsx(RichTextToolbar, { doc: doc, host: richEditHost }) : null] })] }));
+}
+//# sourceMappingURL=canvas.js.map