@vectoriox/iox-builder 4.11.0 → 4.12.1

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,5 +1,5 @@
 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 { Injectable, inject, NgZone, EventEmitter, createComponent, Output, Input, Inject, Directive, ChangeDetectionStrategy, Component, InjectionToken, ViewChild, effect, Optional, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i15 from '@angular/forms';
@@ -5144,8 +5144,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Canvas data preview used to come from host-provided content services (IOX_CONTENT_SERVICE /
+ * IOX_SHOP_SERVICE), whose `getContent(contentType, orgId)` hit the ADMIN resources endpoint and
+ * accepted no filters — so the Repeater/Slider ignored every data-source filter. Data now flows
+ * through BuilderDataSourceService + the shared planDataSource, configured with
+ * IOX_DATA_SOURCE_ENDPOINTS. Those tokens are gone; do not reintroduce a fetch that bypasses it.
+ */
+/** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
+const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
+/**
+ * Translates the builder library's OWN chrome.
+ *
+ * The library cannot depend on ngx-translate — that is the host app's choice — but its toolbar was
+ * hardcoded English, which shows through as untranslated controls in a Hebrew/RTL admin. This token
+ * lets the host route those strings through its own i18n while the library keeps working standalone:
+ * unprovided, `defaultBuilderLabels` returns the English text, so nothing ever renders a raw key.
+ *
+ * Keys are namespaced `builder.chrome.*` and listed in `BUILDER_CHROME_EN` below — that object is
+ * the contract. A host providing this token should add those keys to its own bundles.
+ */
+const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
+    providedIn: 'root',
+    factory: () => defaultBuilderLabels,
+});
+/** Standalone behaviour: the English text the library ships with. */
+const defaultBuilderLabels = (_key, fallback) => fallback;
+/**
+ * Every user-visible string in the builder's own chrome, so a host can copy this into its bundles
+ * in one go rather than discovering keys one missing label at a time.
+ */
+const BUILDER_CHROME_EN = Object.freeze({
+    'builder.chrome.select': 'Select',
+    'builder.chrome.pan': 'Pan',
+    'builder.chrome.style': 'Style',
+    'builder.chrome.publish': 'Publish',
+    'builder.chrome.unpublish': 'Unpublish',
+    'builder.chrome.breakpoint': 'Breakpoint',
+    'builder.chrome.formState': 'Form state',
+    'builder.chrome.formStateIdle': 'Idle',
+    'builder.chrome.formStateSubmitting': 'Sending',
+    'builder.chrome.formStateSuccess': 'Success',
+    'builder.chrome.formStateError': 'Error',
+    'builder.chrome.formStateHint': 'Show the form’s {state} state',
+    'builder.chrome.screenWidth': 'Screen width',
+    'builder.chrome.zoom': 'Zoom',
+    'builder.chrome.audit': 'Responsive audit',
+    'builder.chrome.auditHint': 'Responsive audit — what is broken at this width',
+    'builder.chrome.undo': 'Undo',
+    'builder.chrome.redo': 'Redo',
+    'builder.chrome.save': 'Save',
+    'builder.chrome.preview': 'Preview',
+});
+
 class ToolbarComponent {
-    constructor() {
+    get isPublished() {
+        return this.pageStatus === 'published';
+    }
+    get activeModeIcon() {
+        switch (this.activeMode) {
+            case BuilderMode.Select: return 'ph-thin ph-cursor';
+            case BuilderMode.Style: return 'ph-thin ph-paint-brush-broad';
+            case BuilderMode.Pan: return 'ph-thin ph-hand';
+            default: return 'ph-thin ph-cursor';
+        }
+    }
+    get activeModeLabel() {
+        switch (this.activeMode) {
+            case BuilderMode.Style: return this.t('builder.chrome.style');
+            case BuilderMode.Pan: return this.t('builder.chrome.pan');
+            default: return this.t('builder.chrome.select');
+        }
+    }
+    get zoomLabel() {
+        return `${this.activeZoom}%`;
+    }
+    get sliderZoom() {
+        return Math.min(100, Math.max(20, this.activeZoom));
+    }
+    // ── Mode ────────────────────────────────────────────────
+    toggleModePopover(event) {
+        this.modePopover.toggle(event);
+    }
+    selectMode(mode) {
+        if (this.activeMode !== mode) {
+            this.modeChange.emit(mode);
+        }
+        this.modePopover.hide();
+    }
+    constructor(labels) {
+        this.labels = labels;
         this.activeMode = BuilderMode.Select;
         this.activeBreakpoint = Breakpoint.Base;
         /** Overrides per breakpoint — for the selection, or the page when nothing is selected. */
@@ -5190,52 +5278,32 @@ class ToolbarComponent {
         this.screenWidthOptions = SCREEN_WIDTH_OPTIONS;
         /** The four states, in the order a submission moves through them. */
         this.formStates = [
-            { id: FormRenderState.Idle, label: 'Idle', icon: 'ph-thin ph-textbox' },
-            { id: FormRenderState.Submitting, label: 'Sending', icon: 'ph-thin ph-circle-notch' },
-            { id: FormRenderState.Success, label: 'Success', icon: 'ph-thin ph-check-circle' },
-            { id: FormRenderState.Error, label: 'Error', icon: 'ph-thin ph-warning-circle' },
+            { id: FormRenderState.Idle, labelKey: 'builder.chrome.formStateIdle', icon: 'ph-thin ph-textbox' },
+            { id: FormRenderState.Submitting, labelKey: 'builder.chrome.formStateSubmitting', icon: 'ph-thin ph-circle-notch' },
+            { id: FormRenderState.Success, labelKey: 'builder.chrome.formStateSuccess', icon: 'ph-thin ph-check-circle' },
+            { id: FormRenderState.Error, labelKey: 'builder.chrome.formStateError', icon: 'ph-thin ph-warning-circle' },
         ];
     }
-    get isPublished() {
-        return this.pageStatus === 'published';
-    }
-    get activeModeIcon() {
-        switch (this.activeMode) {
-            case BuilderMode.Select: return 'ph-thin ph-cursor';
-            case BuilderMode.Style: return 'ph-thin ph-paint-brush-broad';
-            case BuilderMode.Pan: return 'ph-thin ph-hand';
-            default: return 'ph-thin ph-cursor';
-        }
-    }
-    get activeModeLabel() {
-        switch (this.activeMode) {
-            case BuilderMode.Select: return 'Select';
-            case BuilderMode.Style: return 'Style';
-            case BuilderMode.Pan: return 'Pan';
-            default: return 'Select';
-        }
-    }
-    get zoomLabel() {
-        return `${this.activeZoom}%`;
-    }
-    get sliderZoom() {
-        return Math.min(100, Math.max(20, this.activeZoom));
-    }
-    // ── Mode ────────────────────────────────────────────────
-    toggleModePopover(event) {
-        this.modePopover.toggle(event);
-    }
-    selectMode(mode) {
-        if (this.activeMode !== mode) {
-            this.modeChange.emit(mode);
-        }
-        this.modePopover.hide();
-    }
     // ── Breakpoint ──────────────────────────────────────────
     selectBreakpoint(bp) {
         if (this.activeBreakpoint !== bp)
             this.breakpointChange.emit(bp);
     }
+    /**
+     * Translate one of the builder's own chrome strings. Unprovided, the resolver returns the
+     * English fallback from `BUILDER_CHROME_EN`, so the library still reads correctly standalone
+     * and never renders a raw key.
+     */
+    t(key) {
+        return this.labels(key, BUILDER_CHROME_EN[key] ?? key);
+    }
+    /** "Show the form's Success state" — one key with a slot, not four sentences to translate. */
+    formStateHint(state) {
+        return this.t('builder.chrome.formStateHint').replace('{state}', this.t(state.labelKey));
+    }
+    get publishLabel() {
+        return this.t(this.isPublished ? 'builder.chrome.unpublish' : 'builder.chrome.publish');
+    }
     selectFormState(state) {
         if (this.activeFormState !== state)
             this.formStateChange.emit(state);
@@ -5263,13 +5331,16 @@ class ToolbarComponent {
         this.zoomChange.emit(value);
         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", auditCount: "auditCount", auditOpen: "auditOpen", activeZoom: "activeZoom", activeScreenWidth: "activeScreenWidth", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus", formStateTarget: "formStateTarget", activeFormState: "activeFormState" }, outputs: { modeChange: "modeChange", breakpointChange: "breakpointChange", formStateChange: "formStateChange", 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 Form state \u2014 CONTEXTUAL: only while the selection sits inside a form.\n         This is what lets an author DESIGN the Success and Error blocks: switching here swaps what\n         the canvas renders, exactly as the breakpoint bar above swaps the width. Without it those\n         blocks are hidden by their own state CSS and cannot be reached. \u2500\u2500 -->\n    @if (formStateTarget) {\n    <span class=\"divider\"></span>\n    <div class=\"form-state-bar\" role=\"group\" aria-label=\"Form state\">\n        @for (state of formStates; track state.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeFormState === state.id\"\n                [attr.aria-pressed]=\"activeFormState === state.id\"\n                [title]=\"'Show the form\\'s ' + state.label + ' state'\"\n                [attr.aria-label]=\"state.label\"\n                (click)=\"selectFormState(state.id)\">\n            <i [class]=\"state.icon\" aria-hidden=\"true\"></i>\n        </button>\n        }\n    </div>\n    }\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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ToolbarComponent, deps: [{ token: IOX_BUILDER_LABELS }], 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", auditCount: "auditCount", auditOpen: "auditOpen", activeZoom: "activeZoom", activeScreenWidth: "activeScreenWidth", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus", formStateTarget: "formStateTarget", activeFormState: "activeFormState" }, outputs: { modeChange: "modeChange", breakpointChange: "breakpointChange", formStateChange: "formStateChange", 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>{{ t('builder.chrome.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>{{ t('builder.chrome.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>{{ t('builder.chrome.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]=\"t('builder.chrome.undo')\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" [title]=\"t('builder.chrome.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\" [attr.aria-label]=\"t('builder.chrome.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 Form state \u2014 CONTEXTUAL: only while the selection sits inside a form.\n         This is what lets an author DESIGN the Success and Error blocks: switching here swaps what\n         the canvas renders, exactly as the breakpoint bar above swaps the width. Without it those\n         blocks are hidden by their own state CSS and cannot be reached. \u2500\u2500 -->\n    @if (formStateTarget) {\n    <span class=\"divider\"></span>\n    <div class=\"form-state-bar\" role=\"group\" [attr.aria-label]=\"t('builder.chrome.formState')\">\n        @for (state of formStates; track state.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeFormState === state.id\"\n                [attr.aria-pressed]=\"activeFormState === state.id\"\n                [title]=\"formStateHint(state)\"\n                [attr.aria-label]=\"t(state.labelKey)\"\n                (click)=\"selectFormState(state.id)\">\n            <i [class]=\"state.icon\" aria-hidden=\"true\"></i>\n        </button>\n        }\n    </div>\n    }\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]=\"t('builder.chrome.screenWidth')\">\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]=\"t('builder.chrome.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]=\"t('builder.chrome.auditHint')\"\n            [attr.aria-label]=\"t('builder.chrome.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]=\"t('builder.chrome.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]=\"t('builder.chrome.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]=\"publishLabel\"\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\">{{ publishLabel }}</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 Form state \u2014 CONTEXTUAL: only while the selection sits inside a form.\n         This is what lets an author DESIGN the Success and Error blocks: switching here swaps what\n         the canvas renders, exactly as the breakpoint bar above swaps the width. Without it those\n         blocks are hidden by their own state CSS and cannot be reached. \u2500\u2500 -->\n    @if (formStateTarget) {\n    <span class=\"divider\"></span>\n    <div class=\"form-state-bar\" role=\"group\" aria-label=\"Form state\">\n        @for (state of formStates; track state.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeFormState === state.id\"\n                [attr.aria-pressed]=\"activeFormState === state.id\"\n                [title]=\"'Show the form\\'s ' + state.label + ' state'\"\n                [attr.aria-label]=\"state.label\"\n                (click)=\"selectFormState(state.id)\">\n            <i [class]=\"state.icon\" aria-hidden=\"true\"></i>\n        </button>\n        }\n    </div>\n    }\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: [{
+            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>{{ t('builder.chrome.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>{{ t('builder.chrome.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>{{ t('builder.chrome.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]=\"t('builder.chrome.undo')\" [disabled]=\"!canUndo\" (click)=\"undo.emit()\">\n        <i class=\"ph-thin ph-arrow-counter-clockwise\"></i>\n    </button>\n    <button class=\"tool-btn\" [title]=\"t('builder.chrome.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\" [attr.aria-label]=\"t('builder.chrome.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 Form state \u2014 CONTEXTUAL: only while the selection sits inside a form.\n         This is what lets an author DESIGN the Success and Error blocks: switching here swaps what\n         the canvas renders, exactly as the breakpoint bar above swaps the width. Without it those\n         blocks are hidden by their own state CSS and cannot be reached. \u2500\u2500 -->\n    @if (formStateTarget) {\n    <span class=\"divider\"></span>\n    <div class=\"form-state-bar\" role=\"group\" [attr.aria-label]=\"t('builder.chrome.formState')\">\n        @for (state of formStates; track state.id) {\n        <button type=\"button\"\n                class=\"bp-btn\"\n                [class.is-active]=\"activeFormState === state.id\"\n                [attr.aria-pressed]=\"activeFormState === state.id\"\n                [title]=\"formStateHint(state)\"\n                [attr.aria-label]=\"t(state.labelKey)\"\n                (click)=\"selectFormState(state.id)\">\n            <i [class]=\"state.icon\" aria-hidden=\"true\"></i>\n        </button>\n        }\n    </div>\n    }\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]=\"t('builder.chrome.screenWidth')\">\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]=\"t('builder.chrome.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]=\"t('builder.chrome.auditHint')\"\n            [attr.aria-label]=\"t('builder.chrome.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]=\"t('builder.chrome.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]=\"t('builder.chrome.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]=\"publishLabel\"\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\">{{ publishLabel }}</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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IOX_BUILDER_LABELS]
+                }] }], propDecorators: { activeMode: [{
                 type: Input
             }], activeBreakpoint: [{
                 type: Input
@@ -5836,9 +5907,14 @@ class BuilderComponent {
             return;
         // Straight onto the live instance: this is a VIEW state, not page data — it must never be
         // persisted, or a page would ship showing its own success message.
-        const instance = this.overlayService.getNodeRef(form)?.componentRef?.instance;
-        if (instance) {
-            safeSetInput(this.overlayService.getNodeRef(form).componentRef, 'renderState', state);
+        //
+        // Two input names on purpose: the CANVAS renders the container twin (`formState`) while the
+        // ENGINE renders IoxFormComponent (`renderState`). safeSetInput drops whichever the rendered
+        // component does not declare, so this works on either path without branching on type.
+        const ref = this.overlayService.getNodeRef(form)?.componentRef;
+        if (ref) {
+            safeSetInput(ref, 'formState', state);
+            safeSetInput(ref, 'renderState', state);
         }
         this.cdr.detectChanges();
     }
@@ -7099,6 +7175,15 @@ class BuilderContainerComponent {
         this.htmlTag = 'div';
         this.start = 1;
         this.reversed = false;
+        /**
+         * Form-family marker: `iox-form`, `iox-form-success`, `iox-form-error` or `iox-field-group`.
+         * The builder reuses THIS component for those types (as it already does for List/ListItem), so
+         * they get the canvas drop zone and child rendering; the class is what lets the shared form
+         * stylesheet treat them exactly as it treats the engine's own twins.
+         */
+        this.formClass = '';
+        /** Which state the canvas is showing. Only meaningful on a form host. */
+        this.formState = 'idle';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();
@@ -7123,7 +7208,7 @@ class BuilderContainerComponent {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderContainerComponent, deps: [{ token: i0.ElementRef }, { token: DragEngineService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderContainerComponent, isStandalone: false, selector: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderContainerComponent, isStandalone: false, selector: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container],form[iox-container]", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", htmlTag: "htmlTag", start: "start", reversed: "reversed", formClass: "formClass", formState: "formState" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, host: { properties: { "class": "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '') + (formClass ? ' ' + formClass : '')", "attr.data-iox-state": "formClass === \"iox-form\" ? formState : null", "attr.start": "htmlTag === 'ol' && start !== 1 ? start : null", "attr.reversed": "htmlTag === 'ol' && reversed ? '' : null" } }, ngImport: i0, template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
         <div *ngIf="!children.length" class="container-placeholder">
@@ -7146,7 +7231,7 @@ class BuilderContainerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]', template: `
+            args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container],form[iox-container]', template: `
         <!-- Empty-container slot (B2). pointer-events:none, so a click falls through and SELECTS
              this container — and the components panel then inserts INSIDE it. -->
         <div *ngIf="!children.length" class="container-placeholder">
@@ -7166,7 +7251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             (onMouseLeave)="childMouseLeave.emit()">
         </ng-container>
     `, host: {
-                        '[class]': "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '')",
+                        '[class]': "'container-root iox-node-' + nodeId + (listOrientation === 'horizontal' ? ' is-horizontal' : '') + (formClass ? ' ' + formClass : '')",
+                        // Form nodes on the canvas carry the same class + state attribute the engine's twin does, so
+                        // the SHARED `iox-forms.css` decides visibility identically in both renderers.
+                        '[attr.data-iox-state]': 'formClass === "iox-form" ? formState : null',
                         '[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
                         '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
                     }, standalone: false, styles: [":host{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
@@ -7184,6 +7272,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], reversed: [{
                 type: Input
+            }], formClass: [{
+                type: Input
+            }], formState: [{
+                type: Input
             }], childClick: [{
                 type: Output
             }], childMouseEnter: [{
@@ -9188,16 +9280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 }]
         }] });
 
-/**
- * Canvas data preview used to come from host-provided content services (IOX_CONTENT_SERVICE /
- * IOX_SHOP_SERVICE), whose `getContent(contentType, orgId)` hit the ADMIN resources endpoint and
- * accepted no filters — so the Repeater/Slider ignored every data-source filter. Data now flows
- * through BuilderDataSourceService + the shared planDataSource, configured with
- * IOX_DATA_SOURCE_ENDPOINTS. Those tokens are gone; do not reintroduce a fetch that bypasses it.
- */
-/** Optional font manager. Provide from the host app to populate the fontFamily dropdown. */
-const IOX_FONT_MANAGER = new InjectionToken('IOX_FONT_MANAGER');
-
 /**
  * ESSENTIALS (B3) — the handful of style controls that matter first for each component type.
  *
@@ -9559,8 +9641,13 @@ const shellStyles = () => [
  */
 class FormComponentConfig extends ComponentConfig {
     constructor() {
-        super('Form', 'iox-form', 'ph-thin ph-textbox', 'Forms');
+        // The BUILDER renders these through BuilderContainerComponent (same as List/ListItem), so
+        // they are drop zones and their children render on the canvas; the ENGINE uses the real
+        // twins. `formClass` is what keeps the shared form stylesheet applying to both.
+        super('Form', 'app-builder-container', 'ph-thin ph-textbox', 'Forms');
         this.traits = [
+            // Hidden plumbing: marks this container as a form host for the shared stylesheet.
+            new TraitConfig('formClass', '', TraitInputType.Text, undefined, 'iox-form'),
             new TraitConfig('__formLabel', 'Form', TraitInputType.SectionLabel),
             new TraitConfig('name', 'Form name', TraitInputType.Text, undefined, 'Contact form'),
             // Stable identity the submit endpoint resolves the saved spec by. Generated on create;
@@ -9655,7 +9742,7 @@ class FieldComponentConfig extends ComponentConfig {
 class FieldGroupComponentConfig extends ComponentConfig {
     constructor() {
         super('FieldGroup', 'app-builder-container', 'ph-thin ph-columns', 'Forms');
-        this.traits = [];
+        this.traits = [new TraitConfig('formClass', '', TraitInputType.Text, undefined, 'iox-field-group')];
         this.styleTraits = fullStyles();
         this.children = [];
         this.applyStyleDefaults({
@@ -9697,9 +9784,9 @@ class SubmitButtonComponentConfig extends ComponentConfig {
  */
 class FormSuccessComponentConfig extends ComponentConfig {
     constructor() {
-        super('FormSuccess', 'iox-form-success', 'ph-thin ph-check-circle', 'Forms');
+        super('FormSuccess', 'app-builder-container', 'ph-thin ph-check-circle', 'Forms');
         this.hidden = true;
-        this.traits = [];
+        this.traits = [new TraitConfig('formClass', '', TraitInputType.Text, undefined, 'iox-form-success')];
         this.styleTraits = fullStyles();
         this.children = [];
         this.applyStyleDefaults({
@@ -9715,9 +9802,9 @@ class FormSuccessComponentConfig extends ComponentConfig {
 /** The Error block. One design, five reasons — the renderer writes the resolved reason in. */
 class FormErrorComponentConfig extends ComponentConfig {
     constructor() {
-        super('FormError', 'iox-form-error', 'ph-thin ph-warning-circle', 'Forms');
+        super('FormError', 'app-builder-container', 'ph-thin ph-warning-circle', 'Forms');
         this.hidden = true;
-        this.traits = [];
+        this.traits = [new TraitConfig('formClass', '', TraitInputType.Text, undefined, 'iox-form-error')];
         this.styleTraits = fullStyles();
         this.children = [];
         this.applyStyleDefaults({
@@ -10156,5 +10243,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-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, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormSuccessComponentConfig, 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, SubmitButtonComponentConfig, 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, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, 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, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, 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, SubmitButtonComponentConfig, 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, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, stackChildrenProps, summarise, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map