@vectoriox/iox-builder 9.1.0 → 9.3.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2,12 +2,12 @@ import * as i0 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 * as i17 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 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';
+import * as i18 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
@@ -16,12 +16,13 @@ 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, LinkType, buttonBlockHref, 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, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, countOverrides, setOverride, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, composeVirtualTraits, withDefaultHoverTransition, safeSetInput, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, stateNamesIn, partClassName, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, switchElementStyle, 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';
 import { findFormContentInHosts, formContentInHost, isInteractiveHost } from '@vectoriox/iox-ui/forms-core';
 import interact from 'interactjs';
+import { structureRefusal, StructureEdit, isLockedPart, buildCardRecipe, buildBadge, buildChip } from '@vectoriox/iox-ui/composite-core';
 import { BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
@@ -162,7 +163,14 @@ const TARGETED_STATE_BASE = {
 const VALIDATION_STATES = [...VALIDATION_STATES$1];
 /** The host class each validation state maps to. */
 const VALIDATION_STATE_CLASS = VALIDATION_STATE_CLASS$1;
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES, ...VALIDATION_STATES];
+/**
+ * Component states (CC1 N2; the Style panel's "Component state" group): a node is in them because of
+ * WHAT it is, not where the pointer is — so they compile to an attribute the renderers write
+ * (`stateSelectorSuffix` in @vectoriox/iox-ui), never a pseudo-class. Offered per type by
+ * `componentStatesFor`.
+ */
+const COMPONENT_STATES = ['current'];
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES, ...VALIDATION_STATES, ...COMPONENT_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
  * styleProps map. Used when editing a preset in the Style panel — the panel
@@ -665,6 +673,68 @@ class ListGroupStyleConfig extends GroupStyleConfig {
 function buildColorSchemeTrait() {
     return new TraitConfig(COLOR_SCHEME_TRAIT, 'Section colours', TraitInputType.Select, COLOR_SCHEMES.map(s => ({ label: s.label, value: s.id })), ColorScheme.Default);
 }
+const LINK_TARGETS = [
+    { label: 'Same tab', value: '_self' },
+    { label: 'New tab', value: '_blank' },
+    { label: 'Parent frame', value: '_parent' },
+    { label: 'Full window', value: '_top' },
+];
+/**
+ * ONE link model (composite-components plan T5 / §6c): Link Type (external URL or website page — or none),
+ * the URL, the page route and the target. Link, Linked Container, ButtonBlock and the Heading (Card v2's
+ * title) all declare their link through this; the Bindings panel's Link section edits exactly these.
+ */
+function linkTraits(options = {}) {
+    const urlTrait = options.urlTrait ?? 'url';
+    const types = [
+        ...(options.allowNone ? [{ label: 'No link', value: LinkType.None }] : []),
+        { label: 'External URL', value: LinkType.External },
+        { label: 'Website Page', value: LinkType.Page },
+    ];
+    return [
+        new TraitConfig('linkType', 'Link Type', TraitInputType.Select, types, options.allowNone ? LinkType.None : LinkType.External, false, options.showWhen),
+        new TraitConfig(urlTrait, 'URL', TraitInputType.Text, undefined, options.urlDefault ?? 'https://', 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, options.targets ?? LINK_TARGETS, '_self', false, options.showWhen ?? (options.allowNone ? { trait: 'linkType', values: [LinkType.External, LinkType.Page] } : undefined)),
+    ];
+}
+/**
+ * "Max lines" (Card v2, board 8: opt-in, no clamp by default) — a Typography trait on the types that hold
+ * running words (Heading, Text). `none` clamps nothing; a number clamps the words to that many lines with
+ * an ellipsis, composed by the shared compiler (`composeVirtualTraits`), so both renderers clamp alike.
+ */
+function withMaxLines(groups) {
+    const typography = groups.find(g => g.category === StyleCategory.Typography);
+    typography?.traits.push(new TraitConfig(MAX_LINES_KEY, 'Max lines', TraitInputType.Select, [{ label: 'No limit', value: 'none' }, ...['1', '2', '3', '4', '5', '6'].map(n => ({ label: n, value: n }))], 'none'));
+    return groups;
+}
+/**
+ * "Accessibility ▸ Accessible name" (CC1 N6, board 8): the name an icon-only control is announced by —
+ * rendered as `aria-label` by every renderer through the shared `nodeA11yAttributes`. Empty = the
+ * control's own text names it; the responsive audit flags an icon-only control left empty.
+ */
+function buildAccessibleNameTraits() {
+    return [
+        new TraitConfig('__accessibilityLabel', 'Accessibility', TraitInputType.SectionLabel),
+        new TraitConfig(A11yTrait.AccessibleName, 'Accessible name', TraitInputType.Text, undefined, ''),
+    ];
+}
+/** The breakpoints a Dialog may close above, widest first, plus "Never" (the default, empty). */
+const DIALOG_CLOSE_ABOVE_OPTIONS = [
+    { label: 'Never', value: '' },
+    ...BREAKPOINTS.filter(b => b.id !== Breakpoint.Base && b.maxWidth !== null)
+        .map(b => ({ label: `${b.label} (${b.maxWidth}px)`, value: b.id })),
+];
+/**
+ * "Responsive ▸ Close when wider than" (CC1 N4, board 8): a drawer opened on a phone closes itself when
+ * the window widens past this breakpoint. The engine listens on `matchMedia`; default Never.
+ */
+function buildDialogCloseAboveTraits() {
+    return [
+        new TraitConfig('__responsiveLabel', 'Responsive', TraitInputType.SectionLabel),
+        new TraitConfig(A11yTrait.CloseAbove, 'Close when wider than', TraitInputType.Select, DIALOG_CLOSE_ABOVE_OPTIONS, ''),
+    ];
+}
 function buildFullStyleTraits() {
     return [
         new PositionGroupStyleConfig(),
@@ -902,6 +972,28 @@ function wrapNode(roots, target, wrapper) {
     return wrapper;
 }
 
+/**
+ * Parts that are HIDDEN AT REST (complex-components R2, board 3): on the live site they are not on
+ * screen until something opens them, so on the canvas they show only while selected into or switched
+ * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. Today: a Dialog (the
+ * mobile menu's drawer, a consent banner). CC2 adds a collapsed Accordion panel and an inactive tab.
+ */
+const HIDDEN_AT_REST_TYPES = ['Dialog'];
+function isHiddenAtRest(node) {
+    return !!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type);
+}
+/** Root → `target`, inclusive, across `roots` (page layout and globals), or [] when it is not there. */
+function pathToNode(roots, target) {
+    for (const root of roots) {
+        if (root === target)
+            return [root];
+        const below = pathToNode(root.children ?? [], target);
+        if (below.length)
+            return [root, ...below];
+    }
+    return [];
+}
+
 var PanelEventTypes;
 (function (PanelEventTypes) {
     PanelEventTypes["ELEMENT_SELECT"] = "elementselect";
@@ -949,6 +1041,11 @@ var PanelEventTypes;
      *  through also runs. This event is that path for code outside `BuilderComponent` itself,
      *  mirroring what `onTreeNodeSelect`/`onCrumbSelect` already do internally. */
     PanelEventTypes["SELECT_NODE"] = "selectnode";
+    /** A panel rewrote a node's SUBTREE in place — its children (a Card's Parts), its layout styles (Card ▸
+     *  Layout), a part's element style or scheme. Carries `{ node }`. The builder re-renders the subtree,
+     *  re-registers every node's rules and design classes, refreshes a Repeater holding it, and records ONE
+     *  undo step (LAYOUT_CHANGED). */
+    PanelEventTypes["NODE_STRUCTURE_CHANGED"] = "nodestructurechanged";
 })(PanelEventTypes || (PanelEventTypes = {}));
 class PanelEventService {
     constructor() {
@@ -1342,6 +1439,8 @@ var AuditCode;
     AuditCode["OffscreenAbsolute"] = "offscreen-absolute";
     /** Form content inside a link or a button — a STRUCTURE finding, true at every width (form-nesting-audit.util). */
     AuditCode["FormInLink"] = "form-in-link";
+    /** An icon-only button or link with no Accessible name — announced as an unnamed control (CC1 N6). */
+    AuditCode["UnnamedControl"] = "unnamed-control";
 })(AuditCode || (AuditCode = {}));
 /** A fix that changes the tree, not a style or a trait — applied as one page-history step. */
 var StructureFix;
@@ -1443,7 +1542,15 @@ function auditNodes(nodes, viewportWidth) {
                 }
             }
         }
-        // 7. An out-of-flow node that has left the frame. Measured, not inferred: a negative offset
+        // 7. An icon-only control with no name (WCAG 4.1.2): a screen reader says "button" and nothing
+        //    else. No auto-fix — only the author knows what it does; the finding selects it.
+        if (node.unnamedControl) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.UnnamedControl, severity: AuditSeverity.Error,
+                message: `${name} shows only an icon and has no accessible name — screen readers announce it as an unnamed control. Name it in Bindings ▸ Accessibility.`,
+            });
+        }
+        // 8. An out-of-flow node that has left the frame. Measured, not inferred: a negative offset
         //    is legitimate design until it actually puts the content beyond the edge.
         if (OUT_OF_FLOW.has(String(styles['position'] ?? '')) && node.left !== undefined && node.width > 0) {
             const right = node.left + node.width;
@@ -1529,9 +1636,17 @@ const BUILDER_CHROME_EN = Object.freeze({
     '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.',
     'builder.chrome.refuseFormInLink': 'A form can’t go inside a link or a button — a click in a field would follow the link.',
+    'builder.chrome.refuseLockedPart': 'This part keeps the card together and can’t be deleted. Delete the whole card, or switch parts off in Card ▸ Parts.',
+    'builder.chrome.refuseLockedPartMove': 'This part belongs where it is in its card — it can’t be moved out.',
+    'builder.chrome.lockedPart': 'Locked part — can’t be deleted or moved out',
+    'builder.chrome.compositeRole': 'Composite role',
+    'builder.chrome.kindCard': 'Card',
     'builder.chrome.auditFormInLink': 'Is inside {host} — a click in a field would follow the link.',
     'builder.chrome.auditMoveFormOut': 'Move it out',
+    'builder.chrome.hiddenAtRest': 'Hidden at rest — select to show it',
 });
+/** The layer tree's eye-slash title on a part hidden at rest (a closed drawer, R2). */
+const HIDDEN_AT_REST_LABEL_KEY = 'builder.chrome.hiddenAtRest';
 const CANVAS_EMPTY_IMAGE_LABEL_KEY = 'builder.chrome.addImage';
 const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_KEY];
 /**
@@ -1711,6 +1826,95 @@ function preventNativeCanvasDrag(event) {
         event.preventDefault();
 }
 
+/** The input a component declares to receive its empty-image placeholder (the Image). */
+const EMPTY_SRC_INPUT = 'emptySrc';
+/** The editing canvas's "Add image" label, through the host's i18n. */
+function canvasEmptyImageLabel(labels) {
+    return labels(CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_EMPTY_IMAGE_LABEL_EN);
+}
+/**
+ * Push a node's empty-image placeholder (design-system DS3) to its rendered component — a no-op for
+ * a component that declares no `emptySrc`. The placeholder depends on the MARKER only, never on the
+ * source, so it is set once at render and again whenever the node's element style changes.
+ */
+function syncEmptyImagePlaceholder(ref, node, emptyLabel) {
+    // Panels hold the selected node's ref untyped; anything without a component type has no inputs.
+    if (!ref?.componentType || !declaredInputNames(ref.componentType).has(EMPTY_SRC_INPUT))
+        return;
+    ref.setInput(EMPTY_SRC_INPUT, emptyImagePlaceholder(node, emptyLabel));
+}
+/**
+ * Everything a node's element style / colour scheme decides on its rendered host, in ONE call: the
+ * design classes (marker + scheme) and the empty-image placeholder. Every place that switches or
+ * resets a node's style on the canvas calls this, so an adopted Image gains its placeholder at once
+ * instead of after a reload (DS3 D2).
+ */
+function syncNodeDesign(ref, node, emptyLabel) {
+    syncNodeDesignClasses(ref?.location?.nativeElement ?? null, node);
+    syncEmptyImagePlaceholder(ref, node, emptyLabel);
+}
+
+/** States whose rule needs the LIVE DOM to scope (a parent's / a trigger's id) — the RenderDirective owns them. */
+const DOM_SCOPED_STATES = new Set([...RELATIONAL_STATES, ...TARGETED_STATES]);
+/** A node's base style map, from its style traits (the live values the Style panel edits). */
+function nodeStyleMap(node) {
+    const base = {};
+    for (const group of node.styleTraits ?? [])
+        for (const trait of group.traits)
+            if (trait.default !== undefined)
+                base[trait.name] = trait.default;
+    return base;
+}
+/**
+ * Re-register a node's compiled rules from its CURRENT style values — the base rule (with the default
+ * hover transition), its self-scoped state rules and its breakpoint layers — exactly as the
+ * RenderDirective registers them at render. For edits that rewrite a node's styles from outside the Style
+ * panel (a Card's layout preset, a reset to defaults).
+ */
+function upsertNodeStyles(styleRegistry, node) {
+    const cssId = node.styleId ?? node.id;
+    if (!cssId)
+        return;
+    const base = nodeStyleMap(node);
+    styleRegistry.setNodeType(cssId, node.type);
+    styleRegistry.upsert(cssId, composeVirtualTraits(withDefaultHoverTransition(base, node.stateStyles, node.elementStyle)));
+    for (const [state, map] of Object.entries(node.stateStyles ?? {})) {
+        if (DOM_SCOPED_STATES.has(state) || !map || !Object.keys(map).length)
+            continue;
+        styleRegistry.upsert(cssId, composeVirtualTraits(map, base), state);
+    }
+    styleRegistry.upsertResponsive(cssId, base, node.stateStyles, node.responsive);
+}
+/** Push every content trait of a node to its rendered component (a Card title's link switched on). */
+function syncNodeInputs(ref, node) {
+    if (!ref)
+        return;
+    for (const trait of node.traits ?? []) {
+        if (trait.type === 'sectionLabel')
+            continue;
+        safeSetInput(ref, trait.name, trait.default);
+    }
+}
+/** Visit a node and every descendant. */
+function walkNodes(node, visit) {
+    visit(node);
+    for (const child of node.children ?? [])
+        walkNodes(child, visit);
+}
+/**
+ * After a subtree was rewritten in place (PanelEventTypes.NODE_STRUCTURE_CHANGED): every node's rules,
+ * design classes (marker, scheme, role) and inputs re-applied. `refOf` finds a node's rendered component.
+ */
+function refreshSubtree(node, styleRegistry, refOf, emptyImageLabel) {
+    walkNodes(node, n => {
+        upsertNodeStyles(styleRegistry, n);
+        const ref = refOf(n);
+        syncNodeDesign(ref, n, emptyImageLabel);
+        syncNodeInputs(ref, n);
+        ref?.changeDetectorRef.markForCheck();
+    });
+}
+
 class ComponentRegistryService {
     constructor() {
         this.components = {};
@@ -2019,6 +2223,11 @@ var InsertRefusal;
     /** Form content inside a link or a button (Doron, 2026-10-20) — HTML forbids interactive content in
      *  `<a>`/`<button>`, and a click in a field would follow the link. The table is forms-core's. */
     InsertRefusal["FormInInteractive"] = "formInInteractive";
+    /** A composite's LOCKED part (a card's Title or Content column) moved out of its own parent — the
+     *  structure guard (composite-core `structureRefusal`). Reordering inside the parent never asks. */
+    InsertRefusal["LockedPartMove"] = "lockedPartMove";
+    /** A composite's LOCKED part deleted (Delete key, toolbar, layer tree, Make global): refused. */
+    InsertRefusal["LockedPart"] = "lockedPart";
 })(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`). */
@@ -2026,6 +2235,8 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.NestedForm]: 'builder.chrome.refuseNestedForm',
     [InsertRefusal.StateBlockAlone]: 'builder.chrome.refuseStateBlock',
     [InsertRefusal.FormInInteractive]: 'builder.chrome.refuseFormInLink',
+    [InsertRefusal.LockedPartMove]: 'builder.chrome.refuseLockedPartMove',
+    [InsertRefusal.LockedPart]: 'builder.chrome.refuseLockedPart',
 });
 /** The refusal in the host's language (the library's English when no host resolver is provided). */
 function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
@@ -2052,8 +2263,15 @@ function insertRefusal(node, ancestors) {
         return InsertRefusal.NestedForm;
     if (formContentInHost(node, ancestors.some(isInteractiveHost)))
         return InsertRefusal.FormInInteractive;
+    if (structureRefusal(node, StructureEdit.Move, ancestors))
+        return InsertRefusal.LockedPartMove;
     return null;
 }
+/** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
+ *  composite's locked part stays — its Parts switch or deleting the whole composite are the ways out. */
+function removalRefusal(node) {
+    return structureRefusal(node, StructureEdit.Delete) ? InsertRefusal.LockedPart : null;
+}
 
 /**
  * ROOT ESCAPE — near the top or bottom edge of a ROOT-level container the drop goes to the PAGE, between
@@ -2383,8 +2601,9 @@ class StyleRegistryService {
         // Structural pseudo-classes (first-child, last-child, nth-child) target the
         // outer wrapper element so they participate correctly in grid/flex layout.
         const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
-        // `focus` compiles to :focus-visible (DS2) — shared with the engine via statePseudoClass.
-        return `${prefix}-${nodeId}:${statePseudoClass(state)}`;
+        // `focus` compiles to :focus-visible (DS2) and a component state to its attribute (`current` →
+        // [aria-current="page"], CC1) — shared with the engine via stateSelectorSuffix.
+        return `${prefix}-${nodeId}${stateSelectorSuffix(state)}`;
     }
     /**
      * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
@@ -2744,6 +2963,16 @@ class DragEngineService {
             this.insertRefused$.next({ reason, message: insertRefusalLabel(reason, this.labels) });
         return reason;
     }
+    /**
+     * The ONE check every REMOVAL asks (Delete key, toolbar, layer tree, Make global): null when `node` may
+     * leave its place; otherwise the refusal, announced on `insertRefused$` like any other.
+     */
+    refuseRemoval(node) {
+        const reason = removalRefusal(node);
+        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')
@@ -3743,6 +3972,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: OverlayService }] });
 
+/** What a hidden-at-rest part shows on the canvas when the author picks it in "Showing on canvas". */
+var CanvasShowState;
+(function (CanvasShowState) {
+    CanvasShowState["Closed"] = "closed";
+    CanvasShowState["Open"] = "open";
+})(CanvasShowState || (CanvasShowState = {}));
+/**
+ * The canvas's DESIGN state (complex-components R2; composite plan §5a's CompositeDesignStateService,
+ * started here for the navigation and reused by Accordion in CC2): which parts that are hidden at rest
+ * — a closed drawer today, a collapsed panel or an inactive tab next — the canvas shows right now.
+ *
+ * Two sources, the Dialog's "selection is the reveal" and the Form's switcher, generalised:
+ * - **the selection** — selecting anything inside a hidden part (tree, breadcrumb, an Items row,
+ *   SELECT_NODE) shows it; deselecting hides it again (`setSelectionPath`);
+ * - **"Showing on canvas"** — the Bindings panel's switcher, for the one case a selection cannot express:
+ *   the page with the menu open while a part OUTSIDE it is selected (`setShown`).
+ *
+ * Canvas-only: never saved, never a history step. Also carries the canvas page's path, so a link to the
+ * page being edited renders as the current page (N2) — the same decision the live site makes.
+ */
+class CanvasDesignStateService {
+    constructor() {
+        this._state$ = new BehaviorSubject({ revealed: new Set(), shown: new Map() });
+        this.state$ = this._state$.asObservable();
+        this._pagePath$ = new BehaviorSubject(null);
+        /** The app path of the page on the canvas (`/work`), or null when unknown. */
+        this.pagePath$ = this._pagePath$.asObservable();
+    }
+    get snapshot() {
+        return this._state$.value;
+    }
+    get pagePath() {
+        return this._pagePath$.value;
+    }
+    setPagePath(path) {
+        const next = path ?? null;
+        if (next !== this._pagePath$.value)
+            this._pagePath$.next(next);
+    }
+    /** The selection moved: the hidden-at-rest parts on its path are revealed, every other one is not. */
+    setSelectionPath(path) {
+        const revealed = new Set(path.filter(isHiddenAtRest).map(n => n.id).filter((id) => !!id));
+        const current = this._state$.value.revealed;
+        if (revealed.size === current.size && [...revealed].every(id => current.has(id)))
+            return;
+        this._state$.next({ ...this._state$.value, revealed });
+    }
+    /** The switcher's choice for one part (null = back to the saved default). */
+    setShown(nodeId, state) {
+        const shown = new Map(this._state$.value.shown);
+        if (state && state !== CanvasShowState.Closed)
+            shown.set(nodeId, state);
+        else
+            shown.delete(nodeId);
+        this._state$.next({ ...this._state$.value, shown });
+    }
+    /** The switcher's current choice for one part. */
+    shownState(nodeId) {
+        return (nodeId && this._state$.value.shown.get(nodeId)) || CanvasShowState.Closed;
+    }
+    /** True when the canvas shows the part: selected into, or switched open. */
+    isShown(nodeId) {
+        if (!nodeId)
+            return false;
+        const { revealed, shown } = this._state$.value;
+        return revealed.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
+    }
+    /** True when the part is shown only because the selection is inside it (the switcher's hint line). */
+    isRevealedBySelection(nodeId) {
+        return !!nodeId && this._state$.value.revealed.has(nodeId);
+    }
+    /** A new page on the canvas: nothing is revealed or switched open. */
+    reset() {
+        this._state$.next({ revealed: new Set(), shown: new Map() });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, decorators: [{
+            type: Injectable
+        }] });
+
 // Re-exported from the shared iox-ui package so iox-builder consumers
 // don't need to import from two different packages.
 
@@ -3774,12 +4085,10 @@ class InteractionEngineService {
          * element's own attach() fires.
          */
         this.pendingPreStates = new Map();
-        /** Action types that animate an element from hidden → visible. */
-        this.ENTRANCE_TYPES = new Set([
-            'fadeIn', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'scaleIn', 'show',
-        ]);
-        /** Action types that animate an element from visible → hidden. */
-        this.EXIT_TYPES = new Set(['fadeOut', 'scaleOut', 'hide']);
+        /** Action types that animate an element from hidden → visible / visible → hidden — the SHARED sets
+         *  (@vectoriox/iox-ui), the same ones the live site's runtime reads. */
+        this.ENTRANCE_TYPES = ENTRANCE_ACTION_TYPES;
+        this.EXIT_TYPES = EXIT_ACTION_TYPES;
         this.SWIPER_ACTIONS = new Set([
             'swiperNext', 'swiperPrev', 'swiperGoToSlide',
             'swiperAutoplayStart', 'swiperAutoplayStop', 'swiperAutoplayPause',
@@ -4305,9 +4614,22 @@ class InteractionEngineService {
         return null;
     }
     executeAction(element, action) {
-        const { keyframes } = this.buildAnimation(action);
+        // toggleVisibility HIDES a visible element and SHOWS a hidden one — resolved against the element's
+        // own state, the same rule the live site applies (shared `effectiveActionType`, CC1 N5).
+        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
+        const keyframes = this.keyframesFor(type, action);
         if (!keyframes.length)
             return;
+        if (this.ENTRANCE_TYPES.has(type))
+            element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
+        else if (this.EXIT_TYPES.has(type))
+            element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
+        // Reduced motion (CC1 R1): no animation runs — the element takes its final frame at once.
+        if (!motionAllowed()) {
+            this.applyFrame(element, finalKeyframe(keyframes));
+            this.settleAfter(element, type);
+            return;
+        }
         // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
         const anim = element.animate(keyframes, {
             duration: action.duration,
@@ -4315,23 +4637,31 @@ class InteractionEngineService {
             easing: action.easing,
             fill: 'both',
         });
-        if (this.ENTRANCE_TYPES.has(action.type)) {
-            anim.finished.then(() => {
-                element.style.removeProperty('pointer-events');
-                element.removeAttribute('data-iox-hidden');
-                this.preStatedElements.delete(element);
-                // Builder: clear inline pre-state so cancelling animations later
-                // doesn't leave the element invisible after a play preview.
-                if (this.isBuilderMode())
-                    this.clearInlineAnimationStyles(element);
-            }).catch(() => { });
-        }
-        else if (this.EXIT_TYPES.has(action.type)) {
-            // Once the exit animation finishes the element is invisible —
-            // disable pointer events so it doesn't silently block clicks underneath it.
-            anim.finished.then(() => {
-                element.style.setProperty('pointer-events', 'none');
-            }).catch(() => { });
+        anim.finished.then(() => this.settleAfter(element, type)).catch(() => { });
+    }
+    /** What an element is left as once an action is done: a revealed one interactive, a hidden one inert. */
+    settleAfter(element, type) {
+        if (this.ENTRANCE_TYPES.has(type)) {
+            element.style.removeProperty('pointer-events');
+            this.preStatedElements.delete(element);
+            // Builder: clear inline pre-state so cancelling animations later
+            // doesn't leave the element invisible after a play preview.
+            if (this.isBuilderMode())
+                this.clearInlineAnimationStyles(element);
+        }
+        else if (this.EXIT_TYPES.has(type)) {
+            // Once the exit is done the element is invisible — disable pointer events so it doesn't
+            // silently block clicks underneath it.
+            element.style.setProperty('pointer-events', 'none');
+        }
+    }
+    /** Write a frame inline. On the canvas never a transform: one inside the scaled page breaks Lenis. */
+    applyFrame(element, frame) {
+        const canvas = this.isBuilderMode();
+        for (const [prop, value] of keyframeStyleEntries(frame)) {
+            if (canvas && prop === 'transform')
+                continue;
+            element.style.setProperty(prop, value);
         }
     }
     /**
@@ -4345,7 +4675,7 @@ class InteractionEngineService {
      * In production the full keyframe is applied + pointer-events:none.
      */
     applyPreState(element, action) {
-        const { keyframes } = this.buildAnimation(action);
+        const keyframes = this.keyframesFor(action.type, action);
         if (!keyframes.length)
             return;
         const first = keyframes[0];
@@ -4362,7 +4692,7 @@ class InteractionEngineService {
             }
             element.style.setProperty('pointer-events', 'none');
         }
-        element.setAttribute('data-iox-hidden', '');
+        element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
         this.preStatedElements.add(element);
     }
     clearInlineAnimationStyles(element) {
@@ -4370,12 +4700,16 @@ class InteractionEngineService {
         element.style.removeProperty('transform');
         element.style.removeProperty('visibility');
         element.style.removeProperty('pointer-events');
-        element.removeAttribute('data-iox-hidden');
+        element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
     }
     reverseAction(element, action) {
-        const { keyframes } = this.buildAnimation(action);
+        const keyframes = this.keyframesFor(effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE)), action);
         if (!keyframes.length)
             return;
+        if (!motionAllowed()) {
+            this.applyFrame(element, keyframes[0]);
+            return;
+        }
         // Reverse: play the keyframes backwards
         element.animate([...keyframes].reverse(), {
             duration: action.duration,
@@ -4383,58 +4717,9 @@ class InteractionEngineService {
             fill: 'forwards',
         });
     }
-    buildAnimation(action) {
-        const dist = action.params?.['distance'] ?? 20;
-        let keyframes = [];
-        switch (action.type) {
-            case 'fadeIn':
-                keyframes = [{ opacity: 0 }, { opacity: 1 }];
-                break;
-            case 'fadeOut':
-                keyframes = [{ opacity: 1 }, { opacity: 0 }];
-                break;
-            case 'moveUp':
-                keyframes = [{ transform: `translateY(${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
-                break;
-            case 'moveDown':
-                keyframes = [{ transform: `translateY(-${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
-                break;
-            case 'moveLeft':
-                keyframes = [{ transform: `translateX(${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
-                break;
-            case 'moveRight':
-                keyframes = [{ transform: `translateX(-${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
-                break;
-            case 'scaleIn':
-                keyframes = [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }];
-                break;
-            case 'scaleOut':
-                keyframes = [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }];
-                break;
-            case 'rotate':
-                const deg = action.params?.['degrees'] ?? 360;
-                keyframes = [{ transform: `rotate(0deg)` }, { transform: `rotate(${deg}deg)` }];
-                break;
-            case 'show':
-                keyframes = [{ opacity: 0, visibility: 'hidden' }, { opacity: 1, visibility: 'visible' }];
-                break;
-            case 'hide':
-                keyframes = [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'hidden' }];
-                break;
-            case 'toggleVisibility':
-                // Toggle is stateful — handled separately via element style
-                keyframes = [{ opacity: 0 }, { opacity: 1 }];
-                break;
-        }
-        return {
-            keyframes,
-            options: {
-                duration: action.duration,
-                delay: action.delay,
-                easing: action.easing,
-                fill: 'forwards',
-            },
-        };
+    /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
+    keyframesFor(type, action) {
+        return buildInteractionKeyframes(type, action.params) ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService }); }
@@ -4923,34 +5208,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-/** The input a component declares to receive its empty-image placeholder (the Image). */
-const EMPTY_SRC_INPUT = 'emptySrc';
-/** The editing canvas's "Add image" label, through the host's i18n. */
-function canvasEmptyImageLabel(labels) {
-    return labels(CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_EMPTY_IMAGE_LABEL_EN);
-}
-/**
- * Push a node's empty-image placeholder (design-system DS3) to its rendered component — a no-op for
- * a component that declares no `emptySrc`. The placeholder depends on the MARKER only, never on the
- * source, so it is set once at render and again whenever the node's element style changes.
- */
-function syncEmptyImagePlaceholder(ref, node, emptyLabel) {
-    // Panels hold the selected node's ref untyped; anything without a component type has no inputs.
-    if (!ref?.componentType || !declaredInputNames(ref.componentType).has(EMPTY_SRC_INPUT))
-        return;
-    ref.setInput(EMPTY_SRC_INPUT, emptyImagePlaceholder(node, emptyLabel));
-}
-/**
- * Everything a node's element style / colour scheme decides on its rendered host, in ONE call: the
- * design classes (marker + scheme) and the empty-image placeholder. Every place that switches or
- * resets a node's style on the canvas calls this, so an adopted Image gains its placeholder at once
- * instead of after a reload (DS3 D2).
- */
-function syncNodeDesign(ref, node, emptyLabel) {
-    syncNodeDesignClasses(ref?.location?.nativeElement ?? null, node);
-    syncEmptyImagePlaceholder(ref, node, emptyLabel);
-}
-
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -5015,6 +5272,7 @@ class RenderDirective {
         this.childSubs = [];
         this.onCanvas = inject(IOX_BUILDER_CANVAS, { optional: true }) ?? false;
         this.labels = inject(IOX_BUILDER_LABELS);
+        this.designState = inject(CanvasDesignStateService, { optional: true });
         /** Host element drag was registered on (collapsed path) — unregistered on destroy. */
         this.hostDragEl = null;
     }
@@ -5121,6 +5379,21 @@ class RenderDirective {
         }
         return null;
     }
+    /** A link's target as the canvas shows it: the page route, else its URL. */
+    canvasHref(node) {
+        const linkType = nodeTraitValue(node, 'linkType');
+        if (linkType === LinkType.Page)
+            return String(nodeTraitValue(node, 'pageRoute') ?? '');
+        return String(nodeTraitValue(node, 'url') ?? nodeTraitValue(node, 'href') ?? '');
+    }
+    syncA11y(host, node, cssId) {
+        if (!host)
+            return;
+        const el = cssId && !host.classList?.contains(`iox-node-${cssId}`)
+            ? host.querySelector?.(`.iox-node-${cssId}`) ?? host
+            : host;
+        syncNodeA11yAttributes(el, nodeA11yAttributes(node, { currentPath: this.designState?.pagePath ?? null, href: this.canvasHref(node) }));
+    }
     render(node) {
         if (!node)
             return;
@@ -5293,6 +5566,9 @@ class RenderDirective {
         // pre-DS2 look; the scheme class is where the token sheet re-declares the section's tokens.
         // Clones carry both (they render the same look).
         syncNodeDesignClasses(nativeEl, node);
+        // The accessibility attributes (CC1: accessible names, aria-hidden icons, dialog openers, the
+        // current page's links) — the SAME decision both engine paths apply, on the node's own element.
+        this.syncA11y(nativeEl, node, cssId);
         // Custom element host defaults to display:inline. Set it to block so it participates
         // properly in layout and CDK can capture its bounding rect. SKIP for directive-hosts: the
         // host is a real element with its own display, and an inline style here out-ranks both
@@ -5500,8 +5776,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }] } });
 
+/** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard' };
 class OverlayComponent {
-    constructor(elRef, instanceRegistry, overlayService, viewportService, presetRegistry, symbolRegistry, interactionPresetRegistry, interactionEngine, clipboard, styleRegistry, panelEventService, cdr, dragEngine) {
+    constructor(elRef, instanceRegistry, overlayService, viewportService, presetRegistry, symbolRegistry, interactionPresetRegistry, interactionEngine, clipboard, styleRegistry, panelEventService, cdr, dragEngine, labels) {
         this.elRef = elRef;
         this.instanceRegistry = instanceRegistry;
         this.overlayService = overlayService;
@@ -5562,6 +5840,7 @@ class OverlayComponent {
         this.boundUpdate = () => this.scheduleUpdate();
         this.boundScrollUpdate = () => this.scheduleUpdate();
         this.activeScrollContainer = null;
+        this.builderLabels = labels ?? defaultBuilderLabels;
     }
     /** Resolves the selected node's OWNING dropzone id dynamically — the drag-handle isn't
      *  rendered inside any container (it's overlay chrome), so it has no source id of its own. */
@@ -5711,6 +5990,15 @@ class OverlayComponent {
     get selectedNodeIsGlobal() {
         return !!this.selectEntry?.node?.isGlobal;
     }
+    /** A composite part's kind + role under the selection (board 3/8 "Selection kind badge"), or null. */
+    get selectedRoleBadge() {
+        const role = this.selectEntry?.node?.role;
+        if (!role)
+            return null;
+        const key = COMPOSITE_KIND_KEYS[role.split('.')[0]];
+        const kind = key ? this.builderLabels(key, BUILDER_CHROME_EN[key]) : role.split('.')[0];
+        return `${kind} · ${role}`;
+    }
     get selectedPresetName() {
         const id = this.selectEntry?.node?.stylePresetId;
         if (!id)
@@ -6026,13 +6314,18 @@ class OverlayComponent {
         // is a zero-area line — prevents diagonal edge triangle artifacts.
         return `polygon(evenodd, 0px 0px, ${w}px 0px, ${w}px ${h}px, 0px ${h}px, 0px 0px, ${x1}px ${y1}px, ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px)`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, deps: [{ token: i0.ElementRef }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i class=\"ph-fill ph-stack\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: DragEngineService }], propDecorators: { toolbarAction: [{
+            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedRoleBadge || selectedPresetName || interactions.length\">\n            <!-- A composite part (Card v2): its kind and role, read-only \u2014 what the layer tree's chip says. -->\n            <div *ngIf=\"selectedRoleBadge\" class=\"preset-badge__item preset-badge__item--kind\" [title]=\"selectedRoleBadge\">\n                <i class=\"ph-fill ph-stack\"></i>\n                <span>{{ selectedRoleBadge }}</span>\n            </div>\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" [class.select-toolbar--inside]=\"toolbarInside\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isDialog\" class=\"toolbar-btn\"\n                    [title]=\"dialogDesignOpen ? 'Close the dialog (design)' : 'Open the dialog (design)'\"\n                    [attr.aria-label]=\"dialogDesignOpen ? 'Close the dialog for design' : 'Open the dialog for design'\"\n                    (mousedown)=\"onToggleDialogOpen($event)\">\n                <i [class]=\"dialogDesignOpen ? 'ph-thin ph-eye-slash' : 'ph-thin ph-eye'\"></i>\n            </button>\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%)}.select-toolbar.select-toolbar--inside{transform:translateY(0);border-radius:0 0 3px 3px}.select-toolbar{display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:var(--iox-success-fill, #2E7D45);border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:color-mix(in srgb,var(--iox-success-fill, #2E7D45) 86%,#000)}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:start;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:var(--iox-success-text, #1B5E32)}.toolbar-more-dropdown .more-item--resync:hover{background:var(--iox-success-bg, #E8F3EC)}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.preset-badge__item--kind{background:#8a3a72;cursor:default}.preset-badge__item--kind:hover{background:#8a3a72}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: DragEngineService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_BUILDER_LABELS]
+                }] }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });
 
@@ -6209,6 +6502,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['widthPopover']
             }] } });
 
+const LOCKED_PART_KEY = 'builder.chrome.lockedPart';
+const COMPOSITE_ROLE_KEY = 'builder.chrome.compositeRole';
 class LayerTreeComponent {
     constructor(registry, overlayService, dragEngine) {
         this.registry = registry;
@@ -6226,11 +6521,16 @@ class LayerTreeComponent {
         this.editingNodeId = null;
         this.editingValue = '';
         this.activeSection = 'page';
+        this.labels = inject(IOX_BUILDER_LABELS);
+        this.lockedPartTitle = this.labels(LOCKED_PART_KEY, BUILDER_CHROME_EN[LOCKED_PART_KEY]);
+        this.roleTitle = this.labels(COMPOSITE_ROLE_KEY, BUILDER_CHROME_EN[COMPOSITE_ROLE_KEY]);
         /** Cache: component type → icon class */
         this.iconMap = new Map();
         /** Last-seen structural signature — used by ngDoCheck to skip no-op rebuilds. */
         this._layoutSig = '';
         this._globalSig = '';
+        /** The eye-slash glyph's title, through the host's i18n (builder.chrome.*). */
+        this.hiddenAtRestTitle = this.labels(HIDDEN_AT_REST_LABEL_KEY, BUILDER_CHROME_EN[HIDDEN_AT_REST_LABEL_KEY]);
         this.expandedState = new Map();
     }
     ngOnInit() {
@@ -6379,11 +6679,13 @@ class LayerTreeComponent {
                 node,
                 icon: this.iconMap.get(node.type) || 'ph-thin ph-cube',
                 label: node.label ?? node.type,
+                hiddenAtRest: isHiddenAtRest(node),
                 depth,
                 expanded,
                 hasChildren,
                 parentArray: arr,
                 indexInParent: i,
+                locked: isLockedPart(node),
             };
             out.push(treeNode);
             if (node.children && expanded) {
@@ -6392,11 +6694,11 @@ class LayerTreeComponent {
         }
     }
     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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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            <!-- A composite part's role (Card v2, board 8 / R2) and, on a locked part, a lock where Delete was. -->\n            <span *ngIf=\"tn.node.role\" class=\"node-role\" [title]=\"roleTitle\">{{ tn.node.role }}</span>\n            <i *ngIf=\"tn.locked\" class=\"ph-thin ph-lock-simple node-lock\" [title]=\"lockedPartTitle\" [attr.aria-label]=\"lockedPartTitle\"></i>\n            <span *ngIf=\"tn.hiddenAtRest\" class=\"node-rest\" [title]=\"hiddenAtRestTitle\" [attr.aria-label]=\"hiddenAtRestTitle\"><i class=\"ph-thin ph-eye-slash\"></i></span>\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 *ngIf=\"!tn.locked\" 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 *ngIf=\"tn.hiddenAtRest\" class=\"node-rest\" [title]=\"hiddenAtRestTitle\" [attr.aria-label]=\"hiddenAtRestTitle\"><i class=\"ph-thin ph-eye-slash\"></i></span>\n            @if (tn.depth === 0) {\n                <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n            }\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-role{flex:none;padding:0 4px;border:1px dashed #c9a1be;border-radius:4px;background:#f7eef5;color:#8a3a72;font:500 10px Fira Code,Fira Mono,monospace;line-height:16px}.layer-tree .node-lock{flex:none;color:#64748b;font-size:12px}.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-rest{display:inline-flex;align-items:center;flex-shrink:0;font-size:12px;color:var(--p-text-muted-color)}.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"] }]
+            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            <!-- A composite part's role (Card v2, board 8 / R2) and, on a locked part, a lock where Delete was. -->\n            <span *ngIf=\"tn.node.role\" class=\"node-role\" [title]=\"roleTitle\">{{ tn.node.role }}</span>\n            <i *ngIf=\"tn.locked\" class=\"ph-thin ph-lock-simple node-lock\" [title]=\"lockedPartTitle\" [attr.aria-label]=\"lockedPartTitle\"></i>\n            <span *ngIf=\"tn.hiddenAtRest\" class=\"node-rest\" [title]=\"hiddenAtRestTitle\" [attr.aria-label]=\"hiddenAtRestTitle\"><i class=\"ph-thin ph-eye-slash\"></i></span>\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 *ngIf=\"!tn.locked\" 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 *ngIf=\"tn.hiddenAtRest\" class=\"node-rest\" [title]=\"hiddenAtRestTitle\" [attr.aria-label]=\"hiddenAtRestTitle\"><i class=\"ph-thin ph-eye-slash\"></i></span>\n            @if (tn.depth === 0) {\n                <span class=\"node-position-badge\">{{ tn.node.globalPosition }}</span>\n            }\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-role{flex:none;padding:0 4px;border:1px dashed #c9a1be;border-radius:4px;background:#f7eef5;color:#8a3a72;font:500 10px Fira Code,Fira Mono,monospace;line-height:16px}.layer-tree .node-lock{flex:none;color:#64748b;font-size:12px}.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-rest{display:inline-flex;align-items:center;flex-shrink:0;font-size:12px;color:var(--p-text-muted-color)}.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 }, { type: DragEngineService }], propDecorators: { layout: [{
                 type: Input
             }], globalElements: [{
@@ -6576,6 +6878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * fitting (the frame is clipped by exactly the difference).
  */
 const CANVAS_INSET = 20;
+/** How long a selection waits for a just-revealed part (a closed drawer) to render its children. */
+const REVEAL_RETRIES = 10;
+const REVEAL_RETRY_MS = 30;
 /** The page-style declarations a child INHERITS (text colour, typeface) — never the background. */
 const INHERITED_PAGE_PROPS = ['color', 'font-family'];
 function pickInherited(css) {
@@ -6641,6 +6946,7 @@ class BuilderComponent {
                         height: rect.height / scale,
                         left: (rect.left - frame.left) / scale,
                         top: (rect.top - frame.top) / scale,
+                        unnamedControl: needsAccessibleName(node),
                     });
                 }
                 if (node.children?.length)
@@ -6736,14 +7042,53 @@ class BuilderComponent {
         for (const finding of this.auditFindings.filter(f => !!f.fix || !!f.inputFix))
             this.applyAuditFix(finding);
     }
+    /** The canvas reserve for a bottom bar among the globals (the same class the live site keys on). */
+    refreshCanvasBarReserve() {
+        let reserve = null;
+        for (const g of this.globalElements)
+            reserve = reserve ?? barReserveClass({ ...g, styleTraits: g.styleTraits });
+        this.canvasBarReserve = reserve;
+    }
     /** Select the node a finding is about. */
     selectAuditNode(finding) {
         const node = this.findNodeById(finding.nodeId, this.layout) ?? this.findNodeById(finding.nodeId, this.globalElements);
-        const ref = node && this.overlayService.getNodeRef(node);
-        if (!node || !ref)
+        if (!node)
             return;
-        this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
-        this._emitElementSelect(node, ref.componentRef);
+        this._withNodeRef(node, ref => {
+            this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+            this._emitElementSelect(node, ref.componentRef);
+        });
+    }
+    /**
+     * Run `select` with the node's rendered ref — at once when it is on the canvas, else after REVEALING
+     * the part hidden at rest it sits in (R2, CC1: a link inside the closed drawer, picked from the layer
+     * tree, the breadcrumb or an Items row). The selection path is set first, which shows the drawer
+     * through the canvas design state; its children render on the next pass, and the selection lands.
+     */
+    _withNodeRef(node, select) {
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            select(ref);
+            return;
+        }
+        const path = nodeAncestorPathInEither(this.layout, this.globalElements, node);
+        if (!path?.some(isHiddenAtRest))
+            return;
+        this.selectedItem = node;
+        this.selectedPath = path;
+        this.cdr.markForCheck();
+        let tries = 0;
+        const retry = () => {
+            const revealed = this.overlayService.getNodeRef(node);
+            if (revealed) {
+                select(revealed);
+                this.cdr.markForCheck();
+                return;
+            }
+            if (++tries < REVEAL_RETRIES)
+                setTimeout(retry, REVEAL_RETRY_MS);
+        };
+        setTimeout(retry);
     }
     /** A node's full base style map, flattened from its styleTraits. */
     baseStyleMapOf(node) {
@@ -6776,6 +7121,8 @@ class BuilderComponent {
     set selectedPath(path) {
         this._selectedPath = path;
         this.formStateService.setTarget(nearestFormNode(path));
+        // R2 (CC1): a part hidden at rest that the selection sits in (a closed drawer) shows while selected.
+        this.canvasDesignState.setSelectionPath(path);
     }
     // Type-safe event forwarding for toolbar outputs
     handleToolbarModeChange(mode) {
@@ -6843,7 +7190,7 @@ class BuilderComponent {
     get canvasMinHeight() {
         return this.viewportService.getState().height;
     }
-    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, formStateService, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas, selectoCanvas, styleRegistry) {
+    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, formStateService, canvasDesignState, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas, selectoCanvas, styleRegistry) {
         this.registry = registry;
         this.overlayService = overlayService;
         this.panelEventService = panelEventService;
@@ -6851,6 +7198,7 @@ class BuilderComponent {
         this.dsRegistry = dsRegistry;
         this.viewportService = viewportService;
         this.formStateService = formStateService;
+        this.canvasDesignState = canvasDesignState;
         this.interactionEngine = interactionEngine;
         this.interactionPresetRegistry = interactionPresetRegistry;
         this.clipboard = clipboard;
@@ -6887,6 +7235,8 @@ class BuilderComponent {
         this.pageStatus = 'draft';
         this.pageSettings = null;
         this.globalElements = [];
+        /** The app path of the page on the canvas (`/work`): its links render as the current page (CC1 N2). */
+        this.pagePath = '';
         this.canUndo = false;
         this.canRedo = false;
         /** Feature flag: drive drag/select/resize via Moveable + Selecto instead of interact.js.
@@ -6951,6 +7301,9 @@ class BuilderComponent {
          *  the site global elements sit inside <body> and inherit it; on the canvas they are a sibling
          *  layer of the page, so they get it explicitly. Never the background (it would cover the page). */
         this.globalLayerCss = {};
+        /** The page reserves a bottom bar's height on the canvas where the bar shows (CC1 R1) — design-core's
+         *  `barReserveClass` of the bar among the globals, or null. A field, recomputed when globals change. */
+        this.canvasBarReserve = null;
         /** Canvas frame height in canvas-space pixels (= previewScroll.clientHeight / scale).
          *  Used as iox-page-component's height so position:fixed top:0;bottom:0 fills the
          *  same area as height:100vh (both resolve to this value). */
@@ -7015,7 +7368,13 @@ class BuilderComponent {
             this.pageStyleCss = compilePageStyle(this.pageSettings?.style, { designSystem: this.pageSettings?.designSystem === true });
             this.globalLayerCss = pickInherited(this.pageStyleCss);
         }
+        if (changes['pagePath']) {
+            // A different page: its own current links, and no part left revealed from the last one.
+            this.canvasDesignState.reset();
+            this.canvasDesignState.setPagePath(this.pagePath);
+        }
         if (changes['globalElements']) {
+            this.refreshCanvasBarReserve();
             // The *ngIf on the global overlay renders after this hook — defer so
             // globalOverlayRef is in the DOM before we try to set CSS vars on it.
             setTimeout(() => this.updatePreviewVh());
@@ -7458,12 +7817,11 @@ class BuilderComponent {
     }
     /** Breadcrumb crumb clicked — select that ancestor. Mirrors a layer-tree click. */
     onCrumbSelect(node) {
-        const ref = this.overlayService.getNodeRef(node);
-        if (!ref)
-            return;
-        this.selectedItem = node;
-        this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
-        this._emitElementSelect(node, ref.componentRef);
+        this._withNodeRef(node, ref => {
+            this.selectedItem = node;
+            this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+            this._emitElementSelect(node, ref.componentRef);
+        });
     }
     /**
      * Body crumb clicked — the page surface itself, which is not a node in the layout tree.
@@ -7491,10 +7849,10 @@ class BuilderComponent {
     }
     onTreeNodeSelect(node) {
         this.selectedItem = node;
-        const ref = this.overlayService.getNodeRef(node);
-        if (ref) {
+        this._withNodeRef(node, ref => {
+            this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
             this._emitElementSelect(node, ref.componentRef);
-        }
+        });
         this.selectPanel(PanelTypes.STYLES);
     }
     onTreeNodeAction(event) {
@@ -7514,6 +7872,8 @@ class BuilderComponent {
         if (!result)
             return;
         if (action === NodeAction.Delete) {
+            if (this.dragEngine.refuseRemoval(node))
+                return;
             result.parent.splice(result.index, 1);
             this.selectedItem = null;
             this.overlayService.clearSelect();
@@ -7549,7 +7909,7 @@ class BuilderComponent {
             }
             case ToolbarAction.Delete: {
                 const result = this.findNodeInTree(node, this.layout) ?? this.findNodeInTree(node, this.globalElements);
-                if (result) {
+                if (result && !this.dragEngine.refuseRemoval(node)) {
                     result.parent.splice(result.index, 1);
                     this.selectedItem = null;
                     this.overlayService.clearSelect();
@@ -7629,7 +7989,7 @@ class BuilderComponent {
             }
             case ToolbarAction.MakeGlobal: {
                 const result = this.findNodeInTree(node, this.layout);
-                if (result) {
+                if (result && !this.dragEngine.refuseRemoval(node)) {
                     result.parent.splice(result.index, 1);
                     node.isGlobal = true;
                     node.globalPosition = event.position ?? 'before';
@@ -7861,6 +8221,16 @@ class BuilderComponent {
     /** If `node` lives inside a Repeater template, tell that repeater to rebuild its preview rows so
      *  a structural change (e.g. wrapping a template child) propagates to every repeated row. No-op
      *  when the node is not inside a repeater. */
+    /** NODE_STRUCTURE_CHANGED: the subtree's children render (CD), then every node's rules, classes and
+     *  inputs are re-applied (a moved node's rule may have been dropped by its old host's teardown). */
+    applyStructureChange(node) {
+        this.cdr.detectChanges();
+        refreshSubtree(node, this.styleRegistry, n => this.overlayService.getNodeRef(n)?.componentRef, canvasEmptyImageLabel(this.labels));
+        this._refreshRepeaterFor(node);
+        this.cdr.detectChanges();
+        this.overlayService.refreshSelect();
+        this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+    }
     _refreshRepeaterFor(node) {
         const repeater = this.findRepeaterAncestorOf(node, this.layout)
             ?? this.findRepeaterAncestorOf(node, this.globalElements);
@@ -7948,23 +8318,32 @@ class BuilderComponent {
             this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
             return;
         }
+        // A panel rewrote a subtree in place (a Card's Parts / Layout / Link): re-render it, re-register
+        // every node's rules and classes, refresh a Repeater holding it, and record ONE undo step.
+        if (panelEvent.type === PanelEventTypes.NODE_STRUCTURE_CHANGED) {
+            const node = panelEvent.data?.node;
+            if (node)
+                this.applyStructureChange(node);
+            return;
+        }
         // A panel (e.g. the Form's nested field list) wants to select a node it already holds a
         // reference to — same path onTreeNodeSelect/onCrumbSelect use, so selectedItem/selectedPath
         // and every panel stay in sync, not just the overlay's own visual selection box.
         if (panelEvent.type === PanelEventTypes.SELECT_NODE) {
             const node = panelEvent.data?.node;
-            const ref = node ? this.overlayService.getNodeRef(node) : undefined;
-            if (node && ref) {
-                this.selectedItem = node;
-                this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
-                this._emitElementSelect(node, ref.componentRef);
-            }
+            if (node)
+                this._withNodeRef(node, ref => {
+                    this.selectedItem = node;
+                    this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+                    this._emitElementSelect(node, ref.componentRef);
+                });
             return;
         }
         // Every style or structural edit — including a breakpoint override — emits LAYOUT_CHANGED.
         if (panelEvent.type === PanelEventTypes.LAYOUT_CHANGED) {
             this.refreshBreakpointCounts();
             this.refreshStructureFindings();
+            this.refreshCanvasBarReserve();
             return;
         }
         if (panelEvent.type === PanelEventTypes.PANEL_CLOSE) {
@@ -7975,13 +8354,13 @@ class BuilderComponent {
             this.isPanelOpen = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: FormStateService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i17.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: FormStateService }, { token: CanvasDesignStateService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", pagePath: "pagePath", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i17.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i18.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder', standalone: false, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: FormStateService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }, { type: StyleRegistryService }], propDecorators: { layout: [{
+            args: [{ selector: 'app-builder', standalone: false, providers: [{ provide: IOX_BUILDER_CANVAS, useValue: true }], template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length || structureFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\"\n              (dragstart)=\"onNativeDragStart($event)\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <!-- iox-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [attr.data-bar-reserve]=\"canvasBarReserve\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;container:iox-canvas/inline-size;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder #canvas-preview[data-bar-reserve=iox-bar-reserve]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}@container iox-canvas (max-width: 1200px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-laptop]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 991px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-tablet]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 767px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-mobile]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}@container iox-canvas (max-width: 479px){.builder #canvas-preview[data-bar-reserve=iox-bar-reserve-small]{padding-block-end:calc(var(--iox-tabbar-height, 64px) + var(--iox-border-width, 1px) + var(--iox-tabbar-inset, 0px) * 2)}}.builder .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: FormStateService }, { type: CanvasDesignStateService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }, { type: StyleRegistryService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
                 type: Input
@@ -7999,6 +8378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], globalElements: [{
                 type: Input
+            }], pagePath: [{
+                type: Input
             }], canUndo: [{
                 type: Input
             }], canRedo: [{
@@ -9071,11 +9452,12 @@ class BuilderDialogComponent {
         const allowed = ['center', 'top', 'bottom', 'start', 'end'];
         return allowed.indexOf(String(this.placement)) >= 0 ? String(this.placement) : 'center';
     }
-    constructor(dragEngine, instanceRegistry, overlayService, cdr) {
+    constructor(dragEngine, instanceRegistry, overlayService, cdr, designState) {
         this.dragEngine = dragEngine;
         this.instanceRegistry = instanceRegistry;
         this.overlayService = overlayService;
         this.cdr = cdr;
+        this.designState = designState;
         this.children = [];
         this.nodeId = '';
         this.dropListId = '';
@@ -9087,7 +9469,21 @@ class BuilderDialogComponent {
         this.childMouseLeave = new EventEmitter();
         /** Canvas-only visibility. Never serialised; the live site always starts closed. */
         this.designOpen = false;
+        /** Opened by an action on the canvas (the canvas is a live runtime): stays until something closes it. */
+        this.runtimeOpen = false;
+        /** Closed by its X / backdrop while the selection or the switcher still shows it: hidden until either changes. */
+        this.dismissed = false;
+    }
+    /** Shown when an action opened it, or the canvas design state shows it (selection inside / switched open). */
+    recompute() {
+        const shown = !this.dismissed && (this.runtimeOpen || !!this.designState?.isShown(this.nodeId));
+        if (shown === this.designOpen)
+            return;
+        this.designOpen = shown;
+        this.cdr.markForCheck();
     }
+    openRuntime() { this.runtimeOpen = true; this.dismissed = false; this.recompute(); }
+    closeRuntime() { this.runtimeOpen = false; this.dismissed = true; this.recompute(); }
     ngOnInit() {
         // Board A4: "Closed later? Click it [in the tree] and it reopens." Selection IS the
         // reopen signal — tree row, breadcrumb crumb, target-picker jump all land here.
@@ -9104,23 +9500,31 @@ class BuilderDialogComponent {
         // node a tick after it renders, and `select$` is a BehaviorSubject — so a dialog dropped
         // right now still lands open, through the line below, while one that was merely loaded
         // stays shut because nothing is selected on load.
-        this.selectSub = this.overlayService.select$?.subscribe?.((sel) => {
-            const id = sel?.node?.id ?? sel?.nodeId;
-            if (id && id === this.nodeId && !this.designOpen) {
-                this.designOpen = true;
-                this.cdr.markForCheck();
-            }
-        });
+        //
+        // CC1 (R2, board 3): with the canvas design state present, "selected" means the selection is the
+        // dialog OR ANY PART INSIDE IT (a drawer link picked from the tree), and DESELECTING closes it
+        // again — a closed overlay has no canvas presence. The "Showing on canvas" switcher holds it open.
+        if (this.designState) {
+            this.stateSub = this.designState.state$.subscribe(() => { this.dismissed = false; this.recompute(); });
+        }
+        else {
+            this.selectSub = this.overlayService.select$?.subscribe?.((sel) => {
+                const id = sel?.node?.id ?? sel?.nodeId;
+                if (id && id === this.nodeId && !this.designOpen)
+                    this.openRuntime();
+            });
+        }
         // Open/close/toggle actions (and A1c's panel) reach the canvas twin through here.
         this.instanceRegistry.register(this.nodeId, {
-            open: () => { this.designOpen = true; this.cdr.markForCheck(); },
-            close: () => { this.designOpen = false; this.cdr.markForCheck(); },
-            toggle: () => { this.designOpen = !this.designOpen; this.cdr.markForCheck(); },
+            open: () => this.openRuntime(),
+            close: () => this.closeRuntime(),
+            toggle: () => (this.designOpen ? this.closeRuntime() : this.openRuntime()),
             isOpen: () => this.designOpen,
         });
     }
     ngOnDestroy() {
         this.selectSub?.unsubscribe();
+        this.stateSub?.unsubscribe();
         this.instanceRegistry.unregister(this.nodeId);
     }
     /** A click on the stage ITSELF is the backdrop click — children swallow everything else.
@@ -9132,21 +9536,21 @@ class BuilderDialogComponent {
             return;
         if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false') {
             event.stopPropagation();
-            this.designOpen = false;
+            this.closeRuntime();
         }
     }
     onCloseClick(event) {
         event.stopPropagation();
-        this.designOpen = false;
+        this.closeRuntime();
     }
     onBackdrop() {
         if (this.closeOnBackdrop !== false && this.closeOnBackdrop !== 'false')
-            this.designOpen = false;
+            this.closeRuntime();
     }
     onDrop(event) {
         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: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }, { token: CanvasDesignStateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
@@ -9179,7 +9583,7 @@ class BuilderDialogComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
             type: Component,
@@ -9215,8 +9619,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
-        }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
+    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]){padding:0}:host(.iox-es) .dialog-stage:is([data-placement=end],[data-placement=start]) .dialog-surface{height:100%;max-height:100%}:host(.iox-es) .dialog-stage[data-placement=end] .dialog-surface{border-start-end-radius:0;border-end-end-radius:0}:host(.iox-es) .dialog-stage[data-placement=start] .dialog-surface{border-start-start-radius:0;border-end-start-radius:0}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
+        }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }, { type: CanvasDesignStateService, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { children: [{
                 type: Input
             }], nodeId: [{
                 type: Input
@@ -10334,6 +10740,7 @@ class IoxBuilderModule {
             InteractionEngineService,
             ViewportService,
             FormStateService,
+            CanvasDesignStateService,
             StyleRegistryService,
             PanelEventService,
             PresetRegistryService,
@@ -10391,6 +10798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         InteractionEngineService,
                         ViewportService,
                         FormStateService,
+                        CanvasDesignStateService,
                         StyleRegistryService,
                         PanelEventService,
                         PresetRegistryService,
@@ -10638,6 +11046,62 @@ function buildPalettePreset(def, createConfig) {
     return node;
 }
 
+/**
+ * CONTENT BLOCKS (complex-components board 8, composite T23 / T25) — Card, Badge, Chip. Not component
+ * types: each is a composite-core recipe of ordinary nodes (the Card's parts carry roles), stamped here
+ * with the builder's own node factory — the same recipe generation-core's composer stamps with its own.
+ */
+var CompositePresetId;
+(function (CompositePresetId) {
+    CompositePresetId["Card"] = "card";
+    CompositePresetId["Badge"] = "badge";
+    CompositePresetId["Chip"] = "chip";
+})(CompositePresetId || (CompositePresetId = {}));
+const COMPOSITE_PRESETS = Object.freeze([
+    {
+        id: CompositePresetId.Card, name: 'Card', icon: 'ph-thin ph-cards',
+        description: 'Image, title, text and buttons — every part its own element. Layout, parts and link in its panel.',
+        build: create => buildCardRecipe(create),
+    },
+    {
+        id: CompositePresetId.Badge, name: 'Badge', icon: 'ph-thin ph-seal',
+        description: 'A small pill — an icon and a word in one of four tones.',
+        build: create => buildBadge(create),
+    },
+    {
+        id: CompositePresetId.Chip, name: 'Chip', icon: 'ph-thin ph-tag',
+        description: 'An outlined pill — an icon and a word.',
+        build: create => buildChip(create),
+    },
+]);
+/**
+ * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
+ * (`createConfig`, already wearing its type's default style), the recipe's props written into its traits,
+ * then moved onto the asked element style (`switchElementStyle`, so nothing of the default style lingers).
+ */
+function builderCompositeFactory(createConfig, baselineStyles) {
+    return spec => {
+        const node = createConfig(spec.type);
+        if (!node)
+            throw new Error(`"${spec.type}" is not a registered component type`);
+        for (const [name, value] of Object.entries(spec.props ?? {})) {
+            const trait = node.traits?.find(t => t.name === name);
+            if (trait)
+                trait.default = value;
+        }
+        if (spec.elementStyle && spec.elementStyle !== node.elementStyle) {
+            switchElementStyle(node, node.elementStyle, spec.elementStyle, baselineStyles(spec.type));
+        }
+        if (node.children)
+            node.children = [];
+        return node;
+    };
+}
+/** A fresh content block for the palette (click or drag). */
+function buildCompositePreset(def, createConfig, baselineStyles) {
+    return def.build(builderCompositeFactory(createConfig, baselineStyles));
+}
+
 function text$1(content, styles, createConfig) {
     const node = textNode(content, createConfig);
     if (node)
@@ -11039,6 +11503,8 @@ class DialogComponentConfig extends ComponentConfig {
             closeOnBackdrop: 'checkbox',
             showCloseButton: 'checkbox',
             consentRole: 'checkbox',
+            closeAbove: 'select',
+            ariaLabel: 'text',
         };
         this.traits = [
             // A5: "Centre modal · bottom bar · side sheet — placement is a style choice."
@@ -11048,6 +11514,8 @@ class DialogComponentConfig extends ComponentConfig {
             // C3: the live runtime opens THIS dialog when consent is owed (needsPrompt), and a
             // close without a decision records a "no". The canvas never auto-opens anything.
             new TraitConfig('consentRole', 'Consent banner role', TraitInputType.Checkbox, undefined, false),
+            ...buildDialogCloseAboveTraits(),
+            ...buildAccessibleNameTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -11081,10 +11549,8 @@ class BuilderButtonComponentConfig extends ComponentConfig {
     }
 }
 
-const BUTTON_LINK_TYPES = [
-    { label: 'External URL', value: LinkType.External },
-    { label: 'Website Page', value: LinkType.Page },
-];
+const BUTTON_TARGETS = [{ label: '_self', value: '_self' }, { label: '_blank', value: '_blank' }];
+const LINKS_AS_ANCHOR = { trait: 'tag', values: 'a' };
 class ButtonBlockComponentConfig extends ComponentConfig {
     constructor() {
         super('ButtonBlock', 'app-builder-button-block', 'ph-thin ph-cursor-click', 'Basic');
@@ -11098,6 +11564,7 @@ class ButtonBlockComponentConfig extends ComponentConfig {
             pageRoute: 'text',
             target: 'select',
             type: 'select',
+            ariaLabel: 'text',
         };
         // 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.
@@ -11105,11 +11572,9 @@ class ButtonBlockComponentConfig extends ComponentConfig {
         // trait is hidden is hidden too, so a <button> shows neither.
         this.traits = [
             new TraitConfig('tag', 'Tag', TraitInputType.Select, ['button', 'a'], 'button'),
-            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' }),
+            ...linkTraits({ urlTrait: 'href', urlDefault: '', showWhen: LINKS_AS_ANCHOR, targets: BUTTON_TARGETS }),
             new TraitConfig('type', 'Type', TraitInputType.Select, ['button', 'submit', 'reset'], 'button', false, { trait: 'tag', values: 'button' }),
+            ...buildAccessibleNameTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -11497,8 +11962,11 @@ class BuilderHeadingComponentConfig extends ComponentConfig {
         this.traits = [
             new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Heading'),
             new TraitConfig('level', 'Level', TraitInputType.Select, ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], 'h2'),
+            // A heading links only when asked: Card v2's "Link the whole card" makes the card's TITLE its
+            // one link (the stretched link). Edited from the card's Link section, never a second control.
+            ...linkTraits({ allowNone: true, urlDefault: '' }),
         ];
-        this.styleTraits = buildFullStyleTraits();
+        this.styleTraits = withMaxLines(buildFullStyleTraits());
         this.applyStyleDefaults({
             fontSize: '32px',
             fontWeight: '700',
@@ -11558,18 +12026,12 @@ class BuilderLinkComponentConfig extends ComponentConfig {
             url: 'text',
             pageRoute: 'text',
             target: 'select',
+            ariaLabel: 'text',
         };
         this.traits = [
             new TraitConfig('label', 'Label', TraitInputType.Text, undefined, 'Click here'),
-            new TraitConfig('linkType', 'Link Type', TraitInputType.Select, [{ label: 'External URL', value: 'external' }, { label: 'Website Page', value: 'page' }], 'external'),
-            new TraitConfig('url', 'URL', TraitInputType.Text, undefined, 'https://', false, { trait: 'linkType', values: 'external' }),
-            new TraitConfig('pageRoute', 'Page Route', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: 'page' }),
-            new TraitConfig('target', 'Target', TraitInputType.Select, [
-                { label: 'Same tab', value: '_self' },
-                { label: 'New tab', value: '_blank' },
-                { label: 'Parent frame', value: '_parent' },
-                { label: 'Full window', value: '_top' },
-            ], '_self'),
+            ...linkTraits(),
+            ...buildAccessibleNameTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
     }
@@ -11584,18 +12046,12 @@ class BuilderLinkedContainerConfig extends ComponentConfig {
             url: 'text',
             pageRoute: 'text',
             target: 'select',
+            ariaLabel: 'text',
         };
         this.traits = [
-            new TraitConfig('linkType', 'Link Type', TraitInputType.Select, [{ label: 'External URL', value: 'external' }, { label: 'Website Page', value: 'page' }], 'external'),
-            new TraitConfig('url', 'URL', TraitInputType.Text, undefined, 'https://', false, { trait: 'linkType', values: 'external' }),
-            new TraitConfig('pageRoute', 'Page Route', TraitInputType.Text, undefined, '', false, { trait: 'linkType', values: 'page' }),
-            new TraitConfig('target', 'Target', TraitInputType.Select, [
-                { label: 'Same tab', value: '_self' },
-                { label: 'New tab', value: '_blank' },
-                { label: 'Parent frame', value: '_parent' },
-                { label: 'Full window', value: '_top' },
-            ], '_self'),
+            ...linkTraits(),
             buildColorSchemeTrait(),
+            ...buildAccessibleNameTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -11633,7 +12089,7 @@ class TextBlockComponentConfig extends ComponentConfig {
             new TraitConfig('content', 'Content', TraitInputType.Text, undefined, 'Enter text here'),
             new TraitConfig('tag', 'Tag', TraitInputType.Select, ['p', 'span'], 'p'),
         ];
-        this.styleTraits = buildFullStyleTraits();
+        this.styleTraits = withMaxLines(buildFullStyleTraits());
         this.applyStyleDefaults({
             display: 'block',
             height: 'auto',
@@ -11906,5 +12362,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, 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, StructureFix, 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 };
+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, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositePresetId, 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, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_TYPES, 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, StructureFix, 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, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeStyleMap, pathToNode, refreshSubtree, removalRefusal, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, rootEscapeBand, rootZone, setStyleTrait, setTrait, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map