@vectoriox/iox-builder 11.8.1 → 11.9.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5262,33 +5262,83 @@ const PREVIEW_SCROLLER = '.iox-page-wrapper';
 class SceneCanvasService {
     constructor() {
         this.zone = inject(NgZone);
+        this.overlay = inject(OverlayService, { optional: true });
         this.driver = null;
+        this.rootsById = new Map();
+        this.idsByRoot = new Map();
+        /** Every frame on every Scene: the selection box and the timeline follow on it. */
+        this.frames$ = new Subject();
     }
     /**
      * Drive a root. `onCanvas` comes from the caller, because only the render directive can read IOX_BUILDER_CANVAS: the
      * token is provided on the canvas's element, below where this service lives. Read here, it answered false, and the
      * canvas measured its Scenes against a page that moves with them, so they never left progress 0.
      */
-    attach(root, onCanvas) {
+    attach(root, onCanvas, nodeId) {
         this.zone.runOutsideAngular(() => {
             this.driver ??= new ScrollDriver({
                 pin: onCanvas,
                 observe: true,
                 originOf: el => el.closest(onCanvas ? CANVAS_SCROLLER : PREVIEW_SCROLLER),
+                onFrame: (el, state) => this.frames$.next({ nodeId: this.idsByRoot.get(el) ?? null, ...state }),
             });
             this.driver.add(root);
         });
+        if (nodeId) {
+            this.rootsById.set(nodeId, root);
+            this.idsByRoot.set(root, nodeId);
+        }
     }
     detach(root) {
         this.driver?.remove(root);
+        const id = this.idsByRoot.get(root);
+        // A re-render attaches the new element before the old one detaches: it must not lose the new one.
+        if (id && this.rootsById.get(id) === root)
+            this.rootsById.delete(id);
+        this.idsByRoot.delete(root);
     }
-    /** The damped progress a root's layers stand at (the e2e and, from SC2, the scrubber read it). */
+    /** The damped progress a root's layers stand at. */
     progressOf(root) {
         return this.driver?.progressOf(root) ?? null;
     }
+    /** Where the scroll stands in a Scene, 0 to 1. Null for a Scene that is not on the canvas. */
+    positionOf(nodeId) {
+        const root = nodeId ? this.rootsById.get(nodeId) : null;
+        return root ? this.driver?.targetOf(root) ?? null : null;
+    }
+    /**
+     * Stand a Scene at `p` by really scrolling the canvas: there is one position, so the scrubber, the wheel, the pin and
+     * the selection box can never disagree. It lands with no glide, because the author is waiting to see that moment.
+     */
+    goTo(nodeId, p) {
+        const root = nodeId ? this.rootsById.get(nodeId) : null;
+        const offset = root ? this.driver?.offsetFor(root, p) : null;
+        const scroller = root?.closest(CANVAS_SCROLLER);
+        if (!root || offset == null || !scroller)
+            return;
+        const rect = root.getBoundingClientRect();
+        const zoom = root.offsetHeight ? rect.height / root.offsetHeight : 1;
+        scroller.scrollTop += rect.top - scroller.getBoundingClientRect().top + offset * zoom;
+        this.driver?.settle(root);
+    }
+    /**
+     * A layer's tracks were edited: its element carries them now and its Scene plays them on the next frame, with no
+     * re-render, because a Scene's own DOM is what the author is looking at.
+     */
+    refreshLayer(node, root) {
+        const ref = this.overlay?.getNodeRef(node) ?? (node.id ? this.overlay?.findRefByNodeId(node.id)?.ref : undefined);
+        if (ref?.element && this.overlay)
+            syncSceneAttributes(this.overlay.getStyledElement(ref.element), node);
+        const el = root?.id ? this.rootsById.get(root.id) : null;
+        if (el)
+            this.driver?.reread(el);
+    }
     ngOnDestroy() {
         this.driver?.destroy();
         this.driver = null;
+        this.rootsById.clear();
+        this.idsByRoot.clear();
+        this.frames$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService }); }
@@ -5826,7 +5876,7 @@ class RenderDirective {
         }
         // A Scene runs on the canvas: the driver reads the attributes `syncA11y` wrote, and follows edits to them.
         if (nativeEl && node.role === SceneRole.Scene && this.sceneCanvas) {
-            this.sceneCanvas.attach(nativeEl, this.onCanvas);
+            this.sceneCanvas.attach(nativeEl, this.onCanvas, node.id);
             this.sceneRootEl = nativeEl;
         }
         // Wire up interactions (animations) after the element is in the DOM. Preview clones are
@@ -9539,6 +9589,7 @@ class BuilderComponent {
         this.styleRegistry = styleRegistry;
         this.contextStore = inject(ContextStore);
         this.labels = inject(IOX_BUILDER_LABELS);
+        this.sceneCanvas = inject(SceneCanvasService, { optional: true });
         /**
          * Re-apply context-bound inputs on the CANVAS when a slot changes — the builder twin of the
          * engine's effect. The canvas is a live runtime, so hovering a repeater row while editing must
@@ -9747,6 +9798,14 @@ class BuilderComponent {
         // (Not previewScrollRef which is the Lenis eventsTarget — dispatching there
         // would cause Lenis to re-fire its scroll handler → infinite loop.)
         this.overlayService.setScrollContainer(this.lenisContentRef?.nativeElement || null);
+        // A Scene's layer moves with no scroll to announce it (the damping runs on after the wheel stops, a scrubber or an
+        // edit moves it outright), so the selection box follows the driver's frames, the same way it follows Lenis's.
+        this.sceneFramesSub = this.sceneCanvas?.frames$.subscribe(() => {
+            if (!this.overlayService.getCurrentSelection())
+                return;
+            this.lenisContentRef?.nativeElement.dispatchEvent(new Event('scroll'));
+            this.moveableCanvas.refresh();
+        });
         // .preview-scroll is the Lenis clipping container (overflow:hidden, scrollTop changes).
         // Used as IntersectionObserver root so viewportEnter triggers fire correctly on canvas scroll.
         this.overlayService.setIntersectionRoot(this.previewScrollRef?.nativeElement || null);
@@ -9848,6 +9907,7 @@ class BuilderComponent {
         this.sub?.unsubscribe();
         this.registrySub?.unsubscribe();
         this.viewportSub?.unsubscribe();
+        this.sceneFramesSub?.unsubscribe();
         this.moveableCanvas.destroy();
         this.selectoCanvas.destroy();
         this.destroyLenis();
@@ -10847,11 +10907,11 @@ class BuilderComponent {
         }
     }
     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 }, { propertyName: "globalsBeforeRef", first: true, predicate: ["globalsBefore"], 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            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\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 is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\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                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\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                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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;direction:ltr;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;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::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.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: "directive", type: i18.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i19.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: i20.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i1$1.IoxPageComponent, selector: "iox-page-component", inputs: ["class", "scroll"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], 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.ɵ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 }, { propertyName: "globalsBeforeRef", first: true, predicate: ["globalsBefore"], 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            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\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 is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\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                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\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                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\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            <!-- \u2463 THE SCENE TIMELINE (premium sites SC2, board G) \u2014 its own row under the canvas, projected from the host\n                 like every panel, and only there while the page holds a Scene. A sibling of .preview for the reason above. -->\n            <ng-content select=\"[builderTimeline]\"></ng-content>\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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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;direction:ltr;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;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::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.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: "directive", type: i18.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i19.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: i20.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i1$1.IoxPageComponent, selector: "iox-page-component", inputs: ["class", "scroll"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId", "ioxPhrasing"], 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            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\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 is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\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                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\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                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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;direction:ltr;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;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::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"] }]
+            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            @if (activeSidebar === 'pages') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'components') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tokens') {\n            <div class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            }\n            @if (activeSidebar === 'tree') {\n            <app-layer-tree\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n            }\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 is the frame a pinned global sits in (globalOverlayHeight: the canvas\n                 slot, or the page on a short page), bound in px so position:fixed + inset:0\n                 fills it (CSS calc(100%) would give the wrong containing-block height). -->\n            @if (globalElements.length) {\n            <div\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\n                 [ngStyle]=\"globalLayerCss\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"globalOverlayHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <!-- BEFORE globals stay here, in the frame (a Dialog inside a header must fill the frame,\n                     not scroll away with the page). Their wrapper's height is what the in-flow ones take,\n                     and the page reserves it at its top (canvasHeaderReserve, iox-ui#19). -->\n                @if (globalElementsBefore.length) {\n                <div #globalsBefore class=\"iox-canvas-globals-before\">\n                    @for (item of globalElementsBefore; track item) {\n                        <ng-container [ioxRender]=\"item\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    }\n                </div>\n                }\n                <!-- The PINNED after globals (a fixed bottom bar, a Dialog). An in-flow AFTER global (a\n                     footer) is drawn in the page, after its content (iox-ui#12). -->\n                @for (item of globalElementsPinnedAfter; track item) {\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                }\n            </div>\n            }\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                         [style.padding-block-start.px]=\"canvasHeaderReserve || null\"\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                        @for (item of layout; track item) {\n                        <ng-container\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                        }\n\n                        <!-- In-flow AFTER globals (a footer) follow the page's content, inside the page's\n                             ground, as on the live site (iox-ui#12). Not part of the layout: the drag\n                             engine skips this wrapper (GLOBALS_AFTER_CLASS). -->\n                        @if (globalElementsInPage.length) {\n                        <div [class]=\"globalsAfterClass\">\n                            @for (item of globalElementsInPage; track item) {\n                                <ng-container [ioxRender]=\"item\"\n                                    (onClick)=\"handleClick($event)\"\n                                    (onMouseEnter)=\"handleMouseEnter($event)\"\n                                    (onMouseLeave)=\"handleMouseLeave()\">\n                                </ng-container>\n                            }\n                        </div>\n                        }\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            <!-- \u2463 THE SCENE TIMELINE (premium sites SC2, board G) \u2014 its own row under the canvas, projected from the host\n                 like every panel, and only there while the page holds a Scene. A sibling of .preview for the reason above. -->\n            <ng-content select=\"[builderTimeline]\"></ng-content>\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    <!-- A tab or a panel deleted alone (CC4a \u2014 composite T18): the pair goes together, so the delete is offered for\n         both. Every delete path asks the one guard; this is its answer. -->\n    <p-dialog [visible]=\"!!pendingPairRemoval\" (visibleChange)=\"$event || cancelPairRemoval()\" [modal]=\"true\" [closable]=\"true\"\n              [draggable]=\"false\" [resizable]=\"false\" [header]=\"pairRemovalText('builder.chrome.deletePairTitle')\" styleClass=\"iox-pair-removal-dialog\"\n              appendTo=\"body\" [style]=\"{ width: '400px' }\">\n        <p class=\"pair-removal-body\">{{ pairRemovalText('builder.chrome.deletePairBody') }}</p>\n        <ng-template pTemplate=\"footer\">\n            <p-button size=\"small\" severity=\"secondary\" [label]=\"pairRemovalText('builder.chrome.cancel')\" (onClick)=\"cancelPairRemoval()\"></p-button>\n            <p-button size=\"small\" severity=\"danger\" [label]=\"pairRemovalText('builder.chrome.deletePair')\" (onClick)=\"confirmPairRemoval()\"></p-button>\n        </ng-template>\n    </p-dialog>\n\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;direction:ltr;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;direction:ltr}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .global-elements-overlay .iox-canvas-globals-before{display:flow-root;pointer-events:none}.builder .global-elements-overlay .iox-canvas-globals-before ::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: [{