@elytracms/studio 0.0.64 → 0.0.66

package/dist/components/builder/insert-context.d.ts

@@ -23,3 +23,43 @@ import type { InsertContext } from './insert-menu.js';
 export declare function resolveInsertContext(builder: {
     present: ComponentNode;
 }, nodeId: string, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertContext | null;
+/**
+ * An in-canvas insertion position relative to a reference node (EC-405) — the
+ * DnD position vocabulary (`lib/dnd/drop-rules`), narrowed to the three the
+ * insertion affordances offer: `before`/`after` a sibling, or `into` an (empty)
+ * container. `left`/`right` (the wrap-into-columns gesture) are DnD-only.
+ */
+export type InsertPosition = 'before' | 'after' | 'into';
+/**
+ * Resolve an `InsertContext` for an EXPLICIT position relative to `nodeId`
+ * (EC-405) — the position-carrying twin of {@link resolveInsertContext}, so an
+ * affordance click at a chosen edge lands the insert at exactly that spot rather
+ * than the panel re-deriving it from the selection.
+ *
+ * The slot resolution reuses the shared DnD rules — `into` uses
+ * {@link primaryInsertSlot} (the same slot a drop `into` picks; `null` when the
+ * node accepts no children), `before`/`after` use the reference's parent slot at
+ * `index`/`index + 1` — so this surface and drag-insert can never disagree about
+ * where a position lands or what it allows. `fieldAllow` (EC-188) still constrains
+ * ONLY a direct child of the composition root, mirroring `resolveInsertContext`.
+ */
+export declare function resolveInsertContextAt(builder: {
+    present: ComponentNode;
+}, nodeId: string, position: InsertPosition, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertContext | null;
+/**
+ * Which affordance positions are actually insertable at `nodeId` (EC-405 scope 3):
+ * a position is offered only when it structurally exists AND at least one registry
+ * component may land there (the SAME slot-rule filter the tree/DnD and the blocks
+ * panel apply — {@link hasInsertableComponent} over the resolved `slotAllow`), so a
+ * blocked spot shows no dead button.
+ *
+ * An EMPTY, insertable container surfaces ONLY `into` — the meaningful action there
+ * is "add the first child", and an empty container often renders zero-height, so
+ * its own before/after edges are degenerate and would pile the three "+" buttons
+ * onto one point. A filled container and every leaf get before/after instead (each
+ * child already carries its own edge affordances, so a filled container needs no
+ * center "+").
+ */
+export declare function insertablePositions(builder: {
+    present: ComponentNode;
+}, nodeId: string, fieldAllow?: readonly string[], studio?: StudioRegistry): InsertPosition[];

package/dist/components/builder/insert-context.js

@@ -1,7 +1,8 @@
 import { getNode, getParentInfo } from '@elytracms/core/project-graph';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { shortId } from '@elytracms/studio/lib/persona/labels';
-import { intersectAllow } from './blocks-model.js';
+import { manifestRules, primaryInsertSlot } from '@elytracms/studio/lib/dnd/drop-rules';
+import { hasInsertableComponent, intersectAllow } from './blocks-model.js';
 /**
  * Where an insert lands: the canvas insert-context resolution, shared by every
  * surface that mounts the canvas engine.
@@ -26,13 +27,16 @@ export function resolveInsertContext(builder, nodeId, fieldAllow, studio = getSt
     const node = getNode(root, nodeId);
     if (!node)
         return null;
+    // EC-386: resolve against the merged slot vocabulary (`manifestRules` folds
+    // blocks-prop regions in), through the SAME `primaryInsertSlot` rule a DnD
+    // `into` uses — so a `project.Section.body`-style region receives the insert
+    // instead of silently degrading to a sibling insert.
     const manifest = studio.registry.getManifest(node.componentId);
-    const childSlot = manifest?.slots.find((s) => s.name === 'children') ??
-        manifest?.slots.find((s) => s.name !== 'outlet');
+    const childSlot = primaryInsertSlot(manifestRules(manifest));
     const ctx = childSlot
         ? {
             target: { parentId: nodeId, slot: childSlot.name },
-            slotAllow: manifest.slots.find((s) => s.name === childSlot.name)?.allow,
+            slotAllow: childSlot.allow,
             destinationLabel: `${shortId(node.componentId)} · ${childSlot.name}`,
         }
         : resolveSiblingContext(studio, root, nodeId);
@@ -48,7 +52,9 @@ export function resolveInsertContext(builder, nodeId, fieldAllow, studio = getSt
 function resolveSiblingContext(studio, root, nodeId) {
     const info = getParentInfo(root, nodeId);
     if (info) {
-        const pManifest = studio.registry.getManifest(info.parent.componentId);
+        // EC-386: the parent slot may be a blocks-prop region — look it up on the
+        // merged vocabulary so its `allow` leash still filters sibling inserts.
+        const pManifest = manifestRules(studio.registry.getManifest(info.parent.componentId));
         const allow = pManifest?.slots.find((s) => s.name === info.slot)?.allow;
         return {
             target: { parentId: info.parent.id, slot: info.slot, index: info.index + 1 },
@@ -58,4 +64,90 @@ function resolveSiblingContext(studio, root, nodeId) {
     }
     return { target: { parentId: nodeId, slot: 'children' }, destinationLabel: 'root' };
 }
+/**
+ * Resolve an `InsertContext` for an EXPLICIT position relative to `nodeId`
+ * (EC-405) — the position-carrying twin of {@link resolveInsertContext}, so an
+ * affordance click at a chosen edge lands the insert at exactly that spot rather
+ * than the panel re-deriving it from the selection.
+ *
+ * The slot resolution reuses the shared DnD rules — `into` uses
+ * {@link primaryInsertSlot} (the same slot a drop `into` picks; `null` when the
+ * node accepts no children), `before`/`after` use the reference's parent slot at
+ * `index`/`index + 1` — so this surface and drag-insert can never disagree about
+ * where a position lands or what it allows. `fieldAllow` (EC-188) still constrains
+ * ONLY a direct child of the composition root, mirroring `resolveInsertContext`.
+ */
+export function resolveInsertContextAt(builder, nodeId, position, fieldAllow, studio = getStudioRegistry()) {
+    const root = builder.present;
+    const node = getNode(root, nodeId);
+    if (!node)
+        return null;
+    let ctx;
+    if (position === 'into') {
+        // EC-386: `manifestRules` folds blocks-prop regions into the slot set, so
+        // an affordance/drop `into` a Section-style body lands in that region.
+        const manifest = studio.registry.getManifest(node.componentId);
+        const slot = primaryInsertSlot(manifestRules(manifest));
+        if (!slot)
+            return null; // the node accepts no children — no `into` position
+        ctx = {
+            target: {
+                parentId: nodeId,
+                slot: slot.name,
+                index: (node.slots?.[slot.name] ?? []).length,
+            },
+            slotAllow: slot.allow,
+            destinationLabel: `${shortId(node.componentId)} · ${slot.name}`,
+        };
+    }
+    else {
+        const info = getParentInfo(root, nodeId);
+        if (!info)
+            return null; // the root has no siblings — no before/after position
+        // EC-386: merged vocabulary — a blocks-prop parent region keeps its leash.
+        const pManifest = manifestRules(studio.registry.getManifest(info.parent.componentId));
+        ctx = {
+            target: {
+                parentId: info.parent.id,
+                slot: info.slot,
+                index: info.index + (position === 'after' ? 1 : 0),
+            },
+            slotAllow: pManifest?.slots.find((s) => s.name === info.slot)?.allow,
+            destinationLabel: `${shortId(info.parent.componentId)} · ${info.slot}`,
+        };
+    }
+    if (fieldAllow && fieldAllow.length > 0 && ctx.target.parentId === root.id) {
+        return { ...ctx, slotAllow: intersectAllow(ctx.slotAllow, fieldAllow) };
+    }
+    return ctx;
+}
+/**
+ * Which affordance positions are actually insertable at `nodeId` (EC-405 scope 3):
+ * a position is offered only when it structurally exists AND at least one registry
+ * component may land there (the SAME slot-rule filter the tree/DnD and the blocks
+ * panel apply — {@link hasInsertableComponent} over the resolved `slotAllow`), so a
+ * blocked spot shows no dead button.
+ *
+ * An EMPTY, insertable container surfaces ONLY `into` — the meaningful action there
+ * is "add the first child", and an empty container often renders zero-height, so
+ * its own before/after edges are degenerate and would pile the three "+" buttons
+ * onto one point. A filled container and every leaf get before/after instead (each
+ * child already carries its own edge affordances, so a filled container needs no
+ * center "+").
+ */
+export function insertablePositions(builder, nodeId, fieldAllow, studio = getStudioRegistry()) {
+    // Empty insertable container → into only.
+    const into = resolveInsertContextAt(builder, nodeId, 'into', fieldAllow, studio);
+    if (into && (into.target.index ?? 0) === 0 && hasInsertableComponent(studio, into.slotAllow)) {
+        return ['into'];
+    }
+    // Otherwise the sibling edges that accept something.
+    const out = [];
+    for (const position of ['before', 'after']) {
+        const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow, studio);
+        if (ctx && hasInsertableComponent(studio, ctx.slotAllow))
+            out.push(position);
+    }
+    return out;
+}
 //# sourceMappingURL=insert-context.js.map

package/dist/components/builder/insert-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"insert-context.js","sourceRoot":"","sources":["../../../src/components/builder/insert-context.ts"],"names":[],"mappings":"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","sourcesContent":["import { getNode, getParentInfo } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { shortId } from '@elytracms/studio/lib/persona/labels'\nimport { intersectAllow } from './blocks-model'\nimport type { InsertContext } from './insert-menu'\n\n/**\n * Where an insert lands: the canvas insert-context resolution, shared by every\n * surface that mounts the canvas engine.\n *\n * Extracted from the retired standalone `BuilderShell` (EC-210) so the in-CMS\n * Canvas editor (`composition-field-editor.tsx`, EC-188/AD-12) can own it without\n * importing the dead shell. No UI here — pure graph/registry resolution.\n */\n\n/**\n * Resolve where an insert lands: into the node's child slot, else as a sibling.\n *\n * `fieldAllow` (EC-188) is the composition field's TOP-LEVEL vocabulary\n * (`field.allow`). It constrains ONLY inserts that land as a direct child of the\n * active page root — the top level of a composition field value — where it is\n * intersected into `slotAllow` so forbidden components are never even offered,\n * mirroring the top-level leash in `validateCompositionValue`. Deeper inserts keep\n * following each component's own slot `allow`. Callers that omit `fieldAllow` get\n * an unconstrained top level.\n */\nexport function resolveInsertContext(\n  builder: { present: ComponentNode },\n  nodeId: string,\n  fieldAllow?: readonly string[],\n  studio: StudioRegistry = getStudioRegistry(),\n): InsertContext | null {\n  const root = builder.present\n  const node = getNode(root, nodeId)\n  if (!node) return null\n  const manifest = studio.registry.getManifest(node.componentId)\n  const childSlot =\n    manifest?.slots.find((s) => s.name === 'children') ??\n    manifest?.slots.find((s) => s.name !== 'outlet')\n  const ctx: InsertContext = childSlot\n    ? {\n        target: { parentId: nodeId, slot: childSlot.name },\n        slotAllow: manifest!.slots.find((s) => s.name === childSlot.name)?.allow,\n        destinationLabel: `${shortId(node.componentId)} · ${childSlot.name}`,\n      }\n    : resolveSiblingContext(studio, root, nodeId)\n\n  // The field vocabulary governs only the top level (a direct child of the page\n  // root). `length > 0` matches the validator, which treats an empty allow as\n  // \"allow any\" (validate.ts).\n  if (fieldAllow && fieldAllow.length > 0 && ctx.target.parentId === root.id) {\n    return { ...ctx, slotAllow: intersectAllow(ctx.slotAllow, fieldAllow) }\n  }\n  return ctx\n}\n\n/** Sibling-or-root insert context for a node with no insertable child slot. */\nfunction resolveSiblingContext(\n  studio: StudioRegistry,\n  root: ComponentNode,\n  nodeId: string,\n): InsertContext {\n  const info = getParentInfo(root, nodeId)\n  if (info) {\n    const pManifest = studio.registry.getManifest(info.parent.componentId)\n    const allow = pManifest?.slots.find((s) => s.name === info.slot)?.allow\n    return {\n      target: { parentId: info.parent.id, slot: info.slot, index: info.index + 1 },\n      slotAllow: allow,\n      destinationLabel: `${shortId(info.parent.componentId)} · ${info.slot}`,\n    }\n  }\n  return { target: { parentId: nodeId, slot: 'children' }, destinationLabel: 'root' }\n}\n"]}
+{"version":3,"file":"insert-context.js","sourceRoot":"","sources":["../../../src/components/builder/insert-context.ts"],"names":[],"mappings":"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","sourcesContent":["import { getNode, getParentInfo } from '@elytracms/core/project-graph'\nimport type { ComponentNode } from '@elytracms/core/project-graph'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { shortId } from '@elytracms/studio/lib/persona/labels'\nimport { manifestRules, primaryInsertSlot } from '@elytracms/studio/lib/dnd/drop-rules'\nimport { hasInsertableComponent, intersectAllow } from './blocks-model'\nimport type { InsertContext } from './insert-menu'\n\n/**\n * Where an insert lands: the canvas insert-context resolution, shared by every\n * surface that mounts the canvas engine.\n *\n * Extracted from the retired standalone `BuilderShell` (EC-210) so the in-CMS\n * Canvas editor (`composition-field-editor.tsx`, EC-188/AD-12) can own it without\n * importing the dead shell. No UI here — pure graph/registry resolution.\n */\n\n/**\n * Resolve where an insert lands: into the node's child slot, else as a sibling.\n *\n * `fieldAllow` (EC-188) is the composition field's TOP-LEVEL vocabulary\n * (`field.allow`). It constrains ONLY inserts that land as a direct child of the\n * active page root — the top level of a composition field value — where it is\n * intersected into `slotAllow` so forbidden components are never even offered,\n * mirroring the top-level leash in `validateCompositionValue`. Deeper inserts keep\n * following each component's own slot `allow`. Callers that omit `fieldAllow` get\n * an unconstrained top level.\n */\nexport function resolveInsertContext(\n  builder: { present: ComponentNode },\n  nodeId: string,\n  fieldAllow?: readonly string[],\n  studio: StudioRegistry = getStudioRegistry(),\n): InsertContext | null {\n  const root = builder.present\n  const node = getNode(root, nodeId)\n  if (!node) return null\n  // EC-386: resolve against the merged slot vocabulary (`manifestRules` folds\n  // blocks-prop regions in), through the SAME `primaryInsertSlot` rule a DnD\n  // `into` uses — so a `project.Section.body`-style region receives the insert\n  // instead of silently degrading to a sibling insert.\n  const manifest = studio.registry.getManifest(node.componentId)\n  const childSlot = primaryInsertSlot(manifestRules(manifest))\n  const ctx: InsertContext = childSlot\n    ? {\n        target: { parentId: nodeId, slot: childSlot.name },\n        slotAllow: childSlot.allow,\n        destinationLabel: `${shortId(node.componentId)} · ${childSlot.name}`,\n      }\n    : resolveSiblingContext(studio, root, nodeId)\n\n  // The field vocabulary governs only the top level (a direct child of the page\n  // root). `length > 0` matches the validator, which treats an empty allow as\n  // \"allow any\" (validate.ts).\n  if (fieldAllow && fieldAllow.length > 0 && ctx.target.parentId === root.id) {\n    return { ...ctx, slotAllow: intersectAllow(ctx.slotAllow, fieldAllow) }\n  }\n  return ctx\n}\n\n/** Sibling-or-root insert context for a node with no insertable child slot. */\nfunction resolveSiblingContext(studio: StudioRegistry, root: ComponentNode, nodeId: string): InsertContext {\n  const info = getParentInfo(root, nodeId)\n  if (info) {\n    // EC-386: the parent slot may be a blocks-prop region — look it up on the\n    // merged vocabulary so its `allow` leash still filters sibling inserts.\n    const pManifest = manifestRules(studio.registry.getManifest(info.parent.componentId))\n    const allow = pManifest?.slots.find((s) => s.name === info.slot)?.allow\n    return {\n      target: { parentId: info.parent.id, slot: info.slot, index: info.index + 1 },\n      slotAllow: allow,\n      destinationLabel: `${shortId(info.parent.componentId)} · ${info.slot}`,\n    }\n  }\n  return { target: { parentId: nodeId, slot: 'children' }, destinationLabel: 'root' }\n}\n\n/**\n * An in-canvas insertion position relative to a reference node (EC-405) — the\n * DnD position vocabulary (`lib/dnd/drop-rules`), narrowed to the three the\n * insertion affordances offer: `before`/`after` a sibling, or `into` an (empty)\n * container. `left`/`right` (the wrap-into-columns gesture) are DnD-only.\n */\nexport type InsertPosition = 'before' | 'after' | 'into'\n\n/**\n * Resolve an `InsertContext` for an EXPLICIT position relative to `nodeId`\n * (EC-405) — the position-carrying twin of {@link resolveInsertContext}, so an\n * affordance click at a chosen edge lands the insert at exactly that spot rather\n * than the panel re-deriving it from the selection.\n *\n * The slot resolution reuses the shared DnD rules — `into` uses\n * {@link primaryInsertSlot} (the same slot a drop `into` picks; `null` when the\n * node accepts no children), `before`/`after` use the reference's parent slot at\n * `index`/`index + 1` — so this surface and drag-insert can never disagree about\n * where a position lands or what it allows. `fieldAllow` (EC-188) still constrains\n * ONLY a direct child of the composition root, mirroring `resolveInsertContext`.\n */\nexport function resolveInsertContextAt(\n  builder: { present: ComponentNode },\n  nodeId: string,\n  position: InsertPosition,\n  fieldAllow?: readonly string[],\n  studio: StudioRegistry = getStudioRegistry(),\n): InsertContext | null {\n  const root = builder.present\n  const node = getNode(root, nodeId)\n  if (!node) return null\n\n  let ctx: InsertContext\n  if (position === 'into') {\n    // EC-386: `manifestRules` folds blocks-prop regions into the slot set, so\n    // an affordance/drop `into` a Section-style body lands in that region.\n    const manifest = studio.registry.getManifest(node.componentId)\n    const slot = primaryInsertSlot(manifestRules(manifest))\n    if (!slot) return null // the node accepts no children — no `into` position\n    ctx = {\n      target: {\n        parentId: nodeId,\n        slot: slot.name,\n        index: (node.slots?.[slot.name] ?? []).length,\n      },\n      slotAllow: slot.allow,\n      destinationLabel: `${shortId(node.componentId)} · ${slot.name}`,\n    }\n  } else {\n    const info = getParentInfo(root, nodeId)\n    if (!info) return null // the root has no siblings — no before/after position\n    // EC-386: merged vocabulary — a blocks-prop parent region keeps its leash.\n    const pManifest = manifestRules(studio.registry.getManifest(info.parent.componentId))\n    ctx = {\n      target: {\n        parentId: info.parent.id,\n        slot: info.slot,\n        index: info.index + (position === 'after' ? 1 : 0),\n      },\n      slotAllow: pManifest?.slots.find((s) => s.name === info.slot)?.allow,\n      destinationLabel: `${shortId(info.parent.componentId)} · ${info.slot}`,\n    }\n  }\n\n  if (fieldAllow && fieldAllow.length > 0 && ctx.target.parentId === root.id) {\n    return { ...ctx, slotAllow: intersectAllow(ctx.slotAllow, fieldAllow) }\n  }\n  return ctx\n}\n\n/**\n * Which affordance positions are actually insertable at `nodeId` (EC-405 scope 3):\n * a position is offered only when it structurally exists AND at least one registry\n * component may land there (the SAME slot-rule filter the tree/DnD and the blocks\n * panel apply — {@link hasInsertableComponent} over the resolved `slotAllow`), so a\n * blocked spot shows no dead button.\n *\n * An EMPTY, insertable container surfaces ONLY `into` — the meaningful action there\n * is \"add the first child\", and an empty container often renders zero-height, so\n * its own before/after edges are degenerate and would pile the three \"+\" buttons\n * onto one point. A filled container and every leaf get before/after instead (each\n * child already carries its own edge affordances, so a filled container needs no\n * center \"+\").\n */\nexport function insertablePositions(\n  builder: { present: ComponentNode },\n  nodeId: string,\n  fieldAllow?: readonly string[],\n  studio: StudioRegistry = getStudioRegistry(),\n): InsertPosition[] {\n  // Empty insertable container → into only.\n  const into = resolveInsertContextAt(builder, nodeId, 'into', fieldAllow, studio)\n  if (into && (into.target.index ?? 0) === 0 && hasInsertableComponent(studio, into.slotAllow)) {\n    return ['into']\n  }\n  // Otherwise the sibling edges that accept something.\n  const out: InsertPosition[] = []\n  for (const position of ['before', 'after'] as const) {\n    const ctx = resolveInsertContextAt(builder, nodeId, position, fieldAllow, studio)\n    if (ctx && hasInsertableComponent(studio, ctx.slotAllow)) out.push(position)\n  }\n  return out\n}\n"]}

package/dist/components/builder/node-title.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+/**
+ * Node display titles (EC-407) — the ONE helper behind both the page-tree row and
+ * the EC-404 selection-overlay frame label.
+ *
+ * A placed instance shows a derived **instance title** (its own text content, e.g. a
+ * heading's words) as the primary label, with the localized **component name** as
+ * muted secondary context; a node with no derivable instance title shows the
+ * component name alone. This replaces the old tree row's redundant `shortId` (mono
+ * id) + `title` pair — the raw id stays one hover away in the inspector header +
+ * the tree row `title=` attribute, so agent-inspectability is not lost.
+ *
+ * Placement: this lives in the studio (not `component-registry`) because the
+ * cheap rich-text head reuses `@elytracms/core/rich-text` `richTextPlainText`,
+ * which the DAG bars `component-registry` from importing. The pure derivation is
+ * mirrored from the CMS `resolveDocumentTitle` pattern (declared field/function +
+ * fallback), not shared with it.
+ */
+/**
+ * Prop names, in priority order, whose value best titles an instance (EC-407). The
+ * name-affinity phase of {@link deriveInstanceTitle}: identity-ish props first
+ * (`title`/`heading`/`label`), then generic text (`text`/`name`/`value`), then media
+ * captions (`caption`/`alt`, so an Image titles by its alt text, not its URL `src`).
+ */
+export declare const INSTANCE_TITLE_AFFINITY: readonly ["title", "heading", "label", "text", "name", "value", "caption", "alt"];
+/** Max characters of a derived instance title before it is truncated for a row/frame. */
+export declare const INSTANCE_TITLE_MAX = 64;
+export interface NodeDisplayTitle {
+    /** The main label a surface shows: the instance title when derivable, else the component name. */
+    primary: string;
+    /** The localized component name — shown as muted secondary context ONLY when an instance title distinguishes `primary`. */
+    secondary?: string;
+    /** The localized component TYPE name (always present). */
+    componentName: string;
+    /** The derived per-instance title (already truncated), when one could be derived. */
+    instanceTitle?: string;
+}
+/**
+ * Derive a placed instance's raw (untruncated) title from its effective prop values
+ * (EC-407), or `undefined` when nothing text-ish is set. Pure; mirrors the CMS
+ * `resolveDocumentTitle` precedence:
+ *
+ * 1. A declared `nodeTitle` **function** — composed from the values (throws are
+ *    swallowed so a bad pattern never breaks the tree).
+ * 2. A declared `nodeTitle` **prop name** — that prop's display text.
+ * 3. **Name-affinity heuristic** — the first {@link INSTANCE_TITLE_AFFINITY} prop
+ *    that carries display text.
+ * 4. **Fallback** — the first declared text-ish prop (declaration order) with a
+ *    non-URL value.
+ */
+export declare function deriveInstanceTitle(manifest: ComponentManifest | undefined, node: ComponentNode): string | undefined;
+/**
+ * The unified node label (EC-407) feeding the page-tree row AND the EC-404 overlay
+ * frame. `primary` is the derived instance title when one exists (truncated), else
+ * the localized component name; `secondary` is the localized component name, present
+ * only when an instance title distinguishes the row. `locale` is optional — omit it
+ * to resolve the component name against the active studio-UI locale.
+ */
+export declare function nodeDisplayTitle(manifest: ComponentManifest | undefined, node: ComponentNode, locale?: string): NodeDisplayTitle;

package/dist/components/builder/node-title.js

@@ -0,0 +1,135 @@
+import { effectivePropValues } from '@elytracms/core/component-registry';
+import { richTextPlainText } from '@elytracms/core/rich-text';
+import { componentDisplayName } from '@elytracms/studio/lib/persona/labels';
+/**
+ * Node display titles (EC-407) — the ONE helper behind both the page-tree row and
+ * the EC-404 selection-overlay frame label.
+ *
+ * A placed instance shows a derived **instance title** (its own text content, e.g. a
+ * heading's words) as the primary label, with the localized **component name** as
+ * muted secondary context; a node with no derivable instance title shows the
+ * component name alone. This replaces the old tree row's redundant `shortId` (mono
+ * id) + `title` pair — the raw id stays one hover away in the inspector header +
+ * the tree row `title=` attribute, so agent-inspectability is not lost.
+ *
+ * Placement: this lives in the studio (not `component-registry`) because the
+ * cheap rich-text head reuses `@elytracms/core/rich-text` `richTextPlainText`,
+ * which the DAG bars `component-registry` from importing. The pure derivation is
+ * mirrored from the CMS `resolveDocumentTitle` pattern (declared field/function +
+ * fallback), not shared with it.
+ */
+/**
+ * Prop names, in priority order, whose value best titles an instance (EC-407). The
+ * name-affinity phase of {@link deriveInstanceTitle}: identity-ish props first
+ * (`title`/`heading`/`label`), then generic text (`text`/`name`/`value`), then media
+ * captions (`caption`/`alt`, so an Image titles by its alt text, not its URL `src`).
+ */
+export const INSTANCE_TITLE_AFFINITY = [
+    'title',
+    'heading',
+    'label',
+    'text',
+    'name',
+    'value',
+    'caption',
+    'alt',
+];
+/** Max characters of a derived instance title before it is truncated for a row/frame. */
+export const INSTANCE_TITLE_MAX = 64;
+/** A value that looks like a URL / path / protocol — never a useful title. */
+const URL_LIKE = /^(https?:\/\/|\/|#|mailto:|tel:|data:)/i;
+/**
+ * Non-empty display text a text-ish prop value carries, else `undefined`.
+ * - `text` props: the trimmed string (rejected when `rejectUrl` and it looks URL-ish).
+ * - `richText` props: the cheap first-run plain-text head (`richTextPlainText`).
+ * - everything else (number/boolean/date/select/relation/asset/blocks/object): not text-ish.
+ */
+function propDisplayText(field, value, rejectUrl) {
+    if (field.type === 'text') {
+        if (typeof value !== 'string')
+            return undefined;
+        const trimmed = value.trim();
+        if (trimmed.length === 0)
+            return undefined;
+        if (rejectUrl && URL_LIKE.test(trimmed))
+            return undefined;
+        return trimmed;
+    }
+    if (field.type === 'richText') {
+        const head = richTextPlainText(value)?.trim();
+        return head && head.length > 0 ? head : undefined;
+    }
+    return undefined;
+}
+/**
+ * Derive a placed instance's raw (untruncated) title from its effective prop values
+ * (EC-407), or `undefined` when nothing text-ish is set. Pure; mirrors the CMS
+ * `resolveDocumentTitle` precedence:
+ *
+ * 1. A declared `nodeTitle` **function** — composed from the values (throws are
+ *    swallowed so a bad pattern never breaks the tree).
+ * 2. A declared `nodeTitle` **prop name** — that prop's display text.
+ * 3. **Name-affinity heuristic** — the first {@link INSTANCE_TITLE_AFFINITY} prop
+ *    that carries display text.
+ * 4. **Fallback** — the first declared text-ish prop (declaration order) with a
+ *    non-URL value.
+ */
+export function deriveInstanceTitle(manifest, node) {
+    if (!manifest)
+        return undefined;
+    const values = effectivePropValues(manifest, node);
+    const declared = manifest.nodeTitle;
+    if (typeof declared === 'function') {
+        try {
+            const out = declared(values);
+            if (typeof out === 'string' && out.trim())
+                return out.trim();
+        }
+        catch {
+            // A throwing title pattern must never break the editor — fall through.
+        }
+    }
+    else if (typeof declared === 'string') {
+        const field = manifest.props[declared];
+        const text = field ? propDisplayText(field, values[declared], false) : undefined;
+        if (text)
+            return text;
+    }
+    for (const name of INSTANCE_TITLE_AFFINITY) {
+        const field = manifest.props[name];
+        if (!field)
+            continue;
+        const text = propDisplayText(field, values[name], false);
+        if (text)
+            return text;
+    }
+    for (const [name, field] of Object.entries(manifest.props)) {
+        const text = propDisplayText(field, values[name], true);
+        if (text)
+            return text;
+    }
+    return undefined;
+}
+/** Truncate a title for a compact row / frame bar, appending an ellipsis. */
+function truncate(value, max) {
+    return value.length <= max ? value : `${value.slice(0, max - 1).trimEnd()}…`;
+}
+/**
+ * The unified node label (EC-407) feeding the page-tree row AND the EC-404 overlay
+ * frame. `primary` is the derived instance title when one exists (truncated), else
+ * the localized component name; `secondary` is the localized component name, present
+ * only when an instance title distinguishes the row. `locale` is optional — omit it
+ * to resolve the component name against the active studio-UI locale.
+ */
+export function nodeDisplayTitle(manifest, node, locale) {
+    const componentName = componentDisplayName(node.componentId, manifest, locale);
+    const raw = deriveInstanceTitle(manifest, node);
+    const instanceTitle = raw ? truncate(raw, INSTANCE_TITLE_MAX) : undefined;
+    return {
+        componentName,
+        instanceTitle,
+        primary: instanceTitle ?? componentName,
+        secondary: instanceTitle ? componentName : undefined,
+    };
+}
+//# sourceMappingURL=node-title.js.map

package/dist/components/builder/node-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-title.js","sourceRoot":"","sources":["../../../src/components/builder/node-title.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentNode } from '@elytracms/core/project-graph'\nimport type { ComponentManifest, PropField } from '@elytracms/core/component-registry'\nimport { effectivePropValues } from '@elytracms/core/component-registry'\nimport { richTextPlainText } from '@elytracms/core/rich-text'\nimport { componentDisplayName } from '@elytracms/studio/lib/persona/labels'\n\n/**\n * Node display titles (EC-407) — the ONE helper behind both the page-tree row and\n * the EC-404 selection-overlay frame label.\n *\n * A placed instance shows a derived **instance title** (its own text content, e.g. a\n * heading's words) as the primary label, with the localized **component name** as\n * muted secondary context; a node with no derivable instance title shows the\n * component name alone. This replaces the old tree row's redundant `shortId` (mono\n * id) + `title` pair — the raw id stays one hover away in the inspector header +\n * the tree row `title=` attribute, so agent-inspectability is not lost.\n *\n * Placement: this lives in the studio (not `component-registry`) because the\n * cheap rich-text head reuses `@elytracms/core/rich-text` `richTextPlainText`,\n * which the DAG bars `component-registry` from importing. The pure derivation is\n * mirrored from the CMS `resolveDocumentTitle` pattern (declared field/function +\n * fallback), not shared with it.\n */\n\n/**\n * Prop names, in priority order, whose value best titles an instance (EC-407). The\n * name-affinity phase of {@link deriveInstanceTitle}: identity-ish props first\n * (`title`/`heading`/`label`), then generic text (`text`/`name`/`value`), then media\n * captions (`caption`/`alt`, so an Image titles by its alt text, not its URL `src`).\n */\nexport const INSTANCE_TITLE_AFFINITY = [\n  'title',\n  'heading',\n  'label',\n  'text',\n  'name',\n  'value',\n  'caption',\n  'alt',\n] as const\n\n/** Max characters of a derived instance title before it is truncated for a row/frame. */\nexport const INSTANCE_TITLE_MAX = 64\n\n/** A value that looks like a URL / path / protocol — never a useful title. */\nconst URL_LIKE = /^(https?:\\/\\/|\\/|#|mailto:|tel:|data:)/i\n\nexport interface NodeDisplayTitle {\n  /** The main label a surface shows: the instance title when derivable, else the component name. */\n  primary: string\n  /** The localized component name — shown as muted secondary context ONLY when an instance title distinguishes `primary`. */\n  secondary?: string\n  /** The localized component TYPE name (always present). */\n  componentName: string\n  /** The derived per-instance title (already truncated), when one could be derived. */\n  instanceTitle?: string\n}\n\n/**\n * Non-empty display text a text-ish prop value carries, else `undefined`.\n * - `text` props: the trimmed string (rejected when `rejectUrl` and it looks URL-ish).\n * - `richText` props: the cheap first-run plain-text head (`richTextPlainText`).\n * - everything else (number/boolean/date/select/relation/asset/blocks/object): not text-ish.\n */\nfunction propDisplayText(field: PropField, value: unknown, rejectUrl: boolean): string | undefined {\n  if (field.type === 'text') {\n    if (typeof value !== 'string') return undefined\n    const trimmed = value.trim()\n    if (trimmed.length === 0) return undefined\n    if (rejectUrl && URL_LIKE.test(trimmed)) return undefined\n    return trimmed\n  }\n  if (field.type === 'richText') {\n    const head = richTextPlainText(value)?.trim()\n    return head && head.length > 0 ? head : undefined\n  }\n  return undefined\n}\n\n/**\n * Derive a placed instance's raw (untruncated) title from its effective prop values\n * (EC-407), or `undefined` when nothing text-ish is set. Pure; mirrors the CMS\n * `resolveDocumentTitle` precedence:\n *\n * 1. A declared `nodeTitle` **function** — composed from the values (throws are\n *    swallowed so a bad pattern never breaks the tree).\n * 2. A declared `nodeTitle` **prop name** — that prop's display text.\n * 3. **Name-affinity heuristic** — the first {@link INSTANCE_TITLE_AFFINITY} prop\n *    that carries display text.\n * 4. **Fallback** — the first declared text-ish prop (declaration order) with a\n *    non-URL value.\n */\nexport function deriveInstanceTitle(\n  manifest: ComponentManifest | undefined,\n  node: ComponentNode,\n): string | undefined {\n  if (!manifest) return undefined\n  const values = effectivePropValues(manifest, node)\n\n  const declared = manifest.nodeTitle\n  if (typeof declared === 'function') {\n    try {\n      const out = declared(values)\n      if (typeof out === 'string' && out.trim()) return out.trim()\n    } catch {\n      // A throwing title pattern must never break the editor — fall through.\n    }\n  } else if (typeof declared === 'string') {\n    const field = manifest.props[declared]\n    const text = field ? propDisplayText(field, values[declared], false) : undefined\n    if (text) return text\n  }\n\n  for (const name of INSTANCE_TITLE_AFFINITY) {\n    const field = manifest.props[name]\n    if (!field) continue\n    const text = propDisplayText(field, values[name], false)\n    if (text) return text\n  }\n\n  for (const [name, field] of Object.entries(manifest.props)) {\n    const text = propDisplayText(field, values[name], true)\n    if (text) return text\n  }\n\n  return undefined\n}\n\n/** Truncate a title for a compact row / frame bar, appending an ellipsis. */\nfunction truncate(value: string, max: number): string {\n  return value.length <= max ? value : `${value.slice(0, max - 1).trimEnd()}…`\n}\n\n/**\n * The unified node label (EC-407) feeding the page-tree row AND the EC-404 overlay\n * frame. `primary` is the derived instance title when one exists (truncated), else\n * the localized component name; `secondary` is the localized component name, present\n * only when an instance title distinguishes the row. `locale` is optional — omit it\n * to resolve the component name against the active studio-UI locale.\n */\nexport function nodeDisplayTitle(\n  manifest: ComponentManifest | undefined,\n  node: ComponentNode,\n  locale?: string,\n): NodeDisplayTitle {\n  const componentName = componentDisplayName(node.componentId, manifest, locale)\n  const raw = deriveInstanceTitle(manifest, node)\n  const instanceTitle = raw ? truncate(raw, INSTANCE_TITLE_MAX) : undefined\n  return {\n    componentName,\n    instanceTitle,\n    primary: instanceTitle ?? componentName,\n    secondary: instanceTitle ? componentName : undefined,\n  }\n}\n"]}

package/dist/components/builder/page-tree.js

@@ -2,20 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Boxes, ChevronUp, ChevronDown, ClipboardCopy, ClipboardPaste, ClipboardX, Copy, EyeOff, Filter, MoreHorizontal, Plus, Trash2, Unlink, } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { getParentInfo } from '@elytracms/core/project-graph';
-import { canNestInto, containerFlowAxis, dropIndicatorFor, dropPositionForPointer, resolveDrop, } from '@elytracms/studio/lib/dnd/drop-rules';
+import { canNestInto, containerFlowAxis, dropIndicatorFor, dropPositionForPointer, manifestRules, resolveDrop, } from '@elytracms/studio/lib/dnd/drop-rules';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { shortId } from '@elytracms/studio/lib/persona/labels';
-import { translate } from '@elytracms/studio/lib/i18n';
+import { translate, useUiLocale } from '@elytracms/studio/lib/i18n';
 import { useData } from '@elytracms/studio/lib/data';
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Row, Spacer, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { useCollab } from '../collab/collab-context.js';
 import { useBuilder } from './builder-store.js';
 import { attachClipboardListeners, useStudioClipboard } from './clipboard-actions.js';
+import { attachDeleteKeyListener } from './delete-key.js';
+import { nodeDisplayTitle } from './node-title.js';
 import { useReuse } from './reuse-context.js';
 import { activeDrag, beginDrag, endDrag, onDragSessionEnd } from './drag-session.js';
 function flatten(node, depth, rows, meta) {
-    rows.push({ id: node.id, componentId: node.componentId, depth, ...meta, condition: node.condition });
+    rows.push({ id: node.id, componentId: node.componentId, node, depth, ...meta, condition: node.condition });
     for (const children of Object.values(node.slots ?? {})) {
         children.forEach((child, i) => flatten(child, depth + 1, rows, {
             isFirst: i === 0,
@@ -40,6 +42,7 @@ export function PageTree({ onAddChild }) {
     const studio = getStudioRegistry();
     const data = useData();
     const collab = useCollab();
+    const uiLocale = useUiLocale();
     const rows = [];
     flatten(builder.present, 0, rows, { isFirst: true, isLast: true, isRoot: true });
     // Copy/cut/paste (EC-175): keyboard shortcuts for the whole studio window
@@ -59,6 +62,20 @@ export function PageTree({ onAddChild }) {
             getSelection: () => window.getSelection(),
         });
     }, [clipboard, readOnly]);
+    // Delete/Backspace removes the selected node from the tree side too (EC-404),
+    // beside the clipboard shortcuts. Inert in the read-only published preview and
+    // while focus is in a form field / inline editor (isEditingContext).
+    const { dispatch } = builder;
+    const rootId = builder.present.id;
+    useEffect(() => {
+        if (readOnly)
+            return;
+        return attachDeleteKeyListener(window, {
+            getSelectedId: () => selectedIdRef.current,
+            remove: (id) => dispatch({ type: 'remove', id }),
+            getRootId: () => rootId,
+        });
+    }, [readOnly, rootId, dispatch]);
     // Drag & drop (EC-160): eligibility comes from the same pure rule set the
     // canvas uses (`lib/dnd/drop-rules`); the tree only renders the resolution.
     // One eligible drop dispatches exactly one move/insert action.
@@ -71,7 +88,9 @@ export function PageTree({ onAddChild }) {
         setDrop(null);
     };
     useEffect(() => onDragSessionEnd(() => clearDrop()), []);
-    const getManifest = (id) => studio.registry.getManifest(id);
+    // EC-386: adapt through `manifestRules` so blocks-prop regions (e.g. a
+    // Section's `body`) are drop targets with their `allow` leash, like raw slots.
+    const getManifest = (id) => manifestRules(studio.registry.getManifest(id));
     function handleRowDragStart(row, e) {
         if (row.isRoot) {
             e.preventDefault();
@@ -165,6 +184,7 @@ export function PageTree({ onAddChild }) {
                         clearDrop();
                 }, children: rows.map((row) => {
                     const manifest = studio.registry.getManifest(row.componentId);
+                    const title = nodeDisplayTitle(manifest, row.node, uiLocale);
                     const selected = row.id === builder.selectedId;
                     const hovered = row.id === builder.hoveredId;
                     // EC-088: indicate condition-gated nodes; flag the currently-hidden ones.
@@ -179,7 +199,7 @@ export function PageTree({ onAddChild }) {
                                 ? 'bg-muted text-foreground'
                                 : 'text-muted-foreground', drop?.rowId === row.id && drop.indicator
                             ? ROW_DROP_CLASSES[drop.indicator]
-                            : undefined), children: [_jsxs("button", { type: "button", onClick: () => builder.dispatch({ type: 'select', id: row.id }), className: "flex min-w-0 flex-1 items-center gap-1.5 py-1", style: { paddingLeft: `${6 + row.depth * 14}px` }, children: [_jsx("span", { className: cn('truncate font-mono', condState === 'hidden' && 'line-through opacity-70'), children: shortId(row.componentId) }), manifest?.title ? (_jsx("span", { className: "truncate text-muted-foreground/70", children: manifest.title })) : null, condState === 'hidden' ? (_jsx(EyeOff, { className: "size-3 shrink-0 text-warning", "aria-label": translate('builder.pageTree.hiddenByCondition') })) : condState === 'visible' ? (_jsx(Filter, { className: "size-3 shrink-0 text-muted-foreground/60", "aria-label": translate('builder.pageTree.conditional') })) : null] }), _jsxs("div", { className: cn('flex shrink-0 items-center gap-0.5', selected
+                            : undefined), children: [_jsxs("button", { type: "button", onClick: () => builder.dispatch({ type: 'select', id: row.id }), title: row.componentId, className: "flex min-w-0 flex-1 items-center gap-1.5 py-1", style: { paddingLeft: `${6 + row.depth * 14}px` }, children: [_jsx("span", { className: cn('truncate', condState === 'hidden' && 'line-through opacity-70'), children: title.primary }), title.secondary ? (_jsx("span", { className: "truncate text-muted-foreground/70", children: title.secondary })) : null, condState === 'hidden' ? (_jsx(EyeOff, { className: "size-3 shrink-0 text-warning", "aria-label": translate('builder.pageTree.hiddenByCondition') })) : condState === 'visible' ? (_jsx(Filter, { className: "size-3 shrink-0 text-muted-foreground/60", "aria-label": translate('builder.pageTree.conditional') })) : null] }), _jsxs("div", { className: cn('flex shrink-0 items-center gap-0.5', selected
                                     ? 'opacity-100'
                                     : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'), children: [_jsx(IconAction, { label: translate('builder.pageTree.addChild'), onClick: () => onAddChild(row.id), children: _jsx(Plus, {}) }), _jsx(RowActionsMenu, { row: row, builder: builder, clipboard: clipboard })] })] }, row.id));
                 }) })] }));