@elytracms/studio 0.0.86 → 0.0.87

package/dist/components/builder/builder-store.d.ts

@@ -121,10 +121,32 @@ export declare function makeNodeIdCounter(start: number): Counter;
  * properties, not render behavior.
  */
 export declare function builderReducer(state: BuilderState, action: Action): BuilderState;
+/**
+ * The composition FIELD whose value the store edits (EC-554). Static for the
+ * store's lifetime and deliberately NOT reducer state: it is the declaration the
+ * edited tree is judged against, not part of the tree. It travels WITH the store
+ * so every placement surface under the provider — the canvas and page-tree
+ * drag-and-drop, paste (canvas, tree, keyboard), and the insert offer — reads the
+ * same value from the one context it already requires; none can be mounted
+ * without it, and `BuilderProvider` cannot be mounted without declaring it.
+ */
+export interface CompositionFieldScope {
+    /** The field's display label — what a refusal notice names (e.g. "Canvas"). */
+    label: string;
+    /**
+     * The field's top-level `allow` vocabulary (EC-188; a closed set per EC-544),
+     * or `undefined` when the field declares none (any registered component).
+     * Applied only through `fieldAllowAt` (`lib/dnd/drop-rules`), which scopes it
+     * to direct children of the composition root.
+     */
+    allow: readonly string[] | undefined;
+}
 export interface BuilderStore extends BuilderState {
     canUndo: boolean;
     canRedo: boolean;
     selectedNode: ComponentNode | null;
+    /** The composition field being edited (EC-554) — see {@link CompositionFieldScope}. */
+    field: CompositionFieldScope;
     dispatch: (action: Action) => void;
 }
 declare const useBuilder: () => BuilderStore;
@@ -137,9 +159,11 @@ export declare function initialBuilderState(composition: ComponentNode): Builder
  * its committed composition into the open CMS document via `onChange`
  * (`composition-field-editor`); the document's own Save persists it as content.
  */
-export declare function BuilderProvider({ composition, children, }: {
+export declare function BuilderProvider({ composition, field, children, }: {
     /** The composition root to edit (the composition-field editor's synthetic root). */
     composition: ComponentNode;
+    /** The field the composition is the value of (EC-554) — required, never defaulted. */
+    field: CompositionFieldScope;
     children: ReactNode;
 }): import("react").JSX.Element;
 export { useBuilder };

package/dist/components/builder/builder-store.js

@@ -186,7 +186,7 @@ export function initialBuilderState(composition) {
  * its committed composition into the open CMS document via `onChange`
  * (`composition-field-editor`); the document's own Save persists it as content.
  */
-export function BuilderProvider({ composition, children, }) {
+export function BuilderProvider({ composition, field, children, }) {
     // EC-287: nothing persists a graph — committed edits are lifted into the CMS
     // document by the composition-field editor's `onChange`. `useReducer` drives the
     // pure `builderReducer` (consecutive dispatches in one gesture apply in sequence);
@@ -201,9 +201,10 @@ export function BuilderProvider({ composition, children, }) {
             canUndo: state.past.length > 0,
             canRedo: state.future.length > 0,
             selectedNode,
+            field,
             dispatch,
         };
-    }, [state, dispatch]);
+    }, [state, field, dispatch]);
     return _jsx(BuilderContext.Provider, { value: store, children: children });
 }
 export { useBuilder };

package/dist/components/builder/builder-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"builder-store.js","sourceRoot":"","sources":["../../../src/components/builder/builder-store.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useReducer } from 'react'\nimport type { ReactNode } from 'react'\nimport {\n  cloneWithNewIds,\n  duplicateNode,\n  getNode,\n  getParentInfo,\n  insertNode,\n  maxNodeIdSeq,\n  moveNode,\n  normalizeContainers,\n  removeNode,\n  removeNodeProp,\n  reorderNode,\n  replaceNode,\n  setNodeProp,\n} from '@elytracms/core/project-graph'\nimport type { ComponentNode, InsertTarget, PropValue } from '@elytracms/core/project-graph'\nimport { applyWrap } from '@elytracms/studio/lib/dnd/drop-rules'\nimport { createRequiredContext } from '@elytracms/studio/lib/required-context'\n\nconst HISTORY_LIMIT = 100\n\n/**\n * A canvas preview-width key (EC-250): `'full'` (unconstrained) or a configured\n * breakpoint name (`'sm'`, `'md'`, …). Dynamic because the set is sourced from\n * the consuming site's breakpoints, so it is a string, not a fixed union — the\n * switcher resolves the available options via {@link resolveCanvasViewports}.\n */\nexport type Viewport = string\n\n/**\n * The builder store's action union. EC-287 retired the DB-resident project graph\n * and its persistence mirror, so these actions are pure in-memory editor state —\n * no action maps to a persisted `graph.*` command anymore. The block-field editor\n * lifts committed edits into the CMS document via `onChange`\n * (`composition-field-editor`); nothing persists a graph.\n */\nexport type BuilderAction =\n  | { type: 'select'; id: string | null }\n  | { type: 'hover'; id: string | null }\n  | { type: 'viewport'; viewport: Viewport }\n  | { type: 'undo' }\n  | { type: 'redo' }\n  | { type: 'insert'; target: InsertTarget; node: ComponentNode; select?: boolean }\n  | { type: 'remove'; id: string }\n  | { type: 'duplicate'; id: string }\n  | { type: 'reorder'; id: string; delta: -1 | 1 }\n  | { type: 'move'; id: string; target: InsertTarget }\n  /**\n   * EC-282 reuse gesture: replace a node with zero or more nodes at its\n   * position (clone-with-fresh-ids, like `insert`). Promote → 1 embed node;\n   * detach → the referenced element's inline blocks. One atomic structural\n   * edit, one undo step.\n   */\n  | { type: 'replace'; id: string; nodes: ComponentNode[]; select?: boolean }\n  /**\n   * EC-162 layout gesture: wrap the reference node and the dragged subject in\n   * a two-column Grid container as ONE atomic structural edit (one undo step).\n   */\n  | {\n      type: 'wrap'\n      referenceId: string\n      side: 'left' | 'right'\n      subject: { kind: 'node'; nodeId: string } | { kind: 'component'; node: ComponentNode }\n    }\n  | { type: 'setProp'; id: string; name: string; value: PropValue; coalesceKey?: string }\n  | { type: 'removeProp'; id: string; name: string }\n\nexport interface BuilderState {\n  /**\n   * The edited composition: one root-bearing component tree (EC-287). The canvas\n   * wraps a page document's `body` blocks into a synthetic root and edits it\n   * directly — no page/layout wrapper. Undo/redo snapshot this root.\n   */\n  past: ComponentNode[]\n  present: ComponentNode\n  future: ComponentNode[]\n  selectedId: string | null\n  hoveredId: string | null\n  viewport: Viewport\n  /** Monotonic counter feeding fresh node ids. */\n  nodeSeq: number\n  /** Coalescing key of the last edit (consecutive same-key edits don't stack history). */\n  lastCoalesceKey: string | null\n}\n\ntype Action = BuilderAction\n\nexport interface Counter {\n  genId: () => string\n  count: number\n}\n/**\n * The single fresh-node-id counter (`node-<n>`), shared by the reducer's structural\n * actions AND the clipboard paste path (`clipboard-actions.tsx`) so the paste-issue\n * deep links can mirror the exact ids the reducer will mint — one implementation,\n * no drift. `count` mutates as `genId` is called, so the caller reads it afterward\n * to advance `nodeSeq`.\n */\nexport function makeNodeIdCounter(start: number): Counter {\n  const c: Counter = {\n    count: start,\n    genId: () => {\n      c.count += 1\n      return `node-${c.count}`\n    },\n  }\n  return c\n}\n\n/**\n * Push a new graph onto history, coalescing consecutive edits with the same key.\n *\n * Every commit normalizes layout containers (EC-162 ledger fix): the\n * operations layer normalizes every persisted `graph.*` write (EC-161), so\n * the optimistic working graph must apply the same `normalizeContainers` pass\n * or the UI state diverges from the persisted revision after\n * container-emptying moves/removes. The mirrored command stays un-normalized\n * (`graphInvocationFor` sees the raw action); both sides normalize\n * identically, so they land on the same graph.\n */\nfunction commit(\n  state: BuilderState,\n  root: ComponentNode,\n  opts: { coalesceKey?: string; nodeSeq?: number; selectedId?: string | null } = {},\n): BuilderState {\n  const normalized = normalizeContainers(root)\n  const present = normalized\n  const coalesce = opts.coalesceKey != null && opts.coalesceKey === state.lastCoalesceKey\n  // Normalization can dissolve the node a caller wanted selected (e.g. the\n  // parent container of a removed child) — selection never points at a ghost.\n  const desired = opts.selectedId !== undefined ? opts.selectedId : state.selectedId\n  const selectedId = desired !== null && getNode(normalized, desired) ? desired : null\n  return {\n    ...state,\n    past: coalesce ? state.past : [...state.past, state.present].slice(-HISTORY_LIMIT),\n    present,\n    future: [],\n    nodeSeq: opts.nodeSeq ?? state.nodeSeq,\n    lastCoalesceKey: opts.coalesceKey ?? null,\n    selectedId,\n  }\n}\n\n/**\n * The pure state transition. Exported (with `initialBuilderState`) for unit\n * tests — gesture determinism and normalization lockstep are reducer-level\n * properties, not render behavior.\n */\nexport function builderReducer(state: BuilderState, action: Action): BuilderState {\n  const root = state.present\n  switch (action.type) {\n    case 'select':\n      return { ...state, selectedId: action.id }\n    case 'hover':\n      return state.hoveredId === action.id ? state : { ...state, hoveredId: action.id }\n    case 'viewport':\n      return { ...state, viewport: action.viewport }\n\n    case 'undo': {\n      const prev = state.past.at(-1)\n      if (!prev) return state\n      return {\n        ...state,\n        past: state.past.slice(0, -1),\n        present: prev,\n        future: [state.present, ...state.future],\n        lastCoalesceKey: null,\n        selectedId: getNode(prev, state.selectedId ?? '') ? state.selectedId : null,\n      }\n    }\n    case 'redo': {\n      const next = state.future[0]\n      if (!next) return state\n      return {\n        ...state,\n        past: [...state.past, state.present],\n        present: next,\n        future: state.future.slice(1),\n        lastCoalesceKey: null,\n        selectedId: getNode(next, state.selectedId ?? '') ? state.selectedId : null,\n      }\n    }\n\n    case 'insert': {\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const node = cloneWithNewIds(action.node, c.genId)\n      const next = insertNode(root, action.target, node)\n      return commit(state, next, {\n        nodeSeq: c.count,\n        selectedId: action.select === false ? state.selectedId : node.id,\n      })\n    }\n    case 'remove': {\n      const parent = getParentInfo(root, action.id)\n      const next = removeNode(root, action.id)\n      const selectedId =\n        state.selectedId === action.id ? (parent?.parent.id ?? null) : state.selectedId\n      return commit(state, next, { selectedId })\n    }\n    case 'duplicate': {\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const { root: next, newId } = duplicateNode(root, action.id, c.genId)\n      return commit(state, next, { nodeSeq: c.count, selectedId: newId ?? state.selectedId })\n    }\n    case 'reorder':\n      return commit(state, reorderNode(root, action.id, action.delta))\n    case 'move':\n      return commit(state, moveNode(root, action.id, action.target))\n    case 'replace': {\n      // Mint fresh ids for the incoming nodes (page-local namespace) so a detached\n      // copy never collides with the page, and a promoted block's source subtree\n      // (kept for the new reusable document) stays untouched.\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const cloned = action.nodes.map((n) => cloneWithNewIds(n, c.genId))\n      const next = replaceNode(root, action.id, cloned)\n      if (next === root) return state // root or absent id — no-op\n      return commit(state, next, {\n        nodeSeq: c.count,\n        selectedId: action.select === false ? state.selectedId : (cloned[0]?.id ?? state.selectedId),\n      })\n    }\n    case 'wrap': {\n      // Layout gesture (EC-162): the reference and the dragged subject become\n      // the two columns of a new Grid container — ONE structural edit, one\n      // history entry, one mirrored command, so a single undo dissolves the\n      // whole gesture.\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const partner =\n        action.subject.kind === 'node'\n          ? { kind: 'node' as const, nodeId: action.subject.nodeId }\n          : { kind: 'subtree' as const, node: cloneWithNewIds(action.subject.node, c.genId) }\n      const containerId = c.genId()\n      const wrapped = applyWrap({\n        root,\n        referenceId: action.referenceId,\n        side: action.side,\n        partner,\n        containerId,\n      })\n      if (!wrapped) return state\n      return commit(state, wrapped.root, { nodeSeq: c.count, selectedId: containerId })\n    }\n    case 'setProp':\n      return commit(state, setNodeProp(root, action.id, action.name, action.value), {\n        coalesceKey: action.coalesceKey,\n      })\n    case 'removeProp':\n      return commit(state, removeNodeProp(root, action.id, action.name))\n    default:\n      return state\n  }\n}\n\nexport interface BuilderStore extends BuilderState {\n  canUndo: boolean\n  canRedo: boolean\n  selectedNode: ComponentNode | null\n  dispatch: (action: Action) => void\n}\n\nconst { Context: BuilderContext, useRequired: useBuilder } =\n  createRequiredContext<BuilderStore>('Builder')\n\nexport function initialBuilderState(composition: ComponentNode): BuilderState {\n  // Start container-normal (idempotent on healthy trees) so the session and the\n  // lifted baseline agree from the first edit.\n  const present = normalizeContainers(composition)\n  return {\n    past: [],\n    present,\n    future: [],\n    selectedId: present.id,\n    hoveredId: null,\n    viewport: 'full',\n    // Seed past the ids the composition already carries (EC-203): a restored\n    // tree holds minted `node-<n>` ids, so starting at 0 would re-mint `node-1`\n    // on the first insert and produce a duplicate-node-id.\n    nodeSeq: maxNodeIdSeq(present),\n    lastCoalesceKey: null,\n  }\n}\n\n/**\n * Undo/redo design (EC-141): the history stack is *UI state* — an in-memory\n * stack of composition-root snapshots. EC-287 retired the DB-resident project\n * graph and its append-only revision log, so the store no longer mirrors edits onto a\n * persistence layer: it is a pure in-memory editor. The block-field editor lifts\n * its committed composition into the open CMS document via `onChange`\n * (`composition-field-editor`); the document's own Save persists it as content.\n */\nexport function BuilderProvider({\n  composition,\n  children,\n}: {\n  /** The composition root to edit (the composition-field editor's synthetic root). */\n  composition: ComponentNode\n  children: ReactNode\n}) {\n  // EC-287: nothing persists a graph — committed edits are lifted into the CMS\n  // document by the composition-field editor's `onChange`. `useReducer` drives the\n  // pure `builderReducer` (consecutive dispatches in one gesture apply in sequence);\n  // the store below decorates the state with the derived undo/redo + selection flags.\n  const [state, dispatch] = useReducer(builderReducer, composition, initialBuilderState)\n\n  const store = useMemo<BuilderStore>(() => {\n    const selectedNode = state.selectedId\n      ? (getNode(state.present, state.selectedId) ?? null)\n      : null\n    return {\n      ...state,\n      canUndo: state.past.length > 0,\n      canRedo: state.future.length > 0,\n      selectedNode,\n      dispatch,\n    }\n  }, [state, dispatch])\n\n  return <BuilderContext.Provider value={store}>{children}</BuilderContext.Provider>\n}\n\nexport { useBuilder }\n"]}
+{"version":3,"file":"builder-store.js","sourceRoot":"","sources":["../../../src/components/builder/builder-store.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useReducer } from 'react'\nimport type { ReactNode } from 'react'\nimport {\n  cloneWithNewIds,\n  duplicateNode,\n  getNode,\n  getParentInfo,\n  insertNode,\n  maxNodeIdSeq,\n  moveNode,\n  normalizeContainers,\n  removeNode,\n  removeNodeProp,\n  reorderNode,\n  replaceNode,\n  setNodeProp,\n} from '@elytracms/core/project-graph'\nimport type { ComponentNode, InsertTarget, PropValue } from '@elytracms/core/project-graph'\nimport { applyWrap } from '@elytracms/studio/lib/dnd/drop-rules'\nimport { createRequiredContext } from '@elytracms/studio/lib/required-context'\n\nconst HISTORY_LIMIT = 100\n\n/**\n * A canvas preview-width key (EC-250): `'full'` (unconstrained) or a configured\n * breakpoint name (`'sm'`, `'md'`, …). Dynamic because the set is sourced from\n * the consuming site's breakpoints, so it is a string, not a fixed union — the\n * switcher resolves the available options via {@link resolveCanvasViewports}.\n */\nexport type Viewport = string\n\n/**\n * The builder store's action union. EC-287 retired the DB-resident project graph\n * and its persistence mirror, so these actions are pure in-memory editor state —\n * no action maps to a persisted `graph.*` command anymore. The block-field editor\n * lifts committed edits into the CMS document via `onChange`\n * (`composition-field-editor`); nothing persists a graph.\n */\nexport type BuilderAction =\n  | { type: 'select'; id: string | null }\n  | { type: 'hover'; id: string | null }\n  | { type: 'viewport'; viewport: Viewport }\n  | { type: 'undo' }\n  | { type: 'redo' }\n  | { type: 'insert'; target: InsertTarget; node: ComponentNode; select?: boolean }\n  | { type: 'remove'; id: string }\n  | { type: 'duplicate'; id: string }\n  | { type: 'reorder'; id: string; delta: -1 | 1 }\n  | { type: 'move'; id: string; target: InsertTarget }\n  /**\n   * EC-282 reuse gesture: replace a node with zero or more nodes at its\n   * position (clone-with-fresh-ids, like `insert`). Promote → 1 embed node;\n   * detach → the referenced element's inline blocks. One atomic structural\n   * edit, one undo step.\n   */\n  | { type: 'replace'; id: string; nodes: ComponentNode[]; select?: boolean }\n  /**\n   * EC-162 layout gesture: wrap the reference node and the dragged subject in\n   * a two-column Grid container as ONE atomic structural edit (one undo step).\n   */\n  | {\n      type: 'wrap'\n      referenceId: string\n      side: 'left' | 'right'\n      subject: { kind: 'node'; nodeId: string } | { kind: 'component'; node: ComponentNode }\n    }\n  | { type: 'setProp'; id: string; name: string; value: PropValue; coalesceKey?: string }\n  | { type: 'removeProp'; id: string; name: string }\n\nexport interface BuilderState {\n  /**\n   * The edited composition: one root-bearing component tree (EC-287). The canvas\n   * wraps a page document's `body` blocks into a synthetic root and edits it\n   * directly — no page/layout wrapper. Undo/redo snapshot this root.\n   */\n  past: ComponentNode[]\n  present: ComponentNode\n  future: ComponentNode[]\n  selectedId: string | null\n  hoveredId: string | null\n  viewport: Viewport\n  /** Monotonic counter feeding fresh node ids. */\n  nodeSeq: number\n  /** Coalescing key of the last edit (consecutive same-key edits don't stack history). */\n  lastCoalesceKey: string | null\n}\n\ntype Action = BuilderAction\n\nexport interface Counter {\n  genId: () => string\n  count: number\n}\n/**\n * The single fresh-node-id counter (`node-<n>`), shared by the reducer's structural\n * actions AND the clipboard paste path (`clipboard-actions.tsx`) so the paste-issue\n * deep links can mirror the exact ids the reducer will mint — one implementation,\n * no drift. `count` mutates as `genId` is called, so the caller reads it afterward\n * to advance `nodeSeq`.\n */\nexport function makeNodeIdCounter(start: number): Counter {\n  const c: Counter = {\n    count: start,\n    genId: () => {\n      c.count += 1\n      return `node-${c.count}`\n    },\n  }\n  return c\n}\n\n/**\n * Push a new graph onto history, coalescing consecutive edits with the same key.\n *\n * Every commit normalizes layout containers (EC-162 ledger fix): the\n * operations layer normalizes every persisted `graph.*` write (EC-161), so\n * the optimistic working graph must apply the same `normalizeContainers` pass\n * or the UI state diverges from the persisted revision after\n * container-emptying moves/removes. The mirrored command stays un-normalized\n * (`graphInvocationFor` sees the raw action); both sides normalize\n * identically, so they land on the same graph.\n */\nfunction commit(\n  state: BuilderState,\n  root: ComponentNode,\n  opts: { coalesceKey?: string; nodeSeq?: number; selectedId?: string | null } = {},\n): BuilderState {\n  const normalized = normalizeContainers(root)\n  const present = normalized\n  const coalesce = opts.coalesceKey != null && opts.coalesceKey === state.lastCoalesceKey\n  // Normalization can dissolve the node a caller wanted selected (e.g. the\n  // parent container of a removed child) — selection never points at a ghost.\n  const desired = opts.selectedId !== undefined ? opts.selectedId : state.selectedId\n  const selectedId = desired !== null && getNode(normalized, desired) ? desired : null\n  return {\n    ...state,\n    past: coalesce ? state.past : [...state.past, state.present].slice(-HISTORY_LIMIT),\n    present,\n    future: [],\n    nodeSeq: opts.nodeSeq ?? state.nodeSeq,\n    lastCoalesceKey: opts.coalesceKey ?? null,\n    selectedId,\n  }\n}\n\n/**\n * The pure state transition. Exported (with `initialBuilderState`) for unit\n * tests — gesture determinism and normalization lockstep are reducer-level\n * properties, not render behavior.\n */\nexport function builderReducer(state: BuilderState, action: Action): BuilderState {\n  const root = state.present\n  switch (action.type) {\n    case 'select':\n      return { ...state, selectedId: action.id }\n    case 'hover':\n      return state.hoveredId === action.id ? state : { ...state, hoveredId: action.id }\n    case 'viewport':\n      return { ...state, viewport: action.viewport }\n\n    case 'undo': {\n      const prev = state.past.at(-1)\n      if (!prev) return state\n      return {\n        ...state,\n        past: state.past.slice(0, -1),\n        present: prev,\n        future: [state.present, ...state.future],\n        lastCoalesceKey: null,\n        selectedId: getNode(prev, state.selectedId ?? '') ? state.selectedId : null,\n      }\n    }\n    case 'redo': {\n      const next = state.future[0]\n      if (!next) return state\n      return {\n        ...state,\n        past: [...state.past, state.present],\n        present: next,\n        future: state.future.slice(1),\n        lastCoalesceKey: null,\n        selectedId: getNode(next, state.selectedId ?? '') ? state.selectedId : null,\n      }\n    }\n\n    case 'insert': {\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const node = cloneWithNewIds(action.node, c.genId)\n      const next = insertNode(root, action.target, node)\n      return commit(state, next, {\n        nodeSeq: c.count,\n        selectedId: action.select === false ? state.selectedId : node.id,\n      })\n    }\n    case 'remove': {\n      const parent = getParentInfo(root, action.id)\n      const next = removeNode(root, action.id)\n      const selectedId =\n        state.selectedId === action.id ? (parent?.parent.id ?? null) : state.selectedId\n      return commit(state, next, { selectedId })\n    }\n    case 'duplicate': {\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const { root: next, newId } = duplicateNode(root, action.id, c.genId)\n      return commit(state, next, { nodeSeq: c.count, selectedId: newId ?? state.selectedId })\n    }\n    case 'reorder':\n      return commit(state, reorderNode(root, action.id, action.delta))\n    case 'move':\n      return commit(state, moveNode(root, action.id, action.target))\n    case 'replace': {\n      // Mint fresh ids for the incoming nodes (page-local namespace) so a detached\n      // copy never collides with the page, and a promoted block's source subtree\n      // (kept for the new reusable document) stays untouched.\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const cloned = action.nodes.map((n) => cloneWithNewIds(n, c.genId))\n      const next = replaceNode(root, action.id, cloned)\n      if (next === root) return state // root or absent id — no-op\n      return commit(state, next, {\n        nodeSeq: c.count,\n        selectedId: action.select === false ? state.selectedId : (cloned[0]?.id ?? state.selectedId),\n      })\n    }\n    case 'wrap': {\n      // Layout gesture (EC-162): the reference and the dragged subject become\n      // the two columns of a new Grid container — ONE structural edit, one\n      // history entry, one mirrored command, so a single undo dissolves the\n      // whole gesture.\n      const c = makeNodeIdCounter(state.nodeSeq)\n      const partner =\n        action.subject.kind === 'node'\n          ? { kind: 'node' as const, nodeId: action.subject.nodeId }\n          : { kind: 'subtree' as const, node: cloneWithNewIds(action.subject.node, c.genId) }\n      const containerId = c.genId()\n      const wrapped = applyWrap({\n        root,\n        referenceId: action.referenceId,\n        side: action.side,\n        partner,\n        containerId,\n      })\n      if (!wrapped) return state\n      return commit(state, wrapped.root, { nodeSeq: c.count, selectedId: containerId })\n    }\n    case 'setProp':\n      return commit(state, setNodeProp(root, action.id, action.name, action.value), {\n        coalesceKey: action.coalesceKey,\n      })\n    case 'removeProp':\n      return commit(state, removeNodeProp(root, action.id, action.name))\n    default:\n      return state\n  }\n}\n\n/**\n * The composition FIELD whose value the store edits (EC-554). Static for the\n * store's lifetime and deliberately NOT reducer state: it is the declaration the\n * edited tree is judged against, not part of the tree. It travels WITH the store\n * so every placement surface under the provider — the canvas and page-tree\n * drag-and-drop, paste (canvas, tree, keyboard), and the insert offer — reads the\n * same value from the one context it already requires; none can be mounted\n * without it, and `BuilderProvider` cannot be mounted without declaring it.\n */\nexport interface CompositionFieldScope {\n  /** The field's display label — what a refusal notice names (e.g. \"Canvas\"). */\n  label: string\n  /**\n   * The field's top-level `allow` vocabulary (EC-188; a closed set per EC-544),\n   * or `undefined` when the field declares none (any registered component).\n   * Applied only through `fieldAllowAt` (`lib/dnd/drop-rules`), which scopes it\n   * to direct children of the composition root.\n   */\n  allow: readonly string[] | undefined\n}\n\nexport interface BuilderStore extends BuilderState {\n  canUndo: boolean\n  canRedo: boolean\n  selectedNode: ComponentNode | null\n  /** The composition field being edited (EC-554) — see {@link CompositionFieldScope}. */\n  field: CompositionFieldScope\n  dispatch: (action: Action) => void\n}\n\nconst { Context: BuilderContext, useRequired: useBuilder } =\n  createRequiredContext<BuilderStore>('Builder')\n\nexport function initialBuilderState(composition: ComponentNode): BuilderState {\n  // Start container-normal (idempotent on healthy trees) so the session and the\n  // lifted baseline agree from the first edit.\n  const present = normalizeContainers(composition)\n  return {\n    past: [],\n    present,\n    future: [],\n    selectedId: present.id,\n    hoveredId: null,\n    viewport: 'full',\n    // Seed past the ids the composition already carries (EC-203): a restored\n    // tree holds minted `node-<n>` ids, so starting at 0 would re-mint `node-1`\n    // on the first insert and produce a duplicate-node-id.\n    nodeSeq: maxNodeIdSeq(present),\n    lastCoalesceKey: null,\n  }\n}\n\n/**\n * Undo/redo design (EC-141): the history stack is *UI state* — an in-memory\n * stack of composition-root snapshots. EC-287 retired the DB-resident project\n * graph and its append-only revision log, so the store no longer mirrors edits onto a\n * persistence layer: it is a pure in-memory editor. The block-field editor lifts\n * its committed composition into the open CMS document via `onChange`\n * (`composition-field-editor`); the document's own Save persists it as content.\n */\nexport function BuilderProvider({\n  composition,\n  field,\n  children,\n}: {\n  /** The composition root to edit (the composition-field editor's synthetic root). */\n  composition: ComponentNode\n  /** The field the composition is the value of (EC-554) — required, never defaulted. */\n  field: CompositionFieldScope\n  children: ReactNode\n}) {\n  // EC-287: nothing persists a graph — committed edits are lifted into the CMS\n  // document by the composition-field editor's `onChange`. `useReducer` drives the\n  // pure `builderReducer` (consecutive dispatches in one gesture apply in sequence);\n  // the store below decorates the state with the derived undo/redo + selection flags.\n  const [state, dispatch] = useReducer(builderReducer, composition, initialBuilderState)\n\n  const store = useMemo<BuilderStore>(() => {\n    const selectedNode = state.selectedId\n      ? (getNode(state.present, state.selectedId) ?? null)\n      : null\n    return {\n      ...state,\n      canUndo: state.past.length > 0,\n      canRedo: state.future.length > 0,\n      selectedNode,\n      field,\n      dispatch,\n    }\n  }, [state, field, dispatch])\n\n  return <BuilderContext.Provider value={store}>{children}</BuilderContext.Provider>\n}\n\nexport { useBuilder }\n"]}

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

@@ -208,23 +208,6 @@ const CHROME_UI_CSS = `
     color: rgb(225,228,236) !important;
     font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }
 
-  /* ── Locale-fallback chips (EC-176) ─────────────────────────────────────
-     A node whose bound content is currently served via locale fallback wears a
-     small corner chip naming the locale it actually came from — the canvas
-     never silently mixes locales. A pseudo-element cannot carry .ec-chrome, so
-     every declaration is !important (contract item 3). */
-  .ec-editable[data-ec-locale-fallback] { position: relative; }
-  .ec-editable[data-ec-locale-fallback]::after {
-    content: attr(data-ec-locale-fallback) !important;
-    position: absolute !important; top: 2px !important; right: 2px !important;
-    z-index: 5 !important; pointer-events: none !important;
-    padding: 0 4px !important; border-radius: 4px !important;
-    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif !important;
-    letter-spacing: 0.05em !important; text-transform: uppercase !important;
-    color: #fbbf24 !important; background: rgba(180,83,9,0.25) !important;
-    border: 1px solid rgba(245,158,11,0.45) !important;
-  }
-
   /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────
      Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these
      classes only *show* the resolution. Rejection is explicit and visible

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

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

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

@@ -95,8 +95,6 @@ export interface CanvasChromeInputs {
     stylesheetUrl: string | null;
     /** Which stylesheet world the document is in (AD-C probe; see `wireCanvasChrome`). */
     world: CanvasWorld;
-    /** An instantiated starter kit's brand token palette (EC-117), when the project has one. */
-    kitTokensCss?: string;
     /** The consumer's canvas theme from `defineStudio({ canvas })` (EC-389). */
     theme?: StudioCanvasTheme;
 }
@@ -133,23 +131,23 @@ export interface CanvasChromeDocument {
  *      the legacy world also the studio design system);
  *   3. `ec-outline-css` — the studio's editing chrome (world-composed:
  *      backdrop + selection/DnD/toolbar/containment styles);
- *   4. `ec-kit-tokens` — an instantiated starter kit's `tokensCss` (kit provides…);
- *   5. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (…consumer overrides).
+ *   4. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (consumer overrides).
+ *      (An `ec-kit-tokens` layer used to sit between 3 and 4 for an instantiated
+ *      starter kit's palette; the kits went in EC-574.)
  *
  * Later elements win the cascade at equal specificity, so studio defaults <
- * kit tokens < consumer config — the customization-seam ordering. The body
- * class is the consumer's `bodyClassName` when given (even `''`), else the
- * legacy default in the legacy world and empty in the new world (AD-C). Safe
- * to run repeatedly (iframe onLoad + the already-loaded fast path + the probe
- * settling): links/styles are deduped by id, the chrome CSS is re-composed in
- * place when the world flips, and the two token styles are re-appended IN
- * ORDER so a re-wire never flips who wins.
+ * consumer config — the customization-seam ordering. The body class is the
+ * consumer's `bodyClassName` when given (even `''`), else the legacy default in
+ * the legacy world and empty in the new world (AD-C). Safe to run repeatedly
+ * (iframe onLoad + the already-loaded fast path + the probe settling):
+ * links/styles are deduped by id, the chrome CSS is re-composed in place when
+ * the world flips, and the theme style is re-appended so a re-wire never
+ * changes who wins.
  */
 export declare function applyCanvasChrome(d: CanvasChromeDocument, inputs: CanvasChromeInputs): void;
 /** `applyCanvasChrome` inputs minus the probe-owned `world`, plus the settle callback. */
 export interface WireCanvasChromeOptions {
     stylesheetUrl: string | null;
-    kitTokensCss?: string;
     theme?: StudioCanvasTheme;
     /**
      * Fired when the classification SETTLES — the stylesheet finished loading

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

@@ -89,17 +89,18 @@ export const DEFAULT_CANVAS_BODY_CLASS = 'bg-background text-foreground font-san
  *      the legacy world also the studio design system);
  *   3. `ec-outline-css` — the studio's editing chrome (world-composed:
  *      backdrop + selection/DnD/toolbar/containment styles);
- *   4. `ec-kit-tokens` — an instantiated starter kit's `tokensCss` (kit provides…);
- *   5. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (…consumer overrides).
+ *   4. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (consumer overrides).
+ *      (An `ec-kit-tokens` layer used to sit between 3 and 4 for an instantiated
+ *      starter kit's palette; the kits went in EC-574.)
  *
  * Later elements win the cascade at equal specificity, so studio defaults <
- * kit tokens < consumer config — the customization-seam ordering. The body
- * class is the consumer's `bodyClassName` when given (even `''`), else the
- * legacy default in the legacy world and empty in the new world (AD-C). Safe
- * to run repeatedly (iframe onLoad + the already-loaded fast path + the probe
- * settling): links/styles are deduped by id, the chrome CSS is re-composed in
- * place when the world flips, and the two token styles are re-appended IN
- * ORDER so a re-wire never flips who wins.
+ * consumer config — the customization-seam ordering. The body class is the
+ * consumer's `bodyClassName` when given (even `''`), else the legacy default in
+ * the legacy world and empty in the new world (AD-C). Safe to run repeatedly
+ * (iframe onLoad + the already-loaded fast path + the probe settling):
+ * links/styles are deduped by id, the chrome CSS is re-composed in place when
+ * the world flips, and the theme style is re-appended so a re-wire never
+ * changes who wins.
  */
 export function applyCanvasChrome(d, inputs) {
     if (!d.getElementById('ec-layer-order')) {
@@ -128,9 +129,8 @@ export function applyCanvasChrome(d, inputs) {
         style.textContent = chromeCss;
         d.head.appendChild(style);
     }
-    // Both token layers re-append (remove + add) on every wire, in sequence, so
-    // the consumer element always lands after the kit element.
-    appendCssLayer(d, 'ec-kit-tokens', inputs.kitTokensCss);
+    // The theme layer re-appends (remove + add) on every wire, so it always lands
+    // last — after a re-composed chrome layer too.
     appendCssLayer(d, 'ec-canvas-theme', inputs.theme?.tokensCss);
     d.body.className =
         inputs.theme?.bodyClassName ?? (inputs.world === 'legacy' ? DEFAULT_CANVAS_BODY_CLASS : '');
@@ -165,7 +165,6 @@ export function wireCanvasChrome(doc, options) {
         applyCanvasChrome(doc, {
             stylesheetUrl: options.stylesheetUrl,
             world: canvasWorldOf(status),
-            ...(options.kitTokensCss !== undefined ? { kitTokensCss: options.kitTokensCss } : {}),
             ...(options.theme !== undefined ? { theme: options.theme } : {}),
         });
         if (settled)

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

@@ -1 +1 @@
-{"version":3,"file":"canvas-chrome.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StudioCanvasTheme } from '../app-views/studio-config'\nimport { CANVAS_BACKDROP_LAYER_STATEMENT, canvasChromeCss } from './canvas-chrome-css'\nimport type { CanvasWorld } from './canvas-chrome-css'\n\nexport { canvasChromeCss, CANVAS_BACKDROP_LAYER_STATEMENT } from './canvas-chrome-css'\nexport type { CanvasWorld } from './canvas-chrome-css'\n\n/**\n * The canvas iframe's document chrome (EC-389, reshaped by EC-414) — the\n * framework-free half of `BuilderCanvas`'s `wireUp` (house pattern, EC-330):\n * everything injected into the preview document lives here, in ONE pinned\n * cascade order, unit-testable without jsdom.\n *\n * EC-414 (AD-A/AD-C): the studio design system is leaving the canvas document.\n * Which world a project lives in is decided by a RUNTIME PROBE of the loaded\n * canvas stylesheet — no flag, no config, zero consumer breakage:\n *\n *   - `legacy` (marker tokens present): the merged pre-EC-414 canvas.css that\n *     bundles `@elytracms/studio/styles.css` with the consumer theme. The\n *     EC-389 body-class default and today's behavior apply EXACTLY.\n *   - `new` (markers absent): the consumer's standalone full-Tailwind theme\n *     entry. No studio utilities exist in the document, so the body-class\n *     default retires and the neutral hand-written backdrop applies instead.\n */\n\n/**\n * The studio design system's marker tokens (AD-C probe). These are the plain\n * `:root` custom properties from the studio's generated `tokens.css`, which any\n * merged legacy build carries VERBATIM — unlike `@theme inline` variables\n * (e.g. `--color-panel`), which Tailwind v4 inlines into utilities and never\n * emits as custom properties (verified against the repo's Tailwind 4.3.2; the\n * task file's `--color-panel` example probe would classify every legacy build\n * as new). Two tokens ANDed so a consumer theme that happens to define one\n * generic name (`--panel`) cannot be mistaken for the studio design system.\n */\nexport const CANVAS_LEGACY_MARKER_TOKENS = ['--panel', '--grid-line'] as const\n\n/**\n * A Tailwind v4 build unconditionally emits `--default-font-family` on\n * `:root, :host` (preflight consumes it) — its absence after a successful\n * stylesheet load means the canvas stylesheet is not a Tailwind theme entry at\n * all (AD-D item 2's \"defines no @theme tokens\" invalid state).\n */\nexport const CANVAS_TAILWIND_MARKER_TOKEN = '--default-font-family'\n\n/** The settled classification of the canvas stylesheet (AD-C + AD-D item 2). */\nexport type CanvasThemeStatus =\n  /** Pre-EC-414 merged canvas.css — studio design system + consumer theme. */\n  | { kind: 'legacy' }\n  /** The EC-414 shape: a standalone consumer Tailwind theme entry. */\n  | { kind: 'new' }\n  /** The app never provided a canvas stylesheet (`setCanvasStylesheetUrl`). */\n  | { kind: 'no-stylesheet' }\n  /** The stylesheet `<link>` failed to load. */\n  | { kind: 'stylesheet-error' }\n  /** Loaded, but defines no Tailwind theme tokens at all. */\n  | { kind: 'no-theme-tokens' }\n\n/** The raw computed-style sample the pure classifier decides from. */\nexport interface CanvasThemeProbeSample {\n  /** The `ec-app-css` link fired `error` (or never resolved). */\n  loadFailed: boolean\n  /** Computed values of {@link CANVAS_LEGACY_MARKER_TOKENS}, in order. */\n  legacyMarkers: readonly string[]\n  /** Computed value of {@link CANVAS_TAILWIND_MARKER_TOKEN}. */\n  tailwindMarker: string\n}\n\nconst present = (value: string | null | undefined): boolean =>\n  typeof value === 'string' && value.trim() !== ''\n\n/**\n * AD-C pure core: classify the canvas stylesheet world from computed-token\n * presence. Legacy needs EVERY legacy marker; a loaded stylesheet with no\n * Tailwind marker is the explicit `no-theme-tokens` invalid state.\n */\nexport function classifyCanvasTheme(sample: CanvasThemeProbeSample): CanvasThemeStatus {\n  if (sample.loadFailed) return { kind: 'stylesheet-error' }\n  if (sample.legacyMarkers.length > 0 && sample.legacyMarkers.every(present)) {\n    return { kind: 'legacy' }\n  }\n  if (present(sample.tailwindMarker)) return { kind: 'new' }\n  return { kind: 'no-theme-tokens' }\n}\n\n/** The world a status renders as: only the legacy merged stylesheet keeps the\n *  EC-389 body-class default; every other state gets the neutral backdrop. */\nexport function canvasWorldOf(status: CanvasThemeStatus): CanvasWorld {\n  return status.kind === 'legacy' ? 'legacy' : 'new'\n}\n\n/** Sample the live document's computed root styles for {@link classifyCanvasTheme}. */\nexport function probeCanvasTheme(doc: Document, loadFailed = false): CanvasThemeStatus {\n  const root = doc.documentElement\n  const win = doc.defaultView\n  if (!root || !win) return { kind: 'new' }\n  const computed = win.getComputedStyle(root)\n  return classifyCanvasTheme({\n    loadFailed,\n    legacyMarkers: CANVAS_LEGACY_MARKER_TOKENS.map((token) => computed.getPropertyValue(token)),\n    tailwindMarker: computed.getPropertyValue(CANVAS_TAILWIND_MARKER_TOKEN),\n  })\n}\n\n/**\n * The studio's DEFAULT canvas body classes — LEGACY world only (EC-389 → EC-414):\n * a consumer's `defineStudio({ canvas: { bodyClassName } })` REPLACES it\n * wholesale (including `''` to drop it), because these utility classes\n * out-cascade a site theme's `@layer base body` rules — keeping them additive\n * would make the site's own page background unreachable (the NK-004 bug). In\n * the NEW world the default retires entirely (the utilities don't exist there);\n * the chrome stylesheet's neutral backdrop takes over.\n */\nexport const DEFAULT_CANVAS_BODY_CLASS = 'bg-background text-foreground font-sans'\n\n/** Everything injected into the canvas preview document. */\nexport interface CanvasChromeInputs {\n  /** The consuming app's compiled canvas stylesheet URL; `null` → no link (tests/SSR). */\n  stylesheetUrl: string | null\n  /** Which stylesheet world the document is in (AD-C probe; see `wireCanvasChrome`). */\n  world: CanvasWorld\n  /** An instantiated starter kit's brand token palette (EC-117), when the project has one. */\n  kitTokensCss?: string\n  /** The consumer's canvas theme from `defineStudio({ canvas })` (EC-389). */\n  theme?: StudioCanvasTheme\n}\n\n/** The head element surface the chrome creates (link/style). */\nexport interface CanvasChromeElement {\n  id: string\n  rel?: string\n  href?: string\n  textContent: string | null\n  remove(): void\n}\n\n/**\n * The document surface `applyCanvasChrome` needs (the `canvas-dnd` house\n * pattern: a narrow structural type so the core is unit-testable with a\n * hand-rolled fake — no jsdom). A real iframe `Document` satisfies it.\n */\nexport interface CanvasChromeDocument {\n  getElementById(id: string): CanvasChromeElement | null\n  createElement(tag: string): CanvasChromeElement\n  // `object` (not CanvasChromeElement): the real DOM `appendChild<T extends Node>`\n  // is only bivariance-compatible with a parameter every Node satisfies.\n  head: { appendChild(node: object): void }\n  body: { className: string }\n}\n\n/**\n * Apply the canvas document chrome in the PINNED cascade order (EC-389/EC-414):\n *\n *   1. `ec-layer-order` — the backdrop layer STATEMENT, pinning the chrome's\n *      `ec-canvas-backdrop` layer to the bottom of the layer order (it must\n *      precede the consumer stylesheet in document order to lose to it);\n *   2. `ec-app-css` — the canvas stylesheet `<link>` (the consumer theme; in\n *      the legacy world also the studio design system);\n *   3. `ec-outline-css` — the studio's editing chrome (world-composed:\n *      backdrop + selection/DnD/toolbar/containment styles);\n *   4. `ec-kit-tokens` — an instantiated starter kit's `tokensCss` (kit provides…);\n *   5. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (…consumer overrides).\n *\n * Later elements win the cascade at equal specificity, so studio defaults <\n * kit tokens < consumer config — the customization-seam ordering. The body\n * class is the consumer's `bodyClassName` when given (even `''`), else the\n * legacy default in the legacy world and empty in the new world (AD-C). Safe\n * to run repeatedly (iframe onLoad + the already-loaded fast path + the probe\n * settling): links/styles are deduped by id, the chrome CSS is re-composed in\n * place when the world flips, and the two token styles are re-appended IN\n * ORDER so a re-wire never flips who wins.\n */\nexport function applyCanvasChrome(d: CanvasChromeDocument, inputs: CanvasChromeInputs): void {\n  if (!d.getElementById('ec-layer-order')) {\n    const style = d.createElement('style')\n    style.id = 'ec-layer-order'\n    style.textContent = CANVAS_BACKDROP_LAYER_STATEMENT\n    d.head.appendChild(style)\n  }\n  if (inputs.stylesheetUrl && !d.getElementById('ec-app-css')) {\n    const link = d.createElement('link')\n    link.id = 'ec-app-css'\n    link.rel = 'stylesheet'\n    link.href = inputs.stylesheetUrl\n    d.head.appendChild(link)\n  }\n  const chromeCss = canvasChromeCss(inputs.world)\n  const outline = d.getElementById('ec-outline-css')\n  if (outline) {\n    // Probe settled on the other world: re-compose in place (position stable).\n    if (outline.textContent !== chromeCss) outline.textContent = chromeCss\n  } else {\n    const style = d.createElement('style')\n    style.id = 'ec-outline-css'\n    style.textContent = chromeCss\n    d.head.appendChild(style)\n  }\n  // Both token layers re-append (remove + add) on every wire, in sequence, so\n  // the consumer element always lands after the kit element.\n  appendCssLayer(d, 'ec-kit-tokens', inputs.kitTokensCss)\n  appendCssLayer(d, 'ec-canvas-theme', inputs.theme?.tokensCss)\n  d.body.className =\n    inputs.theme?.bodyClassName ?? (inputs.world === 'legacy' ? DEFAULT_CANVAS_BODY_CLASS : '')\n}\n\n/** Replace-append one identified `<style>` layer; absent CSS removes a stale element. */\nfunction appendCssLayer(d: CanvasChromeDocument, id: string, css: string | undefined): void {\n  const existing = d.getElementById(id)\n  if (existing) existing.remove()\n  if (css === undefined || css === '') return\n  const style = d.createElement('style')\n  style.id = id\n  style.textContent = css\n  d.head.appendChild(style)\n}\n\n/** `applyCanvasChrome` inputs minus the probe-owned `world`, plus the settle callback. */\nexport interface WireCanvasChromeOptions {\n  stylesheetUrl: string | null\n  kitTokensCss?: string\n  theme?: StudioCanvasTheme\n  /**\n   * Fired when the classification SETTLES — the stylesheet finished loading\n   * (or failing), or there is no stylesheet to wait for. Feeds the AD-D dev\n   * notice; may fire again on re-wires (callers dedupe by kind).\n   */\n  onStatus?: (status: CanvasThemeStatus) => void\n}\n\n/** Links whose settle listeners are already attached (re-wires must not stack them). */\nconst wiredLinks = new WeakSet<object>()\n\n/**\n * The DOM-level wiring around {@link applyCanvasChrome}: applies the chrome\n * immediately with the CURRENT classification, then re-applies once the\n * `ec-app-css` link settles (the AD-C probe reads computed custom properties,\n * which exist only after the stylesheet loads). Before the stylesheet arrives\n * neither world's styling is resolvable anyway (no consumer CSS yet), so the\n * pre-settle pass is visually neutral in both worlds.\n */\nexport function wireCanvasChrome(doc: Document, options: WireCanvasChromeOptions): void {\n  const apply = (settled: boolean, loadFailed: boolean) => {\n    const status: CanvasThemeStatus = options.stylesheetUrl\n      ? probeCanvasTheme(doc, loadFailed)\n      : { kind: 'no-stylesheet' }\n    applyCanvasChrome(doc, {\n      stylesheetUrl: options.stylesheetUrl,\n      world: canvasWorldOf(status),\n      ...(options.kitTokensCss !== undefined ? { kitTokensCss: options.kitTokensCss } : {}),\n      ...(options.theme !== undefined ? { theme: options.theme } : {}),\n    })\n    if (settled) options.onStatus?.(status)\n  }\n\n  if (!options.stylesheetUrl) {\n    apply(true, false)\n    return\n  }\n  // First pass injects the link (and everything else) with the current sample.\n  const already = doc.getElementById('ec-app-css') as HTMLLinkElement | null\n  const loaded = already?.sheet != null\n  apply(loaded, false)\n  if (loaded) return\n  const link = doc.getElementById('ec-app-css') as HTMLLinkElement | null\n  if (!link || wiredLinks.has(link)) return\n  wiredLinks.add(link)\n  link.addEventListener('load', () => apply(true, false), { once: true })\n  link.addEventListener('error', () => apply(true, true), { once: true })\n}\n"]}
+{"version":3,"file":"canvas-chrome.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StudioCanvasTheme } from '../app-views/studio-config'\nimport { CANVAS_BACKDROP_LAYER_STATEMENT, canvasChromeCss } from './canvas-chrome-css'\nimport type { CanvasWorld } from './canvas-chrome-css'\n\nexport { canvasChromeCss, CANVAS_BACKDROP_LAYER_STATEMENT } from './canvas-chrome-css'\nexport type { CanvasWorld } from './canvas-chrome-css'\n\n/**\n * The canvas iframe's document chrome (EC-389, reshaped by EC-414) — the\n * framework-free half of `BuilderCanvas`'s `wireUp` (house pattern, EC-330):\n * everything injected into the preview document lives here, in ONE pinned\n * cascade order, unit-testable without jsdom.\n *\n * EC-414 (AD-A/AD-C): the studio design system is leaving the canvas document.\n * Which world a project lives in is decided by a RUNTIME PROBE of the loaded\n * canvas stylesheet — no flag, no config, zero consumer breakage:\n *\n *   - `legacy` (marker tokens present): the merged pre-EC-414 canvas.css that\n *     bundles `@elytracms/studio/styles.css` with the consumer theme. The\n *     EC-389 body-class default and today's behavior apply EXACTLY.\n *   - `new` (markers absent): the consumer's standalone full-Tailwind theme\n *     entry. No studio utilities exist in the document, so the body-class\n *     default retires and the neutral hand-written backdrop applies instead.\n */\n\n/**\n * The studio design system's marker tokens (AD-C probe). These are the plain\n * `:root` custom properties from the studio's generated `tokens.css`, which any\n * merged legacy build carries VERBATIM — unlike `@theme inline` variables\n * (e.g. `--color-panel`), which Tailwind v4 inlines into utilities and never\n * emits as custom properties (verified against the repo's Tailwind 4.3.2; the\n * task file's `--color-panel` example probe would classify every legacy build\n * as new). Two tokens ANDed so a consumer theme that happens to define one\n * generic name (`--panel`) cannot be mistaken for the studio design system.\n */\nexport const CANVAS_LEGACY_MARKER_TOKENS = ['--panel', '--grid-line'] as const\n\n/**\n * A Tailwind v4 build unconditionally emits `--default-font-family` on\n * `:root, :host` (preflight consumes it) — its absence after a successful\n * stylesheet load means the canvas stylesheet is not a Tailwind theme entry at\n * all (AD-D item 2's \"defines no @theme tokens\" invalid state).\n */\nexport const CANVAS_TAILWIND_MARKER_TOKEN = '--default-font-family'\n\n/** The settled classification of the canvas stylesheet (AD-C + AD-D item 2). */\nexport type CanvasThemeStatus =\n  /** Pre-EC-414 merged canvas.css — studio design system + consumer theme. */\n  | { kind: 'legacy' }\n  /** The EC-414 shape: a standalone consumer Tailwind theme entry. */\n  | { kind: 'new' }\n  /** The app never provided a canvas stylesheet (`setCanvasStylesheetUrl`). */\n  | { kind: 'no-stylesheet' }\n  /** The stylesheet `<link>` failed to load. */\n  | { kind: 'stylesheet-error' }\n  /** Loaded, but defines no Tailwind theme tokens at all. */\n  | { kind: 'no-theme-tokens' }\n\n/** The raw computed-style sample the pure classifier decides from. */\nexport interface CanvasThemeProbeSample {\n  /** The `ec-app-css` link fired `error` (or never resolved). */\n  loadFailed: boolean\n  /** Computed values of {@link CANVAS_LEGACY_MARKER_TOKENS}, in order. */\n  legacyMarkers: readonly string[]\n  /** Computed value of {@link CANVAS_TAILWIND_MARKER_TOKEN}. */\n  tailwindMarker: string\n}\n\nconst present = (value: string | null | undefined): boolean =>\n  typeof value === 'string' && value.trim() !== ''\n\n/**\n * AD-C pure core: classify the canvas stylesheet world from computed-token\n * presence. Legacy needs EVERY legacy marker; a loaded stylesheet with no\n * Tailwind marker is the explicit `no-theme-tokens` invalid state.\n */\nexport function classifyCanvasTheme(sample: CanvasThemeProbeSample): CanvasThemeStatus {\n  if (sample.loadFailed) return { kind: 'stylesheet-error' }\n  if (sample.legacyMarkers.length > 0 && sample.legacyMarkers.every(present)) {\n    return { kind: 'legacy' }\n  }\n  if (present(sample.tailwindMarker)) return { kind: 'new' }\n  return { kind: 'no-theme-tokens' }\n}\n\n/** The world a status renders as: only the legacy merged stylesheet keeps the\n *  EC-389 body-class default; every other state gets the neutral backdrop. */\nexport function canvasWorldOf(status: CanvasThemeStatus): CanvasWorld {\n  return status.kind === 'legacy' ? 'legacy' : 'new'\n}\n\n/** Sample the live document's computed root styles for {@link classifyCanvasTheme}. */\nexport function probeCanvasTheme(doc: Document, loadFailed = false): CanvasThemeStatus {\n  const root = doc.documentElement\n  const win = doc.defaultView\n  if (!root || !win) return { kind: 'new' }\n  const computed = win.getComputedStyle(root)\n  return classifyCanvasTheme({\n    loadFailed,\n    legacyMarkers: CANVAS_LEGACY_MARKER_TOKENS.map((token) => computed.getPropertyValue(token)),\n    tailwindMarker: computed.getPropertyValue(CANVAS_TAILWIND_MARKER_TOKEN),\n  })\n}\n\n/**\n * The studio's DEFAULT canvas body classes — LEGACY world only (EC-389 → EC-414):\n * a consumer's `defineStudio({ canvas: { bodyClassName } })` REPLACES it\n * wholesale (including `''` to drop it), because these utility classes\n * out-cascade a site theme's `@layer base body` rules — keeping them additive\n * would make the site's own page background unreachable (the NK-004 bug). In\n * the NEW world the default retires entirely (the utilities don't exist there);\n * the chrome stylesheet's neutral backdrop takes over.\n */\nexport const DEFAULT_CANVAS_BODY_CLASS = 'bg-background text-foreground font-sans'\n\n/** Everything injected into the canvas preview document. */\nexport interface CanvasChromeInputs {\n  /** The consuming app's compiled canvas stylesheet URL; `null` → no link (tests/SSR). */\n  stylesheetUrl: string | null\n  /** Which stylesheet world the document is in (AD-C probe; see `wireCanvasChrome`). */\n  world: CanvasWorld\n  /** The consumer's canvas theme from `defineStudio({ canvas })` (EC-389). */\n  theme?: StudioCanvasTheme\n}\n\n/** The head element surface the chrome creates (link/style). */\nexport interface CanvasChromeElement {\n  id: string\n  rel?: string\n  href?: string\n  textContent: string | null\n  remove(): void\n}\n\n/**\n * The document surface `applyCanvasChrome` needs (the `canvas-dnd` house\n * pattern: a narrow structural type so the core is unit-testable with a\n * hand-rolled fake — no jsdom). A real iframe `Document` satisfies it.\n */\nexport interface CanvasChromeDocument {\n  getElementById(id: string): CanvasChromeElement | null\n  createElement(tag: string): CanvasChromeElement\n  // `object` (not CanvasChromeElement): the real DOM `appendChild<T extends Node>`\n  // is only bivariance-compatible with a parameter every Node satisfies.\n  head: { appendChild(node: object): void }\n  body: { className: string }\n}\n\n/**\n * Apply the canvas document chrome in the PINNED cascade order (EC-389/EC-414):\n *\n *   1. `ec-layer-order` — the backdrop layer STATEMENT, pinning the chrome's\n *      `ec-canvas-backdrop` layer to the bottom of the layer order (it must\n *      precede the consumer stylesheet in document order to lose to it);\n *   2. `ec-app-css` — the canvas stylesheet `<link>` (the consumer theme; in\n *      the legacy world also the studio design system);\n *   3. `ec-outline-css` — the studio's editing chrome (world-composed:\n *      backdrop + selection/DnD/toolbar/containment styles);\n *   4. `ec-canvas-theme` — the consumer's `canvas.tokensCss` (consumer overrides).\n *      (An `ec-kit-tokens` layer used to sit between 3 and 4 for an instantiated\n *      starter kit's palette; the kits went in EC-574.)\n *\n * Later elements win the cascade at equal specificity, so studio defaults <\n * consumer config — the customization-seam ordering. The body class is the\n * consumer's `bodyClassName` when given (even `''`), else the legacy default in\n * the legacy world and empty in the new world (AD-C). Safe to run repeatedly\n * (iframe onLoad + the already-loaded fast path + the probe settling):\n * links/styles are deduped by id, the chrome CSS is re-composed in place when\n * the world flips, and the theme style is re-appended so a re-wire never\n * changes who wins.\n */\nexport function applyCanvasChrome(d: CanvasChromeDocument, inputs: CanvasChromeInputs): void {\n  if (!d.getElementById('ec-layer-order')) {\n    const style = d.createElement('style')\n    style.id = 'ec-layer-order'\n    style.textContent = CANVAS_BACKDROP_LAYER_STATEMENT\n    d.head.appendChild(style)\n  }\n  if (inputs.stylesheetUrl && !d.getElementById('ec-app-css')) {\n    const link = d.createElement('link')\n    link.id = 'ec-app-css'\n    link.rel = 'stylesheet'\n    link.href = inputs.stylesheetUrl\n    d.head.appendChild(link)\n  }\n  const chromeCss = canvasChromeCss(inputs.world)\n  const outline = d.getElementById('ec-outline-css')\n  if (outline) {\n    // Probe settled on the other world: re-compose in place (position stable).\n    if (outline.textContent !== chromeCss) outline.textContent = chromeCss\n  } else {\n    const style = d.createElement('style')\n    style.id = 'ec-outline-css'\n    style.textContent = chromeCss\n    d.head.appendChild(style)\n  }\n  // The theme layer re-appends (remove + add) on every wire, so it always lands\n  // last — after a re-composed chrome layer too.\n  appendCssLayer(d, 'ec-canvas-theme', inputs.theme?.tokensCss)\n  d.body.className =\n    inputs.theme?.bodyClassName ?? (inputs.world === 'legacy' ? DEFAULT_CANVAS_BODY_CLASS : '')\n}\n\n/** Replace-append one identified `<style>` layer; absent CSS removes a stale element. */\nfunction appendCssLayer(d: CanvasChromeDocument, id: string, css: string | undefined): void {\n  const existing = d.getElementById(id)\n  if (existing) existing.remove()\n  if (css === undefined || css === '') return\n  const style = d.createElement('style')\n  style.id = id\n  style.textContent = css\n  d.head.appendChild(style)\n}\n\n/** `applyCanvasChrome` inputs minus the probe-owned `world`, plus the settle callback. */\nexport interface WireCanvasChromeOptions {\n  stylesheetUrl: string | null\n  theme?: StudioCanvasTheme\n  /**\n   * Fired when the classification SETTLES — the stylesheet finished loading\n   * (or failing), or there is no stylesheet to wait for. Feeds the AD-D dev\n   * notice; may fire again on re-wires (callers dedupe by kind).\n   */\n  onStatus?: (status: CanvasThemeStatus) => void\n}\n\n/** Links whose settle listeners are already attached (re-wires must not stack them). */\nconst wiredLinks = new WeakSet<object>()\n\n/**\n * The DOM-level wiring around {@link applyCanvasChrome}: applies the chrome\n * immediately with the CURRENT classification, then re-applies once the\n * `ec-app-css` link settles (the AD-C probe reads computed custom properties,\n * which exist only after the stylesheet loads). Before the stylesheet arrives\n * neither world's styling is resolvable anyway (no consumer CSS yet), so the\n * pre-settle pass is visually neutral in both worlds.\n */\nexport function wireCanvasChrome(doc: Document, options: WireCanvasChromeOptions): void {\n  const apply = (settled: boolean, loadFailed: boolean) => {\n    const status: CanvasThemeStatus = options.stylesheetUrl\n      ? probeCanvasTheme(doc, loadFailed)\n      : { kind: 'no-stylesheet' }\n    applyCanvasChrome(doc, {\n      stylesheetUrl: options.stylesheetUrl,\n      world: canvasWorldOf(status),\n      ...(options.theme !== undefined ? { theme: options.theme } : {}),\n    })\n    if (settled) options.onStatus?.(status)\n  }\n\n  if (!options.stylesheetUrl) {\n    apply(true, false)\n    return\n  }\n  // First pass injects the link (and everything else) with the current sample.\n  const already = doc.getElementById('ec-app-css') as HTMLLinkElement | null\n  const loaded = already?.sheet != null\n  apply(loaded, false)\n  if (loaded) return\n  const link = doc.getElementById('ec-app-css') as HTMLLinkElement | null\n  if (!link || wiredLinks.has(link)) return\n  wiredLinks.add(link)\n  link.addEventListener('load', () => apply(true, false), { once: true })\n  link.addEventListener('error', () => apply(true, true), { once: true })\n}\n"]}

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

@@ -31,6 +31,12 @@ export interface CanvasDndDeps {
     currentRoot(): ComponentNode;
     /** Manifest lookup feeding the pure drop rules. */
     getManifest(componentId: string): ManifestRules | undefined;
+    /**
+     * The composition field's top-level `allow` (EC-554; `undefined` = the field
+     * declares none) — judged by `resolveDrop` for drops whose parent is the root.
+     * A required key: the wiring must state it.
+     */
+    fieldAllow: readonly string[] | undefined;
     dispatch(action: BuilderAction): void;
     /**
      * Whether `target` sits inside the live inline editor (EC-158): a press
@@ -56,4 +62,6 @@ export declare function useCanvasDnd(doc: Document | null, deps: {
     studio: StudioRegistry;
     /** The live inline-edit session (owned by `useCanvasInlineEditing`). */
     editingRef: RefObject<ActiveInlineEdit | null>;
+    /** The composition field's top-level `allow` (EC-554) — `builder.field.allow`. */
+    fieldAllow: readonly string[] | undefined;
 }): void;

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

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