@vectoriox/iox-builder 3.4.0 → 3.5.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -968,6 +968,57 @@ const SCREEN_WIDTH_OPTIONS = [
     { label: '2560', width: 2560 },
 ];
 
+/**
+ * node-path — pure ancestor-chain helpers for the builder's node tree.
+ *
+ * The builder needs a node's ancestor chain in several places: the breadcrumb bar,
+ * "select parent", and the parent-scoped style traits (Child Layout). Each of those
+ * used to re-walk the tree with its own private recursion. `nodeAncestorPath` is the
+ * single walk they all derive from.
+ *
+ * Builder-only on purpose: the SSR engine never needs a breadcrumb, so this stays in
+ * `iox-builder` rather than `@vectoriox/iox-ui` (which is the home for logic BOTH
+ * renderers consume). Structural helpers the two renderers share live in
+ * `@vectoriox/iox-ui` `style-compiler/tree-relations.ts`.
+ */
+/**
+ * The chain of nodes from a root down to (and including) `target`, matched by
+ * REFERENCE identity. Returns `null` when `target` is not in the tree.
+ *
+ * Depth-first, pre-order; first match wins. Reference identity (not `id`) is the right
+ * matcher here because the builder mutates nodes in place and repeater/slider clones
+ * deliberately share a template's `styleId` — matching by id would return the template's
+ * path for a clone.
+ */
+function nodeAncestorPath(roots, target) {
+    if (!roots?.length || !target)
+        return null;
+    for (const node of roots) {
+        if (node === target)
+            return [node];
+        const childPath = nodeAncestorPath(node.children, target);
+        if (childPath)
+            return [node, ...childPath];
+    }
+    return null;
+}
+/**
+ * The immediate parent of `target`, or `null` when it is a root node or not in the tree.
+ * Derived from `nodeAncestorPath` so there is exactly one tree walk to keep correct.
+ */
+function findParentOf(roots, target) {
+    const path = nodeAncestorPath(roots, target);
+    return path && path.length >= 2 ? path[path.length - 2] : null;
+}
+/**
+ * The ancestor chain across BOTH builder trees — the page layout and the global
+ * elements overlay, which are separate roots. Returns the first tree that contains
+ * the node, or `null` when neither does.
+ */
+function nodeAncestorPathInEither(layout, globalElements, target) {
+    return nodeAncestorPath(layout, target) ?? nodeAncestorPath(globalElements, target);
+}
+
 class ComponentRegistryService {
     constructor() {
         this.components = {};
@@ -4814,6 +4865,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
+/**
+ * The element path bar — the full ancestor chain of the selected node, clickable,
+ * plus a badge for each piece of node state that otherwise only surfaces by opening
+ * a different panel (bound / symbol / preset / interactions / global).
+ *
+ * Presentational: it holds no tree and does no lookups. The builder computes the path
+ * (see `utils/node-path.util.ts`) and passes it in.
+ *
+ * See iox-ai-guidance `architecture/builder/builder-usability-plan.md` (B1).
+ */
+class BreadcrumbBarComponent {
+    constructor() {
+        /** Emitted when a crumb is clicked — the builder selects that node. */
+        this.nodeSelect = new EventEmitter();
+        /** Emitted on crumb hover (and `null` on leave) — the builder outlines it on canvas. */
+        this.nodePeek = new EventEmitter();
+        this.crumbs = [];
+        this.badges = [];
+    }
+    /** Root → selected node. Empty when nothing is selected. */
+    set path(value) {
+        const nodes = value ?? [];
+        const last = nodes.length - 1;
+        this.crumbs = nodes.map((node, i) => ({
+            node,
+            label: node.label || node.type,
+            isCurrent: i === last,
+        }));
+        this.badges = this.buildBadges(nodes[last]);
+    }
+    trackCrumb(_index, crumb) {
+        return crumb.node;
+    }
+    trackBadge(_index, badge) {
+        return badge.icon;
+    }
+    onSelect(crumb) {
+        this.nodeSelect.emit(crumb.node);
+    }
+    onPeek(crumb) {
+        this.nodePeek.emit(crumb.node);
+    }
+    onPeekEnd() {
+        this.nodePeek.emit(null);
+    }
+    /**
+     * Node state that today is only discoverable by visiting another panel. Built as a
+     * data table rather than a chain of ifs so a new badge is one row.
+     */
+    buildBadges(node) {
+        if (!node)
+            return [];
+        const interactions = node.interactions?.length ?? 0;
+        const bindings = node.bindings?.length ?? 0;
+        const rows = [
+            [bindings > 0, 'ph-thin ph-plugs-connected', String(bindings),
+                `${bindings} data binding${bindings === 1 ? '' : 's'}`],
+            [interactions > 0, 'ph-thin ph-lightning', String(interactions),
+                `${interactions} interaction${interactions === 1 ? '' : 's'}`],
+            [!!node.symbolId, 'ph-thin ph-diamond', 'Symbol',
+                'Linked symbol instance — edits propagate to every instance'],
+            [!node.symbolId && !!node.detachedSymbolId, 'ph-thin ph-link-break', 'Detached',
+                'Detached from its symbol — edits no longer propagate'],
+            [!!node.stylePresetId, 'ph-thin ph-palette', 'Preset',
+                'Styled by a shared style preset'],
+            [!!node.isGlobal, 'ph-thin ph-globe-hemisphere-west', 'Global',
+                'Global element — rendered on every page'],
+        ];
+        return rows
+            .filter(([on]) => on)
+            .map(([, icon, label, title]) => ({ icon, label, title }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BreadcrumbBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BreadcrumbBarComponent, isStandalone: false, selector: "app-breadcrumb-bar", inputs: { path: "path" }, outputs: { nodeSelect: "nodeSelect", nodePeek: "nodePeek" }, ngImport: i0, template: "<nav class=\"breadcrumb-bar\" aria-label=\"Selected element path\">\n    @if (crumbs.length) {\n    <ol class=\"crumbs\" #crumbList>\n        @for (crumb of crumbs; track trackCrumb($index, crumb)) {\n        <li class=\"crumb-item\">\n            @if (!$first) {\n            <i class=\"crumb-sep ph-thin ph-caret-right\" aria-hidden=\"true\"></i>\n            }\n            <button type=\"button\"\n                    class=\"crumb\"\n                    [class.crumb--current]=\"crumb.isCurrent\"\n                    [attr.aria-current]=\"crumb.isCurrent ? 'true' : null\"\n                    [title]=\"crumb.label\"\n                    (mouseenter)=\"onPeek(crumb)\"\n                    (mouseleave)=\"onPeekEnd()\"\n                    (focus)=\"onPeek(crumb)\"\n                    (blur)=\"onPeekEnd()\"\n                    (click)=\"onSelect(crumb)\">{{ crumb.label }}</button>\n        </li>\n        }\n    </ol>\n\n    <div class=\"badges\">\n        @for (badge of badges; track trackBadge($index, badge)) {\n        <span class=\"badge\" [title]=\"badge.title\">\n            <i [class]=\"badge.icon\" aria-hidden=\"true\"></i>\n            <span class=\"badge-label\">{{ badge.label }}</span>\n        </span>\n        }\n    </div>\n    } @else {\n    <span class=\"crumb-empty\">Nothing selected \u2014 click an element on the canvas</span>\n    }\n</nav>\n", styles: [".breadcrumb-bar{display:flex;align-items:center;gap:10px;block-size:34px;padding-inline:14px;background:var(--p-content-background);border-block-end:1px solid var(--p-content-border-color);flex:none;overflow:hidden}.crumbs{display:flex;align-items:center;gap:2px;flex:1;min-inline-size:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}.crumbs::-webkit-scrollbar{display:none}.crumb-item{display:flex;align-items:center;gap:2px;flex:none}.crumb-sep{font-size:11px;color:var(--p-text-muted-color);opacity:.6}.crumb{max-inline-size:180px;padding:3px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-family:inherit;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .15s ease,color .15s ease}.crumb:hover{background:var(--p-content-hover-background);color:var(--p-text-color)}.crumb:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.crumb--current{background:#cb909029;border-color:#cb9090;color:var(--p-text-color);font-weight:600}.crumb-empty{font-size:11px;color:var(--p-text-muted-color);opacity:.75}.badges{display:flex;align-items:center;gap:5px;flex:none}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:1px solid var(--p-content-border-color);border-radius:20px;color:var(--p-text-muted-color);font-size:10px;white-space:nowrap}.badge i{font-size:12px}.badge-label{line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BreadcrumbBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-breadcrumb-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<nav class=\"breadcrumb-bar\" aria-label=\"Selected element path\">\n    @if (crumbs.length) {\n    <ol class=\"crumbs\" #crumbList>\n        @for (crumb of crumbs; track trackCrumb($index, crumb)) {\n        <li class=\"crumb-item\">\n            @if (!$first) {\n            <i class=\"crumb-sep ph-thin ph-caret-right\" aria-hidden=\"true\"></i>\n            }\n            <button type=\"button\"\n                    class=\"crumb\"\n                    [class.crumb--current]=\"crumb.isCurrent\"\n                    [attr.aria-current]=\"crumb.isCurrent ? 'true' : null\"\n                    [title]=\"crumb.label\"\n                    (mouseenter)=\"onPeek(crumb)\"\n                    (mouseleave)=\"onPeekEnd()\"\n                    (focus)=\"onPeek(crumb)\"\n                    (blur)=\"onPeekEnd()\"\n                    (click)=\"onSelect(crumb)\">{{ crumb.label }}</button>\n        </li>\n        }\n    </ol>\n\n    <div class=\"badges\">\n        @for (badge of badges; track trackBadge($index, badge)) {\n        <span class=\"badge\" [title]=\"badge.title\">\n            <i [class]=\"badge.icon\" aria-hidden=\"true\"></i>\n            <span class=\"badge-label\">{{ badge.label }}</span>\n        </span>\n        }\n    </div>\n    } @else {\n    <span class=\"crumb-empty\">Nothing selected \u2014 click an element on the canvas</span>\n    }\n</nav>\n", styles: [".breadcrumb-bar{display:flex;align-items:center;gap:10px;block-size:34px;padding-inline:14px;background:var(--p-content-background);border-block-end:1px solid var(--p-content-border-color);flex:none;overflow:hidden}.crumbs{display:flex;align-items:center;gap:2px;flex:1;min-inline-size:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}.crumbs::-webkit-scrollbar{display:none}.crumb-item{display:flex;align-items:center;gap:2px;flex:none}.crumb-sep{font-size:11px;color:var(--p-text-muted-color);opacity:.6}.crumb{max-inline-size:180px;padding:3px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-family:inherit;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .15s ease,color .15s ease}.crumb:hover{background:var(--p-content-hover-background);color:var(--p-text-color)}.crumb:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.crumb--current{background:#cb909029;border-color:#cb9090;color:var(--p-text-color);font-weight:600}.crumb-empty{font-size:11px;color:var(--p-text-muted-color);opacity:.75}.badges{display:flex;align-items:center;gap:5px;flex:none}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:1px solid var(--p-content-border-color);border-radius:20px;color:var(--p-text-muted-color);font-size:10px;white-space:nowrap}.badge i{font-size:12px}.badge-label{line-height:1.4}\n"] }]
+        }], propDecorators: { path: [{
+                type: Input
+            }], nodeSelect: [{
+                type: Output
+            }], nodePeek: [{
+                type: Output
+            }] } });
+
 class BuilderComponent {
     // Type-safe event forwarding for toolbar outputs
     handleToolbarModeChange(mode) {
@@ -4943,6 +5080,9 @@ class BuilderComponent {
         this.activeZoom = 100;
         this.activeScreenWidth = 1440;
         this.selectedItem = null;
+        /** Root → selected node. Drives the breadcrumb bar. Recomputed on every selection
+         *  change (never a getter — see `_emitElementSelect`). */
+        this.selectedPath = [];
         this.isDragging = false;
         this.scrollThumbTop = 0; // px from top of track
         this.scrollThumbHeight = 0; // px height of thumb
@@ -5395,8 +5535,29 @@ class BuilderComponent {
     handleCanvasClick() {
         // Only fires when clicking empty canvas space (renderers call stopPropagation)
         this.selectedItem = null;
+        this.selectedPath = [];
         this.overlayService.clearSelect();
     }
+    /** 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);
+    }
+    /** Breadcrumb crumb hovered (or `null` on leave) — outline it on the canvas so the chain
+     *  is readable without clicking through it. */
+    onCrumbPeek(node) {
+        if (!node) {
+            this.overlayService.clearHover();
+            return;
+        }
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref)
+            this.overlayService.setHover(ref.element, node.label || node.type, this.activeMode);
+    }
     onTreeNodeSelect(node) {
         this.selectedItem = node;
         const ref = this.overlayService.getNodeRef(node);
@@ -5714,17 +5875,11 @@ class BuilderComponent {
         }
         return null;
     }
-    findParentNode(target, children, parent) {
-        for (const child of children) {
-            if (child === target)
-                return parent || null;
-            if (child.children) {
-                const found = this.findParentNode(target, child.children, child);
-                if (found)
-                    return found;
-            }
-        }
-        return null;
+    /** Immediate parent of `target` within `children`, or null at a root. Derives from the
+     *  shared `nodeAncestorPath` walk in `utils/node-path.util.ts` — one tree recursion to
+     *  keep correct, not one per caller. */
+    findParentNode(target, children) {
+        return findParentOf(children, target);
     }
     /** Returns the closest ancestor (or self) of `target` that has a `symbolId`. */
     findSymbolAncestorOf(target, nodes) {
@@ -5774,6 +5929,9 @@ class BuilderComponent {
         // flex-child vs grid-child controls only surface when the parent actually lays them out.
         const parent = this.findParentNode(node, this.layout) ?? this.findParentNode(node, this.globalElements);
         const parentDisplay = parent ? this.readNodeDisplay(parent) : null;
+        // Breadcrumb path. Assigned as a FIELD (never a getter) — a getter returning a fresh
+        // array would make the OnPush input look changed on every change-detection pass.
+        this.selectedPath = nodeAncestorPathInEither(this.layout, this.globalElements, node) ?? [node];
         this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef, symbolAncestor, repeaterAncestor, parentDisplay });
     }
     /** Read a node's current `display` value. The style panel mutates `styleTraits` in place at edit
@@ -5796,11 +5954,11 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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" }, 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    <header class=\"builder-header\">\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\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\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        </app-toolbar>\n\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    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\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        </aside>\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            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\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\"\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-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\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\n        <ng-content select=\"[builderPanel]\"></ng-content>\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 .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;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(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.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;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.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-left:-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: i14.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: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.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: i16.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", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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" }, 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    <header class=\"builder-header\">\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\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\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        </app-toolbar>\n\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    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\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        </aside>\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            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\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\"\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-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\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\n        <ng-content select=\"[builderPanel]\"></ng-content>\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 .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;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(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.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;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.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-left:-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: i14.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: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.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: i16.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", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "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", "nodePeek"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\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\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\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        </app-toolbar>\n\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    </header>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\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        </aside>\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            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\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\"\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-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\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\n        <ng-content select=\"[builderPanel]\"></ng-content>\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 .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;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(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.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;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.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-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\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\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\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        </app-toolbar>\n\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    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\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        </aside>\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            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\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\"\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-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\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\n        <ng-content select=\"[builderPanel]\"></ng-content>\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 .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;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(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.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;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.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-left:-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: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
@@ -7882,6 +8040,7 @@ const DECLARATIONS = [
     PanelComponent,
     PanelChildComponent,
     LayerTreeComponent,
+    BreadcrumbBarComponent,
 ];
 class IoxBuilderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -7900,7 +8059,8 @@ class IoxBuilderModule {
             SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
-            LayerTreeComponent], imports: [CommonModule,
+            LayerTreeComponent,
+            BreadcrumbBarComponent], imports: [CommonModule,
             FormsModule,
             DragDropModule,
             AccordionModule,
@@ -7939,7 +8099,8 @@ class IoxBuilderModule {
             SliderSlideComponent,
             PanelComponent,
             PanelChildComponent,
-            LayerTreeComponent] }); }
+            LayerTreeComponent,
+            BreadcrumbBarComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderModule, providers: [
             DragEngineService,
             OverlayService,
@@ -8042,6 +8203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         PanelComponent,
                         PanelChildComponent,
                         LayerTreeComponent,
+                        BreadcrumbBarComponent,
                     ],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
@@ -8610,5 +8772,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions, wrapNode };
+export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, findParentOf, flattenSchemaFields, generateNodeId, nodeAncestorPath, nodeAncestorPathInEither, resolveTraitControllerType, resolveTraitOptions, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map