@elytracms/studio 0.0.92 → 0.0.93

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

@@ -1 +1 @@
-{"version":3,"file":"canvas-render-context.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-render-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'\nimport { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core'\nimport type { Perspective } from '@elytracms/core/cms-core'\nimport { resolvedAsset } from '@elytracms/core/content'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport { nodeListingOf } from '@elytracms/core/runtime-renderer'\nimport type {\n  ListingQuery,\n  RenderAsset,\n  RenderContext,\n  ResolveAsset,\n  ResolveLink,\n  ResolveListing,\n  ResolveRelation,\n} from '@elytracms/core/runtime-renderer'\nimport type { ContentQueryError } from '@elytracms/core/content'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { contentQueryErrorMessage } from '@elytracms/studio/lib/persona/labels'\nimport {\n  acquireContentSessionConsumer,\n  contentSessionEpoch,\n  resolveCanvasLink,\n  resolveCanvasListing,\n  resolveCanvasRelation,\n  subscribeContentSession,\n  validateCanvasListingQuery,\n} from '@elytracms/studio/lib/data'\nimport { useStudioLocale } from '@elytracms/studio/lib/locale'\nimport { useOptionalAssets } from '../assets/assets-store'\nimport { useReuse } from './reuse-context'\nimport { reuseEmbedRef } from './reuse'\nimport type { ReuseCapability } from './reuse'\n\n/**\n * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the\n * injected resolvers that make the iframe preview match delivery — assets\n * (EC-195), relations (EC-254), listings (EC-255), rich-text links (EC-291) —\n * plus the per-node decorator that stamps the editable wrappers (selection/hover\n * state, rich-text remount epochs, and the EC-300 unresolved-reusable\n * placeholder). The binding resolver and the EC-176 locale-fallback chips (which\n * read bound props) went with the data-binding subsystem (EC-574).\n *\n * The context assembly is a pure factory ({@link createCanvasRenderContext})\n * over a pure decision helper ({@link unresolvedReuseStatus}), so the decoration\n * and resolver wiring are unit-testable without providers;\n * {@link useCanvasRenderContext} binds them to the live stores.\n */\n\n/** Collect every node id under a root (the page subtree). */\nexport function collectIds(node: ComponentNode, out: Set<string> = new Set()): Set<string> {\n  out.add(node.id)\n  for (const children of Object.values(node.slots ?? {})) {\n    for (const child of children) collectIds(child, out)\n  }\n  return out\n}\n\n/**\n * EC-300/AD-16: a transcluding embed whose target doesn't resolve in the active\n * perspective renders a placeholder, never an empty section. `unpublished` = the\n * target exists as a draft but isn't live (Published view of a draft-only reusable);\n * `missing` = no resolvable target at all (deleted). `null` = resolves fine, or the\n * node isn't an embed / has no target picked yet (its own empty state owns that).\n */\nexport function unresolvedReuseStatus(\n  node: ComponentNode,\n  capability: ReuseCapability | null | undefined,\n  resolveAt: (ref: { collection: string; id: string }, perspective: Perspective) => unknown,\n  perspective: Perspective,\n): 'unpublished' | 'missing' | null {\n  if (!capability) return null\n  const ref = reuseEmbedRef(node, capability)\n  if (!ref) return null\n  if (resolveAt(ref, perspective)) return null\n  return resolveAt(ref, DRAFT_PERSPECTIVE) ? 'unpublished' : 'missing'\n}\n\n/** Everything the pure context factory needs — resolvers plus decoration state. */\nexport interface CanvasRenderContextDeps {\n  registry: RenderContext['registry']\n  implementations: RenderContext['implementations']\n  resolveAsset: ResolveAsset\n  resolveRelation: ResolveRelation\n  resolveListing: ResolveListing\n  resolveLink: ResolveLink\n  /** Only page nodes are editable; layout chrome must not be decorated. */\n  pageNodeIds: ReadonlySet<string>\n  selectedId: string | null\n  hoveredId: string | null\n  /** Per-node remount epochs from the inline rich-text editing (EC-159). */\n  richEditEpochs: Record<string, number>\n  unresolvedReuse(node: ComponentNode): 'unpublished' | 'missing' | null\n  /**\n   * EC-460 (never-silent): a human-readable message when the node declares a\n   * `listing` whose built query is STATICALLY invalid against the active session\n   * schema (unknown collection, non-filterable filter/sort field) — the canvas\n   * then shows a visible notice above the block instead of an empty grid that\n   * is indistinguishable from \"no content yet\". `null` = healthy (or no listing).\n   */\n  listingIssueOf(node: ComponentNode): string | null\n}\n\n/**\n * The canvas notice for a listing node that cannot run, or `null` (EC-460, the\n * never-silent rule). Reads the shared `nodeListingOf` — the same reader the\n * renderer and the delivery host use — so notice and resolution never disagree\n * about WHICH query was judged. EC-581 6a: a declaration the registry rejected\n * (`invalid-listing`) shows its registration issue; a runnable query is judged by\n * `validate` (the session schema's `validateWhere`/`validateSort`/`validateLimit`);\n * a listing awaiting its bound value keeps the block's own empty state. Pure,\n * exported for the node test.\n */\nexport function canvasListingIssue(\n  node: ComponentNode,\n  registry: RenderContext['registry'],\n  validate: (query: ListingQuery) => readonly ContentQueryError[],\n): string | null {\n  const manifest = registry.getManifest(node.componentId)\n  if (!manifest) return null\n  const listing = nodeListingOf(node, manifest, registry)\n  if (!listing || listing.state === 'awaiting') return null\n  if (listing.state === 'invalid') return listing.messages.join(' ')\n  const errors = validate(listing.query)\n  if (errors.length === 0) return null\n  // EC-494: `ContentQueryError` carries a catalog ref, so this notice localizes.\n  return errors.map((error) => contentQueryErrorMessage(error)).join(' ')\n}\n\n/**\n * Assemble the canvas `RenderContext`. Pure (no hooks): the same deps produce\n * the same context, so the decorator's wrapper markup is pinnable in tests.\n */\nexport function createCanvasRenderContext(deps: CanvasRenderContextDeps): RenderContext {\n  return {\n    registry: deps.registry,\n    implementations: deps.implementations,\n    resolveAsset: deps.resolveAsset,\n    resolveRelation: deps.resolveRelation,\n    resolveListing: deps.resolveListing,\n    resolveLink: deps.resolveLink,\n    decorateNode: (node, rendered) => {\n      if (!deps.pageNodeIds.has(node.id)) return rendered\n      // An unresolved hard reference shows the placeholder in place of the empty\n      // transclusion; the node stays selectable, so its inspector relation chip\n      // (EC-296) deep-links to the reusable to edit/publish it.\n      const unresolved = deps.unresolvedReuse(node)\n      // EC-460: a config-invalid listing query gets a visible notice ABOVE the\n      // block (which keeps its own empty state below) — never a silent empty grid.\n      const listingIssue = deps.listingIssueOf(node)\n      return (\n        <div\n          // The epoch suffix forces a remount after a rich-text editing\n          // session mutated this node's rendered DOM (see richEditEpochs).\n          key={`${node.id}#${deps.richEditEpochs[node.id] ?? 0}`}\n          data-ec-node-id={node.id}\n          className=\"ec-editable\"\n          data-selected={node.id === deps.selectedId || undefined}\n          data-hovered={node.id === deps.hoveredId || undefined}\n        >\n          {unresolved ? (\n            <UnresolvedReusablePlaceholder status={unresolved} />\n          ) : (\n            <>\n              {listingIssue !== null ? <CanvasListingIssueNotice message={listingIssue} /> : null}\n              {rendered}\n            </>\n          )}\n        </div>\n      )\n    },\n  }\n}\n\n/**\n * The live canvas render context: binds the pure factory to the studio's\n * stores (asset library, content session, active locale, reuse capability) for\n * the given perspective. Returns the context plus the page-node id set the\n * canvas also needs for spacing-handle gating.\n */\n/**\n * The canvas's asset reader IS delivery's (NK-049 finding, 2026-10-23). This used to\n * hand-pick `url/width/height/alt/focalPoint`, read `alt` from the legacy column\n * only and drop `meta` — so a component's AI badge (`meta.aiGenerated`) and an\n * editor-set `meta.alt` rendered on the site but not on the canvas. One reader\n * (`resolvedAsset`, `content/assets.ts`) means the canvas and the host cannot\n * disagree about an asset's own facts; `RenderAsset` is a subset of\n * `ResolvedAsset`, `lqip` included. Pure, exported for the node test.\n */\nexport function canvasRenderAsset(record: AssetRecord | undefined): RenderAsset | null {\n  if (!record?.url) return null\n  return resolvedAsset(record, record.url)\n}\n\nexport function useCanvasRenderContext(args: {\n  /** The edited composition root (`builder.present`). */\n  present: ComponentNode\n  selectedId: string | null\n  hoveredId: string | null\n  studio: StudioRegistry\n  perspective: Perspective\n  richEditEpochs: Record<string, number>\n}): { ctx: RenderContext; pageNodeIds: ReadonlySet<string> } {\n  const { present, selectedId, hoveredId, studio, perspective, richEditEpochs } = args\n\n  // EC-460: the canvas follows the preview content session reactively. The\n  // epoch bumps whenever `configureContentSession` re-points the session (the\n  // write-sync refresh, a CMS-surface hydration, boot) — it keys the resolver\n  // callbacks below, so the context identity changes and the canvas re-renders\n  // against the fresh session. Registering as a CONSUMER tells the write-sync a\n  // preview surface is live, so a stale session actually refreshes (with no\n  // consumer it only flags — connected mode never pays a per-autosave query\n  // while nobody is previewing).\n  const sessionEpoch = useSyncExternalStore(subscribeContentSession, contentSessionEpoch)\n  useEffect(() => acquireContentSessionConsumer(), [])\n\n  // Only page nodes are editable; layout chrome (rendered around the page) is\n  // read-only context and must not be selectable (it isn't in the page tree).\n  const pageNodeIds = useMemo(() => collectIds(present), [present])\n\n  // EC-195: resolve an `asset`-typed Image prop (an asset id) from the live asset\n  // library, so the canvas previews exactly what the host renders. A record\n  // without a resolved url (e.g. a never-served seed) → null → the\n  // implementation's visible empty state.\n  const assetsStore = useOptionalAssets()\n  const resolveAsset: ResolveAsset = useCallback(\n    (assetId) => canvasRenderAsset(assetsStore?.assets.find((a) => a.id === assetId)),\n    [assetsStore],\n  )\n\n  // The canvas's active locale for relation/listing/link resolution below.\n  // EC-479: the ambient locale is `null` until a project's config is installed (it\n  // no longer opens on the engine's `en/de` fixture). `undefined` means \"you pick\" to\n  // the content engine, which then resolves in the SESSION's own default locale —\n  // never a fabricated one — so a canvas mounted outside a CMS session still previews\n  // in the project's locale.\n  const { locale } = useStudioLocale()\n  const activeLocale = locale ?? undefined\n  // EC-300: the reuse capability identifies a transcluding embed + its relation prop,\n  // so the canvas can detect a HARD reference whose target doesn't resolve and show a\n  // placeholder instead of an empty section. Null-safe (no provider / no capability).\n  const reuse = useReuse()\n\n  // EC-254: populate a block's `relation` prop (the editor's document pick — a\n  // ProductGrid's products, a Reusable's element) to delivery shape from the\n  // active content session, in the canvas's active locale, so the canvas previews\n  // picked documents exactly as the host renders them. The studio analog of the\n  // host's baked relations map. A missing/invisible target → null → the block's\n  // own empty state.\n  const resolveRelation: ResolveRelation = useCallback(\n    (ref) => resolveCanvasRelation(ref, activeLocale, perspective),\n    // sessionEpoch: re-resolve when the content session was re-pointed (EC-460).\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-255: resolve a listing block's query (a ProductGrid keyed to a category) to\n  // its documents from the active content session, in the canvas's active locale, so\n  // the canvas previews a dynamic grid exactly as the host renders it. The studio\n  // analog of the host's baked listings map; an empty/invalid query → [] → the\n  // block's own empty state.\n  const resolveListing: ResolveListing = useCallback(\n    (query) => resolveCanvasListing(query, activeLocale, perspective),\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-291: resolve a rich-text internal link (`{type:'reference'}`) to its target's\n  // URL path from the active content session, in the canvas's active locale — the\n  // studio analog of the host's baked links map. A missing/unpublished/unroutable\n  // target → null → the rich-text renderer shows the visible `unresolved-ref` issue.\n  const resolveLink: ResolveLink = useCallback(\n    (ref) => resolveCanvasLink(ref, activeLocale, perspective),\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  const unresolvedReuse = useCallback(\n    (node: ComponentNode): 'unpublished' | 'missing' | null =>\n      unresolvedReuseStatus(\n        node,\n        reuse?.capability,\n        (ref, p) => resolveCanvasRelation(ref, activeLocale, p),\n        perspective,\n      ),\n    [reuse, activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-460 (never-silent): flag a listing that cannot run (see `canvasListingIssue`).\n  const listingIssueOf = useCallback(\n    (node: ComponentNode): string | null =>\n      canvasListingIssue(node, studio.registry, (query) => validateCanvasListingQuery(query)),\n    [studio, sessionEpoch],\n  )\n\n  const ctx: RenderContext = useMemo(\n    () =>\n      createCanvasRenderContext({\n        registry: studio.registry,\n        implementations: studio.implementations,\n        resolveAsset,\n        resolveRelation,\n        resolveListing,\n        resolveLink,\n        pageNodeIds,\n        selectedId,\n        hoveredId,\n        richEditEpochs,\n        unresolvedReuse,\n        listingIssueOf,\n      }),\n    [studio, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, richEditEpochs, listingIssueOf],\n  )\n\n  return { ctx, pageNodeIds }\n}\n\n/**\n * In-canvas placeholder for a transcluding embed whose target doesn't resolve\n * (EC-300/AD-16) — shown in place of the empty section so a hard reference never\n * silently vanishes. Rendered INTO the iframe (portal), which carries only the\n * project's stylesheet, so it uses inline styles rather than studio UI classes\n * (the EC-414 AD-B chrome contract), with the `.ec-chrome` containment recipe\n * on its root. Exported for the chrome contract test. The node stays\n * selectable; the inspector's `element` relation chip (EC-296) deep-links to\n * the reusable to edit or publish it.\n */\n/**\n * In-canvas notice for a listing block whose query is statically invalid\n * against the active session schema (EC-460 — the never-silent rule): the\n * message renders ABOVE the block (which keeps its own empty state), so a\n * misdeclared `listing` manifest (non-filterable sort/filter field, unknown\n * collection) is an explicit, visible state — never an empty grid an editor\n * can't tell apart from \"no content yet\". Rendered INTO the iframe (project\n * stylesheet only), so it uses inline styles + the `.ec-chrome` containment\n * recipe, exactly like {@link UnresolvedReusablePlaceholder}. Exported for the\n * chrome contract test.\n */\nexport function CanvasListingIssueNotice({ message }: { message: string }) {\n  return (\n    <div\n      className=\"ec-chrome\"\n      data-testid=\"canvas-listing-issue\"\n      style={{\n        boxSizing: 'border-box',\n        border: '1px dashed rgba(200,140,40,0.65)',\n        borderRadius: 8,\n        padding: '10px 14px',\n        margin: '8px 16px',\n        background: 'rgba(230,160,40,0.08)',\n        color: 'rgba(120,80,10,0.95)',\n        font: '13px/1.5 system-ui, -apple-system, sans-serif',\n      }}\n    >\n      <span style={{ fontWeight: 600 }}>⚠ {translate('builder.canvas.listingInvalidTitle')}</span>{' '}\n      <span style={{ opacity: 0.9 }}>{message}</span>\n    </div>\n  )\n}\n\nexport function UnresolvedReusablePlaceholder({ status }: { status: 'unpublished' | 'missing' }) {\n  const title =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedTitle')\n      : translate('builder.canvas.reusableMissingTitle')\n  const hint =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedHint')\n      : translate('builder.canvas.reusableMissingHint')\n  return (\n    <div\n      className=\"ec-chrome\"\n      style={{\n        boxSizing: 'border-box',\n        border: '1px dashed rgba(120,120,120,0.5)',\n        borderRadius: 8,\n        padding: '24px 28px',\n        margin: '12px 16px',\n        background: 'rgba(127,127,127,0.06)',\n        color: 'rgba(90,90,90,0.95)',\n        font: '14px/1.5 system-ui, -apple-system, sans-serif',\n        textAlign: 'center',\n      }}\n    >\n      <div style={{ fontWeight: 600 }}>⚠ {title}</div>\n      <div style={{ marginTop: 6, fontSize: 13, opacity: 0.85 }}>{hint}</div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"canvas-render-context.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-render-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'\nimport { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core'\nimport type { Perspective } from '@elytracms/core/cms-core'\nimport { resolvedAsset } from '@elytracms/core/content'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport { createRenderContext, listingFailureOf } from '@elytracms/core/runtime-renderer'\nimport type {\n  ListingQuery,\n  RenderAsset,\n  RenderContext,\n  ResolveAsset,\n  ResolveLink,\n  ResolveListing,\n  ResolveRelation,\n} from '@elytracms/core/runtime-renderer'\nimport type { ContentQueryError } from '@elytracms/core/content'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { contentQueryErrorMessage } from '@elytracms/studio/lib/persona/labels'\nimport {\n  acquireContentSessionConsumer,\n  contentSessionEpoch,\n  resolveCanvasLink,\n  resolveCanvasListing,\n  resolveCanvasRelation,\n  subscribeContentSession,\n  validateCanvasListingQuery,\n} from '@elytracms/studio/lib/data'\nimport { useStudioLocale } from '@elytracms/studio/lib/locale'\nimport { useOptionalAssets } from '../assets/assets-store'\nimport { useReuse } from './reuse-context'\nimport { reuseEmbedRef } from './reuse'\nimport type { ReuseCapability } from './reuse'\n\n/**\n * The canvas's `RenderContext` (EC-330, extracted from `BuilderCanvas`): the\n * injected resolvers that make the iframe preview match delivery — assets\n * (EC-195), relations (EC-254), listings (EC-255), rich-text links (EC-291) —\n * plus the per-node decorator that stamps the editable wrappers (selection/hover\n * state, rich-text remount epochs, and the EC-300 unresolved-reusable\n * placeholder). The binding resolver and the EC-176 locale-fallback chips (which\n * read bound props) went with the data-binding subsystem (EC-574).\n *\n * The context assembly is a pure factory ({@link createCanvasRenderContext})\n * over a pure decision helper ({@link unresolvedReuseStatus}), so the decoration\n * and resolver wiring are unit-testable without providers;\n * {@link useCanvasRenderContext} binds them to the live stores.\n */\n\n/** Collect every node id under a root (the page subtree). */\nexport function collectIds(node: ComponentNode, out: Set<string> = new Set()): Set<string> {\n  out.add(node.id)\n  for (const children of Object.values(node.slots ?? {})) {\n    for (const child of children) collectIds(child, out)\n  }\n  return out\n}\n\n/**\n * EC-300/AD-16: a transcluding embed whose target doesn't resolve in the active\n * perspective renders a placeholder, never an empty section. `unpublished` = the\n * target exists as a draft but isn't live (Published view of a draft-only reusable);\n * `missing` = no resolvable target at all (deleted). `null` = resolves fine, or the\n * node isn't an embed / has no target picked yet (its own empty state owns that).\n */\nexport function unresolvedReuseStatus(\n  node: ComponentNode,\n  capability: ReuseCapability | null | undefined,\n  resolveAt: (ref: { collection: string; id: string }, perspective: Perspective) => unknown,\n  perspective: Perspective,\n): 'unpublished' | 'missing' | null {\n  if (!capability) return null\n  const ref = reuseEmbedRef(node, capability)\n  if (!ref) return null\n  if (resolveAt(ref, perspective)) return null\n  return resolveAt(ref, DRAFT_PERSPECTIVE) ? 'unpublished' : 'missing'\n}\n\n/**\n * Everything the pure context factory needs — the live SOURCE (resolvers over the\n * content session, and the session schema's verdict on a listing query) plus the\n * editor's decoration state. EC-592: the factory is a call of core's ONE\n * `createRenderContext` (`mode: 'canvas'`) — the delivery host calls the same one\n * over its baked source.\n */\nexport interface CanvasRenderContextDeps {\n  registry: RenderContext['registry']\n  implementations: RenderContext['implementations']\n  resolveAsset: ResolveAsset\n  resolveRelation: ResolveRelation\n  resolveListing: ResolveListing\n  resolveLink: ResolveLink\n  /** Only page nodes are editable; layout chrome must not be decorated. */\n  pageNodeIds: ReadonlySet<string>\n  selectedId: string | null\n  hoveredId: string | null\n  /** Per-node remount epochs from the inline rich-text editing (EC-159). */\n  richEditEpochs: Record<string, number>\n  unresolvedReuse(node: ComponentNode): 'unpublished' | 'missing' | null\n  /**\n   * EC-460 (never-silent) / EC-581 6a: why a runnable listing query is STATICALLY\n   * invalid against the active session schema (unknown collection, non-filterable\n   * filter/sort field) — localized messages, or `null` when it can run. The render\n   * context judges the declaration itself and shows the notice above the block —\n   * the same judgment the delivery host reads from its baked refusals.\n   */\n  listingFailure(query: ListingQuery): readonly string[] | null\n}\n\n/**\n * The session schema's verdict on a listing query, localized (EC-494:\n * `ContentQueryError` carries a catalog ref) — the canvas's `listingFailure` source.\n */\nexport function sessionListingFailure(\n  validate: (query: ListingQuery) => readonly ContentQueryError[],\n): (query: ListingQuery) => readonly string[] | null {\n  return (query) => {\n    const errors = validate(query)\n    return errors.length === 0 ? null : errors.map((error) => contentQueryErrorMessage(error))\n  }\n}\n\n/**\n * The canvas notice text for a listing node that cannot run, or `null` (EC-460, the\n * never-silent rule) — core's ONE judgment (`listingFailureOf`: the registry's verdict\n * on the declaration, then `validate`'s on the built query; a listing awaiting its\n * bound value keeps the block's own empty state). Pure, exported for the node test.\n */\nexport function canvasListingIssue(\n  node: ComponentNode,\n  registry: RenderContext['registry'],\n  validate: (query: ListingQuery) => readonly ContentQueryError[],\n): string | null {\n  const failure = listingFailureOf(node, registry, { listingFailure: sessionListingFailure(validate) })\n  return failure ? failure.join(' ') : null\n}\n\n/**\n * Assemble the canvas `RenderContext` — core's ONE `createRenderContext` over the live\n * source, `mode: 'canvas'`, with the editor's decoration. Pure (no hooks): the same\n * deps produce the same context, so the decorator's wrapper markup is pinnable.\n */\nexport function createCanvasRenderContext(deps: CanvasRenderContextDeps): RenderContext {\n  return createRenderContext({\n    components: { registry: deps.registry, implementations: deps.implementations },\n    mode: 'canvas',\n    source: {\n      resolveAsset: deps.resolveAsset,\n      resolveRelation: deps.resolveRelation,\n      resolveListing: deps.resolveListing,\n      resolveLink: deps.resolveLink,\n      listingFailure: deps.listingFailure,\n    },\n    // EC-460: a listing that cannot run gets the canvas's own (chrome-styled,\n    // localized) notice ABOVE the block, which keeps its empty state below.\n    listingNotice: (_node, messages) => <CanvasListingIssueNotice message={messages.join(' ')} />,\n    decorateNode: (node, rendered) => {\n      if (!deps.pageNodeIds.has(node.id)) return rendered\n      // An unresolved hard reference shows the placeholder in place of the empty\n      // transclusion; the node stays selectable, so its inspector relation chip\n      // (EC-296) deep-links to the reusable to edit/publish it.\n      const unresolved = deps.unresolvedReuse(node)\n      return (\n        <div\n          // The epoch suffix forces a remount after a rich-text editing\n          // session mutated this node's rendered DOM (see richEditEpochs).\n          key={`${node.id}#${deps.richEditEpochs[node.id] ?? 0}`}\n          data-ec-node-id={node.id}\n          className=\"ec-editable\"\n          data-selected={node.id === deps.selectedId || undefined}\n          data-hovered={node.id === deps.hoveredId || undefined}\n        >\n          {unresolved ? <UnresolvedReusablePlaceholder status={unresolved} /> : rendered}\n        </div>\n      )\n    },\n  })\n}\n\n/**\n * The live canvas render context: binds the pure factory to the studio's\n * stores (asset library, content session, active locale, reuse capability) for\n * the given perspective. Returns the context plus the page-node id set the\n * canvas also needs for spacing-handle gating.\n */\n/**\n * The canvas's asset reader IS delivery's (NK-049 finding, 2026-10-23). This used to\n * hand-pick `url/width/height/alt/focalPoint`, read `alt` from the legacy column\n * only and drop `meta` — so a component's AI badge (`meta.aiGenerated`) and an\n * editor-set `meta.alt` rendered on the site but not on the canvas. One reader\n * (`resolvedAsset`, `content/assets.ts`) means the canvas and the host cannot\n * disagree about an asset's own facts; `RenderAsset` IS `ResolvedAsset` (EC-587 —\n * one resolved shape in every position). Pure, exported for the node test.\n */\nexport function canvasRenderAsset(record: AssetRecord | undefined): RenderAsset | null {\n  if (!record?.url) return null\n  return resolvedAsset(record, record.url)\n}\n\nexport function useCanvasRenderContext(args: {\n  /** The edited composition root (`builder.present`). */\n  present: ComponentNode\n  selectedId: string | null\n  hoveredId: string | null\n  studio: StudioRegistry\n  perspective: Perspective\n  richEditEpochs: Record<string, number>\n}): { ctx: RenderContext; pageNodeIds: ReadonlySet<string> } {\n  const { present, selectedId, hoveredId, studio, perspective, richEditEpochs } = args\n\n  // EC-460: the canvas follows the preview content session reactively. The\n  // epoch bumps whenever `configureContentSession` re-points the session (the\n  // write-sync refresh, a CMS-surface hydration, boot) — it keys the resolver\n  // callbacks below, so the context identity changes and the canvas re-renders\n  // against the fresh session. Registering as a CONSUMER tells the write-sync a\n  // preview surface is live, so a stale session actually refreshes (with no\n  // consumer it only flags — connected mode never pays a per-autosave query\n  // while nobody is previewing).\n  const sessionEpoch = useSyncExternalStore(subscribeContentSession, contentSessionEpoch)\n  useEffect(() => acquireContentSessionConsumer(), [])\n\n  // Only page nodes are editable; layout chrome (rendered around the page) is\n  // read-only context and must not be selectable (it isn't in the page tree).\n  const pageNodeIds = useMemo(() => collectIds(present), [present])\n\n  // EC-195: resolve an `asset`-typed Image prop (an asset id) from the live asset\n  // library, so the canvas previews exactly what the host renders. A record\n  // without a resolved url (e.g. a never-served seed) → null → the\n  // implementation's visible empty state.\n  const assetsStore = useOptionalAssets()\n  const resolveAsset: ResolveAsset = useCallback(\n    (assetId) => canvasRenderAsset(assetsStore?.assets.find((a) => a.id === assetId)),\n    [assetsStore],\n  )\n\n  // The canvas's active locale for relation/listing/link resolution below.\n  // EC-479: the ambient locale is `null` until a project's config is installed (it\n  // no longer opens on the engine's `en/de` fixture). `undefined` means \"you pick\" to\n  // the content engine, which then resolves in the SESSION's own default locale —\n  // never a fabricated one — so a canvas mounted outside a CMS session still previews\n  // in the project's locale.\n  const { locale } = useStudioLocale()\n  const activeLocale = locale ?? undefined\n  // EC-300: the reuse capability identifies a transcluding embed + its relation prop,\n  // so the canvas can detect a HARD reference whose target doesn't resolve and show a\n  // placeholder instead of an empty section. Null-safe (no provider / no capability).\n  const reuse = useReuse()\n\n  // EC-254: populate a block's `relation` prop (the editor's document pick — a\n  // ProductGrid's products, a Reusable's element) to delivery shape from the\n  // active content session, in the canvas's active locale, so the canvas previews\n  // picked documents exactly as the host renders them. The studio analog of the\n  // host's baked relations map. A missing/invisible target → null → the block's\n  // own empty state.\n  const resolveRelation: ResolveRelation = useCallback(\n    (ref) => resolveCanvasRelation(ref, activeLocale, perspective),\n    // sessionEpoch: re-resolve when the content session was re-pointed (EC-460).\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-255: resolve a listing block's query (a ProductGrid keyed to a category) to\n  // its documents from the active content session, in the canvas's active locale, so\n  // the canvas previews a dynamic grid exactly as the host renders it. The studio\n  // analog of the host's baked listings map; an empty/invalid query → [] → the\n  // block's own empty state.\n  const resolveListing: ResolveListing = useCallback(\n    (query) => resolveCanvasListing(query, activeLocale, perspective),\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-291: resolve a rich-text internal link (`{type:'reference'}`) to its target's\n  // URL path from the active content session, in the canvas's active locale — the\n  // studio analog of the host's baked links map. A missing/unpublished/unroutable\n  // target → null → the rich-text renderer shows the visible `unresolved-ref` issue.\n  const resolveLink: ResolveLink = useCallback(\n    (ref) => resolveCanvasLink(ref, activeLocale, perspective),\n    [activeLocale, perspective, sessionEpoch],\n  )\n\n  const unresolvedReuse = useCallback(\n    (node: ComponentNode): 'unpublished' | 'missing' | null =>\n      unresolvedReuseStatus(\n        node,\n        reuse?.capability,\n        (ref, p) => resolveCanvasRelation(ref, activeLocale, p),\n        perspective,\n      ),\n    [reuse, activeLocale, perspective, sessionEpoch],\n  )\n\n  // EC-460 (never-silent): the session schema's verdict on a listing query.\n  const listingFailure = useMemo(\n    () => sessionListingFailure((query) => validateCanvasListingQuery(query)),\n    [sessionEpoch],\n  )\n\n  const ctx: RenderContext = useMemo(\n    () =>\n      createCanvasRenderContext({\n        registry: studio.registry,\n        implementations: studio.implementations,\n        resolveAsset,\n        resolveRelation,\n        resolveListing,\n        resolveLink,\n        pageNodeIds,\n        selectedId,\n        hoveredId,\n        richEditEpochs,\n        unresolvedReuse,\n        listingFailure,\n      }),\n    [studio, resolveAsset, resolveRelation, resolveListing, resolveLink, unresolvedReuse, pageNodeIds, selectedId, hoveredId, richEditEpochs, listingFailure],\n  )\n\n  return { ctx, pageNodeIds }\n}\n\n/**\n * In-canvas placeholder for a transcluding embed whose target doesn't resolve\n * (EC-300/AD-16) — shown in place of the empty section so a hard reference never\n * silently vanishes. Rendered INTO the iframe (portal), which carries only the\n * project's stylesheet, so it uses inline styles rather than studio UI classes\n * (the EC-414 AD-B chrome contract), with the `.ec-chrome` containment recipe\n * on its root. Exported for the chrome contract test. The node stays\n * selectable; the inspector's `element` relation chip (EC-296) deep-links to\n * the reusable to edit or publish it.\n */\n/**\n * In-canvas notice for a listing block whose query is statically invalid\n * against the active session schema (EC-460 — the never-silent rule): the\n * message renders ABOVE the block (which keeps its own empty state), so a\n * misdeclared `listing` manifest (non-filterable sort/filter field, unknown\n * collection) is an explicit, visible state — never an empty grid an editor\n * can't tell apart from \"no content yet\". Rendered INTO the iframe (project\n * stylesheet only), so it uses inline styles + the `.ec-chrome` containment\n * recipe, exactly like {@link UnresolvedReusablePlaceholder}. Exported for the\n * chrome contract test.\n */\nexport function CanvasListingIssueNotice({ message }: { message: string }) {\n  return (\n    <div\n      className=\"ec-chrome\"\n      data-testid=\"canvas-listing-issue\"\n      style={{\n        boxSizing: 'border-box',\n        border: '1px dashed rgba(200,140,40,0.65)',\n        borderRadius: 8,\n        padding: '10px 14px',\n        margin: '8px 16px',\n        background: 'rgba(230,160,40,0.08)',\n        color: 'rgba(120,80,10,0.95)',\n        font: '13px/1.5 system-ui, -apple-system, sans-serif',\n      }}\n    >\n      <span style={{ fontWeight: 600 }}>⚠ {translate('builder.canvas.listingInvalidTitle')}</span>{' '}\n      <span style={{ opacity: 0.9 }}>{message}</span>\n    </div>\n  )\n}\n\nexport function UnresolvedReusablePlaceholder({ status }: { status: 'unpublished' | 'missing' }) {\n  const title =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedTitle')\n      : translate('builder.canvas.reusableMissingTitle')\n  const hint =\n    status === 'unpublished'\n      ? translate('builder.canvas.reusableUnpublishedHint')\n      : translate('builder.canvas.reusableMissingHint')\n  return (\n    <div\n      className=\"ec-chrome\"\n      style={{\n        boxSizing: 'border-box',\n        border: '1px dashed rgba(120,120,120,0.5)',\n        borderRadius: 8,\n        padding: '24px 28px',\n        margin: '12px 16px',\n        background: 'rgba(127,127,127,0.06)',\n        color: 'rgba(90,90,90,0.95)',\n        font: '14px/1.5 system-ui, -apple-system, sans-serif',\n        textAlign: 'center',\n      }}\n    >\n      <div style={{ fontWeight: 600 }}>⚠ {title}</div>\n      <div style={{ marginTop: 6, fontSize: 13, opacity: 0.85 }}>{hint}</div>\n    </div>\n  )\n}\n"]}

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

@@ -0,0 +1,45 @@
+import type { PreservedSequenceItem } from '@elytracms/core/project-graph';
+/**
+ * The canvas's typography runs (EC-549, owner-ratified 4d) — PATH-addressed items.
+ *
+ * A `blocks` value may legitimately carry loose typography (a surface switch, a
+ * transfer, an AI write, a prose-first body promoted to a canvas). Typography carries no
+ * ids (EC-500 D1), so the canvas addresses it by position: a RUN is one maximal group of
+ * consecutive typography items of the merged sequence — exactly the region delivery's
+ * body classification renders as one (`documentBodyItems`), since the merge never puts a
+ * component inside a group of preserved items. The store holds the preserved items
+ * (`BuilderState.preserved`, with their component anchors); a run is keyed by the index
+ * of its FIRST preserved item, which is stable under every component edit (they never
+ * reorder preserved items), and located in the field value by its `range` — the
+ * half-open index range of its items in the merged sequence's `content`.
+ */
+export type PreservedItem = PreservedSequenceItem<unknown>;
+/** One typography run of the merged sequence. */
+export interface CanvasRun {
+    /** The run's key: the index of its first preserved item. */
+    key: number;
+    /** Its preserved items' indices, in order. */
+    members: number[];
+    /** Its path in the merged sequence: `content[start..end)`. */
+    range: {
+        start: number;
+        end: number;
+    };
+}
+/** Every run of the merged sequence, in order. Pure. */
+export declare function canvasRuns(rootCount: number, preserved: readonly PreservedItem[]): CanvasRun[];
+/** The run whose key is `key`, or `undefined` (no such run any more). */
+export declare function runByKey(rootCount: number, preserved: readonly PreservedItem[], key: number): CanvasRun | undefined;
+/** The run that starts at sequence index `start` — what a rendered region's path names. */
+export declare function runAtPath(rootCount: number, preserved: readonly PreservedItem[], start: number): CanvasRun | undefined;
+/** The run's typography nodes, as the v2 value the inspector's rich-text editor edits. */
+export declare function runValue(preserved: readonly PreservedItem[], run: CanvasRun): {
+    version: 2;
+    content: unknown[];
+};
+/**
+ * Replace a run's items with `content` (the inspector's edit) — anchored where the run
+ * was, so the merge puts the new items in the same place. An empty `content` deletes the
+ * run. Pure; the preserved list keeps every other item byte-for-byte.
+ */
+export declare function replaceRun(preserved: readonly PreservedItem[], run: CanvasRun, content: readonly unknown[]): PreservedItem[];

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

@@ -0,0 +1,51 @@
+import { blockRootsOrigins } from '@elytracms/core/project-graph';
+/** Every run of the merged sequence, in order. Pure. */
+export function canvasRuns(rootCount, preserved) {
+    const runs = [];
+    let current = null;
+    blockRootsOrigins(rootCount, preserved).forEach((origin, position) => {
+        if (origin.kind === 'root') {
+            current = null;
+            return;
+        }
+        if (current === null) {
+            current = { key: origin.index, members: [], range: { start: position, end: position } };
+            runs.push(current);
+        }
+        current.members.push(origin.index);
+        current.range = { start: current.range.start, end: position + 1 };
+    });
+    return runs;
+}
+/** The run whose key is `key`, or `undefined` (no such run any more). */
+export function runByKey(rootCount, preserved, key) {
+    return canvasRuns(rootCount, preserved).find((run) => run.key === key);
+}
+/** The run that starts at sequence index `start` — what a rendered region's path names. */
+export function runAtPath(rootCount, preserved, start) {
+    return canvasRuns(rootCount, preserved).find((run) => run.range.start === start);
+}
+/** The run's typography nodes, as the v2 value the inspector's rich-text editor edits. */
+export function runValue(preserved, run) {
+    return { version: 2, content: run.members.map((index) => preserved[index].node) };
+}
+/**
+ * Replace a run's items with `content` (the inspector's edit) — anchored where the run
+ * was, so the merge puts the new items in the same place. An empty `content` deletes the
+ * run. Pure; the preserved list keeps every other item byte-for-byte.
+ */
+export function replaceRun(preserved, run, content) {
+    const first = run.members[0];
+    const anchor = preserved[first].componentPrefix;
+    const members = new Set(run.members);
+    const out = [];
+    preserved.forEach((item, index) => {
+        if (index === first)
+            for (const node of content)
+                out.push({ node, componentPrefix: anchor });
+        if (!members.has(index))
+            out.push(item);
+    });
+    return out;
+}
+//# sourceMappingURL=canvas-runs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-runs.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-runs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AA8BjE,wDAAwD;AACxD,MAAM,UAAU,UAAU,CAAC,SAAiB,EAAE,SAAmC;IAC/E,MAAM,IAAI,GAAgB,EAAE,CAAA;IAC5B,IAAI,OAAO,GAAqB,IAAI,CAAA;IACpC,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;QACnE,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC3B,OAAO,GAAG,IAAI,CAAA;YACd,OAAM;QACR,CAAC;QACD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAA;YACvF,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACpB,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAClC,OAAO,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,GAAG,CAAC,EAAE,CAAA;IACnE,CAAC,CAAC,CAAA;IACF,OAAO,IAAI,CAAA;AACb,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,QAAQ,CAAC,SAAiB,EAAE,SAAmC,EAAE,GAAW;IAC1F,OAAO,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;AACxE,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,SAAS,CAAC,SAAiB,EAAE,SAAmC,EAAE,KAAa;IAC7F,OAAO,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;AAClF,CAAC;AAED,0FAA0F;AAC1F,MAAM,UAAU,QAAQ,CAAC,SAAmC,EAAE,GAAc;IAC1E,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAE,CAAC,IAAI,CAAC,EAAE,CAAA;AACpF,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,SAAmC,EAAE,GAAc,EAAE,OAA2B;IACzG,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAE,CAAC,eAAe,CAAA;IAChD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,GAAG,GAAoB,EAAE,CAAA;IAC/B,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAChC,IAAI,KAAK,KAAK,KAAK;YAAE,KAAK,MAAM,IAAI,IAAI,OAAO;gBAAE,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAA;QAC5F,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAA;AACZ,CAAC","sourcesContent":["import { blockRootsOrigins } from '@elytracms/core/project-graph'\nimport type { PreservedSequenceItem } from '@elytracms/core/project-graph'\n\n/**\n * The canvas's typography runs (EC-549, owner-ratified 4d) — PATH-addressed items.\n *\n * A `blocks` value may legitimately carry loose typography (a surface switch, a\n * transfer, an AI write, a prose-first body promoted to a canvas). Typography carries no\n * ids (EC-500 D1), so the canvas addresses it by position: a RUN is one maximal group of\n * consecutive typography items of the merged sequence — exactly the region delivery's\n * body classification renders as one (`documentBodyItems`), since the merge never puts a\n * component inside a group of preserved items. The store holds the preserved items\n * (`BuilderState.preserved`, with their component anchors); a run is keyed by the index\n * of its FIRST preserved item, which is stable under every component edit (they never\n * reorder preserved items), and located in the field value by its `range` — the\n * half-open index range of its items in the merged sequence's `content`.\n */\n\nexport type PreservedItem = PreservedSequenceItem<unknown>\n\n/** One typography run of the merged sequence. */\nexport interface CanvasRun {\n  /** The run's key: the index of its first preserved item. */\n  key: number\n  /** Its preserved items' indices, in order. */\n  members: number[]\n  /** Its path in the merged sequence: `content[start..end)`. */\n  range: { start: number; end: number }\n}\n\n/** Every run of the merged sequence, in order. Pure. */\nexport function canvasRuns(rootCount: number, preserved: readonly PreservedItem[]): CanvasRun[] {\n  const runs: CanvasRun[] = []\n  let current: CanvasRun | null = null\n  blockRootsOrigins(rootCount, preserved).forEach((origin, position) => {\n    if (origin.kind === 'root') {\n      current = null\n      return\n    }\n    if (current === null) {\n      current = { key: origin.index, members: [], range: { start: position, end: position } }\n      runs.push(current)\n    }\n    current.members.push(origin.index)\n    current.range = { start: current.range.start, end: position + 1 }\n  })\n  return runs\n}\n\n/** The run whose key is `key`, or `undefined` (no such run any more). */\nexport function runByKey(rootCount: number, preserved: readonly PreservedItem[], key: number): CanvasRun | undefined {\n  return canvasRuns(rootCount, preserved).find((run) => run.key === key)\n}\n\n/** The run that starts at sequence index `start` — what a rendered region's path names. */\nexport function runAtPath(rootCount: number, preserved: readonly PreservedItem[], start: number): CanvasRun | undefined {\n  return canvasRuns(rootCount, preserved).find((run) => run.range.start === start)\n}\n\n/** The run's typography nodes, as the v2 value the inspector's rich-text editor edits. */\nexport function runValue(preserved: readonly PreservedItem[], run: CanvasRun): { version: 2; content: unknown[] } {\n  return { version: 2, content: run.members.map((index) => preserved[index]!.node) }\n}\n\n/**\n * Replace a run's items with `content` (the inspector's edit) — anchored where the run\n * was, so the merge puts the new items in the same place. An empty `content` deletes the\n * run. Pure; the preserved list keeps every other item byte-for-byte.\n */\nexport function replaceRun(preserved: readonly PreservedItem[], run: CanvasRun, content: readonly unknown[]): PreservedItem[] {\n  const first = run.members[0]!\n  const anchor = preserved[first]!.componentPrefix\n  const members = new Set(run.members)\n  const out: PreservedItem[] = []\n  preserved.forEach((item, index) => {\n    if (index === first) for (const node of content) out.push({ node, componentPrefix: anchor })\n    if (!members.has(index)) out.push(item)\n  })\n  return out\n}\n"]}

package/dist/components/builder/canvas.js

@@ -1,7 +1,7 @@
 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, setEditingMarkers } from '@elytracms/core/runtime-renderer';
+import { setEditingMarkers } from '@elytracms/core/runtime-renderer';
 import { getNode } from '@elytracms/core/project-graph';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
@@ -22,6 +22,7 @@ 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 { renderCanvasBody } from './canvas-body.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
@@ -55,6 +56,8 @@ export function BuilderCanvas({ perspective = DRAFT_PERSPECTIVE, } = {}) {
     presentRef.current = builder.present;
     const selectedIdRef = useRef(builder.selectedId);
     selectedIdRef.current = builder.selectedId;
+    const selectedRunRef = useRef(builder.selectedRun);
+    selectedRunRef.current = builder.selectedRun;
     // EC-414 AD-D: the settled canvas-theme classification (legacy merged shape /
     // broken stylesheet) drives the dev-only, never-blocking notice overlay.
     const [themeStatus, setThemeStatus] = useState(null);
@@ -108,6 +111,15 @@ export function BuilderCanvas({ perspective = DRAFT_PERSPECTIVE, } = {}) {
             // Clicks inside the active inline editor are caret moves, not selection.
             if (editingRef.current?.host.contains(e.target))
                 return;
+            // EC-549: the NEAREST canvas item is either a block (`data-ec-node-id`) or a
+            // typography run (`data-ec-run`, path-addressed) — a run selects as a run.
+            const item = e.target?.closest?.('[data-ec-run],[data-ec-node-id]');
+            const runKey = item?.getAttribute('data-ec-run');
+            if (runKey != null) {
+                e.preventDefault();
+                dispatch({ type: 'selectRun', run: Number(runKey) });
+                return;
+            }
             const wrapper = wrapperAt(e.target);
             if (!wrapper)
                 return;
@@ -144,7 +156,7 @@ export function BuilderCanvas({ perspective = DRAFT_PERSPECTIVE, } = {}) {
     }, [doc, dispatch, editingRef, presentRef, studio]);
     // Drag & drop on the canvas (EC-160/EC-162) — see `canvas-dnd`.
     // EC-554: the field's top-level `allow` rides with the store (`builder.field`).
-    useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef, fieldAllow: builder.field.allow });
+    useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef, placement: builder.placement });
     // Copy/cut/paste on the canvas (EC-175): the same studio clipboard the page
     // tree and blocks panel use, wired to the *iframe* document (events never
     // cross frames). Shortcuts stay inert while an inline editor is live and in
@@ -172,6 +184,14 @@ export function BuilderCanvas({ perspective = DRAFT_PERSPECTIVE, } = {}) {
             getSelectedId: () => selectedIdRef.current,
             remove: (id) => dispatch({ type: 'remove', id }),
             getRootId: () => presentRef.current.id,
+            // EC-549: a selected typography run deletes as a run (one undo restores it).
+            removeSelectedRun: () => {
+                const run = selectedRunRef.current;
+                if (run === null)
+                    return false;
+                dispatch({ type: 'removeRun', run });
+                return true;
+            },
         });
     }, [doc, dispatch]);
     // The render context: the seven delivery-parity resolvers + the editable-
@@ -199,9 +219,16 @@ export function BuilderCanvas({ perspective = DRAFT_PERSPECTIVE, } = {}) {
     const { viewports } = useCanvasViewports();
     return (_jsxs("div", { className: "canvas-grid relative flex min-h-0 flex-1 items-stretch justify-center overflow-auto p-6", children: [_jsx(ClipboardNoticeOverlay, {}), _jsx(CanvasThemeNotice, { status: themeStatus }), _jsxs("div", { style: { width: viewportWidth(viewports, builder.viewport), maxWidth: '100%' }, className: "flex", children: [_jsx("iframe", { ref: iframeRef, onLoad: wireUp, title: translate('builder.canvas.pagePreview'), className: "min-h-[480px] w-full rounded-lg border border-border bg-background shadow-md", srcDoc: "<!doctype html><html><head></head><body></body></html>" }), doc
                         ? createPortal(
-                        // Render the composition root directly (EC-287: no layout
-                        // indirection — a page renders its blocks).
-                        renderPageComposition(activeRoot, ctx), doc.body)
+                        // EC-592 + EC-549: the FIELD VALUE through delivery's one entry point —
+                        // blocks as bare siblings, typography runs in their true positions —
+                        // inside the decorated (never rendered) synthetic root.
+                        renderCanvasBody({
+                            root: activeRoot,
+                            preserved: builder.preserved,
+                            ctx,
+                            selectedId: builder.selectedId,
+                            selectedRun: builder.selectedRun,
+                        }), doc.body)
                         : 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, setEditingMarkers } from '@elytracms/core/runtime-renderer'\nimport { getNode } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core'\nimport type { Perspective } from '@elytracms/core/cms-core'\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_PERSPECTIVE,\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `DRAFT_PERSPECTIVE` (a just-made reusable shows immediately); the\n   *  read-only Published view passes `'published'` (honest preview of what delivery\n   *  serves). */\n  perspective?: Perspective\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  // 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    // the consumer's `defineStudio({ canvas })` theme (EC-389, injected LAST so\n    // it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [])\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  // EC-554: the field's top-level `allow` rides with the store (`builder.field`).\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef, fieldAllow: builder.field.allow })\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, builder.layout) && 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"]}
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAA;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,iFAAiF;AACjF,sEAAsE;AACtE,iFAAiF;AACjF,8EAA8E;AAC9E,wEAAwE;AACxE,iBAAiB,CAAC,IAAI,CAAC,CAAA;AAGvB;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,WAAW,GAAG,iBAAiB,MAO7B,EAAE;IACJ,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;IAC5B,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAElC,gFAAgF;IAChF,6EAA6E;IAC7E,uDAAuD;IACvD,MAAM,UAAU,GAAkB,OAAO,CAAC,OAAO,CAAA;IACjD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAA;IAErD,0EAA0E;IAC1E,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAA;IACpC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;IAChD,aAAa,CAAC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAA;IAC1C,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;IAClD,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC,WAAW,CAAA;IAE5C,8EAA8E;IAC9E,yEAAyE;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAA;IAE9E,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,eAAe,CAAA;QAC5C,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YAAE,OAAM;QACzB,wEAAwE;QACxE,2EAA2E;QAC3E,0EAA0E;QAC1E,gEAAgE;QAChE,qEAAqE;QACrE,sEAAsE;QACtE,2EAA2E;QAC3E,wEAAwE;QACxE,0EAA0E;QAC1E,sEAAsE;QACtE,2EAA2E;QAC3E,yEAAyE;QACzE,4EAA4E;QAC5E,kDAAkD;QAClD,0CAA0C;QAC1C,gBAAgB,CAAC,CAAC,EAAE;YAClB,aAAa,EAAE,sBAAsB,EAAE;YACvC,KAAK,EAAE,4BAA4B,EAAE;YACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CACnB,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACzE,CAAC,CAAA;QACF,MAAM,CAAC,CAAC,CAAC,CAAA;IACX,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,eAAe,EAAE,UAAU,KAAK,UAAU;YAAE,MAAM,EAAE,CAAA;IAC7E,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,0EAA0E;IAC1E,qEAAqE;IACrE,6DAA6D;IAC7D,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAA;IAC5E,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IAEpE,2EAA2E;IAC3E,uEAAuE;IACvE,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;IACpC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAA;IAE9B,+DAA+D;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,yEAAyE;YACzE,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAM;YAC/D,6EAA6E;YAC7E,2EAA2E;YAC3E,MAAM,IAAI,GAAI,CAAC,CAAC,MAAyB,EAAE,OAAO,EAAE,CAAC,iCAAiC,CAAC,CAAA;YACvF,MAAM,MAAM,GAAG,IAAI,EAAE,YAAY,CAAC,aAAa,CAAC,CAAA;YAChD,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACnB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;gBACpD,OAAM;YACR,CAAC;YACD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;YACnC,IAAI,CAAC,OAAO;gBAAE,OAAM;YACpB,MAAM,EAAE,GAAG,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAE,CAAA;YACnD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;YAChC,4EAA4E;YAC5E,0EAA0E;YAC1E,4EAA4E;YAC5E,oEAAoE;YACpE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,IAAI;gBAAE,OAAM;YACjB,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YACjF,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,gBAAgB,CAAC;gBAChD,MAAM,EAAE,CAAC,CAAC,MAAwB;gBAClC,OAAO;gBACP,QAAQ;aACT,CAAC,CAAA;YACF,IAAI,QAAQ,IAAI,UAAU;gBAAE,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAA;QACzE,CAAC,CAAA;QACD,MAAM,MAAM,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAChF,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3D,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QAC5C,GAAG,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QACzC,GAAG,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACjD,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;YAC/C,GAAG,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;YAC5C,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnD,gEAAgE;IAChE,gFAAgF;IAChF,YAAY,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAA;IAE7F,4EAA4E;IAC5E,0EAA0E;IAC1E,4EAA4E;IAC5E,uEAAuE;IACvE,8DAA8D;IAC9D,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAA;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,OAAO,wBAAwB,CAAC,GAAG,EAAE;YACnC,SAAS;YACT,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO;YAC1C,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,KAAK,IAAI;YAC5C,cAAc,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,SAAS;YACpD,YAAY,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE;SACvC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAEhC,4EAA4E;IAC5E,6EAA6E;IAC7E,sEAAsE;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAM;QAChB,OAAO,uBAAuB,CAAC,GAAG,EAAE;YAClC,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO;YAC1C,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;YAChD,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YACtC,6EAA6E;YAC7E,iBAAiB,EAAE,GAAG,EAAE;gBACtB,MAAM,GAAG,GAAG,cAAc,CAAC,OAAO,CAAA;gBAClC,IAAI,GAAG,KAAK,IAAI;oBAAE,OAAO,KAAK,CAAA;gBAC9B,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;gBACpC,OAAO,IAAI,CAAA;YACb,CAAC;SACF,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEnB,0EAA0E;IAC1E,0EAA0E;IAC1E,2BAA2B;IAC3B,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,sBAAsB,CAAC;QAClD,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,MAAM;QACN,WAAW;QACX,cAAc;KACf,CAAC,CAAA;IAEF,6EAA6E;IAC7E,gFAAgF;IAChF,2EAA2E;IAC3E,8EAA8E;IAC9E,mFAAmF;IACnF,MAAM,aAAa,GACjB,GAAG,IAAI,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACpH,CAAC,CAAC,OAAO,CAAC,YAAY;QACtB,CAAC,CAAC,IAAI,CAAA;IAEV,8EAA8E;IAC9E,2EAA2E;IAC3E,mBAAmB;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAE1C,OAAO,CACL,eAAK,SAAS,EAAC,yFAAyF,aAEtG,KAAC,sBAAsB,KAAG,EAE1B,KAAC,iBAAiB,IAAC,MAAM,EAAE,WAAW,GAAI,EAC1C,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,MAAM,aACnG,iBACE,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,SAAS,CAAC,4BAA4B,CAAC,EAC9C,SAAS,EAAC,8EAA8E,EACxF,MAAM,EAAC,wDAAwD,GAC/D,EACD,GAAG;wBACF,CAAC,CAAC,YAAY;wBACV,wEAAwE;wBACxE,qEAAqE;wBACrE,wDAAwD;wBACxD,gBAAgB,CAAC;4BACf,IAAI,EAAE,UAAU;4BAChB,SAAS,EAAE,OAAO,CAAC,SAAS;4BAC5B,GAAG;4BACH,UAAU,EAAE,OAAO,CAAC,UAAU;4BAC9B,WAAW,EAAE,OAAO,CAAC,WAAW;yBACjC,CAAC,EACF,GAAG,CAAC,IAAI,CACT;wBACH,CAAC,CAAC,IAAI,EAEP,GAAG,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,EAC7D,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CACtB,KAAC,cAAc,IAAwB,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,IAA/C,aAAa,CAAC,EAAE,CAAmC,CACzE,CAAC,CAAC,CAAC,IAAI,EAEP,YAAY,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IAC3E,IACF,CACP,CAAA;AACH,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { setEditingMarkers } from '@elytracms/core/runtime-renderer'\nimport { getNode } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { DRAFT_PERSPECTIVE } from '@elytracms/core/cms-core'\nimport type { Perspective } from '@elytracms/core/cms-core'\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 { renderCanvasBody } from './canvas-body'\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_PERSPECTIVE,\n}: {\n  /** Resolve references against this perspective (EC-300/AD-16). The editable Draft\n   *  view passes `DRAFT_PERSPECTIVE` (a just-made reusable shows immediately); the\n   *  read-only Published view passes `'published'` (honest preview of what delivery\n   *  serves). */\n  perspective?: Perspective\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  const selectedRunRef = useRef(builder.selectedRun)\n  selectedRunRef.current = builder.selectedRun\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    // the consumer's `defineStudio({ canvas })` theme (EC-389, injected LAST so\n    // it wins), and the EC-414 world probe — lives in\n    // `wireCanvasChrome`/`applyCanvasChrome`.\n    wireCanvasChrome(d, {\n      stylesheetUrl: getCanvasStylesheetUrl(),\n      theme: resolveDeploymentCanvasTheme(),\n      onStatus: (status) =>\n        setThemeStatus((prev) => (prev?.kind === status.kind ? prev : status)),\n    })\n    setDoc(d)\n  }, [])\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      // EC-549: the NEAREST canvas item is either a block (`data-ec-node-id`) or a\n      // typography run (`data-ec-run`, path-addressed) — a run selects as a run.\n      const item = (e.target as Element | null)?.closest?.('[data-ec-run],[data-ec-node-id]')\n      const runKey = item?.getAttribute('data-ec-run')\n      if (runKey != null) {\n        e.preventDefault()\n        dispatch({ type: 'selectRun', run: Number(runKey) })\n        return\n      }\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  // EC-554: the field's top-level `allow` rides with the store (`builder.field`).\n  useCanvasDnd(doc, { presentRef, dispatch, studio, editingRef, placement: builder.placement })\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      // EC-549: a selected typography run deletes as a run (one undo restores it).\n      removeSelectedRun: () => {\n        const run = selectedRunRef.current\n        if (run === null) return false\n        dispatch({ type: 'removeRun', run })\n        return true\n      },\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, builder.layout) && 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              // EC-592 + EC-549: the FIELD VALUE through delivery's one entry point —\n              // blocks as bare siblings, typography runs in their true positions —\n              // inside the decorated (never rendered) synthetic root.\n              renderCanvasBody({\n                root: activeRoot,\n                preserved: builder.preserved,\n                ctx,\n                selectedId: builder.selectedId,\n                selectedRun: builder.selectedRun,\n              }),\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/clipboard-actions.d.ts

@@ -1,5 +1,7 @@
+import type { ComponentNode } from '@elytracms/core/project-graph';
 import type { ClipboardFragment } from '@elytracms/core/clipboard';
 import type { AsyncClipboard, PasteIssue, PasteRejection } from '@elytracms/studio/lib/clipboard';
+import type { StudioRegistry } from '@elytracms/studio/lib/registry';
 /**
  * Copy/cut/paste everywhere (EC-175, vision 3.3/3.7).
  *
@@ -70,6 +72,19 @@ export interface StudioClipboard {
     pasteFromClipboard(anchorId?: string | null, asyncClipboard?: AsyncClipboard): Promise<void>;
 }
 export declare function useStudioClipboard(): StudioClipboard;
+/**
+ * The visible reason a refused paste shows (EC-545) — pure, so the notice
+ * wording per refusal is pinned without mounting the hook. EC-554: a field-leash
+ * refusal names the FIELD (`fieldLabel`), never the invisible synthetic root's
+ * slot — the rejection carries no destination label to misuse.
+ */
+/**
+ * The node plain text pastes as (EC-549, ratified 4d): the component filling the `text`
+ * role with the text in its role-contract prop (`value`, `ROLE_CONTRACTS`) — never a
+ * loose typography item. `null` when no component fills the role (the gesture is off;
+ * the canvas's role notice says so). Ids are minted on insert.
+ */
+export declare function plainTextNode(studio: StudioRegistry, text: string): ComponentNode | null;
 export declare function pasteRejectionMessage(rejection: PasteRejection, fieldLabel: string): string;
 export interface ClipboardListenerOptions {
     clipboard: StudioClipboard;

package/dist/components/builder/clipboard-actions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useSyncExternalStore } from 'react';
 import { AlertTriangle, CircleCheck, Crosshair, X } from 'lucide-react';
-import { cloneWithNewIds } from '@elytracms/core/project-graph';
+import { cloneWithNewIds, subtreePlacementRefusal } from '@elytracms/core/project-graph';
 import { buildFragmentFromComposition } from '@elytracms/core/clipboard';
 import { readFragmentFromClipboard, readFragmentFromDataTransfer, resolvePasteTarget, diffPastedSubtree, pasteSummaryMessage, writeFragmentToClipboard, writeFragmentToDataTransfer, } from '@elytracms/studio/lib/clipboard';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
@@ -10,6 +10,7 @@ import { translate } from '@elytracms/studio/lib/i18n';
 import { useProjectSession } from '../project-session.js';
 import { Badge, Row, Text } from '@elytracms/studio/ui';
 import { useBuilder } from './builder-store.js';
+import { placementRefusalMessage } from './placement-refusal.js';
 let currentNotice = null;
 const noticeListeners = new Set();
 export function publishClipboardNotice(notice) {
@@ -85,8 +86,21 @@ export function useStudioClipboard() {
         };
         const applyPaste = (result, anchorId) => {
             const { builder: b } = stateRef.current;
-            if (!result.ok) {
-                publishClipboardNotice({ kind: 'error', message: clipboardErrorMessage(result.error) });
+            // EC-549 (ratified 4d): the canvas never creates loose prose — plain text pastes
+            // as a `text`-role component node (no fragment on the clipboard, a text component
+            // in the list); otherwise a failed parse says why.
+            const pasted = result.ok
+                ? result.fragment.payload.root
+                : result.plainText !== undefined
+                    ? plainTextNode(studio, result.plainText)
+                    : null;
+            if (!pasted) {
+                const message = result.ok
+                    ? ''
+                    : result.plainText !== undefined
+                        ? translate('builder.roles.noText') // plain text, but no component fills the text role
+                        : clipboardErrorMessage(result.error);
+                publishClipboardNotice({ kind: 'error', message });
                 return;
             }
             const root = currentRoot();
@@ -95,10 +109,11 @@ export function useStudioClipboard() {
             const resolution = resolvePasteTarget({
                 root,
                 anchorId: anchorId !== undefined ? anchorId : b.selectedId,
-                componentId: result.fragment.payload.root.componentId,
+                componentId: pasted.componentId,
                 getManifest: (id) => studio.registry.getManifest(id),
-                // EC-554: the composition field's top-level vocabulary, from the store.
-                fieldAllow: b.field.allow,
+                // EC-554 / EC-584: the store's placement scope — the field's vocabulary and
+                // the manifests the one judge reads.
+                placement: b.placement,
             });
             if (!resolution.ok) {
                 // EC-545 / EC-554: the slot leash or the field leash refuses the pasted
@@ -110,7 +125,14 @@ export function useStudioClipboard() {
             // Mint the inserted subtree's ids HERE, from the store's own factory (EC-578), and
             // insert exactly that subtree (`minted`) — so the issue deep links point at the
             // very ids that land, with no mirror to diverge.
-            const inserted = cloneWithNewIds(result.fragment.payload.root, b.newId);
+            const inserted = cloneWithNewIds(pasted, b.newId);
+            // EC-584: the reducer judges the WHOLE pasted subtree; ask the same judge first so
+            // the notice never claims a paste the sink refuses (a nested child outside its slot).
+            const verdict = subtreePlacementRefusal(root, inserted, { parentId: target.parentId, slot: target.slot }, b.placement);
+            if (verdict) {
+                publishClipboardNotice({ kind: 'error', message: placementRefusalMessage(verdict, b.field.label) });
+                return;
+            }
             // ONE dispatch: one history entry, one undo.
             b.dispatch({ type: 'insert', target, node: inserted, minted: true });
             const diff = diffPastedSubtree({
@@ -162,11 +184,26 @@ export function useStudioClipboard() {
  * refusal names the FIELD (`fieldLabel`), never the invisible synthetic root's
  * slot — the rejection carries no destination label to misuse.
  */
+/**
+ * The node plain text pastes as (EC-549, ratified 4d): the component filling the `text`
+ * role with the text in its role-contract prop (`value`, `ROLE_CONTRACTS`) — never a
+ * loose typography item. `null` when no component fills the role (the gesture is off;
+ * the canvas's role notice says so). Ids are minted on insert.
+ */
+export function plainTextNode(studio, text) {
+    const textComponent = studio.registry.roleComponent('text');
+    if (!textComponent)
+        return null;
+    return { type: 'elytra/component', id: 'paste-text', componentId: textComponent.id, props: { value: { value: text } } };
+}
 /** A component's label in a notice — its manifest title (EC-591: never a stripped id prefix). */
 function componentLabel(componentId) {
     return componentDisplayName(componentId, getStudioRegistry().registry.getManifest(componentId));
 }
 export function pasteRejectionMessage(rejection, fieldLabel) {
+    if (rejection.code === 'server-only') {
+        return translate('builder.placement.serverOnly', { component: componentLabel(rejection.componentId) });
+    }
     if (rejection.code === 'field-not-allowed') {
         return translate('builder.clipboard.notAllowedByField', {
             component: componentLabel(rejection.componentId),