@vectoriox/iox-builder 4.3.0 → 4.5.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, ViewChild, effect, Optional, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i14 from '@angular/forms';
+import * as i15 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AccordionModule } from 'primeng/accordion';
-import * as i15 from 'primeng/button';
+import * as i16 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
@@ -15,8 +15,8 @@ import { InputTextModule } from 'primeng/inputtext';
 import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
-import * as i16 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, breakpointDef, breakpointForWidth, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, safeSetInput, composeVirtualTraits, stateNamesIn, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import * as i17 from '@vectoriox/iox-ui';
+import { DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, breakpointDef, breakpointForWidth, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, safeSetInput, composeVirtualTraits, stateNamesIn, setOverride, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -970,6 +970,11 @@ const SCREEN_WIDTH_OPTIONS = [
     { label: '2560', width: 2560 },
 ];
 
+// Virtual trait composition now lives in @vectoriox/iox-ui so the SSR engine (which does NOT depend
+// on iox-builder) can use the SAME logic — otherwise the engine emitted raw virtual keys
+// (translate-x, filter-blur…) as invalid CSS. This is a re-export passthrough to keep existing
+// iox-builder imports (`../style-compose`) working with no duplicated implementation.
+
 /**
  * node-path — pure ancestor-chain helpers for the builder's node tree.
  *
@@ -1079,6 +1084,213 @@ function resolveInsertTarget(roots, selected, isContainer) {
     return { children: siblings, index: siblings.indexOf(selected) + 1, parent };
 }
 
+/**
+ * STRUCTURE OPS (A4) — the one-click layout changes people actually make at a narrow width, as pure
+ * "what to write" functions. Each returns a flat style map the caller stores in the node's
+ * `responsive[bp]` layer (or in the base styles at Base) through the shared `setOverride`.
+ *
+ * All of it is ordinary CSS the SSR engine already renders — there is no second tree and no
+ * per-width HTML. See responsive-breakpoints-plan.md (D5).
+ */
+/** CSS lengths that are a FIXED pixel size — the ones that stop a layout fitting a phone. */
+const PX_LENGTH = /^-?\d+(\.\d+)?px$/i;
+/**
+ * Hide / show at a width. Hiding is `display: none` INSIDE that breakpoint's rules — the node stays
+ * in the DOM and in the SSR output (one HTML document serves every width), so hidden content still
+ * ships bytes and is still indexed. Showing again clears the override rather than guessing a value.
+ *
+ * @returns the props to write, or `null` meaning "clear the display override at this breakpoint".
+ */
+function visibilityProps(hidden) {
+    return hidden ? { display: 'none' } : null;
+}
+/** True when this node is hidden by the resolved styles at some width. */
+function isHiddenAt(resolvedStyleProps) {
+    return String(resolvedStyleProps?.['display'] ?? '') === 'none';
+}
+/**
+ * Stack a container's children in one column — the most common mobile edit, and four separate
+ * controls today (display, direction, wrap, columns). A grid becomes a single-column grid; anything
+ * else becomes a column flex box.
+ */
+function stackChildrenProps(resolvedStyleProps) {
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
+    }
+    return { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap' };
+}
+/**
+ * Collapse a grid to `count` columns (a flex row is stacked instead — it has no column track).
+ * `count` is clamped to at least 1.
+ */
+function collapseColumnsProps(resolvedStyleProps, count) {
+    const columns = Math.max(1, Math.floor(count));
+    const display = String(resolvedStyleProps?.['display'] ?? '');
+    if (display === 'grid' || display === 'inline-grid') {
+        return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+    }
+    return columns === 1 ? stackChildrenProps(resolvedStyleProps) : { flexWrap: 'wrap' };
+}
+/** How many equal columns a `repeat(N, …)` track list describes, or null when it isn't one. */
+function columnCountOf(resolvedStyleProps) {
+    const match = /^repeat\(\s*(\d+)\s*,/.exec(String(resolvedStyleProps?.['gridTemplateColumns'] ?? ''));
+    return match ? Number(match[1]) : null;
+}
+/**
+ * Make fixed pixel sizes fluid: `width: 520px` → `width: 100%` with the original kept as
+ * `max-width`, so the element still never exceeds its designed size on a wide screen. `minWidth` in
+ * px is dropped to 0 — it is what actually forces horizontal scrolling on a phone.
+ *
+ * @returns the props to write; EMPTY when there is nothing fixed to fluidise.
+ */
+function fluidiseProps(resolvedStyleProps) {
+    const out = {};
+    const width = String(resolvedStyleProps?.['width'] ?? '');
+    const minWidth = String(resolvedStyleProps?.['minWidth'] ?? '');
+    if (PX_LENGTH.test(width)) {
+        out['width'] = '100%';
+        const maxWidth = String(resolvedStyleProps?.['maxWidth'] ?? '');
+        if (!maxWidth || maxWidth === 'none')
+            out['maxWidth'] = width;
+    }
+    if (PX_LENGTH.test(minWidth) && parseFloat(minWidth) > 0)
+        out['minWidth'] = '0px';
+    return out;
+}
+/** True when `fluidiseProps` would change anything — drives the button's disabled state. */
+function canFluidise(resolvedStyleProps) {
+    return Object.keys(fluidiseProps(resolvedStyleProps)).length > 0;
+}
+/**
+ * Reorder children AT ONE WIDTH using CSS `order`, leaving the tree — and so the DOM and
+ * screen-reader order — untouched. Returns one value per child BY CHILD INDEX: the `order` it must
+ * take, or `null` for "no override needed".
+ *
+ * Either every child gets an explicit `order` or none does: CSS defaults `order` to 0, so a partial
+ * set would mix overridden children with unordered ones and read as an arbitrary interleave.
+ *
+ * @param count  How many children there are.
+ * @param from   Index of the child being moved.
+ * @param to     Index it should occupy.
+ */
+function reorderProps(count, from, to) {
+    const none = Array.from({ length: Math.max(0, count) }, () => null);
+    if (from < 0 || from >= count || to < 0 || to >= count || from === to)
+        return none;
+    // Visual order after the move, as a list of CHILD indices.
+    const sequence = Array.from({ length: count }, (_, i) => i);
+    sequence.splice(to, 0, ...sequence.splice(from, 1));
+    const orderByChild = none.slice();
+    sequence.forEach((childIndex, position) => { orderByChild[childIndex] = position; });
+    return orderByChild;
+}
+
+/**
+ * RESPONSIVE AUDIT (A5) — find what is broken at a width, from the node tree plus ONE measurement
+ * pass. A builder that lets you author five widths must also tell you which of them are broken.
+ *
+ * Pure: the caller measures (one `getBoundingClientRect` per node, off the animation path) and
+ * passes the numbers in. Every finding that can be repaired carries the exact props to write, so a
+ * fix is one `setOverride` per key — one undo step, and it shows as an ordinary override.
+ */
+var AuditCode;
+(function (AuditCode) {
+    AuditCode["Overflow"] = "overflow";
+    AuditCode["FixedWidth"] = "fixed-width";
+    AuditCode["TapTarget"] = "tap-target";
+    AuditCode["TinyText"] = "tiny-text";
+    AuditCode["UnboundedImage"] = "unbounded-image";
+})(AuditCode || (AuditCode = {}));
+var AuditSeverity;
+(function (AuditSeverity) {
+    AuditSeverity["Error"] = "error";
+    AuditSeverity["Warning"] = "warning";
+    AuditSeverity["Info"] = "info";
+})(AuditSeverity || (AuditSeverity = {}));
+/** WCAG 2.5.8 minimum target size. */
+const MIN_TAP_PX = 44;
+/** Below this, iOS Safari zooms the page when an adjacent input is focused. */
+const MIN_TEXT_PX = 12;
+/** Types a visitor taps. */
+const TAPPABLE = new Set(['Button', 'ButtonBlock', 'Link', 'LinkedContainer']);
+const nameOf = (node) => node.label || node.type;
+const pxOf = (value) => {
+    const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(String(value ?? ''));
+    return match ? Number(match[1]) : null;
+};
+/**
+ * Audit nodes laid out at `viewportWidth`. Returns findings ordered by severity (errors first),
+ * then by the order the nodes were given — so the worst thing is at the top of the list.
+ */
+function auditNodes(nodes, viewportWidth) {
+    const findings = [];
+    for (const node of nodes) {
+        const name = nameOf(node);
+        const styles = node.styleProps ?? {};
+        if (String(styles['display'] ?? '') === 'none')
+            continue; // hidden here — nothing to report
+        // 1. Wider than the viewport: the page scrolls sideways.
+        if (node.width > viewportWidth + 0.5) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.Overflow, severity: AuditSeverity.Error,
+                message: `${name} is ${Math.round(node.width)}px wide in a ${viewportWidth}px viewport — the page scrolls sideways.`,
+                fix: canFluidise(styles) ? fluidiseProps(styles) : { maxWidth: '100%' },
+            });
+        }
+        else if (canFluidise(styles)) {
+            // 2. A fixed px size that still fits, but will not on a narrower phone.
+            const width = pxOf(styles['width']);
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.FixedWidth, severity: AuditSeverity.Warning,
+                message: width !== null
+                    ? `${name} has a fixed width of ${width}px — it cannot shrink on a narrower screen.`
+                    : `${name} has a fixed minimum width — it forces sideways scrolling below that size.`,
+                fix: fluidiseProps(styles),
+            });
+        }
+        // 3. Tap targets below the WCAG minimum.
+        if (TAPPABLE.has(node.type) && node.width > 0 && node.height > 0
+            && (node.width < MIN_TAP_PX || node.height < MIN_TAP_PX)) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.TapTarget, severity: AuditSeverity.Warning,
+                message: `${name} is ${Math.round(node.width)}×${Math.round(node.height)}px — below the ${MIN_TAP_PX}px minimum tap target.`,
+                fix: { minHeight: `${MIN_TAP_PX}px`, minWidth: `${MIN_TAP_PX}px` },
+            });
+        }
+        // 4. Text too small to read (and small enough to trigger iOS zoom).
+        const fontSize = pxOf(styles['fontSize']);
+        if (fontSize !== null && fontSize < MIN_TEXT_PX) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.TinyText, severity: AuditSeverity.Warning,
+                message: `${name} renders at ${fontSize}px — under the ${MIN_TEXT_PX}px readable minimum.`,
+                fix: { fontSize: `${MIN_TEXT_PX}px` },
+            });
+        }
+        // 5. An image with a fixed height and no ratio crops unpredictably as the width changes.
+        if (node.type === 'Image' && pxOf(styles['height']) !== null
+            && !String(styles['aspectRatio'] ?? '').trim().replace(/^auto$/, '')) {
+            findings.push({
+                nodeId: node.id, nodeName: name, code: AuditCode.UnboundedImage, severity: AuditSeverity.Info,
+                message: `${name} has a fixed height and no aspect ratio — it crops unpredictably as the width changes.`,
+                fix: { height: 'auto', aspectRatio: '16 / 9' },
+            });
+        }
+    }
+    const rank = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 1, [AuditSeverity.Info]: 2 };
+    return findings
+        .map((finding, index) => ({ finding, index }))
+        .sort((a, b) => rank[a.finding.severity] - rank[b.finding.severity] || a.index - b.index)
+        .map(entry => entry.finding);
+}
+/** Counts per severity — the per-breakpoint summary strip. */
+function summarise(findings) {
+    const out = { [AuditSeverity.Error]: 0, [AuditSeverity.Warning]: 0, [AuditSeverity.Info]: 0 };
+    for (const finding of findings)
+        out[finding.severity]++;
+    return out;
+}
+
 class ComponentRegistryService {
     constructor() {
         this.components = {};
@@ -3760,11 +3972,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-// Virtual trait composition now lives in @vectoriox/iox-ui so the SSR engine (which does NOT depend
-// on iox-builder) can use the SAME logic — otherwise the engine emitted raw virtual keys
-// (translate-x, filter-blur…) as invalid CSS. This is a re-export passthrough to keep existing
-// iox-builder imports (`../style-compose`) working with no duplicated implementation.
-
 // Module-level counter — unique drop-list ID per Section instance across the whole app session.
 let dropListCounter = 0;
 /**
@@ -4773,6 +4980,9 @@ class ToolbarComponent {
         this.activeBreakpoint = Breakpoint.Base;
         /** Overrides per breakpoint — for the selection, or the page when nothing is selected. */
         this.breakpointCounts = {};
+        /** Findings at the current width — shown as a count on the audit button. */
+        this.auditCount = 0;
+        this.auditOpen = false;
         this.activeZoom = 100;
         this.activeScreenWidth = 1440;
         this.canUndo = false;
@@ -4781,6 +4991,7 @@ class ToolbarComponent {
         this.pageStatus = 'draft';
         this.modeChange = new EventEmitter();
         this.breakpointChange = new EventEmitter();
+        this.auditToggle = new EventEmitter();
         this.zoomChange = new EventEmitter();
         this.screenWidthChange = new EventEmitter();
         this.undo = new EventEmitter();
@@ -4864,17 +5075,21 @@ class ToolbarComponent {
         this.zoomPopover.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: ToolbarComponent, isStandalone: false, selector: "app-toolbar", inputs: { activeMode: "activeMode", activeBreakpoint: "activeBreakpoint", breakpointCounts: "breakpointCounts", activeZoom: "activeZoom", activeScreenWidth: "activeScreenWidth", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus" }, outputs: { modeChange: "modeChange", breakpointChange: "breakpointChange", zoomChange: "zoomChange", screenWidthChange: "screenWidthChange", undo: "undo", redo: "redo", save: "save", preview: "preview", publishToggle: "publishToggle" }, viewQueries: [{ propertyName: "modePopover", first: true, predicate: ["modePopover"], descendants: true }, { propertyName: "zoomPopover", first: true, predicate: ["zoomPopover"], descendants: true }, { propertyName: "widthPopover", first: true, predicate: ["widthPopover"], descendants: true }], ngImport: i0, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Breakpoint bar \u2014 the EDITING SCOPE, not just a preview size \u2500\u2500 -->\n    <div class=\"breakpoint-bar\" role=\"group\" aria-label=\"Breakpoint\">\n        @for (bp of breakpointOptions; track bp.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeBreakpoint === bp.id\"\n                [attr.aria-pressed]=\"activeBreakpoint === bp.id\"\n                [title]=\"bp.label + ' \u00B7 ' + bp.range\"\n                [attr.aria-label]=\"bp.label\"\n                (click)=\"selectBreakpoint(bp.id)\">\n            <i [class]=\"bp.icon\" [class.bp-icon--landscape]=\"bp.landscape\" aria-hidden=\"true\"></i>\n            @if (breakpointCounts[bp.id]) {\n            <span class=\"bp-dot\" aria-hidden=\"true\"></span>\n            }\n        </button>\n        }\n    </div>\n\n    <!-- \u2500\u2500 Screen width \u2014 Base only (any width above Laptop) \u2500\u2500 -->\n    @if (activeBreakpoint === breakpointIds.Base) {\n    <button class=\"tool-btn stateful width-btn\"\n            (click)=\"toggleWidthPopover($event)\"\n            title=\"Screen width\">\n        <span class=\"width-label\">{{ activeScreenWidth }}</span>\n    </button>\n    }\n\n    <p-popover #widthPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let w of screenWidthOptions\"\n                    [class.is-active]=\"activeScreenWidth === w.width\"\n                    (click)=\"selectScreenWidth(w.width)\">\n                <span>{{ w.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"zoom-popover\">\n            <div class=\"zoom-slider-row\">\n                <input class=\"zoom-slider\"\n                       type=\"range\"\n                       min=\"20\" max=\"100\" step=\"1\"\n                       [value]=\"sliderZoom\"\n                       (input)=\"onSliderChange($event)\">\n                <span class=\"zoom-slider-value\">{{ zoomLabel }}</span>\n            </div>\n            <div class=\"popover-strip\">\n                <button class=\"popover-option\"\n                        *ngFor=\"let z of zoomOptions\"\n                        [class.is-active]=\"z.value === activeZoom\"\n                        (click)=\"selectZoom(z.value)\">\n                    <span>{{ z.label }}</span>\n                </button>\n            </div>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.125rem}.divider{width:1px;height:1.25rem;background:var(--p-surface-200);margin:0 .375rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.tool-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color)}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:3px;width:4px;height:4px;border-radius:50%;background:#cb9090}.breakpoint-bar{display:flex;align-items:center;gap:1px;padding:2px;border-radius:8px;background:var(--p-surface-100)}.bp-btn{position:relative;display:flex;align-items:center;justify-content:center;width:1.875rem;height:1.75rem;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:.95rem;cursor:pointer;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}.bp-btn:hover{background:var(--p-surface-0);color:var(--p-text-color)}.bp-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.bp-btn.is-active{background:var(--p-surface-0);border-color:#cb9090;color:#a05c5c}.bp-icon--landscape{transform:rotate(90deg)}.bp-dot{position:absolute;inset-block-start:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:#d9924e}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.width-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.8rem}.width-btn .width-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:#b37373;color:#fff}.save-btn.is-saving{opacity:.7}.preview-btn{border:1px solid var(--p-surface-200)}.preview-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color);border-color:var(--p-surface-100)}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#000);color:#fff}.publish-btn.is-published{background:transparent;color:var(--p-text-muted-color);border:1px solid var(--p-surface-200)}.publish-btn.is-published:hover:not(:disabled){background:color-mix(in srgb,#ef4444 10%,transparent);color:#ef4444;border-color:color-mix(in srgb,#ef4444 40%,transparent)}::ng-deep .toolbar-popover .p-popover-content{padding:.25rem!important;background:var(--p-surface-0)!important;border:1px solid var(--p-surface-200)!important;border-radius:10px!important;box-shadow:0 4px 16px #0f172a1a!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:var(--p-text-color);cursor:pointer;font-size:.8rem;border-radius:6px;transition:background .12s ease-out,color .12s ease-out;white-space:nowrap}.popover-option i{font-size:1rem;color:var(--p-text-muted-color)}.popover-option:hover{background:var(--p-surface-50)}.popover-option.is-active{background:#cb9090;color:#fff}.popover-option.is-active i{color:#fff}::ng-deep .toolbar-popover .zoom-popover{display:flex;flex-direction:column;gap:4px;padding:.15rem 0}::ng-deep .toolbar-popover .zoom-slider-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .65rem .1rem}::ng-deep .toolbar-popover .zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;background:var(--p-surface-200);outline:none;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#cb9090;cursor:pointer;transition:transform .12s ease-out}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}::ng-deep .toolbar-popover .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;background:#cb9090;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider-value{font-size:.68rem;font-weight:500;color:var(--p-text-muted-color);min-width:2.4rem;text-align:end;letter-spacing:.02em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: ToolbarComponent, isStandalone: false, selector: "app-toolbar", inputs: { activeMode: "activeMode", activeBreakpoint: "activeBreakpoint", breakpointCounts: "breakpointCounts", auditCount: "auditCount", auditOpen: "auditOpen", activeZoom: "activeZoom", activeScreenWidth: "activeScreenWidth", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus" }, outputs: { modeChange: "modeChange", breakpointChange: "breakpointChange", auditToggle: "auditToggle", zoomChange: "zoomChange", screenWidthChange: "screenWidthChange", undo: "undo", redo: "redo", save: "save", preview: "preview", publishToggle: "publishToggle" }, viewQueries: [{ propertyName: "modePopover", first: true, predicate: ["modePopover"], descendants: true }, { propertyName: "zoomPopover", first: true, predicate: ["zoomPopover"], descendants: true }, { propertyName: "widthPopover", first: true, predicate: ["widthPopover"], descendants: true }], ngImport: i0, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Breakpoint bar \u2014 the EDITING SCOPE, not just a preview size \u2500\u2500 -->\n    <div class=\"breakpoint-bar\" role=\"group\" aria-label=\"Breakpoint\">\n        @for (bp of breakpointOptions; track bp.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeBreakpoint === bp.id\"\n                [attr.aria-pressed]=\"activeBreakpoint === bp.id\"\n                [title]=\"bp.label + ' \u00B7 ' + bp.range\"\n                [attr.aria-label]=\"bp.label\"\n                (click)=\"selectBreakpoint(bp.id)\">\n            <i [class]=\"bp.icon\" [class.bp-icon--landscape]=\"bp.landscape\" aria-hidden=\"true\"></i>\n            @if (breakpointCounts[bp.id]) {\n            <span class=\"bp-dot\" aria-hidden=\"true\"></span>\n            }\n        </button>\n        }\n    </div>\n\n    <!-- \u2500\u2500 Screen width \u2014 Base only (any width above Laptop) \u2500\u2500 -->\n    @if (activeBreakpoint === breakpointIds.Base) {\n    <button class=\"tool-btn stateful width-btn\"\n            (click)=\"toggleWidthPopover($event)\"\n            title=\"Screen width\">\n        <span class=\"width-label\">{{ activeScreenWidth }}</span>\n    </button>\n    }\n\n    <p-popover #widthPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let w of screenWidthOptions\"\n                    [class.is-active]=\"activeScreenWidth === w.width\"\n                    (click)=\"selectScreenWidth(w.width)\">\n                <span>{{ w.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"zoom-popover\">\n            <div class=\"zoom-slider-row\">\n                <input class=\"zoom-slider\"\n                       type=\"range\"\n                       min=\"20\" max=\"100\" step=\"1\"\n                       [value]=\"sliderZoom\"\n                       (input)=\"onSliderChange($event)\">\n                <span class=\"zoom-slider-value\">{{ zoomLabel }}</span>\n            </div>\n            <div class=\"popover-strip\">\n                <button class=\"popover-option\"\n                        *ngFor=\"let z of zoomOptions\"\n                        [class.is-active]=\"z.value === activeZoom\"\n                        (click)=\"selectZoom(z.value)\">\n                    <span>{{ z.label }}</span>\n                </button>\n            </div>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Responsive audit (A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn audit-toggle\"\n            [class.is-open]=\"auditOpen\"\n            [class.has-findings]=\"auditCount > 0\"\n            type=\"button\"\n            title=\"Responsive audit \u2014 what is broken at this width\"\n            aria-label=\"Responsive audit\"\n            [attr.aria-pressed]=\"auditOpen\"\n            (click)=\"auditToggle.emit()\">\n        <i class=\"ph-thin ph-stethoscope\" aria-hidden=\"true\"></i>\n        @if (auditCount) {\n        <span class=\"audit-count\">{{ auditCount }}</span>\n        }\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.125rem}.divider{width:1px;height:1.25rem;background:var(--p-surface-200);margin:0 .375rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.tool-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color)}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:3px;width:4px;height:4px;border-radius:50%;background:#cb9090}.audit-toggle{position:relative}.audit-toggle.is-open{background:var(--p-surface-100);color:#a05c5c}.audit-toggle.has-findings{color:#b8702f}.audit-count{position:absolute;inset-block-start:1px;inset-inline-end:1px;min-inline-size:13px;padding:0 3px;border-radius:20px;background:#d9924e;color:#fff;font-size:8.5px;line-height:13px;font-weight:600}.breakpoint-bar{display:flex;align-items:center;gap:1px;padding:2px;border-radius:8px;background:var(--p-surface-100)}.bp-btn{position:relative;display:flex;align-items:center;justify-content:center;width:1.875rem;height:1.75rem;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:.95rem;cursor:pointer;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}.bp-btn:hover{background:var(--p-surface-0);color:var(--p-text-color)}.bp-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.bp-btn.is-active{background:var(--p-surface-0);border-color:#cb9090;color:#a05c5c}.bp-icon--landscape{transform:rotate(90deg)}.bp-dot{position:absolute;inset-block-start:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:#d9924e}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.width-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.8rem}.width-btn .width-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:#b37373;color:#fff}.save-btn.is-saving{opacity:.7}.preview-btn{border:1px solid var(--p-surface-200)}.preview-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color);border-color:var(--p-surface-100)}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#000);color:#fff}.publish-btn.is-published{background:transparent;color:var(--p-text-muted-color);border:1px solid var(--p-surface-200)}.publish-btn.is-published:hover:not(:disabled){background:color-mix(in srgb,#ef4444 10%,transparent);color:#ef4444;border-color:color-mix(in srgb,#ef4444 40%,transparent)}::ng-deep .toolbar-popover .p-popover-content{padding:.25rem!important;background:var(--p-surface-0)!important;border:1px solid var(--p-surface-200)!important;border-radius:10px!important;box-shadow:0 4px 16px #0f172a1a!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:var(--p-text-color);cursor:pointer;font-size:.8rem;border-radius:6px;transition:background .12s ease-out,color .12s ease-out;white-space:nowrap}.popover-option i{font-size:1rem;color:var(--p-text-muted-color)}.popover-option:hover{background:var(--p-surface-50)}.popover-option.is-active{background:#cb9090;color:#fff}.popover-option.is-active i{color:#fff}::ng-deep .toolbar-popover .zoom-popover{display:flex;flex-direction:column;gap:4px;padding:.15rem 0}::ng-deep .toolbar-popover .zoom-slider-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .65rem .1rem}::ng-deep .toolbar-popover .zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;background:var(--p-surface-200);outline:none;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#cb9090;cursor:pointer;transition:transform .12s ease-out}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}::ng-deep .toolbar-popover .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;background:#cb9090;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider-value{font-size:.68rem;font-weight:500;color:var(--p-text-muted-color);min-width:2.4rem;text-align:end;letter-spacing:.02em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toolbar', standalone: false, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Breakpoint bar \u2014 the EDITING SCOPE, not just a preview size \u2500\u2500 -->\n    <div class=\"breakpoint-bar\" role=\"group\" aria-label=\"Breakpoint\">\n        @for (bp of breakpointOptions; track bp.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeBreakpoint === bp.id\"\n                [attr.aria-pressed]=\"activeBreakpoint === bp.id\"\n                [title]=\"bp.label + ' \u00B7 ' + bp.range\"\n                [attr.aria-label]=\"bp.label\"\n                (click)=\"selectBreakpoint(bp.id)\">\n            <i [class]=\"bp.icon\" [class.bp-icon--landscape]=\"bp.landscape\" aria-hidden=\"true\"></i>\n            @if (breakpointCounts[bp.id]) {\n            <span class=\"bp-dot\" aria-hidden=\"true\"></span>\n            }\n        </button>\n        }\n    </div>\n\n    <!-- \u2500\u2500 Screen width \u2014 Base only (any width above Laptop) \u2500\u2500 -->\n    @if (activeBreakpoint === breakpointIds.Base) {\n    <button class=\"tool-btn stateful width-btn\"\n            (click)=\"toggleWidthPopover($event)\"\n            title=\"Screen width\">\n        <span class=\"width-label\">{{ activeScreenWidth }}</span>\n    </button>\n    }\n\n    <p-popover #widthPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let w of screenWidthOptions\"\n                    [class.is-active]=\"activeScreenWidth === w.width\"\n                    (click)=\"selectScreenWidth(w.width)\">\n                <span>{{ w.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"zoom-popover\">\n            <div class=\"zoom-slider-row\">\n                <input class=\"zoom-slider\"\n                       type=\"range\"\n                       min=\"20\" max=\"100\" step=\"1\"\n                       [value]=\"sliderZoom\"\n                       (input)=\"onSliderChange($event)\">\n                <span class=\"zoom-slider-value\">{{ zoomLabel }}</span>\n            </div>\n            <div class=\"popover-strip\">\n                <button class=\"popover-option\"\n                        *ngFor=\"let z of zoomOptions\"\n                        [class.is-active]=\"z.value === activeZoom\"\n                        (click)=\"selectZoom(z.value)\">\n                    <span>{{ z.label }}</span>\n                </button>\n            </div>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.125rem}.divider{width:1px;height:1.25rem;background:var(--p-surface-200);margin:0 .375rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.tool-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color)}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:3px;width:4px;height:4px;border-radius:50%;background:#cb9090}.breakpoint-bar{display:flex;align-items:center;gap:1px;padding:2px;border-radius:8px;background:var(--p-surface-100)}.bp-btn{position:relative;display:flex;align-items:center;justify-content:center;width:1.875rem;height:1.75rem;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:.95rem;cursor:pointer;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}.bp-btn:hover{background:var(--p-surface-0);color:var(--p-text-color)}.bp-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.bp-btn.is-active{background:var(--p-surface-0);border-color:#cb9090;color:#a05c5c}.bp-icon--landscape{transform:rotate(90deg)}.bp-dot{position:absolute;inset-block-start:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:#d9924e}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.width-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.8rem}.width-btn .width-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:#b37373;color:#fff}.save-btn.is-saving{opacity:.7}.preview-btn{border:1px solid var(--p-surface-200)}.preview-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color);border-color:var(--p-surface-100)}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#000);color:#fff}.publish-btn.is-published{background:transparent;color:var(--p-text-muted-color);border:1px solid var(--p-surface-200)}.publish-btn.is-published:hover:not(:disabled){background:color-mix(in srgb,#ef4444 10%,transparent);color:#ef4444;border-color:color-mix(in srgb,#ef4444 40%,transparent)}::ng-deep .toolbar-popover .p-popover-content{padding:.25rem!important;background:var(--p-surface-0)!important;border:1px solid var(--p-surface-200)!important;border-radius:10px!important;box-shadow:0 4px 16px #0f172a1a!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:var(--p-text-color);cursor:pointer;font-size:.8rem;border-radius:6px;transition:background .12s ease-out,color .12s ease-out;white-space:nowrap}.popover-option i{font-size:1rem;color:var(--p-text-muted-color)}.popover-option:hover{background:var(--p-surface-50)}.popover-option.is-active{background:#cb9090;color:#fff}.popover-option.is-active i{color:#fff}::ng-deep .toolbar-popover .zoom-popover{display:flex;flex-direction:column;gap:4px;padding:.15rem 0}::ng-deep .toolbar-popover .zoom-slider-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .65rem .1rem}::ng-deep .toolbar-popover .zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;background:var(--p-surface-200);outline:none;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#cb9090;cursor:pointer;transition:transform .12s ease-out}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}::ng-deep .toolbar-popover .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;background:#cb9090;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider-value{font-size:.68rem;font-weight:500;color:var(--p-text-muted-color);min-width:2.4rem;text-align:end;letter-spacing:.02em}\n"] }]
+            args: [{ selector: 'app-toolbar', standalone: false, template: "<div class=\"builder-toolbar\">\n    <!-- \u2500\u2500 Mode switcher (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful\"\n            (click)=\"toggleModePopover($event)\"\n            [title]=\"activeModeLabel\">\n        <i [class]=\"activeModeIcon\"></i>\n    </button>\n\n    <p-popover #modePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Select\"\n                    (click)=\"selectMode(modes.Select)\">\n                <i class=\"ph-thin ph-cursor\"></i>\n                <span>Select</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Pan\"\n                    (click)=\"selectMode(modes.Pan)\">\n                <i class=\"ph-thin ph-hand\"></i>\n                <span>Pan</span>\n            </button>\n            <button class=\"popover-option\"\n                    [class.is-active]=\"activeMode === modes.Style\"\n                    (click)=\"selectMode(modes.Style)\">\n                <i class=\"ph-thin ph-paint-brush-broad\"></i>\n                <span>Style</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Undo / Redo (action) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn\" title=\"Undo\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" title=\"Redo\" [disabled]=\"!canRedo\" (click)=\"redo.emit()\">\n        <i class=\"ph-thin ph-arrow-clockwise\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Breakpoint bar \u2014 the EDITING SCOPE, not just a preview size \u2500\u2500 -->\n    <div class=\"breakpoint-bar\" role=\"group\" aria-label=\"Breakpoint\">\n        @for (bp of breakpointOptions; track bp.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeBreakpoint === bp.id\"\n                [attr.aria-pressed]=\"activeBreakpoint === bp.id\"\n                [title]=\"bp.label + ' \u00B7 ' + bp.range\"\n                [attr.aria-label]=\"bp.label\"\n                (click)=\"selectBreakpoint(bp.id)\">\n            <i [class]=\"bp.icon\" [class.bp-icon--landscape]=\"bp.landscape\" aria-hidden=\"true\"></i>\n            @if (breakpointCounts[bp.id]) {\n            <span class=\"bp-dot\" aria-hidden=\"true\"></span>\n            }\n        </button>\n        }\n    </div>\n\n    <!-- \u2500\u2500 Screen width \u2014 Base only (any width above Laptop) \u2500\u2500 -->\n    @if (activeBreakpoint === breakpointIds.Base) {\n    <button class=\"tool-btn stateful width-btn\"\n            (click)=\"toggleWidthPopover($event)\"\n            title=\"Screen width\">\n        <span class=\"width-label\">{{ activeScreenWidth }}</span>\n    </button>\n    }\n\n    <p-popover #widthPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let w of screenWidthOptions\"\n                    [class.is-active]=\"activeScreenWidth === w.width\"\n                    (click)=\"selectScreenWidth(w.width)\">\n                <span>{{ w.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Zoom (stateful) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn stateful zoom-btn\"\n            (click)=\"toggleZoomPopover($event)\"\n            title=\"Zoom\">\n        <span class=\"zoom-label\">{{ zoomLabel }}</span>\n    </button>\n\n    <p-popover #zoomPopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"zoom-popover\">\n            <div class=\"zoom-slider-row\">\n                <input class=\"zoom-slider\"\n                       type=\"range\"\n                       min=\"20\" max=\"100\" step=\"1\"\n                       [value]=\"sliderZoom\"\n                       (input)=\"onSliderChange($event)\">\n                <span class=\"zoom-slider-value\">{{ zoomLabel }}</span>\n            </div>\n            <div class=\"popover-strip\">\n                <button class=\"popover-option\"\n                        *ngFor=\"let z of zoomOptions\"\n                        [class.is-active]=\"z.value === activeZoom\"\n                        (click)=\"selectZoom(z.value)\">\n                    <span>{{ z.label }}</span>\n                </button>\n            </div>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Responsive audit (A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn audit-toggle\"\n            [class.is-open]=\"auditOpen\"\n            [class.has-findings]=\"auditCount > 0\"\n            type=\"button\"\n            title=\"Responsive audit \u2014 what is broken at this width\"\n            aria-label=\"Responsive audit\"\n            [attr.aria-pressed]=\"auditOpen\"\n            (click)=\"auditToggle.emit()\">\n        <i class=\"ph-thin ph-stethoscope\" aria-hidden=\"true\"></i>\n        @if (auditCount) {\n        <span class=\"audit-count\">{{ auditCount }}</span>\n        }\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Save \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn save-btn\"\n            [class.is-saving]=\"isSaving\"\n            [disabled]=\"isSaving\"\n            title=\"Save\"\n            (click)=\"save.emit()\">\n        <i class=\"ph-thin ph-floppy-disk\"></i>\n    </button>\n\n    <!-- \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn preview-btn\"\n            title=\"Preview\"\n            (click)=\"preview.emit()\">\n        <i class=\"ph-thin ph-eye\"></i>\n    </button>\n\n    <span class=\"divider\"></span>\n\n    <!-- \u2500\u2500 Publish / Unpublish \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <button class=\"tool-btn publish-btn\"\n            [class.is-published]=\"isPublished\"\n            [title]=\"isPublished ? 'Unpublish' : 'Publish'\"\n            (click)=\"publishToggle.emit()\">\n        <i [class]=\"isPublished ? 'ph-thin ph-cloud-slash' : 'ph-thin ph-cloud-arrow-up'\"></i>\n        <span class=\"publish-label\">{{ isPublished ? 'Unpublish' : 'Publish' }}</span>\n    </button>\n</div>\n", styles: [".builder-toolbar{display:flex;align-items:center;gap:.125rem}.divider{width:1px;height:1.25rem;background:var(--p-surface-200);margin:0 .375rem;flex-shrink:0}.tool-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.tool-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color)}.tool-btn:disabled{opacity:.35;cursor:default}.tool-btn.stateful{position:relative}.tool-btn.stateful:after{content:\"\";position:absolute;inset-block-end:3px;width:4px;height:4px;border-radius:50%;background:#cb9090}.audit-toggle{position:relative}.audit-toggle.is-open{background:var(--p-surface-100);color:#a05c5c}.audit-toggle.has-findings{color:#b8702f}.audit-count{position:absolute;inset-block-start:1px;inset-inline-end:1px;min-inline-size:13px;padding:0 3px;border-radius:20px;background:#d9924e;color:#fff;font-size:8.5px;line-height:13px;font-weight:600}.breakpoint-bar{display:flex;align-items:center;gap:1px;padding:2px;border-radius:8px;background:var(--p-surface-100)}.bp-btn{position:relative;display:flex;align-items:center;justify-content:center;width:1.875rem;height:1.75rem;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:.95rem;cursor:pointer;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}.bp-btn:hover{background:var(--p-surface-0);color:var(--p-text-color)}.bp-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.bp-btn.is-active{background:var(--p-surface-0);border-color:#cb9090;color:#a05c5c}.bp-icon--landscape{transform:rotate(90deg)}.bp-dot{position:absolute;inset-block-start:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:#d9924e}.zoom-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.5rem}.zoom-btn .zoom-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.width-btn{width:auto;border-radius:999px;padding:0 .5rem;min-width:2.8rem}.width-btn .width-label{font-size:.7rem;font-weight:500;letter-spacing:.02em}.save-btn{background:#cb9090;color:#fff}.save-btn:hover:not(:disabled){background:#b37373;color:#fff}.save-btn.is-saving{opacity:.7}.preview-btn{border:1px solid var(--p-surface-200)}.preview-btn:hover:not(:disabled){background:var(--p-surface-50);color:var(--p-text-color);border-color:var(--p-surface-100)}.publish-btn{width:auto;border-radius:999px;padding:0 .65rem;gap:.35rem;font-size:.75rem;font-weight:500;background:#22c55e;color:#fff;border:none}.publish-btn .publish-label{font-size:.72rem;letter-spacing:.02em}.publish-btn:hover:not(:disabled){background:color-mix(in srgb,#22c55e 85%,#000);color:#fff}.publish-btn.is-published{background:transparent;color:var(--p-text-muted-color);border:1px solid var(--p-surface-200)}.publish-btn.is-published:hover:not(:disabled){background:color-mix(in srgb,#ef4444 10%,transparent);color:#ef4444;border-color:color-mix(in srgb,#ef4444 40%,transparent)}::ng-deep .toolbar-popover .p-popover-content{padding:.25rem!important;background:var(--p-surface-0)!important;border:1px solid var(--p-surface-200)!important;border-radius:10px!important;box-shadow:0 4px 16px #0f172a1a!important}.popover-strip{display:flex;flex-direction:column;gap:2px;min-width:120px}.popover-option{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .65rem;border:none;background:transparent;color:var(--p-text-color);cursor:pointer;font-size:.8rem;border-radius:6px;transition:background .12s ease-out,color .12s ease-out;white-space:nowrap}.popover-option i{font-size:1rem;color:var(--p-text-muted-color)}.popover-option:hover{background:var(--p-surface-50)}.popover-option.is-active{background:#cb9090;color:#fff}.popover-option.is-active i{color:#fff}::ng-deep .toolbar-popover .zoom-popover{display:flex;flex-direction:column;gap:4px;padding:.15rem 0}::ng-deep .toolbar-popover .zoom-slider-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .65rem .1rem}::ng-deep .toolbar-popover .zoom-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;background:var(--p-surface-200);outline:none;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#cb9090;cursor:pointer;transition:transform .12s ease-out}::ng-deep .toolbar-popover .zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}::ng-deep .toolbar-popover .zoom-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;background:#cb9090;cursor:pointer}::ng-deep .toolbar-popover .zoom-slider-value{font-size:.68rem;font-weight:500;color:var(--p-text-muted-color);min-width:2.4rem;text-align:end;letter-spacing:.02em}\n"] }]
         }], propDecorators: { activeMode: [{
                 type: Input
             }], activeBreakpoint: [{
                 type: Input
             }], breakpointCounts: [{
                 type: Input
+            }], auditCount: [{
+                type: Input
+            }], auditOpen: [{
+                type: Input
             }], activeZoom: [{
                 type: Input
             }], activeScreenWidth: [{
@@ -4891,6 +5106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }], breakpointChange: [{
                 type: Output
+            }], auditToggle: [{
+                type: Output
             }], zoomChange: [{
                 type: Output
             }], screenWidthChange: [{
@@ -5194,7 +5411,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/**
+ * The responsive audit list (A5) — what is broken at the width being edited, worst first.
+ * Presentational: the builder runs the audit (it owns the tree and the canvas measurements) and
+ * applies the fixes; this only renders and emits.
+ */
+class AuditPanelComponent {
+    constructor() {
+        this.findings = [];
+        /** Name of the breakpoint being audited, for the header. */
+        this.breakpointLabel = '';
+        this.running = false;
+        this.select = new EventEmitter();
+        this.fix = new EventEmitter();
+        this.fixAll = new EventEmitter();
+        this.rerun = new EventEmitter();
+        this.closePanel = new EventEmitter();
+        this.severities = AuditSeverity;
+    }
+    trackFinding(_index, finding) {
+        return `${finding.nodeId}:${finding.code}`;
+    }
+    /** Findings that carry a safe auto-fix — what "Fix all" would apply. */
+    get fixableCount() {
+        return this.findings.filter(f => !!f.fix).length;
+    }
+    iconFor(severity) {
+        return severity === AuditSeverity.Info ? 'ph-thin ph-info' : 'ph-thin ph-warning';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: AuditPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: AuditPanelComponent, isStandalone: false, selector: "app-audit-panel", inputs: { findings: "findings", breakpointLabel: "breakpointLabel", running: "running" }, outputs: { select: "select", fix: "fix", fixAll: "fixAll", rerun: "rerun", closePanel: "closePanel" }, ngImport: i0, template: "<div class=\"audit-panel\" role=\"dialog\" aria-label=\"Responsive audit\">\n    <header class=\"audit-head\">\n        <span class=\"audit-title\">Responsive audit</span>\n        <span class=\"audit-scope\">{{ breakpointLabel }}</span>\n        <span class=\"audit-spacer\"></span>\n        <button type=\"button\" class=\"audit-link\" [disabled]=\"running\" (click)=\"rerun.emit()\">Re-run</button>\n        <button type=\"button\" class=\"audit-close\" aria-label=\"Close audit\" (click)=\"closePanel.emit()\">\n            <i class=\"ph-thin ph-x\" aria-hidden=\"true\"></i>\n        </button>\n    </header>\n\n    @if (running) {\n    <p class=\"audit-empty\">Measuring\u2026</p>\n    } @else if (!findings.length) {\n    <p class=\"audit-empty audit-empty--clean\">\n        <i class=\"ph-thin ph-check-circle\" aria-hidden=\"true\"></i>\n        Nothing to fix at this width.\n    </p>\n    } @else {\n    <div class=\"audit-actions\">\n        <span>{{ findings.length }} to look at</span>\n        @if (fixableCount) {\n        <button type=\"button\" class=\"audit-link\" (click)=\"fixAll.emit()\">Fix {{ fixableCount }} automatically</button>\n        }\n    </div>\n    <ul class=\"audit-list\">\n        @for (finding of findings; track trackFinding($index, finding)) {\n        <li class=\"audit-item\" [class.is-error]=\"finding.severity === severities.Error\">\n            <i class=\"audit-icon\" [class]=\"iconFor(finding.severity)\" aria-hidden=\"true\"></i>\n            <div class=\"audit-body\">\n                <span class=\"audit-node\">{{ finding.nodeName }}</span>\n                <span class=\"audit-message\">{{ finding.message }}</span>\n            </div>\n            <div class=\"audit-buttons\">\n                @if (finding.fix) {\n                <button type=\"button\" class=\"audit-btn audit-btn--fix\" (click)=\"fix.emit(finding)\">Fix</button>\n                }\n                <button type=\"button\" class=\"audit-btn\" (click)=\"select.emit(finding)\">Select</button>\n            </div>\n        </li>\n        }\n    </ul>\n    }\n</div>\n", styles: [".audit-panel{display:flex;flex-direction:column;max-block-size:60vh;inline-size:340px;border:1px solid var(--p-content-border-color);border-radius:10px;background:var(--p-content-background);box-shadow:0 8px 28px #00000029;overflow:hidden}.audit-head{display:flex;align-items:center;gap:6px;padding:9px 11px;border-block-end:1px solid var(--p-content-border-color)}.audit-title{font-size:12px;font-weight:600}.audit-scope{font-size:10px;color:var(--p-text-muted-color)}.audit-spacer{flex:1}.audit-link{padding:0;border:none;background:none;font-size:10.5px;color:#a05c5c;cursor:pointer}.audit-link:hover:not(:disabled){text-decoration:underline}.audit-link:disabled{opacity:.5;pointer-events:none}.audit-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.audit-close{display:flex;padding:2px;border:none;background:none;color:var(--p-text-muted-color);cursor:pointer}.audit-close:hover{color:var(--p-text-color)}.audit-empty{margin:0;padding:18px 12px;text-align:center;font-size:11px;color:var(--p-text-muted-color)}.audit-empty--clean{display:flex;align-items:center;justify-content:center;gap:6px;color:#4f8f6d}.audit-empty--clean i{font-size:15px}.audit-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 11px;background:var(--p-surface-50);font-size:10.5px;color:var(--p-text-muted-color)}.audit-list{margin:0;padding:0;list-style:none;overflow-y:auto}.audit-item{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-block-end:1px solid var(--p-content-border-color)}.audit-item:last-child{border-block-end:none}.audit-icon{flex:none;margin-block-start:1px;font-size:14px;color:#d9924e}.is-error .audit-icon{color:#c0554f}.audit-body{flex:1;min-inline-size:0}.audit-node{display:block;font-size:11px;font-weight:600;color:var(--p-text-color)}.audit-message{display:block;margin-block-start:2px;font-size:10px;line-height:1.45;color:var(--p-text-muted-color)}.audit-buttons{display:flex;flex:none;flex-direction:column;gap:4px}.audit-btn{padding:3px 9px;border:1px solid var(--p-content-border-color);border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:10px;cursor:pointer;white-space:nowrap}.audit-btn:hover{border-color:#cb9090;color:#a05c5c}.audit-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.audit-btn--fix{background:#a05c5c;border-color:#a05c5c;color:#fff}.audit-btn--fix:hover{background:#8d4f4f;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: AuditPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-audit-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"audit-panel\" role=\"dialog\" aria-label=\"Responsive audit\">\n    <header class=\"audit-head\">\n        <span class=\"audit-title\">Responsive audit</span>\n        <span class=\"audit-scope\">{{ breakpointLabel }}</span>\n        <span class=\"audit-spacer\"></span>\n        <button type=\"button\" class=\"audit-link\" [disabled]=\"running\" (click)=\"rerun.emit()\">Re-run</button>\n        <button type=\"button\" class=\"audit-close\" aria-label=\"Close audit\" (click)=\"closePanel.emit()\">\n            <i class=\"ph-thin ph-x\" aria-hidden=\"true\"></i>\n        </button>\n    </header>\n\n    @if (running) {\n    <p class=\"audit-empty\">Measuring\u2026</p>\n    } @else if (!findings.length) {\n    <p class=\"audit-empty audit-empty--clean\">\n        <i class=\"ph-thin ph-check-circle\" aria-hidden=\"true\"></i>\n        Nothing to fix at this width.\n    </p>\n    } @else {\n    <div class=\"audit-actions\">\n        <span>{{ findings.length }} to look at</span>\n        @if (fixableCount) {\n        <button type=\"button\" class=\"audit-link\" (click)=\"fixAll.emit()\">Fix {{ fixableCount }} automatically</button>\n        }\n    </div>\n    <ul class=\"audit-list\">\n        @for (finding of findings; track trackFinding($index, finding)) {\n        <li class=\"audit-item\" [class.is-error]=\"finding.severity === severities.Error\">\n            <i class=\"audit-icon\" [class]=\"iconFor(finding.severity)\" aria-hidden=\"true\"></i>\n            <div class=\"audit-body\">\n                <span class=\"audit-node\">{{ finding.nodeName }}</span>\n                <span class=\"audit-message\">{{ finding.message }}</span>\n            </div>\n            <div class=\"audit-buttons\">\n                @if (finding.fix) {\n                <button type=\"button\" class=\"audit-btn audit-btn--fix\" (click)=\"fix.emit(finding)\">Fix</button>\n                }\n                <button type=\"button\" class=\"audit-btn\" (click)=\"select.emit(finding)\">Select</button>\n            </div>\n        </li>\n        }\n    </ul>\n    }\n</div>\n", styles: [".audit-panel{display:flex;flex-direction:column;max-block-size:60vh;inline-size:340px;border:1px solid var(--p-content-border-color);border-radius:10px;background:var(--p-content-background);box-shadow:0 8px 28px #00000029;overflow:hidden}.audit-head{display:flex;align-items:center;gap:6px;padding:9px 11px;border-block-end:1px solid var(--p-content-border-color)}.audit-title{font-size:12px;font-weight:600}.audit-scope{font-size:10px;color:var(--p-text-muted-color)}.audit-spacer{flex:1}.audit-link{padding:0;border:none;background:none;font-size:10.5px;color:#a05c5c;cursor:pointer}.audit-link:hover:not(:disabled){text-decoration:underline}.audit-link:disabled{opacity:.5;pointer-events:none}.audit-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.audit-close{display:flex;padding:2px;border:none;background:none;color:var(--p-text-muted-color);cursor:pointer}.audit-close:hover{color:var(--p-text-color)}.audit-empty{margin:0;padding:18px 12px;text-align:center;font-size:11px;color:var(--p-text-muted-color)}.audit-empty--clean{display:flex;align-items:center;justify-content:center;gap:6px;color:#4f8f6d}.audit-empty--clean i{font-size:15px}.audit-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 11px;background:var(--p-surface-50);font-size:10.5px;color:var(--p-text-muted-color)}.audit-list{margin:0;padding:0;list-style:none;overflow-y:auto}.audit-item{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-block-end:1px solid var(--p-content-border-color)}.audit-item:last-child{border-block-end:none}.audit-icon{flex:none;margin-block-start:1px;font-size:14px;color:#d9924e}.is-error .audit-icon{color:#c0554f}.audit-body{flex:1;min-inline-size:0}.audit-node{display:block;font-size:11px;font-weight:600;color:var(--p-text-color)}.audit-message{display:block;margin-block-start:2px;font-size:10px;line-height:1.45;color:var(--p-text-muted-color)}.audit-buttons{display:flex;flex:none;flex-direction:column;gap:4px}.audit-btn{padding:3px 9px;border:1px solid var(--p-content-border-color);border-radius:6px;background:transparent;color:var(--p-text-muted-color);font-size:10px;cursor:pointer;white-space:nowrap}.audit-btn:hover{border-color:#cb9090;color:#a05c5c}.audit-btn:focus-visible{outline:2px solid #cb9090;outline-offset:1px}.audit-btn--fix{background:#a05c5c;border-color:#a05c5c;color:#fff}.audit-btn--fix:hover{background:#8d4f4f;color:#fff}\n"] }]
+        }], propDecorators: { findings: [{
+                type: Input
+            }], breakpointLabel: [{
+                type: Input
+            }], running: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], fix: [{
+                type: Output
+            }], fixAll: [{
+                type: Output
+            }], rerun: [{
+                type: Output
+            }], closePanel: [{
+                type: Output
+            }] } });
+
 class BuilderComponent {
+    get auditBreakpointLabel() {
+        return breakpointDef(this.activeBreakpoint)?.label ?? '';
+    }
+    toggleAudit() {
+        this.auditOpen = !this.auditOpen;
+        if (this.auditOpen)
+            this.runAudit();
+    }
+    /**
+     * Audit every rendered node at the width being edited: resolve its styles for this breakpoint
+     * and measure it ONCE (on demand — never on the animation path). Measurements are divided by the
+     * canvas scale, so findings are in CSS px whatever the zoom. The rules are pure — see
+     * `utils/responsive-audit.util.ts`.
+     */
+    runAudit() {
+        this.auditRunning = true;
+        const scale = this.viewportService.getScale() || 1;
+        const width = this.viewportService.getState().width;
+        const nodes = [];
+        const visit = (list) => {
+            for (const node of list) {
+                const element = this.overlayService.getNodeRef(node)?.element;
+                if (element && node.id) {
+                    const rect = element.getBoundingClientRect();
+                    nodes.push({
+                        id: node.id,
+                        type: node.type,
+                        label: node.label,
+                        styleProps: resolveStyleProps(this.baseStyleMapOf(node), node.responsive, this.activeBreakpoint),
+                        width: rect.width / scale,
+                        height: rect.height / scale,
+                    });
+                }
+                if (node.children?.length)
+                    visit(node.children);
+            }
+        };
+        visit(this.layout);
+        visit(this.globalElements);
+        this.auditFindings = auditNodes(nodes, width);
+        this.auditRunning = false;
+        this.cdr.detectChanges();
+    }
+    /** Apply one finding's fix into the current breakpoint's layer (or the base styles at Base). */
+    applyAuditFix(finding) {
+        const node = this.findNodeById(finding.nodeId, this.layout) ?? this.findNodeById(finding.nodeId, this.globalElements);
+        if (!node || !finding.fix)
+            return;
+        if (this.activeBreakpoint === Breakpoint.Base) {
+            for (const [name, value] of Object.entries(finding.fix)) {
+                for (const group of node.styleTraits ?? []) {
+                    const trait = group.traits.find(t => t.name === name);
+                    if (trait)
+                        trait.default = value;
+                }
+            }
+        }
+        else {
+            let responsive = node.responsive;
+            for (const [name, value] of Object.entries(finding.fix)) {
+                responsive = setOverride(responsive, this.activeBreakpoint, name, value);
+            }
+            node.responsive = responsive;
+        }
+        const cssId = node.styleId ?? node.id;
+        if (cssId) {
+            const base = this.baseStyleMapOf(node);
+            this.styleRegistry.upsert(cssId, composeVirtualTraits(base));
+            this.styleRegistry.upsertResponsive(cssId, base, node.stateStyles, node.responsive);
+        }
+        this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
+        this.runAudit();
+    }
+    /** Apply every fixable finding, then re-measure. */
+    applyAllAuditFixes() {
+        for (const finding of this.auditFindings.filter(f => !!f.fix))
+            this.applyAuditFix(finding);
+    }
+    /** Select the node a finding is about. */
+    selectAuditNode(finding) {
+        const node = this.findNodeById(finding.nodeId, this.layout) ?? this.findNodeById(finding.nodeId, this.globalElements);
+        const ref = node && this.overlayService.getNodeRef(node);
+        if (!node || !ref)
+            return;
+        this.overlayService.setSelect(ref.element, node.type, this.activeMode, node, ref.componentRef);
+        this._emitElementSelect(node, ref.componentRef);
+    }
+    /** A node's full base style map, flattened from its styleTraits. */
+    baseStyleMapOf(node) {
+        const styles = {};
+        for (const group of node.styleTraits ?? []) {
+            for (const trait of group.traits) {
+                if (trait.name !== undefined && trait.default !== undefined)
+                    styles[trait.name] = trait.default;
+            }
+        }
+        return styles;
+    }
+    findNodeById(id, list) {
+        for (const node of list) {
+            if (node.id === id)
+                return node;
+            const deeper = node.children?.length ? this.findNodeById(id, node.children) : null;
+            if (deeper)
+                return deeper;
+        }
+        return null;
+    }
     // Type-safe event forwarding for toolbar outputs
     handleToolbarModeChange(mode) {
         this.onModeChange(mode);
@@ -5256,7 +5633,7 @@ class BuilderComponent {
     get canvasMinHeight() {
         return this.viewportService.getState().height;
     }
-    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas, selectoCanvas) {
+    constructor(registry, overlayService, panelEventService, dragEngine, dsRegistry, viewportService, interactionEngine, interactionPresetRegistry, clipboard, symbolRegistry, cdr, appRef, moveableCanvas, selectoCanvas, styleRegistry) {
         this.registry = registry;
         this.overlayService = overlayService;
         this.panelEventService = panelEventService;
@@ -5271,6 +5648,7 @@ class BuilderComponent {
         this.appRef = appRef;
         this.moveableCanvas = moveableCanvas;
         this.selectoCanvas = selectoCanvas;
+        this.styleRegistry = styleRegistry;
         this.contextStore = inject(ContextStore);
         /**
          * Re-apply context-bound inputs on the CANVAS when a slot changes — the builder twin of the
@@ -5326,6 +5704,11 @@ class BuilderComponent {
         this.breakpointCounts = {};
         /** Deadline for swallowing the canvas click that completes an overlay action. */
         this._ignoreCanvasClickUntil = 0;
+        // ── Responsive audit (A5) ──────────────────────────────────────────────────
+        /** Findings for the width being edited; the panel is open while `auditOpen`. */
+        this.auditFindings = [];
+        this.auditOpen = false;
+        this.auditRunning = false;
         this.activeZoom = 100;
         this.activeScreenWidth = 1440;
         this.selectedItem = null;
@@ -6264,13 +6647,13 @@ class BuilderComponent {
             this.isPanelOpen = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeBreakpoint]=\"activeBreakpoint\"\n            [breakpointCounts]=\"breakpointCounts\"\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            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i16.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "nodePeek"] }] }); }
+    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: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeBreakpoint]=\"activeBreakpoint\"\n            [breakpointCounts]=\"breakpointCounts\"\n            [auditCount]=\"auditFindings.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        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .audit-dock{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.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: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i16.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: i17.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "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, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeBreakpoint]=\"activeBreakpoint\"\n            [breakpointCounts]=\"breakpointCounts\"\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            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }], propDecorators: { layout: [{
+            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n    <header class=\"builder-header\">\n        <div class=\"sidebar-switcher\">\n            <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                <i class=\"ph-thin ph-browsers\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                <i class=\"ph-thin ph-cube\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                <i class=\"ph-thin ph-tree-structure\"></i>\n            </button>\n            <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                <i class=\"ph-thin ph-circles-three\"></i>\n            </button>\n        </div>\n\n        <app-toolbar\n            [activeMode]=\"activeMode\"\n            [activeBreakpoint]=\"activeBreakpoint\"\n            [breakpointCounts]=\"breakpointCounts\"\n            [auditCount]=\"auditFindings.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        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .audit-dock{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }, { type: StyleRegistryService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
                 type: Input
@@ -8356,6 +8739,7 @@ const DECLARATIONS = [
     PanelChildComponent,
     LayerTreeComponent,
     BreadcrumbBarComponent,
+    AuditPanelComponent,
 ];
 class IoxBuilderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8375,7 +8759,8 @@ class IoxBuilderModule {
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
-            BreadcrumbBarComponent], imports: [CommonModule,
+            BreadcrumbBarComponent,
+            AuditPanelComponent], imports: [CommonModule,
             FormsModule,
             DragDropModule,
             AccordionModule,
@@ -8415,7 +8800,8 @@ class IoxBuilderModule {
             PanelComponent,
             PanelChildComponent,
             LayerTreeComponent,
-            BreadcrumbBarComponent] }); }
+            BreadcrumbBarComponent,
+            AuditPanelComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderModule, providers: [
             DragEngineService,
             OverlayService,
@@ -8519,6 +8905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         PanelChildComponent,
                         LayerTreeComponent,
                         BreadcrumbBarComponent,
+                        AuditPanelComponent,
                     ],
                     schemas: [NO_ERRORS_SCHEMA],
                 }]
@@ -8534,108 +8921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
 const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
 
-/**
- * STRUCTURE OPS (A4) — the one-click layout changes people actually make at a narrow width, as pure
- * "what to write" functions. Each returns a flat style map the caller stores in the node's
- * `responsive[bp]` layer (or in the base styles at Base) through the shared `setOverride`.
- *
- * All of it is ordinary CSS the SSR engine already renders — there is no second tree and no
- * per-width HTML. See responsive-breakpoints-plan.md (D5).
- */
-/** CSS lengths that are a FIXED pixel size — the ones that stop a layout fitting a phone. */
-const PX_LENGTH = /^-?\d+(\.\d+)?px$/i;
-/**
- * Hide / show at a width. Hiding is `display: none` INSIDE that breakpoint's rules — the node stays
- * in the DOM and in the SSR output (one HTML document serves every width), so hidden content still
- * ships bytes and is still indexed. Showing again clears the override rather than guessing a value.
- *
- * @returns the props to write, or `null` meaning "clear the display override at this breakpoint".
- */
-function visibilityProps(hidden) {
-    return hidden ? { display: 'none' } : null;
-}
-/** True when this node is hidden by the resolved styles at some width. */
-function isHiddenAt(resolvedStyleProps) {
-    return String(resolvedStyleProps?.['display'] ?? '') === 'none';
-}
-/**
- * Stack a container's children in one column — the most common mobile edit, and four separate
- * controls today (display, direction, wrap, columns). A grid becomes a single-column grid; anything
- * else becomes a column flex box.
- */
-function stackChildrenProps(resolvedStyleProps) {
-    const display = String(resolvedStyleProps?.['display'] ?? '');
-    if (display === 'grid' || display === 'inline-grid') {
-        return { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
-    }
-    return { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap' };
-}
-/**
- * Collapse a grid to `count` columns (a flex row is stacked instead — it has no column track).
- * `count` is clamped to at least 1.
- */
-function collapseColumnsProps(resolvedStyleProps, count) {
-    const columns = Math.max(1, Math.floor(count));
-    const display = String(resolvedStyleProps?.['display'] ?? '');
-    if (display === 'grid' || display === 'inline-grid') {
-        return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
-    }
-    return columns === 1 ? stackChildrenProps(resolvedStyleProps) : { flexWrap: 'wrap' };
-}
-/** How many equal columns a `repeat(N, …)` track list describes, or null when it isn't one. */
-function columnCountOf(resolvedStyleProps) {
-    const match = /^repeat\(\s*(\d+)\s*,/.exec(String(resolvedStyleProps?.['gridTemplateColumns'] ?? ''));
-    return match ? Number(match[1]) : null;
-}
-/**
- * Make fixed pixel sizes fluid: `width: 520px` → `width: 100%` with the original kept as
- * `max-width`, so the element still never exceeds its designed size on a wide screen. `minWidth` in
- * px is dropped to 0 — it is what actually forces horizontal scrolling on a phone.
- *
- * @returns the props to write; EMPTY when there is nothing fixed to fluidise.
- */
-function fluidiseProps(resolvedStyleProps) {
-    const out = {};
-    const width = String(resolvedStyleProps?.['width'] ?? '');
-    const minWidth = String(resolvedStyleProps?.['minWidth'] ?? '');
-    if (PX_LENGTH.test(width)) {
-        out['width'] = '100%';
-        const maxWidth = String(resolvedStyleProps?.['maxWidth'] ?? '');
-        if (!maxWidth || maxWidth === 'none')
-            out['maxWidth'] = width;
-    }
-    if (PX_LENGTH.test(minWidth) && parseFloat(minWidth) > 0)
-        out['minWidth'] = '0px';
-    return out;
-}
-/** True when `fluidiseProps` would change anything — drives the button's disabled state. */
-function canFluidise(resolvedStyleProps) {
-    return Object.keys(fluidiseProps(resolvedStyleProps)).length > 0;
-}
-/**
- * Reorder children AT ONE WIDTH using CSS `order`, leaving the tree — and so the DOM and
- * screen-reader order — untouched. Returns one value per child BY CHILD INDEX: the `order` it must
- * take, or `null` for "no override needed".
- *
- * Either every child gets an explicit `order` or none does: CSS defaults `order` to 0, so a partial
- * set would mix overridden children with unordered ones and read as an arbitrary interleave.
- *
- * @param count  How many children there are.
- * @param from   Index of the child being moved.
- * @param to     Index it should occupy.
- */
-function reorderProps(count, from, to) {
-    const none = Array.from({ length: Math.max(0, count) }, () => null);
-    if (from < 0 || from >= count || to < 0 || to >= count || from === to)
-        return none;
-    // Visual order after the move, as a list of CHILD indices.
-    const sequence = Array.from({ length: count }, (_, i) => i);
-    sequence.splice(to, 0, ...sequence.splice(from, 1));
-    const orderByChild = none.slice();
-    sequence.forEach((childIndex, position) => { orderByChild[childIndex] = position; });
-    return orderByChild;
-}
-
 /**
  * ESSENTIALS (B3) — the handful of style controls that matter first for each component type.
  *
@@ -8685,6 +8970,108 @@ function matchesControlSearch(name, label, term) {
     return name.toLowerCase().includes(needle) || (label ?? '').toLowerCase().includes(needle);
 }
 
+const GRID = (columns) => ({ display: 'grid', gridTemplateColumns: columns, gap: '24px', width: '100%' });
+const ONE_COLUMN = { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' };
+const LAYOUT_PRESETS = Object.freeze([
+    {
+        id: 'stack', name: 'Stack', icon: 'ph-thin ph-rows',
+        description: 'Vertical flow with even spacing.',
+        container: { display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' },
+        childCount: 2,
+    },
+    {
+        id: 'two-columns', name: 'Two columns', icon: 'ph-thin ph-columns',
+        description: 'Side by side; stacks on a phone.',
+        container: GRID('repeat(2, minmax(0, 1fr))'),
+        containerResponsive: { [Breakpoint.Small]: ONE_COLUMN },
+        childCount: 2,
+    },
+    {
+        id: 'three-columns', name: 'Three columns', icon: 'ph-thin ph-columns',
+        description: 'Three across; two on a tablet, one on a phone.',
+        container: GRID('repeat(3, minmax(0, 1fr))'),
+        containerResponsive: {
+            [Breakpoint.Tablet]: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
+            [Breakpoint.Small]: ONE_COLUMN,
+        },
+        childCount: 3,
+    },
+    {
+        id: 'sidebar-main', name: 'Sidebar + main', icon: 'ph-thin ph-layout',
+        description: 'Fixed sidebar beside flexible content; the sidebar drops under it on a tablet.',
+        container: GRID('280px minmax(0, 1fr)'),
+        containerResponsive: { [Breakpoint.Tablet]: ONE_COLUMN },
+        childCount: 2,
+    },
+    {
+        id: 'card-grid', name: 'Card grid', icon: 'ph-thin ph-squares-four',
+        description: 'A grid of cards: three, then two, then one.',
+        container: GRID('repeat(3, minmax(0, 1fr))'),
+        containerResponsive: {
+            [Breakpoint.Tablet]: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
+            [Breakpoint.Small]: ONE_COLUMN,
+        },
+        childCount: 6,
+        child: { minHeight: '160px' },
+    },
+    {
+        id: 'split-hero', name: 'Split hero', icon: 'ph-thin ph-square-split-horizontal',
+        description: 'Text beside media; on a phone the media moves above the text.',
+        container: GRID('minmax(0, 1.2fr) minmax(0, 1fr)'),
+        containerResponsive: { [Breakpoint.Small]: ONE_COLUMN },
+        childCount: 2,
+        // On a phone the MEDIA (child 2) leads — CSS order only, the DOM order never changes.
+        childResponsive: [{ [Breakpoint.Small]: { order: '1' } }, { [Breakpoint.Small]: { order: '0' } }],
+    },
+]);
+/** Set a style trait's value on a node built from a component config. */
+function setStyleTrait(node, name, value) {
+    for (const group of node.styleTraits ?? []) {
+        const trait = group.traits.find(t => t.name === name);
+        if (trait) {
+            trait.default = value;
+            return;
+        }
+    }
+}
+function applyResponsive(node, layers) {
+    if (!layers)
+        return;
+    let responsive = node.responsive;
+    for (const [bp, styles] of Object.entries(layers)) {
+        for (const [prop, value] of Object.entries(styles ?? {})) {
+            responsive = setOverride(responsive, bp, prop, value);
+        }
+    }
+    node.responsive = responsive;
+}
+/**
+ * Build a preset's node tree. `createNode` makes an empty node of a type (the component registry in
+ * the builder) — passed in so this stays pure and testable.
+ *
+ * @returns the container node, or `null` when the container type can't be created.
+ */
+function buildLayoutPreset(def, createNode) {
+    const container = createNode('Container');
+    if (!container)
+        return null;
+    for (const [prop, value] of Object.entries(def.container))
+        setStyleTrait(container, prop, value);
+    applyResponsive(container, def.containerResponsive);
+    const children = [];
+    for (let i = 0; i < def.childCount; i++) {
+        const child = createNode('Container');
+        if (!child)
+            continue;
+        for (const [prop, value] of Object.entries(def.child ?? {}))
+            setStyleTrait(child, prop, value);
+        applyResponsive(child, def.childResponsive?.[i]);
+        children.push(child);
+    }
+    container.children = children;
+    return container;
+}
+
 class BuilderButtonComponentConfig extends ComponentConfig {
     constructor() {
         super('Button', 'app-builder-button', 'ph-thin ph-cursor-click', 'Basic');
@@ -9238,5 +9625,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, stackChildrenProps, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map