@vectoriox/iox-builder 8.0.0 → 9.0.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, effect, Optional, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, Optional, Inject, inject, NgZone, EventEmitter, createComponent, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, effect, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i16 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4 from '@angular/cdk/drag-drop';
+import * as i5 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AccordionModule } from 'primeng/accordion';
 import * as i17 from 'primeng/button';
@@ -16,7 +16,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, Breakpoint, BREAKPOINTS, countOverrides, setOverride, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, LinkType, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -784,6 +784,24 @@ function reissueIdentityTraits(node) {
         trait.default = `${prefix}-${freshId()}`;
     }
 }
+/**
+ * A NEW node is born with its identity: an empty identity trait (a palette Form's `formId`) is issued,
+ * one already set (a preset's `contact-…`) is kept. A Form inserted from the palette used to keep
+ * `formId: ''` — its submissions posted to `forms//submit` and nothing was ever stored.
+ */
+function issueIdentityTraits(root) {
+    for (const trait of (root.traits ?? [])) {
+        if (!trait?.name || !REGENERATED_TRAITS.has(trait.name))
+            continue;
+        if (trait.default === undefined || trait.default === '')
+            trait.default = `${IDENTITY_PREFIX[trait.name] ?? trait.name}-${freshId()}`;
+    }
+    for (const child of root.children ?? [])
+        if (child)
+            issueIdentityTraits(child);
+}
+/** The readable prefix a freshly issued identity carries (`form-a1b2c3`). */
+const IDENTITY_PREFIX = { formId: 'form' };
 function regenerateNodeIds(root, opts = {}) {
     const idMap = new Map();
     const assign = (node) => {
@@ -1601,6 +1619,8 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.save': 'Save',
     'builder.chrome.preview': 'Preview',
     'builder.chrome.addImage': 'Add image',
+    'builder.chrome.refuseNestedForm': 'A form can’t go inside another form. Place it outside the form.',
+    'builder.chrome.refuseStateBlock': 'Success and error messages belong to their form. They can’t be placed on their own.',
 });
 const CANVAS_EMPTY_IMAGE_LABEL_KEY = 'builder.chrome.addImage';
 const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_KEY];
@@ -1651,6 +1671,7 @@ class ComponentRegistryService {
         if (!config)
             return null;
         wearDefaultStyles(config);
+        issueIdentityTraits(config);
         return config;
     }
     /**
@@ -1921,6 +1942,93 @@ function resolveDragTarget(el, selectedElement, isDragHandle) {
     return (isDragHandle || isDescendantOfSelected) ? selectedElement : el;
 }
 
+/**
+ * What may NOT be placed where — the ONE rule every insert path asks (drag, click-to-insert, quick-add,
+ * the Form presets, paste, duplicate). Everything not refused here is accepted: any container-capable
+ * node takes any child, a Form included.
+ */
+var InsertRefusal;
+(function (InsertRefusal) {
+    /** A form inside a form — fields belong to their NEAREST form (forms plan D1), and HTML forbids it. */
+    InsertRefusal["NestedForm"] = "nestedForm";
+    /** A Success / Error block is part of its form's state machine; it is never placed on its own. */
+    InsertRefusal["StateBlockAlone"] = "stateBlockAlone";
+})(InsertRefusal || (InsertRefusal = {}));
+const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
+/** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
+const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
+    [InsertRefusal.NestedForm]: 'builder.chrome.refuseNestedForm',
+    [InsertRefusal.StateBlockAlone]: 'builder.chrome.refuseStateBlock',
+});
+/** The refusal in the host's language (the library's English when no host resolver is provided). */
+function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
+    const key = INSERT_REFUSAL_LABEL_KEYS[reason];
+    return labels(key, BUILDER_CHROME_EN[key]);
+}
+function containsType(node, type) {
+    if (node.type === type)
+        return true;
+    return (node.children ?? []).some(child => containsType(child, type));
+}
+/**
+ * Why `node` may not be inserted under `ancestors` (outermost first, the new parent last; empty = the page),
+ * or null when it may. `node` is the whole subtree being placed — a Container holding a Form is refused
+ * inside a Form just as a bare Form is. Reordering a node inside its CURRENT parent is not an insert and
+ * never asks.
+ */
+function insertRefusal(node, ancestors) {
+    if (!node)
+        return null;
+    if (node.type && FORM_STATE_BLOCK_TYPES.has(node.type))
+        return InsertRefusal.StateBlockAlone;
+    if (ancestors.some(a => a?.type === FORM_TYPE) && containsType(node, FORM_TYPE))
+        return InsertRefusal.NestedForm;
+    return null;
+}
+
+/**
+ * ROOT ESCAPE — near the top or bottom edge of a ROOT-level container the drop goes to the PAGE, between
+ * root containers, instead of inside the container. This file is the decision; DragEngineService only
+ * measures and applies it.
+ *
+ * ⚠️ The bug this replaced (2026-10-19, "a Form cannot be inserted into a Section / Container / Linked
+ * Container"): escape switched on when the pointer was in the edge band and the PREVIOUS target was the
+ * same container — which is also true on the second sample after ENTERING through the band — and it only
+ * switched off once the pointer LEFT the container. So approaching a root container from above or below
+ * locked every drop inside it to the page, even at its centre; an empty (short) container was almost
+ * always entered that way. Now escape needs a move OUTWARD — from the container's inner region to its
+ * edge — and it ends as soon as the pointer is back in the inner region.
+ */
+/** The edge band on a tall container, in screen px. */
+const ROOT_ESCAPE_PX = 14;
+var RootZone;
+(function (RootZone) {
+    RootZone["Outside"] = "outside";
+    RootZone["Edge"] = "edge";
+    RootZone["Inner"] = "inner";
+})(RootZone || (RootZone = {}));
+/** The band shrinks on a short container (a quarter of its height), so its middle stays a drop target. */
+function rootEscapeBand(height) {
+    return Math.min(ROOT_ESCAPE_PX, Math.max(0, height) / 4);
+}
+/** Where the pointer's y sits relative to a root container's vertical extent. */
+function rootZone(py, top, bottom) {
+    if (py < top || py > bottom)
+        return RootZone.Outside;
+    const band = rootEscapeBand(bottom - top);
+    return py <= top + band || py >= bottom - band ? RootZone.Edge : RootZone.Inner;
+}
+/**
+ * Whether this sample escapes `rootId` to the page: the pointer is on its edge band AND it either was
+ * already escaping it or has just moved out to the edge from its inner region. Entering from outside
+ * through the band never escapes.
+ */
+function escapesRoot(rootId, zone, memory) {
+    if (zone !== RootZone.Edge)
+        return false;
+    return memory.escapingFor === rootId || memory.innerOf === rootId;
+}
+
 /**
  * CSS container name of the builder canvas frame (and of the global-elements overlay). Breakpoint
  * rules are emitted as `@container iox-canvas (max-width: …)`: the frame's layout width IS the
@@ -2462,6 +2570,11 @@ const MOTION_EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
 // Lower = more lag/weight, higher = snappier. 0.35 catches up to the pointer
 // within ~5-6 frames (~80-100ms) — reads as "responsive but weighted".
 const GHOST_FOLLOW_SMOOTHING = 0.35;
+const TARGET_CHIP_BG = '#6366f1';
+// The admin chrome's danger fill (toolbar.component.scss's unpublish hover reads the same token).
+const REFUSED_CHIP_BG = 'var(--iox-danger-text, #8E211A)';
+/** On the drop-target overlay while the target refuses the dragged payload (styled by the host). */
+const DROP_REFUSED_CLASS = 'iox-drop-target-overlay--refused';
 function deepCloneNode(node) {
     const clone = JSON.parse(JSON.stringify(node));
     // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
@@ -2470,10 +2583,12 @@ function deepCloneNode(node) {
     return clone;
 }
 class DragEngineService {
-    constructor(registry, symbolRegistry, overlayService) {
+    constructor(registry, symbolRegistry, overlayService, labels) {
         this.registry = registry;
         this.symbolRegistry = symbolRegistry;
         this.overlayService = overlayService;
+        /** Every insert the builder refused, for the host to say on screen (a toast). */
+        this.insertRefused$ = new Subject();
         // ── Drop-zone registry ────────────────────────────────────
         this.ids = [];
         this.elMap = new Map();
@@ -2524,9 +2639,13 @@ class DragEngineService {
         this._scale = 1;
         // ── Dropzone rect cache — snapshotted at drag start and on scroll ─────────
         this._dropzoneRectCache = new Map();
-        // ── Root-escape ───────────────────────────────────────────
-        this.ROOT_ESCAPE_PX = 14;
+        // ── Root-escape (decision: utils/root-escape.util.ts) ─────
         this._rootEscapeActiveFor = null;
+        /** The root container whose inner region held the previous sample. */
+        this._innerRootId = null;
+        // ── Drop refusal (utils/insert-rules.util.ts) ─────────────
+        /** Why the current target would refuse the dragged payload; null = it accepts. */
+        this._targetRefusal = null;
         // ─────────────────────────────────────────────────────────
         // Draggable registration
         // ─────────────────────────────────────────────────────────
@@ -2544,10 +2663,47 @@ class DragEngineService {
             this._overlay.style.top = this._ghostY + 'px';
             this._ghostRaf = requestAnimationFrame(this._ghostFollowStep);
         };
+        this.labels = labels ?? defaultBuilderLabels;
+    }
+    /**
+     * The ONE acceptance check for every insert path: null when `data` (a panel payload or a node) may go
+     * under `ancestors`; otherwise the refusal, already announced on `insertRefused$`.
+     */
+    refuseInsert(data, ancestors) {
+        const reason = insertRefusal(this.payloadNode(data), ancestors);
+        if (reason)
+            this.insertRefused$.next({ reason, message: insertRefusalLabel(reason, this.labels) });
+        return reason;
+    }
+    /** The node a payload WOULD insert, without building it: a type string, a block/symbol, or a node. */
+    payloadNode(data) {
+        if (typeof data === 'string')
+            return { type: data };
+        if (!data || typeof data !== 'object')
+            return null;
+        const blk = data;
+        const symbolNode = blk.symbolId ? this.symbolRegistry.getSymbol(blk.symbolId)?.node : null;
+        return (symbolNode ?? blk.node ?? blk);
+    }
+    /** The nodes a dropzone sits in, outermost first, its own node last — read from the DOM, which is
+     *  where a dropzone id lives. Empty for the page itself. */
+    dropzoneAncestors(id) {
+        const out = [];
+        for (let el = this._getEl(id); el && el.id !== 'canvas-preview'; el = el.parentElement) {
+            const match = this.overlayService.findNodeByElement(el);
+            if (match)
+                out.unshift(match.node);
+        }
+        return out;
     }
     // ── Shared drop handler — used by all layout components ───────────────────
     handleDrop(children, event, dropListId, cdr, afterDrop) {
         const { payload, insertIndex } = event;
+        const changesParent = payload.type === 'external' || payload.sourceId !== dropListId;
+        if (changesParent && this.refuseInsert(payload.data, this.dropzoneAncestors(dropListId))) {
+            afterDrop?.();
+            return;
+        }
         if (payload.type === 'external') {
             const node = this.materialize(payload.data);
             if (node) {
@@ -2621,7 +2777,9 @@ class DragEngineService {
      * `dropComplete$` exactly like a drop, so the builder selects the new node and records one undo
      * step through the same path. Returns the inserted node, or null if the payload was unusable.
      */
-    insertPayload(children, index, data) {
+    insertPayload(children, index, data, ancestors = []) {
+        if (this.refuseInsert(data, ancestors))
+            return null;
         const node = this.materialize(data);
         if (!node)
             return null;
@@ -2667,7 +2825,7 @@ class DragEngineService {
     registerDropzone(id, el, data, cdr, dropCb, postDrop) {
         if (!id)
             return;
-        // Stamp id on element so DOM-walk helpers (_isRootContainer) find it.
+        // Stamp id on element so DOM-walk helpers (_rootContainerOf, dropzoneAncestors) find it.
         el.id = id;
         if (!this.ids.includes(id)) {
             this.ids = [...this.ids, id];
@@ -2773,6 +2931,8 @@ class DragEngineService {
         this._sourceEl = el;
         this._isDragging = true;
         this._rootEscapeActiveFor = null;
+        this._innerRootId = null;
+        this._targetRefusal = null;
         // Suppress native text selection for the duration of the drag — without this,
         // dragging the pointer across any text (canvas or sidebar) selects/highlights it.
         document.body.classList.add('iox-dragging');
@@ -2887,6 +3047,8 @@ class DragEngineService {
         this._removeTargetOverlay();
         document.querySelectorAll('.iox-drag-over').forEach(el => el.classList.remove('iox-drag-over'));
         this._rootEscapeActiveFor = null;
+        this._innerRootId = null;
+        this._targetRefusal = null;
         this._isDragging = false;
         this._payload = null;
         this._sourceEl = null;
@@ -2974,55 +3136,14 @@ class DragEngineService {
                 }
             }
         }
-        // Root-escape with hysteresis.
-        // Purpose: when the cursor is near the top/bottom edge of a root-level
-        // section, treat the target as canvas-preview so the user can insert
-        // between root sections.
-        //
-        // IMPORTANT: only activate if the cursor was ALREADY inside this section
-        // (i.e. deepTarget is the section itself or a nested child of it).
-        // Without this guard, crossing from Section A into the top 14px of
-        // Section C immediately locks the target to canvas-preview and prevents
-        // the user from ever reaching Section C's nested containers.
-        if (this._rootEscapeActiveFor) {
-            const escEl = this._getEl(this._rootEscapeActiveFor);
-            if (escEl) {
-                const r = this._dropzoneRectCache.get(this._rootEscapeActiveFor) ?? escEl.getBoundingClientRect();
-                const inside = px >= r.left && px <= r.right && py >= r.top && py <= r.bottom;
-                if (inside) {
-                    bestId = 'canvas-preview';
-                }
-                else {
-                    this._rootEscapeActiveFor = null;
-                }
-            }
-            else {
-                this._rootEscapeActiveFor = null;
-            }
-        }
-        if (!this._rootEscapeActiveFor &&
-            bestId && bestId !== 'canvas-preview' && this._isRootContainer(bestId)) {
-            const el = this._getEl(bestId);
-            if (el) {
-                const rect = this._dropzoneRectCache.get(bestId) ?? el.getBoundingClientRect();
-                const nearEdge = py <= rect.top + this.ROOT_ESCAPE_PX ||
-                    py >= rect.bottom - this.ROOT_ESCAPE_PX;
-                // Only escape if we were already targeting this section or
-                // something nested inside it — not when crossing into it fresh.
-                const wasInsideThisSection = this._deepTargetId === bestId ||
-                    this._isDescendantDropzone(this._deepTargetId, bestId);
-                if (nearEdge && wasInsideThisSection) {
-                    this._rootEscapeActiveFor = bestId;
-                    bestId = 'canvas-preview';
-                }
-            }
-        }
+        bestId = this._applyRootEscape(bestId, py);
         if (bestId !== this._deepTargetId) {
             if (this._deepTargetId) {
                 const old = this._getEl(this._deepTargetId);
                 old?.classList.remove('iox-drag-over');
             }
             this._deepTargetId = bestId;
+            this._targetRefusal = this._refusalAt(bestId);
             if (bestId) {
                 this._getEl(bestId)?.classList.add('iox-drag-over');
             }
@@ -3034,6 +3155,50 @@ class DragEngineService {
             this._indicatorContainerId = null;
         }
     }
+    /** Near a ROOT container's edge, after moving there from its inner region, the drop goes to the page. */
+    _applyRootEscape(bestId, py) {
+        const rootId = bestId && bestId !== 'canvas-preview' ? this._rootContainerOf(bestId) : null;
+        const rootEl = rootId ? this._getEl(rootId) : null;
+        const rect = rootId && rootEl ? (this._dropzoneRectCache.get(rootId) ?? rootEl.getBoundingClientRect()) : null;
+        const zone = rect ? rootZone(py, rect.top, rect.bottom) : RootZone.Outside;
+        const escape = !!rootId && rootId === bestId &&
+            escapesRoot(rootId, zone, { escapingFor: this._rootEscapeActiveFor, innerOf: this._innerRootId });
+        this._rootEscapeActiveFor = escape ? rootId : null;
+        this._innerRootId = zone === RootZone.Inner ? rootId : null;
+        return escape ? 'canvas-preview' : bestId;
+    }
+    /** The ROOT-level dropzone (a direct child zone of the page) that holds dropzone `id`, or null when it
+     *  is not on the page canvas (the global-elements layer). */
+    _rootContainerOf(id) {
+        let root = null;
+        for (let el = this._getEl(id); el; el = el.parentElement) {
+            if (el.id === 'canvas-preview')
+                return root;
+            if (el.id && this.elMap.has(el.id))
+                root = el.id;
+        }
+        return null;
+    }
+    /** Why the dragged payload may not land in `targetId` (null = it may). Reordering inside the source
+     *  container is not an insert. */
+    _refusalAt(targetId) {
+        if (!targetId || !this._payload)
+            return null;
+        if (this._payload.type === 'internal' && this._payload.sourceId === targetId)
+            return null;
+        const ancestors = targetId === 'canvas-preview' ? [] : this.dropzoneAncestors(targetId);
+        return insertRefusal(this.payloadNode(this._payload.data), ancestors);
+    }
+    /** The node a dropzone element belongs to — the element itself or the nearest registered ancestor
+     *  (a LinkedContainer, a Dialog, a Repeater or a slide registers an INNER element as its zone). */
+    _ownerNode(el) {
+        for (let cur = el; cur && cur.id !== 'canvas-preview'; cur = cur.parentElement) {
+            const match = this.overlayService.findNodeByElement(cur);
+            if (match)
+                return match.node;
+        }
+        return undefined;
+    }
     // ─────────────────────────────────────────────────────────
     // Target overlay — fixed to <body>, sized from getBoundingClientRect
     // so it is always above all canvas content regardless of stacking
@@ -3067,7 +3232,7 @@ class DragEngineService {
             this._targetChip.style.cssText = [
                 'position:absolute', 'left:0', 'top:-18px', 'max-width:100%', 'overflow:hidden',
                 'white-space:nowrap', 'text-overflow:ellipsis', 'padding:1px 6px',
-                'border-radius:4px 4px 0 0', 'background:#6366f1', 'color:#fff',
+                'border-radius:4px 4px 0 0', `background:${TARGET_CHIP_BG}`, 'color:#fff',
                 'font:500 10px/1.5 system-ui,sans-serif', 'pointer-events:none',
             ].join(';');
             this._targetOverlay.appendChild(this._targetChip);
@@ -3095,40 +3260,19 @@ class DragEngineService {
     _updateTargetChip(targetId, el) {
         if (!this._targetChip)
             return;
-        const name = this.overlayService.findNodeByElement(el)?.node;
+        const refused = this._targetRefusal;
+        this._targetOverlay?.classList.toggle(DROP_REFUSED_CLASS, !!refused);
+        this._targetChip.style.background = refused ? REFUSED_CHIP_BG : TARGET_CHIP_BG;
+        if (refused) {
+            this._targetChip.textContent = insertRefusalLabel(refused, this.labels);
+            return;
+        }
+        const name = this._ownerNode(el);
         const childCount = this.getData(targetId)?.length ?? 0;
         const index = this._indicatorContainerId === targetId && this._indicatorIndex >= 0
             ? this._indicatorIndex : childCount;
         this._targetChip.textContent = dropTargetLabel(name?.label || name?.type, index, childCount);
     }
-    _isRootContainer(id) {
-        const el = this._getEl(id);
-        if (!el)
-            return false;
-        let parent = el.parentElement;
-        while (parent) {
-            if (parent.id === 'canvas-preview')
-                return true;
-            if (parent.id && this.ids.includes(parent.id))
-                return false;
-            parent = parent.parentElement;
-        }
-        return false;
-    }
-    /**
-     * Returns true if the dropzone with `childId` is a DOM descendant of the
-     * dropzone with `parentId`. Used to decide whether the cursor was already
-     * "inside" a root section before triggering root-escape.
-     */
-    _isDescendantDropzone(childId, parentId) {
-        if (!childId)
-            return false;
-        const childEl = this._getEl(childId);
-        const parentEl = this._getEl(parentId);
-        if (!childEl || !parentEl)
-            return false;
-        return parentEl.contains(childEl);
-    }
     // ─────────────────────────────────────────────────────────
     // Insertion indicator (animates open so siblings shift smoothly)
     // ─────────────────────────────────────────────────────────
@@ -3281,12 +3425,17 @@ class DragEngineService {
         }
         return children.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: DragEngineService, deps: [{ token: ComponentRegistryService }, { token: SymbolRegistryService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: DragEngineService, deps: [{ token: ComponentRegistryService }, { token: SymbolRegistryService }, { token: OverlayService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: DragEngineService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: DragEngineService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: SymbolRegistryService }, { type: OverlayService }] });
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: SymbolRegistryService }, { type: OverlayService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_BUILDER_LABELS]
+                }] }] });
 
 /**
  * Page-scoped registry that holds the current page's data sources.
@@ -5992,9 +6141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }] } });
 
 class LayerTreeComponent {
-    constructor(registry, overlayService) {
+    constructor(registry, overlayService, dragEngine) {
         this.registry = registry;
         this.overlayService = overlayService;
+        this.dragEngine = dragEngine;
         this.layout = [];
         this.globalElements = [];
         this.nodeSelect = new EventEmitter();
@@ -6102,6 +6252,13 @@ class LayerTreeComponent {
         const targetTreeNode = this.flatTree[event.currentIndex];
         if (!targetTreeNode)
             return;
+        // Landing beside the target means landing in the target's parent — the same acceptance rule
+        // every canvas insert asks (a form never goes inside a form).
+        if (targetTreeNode.parentArray !== draggedTreeNode.parentArray) {
+            const ancestors = (nodeAncestorPathInEither(this.layout, this.globalElements, targetTreeNode.node) ?? []).slice(0, -1);
+            if (this.dragEngine.refuseInsert(draggedTreeNode.node, ancestors))
+                return;
+        }
         // Remove from source parent
         const srcArray = draggedTreeNode.parentArray;
         const srcIdx = draggedTreeNode.indexInParent;
@@ -6165,13 +6322,13 @@ class LayerTreeComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: LayerTreeComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: LayerTreeComponent, isStandalone: false, selector: "app-layer-tree", inputs: { layout: "layout", globalElements: "globalElements" }, outputs: { nodeSelect: "nodeSelect", nodeAction: "nodeAction", nodeMove: "nodeMove" }, ngImport: i0, template: "<div class=\"layer-tree\">\n    <div class=\"tree-header\">\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'page'\" (click)=\"activeSection = 'page'\">\n            <i class=\"ph-thin ph-stack\"></i> Page\n        </button>\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'global'\" (click)=\"activeSection = 'global'\">\n            <i class=\"ph-thin ph-globe\"></i> Global\n            <span *ngIf=\"flatGlobalTree.length\" class=\"section-tab-badge\">{{ flatGlobalTree.length }}</span>\n        </button>\n    </div>\n\n    <!-- \u2500\u2500 Page elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'page'\"\n         class=\"tree-body\"\n         cdkDropList\n         [cdkDropListData]=\"flatTree\"\n         (cdkDropListDropped)=\"onTreeDrop($event)\">\n        <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-tree-structure\"></i>\n            <span>No layers yet</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatTree\"\n             class=\"tree-row\"\n             cdkDrag\n             [cdkDragData]=\"tn\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n                <input class=\"node-rename-input\"\n                       [value]=\"editingValue\"\n                       (input)=\"editingValue = $any($event.target).value\"\n                       (keydown.enter)=\"saveRename(tn)\"\n                       (keydown.escape)=\"cancelRename()\"\n                       (blur)=\"saveRename(tn)\"\n                       (click)=\"$event.stopPropagation()\"\n                       autofocus>\n            </ng-container>\n            <ng-template #staticLabel>\n                <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n            </ng-template>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n                    <i class=\"ph-thin ph-pencil-simple\"></i>\n                </button>\n                <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                </button>\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n\n    <!-- \u2500\u2500 Global elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'global'\" class=\"tree-body\">\n        <div *ngIf=\"!flatGlobalTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-globe\"></i>\n            <span>No global elements</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatGlobalTree\"\n             class=\"tree-row tree-row--global\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <span class=\"node-label\">{{ tn.label }}</span>\n            <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .section-tab{display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;padding:4px 8px;font-size:11px;font-weight:500;border:1px solid var(--p-surface-200);border-radius:4px;background:transparent;color:var(--p-text-muted-color);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.layer-tree .section-tab i{font-size:11px}.layer-tree .section-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}.layer-tree .section-tab--active{background:#cb909026;border-color:#cb9090;color:#cb9090}.layer-tree .section-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;background:#cb9090;color:#fff;border-radius:8px}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: LayerTreeComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: LayerTreeComponent, isStandalone: false, selector: "app-layer-tree", inputs: { layout: "layout", globalElements: "globalElements" }, outputs: { nodeSelect: "nodeSelect", nodeAction: "nodeAction", nodeMove: "nodeMove" }, ngImport: i0, template: "<div class=\"layer-tree\">\n    <div class=\"tree-header\">\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'page'\" (click)=\"activeSection = 'page'\">\n            <i class=\"ph-thin ph-stack\"></i> Page\n        </button>\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'global'\" (click)=\"activeSection = 'global'\">\n            <i class=\"ph-thin ph-globe\"></i> Global\n            <span *ngIf=\"flatGlobalTree.length\" class=\"section-tab-badge\">{{ flatGlobalTree.length }}</span>\n        </button>\n    </div>\n\n    <!-- \u2500\u2500 Page elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'page'\"\n         class=\"tree-body\"\n         cdkDropList\n         [cdkDropListData]=\"flatTree\"\n         (cdkDropListDropped)=\"onTreeDrop($event)\">\n        <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-tree-structure\"></i>\n            <span>No layers yet</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatTree\"\n             class=\"tree-row\"\n             cdkDrag\n             [cdkDragData]=\"tn\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n                <input class=\"node-rename-input\"\n                       [value]=\"editingValue\"\n                       (input)=\"editingValue = $any($event.target).value\"\n                       (keydown.enter)=\"saveRename(tn)\"\n                       (keydown.escape)=\"cancelRename()\"\n                       (blur)=\"saveRename(tn)\"\n                       (click)=\"$event.stopPropagation()\"\n                       autofocus>\n            </ng-container>\n            <ng-template #staticLabel>\n                <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n            </ng-template>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n                    <i class=\"ph-thin ph-pencil-simple\"></i>\n                </button>\n                <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                </button>\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n\n    <!-- \u2500\u2500 Global elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'global'\" class=\"tree-body\">\n        <div *ngIf=\"!flatGlobalTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-globe\"></i>\n            <span>No global elements</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatGlobalTree\"\n             class=\"tree-row tree-row--global\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <span class=\"node-label\">{{ tn.label }}</span>\n            <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .section-tab{display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;padding:4px 8px;font-size:11px;font-weight:500;border:1px solid var(--p-surface-200);border-radius:4px;background:transparent;color:var(--p-text-muted-color);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.layer-tree .section-tab i{font-size:11px}.layer-tree .section-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}.layer-tree .section-tab--active{background:#cb909026;border-color:#cb9090;color:#cb9090}.layer-tree .section-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;background:#cb9090;color:#fff;border-radius:8px}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: LayerTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-layer-tree', standalone: false, template: "<div class=\"layer-tree\">\n    <div class=\"tree-header\">\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'page'\" (click)=\"activeSection = 'page'\">\n            <i class=\"ph-thin ph-stack\"></i> Page\n        </button>\n        <button class=\"section-tab\" [class.section-tab--active]=\"activeSection === 'global'\" (click)=\"activeSection = 'global'\">\n            <i class=\"ph-thin ph-globe\"></i> Global\n            <span *ngIf=\"flatGlobalTree.length\" class=\"section-tab-badge\">{{ flatGlobalTree.length }}</span>\n        </button>\n    </div>\n\n    <!-- \u2500\u2500 Page elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'page'\"\n         class=\"tree-body\"\n         cdkDropList\n         [cdkDropListData]=\"flatTree\"\n         (cdkDropListDropped)=\"onTreeDrop($event)\">\n        <div *ngIf=\"!flatTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-tree-structure\"></i>\n            <span>No layers yet</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatTree\"\n             class=\"tree-row\"\n             cdkDrag\n             [cdkDragData]=\"tn\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <i class=\"ph-thin ph-dots-six-vertical drag-handle\" cdkDragHandle></i>\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <ng-container *ngIf=\"editingNodeId === tn.node.id; else staticLabel\">\n                <input class=\"node-rename-input\"\n                       [value]=\"editingValue\"\n                       (input)=\"editingValue = $any($event.target).value\"\n                       (keydown.enter)=\"saveRename(tn)\"\n                       (keydown.escape)=\"cancelRename()\"\n                       (blur)=\"saveRename(tn)\"\n                       (click)=\"$event.stopPropagation()\"\n                       autofocus>\n            </ng-container>\n            <ng-template #staticLabel>\n                <span class=\"node-label\" [class.node-label--named]=\"tn.node.label\">{{ tn.label }}</span>\n            </ng-template>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn\" title=\"Rename\" (click)=\"startRename(tn, $event)\">\n                    <i class=\"ph-thin ph-pencil-simple\"></i>\n                </button>\n                <button class=\"action-btn\" title=\"Duplicate\" (click)=\"onDuplicateNode(tn, $event)\">\n                    <i class=\"ph-thin ph-copy\"></i>\n                </button>\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n\n    <!-- \u2500\u2500 Global elements tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div *ngIf=\"activeSection === 'global'\" class=\"tree-body\">\n        <div *ngIf=\"!flatGlobalTree.length\" class=\"tree-empty\">\n            <i class=\"ph-thin ph-globe\"></i>\n            <span>No global elements</span>\n        </div>\n\n        <div *ngFor=\"let tn of flatGlobalTree\"\n             class=\"tree-row tree-row--global\"\n             [class.is-selected]=\"tn.node.id === selectedNodeId\"\n             [class.is-hovered]=\"tn.node.id === hoveredNodeId\"\n             [style.padding-inline-start.px]=\"12 + tn.depth * 16\"\n             (click)=\"onNodeClick(tn)\"\n             (mouseenter)=\"onNodeMouseEnter(tn)\"\n             (mouseleave)=\"onNodeMouseLeave()\">\n\n            <button *ngIf=\"tn.hasChildren\" class=\"expand-btn\" (click)=\"toggleExpand(tn, $event)\">\n                <i class=\"ph-thin\" [ngClass]=\"tn.expanded ? 'ph-caret-down' : 'ph-caret-right'\"></i>\n            </button>\n            <span *ngIf=\"!tn.hasChildren\" class=\"expand-spacer\"></span>\n\n            <i [class]=\"tn.icon\" class=\"node-icon\"></i>\n            <span class=\"node-label\">{{ tn.label }}</span>\n            <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n\n            <span class=\"node-actions\">\n                <button class=\"action-btn action-btn--delete\" title=\"Delete\" (click)=\"onDeleteNode(tn, $event)\">\n                    <i class=\"ph-thin ph-trash\"></i>\n                </button>\n            </span>\n        </div>\n    </div>\n</div>\n", styles: [".layer-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.layer-tree .tree-header{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--p-surface-200);flex-shrink:0}.layer-tree .section-tab{display:inline-flex;align-items:center;gap:4px;flex:1;justify-content:center;padding:4px 8px;font-size:11px;font-weight:500;border:1px solid var(--p-surface-200);border-radius:4px;background:transparent;color:var(--p-text-muted-color);cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}.layer-tree .section-tab i{font-size:11px}.layer-tree .section-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}.layer-tree .section-tab--active{background:#cb909026;border-color:#cb9090;color:#cb9090}.layer-tree .section-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;background:#cb9090;color:#fff;border-radius:8px}.layer-tree .tree-body{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding-block:4px}.layer-tree .tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;color:var(--p-text-muted-color);font-size:12px}.layer-tree .tree-empty i{font-size:22px}.layer-tree .tree-row{display:flex;align-items:center;gap:6px;height:28px;padding-inline-end:8px;cursor:pointer;font-size:12px;color:var(--p-text-color);border-inline-start:2px solid transparent;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.layer-tree .tree-row:hover,.layer-tree .tree-row.is-hovered{background:var(--p-surface-100)}.layer-tree .tree-row.is-selected{background:#cb90901a;border-inline-start-color:#cb9090;font-weight:500}.layer-tree .drag-handle{font-size:10px;color:var(--p-text-muted-color);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .12s}.layer-tree .tree-row:hover .drag-handle{opacity:.5}.layer-tree .drag-handle:hover{opacity:1!important}.layer-tree .cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:6px;background:var(--p-surface-0);border:1px solid #cb9090;box-shadow:0 4px 12px #0000001f;font-size:12px}.layer-tree .cdk-drag-placeholder{height:2px;background:#cb9090;border-radius:1px;opacity:.6}.layer-tree .cdk-drag-placeholder>*{visibility:hidden}.layer-tree .cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.layer-tree .expand-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;flex-shrink:0;border-radius:2px}.layer-tree .expand-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .expand-btn i{font-size:10px}.layer-tree .expand-spacer{width:16px;flex-shrink:0}.layer-tree .node-icon{font-size:14px;color:var(--p-text-muted-color);flex-shrink:0}.layer-tree .node-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.layer-tree .node-label.node-label--named{color:var(--p-primary-color, #cb9090);font-weight:500}.layer-tree .node-rename-input{flex:1;min-width:0;border:1px solid var(--p-primary-color, #cb9090);border-radius:4px;background:var(--p-surface-0, #fff);color:var(--p-text-color);font-family:inherit;font-size:.72rem;padding:1px 4px;outline:none}.layer-tree .node-actions{display:flex;gap:2px;margin-inline-start:auto;opacity:0;transition:opacity .12s;flex-shrink:0}.layer-tree .tree-row:hover .node-actions,.layer-tree .tree-row.is-selected .node-actions{opacity:1}.layer-tree .tree-section-header{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-text-muted-color);border-top:1px solid var(--p-surface-200);margin-top:4px}.layer-tree .tree-section-header i{font-size:12px}.layer-tree .tree-body--global{flex:0 0 auto}.layer-tree .tree-row--global{border-inline-start-color:transparent}.layer-tree .tree-row--global.is-selected{background:#638fcb1a;border-inline-start-color:#638fcb}.layer-tree .node-position-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#638fcb;background:#638fcb1f;padding:1px 5px;border-radius:3px;flex-shrink:0}.layer-tree .action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;border-radius:4px;font-size:12px;transition:background .12s,color .12s}.layer-tree .action-btn:hover{background:var(--p-surface-200);color:var(--p-text-color)}.layer-tree .action-btn--delete:hover{background:#dc26261a;color:#dc2626}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }], propDecorators: { layout: [{
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: DragEngineService }], propDecorators: { layout: [{
                 type: Input
             }], globalElements: [{
                 type: Input
@@ -7012,6 +7169,9 @@ class BuilderComponent {
     }
     onDrop(event) {
         const { payload, insertIndex } = event;
+        const changesParent = payload.type === 'external' || payload.sourceId !== 'canvas-preview';
+        if (changesParent && this.dragEngine.refuseInsert(payload.data, []))
+            return;
         if (payload.type === 'external') {
             if (typeof payload.data === 'string') {
                 const config = this.registry.createConfig(payload.data);
@@ -7302,7 +7462,7 @@ class BuilderComponent {
             }
             case ToolbarAction.Duplicate: {
                 const result = this.findNodeInTree(node, this.layout) ?? this.findNodeInTree(node, this.globalElements);
-                if (result) {
+                if (result && !this.dragEngine.refuseInsert(node, this.siblingAncestors(node))) {
                     const clone = this.deepCloneWithNewIds(node);
                     result.parent.splice(result.index + 1, 0, clone);
                     this.cdr.detectChanges();
@@ -7462,6 +7622,8 @@ class BuilderComponent {
                 const pastedNode = this.clipboard.getNode();
                 if (!pastedNode)
                     break;
+                if (this.dragEngine.refuseInsert(pastedNode, this.siblingAncestors(node)))
+                    break;
                 const clone = this.deepCloneWithNewIds(pastedNode);
                 const result = this.findNodeInTree(node, this.layout) ?? this.findNodeInTree(node, this.globalElements);
                 if (result) {
@@ -7544,6 +7706,10 @@ class BuilderComponent {
             this.cdr.markForCheck();
         }, 1200);
     }
+    /** The nodes a sibling of `node` sits under — `node`'s ancestors, outermost first (empty at a root). */
+    siblingAncestors(node) {
+        return (nodeAncestorPathInEither(this.layout, this.globalElements, node) ?? [node]).slice(0, -1);
+    }
     findNodeInTree(target, children) {
         for (let i = 0; i < children.length; i++) {
             if (children[i] === target) {
@@ -7637,7 +7803,8 @@ class BuilderComponent {
         if (inGlobals && !target.parent) {
             target = resolveInsertTarget(this.layout, null, n => this.dragEngine.isDropContainer(n.children));
         }
-        if (!this.dragEngine.insertPayload(target.children, target.index, data))
+        const ancestors = target.parent ? (nodeAncestorPathInEither(this.layout, this.globalElements, target.parent) ?? [target.parent]) : [];
+        if (!this.dragEngine.insertPayload(target.children, target.index, data, ancestors))
             return;
         this.cdr.detectChanges();
     }
@@ -8697,7 +8864,10 @@ class BuilderButtonBlockComponent {
         this.children = [];
         this.style = {};
         this.tag = 'button';
+        this.linkType = LinkType.External;
         this.href = '';
+        /** A page link shows its route as authored, as the canvas Link does (the engine resolves it). */
+        this.pageRoute = '';
         this.target = '_self';
         this.type = 'button';
         this.nodeId = '';
@@ -8706,6 +8876,9 @@ class BuilderButtonBlockComponent {
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
     }
+    get resolvedHref() {
+        return buttonBlockHref(this);
+    }
     ngOnInit() {
         // Register the HOST as the dropzone (was the ioxDropzone directive on the inner button).
         this.dragEngine.registerDropzone(this.dropListId, this.elRef.nativeElement, this.children, this.cdr, (evt) => this.onDrop(evt));
@@ -8717,7 +8890,7 @@ class BuilderButtonBlockComponent {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonBlockComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonBlockComponent, isStandalone: false, selector: "button[iox-button-block],a[iox-button-block]", inputs: { children: "children", style: "style", tag: "tag", href: "href", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'button-block-root iox-node-' + nodeId", "attr.href": "tag === 'a' ? (href || null) : null", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonBlockComponent, isStandalone: false, selector: "button[iox-button-block],a[iox-button-block]", inputs: { children: "children", style: "style", tag: "tag", linkType: "linkType", href: "href", pageRoute: "pageRoute", target: "target", type: "type", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'button-block-root iox-node-' + nodeId", "attr.href": "resolvedHref", "attr.target": "tag === 'a' ? (target || null) : null", "attr.type": "tag === 'a' ? null : type" } }, ngImport: i0, template: `
         <span *ngIf="!children.length" class="button-block-placeholder" data-iox-chrome>Button</span>
 
         <!-- WRAPPER COLLAPSE (task 9c): render children directly into the host; iox-outer + drag land
@@ -8747,7 +8920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         </ng-container>
     `, host: {
                         '[class]': "'button-block-root iox-node-' + nodeId",
-                        '[attr.href]': "tag === 'a' ? (href || null) : null",
+                        '[attr.href]': 'resolvedHref',
                         '[attr.target]': "tag === 'a' ? (target || null) : null",
                         '[attr.type]': "tag === 'a' ? null : type",
                     }, standalone: false, styles: [":host{box-sizing:border-box}.button-block-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#64748b66;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
@@ -8757,8 +8930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], tag: [{
                 type: Input
+            }], linkType: [{
+                type: Input
             }], href: [{
                 type: Input
+            }], pageRoute: [{
+                type: Input
             }], target: [{
                 type: Input
             }], type: [{
@@ -10207,66 +10384,6 @@ function matchesControlSearch(name, label, term) {
     return name.toLowerCase().includes(needle) || (label ?? '').toLowerCase().includes(needle);
 }
 
-const FORM_PRESETS = Object.freeze([
-    {
-        id: 'contact', name: 'Contact', icon: 'ph-thin ph-envelope-simple',
-        description: 'Name, email and a message. Stored, and emailed to you.',
-        formName: 'Contact form',
-        fields: [
-            { label: 'Full name', control: 'text', required: true },
-            { label: 'Email', control: 'email', required: true },
-            { label: 'Message', control: 'textarea', required: true, rows: 5 },
-        ],
-        submitLabel: 'Send message',
-        successText: 'Thanks — we’ll be in touch shortly.',
-        errorText: 'We couldn’t send your message. Please try again — your answers are still here.',
-    },
-    {
-        id: 'newsletter', name: 'Newsletter', icon: 'ph-thin ph-paper-plane-tilt',
-        description: 'One email field plus consent. Stored.',
-        formName: 'Newsletter signup',
-        fields: [
-            { label: 'Email', control: 'email', required: true, placeholder: 'you@company.com' },
-            // Consent is a checkbox that must be TICKED — `required` on a checkbox becomes the
-            // `accepted` rule, with its own message, rather than a generic "this is required".
-            { label: 'Email me occasional updates', control: 'checkbox', required: true },
-        ],
-        submitLabel: 'Subscribe',
-        successText: 'You’re on the list.',
-        errorText: 'We couldn’t sign you up. Please try again.',
-    },
-    {
-        id: 'application', name: 'Application', icon: 'ph-thin ph-read-cv-logo',
-        description: 'Details plus a CV upload. Stored, with an auto-reply.',
-        formName: 'Application',
-        fields: [
-            { label: 'Full name', control: 'text', required: true },
-            { label: 'Email', control: 'email', required: true },
-            { label: 'Phone', control: 'tel' },
-            { label: 'Role', control: 'select', required: true, optionsText: 'Design\nEngineering\nOther' },
-            { label: 'CV', control: 'file', required: true, help: 'PDF or Word, up to 5MB' },
-            { label: 'Anything else', control: 'textarea', rows: 4 },
-        ],
-        submitLabel: 'Apply',
-        successText: 'Application received — we’ll read it properly and reply.',
-        errorText: 'We couldn’t submit your application. Please try again.',
-    },
-    {
-        id: 'booking', name: 'Booking request', icon: 'ph-thin ph-calendar-check',
-        description: 'Date and party size. Stored, and it notifies you.',
-        formName: 'Booking request',
-        fields: [
-            { label: 'Name', control: 'text', required: true },
-            { label: 'Email', control: 'email', required: true },
-            { label: 'Date', control: 'date', required: true },
-            { label: 'People', control: 'number', required: true },
-            { label: 'Notes', control: 'textarea', rows: 3, help: 'Allergies, access needs, anything useful' },
-        ],
-        submitLabel: 'Request a booking',
-        successText: 'Request received — we’ll confirm by email.',
-        errorText: 'We couldn’t send your request. Please try again.',
-    },
-]);
 /**
  * Build a preset's node tree.
  *
@@ -10659,11 +10776,9 @@ function text(content, createConfig, styleId, styles = {}) {
         wearing(node, styleId);
     return styled(node, { padding: '0', margin: '0', ...styles });
 }
-/** A button's label takes the BUTTON's type (the style's size, weight, case, tracking) — not body's. */
-const BUTTON_LABEL = {
-    color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit',
-    letterSpacing: 'inherit', textTransform: 'inherit',
-};
+/** A button's label takes the BUTTON's type (size, weight, case, tracking) and ink — the contract's
+ *  `button-label` element style, the one the site composer gives a composed button's label too (W1.1). */
+const BUTTON_LABEL_STYLE = 'button-label';
 function withChildren(node, children) {
     if (!node || children.some(c => !c))
         return null;
@@ -10689,7 +10804,7 @@ function button(styleId, label, createConfig, styles = {}) {
         return null;
     setTrait(btn, 'tag', 'button');
     styled(btn, styles);
-    return withChildren(btn, [text(label, createConfig, undefined, BUTTON_LABEL)]);
+    return withChildren(btn, [text(label, createConfig, BUTTON_LABEL_STYLE)]);
 }
 /** A Container sized by its content: the palette Container's 200px drop-zone min-height is canvas
  *  furniture, and a specimen has no drop zone. */
@@ -10863,6 +10978,10 @@ class BuilderButtonComponentConfig extends ComponentConfig {
     }
 }
 
+const BUTTON_LINK_TYPES = [
+    { label: 'External URL', value: LinkType.External },
+    { label: 'Website Page', value: LinkType.Page },
+];
 class ButtonBlockComponentConfig extends ComponentConfig {
     constructor() {
         super('ButtonBlock', 'app-builder-button-block', 'ph-thin ph-cursor-click', 'Basic');
@@ -10871,13 +10990,21 @@ class ButtonBlockComponentConfig extends ComponentConfig {
         this.children = [];
         this.inputs = {
             tag: 'select',
+            linkType: 'select',
             href: 'text',
+            pageRoute: 'text',
             target: 'select',
             type: 'select',
         };
+        // A link button points at a URL or at a website PAGE by route — the Link's two link types
+        // (W1.1): a page route is shown as the route here and resolved base-relative by the engine.
+        // `href` / `pageRoute` depend on `linkType`, which depends on `tag`: a trait whose controlling
+        // trait is hidden is hidden too, so a <button> shows neither.
         this.traits = [
             new TraitConfig('tag', 'Tag', TraitInputType.Select, ['button', 'a'], 'button'),
-            new TraitConfig('href', 'URL', TraitInputType.Text, undefined, '', false, { trait: 'tag', values: 'a' }),
+            new TraitConfig('linkType', 'Link Type', TraitInputType.Select, BUTTON_LINK_TYPES, LinkType.External, false, { trait: 'tag', values: 'a' }),
+            new TraitConfig('href', 'URL', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: LinkType.External }),
+            new TraitConfig('pageRoute', 'Page Route', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: LinkType.Page }),
             new TraitConfig('target', 'Target', TraitInputType.Select, ['_self', '_blank'], '_self', false, { trait: 'tag', values: 'a' }),
             new TraitConfig('type', 'Type', TraitInputType.Select, ['button', 'submit', 'reset'], 'button', false, { trait: 'tag', values: 'button' }),
         ];
@@ -11676,5 +11803,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, insertRefusal, insertRefusalLabel, isHiddenAt, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, rootEscapeBand, rootZone, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map