@elytracms/studio 0.0.91 → 0.0.93

package/dist/components/builder/canvas-chrome-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-chrome-css.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAyC9D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,4BAA4B,CAAA;AAE3E;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAAG;;;;;CAK9B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG;;CAE3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA4IkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCzD,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,aAAa,CAAA;AAC5F,CAAC","sourcesContent":["import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\n\n/**\n * The canvas chrome STYLESHEET (EC-414 / AD-B) — the studio's complete in-frame\n * styling, hand-written. This is deliberately NOT a second Tailwind world: the\n * chrome inside the canvas iframe styles itself with `ec-*` classes, `data-ec-*`\n * attributes, and inline styles only, so the consumer's theme is the ONLY design\n * system in the canvas document and the canvas resolves exactly what delivery\n * resolves (AD-A).\n *\n * The chrome contract (binding on ALL in-frame studio UI — EC-404/405/408 build\n * on this):\n *\n *   1. Only `ec-*` class names / `data-ec-*` attributes / inline styles — never\n *      studio utility classes, never studio React UI primitives.\n *   2. Chrome roots carry the containment recipe (`.ec-chrome`): `all: initial`\n *      plus explicit font/color/line-height/color-scheme re-establishment, so\n *      consumer element rules and inherited typography cannot restyle chrome.\n *      NOTE (verified, MDN): `all: initial` does NOT stop custom-property\n *      inheritance — the real protection is that chrome never CONSUMES a var()\n *      name a consumer could define (this file uses no var() at all; the\n *      contract test enforces it).\n *   3. Where a consumer ELEMENT selector could still match chrome descendants\n *      (`div`, `span`, `button`, `input` rules in a site theme), chrome rules\n *      use `!important` deliberately — a small, documented surface: the\n *      selection/DnD indicators, the rich-text toolbar, and the locale chip.\n *      The `.ec-chrome` recipe itself stays normal-strength on purpose: inline\n *      styles are the top styling layer for chrome-owned looks (placeholders,\n *      spacing handles) and stylesheet-`!important` would beat them.\n *   4. Escape hatch (documented only, NOT built): if chrome ever outgrows\n *      hand-written CSS, the verified prefixed-bundle recipe is the upgrade\n *      path — granular Tailwind imports `theme.css layer(theme) prefix(ec)` +\n *      `utilities.css layer(utilities) prefix(ec) important source(none)`\n *      compiled into an engine-provided entry (compiles clean on 4.3.2).\n */\n\n/** The two canvas stylesheet worlds (AD-C): `legacy` = the pre-EC-414 merged\n *  canvas.css (studio design system + consumer theme in one build); `new` = the\n *  consumer's standalone full-Tailwind theme entry, studio-free. */\nexport type CanvasWorld = 'legacy' | 'new'\n\n/**\n * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare\n * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the\n * document's layer order (layer order is first-occurrence order). The new-world\n * backdrop rules live in this layer, so they lose to EVERYTHING the consumer\n * ships — `@layer base` body rules, unlayered rules, later layers — and only\n * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS\n * beat the consumer's layered `@layer base body { background }` — the exact\n * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy\n * chrome CSS puts nothing in the layer.\n */\nexport const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;'\n\n/**\n * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is\n * retired; these neutral hand-written rules give the canvas a light, site-like\n * page when the consumer theme paints nothing, in the weakest possible cascade\n * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on\n * BODY (not html) so a consumer `body { background }` keeps its normal\n * canvas-propagation behavior — short pages paint edge-to-edge exactly as the\n * delivery build does.\n */\nconst NEW_WORLD_BACKDROP_CSS = `\n  @layer ec-canvas-backdrop {\n    html { color-scheme: light; }\n    body { background-color: #ffffff; }\n  }\n`\n\n/**\n * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era\n * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop\n * is deliberately always light/site-like, so the native form-control/scrollbar\n * theme is forced to match and a page with real inputs never shows dark native\n * chrome floating on a light page. The light page itself comes from the studio\n * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged\n * stylesheet's studio tokens.\n */\nconst LEGACY_BACKDROP_CSS = `\n  html { color-scheme: light; }\n`\n\n/**\n * The chrome UI rules — identical in both worlds. Sections:\n * page frame, containment recipe, editable wrappers, selection/hover overlay\n * (EC-404), inline editing, rich-text toolbar, locale-fallback chips, drag &\n * drop indicators.\n */\nconst CHROME_UI_CSS = `\n  /* ── Page frame ─────────────────────────────────────────────────────────\n     The canvas gutter — unlayered on purpose (identical in both worlds, and\n     it must beat a consumer body margin: the 16px frame is editor ergonomics,\n     not page styling). */\n  body { margin: 0; padding: 16px; }\n\n  /* ── Containment recipe (chrome contract item 2) ────────────────────────\n     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)\n     carries .ec-chrome: reset everything, then re-establish the chrome's own\n     typography and color-scheme explicitly. Inherited custom properties pierce\n     'all: initial' (and even shadow DOM) — that is why chrome never consumes\n     var() names (contract-tested), not something this recipe could fix.\n     The :where(div, span, p) guard re-links descendant text to the chrome\n     root's typography with class-level specificity, so a consumer's bare\n     'div, span { color: … }' element rules cannot restyle chrome text; chrome\n     elements styled inline stay inline-styled (inline always wins here). */\n  .ec-chrome {\n    all: initial;\n    display: block;\n    box-sizing: border-box;\n    font-family: ui-sans-serif, system-ui, sans-serif;\n    font-size: 13px;\n    line-height: 1.5;\n    color: rgb(30, 35, 45);\n    color-scheme: light;\n  }\n  .ec-chrome *,\n  .ec-chrome *::before,\n  .ec-chrome *::after { box-sizing: border-box; }\n  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }\n\n  /* ── Editable wrappers ──────────────────────────────────────────────────\n     Scoped to the per-node editable wrappers. The wrappers WRAP consumer\n     content, so they are deliberately NOT contained (no .ec-chrome — they must\n     stay layout-transparent). EC-404 RETIRED the in-document selection/hover\n     outlines (data-selected / data-hovered): an outline paints in the\n     element's own stacking order and any full-bleed background or higher\n     z-index sibling paints over it — a structural occlusion, not a z-index bug.\n     Selection + hover are now drawn by the topmost .ec-overlay layer below.\n     The outline-offset stays for the editing outline (and DnD 'into' overrides\n     it); its !important (contract item 3) keeps a site theme's element rules\n     from hiding those states. */\n  .ec-editable { outline-offset: -1px !important; cursor: default; }\n\n  /* ── Selection/hover overlay (EC-404) ───────────────────────────────────\n     The topmost editing layer, portaled into the iframe body as a sibling of\n     the page composition and pinned to the maximum stacking level, so NOTHING\n     the page paints can occlude the selection frame. The root carries the\n     .ec-chrome containment recipe; geometry (left/top/width/height) is inline,\n     everything visual lives here. Element-matching declarations carry\n     !important (contract item 3): the frame boxes are <div>s and the controls\n     are <button>s a site theme's element rules would otherwise restyle. Frames\n     are click-through (pointer-events:none); only the bar re-enables events. */\n  .ec-overlay {\n    position: absolute !important; top: 0 !important; left: 0 !important;\n    z-index: 2147483647 !important; pointer-events: none !important;\n    width: 0 !important; height: 0 !important;\n  }\n  .ec-overlay-frame {\n    position: absolute !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 2px !important;\n  }\n  /* Hover frame (EC-435 AD-3): accent-leaning and heavier than the old 1px\n     grey-blue dash (easy to overlook over imagery; live-tuned on light AND\n     busy sections — 1.5px collapses to 1px at 1x DPR, so 2px is the smallest\n     deterministic bump). Still clearly secondary to the SELECTED frame: the\n     same weight but dashed and translucent vs. solid opaque. */\n  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 2px dashed rgba(91,140,255,0.8) !important; }\n  .ec-overlay-frame[data-ec-selected] { z-index: 2 !important; border: 2px solid #5b8cff !important; }\n  /* ── Prop highlight (EC-408 reverse: field focus → sub-part) ─────────────\n     A quiet FILLED tint (no hard border) on the focused prop's element,\n     deliberately distinct from the selection frame (solid border) and the\n     hover frame (dashed border). Sits below both frames so their borders stay\n     crisp; click-through like the frames. */\n  .ec-overlay-prop {\n    position: absolute !important; z-index: 1 !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 3px !important;\n    background: rgba(91,140,255,0.16) !important;\n    box-shadow: inset 0 0 0 1px rgba(91,140,255,0.45) !important;\n  }\n  .ec-overlay-bar {\n    position: absolute !important; z-index: 3 !important; pointer-events: auto !important;\n    display: flex !important; align-items: center !important; gap: 1px !important;\n    height: 22px !important; max-width: 320px !important; padding: 0 2px 0 6px !important;\n    border-radius: 6px !important; background: #5b8cff !important;\n    box-shadow: 0 2px 8px rgba(8,12,24,0.35) !important;\n    font: 600 11px/1 ui-sans-serif, system-ui, sans-serif !important;\n    color: #ffffff !important; white-space: nowrap !important;\n  }\n  .ec-overlay-label {\n    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;\n    max-width: 180px !important; padding-right: 2px !important;\n    font: inherit !important; color: #ffffff !important;\n  }\n  .ec-overlay-sep {\n    width: 1px !important; height: 12px !important; margin: 0 3px !important;\n    background: rgba(255,255,255,0.4) !important;\n  }\n  .ec-overlay-btn {\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 18px !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 4px !important; background: transparent !important;\n    color: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-btn:hover { background: rgba(255,255,255,0.22) !important; }\n  .ec-overlay-btn:disabled { opacity: 0.4 !important; cursor: default !important; }\n\n  /* ── Insertion affordances (EC-405) ─────────────────────────────────────\n     A \"+\" button centered ON a block boundary (before/after edge, or the center\n     of an empty container) — the geometry is inline (the anchor point), the\n     translate here centers the button on it. Appears only on hover/selection\n     (never during a drag or inline edit); pointer-events re-enabled so it is\n     clickable while the overlay root stays click-through. Element-matching\n     declarations !important (contract item 3): it is a <button> a site theme's\n     element rules would otherwise restyle. */\n  .ec-overlay-add {\n    position: absolute !important; z-index: 4 !important; pointer-events: auto !important;\n    transform: translate(-50%, -50%) !important;\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 20px !important; padding: 0 !important; margin: 0 !important;\n    border: 1.5px solid #ffffff !important; border-radius: 999px !important;\n    background: #5b8cff !important; color: #ffffff !important; cursor: pointer !important;\n    box-shadow: 0 1px 5px rgba(8,12,24,0.4) !important;\n    -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-add:hover { background: #3f74f5 !important; }\n\n  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────\n     The rendered element itself becomes the editor — no overlay, no\n     replacement input — so typography, alignment, and layout are\n     pixel-identical between edit and render states. The wrapper keeps the\n     selection outline; the host only gets a caret. pre-wrap applies to PLAIN\n     text hosts only — rich-text markup must keep its rendered whitespace\n     handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n\n  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────\n     All visual declarations !important (contract item 3): the toolbar is\n     stylesheet-styled chrome whose button/input elements a site theme's\n     element rules would otherwise match. */\n  .ec-rt-toolbar { color-scheme: dark !important; }\n  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;\n    padding: 3px !important; margin: 0 !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;\n    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }\n  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;\n    border: 0 !important; border-radius: 5px !important;\n    background: transparent !important; color: rgb(225,228,236) !important;\n    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;\n    cursor: pointer !important; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }\n  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;\n    border-radius: 5px !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;\n    color: rgb(225,228,236) !important;\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }\n\n  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────\n     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these\n     classes only *show* the resolution. Rejection is explicit and visible\n     during the drag — never a silent failed drop. Before/after bars follow the\n     parent's flow axis (data-ec-drop-axis); left/right are the\n     wrap-into-columns gesture (violet, paired highlight). Indicator\n     declarations !important (contract item 3). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }\n`\n\n/**\n * The complete chrome stylesheet for a world — the `ec-outline-css` element's\n * content (id kept from EC-389; the cascade position is pinned by test).\n */\nexport function canvasChromeCss(world: CanvasWorld): string {\n  return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS\n}\n"]}
+{"version":3,"file":"canvas-chrome-css.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAyC9D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,4BAA4B,CAAA;AAE3E;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAAG;;;;;CAK9B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG;;CAE3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmJkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCzD,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,aAAa,CAAA;AAC5F,CAAC","sourcesContent":["import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\n\n/**\n * The canvas chrome STYLESHEET (EC-414 / AD-B) — the studio's complete in-frame\n * styling, hand-written. This is deliberately NOT a second Tailwind world: the\n * chrome inside the canvas iframe styles itself with `ec-*` classes, `data-ec-*`\n * attributes, and inline styles only, so the consumer's theme is the ONLY design\n * system in the canvas document and the canvas resolves exactly what delivery\n * resolves (AD-A).\n *\n * The chrome contract (binding on ALL in-frame studio UI — EC-404/405/408 build\n * on this):\n *\n *   1. Only `ec-*` class names / `data-ec-*` attributes / inline styles — never\n *      studio utility classes, never studio React UI primitives.\n *   2. Chrome roots carry the containment recipe (`.ec-chrome`): `all: initial`\n *      plus explicit font/color/line-height/color-scheme re-establishment, so\n *      consumer element rules and inherited typography cannot restyle chrome.\n *      NOTE (verified, MDN): `all: initial` does NOT stop custom-property\n *      inheritance — the real protection is that chrome never CONSUMES a var()\n *      name a consumer could define (this file uses no var() at all; the\n *      contract test enforces it).\n *   3. Where a consumer ELEMENT selector could still match chrome descendants\n *      (`div`, `span`, `button`, `input` rules in a site theme), chrome rules\n *      use `!important` deliberately — a small, documented surface: the\n *      selection/DnD indicators, the rich-text toolbar, and the locale chip.\n *      The `.ec-chrome` recipe itself stays normal-strength on purpose: inline\n *      styles are the top styling layer for chrome-owned looks (placeholders,\n *      spacing handles) and stylesheet-`!important` would beat them.\n *   4. Escape hatch (documented only, NOT built): if chrome ever outgrows\n *      hand-written CSS, the verified prefixed-bundle recipe is the upgrade\n *      path — granular Tailwind imports `theme.css layer(theme) prefix(ec)` +\n *      `utilities.css layer(utilities) prefix(ec) important source(none)`\n *      compiled into an engine-provided entry (compiles clean on 4.3.2).\n */\n\n/** The two canvas stylesheet worlds (AD-C): `legacy` = the pre-EC-414 merged\n *  canvas.css (studio design system + consumer theme in one build); `new` = the\n *  consumer's standalone full-Tailwind theme entry, studio-free. */\nexport type CanvasWorld = 'legacy' | 'new'\n\n/**\n * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare\n * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the\n * document's layer order (layer order is first-occurrence order). The new-world\n * backdrop rules live in this layer, so they lose to EVERYTHING the consumer\n * ships — `@layer base` body rules, unlayered rules, later layers — and only\n * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS\n * beat the consumer's layered `@layer base body { background }` — the exact\n * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy\n * chrome CSS puts nothing in the layer.\n */\nexport const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;'\n\n/**\n * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is\n * retired; these neutral hand-written rules give the canvas a light, site-like\n * page when the consumer theme paints nothing, in the weakest possible cascade\n * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on\n * BODY (not html) so a consumer `body { background }` keeps its normal\n * canvas-propagation behavior — short pages paint edge-to-edge exactly as the\n * delivery build does.\n */\nconst NEW_WORLD_BACKDROP_CSS = `\n  @layer ec-canvas-backdrop {\n    html { color-scheme: light; }\n    body { background-color: #ffffff; }\n  }\n`\n\n/**\n * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era\n * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop\n * is deliberately always light/site-like, so the native form-control/scrollbar\n * theme is forced to match and a page with real inputs never shows dark native\n * chrome floating on a light page. The light page itself comes from the studio\n * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged\n * stylesheet's studio tokens.\n */\nconst LEGACY_BACKDROP_CSS = `\n  html { color-scheme: light; }\n`\n\n/**\n * The chrome UI rules — identical in both worlds. Sections:\n * page frame, containment recipe, editable wrappers, selection/hover overlay\n * (EC-404), inline editing, rich-text toolbar, locale-fallback chips, drag &\n * drop indicators.\n */\nconst CHROME_UI_CSS = `\n  /* ── Page frame ─────────────────────────────────────────────────────────\n     The canvas gutter — unlayered on purpose (identical in both worlds, and\n     it must beat a consumer body margin: the 16px frame is editor ergonomics,\n     not page styling). */\n  body { margin: 0; padding: 16px; }\n\n  /* ── Containment recipe (chrome contract item 2) ────────────────────────\n     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)\n     carries .ec-chrome: reset everything, then re-establish the chrome's own\n     typography and color-scheme explicitly. Inherited custom properties pierce\n     'all: initial' (and even shadow DOM) — that is why chrome never consumes\n     var() names (contract-tested), not something this recipe could fix.\n     The :where(div, span, p) guard re-links descendant text to the chrome\n     root's typography with class-level specificity, so a consumer's bare\n     'div, span { color: … }' element rules cannot restyle chrome text; chrome\n     elements styled inline stay inline-styled (inline always wins here). */\n  .ec-chrome {\n    all: initial;\n    display: block;\n    box-sizing: border-box;\n    font-family: ui-sans-serif, system-ui, sans-serif;\n    font-size: 13px;\n    line-height: 1.5;\n    color: rgb(30, 35, 45);\n    color-scheme: light;\n  }\n  .ec-chrome *,\n  .ec-chrome *::before,\n  .ec-chrome *::after { box-sizing: border-box; }\n  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }\n\n  /* ── Editable wrappers ──────────────────────────────────────────────────\n     Scoped to the per-node editable wrappers. The wrappers WRAP consumer\n     content, so they are deliberately NOT contained (no .ec-chrome — they must\n     stay layout-transparent). EC-404 RETIRED the in-document selection/hover\n     outlines (data-selected / data-hovered): an outline paints in the\n     element's own stacking order and any full-bleed background or higher\n     z-index sibling paints over it — a structural occlusion, not a z-index bug.\n     Selection + hover are now drawn by the topmost .ec-overlay layer below.\n     The outline-offset stays for the editing outline (and DnD 'into' overrides\n     it); its !important (contract item 3) keeps a site theme's element rules\n     from hiding those states. */\n  .ec-editable { outline-offset: -1px !important; cursor: default; }\n  /* EC-549: a typography RUN of the field value (loose prose between blocks) —\n     selectable and deletable by its path. Prose flows in the page, so the selected\n     run carries its own outline (a run has no frame bar: it is edited and deleted\n     in the inspector, or with the Delete key). */\n  .ec-run { cursor: default; }\n  .ec-run:hover { outline: 1px dashed #93b4ff !important; outline-offset: 2px !important; }\n  .ec-run[data-selected] { outline: 2px solid #5b8cff !important; outline-offset: 2px !important; }\n\n  /* ── Selection/hover overlay (EC-404) ───────────────────────────────────\n     The topmost editing layer, portaled into the iframe body as a sibling of\n     the page composition and pinned to the maximum stacking level, so NOTHING\n     the page paints can occlude the selection frame. The root carries the\n     .ec-chrome containment recipe; geometry (left/top/width/height) is inline,\n     everything visual lives here. Element-matching declarations carry\n     !important (contract item 3): the frame boxes are <div>s and the controls\n     are <button>s a site theme's element rules would otherwise restyle. Frames\n     are click-through (pointer-events:none); only the bar re-enables events. */\n  .ec-overlay {\n    position: absolute !important; top: 0 !important; left: 0 !important;\n    z-index: 2147483647 !important; pointer-events: none !important;\n    width: 0 !important; height: 0 !important;\n  }\n  .ec-overlay-frame {\n    position: absolute !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 2px !important;\n  }\n  /* Hover frame (EC-435 AD-3): accent-leaning and heavier than the old 1px\n     grey-blue dash (easy to overlook over imagery; live-tuned on light AND\n     busy sections — 1.5px collapses to 1px at 1x DPR, so 2px is the smallest\n     deterministic bump). Still clearly secondary to the SELECTED frame: the\n     same weight but dashed and translucent vs. solid opaque. */\n  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 2px dashed rgba(91,140,255,0.8) !important; }\n  .ec-overlay-frame[data-ec-selected] { z-index: 2 !important; border: 2px solid #5b8cff !important; }\n  /* ── Prop highlight (EC-408 reverse: field focus → sub-part) ─────────────\n     A quiet FILLED tint (no hard border) on the focused prop's element,\n     deliberately distinct from the selection frame (solid border) and the\n     hover frame (dashed border). Sits below both frames so their borders stay\n     crisp; click-through like the frames. */\n  .ec-overlay-prop {\n    position: absolute !important; z-index: 1 !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 3px !important;\n    background: rgba(91,140,255,0.16) !important;\n    box-shadow: inset 0 0 0 1px rgba(91,140,255,0.45) !important;\n  }\n  .ec-overlay-bar {\n    position: absolute !important; z-index: 3 !important; pointer-events: auto !important;\n    display: flex !important; align-items: center !important; gap: 1px !important;\n    height: 22px !important; max-width: 320px !important; padding: 0 2px 0 6px !important;\n    border-radius: 6px !important; background: #5b8cff !important;\n    box-shadow: 0 2px 8px rgba(8,12,24,0.35) !important;\n    font: 600 11px/1 ui-sans-serif, system-ui, sans-serif !important;\n    color: #ffffff !important; white-space: nowrap !important;\n  }\n  .ec-overlay-label {\n    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;\n    max-width: 180px !important; padding-right: 2px !important;\n    font: inherit !important; color: #ffffff !important;\n  }\n  .ec-overlay-sep {\n    width: 1px !important; height: 12px !important; margin: 0 3px !important;\n    background: rgba(255,255,255,0.4) !important;\n  }\n  .ec-overlay-btn {\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 18px !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 4px !important; background: transparent !important;\n    color: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-btn:hover { background: rgba(255,255,255,0.22) !important; }\n  .ec-overlay-btn:disabled { opacity: 0.4 !important; cursor: default !important; }\n\n  /* ── Insertion affordances (EC-405) ─────────────────────────────────────\n     A \"+\" button centered ON a block boundary (before/after edge, or the center\n     of an empty container) — the geometry is inline (the anchor point), the\n     translate here centers the button on it. Appears only on hover/selection\n     (never during a drag or inline edit); pointer-events re-enabled so it is\n     clickable while the overlay root stays click-through. Element-matching\n     declarations !important (contract item 3): it is a <button> a site theme's\n     element rules would otherwise restyle. */\n  .ec-overlay-add {\n    position: absolute !important; z-index: 4 !important; pointer-events: auto !important;\n    transform: translate(-50%, -50%) !important;\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 20px !important; padding: 0 !important; margin: 0 !important;\n    border: 1.5px solid #ffffff !important; border-radius: 999px !important;\n    background: #5b8cff !important; color: #ffffff !important; cursor: pointer !important;\n    box-shadow: 0 1px 5px rgba(8,12,24,0.4) !important;\n    -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-add:hover { background: #3f74f5 !important; }\n\n  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────\n     The rendered element itself becomes the editor — no overlay, no\n     replacement input — so typography, alignment, and layout are\n     pixel-identical between edit and render states. The wrapper keeps the\n     selection outline; the host only gets a caret. pre-wrap applies to PLAIN\n     text hosts only — rich-text markup must keep its rendered whitespace\n     handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n\n  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────\n     All visual declarations !important (contract item 3): the toolbar is\n     stylesheet-styled chrome whose button/input elements a site theme's\n     element rules would otherwise match. */\n  .ec-rt-toolbar { color-scheme: dark !important; }\n  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;\n    padding: 3px !important; margin: 0 !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;\n    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }\n  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;\n    border: 0 !important; border-radius: 5px !important;\n    background: transparent !important; color: rgb(225,228,236) !important;\n    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;\n    cursor: pointer !important; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }\n  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;\n    border-radius: 5px !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;\n    color: rgb(225,228,236) !important;\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }\n\n  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────\n     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these\n     classes only *show* the resolution. Rejection is explicit and visible\n     during the drag — never a silent failed drop. Before/after bars follow the\n     parent's flow axis (data-ec-drop-axis); left/right are the\n     wrap-into-columns gesture (violet, paired highlight). Indicator\n     declarations !important (contract item 3). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }\n`\n\n/**\n * The complete chrome stylesheet for a world — the `ec-outline-css` element's\n * content (id kept from EC-389; the cascade position is pinned by test).\n */\nexport function canvasChromeCss(world: CanvasWorld): string {\n  return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS\n}\n"]}

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { ComponentNode, LayoutContainerIds } from '@elytracms/core/project-graph';
+import type { ComponentNode, LayoutContainerIds, PlacementScope } from '@elytracms/core/project-graph';
 import type { ManifestRules } from '@elytracms/studio/lib/dnd/drop-rules';
 import type { StudioRegistry } from '@elytracms/studio/lib/registry';
 import type { BuilderAction } from './builder-store.js';
@@ -32,11 +32,11 @@ export interface CanvasDndDeps {
     /** Manifest lookup feeding the pure drop rules. */
     getManifest(componentId: string): ManifestRules | undefined;
     /**
-     * The composition field's top-level `allow` (EC-554; `undefined` = the field
-     * declares none) — judged by `resolveDrop` for drops whose parent is the root.
-     * A required key: the wiring must state it.
+     * EC-584: the placement scope `resolveDrop` judges by — the manifest lookup and
+     * the composition field's effective top-level vocabulary (`builder.placement`,
+     * the scope the reducer enforces). A required key: the wiring must state it.
      */
-    fieldAllow: readonly string[] | undefined;
+    placement: PlacementScope;
     /**
      * The layout-role component ids (EC-591, `ComponentRegistry.layout`): the flow
      * axis of a Stack/Grid parent, and the Grid the wrap gesture builds — whose side
@@ -68,6 +68,6 @@ export declare function useCanvasDnd(doc: Document | null, deps: {
     studio: StudioRegistry;
     /** The live inline-edit session (owned by `useCanvasInlineEditing`). */
     editingRef: RefObject<ActiveInlineEdit | null>;
-    /** The composition field's top-level `allow` (EC-554) — `builder.field.allow`. */
-    fieldAllow: readonly string[] | undefined;
+    /** EC-584: the store's placement scope (`builder.placement`). */
+    placement: PlacementScope;
 }): void;

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

@@ -8,7 +8,7 @@ import { wrapperAt } from './canvas-dom.js';
  * React's synthetic events don't cross frames). Returns the detach function.
  */
 export function attachCanvasDndListeners(doc, deps) {
-    const { currentRoot, getManifest, fieldAllow, layout, dispatch } = deps;
+    const { currentRoot, getManifest, placement, layout, dispatch } = deps;
     let dropWrapper = null;
     let dropPlan = null;
     const clearIndicator = () => {
@@ -108,7 +108,7 @@ export function attachCanvasDndListeners(doc, deps) {
             root,
             getManifest,
             layout,
-            fieldAllow,
+            placement,
             subject: drag.subject,
             location: { nodeId: refId, position },
         });
@@ -195,7 +195,7 @@ export function attachCanvasDndListeners(doc, deps) {
  * session without re-subscribing on every edit.
  */
 export function useCanvasDnd(doc, deps) {
-    const { presentRef, dispatch, studio, editingRef, fieldAllow } = deps;
+    const { presentRef, dispatch, studio, editingRef, placement } = deps;
     useEffect(() => {
         if (!doc)
             return;
@@ -204,11 +204,11 @@ export function useCanvasDnd(doc, deps) {
             // EC-386: adapt through `manifestRules` so blocks-prop regions (e.g. a
             // Section's `body`) receive drops with their `allow` leash, like raw slots.
             getManifest: (id) => manifestRules(studio.registry.getManifest(id)),
-            fieldAllow,
+            placement,
             layout: studio.registry.layout,
             dispatch,
             isEditingTarget: (target) => editingRef.current?.host.contains(target) ?? false,
         });
-    }, [doc, dispatch, studio, presentRef, editingRef, fieldAllow]);
+    }, [doc, dispatch, studio, presentRef, editingRef, placement]);
 }
 //# sourceMappingURL=canvas-dnd.js.map

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

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

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

@@ -1,9 +1,9 @@
+import type { Perspective } from '@elytracms/core/cms-core';
 import type { AssetRecord } from '@elytracms/core/persistence';
 import type { ListingQuery, RenderAsset, RenderContext, ResolveAsset, ResolveLink, ResolveListing, ResolveRelation } from '@elytracms/core/runtime-renderer';
 import type { ContentQueryError } from '@elytracms/core/content';
 import type { ComponentNode } from '@elytracms/core/project-graph';
 import type { StudioRegistry } from '@elytracms/studio/lib/registry';
-import type { CanvasPerspective } from '@elytracms/studio/lib/data';
 import type { ReuseCapability } from './reuse.js';
 /**
  * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the
@@ -31,8 +31,14 @@ export declare function collectIds(node: ComponentNode, out?: Set<string>): Set<
 export declare function unresolvedReuseStatus(node: ComponentNode, capability: ReuseCapability | null | undefined, resolveAt: (ref: {
     collection: string;
     id: string;
-}, perspective: CanvasPerspective) => unknown, perspective: CanvasPerspective): 'unpublished' | 'missing' | null;
-/** Everything the pure context factory needs — resolvers plus decoration state. */
+}, perspective: Perspective) => unknown, perspective: Perspective): 'unpublished' | 'missing' | null;
+/**
+ * Everything the pure context factory needs — the live SOURCE (resolvers over the
+ * content session, and the session schema's verdict on a listing query) plus the
+ * editor's decoration state. EC-592: the factory is a call of core's ONE
+ * `createRenderContext` (`mode: 'canvas'`) — the delivery host calls the same one
+ * over its baked source.
+ */
 export interface CanvasRenderContextDeps {
     registry: RenderContext['registry'];
     implementations: RenderContext['implementations'];
@@ -48,28 +54,30 @@ export interface CanvasRenderContextDeps {
     richEditEpochs: Record<string, number>;
     unresolvedReuse(node: ComponentNode): 'unpublished' | 'missing' | null;
     /**
-     * EC-460 (never-silent): a human-readable message when the node declares a
-     * `listing` whose built query is STATICALLY invalid against the active session
-     * schema (unknown collection, non-filterable filter/sort field) — the canvas
-     * then shows a visible notice above the block instead of an empty grid that
-     * is indistinguishable from "no content yet". `null` = healthy (or no listing).
+     * EC-460 (never-silent) / EC-581 6a: why a runnable listing query is STATICALLY
+     * invalid against the active session schema (unknown collection, non-filterable
+     * filter/sort field) — localized messages, or `null` when it can run. The render
+     * context judges the declaration itself and shows the notice above the block —
+     * the same judgment the delivery host reads from its baked refusals.
      */
-    listingIssueOf(node: ComponentNode): string | null;
+    listingFailure(query: ListingQuery): readonly string[] | null;
 }
 /**
- * The canvas notice for a listing node that cannot run, or `null` (EC-460, the
- * never-silent rule). Reads the shared `nodeListingOf` — the same reader the
- * renderer and the delivery host use — so notice and resolution never disagree
- * about WHICH query was judged. EC-581 6a: a declaration the registry rejected
- * (`invalid-listing`) shows its registration issue; a runnable query is judged by
- * `validate` (the session schema's `validateWhere`/`validateSort`/`validateLimit`);
- * a listing awaiting its bound value keeps the block's own empty state. Pure,
- * exported for the node test.
+ * The session schema's verdict on a listing query, localized (EC-494:
+ * `ContentQueryError` carries a catalog ref) — the canvas's `listingFailure` source.
+ */
+export declare function sessionListingFailure(validate: (query: ListingQuery) => readonly ContentQueryError[]): (query: ListingQuery) => readonly string[] | null;
+/**
+ * The canvas notice text for a listing node that cannot run, or `null` (EC-460, the
+ * never-silent rule) — core's ONE judgment (`listingFailureOf`: the registry's verdict
+ * on the declaration, then `validate`'s on the built query; a listing awaiting its
+ * bound value keeps the block's own empty state). Pure, exported for the node test.
  */
 export declare function canvasListingIssue(node: ComponentNode, registry: RenderContext['registry'], validate: (query: ListingQuery) => readonly ContentQueryError[]): string | null;
 /**
- * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce
- * the same context, so the decorator's wrapper markup is pinnable in tests.
+ * Assemble the canvas `RenderContext` — core's ONE `createRenderContext` over the live
+ * source, `mode: 'canvas'`, with the editor's decoration. Pure (no hooks): the same
+ * deps produce the same context, so the decorator's wrapper markup is pinnable.
  */
 export declare function createCanvasRenderContext(deps: CanvasRenderContextDeps): RenderContext;
 /**
@@ -84,8 +92,8 @@ export declare function createCanvasRenderContext(deps: CanvasRenderContextDeps)
  * only and drop `meta` — so a component's AI badge (`meta.aiGenerated`) and an
  * editor-set `meta.alt` rendered on the site but not on the canvas. One reader
  * (`resolvedAsset`, `content/assets.ts`) means the canvas and the host cannot
- * disagree about an asset's own facts; `RenderAsset` is a subset of
- * `ResolvedAsset`, `lqip` included. Pure, exported for the node test.
+ * disagree about an asset's own facts; `RenderAsset` IS `ResolvedAsset` (EC-587 —
+ * one resolved shape in every position). Pure, exported for the node test.
  */
 export declare function canvasRenderAsset(record: AssetRecord | undefined): RenderAsset | null;
 export declare function useCanvasRenderContext(args: {
@@ -94,7 +102,7 @@ export declare function useCanvasRenderContext(args: {
     selectedId: string | null;
     hoveredId: string | null;
     studio: StudioRegistry;
-    perspective: CanvasPerspective;
+    perspective: Perspective;
     richEditEpochs: Record<string, number>;
 }): {
     ctx: RenderContext;

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

@@ -1,7 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core';
 import { resolvedAsset } from '@elytracms/core/content';
-import { nodeListingOf } from '@elytracms/core/runtime-renderer';
+import { createRenderContext, listingFailureOf } from '@elytracms/core/runtime-renderer';
 import { translate } from '@elytracms/studio/lib/i18n';
 import { contentQueryErrorMessage } from '@elytracms/studio/lib/persona/labels';
 import { acquireContentSessionConsumer, contentSessionEpoch, resolveCanvasLink, resolveCanvasListing, resolveCanvasRelation, subscribeContentSession, validateCanvasListingQuery, } from '@elytracms/studio/lib/data';
@@ -47,45 +48,47 @@ export function unresolvedReuseStatus(node, capability, resolveAt, perspective)
         return null;
     if (resolveAt(ref, perspective))
         return null;
-    return resolveAt(ref, 'draft') ? 'unpublished' : 'missing';
+    return resolveAt(ref, DRAFT_PERSPECTIVE) ? 'unpublished' : 'missing';
 }
 /**
- * The canvas notice for a listing node that cannot run, or `null` (EC-460, the
- * never-silent rule). Reads the shared `nodeListingOf` — the same reader the
- * renderer and the delivery host use — so notice and resolution never disagree
- * about WHICH query was judged. EC-581 6a: a declaration the registry rejected
- * (`invalid-listing`) shows its registration issue; a runnable query is judged by
- * `validate` (the session schema's `validateWhere`/`validateSort`/`validateLimit`);
- * a listing awaiting its bound value keeps the block's own empty state. Pure,
- * exported for the node test.
+ * The session schema's verdict on a listing query, localized (EC-494:
+ * `ContentQueryError` carries a catalog ref) — the canvas's `listingFailure` source.
+ */
+export function sessionListingFailure(validate) {
+    return (query) => {
+        const errors = validate(query);
+        return errors.length === 0 ? null : errors.map((error) => contentQueryErrorMessage(error));
+    };
+}
+/**
+ * The canvas notice text for a listing node that cannot run, or `null` (EC-460, the
+ * never-silent rule) — core's ONE judgment (`listingFailureOf`: the registry's verdict
+ * on the declaration, then `validate`'s on the built query; a listing awaiting its
+ * bound value keeps the block's own empty state). Pure, exported for the node test.
  */
 export function canvasListingIssue(node, registry, validate) {
-    const manifest = registry.getManifest(node.componentId);
-    if (!manifest)
-        return null;
-    const listing = nodeListingOf(node, manifest, registry);
-    if (!listing || listing.state === 'awaiting')
-        return null;
-    if (listing.state === 'invalid')
-        return listing.messages.join(' ');
-    const errors = validate(listing.query);
-    if (errors.length === 0)
-        return null;
-    // EC-494: `ContentQueryError` carries a catalog ref, so this notice localizes.
-    return errors.map((error) => contentQueryErrorMessage(error)).join(' ');
+    const failure = listingFailureOf(node, registry, { listingFailure: sessionListingFailure(validate) });
+    return failure ? failure.join(' ') : null;
 }
 /**
- * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce
- * the same context, so the decorator's wrapper markup is pinnable in tests.
+ * Assemble the canvas `RenderContext` — core's ONE `createRenderContext` over the live
+ * source, `mode: 'canvas'`, with the editor's decoration. Pure (no hooks): the same
+ * deps produce the same context, so the decorator's wrapper markup is pinnable.
  */
 export function createCanvasRenderContext(deps) {
-    return {
-        registry: deps.registry,
-        implementations: deps.implementations,
-        resolveAsset: deps.resolveAsset,
-        resolveRelation: deps.resolveRelation,
-        resolveListing: deps.resolveListing,
-        resolveLink: deps.resolveLink,
+    return createRenderContext({
+        components: { registry: deps.registry, implementations: deps.implementations },
+        mode: 'canvas',
+        source: {
+            resolveAsset: deps.resolveAsset,
+            resolveRelation: deps.resolveRelation,
+            resolveListing: deps.resolveListing,
+            resolveLink: deps.resolveLink,
+            listingFailure: deps.listingFailure,
+        },
+        // EC-460: a listing that cannot run gets the canvas's own (chrome-styled,
+        // localized) notice ABOVE the block, which keeps its empty state below.
+        listingNotice: (_node, messages) => _jsx(CanvasListingIssueNotice, { message: messages.join(' ') }),
         decorateNode: (node, rendered) => {
             if (!deps.pageNodeIds.has(node.id))
                 return rendered;
@@ -93,12 +96,9 @@ export function createCanvasRenderContext(deps) {
             // transclusion; the node stays selectable, so its inspector relation chip
             // (EC-296) deep-links to the reusable to edit/publish it.
             const unresolved = deps.unresolvedReuse(node);
-            // EC-460: a config-invalid listing query gets a visible notice ABOVE the
-            // block (which keeps its own empty state below) — never a silent empty grid.
-            const listingIssue = deps.listingIssueOf(node);
-            return (_jsx("div", { "data-ec-node-id": node.id, className: "ec-editable", "data-selected": node.id === deps.selectedId || undefined, "data-hovered": node.id === deps.hoveredId || undefined, children: unresolved ? (_jsx(UnresolvedReusablePlaceholder, { status: unresolved })) : (_jsxs(_Fragment, { children: [listingIssue !== null ? _jsx(CanvasListingIssueNotice, { message: listingIssue }) : null, rendered] })) }, `${node.id}#${deps.richEditEpochs[node.id] ?? 0}`));
+            return (_jsx("div", { "data-ec-node-id": node.id, className: "ec-editable", "data-selected": node.id === deps.selectedId || undefined, "data-hovered": node.id === deps.hoveredId || undefined, children: unresolved ? _jsx(UnresolvedReusablePlaceholder, { status: unresolved }) : rendered }, `${node.id}#${deps.richEditEpochs[node.id] ?? 0}`));
         },
-    };
+    });
 }
 /**
  * The live canvas render context: binds the pure factory to the studio's
@@ -112,8 +112,8 @@ export function createCanvasRenderContext(deps) {
  * only and drop `meta` — so a component's AI badge (`meta.aiGenerated`) and an
  * editor-set `meta.alt` rendered on the site but not on the canvas. One reader
  * (`resolvedAsset`, `content/assets.ts`) means the canvas and the host cannot
- * disagree about an asset's own facts; `RenderAsset` is a subset of
- * `ResolvedAsset`, `lqip` included. Pure, exported for the node test.
+ * disagree about an asset's own facts; `RenderAsset` IS `ResolvedAsset` (EC-587 —
+ * one resolved shape in every position). Pure, exported for the node test.
  */
 export function canvasRenderAsset(record) {
     if (!record?.url)
@@ -174,8 +174,8 @@ export function useCanvasRenderContext(args) {
     // target → null → the rich-text renderer shows the visible `unresolved-ref` issue.
     const resolveLink = useCallback((ref) => resolveCanvasLink(ref, activeLocale, perspective), [activeLocale, perspective, sessionEpoch]);
     const unresolvedReuse = useCallback((node) => unresolvedReuseStatus(node, reuse?.capability, (ref, p) => resolveCanvasRelation(ref, activeLocale, p), perspective), [reuse, activeLocale, perspective, sessionEpoch]);
-    // EC-460 (never-silent): flag a listing that cannot run (see `canvasListingIssue`).
-    const listingIssueOf = useCallback((node) => canvasListingIssue(node, studio.registry, (query) => validateCanvasListingQuery(query)), [studio, sessionEpoch]);
+    // EC-460 (never-silent): the session schema's verdict on a listing query.
+    const listingFailure = useMemo(() => sessionListingFailure((query) => validateCanvasListingQuery(query)), [sessionEpoch]);
     const ctx = useMemo(() => createCanvasRenderContext({
         registry: studio.registry,
         implementations: studio.implementations,
@@ -188,8 +188,8 @@ export function useCanvasRenderContext(args) {
         hoveredId,
         richEditEpochs,
         unresolvedReuse,
-        listingIssueOf,
-    }), [studio, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, richEditEpochs, listingIssueOf]);
+        listingFailure,
+    }), [studio, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, richEditEpochs, listingFailure]);
     return { ctx, pageNodeIds };
 }
 /**