@elytracms/studio 0.0.64 → 0.0.65

package/dist/components/builder/canvas-rect-tracking.d.ts

@@ -0,0 +1,124 @@
+/**
+ * The canvas overlay's rect-tracking core (EC-404) — the PURE, reusable half of
+ * the selection/hover overlay, kept free of React and of the DOM so the
+ * subscription + coalescing + change-detection bookkeeping is unit-testable with
+ * injected fakes (the `canvas-dnd`/`canvas-inline-editing` house pattern).
+ *
+ * The overlay draws its frames from measured node rects and must keep them glued
+ * to the page as async layout settles (images decode, fonts load, data resolves,
+ * the viewport resizes, the user scrolls). This module separates the two
+ * concerns EC-405 (insertion affordances) and EC-406 (spacing handles) will
+ * reuse:
+ *
+ *   - {@link createRectTracker} — generic bookkeeping: subscribe once, coalesce
+ *     invalidations into a single scheduled flush, re-measure, and emit ONLY when
+ *     the measured value actually changed (an injected `equals`). Pure over its
+ *     injected environment; no DOM, no React.
+ *   - {@link subscribeCanvasLayout} / {@link measureElementRect} — the thin DOM
+ *     glue that wires the real invalidation sources (scroll/resize/observers/
+ *     fonts) and reads a document-coordinate rect. Exercised live, not in jsdom.
+ */
+/** A document-coordinate rectangle (viewport rect + scroll offset). */
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/** Structural exact-equality of two rects (null-aware). */
+export declare function rectsEqual(a: Rect | null, b: Rect | null): boolean;
+/**
+ * The generic tracker: emits the CURRENT measured value on creation, then a new
+ * value whenever an invalidation resolves to a changed measurement. Coalescing
+ * is the injected `schedule`, which returns its OWN canceller (a compound
+ * rAF+timeout scheduler in production — see {@link scheduleFrame}); repeated
+ * invalidations before a flush collapse to one measure. `dispose` is idempotent
+ * and stops all further work.
+ */
+export interface RectTracker {
+    /** Request a coalesced re-measure (safe to call at any rate). */
+    invalidate(): void;
+    /** Unsubscribe + drop any pending flush; idempotent. */
+    dispose(): void;
+}
+export interface RectTrackerConfig<T> {
+    /** Read the current value (a rect, a geometry bundle, a set of slots …). */
+    measure(): T;
+    /** True when two measurements are equivalent — suppresses redundant emits. */
+    equals(a: T, b: T): boolean;
+    /** Receives the initial value and every subsequent CHANGED value. */
+    onChange(value: T): void;
+    /** Schedule a coalesced flush; return a canceller that unschedules it. */
+    schedule(flush: () => void): () => void;
+    /**
+     * Wire every invalidation source once, calling `invalidate` on each; return a
+     * teardown. Called exactly once during creation.
+     */
+    subscribe(invalidate: () => void): () => void;
+}
+export declare function createRectTracker<T>(config: RectTrackerConfig<T>): RectTracker;
+/** The window surface {@link scheduleFrame} needs (a real `Window` satisfies it). */
+export interface FrameScheduler {
+    requestAnimationFrame(cb: FrameRequestCallback): number;
+    cancelAnimationFrame(handle: number): void;
+    setTimeout(cb: () => void, ms: number): number;
+    clearTimeout(handle: number): void;
+}
+/**
+ * Schedule a coalesced flush on the next animation frame WITH a timeout
+ * backstop: rAF keeps the overlay paint-aligned while the canvas is on screen,
+ * and the timer guarantees the flush still runs when rAF is paused (a
+ * backgrounded/offscreen preview, or a non-painting automation environment) —
+ * otherwise a stranded rAF would freeze the tracker at its `cancelPending` gate.
+ * Whichever fires first cancels the other and runs the flush once. Returns a
+ * canceller that unschedules both.
+ */
+export declare function scheduleFrame(host: FrameScheduler, flush: () => void): () => void;
+/** The window surface the DOM glue reads (a real `Window` satisfies it). */
+interface LayoutWindow {
+    scrollX: number;
+    scrollY: number;
+    requestAnimationFrame(cb: FrameRequestCallback): number;
+    cancelAnimationFrame(handle: number): void;
+    addEventListener(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: () => void, options?: boolean | EventListenerOptions): void;
+    ResizeObserver?: typeof ResizeObserver;
+    MutationObserver?: typeof MutationObserver;
+}
+/**
+ * Measure an element's document-coordinate rect: viewport rect + scroll offset,
+ * so an absolutely-positioned overlay child in the iframe `body` stays glued to
+ * the element through scroll WITHOUT re-measuring (only layout changes move it in
+ * document space). Mirrors `SpacingHandles`' measurement convention exactly.
+ */
+export declare function measureElementRect(el: Element, win: Pick<LayoutWindow, 'scrollX' | 'scrollY'>): Rect;
+/** Locate a rendered node's editable wrapper and measure its document rect. */
+export declare function measureNodeRect(doc: Document, nodeId: string | null): Rect | null;
+/**
+ * Measure the `[data-ec-prop]` marker element for `propName` that belongs to
+ * node `nodeId` (EC-408 reverse highlight): the first matching marker inside the
+ * node's wrapper whose NEAREST node wrapper is that node — so a nested child
+ * node's same-named marker is never mistaken for the parent's. `null` when the
+ * node isn't rendered or carries no such marker (→ no highlight, silently).
+ */
+export declare function measurePropRect(doc: Document, nodeId: string | null, propName: string | null): Rect | null;
+/**
+ * Wire every invalidation source the canvas overlay needs and return a teardown:
+ *
+ *   - `scroll` (capture — inner scroll containers bubble nothing) + `resize` on
+ *     the iframe window;
+ *   - a `ResizeObserver` on the tracked target elements AND the body (a sibling
+ *     node growing pushes the target in document space — an image decoding, a
+ *     data list filling in);
+ *   - a `MutationObserver` on the body subtree (`childList` — nodes inserted or
+ *     removed by editing or async data), deliberately NOT observing attributes
+ *     so the overlay's own inline-style writes can't feed back a measure storm;
+ *   - `document.fonts.ready` — a one-shot re-measure once web fonts settle
+ *     (their metrics reflow text after first paint).
+ *
+ * Every source funnels through `invalidate`, which the tracker coalesces to one
+ * measure per frame. `targets` is read lazily so the caller can re-point the
+ * ResizeObserver on selection/hover changes by rebuilding the subscription.
+ */
+export declare function subscribeCanvasLayout(doc: Document, targets: () => Element[], invalidate: () => void): () => void;
+export {};

package/dist/components/builder/canvas-rect-tracking.js

@@ -0,0 +1,198 @@
+/**
+ * The canvas overlay's rect-tracking core (EC-404) — the PURE, reusable half of
+ * the selection/hover overlay, kept free of React and of the DOM so the
+ * subscription + coalescing + change-detection bookkeeping is unit-testable with
+ * injected fakes (the `canvas-dnd`/`canvas-inline-editing` house pattern).
+ *
+ * The overlay draws its frames from measured node rects and must keep them glued
+ * to the page as async layout settles (images decode, fonts load, data resolves,
+ * the viewport resizes, the user scrolls). This module separates the two
+ * concerns EC-405 (insertion affordances) and EC-406 (spacing handles) will
+ * reuse:
+ *
+ *   - {@link createRectTracker} — generic bookkeeping: subscribe once, coalesce
+ *     invalidations into a single scheduled flush, re-measure, and emit ONLY when
+ *     the measured value actually changed (an injected `equals`). Pure over its
+ *     injected environment; no DOM, no React.
+ *   - {@link subscribeCanvasLayout} / {@link measureElementRect} — the thin DOM
+ *     glue that wires the real invalidation sources (scroll/resize/observers/
+ *     fonts) and reads a document-coordinate rect. Exercised live, not in jsdom.
+ */
+/** Structural exact-equality of two rects (null-aware). */
+export function rectsEqual(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
+}
+export function createRectTracker(config) {
+    let last = config.measure();
+    let cancelPending = null;
+    let disposed = false;
+    const flush = () => {
+        cancelPending = null;
+        if (disposed)
+            return;
+        const next = config.measure();
+        if (!config.equals(last, next)) {
+            last = next;
+            config.onChange(next);
+        }
+    };
+    const invalidate = () => {
+        if (disposed || cancelPending !== null)
+            return;
+        cancelPending = config.schedule(flush);
+    };
+    // Emit the initial measurement, then subscribe. (Emitting first means a
+    // synchronous subscription that invalidates immediately still coalesces
+    // against a stable baseline.)
+    config.onChange(last);
+    const unsubscribe = config.subscribe(invalidate);
+    return {
+        invalidate,
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            if (cancelPending !== null) {
+                cancelPending();
+                cancelPending = null;
+            }
+            unsubscribe();
+        },
+    };
+}
+/**
+ * Schedule a coalesced flush on the next animation frame WITH a timeout
+ * backstop: rAF keeps the overlay paint-aligned while the canvas is on screen,
+ * and the timer guarantees the flush still runs when rAF is paused (a
+ * backgrounded/offscreen preview, or a non-painting automation environment) —
+ * otherwise a stranded rAF would freeze the tracker at its `cancelPending` gate.
+ * Whichever fires first cancels the other and runs the flush once. Returns a
+ * canceller that unschedules both.
+ */
+export function scheduleFrame(host, flush) {
+    let raf = 0;
+    let timer = 0;
+    let done = false;
+    const fire = () => {
+        if (done)
+            return;
+        done = true;
+        host.cancelAnimationFrame(raf);
+        host.clearTimeout(timer);
+        flush();
+    };
+    raf = host.requestAnimationFrame(fire);
+    timer = host.setTimeout(fire, 100);
+    return () => {
+        if (done)
+            return;
+        done = true;
+        host.cancelAnimationFrame(raf);
+        host.clearTimeout(timer);
+    };
+}
+/**
+ * Measure an element's document-coordinate rect: viewport rect + scroll offset,
+ * so an absolutely-positioned overlay child in the iframe `body` stays glued to
+ * the element through scroll WITHOUT re-measuring (only layout changes move it in
+ * document space). Mirrors `SpacingHandles`' measurement convention exactly.
+ */
+export function measureElementRect(el, win) {
+    const r = el.getBoundingClientRect();
+    return { left: r.left + win.scrollX, top: r.top + win.scrollY, width: r.width, height: r.height };
+}
+/** Locate a rendered node's editable wrapper and measure its document rect. */
+export function measureNodeRect(doc, nodeId) {
+    if (!nodeId)
+        return null;
+    const win = doc.defaultView;
+    if (!win)
+        return null;
+    const el = doc.querySelector(`[data-ec-node-id="${nodeId}"]`);
+    return el ? measureElementRect(el, win) : null;
+}
+/**
+ * Measure the `[data-ec-prop]` marker element for `propName` that belongs to
+ * node `nodeId` (EC-408 reverse highlight): the first matching marker inside the
+ * node's wrapper whose NEAREST node wrapper is that node — so a nested child
+ * node's same-named marker is never mistaken for the parent's. `null` when the
+ * node isn't rendered or carries no such marker (→ no highlight, silently).
+ */
+export function measurePropRect(doc, nodeId, propName) {
+    if (!nodeId || !propName)
+        return null;
+    const win = doc.defaultView;
+    if (!win)
+        return null;
+    const wrapper = doc.querySelector(`[data-ec-node-id="${nodeId}"]`);
+    if (!wrapper)
+        return null;
+    // Prop names are plain manifest keys; escape defensively where CSS.escape exists.
+    const escaped = win.CSS?.escape?.(propName) ?? propName;
+    const markers = wrapper.querySelectorAll(`[data-ec-prop="${escaped}"]`);
+    for (const marker of markers) {
+        if (marker.closest('[data-ec-node-id]') === wrapper)
+            return measureElementRect(marker, win);
+    }
+    return null;
+}
+/**
+ * Wire every invalidation source the canvas overlay needs and return a teardown:
+ *
+ *   - `scroll` (capture — inner scroll containers bubble nothing) + `resize` on
+ *     the iframe window;
+ *   - a `ResizeObserver` on the tracked target elements AND the body (a sibling
+ *     node growing pushes the target in document space — an image decoding, a
+ *     data list filling in);
+ *   - a `MutationObserver` on the body subtree (`childList` — nodes inserted or
+ *     removed by editing or async data), deliberately NOT observing attributes
+ *     so the overlay's own inline-style writes can't feed back a measure storm;
+ *   - `document.fonts.ready` — a one-shot re-measure once web fonts settle
+ *     (their metrics reflow text after first paint).
+ *
+ * Every source funnels through `invalidate`, which the tracker coalesces to one
+ * measure per frame. `targets` is read lazily so the caller can re-point the
+ * ResizeObserver on selection/hover changes by rebuilding the subscription.
+ */
+export function subscribeCanvasLayout(doc, targets, invalidate) {
+    const win = doc.defaultView;
+    if (!win)
+        return () => { };
+    const teardowns = [];
+    win.addEventListener('scroll', invalidate, true);
+    win.addEventListener('resize', invalidate);
+    teardowns.push(() => {
+        win.removeEventListener('scroll', invalidate, true);
+        win.removeEventListener('resize', invalidate);
+    });
+    const RO = win.ResizeObserver;
+    if (RO) {
+        const ro = new RO(() => invalidate());
+        for (const el of targets())
+            ro.observe(el);
+        if (doc.body)
+            ro.observe(doc.body);
+        teardowns.push(() => ro.disconnect());
+    }
+    const MO = win.MutationObserver;
+    if (MO && doc.body) {
+        const mo = new MO(() => invalidate());
+        mo.observe(doc.body, { childList: true, subtree: true });
+        teardowns.push(() => mo.disconnect());
+    }
+    const fonts = doc.fonts;
+    if (fonts?.ready) {
+        let cancelled = false;
+        fonts.ready.then(() => !cancelled && invalidate()).catch(() => { });
+        teardowns.push(() => {
+            cancelled = true;
+        });
+    }
+    return () => {
+        for (const t of teardowns)
+            t();
+    };
+}
+//# sourceMappingURL=canvas-rect-tracking.js.map

package/dist/components/builder/canvas-rect-tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-rect-tracking.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-rect-tracking.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The canvas overlay's rect-tracking core (EC-404) — the PURE, reusable half of\n * the selection/hover overlay, kept free of React and of the DOM so the\n * subscription + coalescing + change-detection bookkeeping is unit-testable with\n * injected fakes (the `canvas-dnd`/`canvas-inline-editing` house pattern).\n *\n * The overlay draws its frames from measured node rects and must keep them glued\n * to the page as async layout settles (images decode, fonts load, data resolves,\n * the viewport resizes, the user scrolls). This module separates the two\n * concerns EC-405 (insertion affordances) and EC-406 (spacing handles) will\n * reuse:\n *\n *   - {@link createRectTracker} — generic bookkeeping: subscribe once, coalesce\n *     invalidations into a single scheduled flush, re-measure, and emit ONLY when\n *     the measured value actually changed (an injected `equals`). Pure over its\n *     injected environment; no DOM, no React.\n *   - {@link subscribeCanvasLayout} / {@link measureElementRect} — the thin DOM\n *     glue that wires the real invalidation sources (scroll/resize/observers/\n *     fonts) and reads a document-coordinate rect. Exercised live, not in jsdom.\n */\n\n/** A document-coordinate rectangle (viewport rect + scroll offset). */\nexport interface Rect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/** Structural exact-equality of two rects (null-aware). */\nexport function rectsEqual(a: Rect | null, b: Rect | null): boolean {\n  if (a === null || b === null) return a === b\n  return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height\n}\n\n/**\n * The generic tracker: emits the CURRENT measured value on creation, then a new\n * value whenever an invalidation resolves to a changed measurement. Coalescing\n * is the injected `schedule`, which returns its OWN canceller (a compound\n * rAF+timeout scheduler in production — see {@link scheduleFrame}); repeated\n * invalidations before a flush collapse to one measure. `dispose` is idempotent\n * and stops all further work.\n */\nexport interface RectTracker {\n  /** Request a coalesced re-measure (safe to call at any rate). */\n  invalidate(): void\n  /** Unsubscribe + drop any pending flush; idempotent. */\n  dispose(): void\n}\n\nexport interface RectTrackerConfig<T> {\n  /** Read the current value (a rect, a geometry bundle, a set of slots …). */\n  measure(): T\n  /** True when two measurements are equivalent — suppresses redundant emits. */\n  equals(a: T, b: T): boolean\n  /** Receives the initial value and every subsequent CHANGED value. */\n  onChange(value: T): void\n  /** Schedule a coalesced flush; return a canceller that unschedules it. */\n  schedule(flush: () => void): () => void\n  /**\n   * Wire every invalidation source once, calling `invalidate` on each; return a\n   * teardown. Called exactly once during creation.\n   */\n  subscribe(invalidate: () => void): () => void\n}\n\nexport function createRectTracker<T>(config: RectTrackerConfig<T>): RectTracker {\n  let last = config.measure()\n  let cancelPending: (() => void) | null = null\n  let disposed = false\n\n  const flush = (): void => {\n    cancelPending = null\n    if (disposed) return\n    const next = config.measure()\n    if (!config.equals(last, next)) {\n      last = next\n      config.onChange(next)\n    }\n  }\n\n  const invalidate = (): void => {\n    if (disposed || cancelPending !== null) return\n    cancelPending = config.schedule(flush)\n  }\n\n  // Emit the initial measurement, then subscribe. (Emitting first means a\n  // synchronous subscription that invalidates immediately still coalesces\n  // against a stable baseline.)\n  config.onChange(last)\n  const unsubscribe = config.subscribe(invalidate)\n\n  return {\n    invalidate,\n    dispose(): void {\n      if (disposed) return\n      disposed = true\n      if (cancelPending !== null) {\n        cancelPending()\n        cancelPending = null\n      }\n      unsubscribe()\n    },\n  }\n}\n\n/** The window surface {@link scheduleFrame} needs (a real `Window` satisfies it). */\nexport interface FrameScheduler {\n  requestAnimationFrame(cb: FrameRequestCallback): number\n  cancelAnimationFrame(handle: number): void\n  // Browser `Window.setTimeout` returns a number (not the Node `Timeout` handle).\n  setTimeout(cb: () => void, ms: number): number\n  clearTimeout(handle: number): void\n}\n\n/**\n * Schedule a coalesced flush on the next animation frame WITH a timeout\n * backstop: rAF keeps the overlay paint-aligned while the canvas is on screen,\n * and the timer guarantees the flush still runs when rAF is paused (a\n * backgrounded/offscreen preview, or a non-painting automation environment) —\n * otherwise a stranded rAF would freeze the tracker at its `cancelPending` gate.\n * Whichever fires first cancels the other and runs the flush once. Returns a\n * canceller that unschedules both.\n */\nexport function scheduleFrame(host: FrameScheduler, flush: () => void): () => void {\n  let raf = 0\n  let timer = 0\n  let done = false\n  const fire = (): void => {\n    if (done) return\n    done = true\n    host.cancelAnimationFrame(raf)\n    host.clearTimeout(timer)\n    flush()\n  }\n  raf = host.requestAnimationFrame(fire)\n  timer = host.setTimeout(fire, 100)\n  return () => {\n    if (done) return\n    done = true\n    host.cancelAnimationFrame(raf)\n    host.clearTimeout(timer)\n  }\n}\n\n/** The window surface the DOM glue reads (a real `Window` satisfies it). */\ninterface LayoutWindow {\n  scrollX: number\n  scrollY: number\n  requestAnimationFrame(cb: FrameRequestCallback): number\n  cancelAnimationFrame(handle: number): void\n  addEventListener(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): void\n  removeEventListener(type: string, listener: () => void, options?: boolean | EventListenerOptions): void\n  ResizeObserver?: typeof ResizeObserver\n  MutationObserver?: typeof MutationObserver\n}\n\n/**\n * Measure an element's document-coordinate rect: viewport rect + scroll offset,\n * so an absolutely-positioned overlay child in the iframe `body` stays glued to\n * the element through scroll WITHOUT re-measuring (only layout changes move it in\n * document space). Mirrors `SpacingHandles`' measurement convention exactly.\n */\nexport function measureElementRect(el: Element, win: Pick<LayoutWindow, 'scrollX' | 'scrollY'>): Rect {\n  const r = el.getBoundingClientRect()\n  return { left: r.left + win.scrollX, top: r.top + win.scrollY, width: r.width, height: r.height }\n}\n\n/** Locate a rendered node's editable wrapper and measure its document rect. */\nexport function measureNodeRect(doc: Document, nodeId: string | null): Rect | null {\n  if (!nodeId) return null\n  const win = doc.defaultView\n  if (!win) return null\n  const el = doc.querySelector(`[data-ec-node-id=\"${nodeId}\"]`)\n  return el ? measureElementRect(el, win) : null\n}\n\n/**\n * Measure the `[data-ec-prop]` marker element for `propName` that belongs to\n * node `nodeId` (EC-408 reverse highlight): the first matching marker inside the\n * node's wrapper whose NEAREST node wrapper is that node — so a nested child\n * node's same-named marker is never mistaken for the parent's. `null` when the\n * node isn't rendered or carries no such marker (→ no highlight, silently).\n */\nexport function measurePropRect(\n  doc: Document,\n  nodeId: string | null,\n  propName: string | null,\n): Rect | null {\n  if (!nodeId || !propName) return null\n  const win = doc.defaultView\n  if (!win) return null\n  const wrapper = doc.querySelector(`[data-ec-node-id=\"${nodeId}\"]`)\n  if (!wrapper) return null\n  // Prop names are plain manifest keys; escape defensively where CSS.escape exists.\n  const escaped = (win as Window & typeof globalThis).CSS?.escape?.(propName) ?? propName\n  const markers = wrapper.querySelectorAll(`[data-ec-prop=\"${escaped}\"]`)\n  for (const marker of markers) {\n    if (marker.closest('[data-ec-node-id]') === wrapper) return measureElementRect(marker, win)\n  }\n  return null\n}\n\n/**\n * Wire every invalidation source the canvas overlay needs and return a teardown:\n *\n *   - `scroll` (capture — inner scroll containers bubble nothing) + `resize` on\n *     the iframe window;\n *   - a `ResizeObserver` on the tracked target elements AND the body (a sibling\n *     node growing pushes the target in document space — an image decoding, a\n *     data list filling in);\n *   - a `MutationObserver` on the body subtree (`childList` — nodes inserted or\n *     removed by editing or async data), deliberately NOT observing attributes\n *     so the overlay's own inline-style writes can't feed back a measure storm;\n *   - `document.fonts.ready` — a one-shot re-measure once web fonts settle\n *     (their metrics reflow text after first paint).\n *\n * Every source funnels through `invalidate`, which the tracker coalesces to one\n * measure per frame. `targets` is read lazily so the caller can re-point the\n * ResizeObserver on selection/hover changes by rebuilding the subscription.\n */\nexport function subscribeCanvasLayout(\n  doc: Document,\n  targets: () => Element[],\n  invalidate: () => void,\n): () => void {\n  const win = doc.defaultView as LayoutWindow | null\n  if (!win) return () => {}\n  const teardowns: Array<() => void> = []\n\n  win.addEventListener('scroll', invalidate, true)\n  win.addEventListener('resize', invalidate)\n  teardowns.push(() => {\n    win.removeEventListener('scroll', invalidate, true)\n    win.removeEventListener('resize', invalidate)\n  })\n\n  const RO = win.ResizeObserver\n  if (RO) {\n    const ro = new RO(() => invalidate())\n    for (const el of targets()) ro.observe(el)\n    if (doc.body) ro.observe(doc.body)\n    teardowns.push(() => ro.disconnect())\n  }\n\n  const MO = win.MutationObserver\n  if (MO && doc.body) {\n    const mo = new MO(() => invalidate())\n    mo.observe(doc.body, { childList: true, subtree: true })\n    teardowns.push(() => mo.disconnect())\n  }\n\n  const fonts = (doc as Document & { fonts?: { ready?: Promise<unknown> } }).fonts\n  if (fonts?.ready) {\n    let cancelled = false\n    fonts.ready.then(() => !cancelled && invalidate()).catch(() => {})\n    teardowns.push(() => {\n      cancelled = true\n    })\n  }\n\n  return () => {\n    for (const t of teardowns) t()\n  }\n}\n"]}

package/dist/components/builder/canvas.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition } from '@elytracms/core/runtime-renderer'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { wireCanvasChrome } from './canvas-chrome'\nimport type { CanvasThemeStatus } from './canvas-chrome'\nimport { CanvasThemeNotice } from './canvas-theme-notice'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /\n  // broken stylesheet) drives the dev-only, never-blocking notice overlay.\n  const [themeStatus, setThemeStatus] = useState<CanvasThemeStatus | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet (new world: the chrome's neutral backdrop; legacy\n    // world: the studio `:root` tokens) supplies that backdrop once `.dark` is\n    // never added here (mirrors the components-preview surface, which wires\n    // through the same chrome). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than tokens, so it stays visible against a light\n    // page regardless. The full injection — stylesheet link, editing chrome,\n    // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,\n    // injected LAST so it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs } = inline\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const id = nodeIdAt(e.target)\n      if (id) {\n        e.preventDefault()\n        dispatch({ type: 'select', id })\n      }\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe.\n  const spacingTarget =\n    doc && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      {/* Canvas-theme classification notice (EC-414 AD-D): dev-only, never blocks. */}\n      <CanvasThemeNotice status={themeStatus} />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { renderPageComposition, setEditingMarkers } from '@elytracms/core/runtime-renderer'\nimport { getNode } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { useParams } from '@elytracms/studio/router'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport type { CanvasPerspective } from '@elytracms/studio/lib/data'\nimport { getInstantiatedKit } from '@elytracms/studio/lib/starters/kit-session'\nimport { resolveDeploymentCanvasTheme } from '@elytracms/studio/lib/workspace'\nimport { wireCanvasChrome } from './canvas-chrome'\nimport type { CanvasThemeStatus } from './canvas-chrome'\nimport { CanvasThemeNotice } from './canvas-theme-notice'\nimport { getCanvasStylesheetUrl } from './canvas-stylesheet'\nimport { useBuilder } from './builder-store'\nimport { useCanvasViewports, viewportWidth } from './canvas-breakpoints'\nimport { nodeIdAt, wrapperAt } from './canvas-dom'\nimport { useCanvasDnd } from './canvas-dnd'\nimport { useCanvasInlineEditing } from './canvas-inline-editing'\nimport { useCanvasRenderContext } from './canvas-render-context'\nimport {\n  ClipboardNoticeOverlay,\n  attachClipboardListeners,\n  useStudioClipboard,\n} from './clipboard-actions'\nimport { RichTextToolbar } from './rich-text-toolbar'\nimport { SpacingHandles, hasSpacingHandles } from './spacing-handles'\nimport { SelectionOverlay } from './selection-overlay'\nimport { attachDeleteKeyListener } from './delete-key'\nimport { usePropSync } from './prop-sync-context'\nimport { resolvePropClick } from './prop-selection'\n\n// EC-408: the studio canvas is the ONE surface that turns editing markers on, so\n// `ecProp` in the base primitives emits `data-ec-prop` here. Delivery\n// (`@elytracms/next`) is a separate build that never imports this module, so its\n// singleton stays off and shipped pages carry zero marker noise. Module-level\n// (not an effect) so markers are on before the first primitive renders.\nsetEditingMarkers(true)\n\n\n/**\n * Iframe-isolated page preview (brief §8.2, EC-061, EC-064). The graph renders\n * into a same-origin iframe via a React portal — true style isolation + true\n * responsive widths. Each node is wrapped with an editable marker so clicks\n * select and hover/selection draw outlines. Native listeners bridge the iframe\n * boundary (React's synthetic events don't cross frames); the two big gesture\n * state machines live in their own tested modules (EC-330): drag & drop in\n * `canvas-dnd`, inline text/rich-text editing in `canvas-inline-editing`, and\n * the render-context assembly in `canvas-render-context`.\n */\nexport function BuilderCanvas({\n  perspective = 'draft',\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `'draft'` (a just-made reusable shows immediately); the read-only\n   *  Published view passes `'published'` (honest preview of what delivery serves). */\n  perspective?: CanvasPerspective\n} = {}) {\n  const builder = useBuilder()\n  const { dispatch } = builder\n  const studio = getStudioRegistry()\n\n  // The edited composition root, composed for preview. EC-287 retired the project\n  // graph and its published-graph preview; the canvas always renders the live,\n  // editable draft (content publishing is per document).\n  const activeRoot: ComponentNode = builder.present\n  const iframeRef = useRef<HTMLIFrameElement>(null)\n  const [doc, setDoc] = useState<Document | null>(null)\n\n  // Graph/selection refs let the native iframe listeners read the *current*\n  // state without re-subscribing on every edit.\n  const presentRef = useRef(builder.present)\n  presentRef.current = builder.present\n  const selectedIdRef = useRef(builder.selectedId)\n  selectedIdRef.current = builder.selectedId\n\n  // When the project was created from a starter kit, its brand token palette drives the canvas UI\n  // (EC-117) — injected after app.css so the kit's overrides win in the cascade.\n  const params = useParams({ strict: false }) as { projectId?: string }\n  const kitTokensCss = params.projectId ? getInstantiatedKit(params.projectId)?.tokensCss : undefined\n\n  // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /\n  // broken stylesheet) drives the dev-only, never-blocking notice overlay.\n  const [themeStatus, setThemeStatus] = useState<CanvasThemeStatus | null>(null)\n\n  const wireUp = useCallback(() => {\n    const d = iframeRef.current?.contentDocument\n    if (!d || !d.body) return\n    // Deliberately no `.dark` here: this iframe renders the REAL page (plus\n    // studio editing chrome portaled alongside it), and its backdrop must read\n    // as a light, site-like page — never the studio chrome's current theme (a\n    // black canvas is exactly what leaks through when the studio is\n    // dark-themed and the iframe root inherits that class). The injected\n    // canvas stylesheet (new world: the chrome's neutral backdrop; legacy\n    // world: the studio `:root` tokens) supplies that backdrop once `.dark` is\n    // never added here (mirrors the components-preview surface, which wires\n    // through the same chrome). The editing chrome (selection/hover outlines,\n    // drop indicators, the rich-text toolbar, locale-fallback chips) uses\n    // hardcoded colors rather than tokens, so it stays visible against a light\n    // page regardless. The full injection — stylesheet link, editing chrome,\n    // kit tokens, the consumer's `defineStudio({ canvas })` theme (EC-389,\n    // injected LAST so it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      kitTokensCss,\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [kitTokensCss])\n\n  // Handle the already-loaded case (srcDoc may load before onLoad attaches).\n  useEffect(() => {\n    if (iframeRef.current?.contentDocument?.readyState === 'complete') wireUp()\n  }, [wireUp])\n\n  // Inline editing (EC-158/EC-159): the dblclick-to-edit state machine, the\n  // live session ref other listeners consult, the rich-text host (mark\n  // toolbar), and the per-node remount epochs (decorate keys).\n  const inline = useCanvasInlineEditing(doc, { presentRef, dispatch, studio })\n  const { editingRef, richEditHost, richEditEpochs, editing } = inline\n\n  // EC-408: the field↔component sync channel (null in the component preview,\n  // which has no inspector). Read live through a ref — the native iframe\n  // listeners outlive renders.\n  const propSync = usePropSync()\n  const propSyncRef = useRef(propSync)\n  propSyncRef.current = propSync\n\n  // Native selection/hover listeners inside the iframe document.\n  useEffect(() => {\n    if (!doc) return\n    const onClick = (e: Event) => {\n      // Clicks inside the active inline editor are caret moves, not selection.\n      if (editingRef.current?.host.contains(e.target as Node)) return\n      const wrapper = wrapperAt(e.target)\n      if (!wrapper) return\n      const id = wrapper.getAttribute('data-ec-node-id')!\n      e.preventDefault()\n      dispatch({ type: 'select', id })\n      // EC-408: resolve the clicked sub-part to its `data-ec-prop` and, unless it\n      // is inline-editable (inline editing stays primary), ask the inspector to\n      // focus that prop's control. Unannotated components resolve no marker → the\n      // node-level select above is the whole behavior, exactly as before.\n      const sync = propSyncRef.current\n      if (!sync) return\n      const node = getNode(presentRef.current, id)\n      const manifest = node ? studio.registry.getManifest(node.componentId) : undefined\n      const { propName, focusField } = resolvePropClick({\n        target: e.target as Element | null,\n        wrapper,\n        manifest,\n      })\n      if (propName && focusField) sync.requestFocus({ nodeId: id, propName })\n    }\n    const onOver = (e: Event) => dispatch({ type: 'hover', id: nodeIdAt(e.target) })\n    const onLeave = () => dispatch({ type: 'hover', id: null })\n    doc.addEventListener('click', onClick, true)\n    doc.addEventListener('mouseover', onOver)\n    doc.addEventListener('mouseleave', onLeave, true)\n    return () => {\n      doc.removeEventListener('click', onClick, true)\n      doc.removeEventListener('mouseover', onOver)\n      doc.removeEventListener('mouseleave', onLeave, true)\n    }\n  }, [doc, dispatch, editingRef, presentRef, studio])\n\n  // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef })\n\n  // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page\n  // tree and blocks panel use, wired to the *iframe* document (events never\n  // cross frames). Shortcuts stay inert while an inline editor is live and in\n  // form fields; the iframe's own navigator.clipboard does the async I/O\n  // (Chromium scopes clipboard access to the focused document).\n  const clipboard = useStudioClipboard()\n  useEffect(() => {\n    if (!doc) return\n    return attachClipboardListeners(doc, {\n      clipboard,\n      getSelectedId: () => selectedIdRef.current,\n      isBlocked: () => editingRef.current !== null,\n      asyncClipboard: doc.defaultView?.navigator.clipboard,\n      getSelection: () => doc.getSelection(),\n    })\n  }, [doc, clipboard, editingRef])\n\n  // Delete/Backspace removes the selected node (EC-404) — the keyboard remove\n  // the studio was missing, wired beside the clipboard listeners on the iframe\n  // document, guarded so typing in an inline editor edits text instead.\n  useEffect(() => {\n    if (!doc) return\n    return attachDeleteKeyListener(doc, {\n      getSelectedId: () => selectedIdRef.current,\n      remove: (id) => dispatch({ type: 'remove', id }),\n      getRootId: () => presentRef.current.id,\n    })\n  }, [doc, dispatch])\n\n  // The render context: the seven delivery-parity resolvers + the editable-\n  // wrapper decorator (selection/hover, locale chips, remount epochs) — see\n  // `canvas-render-context`.\n  const { ctx, pageNodeIds } = useCanvasRenderContext({\n    present: builder.present,\n    selectedId: builder.selectedId,\n    hoveredId: builder.hoveredId,\n    studio,\n    perspective,\n    richEditEpochs,\n  })\n\n  // Tokenized spacing handles (EC-163): a selected Stack/Grid with 2+ children\n  // gets draggable gap handles between them, portaled into the iframe. Suppressed\n  // while an inline text/rich-text edit owns the node (EC-406 scope 4) — the\n  // [data-ec-editing] outline owns that state, exactly as the selection overlay\n  // yields; a content-drag is suppressed inside SpacingHandles via the drag session.\n  const spacingTarget =\n    doc && !editing && hasSpacingHandles(builder.selectedNode) && pageNodeIds.has(builder.selectedNode.id)\n      ? builder.selectedNode\n      : null\n\n  // EC-250: the preview frame width derives from the config-sourced breakpoints\n  // (Tailwind defaults when unconfigured), the same resolved set the toolbar\n  // switcher offers.\n  const { viewports } = useCanvasViewports()\n\n  return (\n    <div className=\"canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6\">\n      {/* Copy/cut/paste outcomes (EC-175): non-blocking, with issue deep links. */}\n      <ClipboardNoticeOverlay />\n      {/* Canvas-theme classification notice (EC-414 AD-D): dev-only, never blocks. */}\n      <CanvasThemeNotice status={themeStatus} />\n      <div style={{ width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }} className=\"flex\">\n        <iframe\n          ref={iframeRef}\n          onLoad={wireUp}\n          title={translate('builder.canvas.pagePreview')}\n          className=\"min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md\"\n          srcDoc=\"<!doctype html><html><head></head><body></body></html>\"\n        />\n        {doc\n          ? createPortal(\n              // Render the composition root directly (EC-287: no layout\n              // indirection — a page renders its blocks).\n              renderPageComposition(activeRoot, ctx),\n              doc.body,\n            )\n          : null}\n        {/* Selection/hover frames + frame controls, topmost over the page (EC-404). */}\n        {doc ? <SelectionOverlay doc={doc} editing={editing} /> : null}\n        {spacingTarget && doc ? (\n          <SpacingHandles key={spacingTarget.id} doc={doc} node={spacingTarget} />\n        ) : null}\n        {/* Floating mark toolbar for the live rich-text session (EC-159). */}\n        {richEditHost && doc ? <RichTextToolbar doc={doc} host={richEditHost} /> : null}\n      </div>\n    </div>\n  )\n}\n"]}

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

@@ -12,7 +12,9 @@ import { PageTree } from './page-tree.js';
 import { PropertyInspector } from './property-inspector.js';
 import { InspectorSidebar } from '../inspector/inspector-sidebar.js';
 import { InsertMenu } from './insert-menu.js';
-import { resolveInsertContext } from './insert-context.js';
+import { insertablePositions, resolveInsertContext, resolveInsertContextAt } from './insert-context.js';
+import { InsertAffordanceProvider } from './insert-affordance-context.js';
+import { PropSyncProvider } from './prop-sync-context.js';
 import { ReuseProvider } from './reuse-context.js';
 /**
  * EC-188 — the block-field surface: one canvas engine mounted on a composition
@@ -54,7 +56,7 @@ export function CompositionFieldEditor({ field, value, onChange, readOnly, trail
     // (BuilderProvider reads `composition` only in its lazy initial state, so later
     // prop changes are ignored regardless.)
     const initialRoot = useMemo(() => buildSyntheticRoot(value), []);
-    return (_jsxs(BuilderProvider, { composition: initialRoot, children: [_jsx(CompositionLift, { multiple: field.multiple, onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, fieldAllow: field.allow, trailingPanes: trailingPanes }) })] }));
+    return (_jsxs(BuilderProvider, { composition: initialRoot, children: [_jsx(CompositionLift, { multiple: field.multiple, onChange: onChange, readOnly: readOnly }), _jsx(ReuseProvider, { children: _jsx(PropSyncProvider, { children: _jsx(CompositionEditorShell, { readOnly: readOnly, fieldAllow: field.allow, trailingPanes: trailingPanes }) }) })] }));
 }
 /**
  * Lifts committed edits out of the scoped store into the CMS draft. The first
@@ -147,6 +149,23 @@ function CompositionEditorShell({ readOnly, fieldAllow, trailingPanes, }) {
         setInsertContext(ctx);
         setInsertOpen(true);
     }
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border", children: _jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.undo'), title: translate('builder.canvas.undo'), disabled: readOnly || !builder.canUndo, onClick: () => dispatch({ type: 'undo' }), children: _jsx(Undo2, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.redo'), title: translate('builder.canvas.redo'), disabled: readOnly || !builder.canRedo, onClick: () => dispatch({ type: 'redo' }), children: _jsx(Redo2, {}) })] }), _jsx(ToolbarSeparator, {}), _jsxs(Button, { size: "sm", variant: "ghost", disabled: readOnly, onClick: () => openInsert(builder.selectedId ?? rootId), children: [_jsx(Plus, {}), " ", translate('builder.canvas.insert')] }), _jsx(Spacer, {}), _jsx(BreakpointSwitcher, {}), _jsx(Spacer, {})] }) }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border", children: [_jsx(Panel, { className: cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60'), children: _jsx(PageTree, { onAddChild: openInsert }) }), _jsx("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : 'draft' }) }), _jsx(InspectorSidebar, { panes: panes })] }), _jsx(InsertMenu, { context: insertContext, open: insertOpen, onOpenChange: setInsertOpen })] }));
+    // EC-405: the in-canvas "+" affordances resolve the SAME slot rules through the
+    // shared position-carrying insert-context resolution, and open the panel at the
+    // clicked edge (an explicit position that survives to the insertion, rather than
+    // the panel re-deriving it from the selection). Re-memoized on every store change
+    // so the closures read the live graph.
+    const affordanceApi = useMemo(() => ({
+        positionsFor: (nodeId) => insertablePositions(builder, nodeId, fieldAllow),
+        openAt: (nodeId, position) => {
+            const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow);
+            if (!ctx)
+                return;
+            if (nodeId !== builder.selectedId)
+                dispatch({ type: 'select', id: nodeId });
+            setInsertContext(ctx);
+            setInsertOpen(true);
+        },
+    }), [builder, fieldAllow, dispatch]);
+    return (_jsx(InsertAffordanceProvider, { value: affordanceApi, children: _jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border", children: _jsxs(Toolbar, { children: [_jsxs(ToolbarGroup, { children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.undo'), title: translate('builder.canvas.undo'), disabled: readOnly || !builder.canUndo, onClick: () => dispatch({ type: 'undo' }), children: _jsx(Undo2, {}) }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": translate('builder.canvas.redo'), title: translate('builder.canvas.redo'), disabled: readOnly || !builder.canRedo, onClick: () => dispatch({ type: 'redo' }), children: _jsx(Redo2, {}) })] }), _jsx(ToolbarSeparator, {}), _jsxs(Button, { size: "sm", variant: "ghost", disabled: readOnly, onClick: () => openInsert(builder.selectedId ?? rootId), children: [_jsx(Plus, {}), " ", translate('builder.canvas.insert')] }), _jsx(Spacer, {}), _jsx(BreakpointSwitcher, {}), _jsx(Spacer, {})] }) }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(200px,240px)_1fr_minmax(280px,320px)] gap-px bg-border", children: [_jsx(Panel, { className: cn('rounded-none border-0', readOnly && 'pointer-events-none opacity-60'), children: _jsx(PageTree, { onAddChild: openInsert }) }), _jsx("div", { className: cn('flex min-h-0 flex-col bg-background', readOnly && 'pointer-events-none opacity-60'), children: _jsx(BuilderCanvas, { perspective: readOnly ? 'published' : 'draft' }) }), _jsx(InspectorSidebar, { panes: panes })] }), _jsx(InsertMenu, { context: insertContext, open: insertOpen, onOpenChange: setInsertOpen })] }) }));
 }
 //# sourceMappingURL=composition-field-editor.js.map