@vectoriox/iox-builder 3.5.1 → 4.1.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -16,7 +16,7 @@ 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, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, buildTargetedStateSelector, compileDeclarations, safeSetInput, composeVirtualTraits, collectContextSlotKeys, withContextSlots, nodeUsesContext, resolvePath, applyBindingPipes, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } 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';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -832,6 +832,10 @@ var PanelEventTypes;
      *  clones are attached by ELEMENT at render time, so without this a new interaction only starts
      *  working after a save + reload. */
     PanelEventTypes["INTERACTION_CHANGED"] = "interactionchanged";
+    /** CLICK-TO-INSERT (B2): a components-panel entry was clicked. Carries the same payload a drag
+     *  would (`string` component type, or a block / symbol object). The builder resolves WHERE from
+     *  the current selection — see `resolveInsertTarget`. */
+    PanelEventTypes["INSERT_COMPONENT"] = "insertcomponent";
 })(PanelEventTypes || (PanelEventTypes = {}));
 class PanelEventService {
     constructor() {
@@ -931,6 +935,8 @@ var ToolbarAction;
     ToolbarAction["Paste"] = "paste";
     ToolbarAction["AddSlide"] = "add-slide";
     ToolbarAction["Wrap"] = "wrap";
+    /** Open the components panel to insert into / after the selection (B2 quick-add). */
+    ToolbarAction["AddElement"] = "add-element";
 })(ToolbarAction || (ToolbarAction = {}));
 var NodeAction;
 (function (NodeAction) {
@@ -943,17 +949,13 @@ var BuilderMode;
     BuilderMode["Style"] = "style";
     BuilderMode["Pan"] = "pan";
 })(BuilderMode || (BuilderMode = {}));
-var DeviceMode;
-(function (DeviceMode) {
-    DeviceMode["Desktop"] = "desktop";
-    DeviceMode["Tablet"] = "tablet";
-    DeviceMode["Mobile"] = "mobile";
-})(DeviceMode || (DeviceMode = {}));
-const DEVICE_OPTIONS = [
-    { mode: DeviceMode.Desktop, label: 'Desktop', icon: 'ph-thin ph-desktop', width: 1440, height: 900 },
-    { mode: DeviceMode.Tablet, label: 'Tablet', icon: 'ph-thin ph-device-tablet', width: 768, height: 1024 },
-    { mode: DeviceMode.Mobile, label: 'Mobile', icon: 'ph-thin ph-device-mobile', width: 375, height: 812 },
-];
+const BREAKPOINT_PRESENTATION = Object.freeze({
+    [Breakpoint.Base]: { icon: 'ph-thin ph-desktop', previewHeight: 900 },
+    [Breakpoint.Laptop]: { icon: 'ph-thin ph-laptop', previewHeight: 800 },
+    [Breakpoint.Tablet]: { icon: 'ph-thin ph-device-tablet', previewHeight: 1024 },
+    [Breakpoint.Mobile]: { icon: 'ph-thin ph-device-mobile', previewHeight: 320, landscape: true },
+    [Breakpoint.Small]: { icon: 'ph-thin ph-device-mobile', previewHeight: 844 },
+});
 const ZOOM_OPTIONS = [
     { label: '25%', value: 25 },
     { label: '50%', value: 50 },
@@ -1019,6 +1021,64 @@ function nodeAncestorPathInEither(layout, globalElements, target) {
     return nodeAncestorPath(layout, target) ?? nodeAncestorPath(globalElements, target);
 }
 
+/** Counts for ONE node (the selection). Breakpoints with nothing overridden are omitted. */
+function nodeBreakpointCounts(node) {
+    const counts = {};
+    if (!node?.responsive)
+        return counts;
+    for (const { id } of BREAKPOINTS) {
+        if (id === Breakpoint.Base)
+            continue;
+        const n = countOverrides(node.responsive, id);
+        if (n)
+            counts[id] = n;
+    }
+    return counts;
+}
+/** Counts summed over whole trees (the page, when nothing is selected). */
+function treeBreakpointCounts(...roots) {
+    const counts = {};
+    const visit = (nodes) => {
+        for (const node of nodes ?? []) {
+            for (const [bp, n] of Object.entries(nodeBreakpointCounts(node))) {
+                counts[bp] = (counts[bp] ?? 0) + n;
+            }
+            visit(node.children);
+        }
+    };
+    roots.forEach(visit);
+    return counts;
+}
+
+/**
+ * Resolve where "click to insert" puts a new element, from the current selection — the rule the
+ * components panel and the canvas "+" share (builder-usability-plan.md, B2):
+ *
+ *   nothing selected        → appended to the page root
+ *   a CONTAINER selected    → appended INSIDE it (its last child)
+ *   a LEAF selected         → inserted AFTER it, as its next sibling
+ *
+ * `isContainer` decides what can hold children — the builder passes "has a registered drop zone",
+ * the same test a drag uses, so a click can never insert somewhere a drop couldn't.
+ * A selection not found in `roots` (stale) falls back to appending to the root.
+ */
+function resolveInsertTarget(roots, selected, isContainer) {
+    const append = (children, parent) => ({ children, index: children.length, parent });
+    if (!selected)
+        return append(roots, null);
+    const path = nodeAncestorPath(roots, selected);
+    if (!path)
+        return append(roots, null);
+    if (isContainer(selected)) {
+        if (!selected.children)
+            selected.children = [];
+        return append(selected.children, selected);
+    }
+    const parent = path.length >= 2 ? path[path.length - 2] : null;
+    const siblings = parent ? (parent.children ?? (parent.children = [])) : roots;
+    return { children: siblings, index: siblings.indexOf(selected) + 1, parent };
+}
+
 class ComponentRegistryService {
     constructor() {
         this.components = {};
@@ -1195,6 +1255,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }] });
 
+/**
+ * The text on the drop indicator's chip — "into Card grid · position 2 of 3" (B2).
+ *
+ * The most common drag failure is landing a node one level off and not noticing; naming the PARENT
+ * and the slot makes the target unambiguous before the pointer is released.
+ *
+ * @param containerName  The target container's label or type; blank / unknown → "the page".
+ * @param index          Insert index within the container (0-based).
+ * @param childCount     How many children it has now — the node being dropped makes `childCount + 1`.
+ */
+function dropTargetLabel(containerName, index, childCount) {
+    const name = (containerName ?? '').trim() || 'the page';
+    const total = Math.max(0, childCount) + 1;
+    const position = Math.min(Math.max(index, 0), total - 1) + 1;
+    return `into ${name} · position ${position} of ${total}`;
+}
+
 /**
  * Per-frame exponential smoothing step — moves `current` a fraction of the way
  * toward `target`. Used to ease the drag ghost toward the pointer instead of
@@ -1333,6 +1410,7 @@ class DragEngineService {
         this._deepTargetId = null;
         /** Injected overlay div marking the active drop target. */
         this._targetOverlay = null;
+        this._targetChip = null;
         // ── Insertion indicator ───────────────────────────────────
         this._indicator = null;
         this._indicatorContainerId = null;
@@ -1369,28 +1447,11 @@ class DragEngineService {
     handleDrop(children, event, dropListId, cdr, afterDrop) {
         const { payload, insertIndex } = event;
         if (payload.type === 'external') {
-            const data = payload.data;
-            if (typeof data === 'string') {
-                // Built-in component type — create from registry.
-                const config = this.registry.createConfig(data);
-                if (config) {
-                    children.splice(insertIndex, 0, config);
-                    cdr.detectChanges();
-                    this.dropComplete$.next(config);
-                }
-            }
-            else {
-                // Full block object { node, symbolId, syncInstances } or bare ComponentNode.
-                // Prefer symbol.node (always up-to-date) over block.node (original snapshot).
-                const symbolNode = data.symbolId ? this.symbolRegistry.getSymbol(data.symbolId)?.node : null;
-                const nodeData = (symbolNode ?? data.node ?? data);
-                const cloned = deepCloneNode(nodeData);
-                if (data.syncInstances && data.symbolId) {
-                    cloned.symbolId = data.symbolId;
-                }
-                children.splice(insertIndex, 0, cloned);
+            const node = this.materialize(payload.data);
+            if (node) {
+                children.splice(insertIndex, 0, node);
                 cdr.detectChanges();
-                this.dropComplete$.next(cloned);
+                this.dropComplete$.next(node);
             }
             afterDrop?.();
             return;
@@ -1411,21 +1472,13 @@ class DragEngineService {
             else {
                 // Source not in the drop-zone registry → came from an external panel
                 // (e.g. the built-in blocks panel stores one pre-built node object and
-                // reuses it across drags). Deep-clone with fresh IDs so each drop
-                // produces a fully independent node, preventing shared CSS rules.
-                // The panel may supply a bare ComponentNode OR a block wrapper object
-                // { node, symbolId, syncInstances } — extract the node first.
-                // Prefer symbol.node (always up-to-date) over block.node (original snapshot).
-                const blk = item;
-                const symbolNode2 = blk.symbolId ? this.symbolRegistry.getSymbol(blk.symbolId)?.node : null;
-                const nodeData = (symbolNode2 ?? blk.node ?? item);
-                const cloned = deepCloneNode(nodeData);
-                if (blk.syncInstances && blk.symbolId) {
-                    cloned.symbolId = blk.symbolId;
+                // reuses it across drags), so materialise it like any external payload.
+                const cloned = this.materialize(item);
+                if (cloned) {
+                    children.splice(insertIndex, 0, cloned);
+                    cdr.detectChanges();
+                    this.dropComplete$.next(cloned);
                 }
-                children.splice(insertIndex, 0, cloned);
-                cdr.detectChanges();
-                this.dropComplete$.next(cloned);
             }
             afterDrop?.();
             return;
@@ -1440,6 +1493,56 @@ class DragEngineService {
         }
         afterDrop?.();
     }
+    /**
+     * Turn a components-panel payload into a fresh ComponentNode: a built-in type string via the
+     * registry, or a block / symbol / bare node deep-cloned with fresh ids (so each copy owns its
+     * CSS rules and its intra-subtree references stay self-consistent). Prefers `symbol.node`
+     * (always current) over a block's original snapshot.
+     *
+     * The ONE place a panel payload becomes a node — drag-drop and click-to-insert both use it, so
+     * a clicked element is identical to a dragged one.
+     */
+    materialize(data) {
+        if (typeof data === 'string')
+            return this.registry.createConfig(data) ?? null;
+        if (!data || typeof data !== 'object')
+            return null;
+        const blk = data;
+        const symbolNode = blk.symbolId ? this.symbolRegistry.getSymbol(blk.symbolId)?.node : null;
+        const cloned = deepCloneNode((symbolNode ?? blk.node ?? blk));
+        if (blk.syncInstances && blk.symbolId)
+            cloned.symbolId = blk.symbolId;
+        return cloned;
+    }
+    /**
+     * CLICK-TO-INSERT (B2): place a panel payload at a resolved target without a drag. Emits
+     * `dropComplete$` exactly like a drop, so the builder selects the new node and records one undo
+     * step through the same path. Returns the inserted node, or null if the payload was unusable.
+     */
+    insertPayload(children, index, data) {
+        const node = this.materialize(data);
+        if (!node)
+            return null;
+        children.splice(Math.max(0, Math.min(index, children.length)), 0, node);
+        this.cdrForData(children)?.detectChanges();
+        this.dropComplete$.next(node);
+        return node;
+    }
+    /** True when `children` is a registered drop zone's array — i.e. a real container that can hold
+     *  children. Click-to-insert uses the same test a drag does, so it can't insert where a drop
+     *  couldn't. */
+    isDropContainer(children) {
+        for (const data of this.dataMap.values())
+            if (data === children)
+                return true;
+        return false;
+    }
+    cdrForData(children) {
+        for (const [id, data] of this.dataMap.entries())
+            if (data === children)
+                return this.cdrMap.get(id);
+        return undefined;
+    }
     /** Called by BuilderComponent whenever the viewport scale changes. */
     setScale(scale) { this._scale = scale; }
     _snapshotRects() {
@@ -1851,8 +1954,20 @@ class DragEngineService {
         if (!this._targetOverlay) {
             this._targetOverlay = document.createElement('div');
             this._targetOverlay.className = 'iox-drop-target-overlay';
+            // Chip naming the target + slot — the most common drag failure is landing one level off
+            // and not noticing (B2). Inline-styled like the indicator: no global CSS dependency.
+            this._targetChip = document.createElement('div');
+            this._targetChip.className = 'iox-drop-target-chip';
+            this._targetChip.style.cssText = [
+                'position:absolute', 'left:0', 'top:-18px', 'max-width:100%', 'overflow:hidden',
+                'white-space:nowrap', 'text-overflow:ellipsis', 'padding:1px 6px',
+                'border-radius:4px 4px 0 0', 'background:#6366f1', 'color:#fff',
+                'font:500 10px/1.5 system-ui,sans-serif', 'pointer-events:none',
+            ].join(';');
+            this._targetOverlay.appendChild(this._targetChip);
             document.body.appendChild(this._targetOverlay);
         }
+        this._updateTargetChip(targetId, el);
         const rect = el.getBoundingClientRect();
         this._targetOverlay.style.cssText = [
             'position:fixed',
@@ -1868,6 +1983,17 @@ class DragEngineService {
     _removeTargetOverlay() {
         this._targetOverlay?.remove();
         this._targetOverlay = null;
+        this._targetChip = null;
+    }
+    /** Name the drop target and the slot: "into Card grid · position 2 of 4". */
+    _updateTargetChip(targetId, el) {
+        if (!this._targetChip)
+            return;
+        const name = this.overlayService.findNodeByElement(el)?.node;
+        const childCount = this.getData(targetId)?.length ?? 0;
+        const index = this._indicatorContainerId === targetId && this._indicatorIndex >= 0
+            ? this._indicatorIndex : childCount;
+        this._targetChip.textContent = dropTargetLabel(name?.label || name?.type, index, childCount);
     }
     _isRootContainer(id) {
         const el = this._getEl(id);
@@ -1907,6 +2033,9 @@ class DragEngineService {
         if (idx !== this._indicatorIndex || targetId !== this._indicatorContainerId) {
             this._indicatorIndex = idx;
             this._positionIndicator(targetId, idx);
+            const el = this._getEl(targetId);
+            if (el)
+                this._updateTargetChip(targetId, el);
         }
     }
     _positionIndicator(containerId, index) {
@@ -2086,6 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         }] });
 
 const STORAGE_KEY = 'iox_builder_viewport';
+const DEFAULT_WIDTH = breakpointDef(Breakpoint.Base).previewWidth;
 class ViewportService {
     constructor() {
         this.state = this.loadFromStorage();
@@ -2098,15 +2228,17 @@ class ViewportService {
     getScale() {
         return this.state.scale;
     }
-    setDevice(device) {
-        const option = DEVICE_OPTIONS.find(d => d.mode === device);
-        if (!option)
+    /** Show (and edit) `bp`: the canvas takes that breakpoint's preview width and height. */
+    setBreakpoint(bp) {
+        const def = breakpointDef(bp);
+        if (!def)
             return;
-        this.update({ device, width: option.width, height: option.height });
+        this.update({ width: def.previewWidth, height: BREAKPOINT_PRESENTATION[bp].previewHeight });
     }
     setScale(scale) {
         this.update({ scale: Math.max(0.1, Math.min(2, scale)) });
     }
+    /** Any canvas width — the breakpoint follows from it. */
     setWidth(width) {
         this.update({ width });
     }
@@ -2149,21 +2281,28 @@ class ViewportService {
         };
     }
     update(partial) {
-        this.state = { ...this.state, ...partial };
+        const next = { ...this.state, ...partial };
+        this.state = { ...next, breakpoint: breakpointForWidth(next.width) };
         this.stateSubject.next(this.state);
         this.saveToStorage();
     }
     saveToStorage() {
         try {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state));
+            const { width, height, scale } = this.state;
+            localStorage.setItem(STORAGE_KEY, JSON.stringify({ width, height, scale }));
         }
         catch { }
     }
+    /**
+     * Restores width / height / scale. Older builds also saved a `device` ('desktop' | 'tablet' |
+     * 'mobile'); it is ignored — the saved width (1440 / 768 / 375) already resolves to the
+     * matching breakpoint (Base / Tablet / Small), so old preferences carry over unchanged.
+     */
     loadFromStorage() {
         const defaults = {
-            device: DeviceMode.Desktop,
-            width: DEVICE_OPTIONS[0].width,
-            height: DEVICE_OPTIONS[0].height,
+            breakpoint: breakpointForWidth(DEFAULT_WIDTH),
+            width: DEFAULT_WIDTH,
+            height: BREAKPOINT_PRESENTATION[Breakpoint.Base].previewHeight,
             scale: 0.75,
         };
         try {
@@ -2171,14 +2310,13 @@ class ViewportService {
             if (!raw)
                 return defaults;
             const saved = JSON.parse(raw);
-            const device = Object.values(DeviceMode).includes(saved.device)
-                ? saved.device
-                : defaults.device;
-            const option = DEVICE_OPTIONS.find(d => d.mode === device) ?? DEVICE_OPTIONS[0];
+            const width = typeof saved.width === 'number' && saved.width > 0 ? saved.width : defaults.width;
+            const breakpoint = breakpointForWidth(width);
             return {
-                device,
-                width: typeof saved.width === 'number' && saved.width > 0 ? saved.width : option.width,
-                height: typeof saved.height === 'number' && saved.height > 0 ? saved.height : option.height,
+                breakpoint,
+                width,
+                height: typeof saved.height === 'number' && saved.height > 0
+                    ? saved.height : BREAKPOINT_PRESENTATION[breakpoint].previewHeight,
                 scale: typeof saved.scale === 'number' ? Math.max(0.1, Math.min(2, saved.scale)) : defaults.scale,
             };
         }
@@ -2881,6 +3019,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             type: Injectable
         }] });
 
+/**
+ * CSS container name of the builder canvas frame (and of the global-elements overlay). Breakpoint
+ * rules are emitted as `@container iox-canvas (max-width: …)`: the frame's layout width IS the
+ * simulated viewport and is unaffected by the zoom `transform: scale`, whereas a `@media` query
+ * would read the editor window. Set on the frame in builder.component.scss.
+ */
+const BUILDER_CANVAS_CONTAINER = 'iox-canvas';
 /**
  * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
@@ -2907,6 +3052,14 @@ class StyleRegistryService {
     constructor() {
         this.changes$ = new Subject();
         this.rules = new Map();
+        /** Breakpoint rules, kept apart so they flush AFTER every base rule — equal specificity, so
+         *  source order decides (plan trap 1). Keyed per breakpoint like `rules` (`id`, `id:state`). */
+        this.responsiveRules = new Map();
+        this.responsiveInputs = new Map();
+        /** Which breakpoint rule keys each node owns — so re-emitting one node's rules is O(its rules),
+         *  not a scan of every breakpoint rule on the page (this runs on every node render). */
+        this.responsiveKeys = new Map();
+        this.stateScopes = new Map();
         this.styleEl = null;
         this._flushPending = false;
     }
@@ -2957,66 +3110,132 @@ class StyleRegistryService {
             return;
         if (state) {
             const key = `${nodeId}:${state}`;
-            // Targeted states (trigger-hover): the styled node restyles when an ARBITRARY chosen
-            // element is hovered. The selector is `:has()`-scoped to `relativeToId` (the nearest
-            // common ancestor of styled + trigger) so it stays repetition-safe with one shared rule.
-            if (TARGETED_STATES.includes(state)) {
-                const base = TARGETED_STATE_BASE[state];
-                const css = (relativeToId && triggerId && base)
-                    ? this.compile(buildTargetedStateSelector(relativeToId, triggerId, nodeId, base), styles)
-                    : '';
-                if (css) {
-                    this.rules.set(key, css);
-                }
-                else {
-                    this.rules.delete(key);
-                }
-                this.flush();
-                return;
-            }
-            // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
-            // and cascades to this element. Requires the ancestor's css id.
-            if (RELATIONAL_STATES.includes(state)) {
-                const base = RELATIONAL_STATE_BASE[state];
-                const css = (relativeToId && base)
-                    ? this.compile(`iox-node-${relativeToId}:${base} .iox-node-${nodeId}`, styles)
-                    : '';
-                if (css) {
-                    this.rules.set(key, css);
-                }
-                else {
-                    this.rules.delete(key);
-                }
-                this.flush();
-                return;
-            }
-            // Structural pseudo-classes (first-child, last-child, nth-child) target the
-            // outer wrapper element so they participate correctly in grid/flex layout.
-            const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
-            const css = this.compile(`${prefix}-${nodeId}:${state}`, styles);
-            if (css) {
+            // Remember the scope a relational / targeted rule was given, so the same state at a
+            // breakpoint is scoped identically without re-resolving it (see upsertResponsive).
+            if (relativeToId || triggerId)
+                this.stateScopes.set(key, { relativeToId, triggerId });
+            const selector = this.stateSelector(nodeId, state, relativeToId, triggerId);
+            const css = selector ? this.compile(selector, styles) : '';
+            if (css)
                 this.rules.set(key, css);
-            }
-            else {
+            else
                 this.rules.delete(key);
-            }
+            if (this.responsiveInputs.has(nodeId))
+                this.emitResponsive(nodeId);
             this.flush();
             return;
         }
-        // ::marker pseudo-element — emitted as a separate rule, not part of inner/outer split.
-        const markerStyles = styles['__markerStyles'];
-        if (markerStyles && Object.keys(markerStyles).length) {
-            const markerCss = this.compile(`iox-node-${nodeId}::marker`, markerStyles);
-            if (markerCss)
-                this.rules.set(`${nodeId}::marker`, markerCss);
-            else
-                this.rules.delete(`${nodeId}::marker`);
-        }
-        else {
+        const { main, marker } = this.nodeRuleCss(nodeId, styles, this.isOutOfFlow(styles), DeclarationContext.Base);
+        if (marker)
+            this.rules.set(`${nodeId}::marker`, marker);
+        else
             this.rules.delete(`${nodeId}::marker`);
+        if (main)
+            this.rules.set(nodeId, main);
+        else
+            this.rules.delete(nodeId);
+        this.flush();
+    }
+    /**
+     * Emit (or clear) a node's breakpoint rules. `planResponsiveRules` — shared with the SSR engine —
+     * decides what each breakpoint emits; this only turns it into selectors, through the SAME
+     * inner/outer split and state selectors as the base rules, compiled in the Override context
+     * (a CSS initial value undoes the wider rule there, so it must not be dropped).
+     *
+     * @param styleProps  The node's full BASE style map (raw — virtual traits not yet composed).
+     */
+    upsertResponsive(nodeId, styleProps, stateStyles, responsive) {
+        if (!nodeId)
+            return;
+        const hasOverrides = !!responsive && Object.keys(responsive).length > 0;
+        // The common case — a node with no overrides that never had any — costs nothing.
+        if (!hasOverrides && !this.responsiveInputs.has(nodeId))
+            return;
+        if (hasOverrides)
+            this.responsiveInputs.set(nodeId, { styleProps, stateStyles, responsive: responsive });
+        else
+            this.responsiveInputs.delete(nodeId);
+        this.emitResponsive(nodeId);
+        this.flush();
+    }
+    emitResponsive(nodeId) {
+        this.clearResponsive(nodeId);
+        const input = this.responsiveInputs.get(nodeId);
+        if (!input)
+            return;
+        for (const layer of planResponsiveRules(input.styleProps, input.stateStyles, input.responsive)) {
+            const bp = layer.breakpoint;
+            // Where `width` lands depends on the position in force AT this breakpoint.
+            const outOfFlow = this.isOutOfFlow(resolveStyleProps(input.styleProps, input.responsive, bp));
+            const { main, marker } = this.nodeRuleCss(nodeId, layer.styleProps, outOfFlow, DeclarationContext.Override);
+            if (main)
+                this.setResponsiveRule(nodeId, bp, nodeId, main);
+            if (marker)
+                this.setResponsiveRule(nodeId, bp, `${nodeId}::marker`, marker);
+            for (const [state, map] of Object.entries(layer.stateStyles)) {
+                const scope = this.stateScopes.get(`${nodeId}:${state}`);
+                const selector = this.stateSelector(nodeId, state, scope?.relativeToId, scope?.triggerId);
+                // A relational/targeted state whose scope isn't known yet is skipped; it is re-emitted
+                // when the base state rule arrives with its scope (see upsert).
+                const css = selector ? this.compile(selector, map, DeclarationContext.Override) : '';
+                if (css)
+                    this.setResponsiveRule(nodeId, bp, `${nodeId}:${state}`, css);
+            }
         }
+    }
+    setResponsiveRule(nodeId, bp, key, css) {
+        let bucket = this.responsiveRules.get(bp);
+        if (!bucket)
+            this.responsiveRules.set(bp, (bucket = new Map()));
+        bucket.set(key, css);
+        let owned = this.responsiveKeys.get(nodeId);
+        if (!owned)
+            this.responsiveKeys.set(nodeId, (owned = []));
+        owned.push([bp, key]);
+    }
+    clearResponsive(nodeId) {
+        for (const [bp, key] of this.responsiveKeys.get(nodeId) ?? [])
+            this.responsiveRules.get(bp)?.delete(key);
+        this.responsiveKeys.delete(nodeId);
+    }
+    isOutOfFlow(styles) {
         const pos = String(styles['position'] ?? '');
-        const isOutOfFlow = pos === 'fixed' || pos === 'absolute';
+        return pos === 'fixed' || pos === 'absolute';
+    }
+    /**
+     * The selector BODY (no leading dot) for a state rule, or null when a relational / targeted
+     * state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     */
+    stateSelector(nodeId, state, relativeToId, triggerId) {
+        // Targeted states (trigger-hover): the styled node restyles when an ARBITRARY chosen
+        // element is hovered. The selector is `:has()`-scoped to `relativeToId` (the nearest
+        // common ancestor of styled + trigger) so it stays repetition-safe with one shared rule.
+        if (TARGETED_STATES.includes(state)) {
+            const base = TARGETED_STATE_BASE[state];
+            return relativeToId && triggerId && base
+                ? buildTargetedStateSelector(relativeToId, triggerId, nodeId, base) : null;
+        }
+        // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
+        // and cascades to this element. Requires the ancestor's css id.
+        if (RELATIONAL_STATES.includes(state)) {
+            const base = RELATIONAL_STATE_BASE[state];
+            return relativeToId && base ? `iox-node-${relativeToId}:${base} .iox-node-${nodeId}` : null;
+        }
+        // Structural pseudo-classes (first-child, last-child, nth-child) target the
+        // outer wrapper element so they participate correctly in grid/flex layout.
+        const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
+        return `${prefix}-${nodeId}:${state}`;
+    }
+    /**
+     * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
+     * `isOutOfFlow` is passed in rather than read from `styles` because a breakpoint layer is
+     * sparse — the position in force may come from a wider layer.
+     */
+    nodeRuleCss(nodeId, styles, isOutOfFlow, context) {
+        // ::marker pseudo-element — emitted as a separate rule, not part of inner/outer split.
+        const markerStyles = styles['__markerStyles'];
+        const marker = markerStyles && Object.keys(markerStyles).length
+            ? this.compile(`iox-node-${nodeId}::marker`, markerStyles, context) : '';
         const inner = {};
         const outer = {};
         for (const [k, v] of Object.entries(styles)) {
@@ -3031,20 +3250,14 @@ class StyleRegistryService {
                 inner[k] = v;
             }
         }
-        // Ensure fixed/absolute elements stay visible when no explicit width is set
-        if (isOutOfFlow && inner['width'] === undefined) {
+        // Ensure fixed/absolute elements stay visible when no explicit width is set. A base-rule
+        // render default only — a sparse breakpoint layer must not invent a width.
+        if (context === DeclarationContext.Base && isOutOfFlow && inner['width'] === undefined) {
             inner['width'] = '100%';
         }
-        const innerCss = this.compile(`iox-node-${nodeId}`, inner);
-        const outerCss = this.compile(`iox-outer-${nodeId}`, outer);
-        const combined = [innerCss, outerCss].filter(Boolean).join('\n');
-        if (combined) {
-            this.rules.set(nodeId, combined);
-        }
-        else {
-            this.rules.delete(nodeId);
-        }
-        this.flush();
+        const innerCss = this.compile(`iox-node-${nodeId}`, inner, context);
+        const outerCss = this.compile(`iox-outer-${nodeId}`, outer, context);
+        return { main: [innerCss, outerCss].filter(Boolean).join('\n'), marker };
     }
     /**
      * Write the org-level design token variables as a `:root { … }` block.
@@ -3074,20 +3287,30 @@ class StyleRegistryService {
                 this.rules.delete(key);
             }
         }
+        for (const key of this.stateScopes.keys()) {
+            if (key.startsWith(`${nodeId}:`))
+                this.stateScopes.delete(key);
+        }
+        this.responsiveInputs.delete(nodeId);
+        this.clearResponsive(nodeId);
         this.flush();
     }
     destroy() {
         this.rules.clear();
+        this.responsiveRules.clear();
+        this.responsiveInputs.clear();
+        this.responsiveKeys.clear();
+        this.stateScopes.clear();
         if (this.styleEl) {
             this.styleEl.remove();
             this.styleEl = null;
         }
     }
-    compile(className, styles) {
+    compile(className, styles, context = DeclarationContext.Base) {
         // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
         // the shared style-compiler so the SSR engine produces byte-identical output.
         // The inner/outer partition + selector emission stay here (builder-only concern).
-        const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS);
+        const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS, context);
         if (!decls.length)
             return '';
         const body = decls.map(d => `  ${d};`).join('\n');
@@ -3106,7 +3329,13 @@ class StyleRegistryService {
             const rest = Array.from(this.rules.entries())
                 .filter(([k]) => k !== '__tokens__')
                 .map(([, v]) => v);
-            this.styleEl.textContent = [tokenBlock, ...rest].filter(Boolean).join('\n');
+            // Breakpoint rules LAST, widest → narrowest, each as a canvas container query.
+            const breakpoints = BREAKPOINTS
+                .map(({ id }) => this.responsiveRules.get(id))
+                .map((bucket, i) => bucket?.size
+                ? wrapInBreakpointQuery(BREAKPOINTS[i].id, Array.from(bucket.values()).join('\n'), BreakpointQueryKind.Container, BUILDER_CANVAS_CONTAINER)
+                : '');
+            this.styleEl.textContent = [tokenBlock, ...rest, ...breakpoints].filter(Boolean).join('\n');
             this.changes$.next();
         });
     }
@@ -3753,12 +3982,17 @@ class RenderDirective {
             const composedBase = composeVirtualTraits(initialStyle);
             this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
-            if (node.stateStyles) {
+            // Every state set at base OR at any breakpoint — so a breakpoint-only state (a Mobile-only
+            // parent-hover) still has its scope resolved and recorded for its breakpoint rule.
+            const stateNames = stateNamesIn(node.stateStyles, node.responsive);
+            if (stateNames.length) {
                 const childEl = componentRef.location?.nativeElement;
-                for (const state of Object.keys(node.stateStyles)) {
-                    const stateMap = node.stateStyles[state];
-                    if (!stateMap || !Object.keys(stateMap).length)
-                        continue;
+                for (const state of stateNames) {
+                    const baseMap = node.stateStyles?.[state] ?? {};
+                    // A state set only at a breakpoint has no base rule: upsert an EMPTY map (records the
+                    // scope, emits nothing) rather than composing an empty override against the base,
+                    // which would re-declare the base's transform/filter as a pointless hover rule.
+                    const stateMap = Object.keys(baseMap).length ? baseMap : null;
                     if (RELATIONAL_STATES.includes(state)) {
                         // Relational states (parent-hover) compile to
                         // `.iox-node-{parentId}:hover .iox-node-{childId}` — they need the CURRENT parent id.
@@ -3769,7 +4003,7 @@ class RenderDirective {
                         const relativeToId = this.resolveParentNodeId(childEl);
                         if (!relativeToId)
                             continue;
-                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, relativeToId);
+                        this.styleRegistry.upsert(cssId, stateMap ? composeVirtualTraits(stateMap, initialStyle) : {}, state, relativeToId);
                     }
                     else if (TARGETED_STATES.includes(state)) {
                         // Targeted states (trigger-hover) compile to a `:has()` scoped to the nearest
@@ -3784,13 +4018,15 @@ class RenderDirective {
                         const scopeId = this.resolveTargetedScopeId(childEl, triggerCssId);
                         if (!scopeId)
                             continue;
-                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, scopeId, triggerCssId);
+                        this.styleRegistry.upsert(cssId, stateMap ? composeVirtualTraits(stateMap, initialStyle) : {}, state, scopeId, triggerCssId);
                     }
-                    else {
+                    else if (stateMap) {
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
                     }
                 }
             }
+            // Breakpoint layers — AFTER the state loop, so every scope resolved above is recorded.
+            this.styleRegistry.upsertResponsive(cssId, initialStyle, node.stateStyles, node.responsive);
         }
         // Set nodeId — declared as @Input() on every builder component.
         if (cssId) {
@@ -4145,6 +4381,14 @@ class OverlayComponent {
         if (this.selectEntry)
             this.toolbarAction.emit({ action: ToolbarAction.SelectParent, entry: this.selectEntry });
     }
+    /** Quick-add (B2): open the components panel. The new element lands inside this node when it is
+     *  a container, otherwise right after it. */
+    onAddElement(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.selectEntry)
+            this.toolbarAction.emit({ action: ToolbarAction.AddElement, entry: this.selectEntry });
+    }
     onDuplicate(event) {
         event.stopPropagation();
         if (this.selectEntry)
@@ -4514,11 +4758,11 @@ class OverlayComponent {
         return `polygon(evenodd, 0px 0px, ${w}px 0px, ${w}px ${h}px, 0px ${h}px, 0px 0px, ${x1}px ${y1}px, ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px)`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, deps: [{ token: OverlayService }, { token: ViewportService }, { token: PresetRegistryService }, { token: SymbolRegistryService }, { token: InteractionPresetRegistryService }, { token: InteractionEngineService }, { token: BuilderClipboardService }, { token: StyleRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: OverlayComponent, isStandalone: false, selector: "app-overlay", outputs: { toolbarAction: "toolbarAction" }, ngImport: i0, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
+            args: [{ selector: 'app-overlay', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-root\">\n\n    <!-- HOVER \u2014 Chrome DevTools-style rings (content area stays transparent) -->\n    <ng-container *ngIf=\"hoverEntry\">\n        <div class=\"hi-outline\"  [ngStyle]=\"hiOutlineStyle\"></div>\n        <div class=\"hi-margin\"   [ngStyle]=\"hiMarginStyle\"></div>\n        <div class=\"hi-padding\"  [ngStyle]=\"hiPaddingStyle\"></div>\n    </ng-container>\n\n    <!-- SELECT \u2014 IOX pink outline + toolbar -->\n    <div class=\"select-outline\" *ngIf=\"selectEntry\" [ngStyle]=\"selectOutlineStyle\">\n\n        <!-- Preset badges container \u2014 below the outline, start-aligned -->\n        <div class=\"preset-badge\" *ngIf=\"selectedPresetName || interactions.length\">\n            <div *ngIf=\"selectedPresetName\"\n                 class=\"preset-badge__item\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'style'\"\n                 title=\"Style preset: {{ selectedPresetName }} \u2014 click to edit, right-click to copy\"\n                 (mousedown)=\"onEditPreset($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'style')\">\n                <i class=\"ph-fill ph-paint-bucket\"></i>\n                <span>{{ selectedPresetName }}</span>\n            </div>\n            <div *ngFor=\"let ix of interactions\"\n                 class=\"preset-badge__item preset-badge__item--interaction\"\n                 [class.preset-badge__item--active]=\"activeBadgeType === 'interaction'\"\n                 [title]=\"triggerLabel(ix.trigger) + ': ' + actionLabel(ix) + ' \u2014 click to edit, right-click to remove'\"\n                 (mousedown)=\"onEditInteractionPreset($event, ix)\"\n                 (click)=\"onBadgeClickSwallow($event)\"\n                 (contextmenu)=\"onBadgeContextMenu($event, 'interaction', ix)\">\n                <i [class]=\"triggerIcon(ix.trigger)\"></i>\n                <span>{{ triggerLabel(ix.trigger) }}: {{ actionLabel(ix) }}</span>\n            </div>\n        </div>\n\n        <div class=\"select-toolbar\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n\n            <!-- Drag handle \u2014 grab here to move the selected element. A click-and-hold ANYWHERE\n                 on the element body would otherwise grab whatever nested child the pointer lands\n                 on; DragEngineService redirects any drag starting here to the selected node. -->\n            <button *ngIf=\"selectEntry?.node\" class=\"toolbar-btn toolbar-btn--drag-handle\"\n                    ioxDraggable data-iox-drag-handle\n                    [ioxDragData]=\"selectEntry?.node\"\n                    [ioxDragSourceId]=\"dragHandleSourceId\"\n                    title=\"Drag to move\">\n                <i class=\"ph-thin ph-dots-six-vertical\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Component name -->\n            <span class=\"toolbar-name\">{{ selectEntry?.componentName }}</span>\n            <span class=\"toolbar-sep\"></span>\n\n            <!-- Quick actions -->\n            <button *ngIf=\"isSliderContainer\" class=\"toolbar-btn toolbar-btn--add-slide\" title=\"Add slide\" (mousedown)=\"onAddSlide($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n                <span class=\"toolbar-btn__label\">Add slide</span>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Add an element here\" aria-label=\"Add an element here\" (mousedown)=\"onAddElement($event)\">\n                <i class=\"ph-thin ph-plus\"></i>\n            </button>\n            <button class=\"toolbar-btn\" title=\"Duplicate\" (mousedown)=\"onDuplicate($event)\">\n                <i class=\"ph-thin ph-copy\"></i>\n            </button>\n            <button *ngIf=\"hasInteractions\" class=\"toolbar-btn toolbar-btn--play\" title=\"Play animations\" (mousedown)=\"onPlay($event)\">\n                <i class=\"ph-thin ph-play\"></i>\n            </button>\n            <button *ngIf=\"isLinkedSymbol\" class=\"toolbar-btn toolbar-btn--symbol\"\n                    [title]=\"(linkedSymbolName ? linkedSymbolName : 'Symbol') + ' \u2014 click to detach'\"\n                    (mousedown)=\"onDetachSymbol($event)\">\n                <i class=\"ph-thin ph-link\"></i>\n                <span class=\"toolbar-btn__label\">{{ linkedSymbolName || 'Symbol' }}</span>\n            </button>\n            <button *ngIf=\"isDetachedSymbol\" class=\"toolbar-btn toolbar-btn--resync\"\n                    title=\"Detached \u2014 click to re-link\"\n                    (mousedown)=\"onResyncSymbol($event)\">\n                <i class=\"ph-thin ph-link-break\"></i>\n                <span class=\"toolbar-btn__label\">Detached</span>\n            </button>\n            <button class=\"toolbar-btn toolbar-btn--danger\" title=\"Delete\" (mousedown)=\"onDelete($event)\">\n                <i class=\"ph-thin ph-trash\"></i>\n            </button>\n            <span class=\"toolbar-sep\"></span>\n            <button class=\"toolbar-btn\" title=\"Select parent\" (mousedown)=\"onSelectParent($event)\">\n                <i class=\"ph-thin ph-arrow-up\"></i>\n            </button>\n\n            <!-- More menu trigger \u2014 opens a fixed-position dropdown at the cursor -->\n            <button class=\"toolbar-btn toolbar-btn--more\" title=\"More actions\" (mousedown)=\"onToggleMore($event)\">\n                <i class=\"ph-thin ph-dots-three\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Shared more/context menu \u2014 fixed-position, opened by \u22EF button or right-click -->\n    <div *ngIf=\"moreMenuVisible\" class=\"toolbar-more-dropdown\" [ngStyle]=\"moreMenuStyle\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <button class=\"more-item\" (mousedown)=\"onSelectParent($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-arrow-up\"></i>\n            Select parent\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onDuplicate($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-copy\"></i>\n            Duplicate\n        </button>\n        <div *ngIf=\"canWrap\" class=\"more-item-submenu\"\n             (mouseenter)=\"wrapSubmenuOpen = true\" (mouseleave)=\"wrapSubmenuOpen = false\">\n            <button class=\"more-item\" (mousedown)=\"$event.stopPropagation()\">\n                <i class=\"ph-thin ph-selection-plus\"></i>\n                Wrap in\n                <i class=\"ph-thin ph-caret-right more-item__chevron\"></i>\n            </button>\n            <div *ngIf=\"wrapSubmenuOpen\" class=\"more-submenu-flyout\">\n                <button *ngFor=\"let target of wrapTargets\" class=\"more-item\"\n                        (mousedown)=\"onWrap($event, target.type); closeMoreMenu()\">\n                    <i [class]=\"target.icon\"></i>\n                    {{ target.label }}\n                </button>\n            </div>\n        </div>\n        <button class=\"more-item more-item--danger\" (mousedown)=\"onDelete($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-trash\"></i>\n            Delete\n        </button>\n        <div class=\"more-divider\"></div>\n        <button class=\"more-item\" (mousedown)=\"onCopyNode($event)\">\n            <i class=\"ph-thin ph-scissors\"></i>\n            Copy element\n        </button>\n        <button *ngIf=\"hasCopiedNode\" class=\"more-item\" (mousedown)=\"onPasteNode($event)\">\n            <i class=\"ph-thin ph-clipboard\"></i>\n            Paste element\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"selectEntry?.node?.stylePresetId\" class=\"more-item\" (mousedown)=\"onCopyPreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Copy style preset\n        </button>\n        <button *ngIf=\"hasPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPastePreset($event)\">\n            <i class=\"ph-thin ph-paint-bucket\"></i>\n            Paste style preset\n        </button>\n        <button *ngIf=\"selectEntry?.node?.interactionPresetId\" class=\"more-item\" (mousedown)=\"onCopyInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Copy interaction preset\n        </button>\n        <button *ngIf=\"hasInteractionPresetInClipboard\" class=\"more-item\" (mousedown)=\"onPasteInteractionPreset($event)\">\n            <i class=\"ph-thin ph-lightning\"></i>\n            Paste interaction preset\n        </button>\n        <div class=\"more-divider\"></div>\n        <button *ngIf=\"isLinkedSymbol\" class=\"more-item\" (mousedown)=\"onDetachSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link-break\"></i>\n            Detach from symbol<ng-container *ngIf=\"linkedSymbolName\"> ({{ linkedSymbolName }})</ng-container>\n        </button>\n        <button *ngIf=\"isDetachedSymbol\" class=\"more-item more-item--resync\" (mousedown)=\"onResyncSymbol($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-link\"></i>\n            Re-link to symbol\n        </button>\n        <button class=\"more-item\" (mousedown)=\"onSaveAsBlock($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-bookmark\"></i>\n            Save as reusable block\n        </button>\n        <button *ngIf=\"hasInteractions\" class=\"more-item more-item--play\" (mousedown)=\"onPlay($event); closeMoreMenu()\">\n            <i class=\"ph-thin ph-play\"></i>\n            Play animations\n        </button>\n        <div class=\"more-divider\"></div>\n        <ng-container *ngIf=\"!selectedNodeIsGlobal; else removeGlobalItem\">\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'before')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (Before Content)\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onMakeGlobal($event, 'after')\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Make Global (After Content)\n            </button>\n        </ng-container>\n        <ng-template #removeGlobalItem>\n            <button class=\"more-item\" (mousedown)=\"onRemoveGlobal($event)\">\n                <i class=\"ph-thin ph-globe\"></i>\n                Remove from Global\n            </button>\n        </ng-template>\n    </div>\n\n    <!-- Backdrop to close the more menu -->\n    <div *ngIf=\"moreMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeMoreMenu()\">\n    </div>\n\n    <!-- Badge context menu \u2014 options differ by badge type -->\n    <div *ngIf=\"badgeMenuVisible\" class=\"badge-context-menu\"\n         [ngStyle]=\"{ top: badgeMenuPos.y + 'px', left: badgeMenuPos.x + 'px' }\"\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n        <ng-container *ngIf=\"badgeMenuType === 'style'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeCopy()\">\n                <i class=\"ph-thin ph-copy\"></i>\n                Copy preset\n            </button>\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit preset\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"badgeMenuType === 'interaction'\">\n            <button class=\"more-item\" (mousedown)=\"onBadgeEdit()\">\n                <i class=\"ph-thin ph-pencil-simple\"></i>\n                Edit in panel\n            </button>\n            <button class=\"more-item more-item--danger\" (mousedown)=\"onBadgeRemoveInteraction()\">\n                <i class=\"ph-thin ph-trash\"></i>\n                Remove interaction\n            </button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"badgeMenuVisible\" class=\"overlay-context-backdrop\"\n         (mousedown)=\"closeBadgeMenu()\">\n    </div>\n\n</div>\n", styles: [":host{display:block;position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible}.hi-outline,.hi-margin,.hi-padding{position:fixed;pointer-events:none;transition:none;box-sizing:border-box}.hi-outline{box-shadow:inset 0 0 0 1.5px #cb9090}.hi-margin{background:#f6b23361}.hi-padding{background:#60c38366}.select-outline{position:fixed;z-index:999;box-shadow:inset 0 0 0 1px #cb9090;pointer-events:none;transition:none;overflow:visible;will-change:transform;box-sizing:border-box}.select-toolbar{position:absolute;top:0;left:0;transform:translateY(-100%);display:flex;align-items:center;background:#cb9090;border-radius:3px 3px 0 0;pointer-events:all;white-space:nowrap;overflow:visible}.select-toolbar .toolbar-name{padding:0 8px;font-size:11px;font-weight:500;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:22px}.select-toolbar .toolbar-sep{width:1px;height:14px;background:#ffffff59;margin:0 2px;flex-shrink:0}.select-toolbar .toolbar-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .15s;flex-shrink:0}.select-toolbar .toolbar-btn:hover{background:#ffffff2e}.select-toolbar .toolbar-btn--danger:hover{background:#c8323259}.select-toolbar .toolbar-btn--drag-handle{cursor:grab}.select-toolbar .toolbar-btn--drag-handle:active{cursor:grabbing}.select-toolbar .toolbar-btn--symbol{width:auto;padding:0 7px;gap:4px;color:#fff;background:#f59e0b;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--symbol:hover{background:#d97706}.select-toolbar .toolbar-btn--resync{width:auto;padding:0 7px;gap:4px;color:#fff;background:#22c55e;border-radius:3px;font-size:11px}.select-toolbar .toolbar-btn--resync:hover{background:#16a34a}.select-toolbar .toolbar-btn .toolbar-btn__label{font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-toolbar .toolbar-btn--more{border-radius:0 3px 0 0}.toolbar-more-dropdown{position:fixed;z-index:1000;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:200px;pointer-events:all}.toolbar-more-dropdown .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;border:none;background:transparent;font-size:13px;color:var(--p-text-color, #333);cursor:pointer;text-align:left;white-space:nowrap}.toolbar-more-dropdown .more-item i{font-size:14px}.toolbar-more-dropdown .more-item:hover{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item--danger{color:#c84040}.toolbar-more-dropdown .more-item--danger:hover{background:#c8404014}.toolbar-more-dropdown .more-item--play{color:var(--p-text-color, #333)}.toolbar-more-dropdown .more-item--resync{color:#22c55e}.toolbar-more-dropdown .more-item--resync:hover{background:#22c55e14}.toolbar-more-dropdown .more-divider{height:1px;background:var(--p-surface-200, #e5e7eb);margin:4px 0}.toolbar-more-dropdown .more-item-submenu{position:relative}.toolbar-more-dropdown .more-item-submenu .more-item__chevron{margin-inline-start:auto;font-size:12px;opacity:.6}.toolbar-more-dropdown .more-item-submenu:hover>.more-item{background:var(--p-surface-100, #f5f5f5)}.toolbar-more-dropdown .more-item-submenu .more-submenu-flyout{position:absolute;top:-4px;inset-inline-start:100%;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:180px;z-index:1001}.preset-badge{position:absolute;bottom:-26px;inset-inline-start:0;display:flex;align-items:center;gap:4px;pointer-events:none;white-space:nowrap}.preset-badge__item{display:flex;align-items:center;gap:5px;padding:3px 9px;background:#cb9090;color:#fff;font-size:11px;font-weight:500;border-radius:20px;pointer-events:all;cursor:pointer;box-shadow:0 2px 6px #0000002e;transition:background .15s,outline-color .15s;outline:2px solid transparent;outline-offset:2px}.preset-badge__item i{font-size:12px}.preset-badge__item:hover{background:#be7474}.preset-badge__item--active{outline-color:#ffffffd9}.preset-badge__item--interaction{background:#7a9ecb}.preset-badge__item--interaction:hover{background:#5d89c0}.badge-context-menu{position:fixed;z-index:1001;background:#fff;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:4px 0;min-width:160px;pointer-events:all}.badge-context-menu .more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:transparent;font-size:12px;color:#333;cursor:pointer;text-align:start;white-space:nowrap}.badge-context-menu .more-item:hover{background:var(--p-surface-50, #f9fafb)}.badge-context-menu .more-item i{font-size:13px;color:#888}.overlay-context-backdrop{position:fixed;inset:0;z-index:998;pointer-events:all}\n"] }]
         }], ctorParameters: () => [{ type: OverlayService }, { type: ViewportService }, { type: PresetRegistryService }, { type: SymbolRegistryService }, { type: InteractionPresetRegistryService }, { type: InteractionEngineService }, { type: BuilderClipboardService }, { type: StyleRegistryService }, { type: PanelEventService }, { type: i0.ChangeDetectorRef }, { type: DragEngineService }], propDecorators: { toolbarAction: [{
                 type: Output
             }] } });
@@ -4526,7 +4770,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 class ToolbarComponent {
     constructor() {
         this.activeMode = BuilderMode.Select;
-        this.activeDevice = DeviceMode.Desktop;
+        this.activeBreakpoint = Breakpoint.Base;
+        /** Overrides per breakpoint — for the selection, or the page when nothing is selected. */
+        this.breakpointCounts = {};
         this.activeZoom = 100;
         this.activeScreenWidth = 1440;
         this.canUndo = false;
@@ -4534,7 +4780,7 @@ class ToolbarComponent {
         this.isSaving = false;
         this.pageStatus = 'draft';
         this.modeChange = new EventEmitter();
-        this.deviceChange = new EventEmitter();
+        this.breakpointChange = new EventEmitter();
         this.zoomChange = new EventEmitter();
         this.screenWidthChange = new EventEmitter();
         this.undo = new EventEmitter();
@@ -4543,8 +4789,14 @@ class ToolbarComponent {
         this.preview = new EventEmitter();
         this.publishToggle = new EventEmitter();
         this.modes = BuilderMode;
-        this.deviceModes = DeviceMode;
-        this.deviceOptions = DEVICE_OPTIONS;
+        this.breakpointIds = Breakpoint;
+        /** Built once — the breakpoint set is fixed. Template binds fields, never method calls. */
+        this.breakpointOptions = BREAKPOINTS.map(def => ({
+            id: def.id,
+            label: def.label,
+            range: def.maxWidth === null ? 'default' : `≤ ${def.maxWidth}px`,
+            ...BREAKPOINT_PRESENTATION[def.id],
+        }));
         this.zoomOptions = ZOOM_OPTIONS;
         this.screenWidthOptions = SCREEN_WIDTH_OPTIONS;
     }
@@ -4567,9 +4819,6 @@ class ToolbarComponent {
             default: return 'Select';
         }
     }
-    get activeDeviceOption() {
-        return this.deviceOptions.find(d => d.mode === this.activeDevice) || this.deviceOptions[0];
-    }
     get zoomLabel() {
         return `${this.activeZoom}%`;
     }
@@ -4586,15 +4835,10 @@ class ToolbarComponent {
         }
         this.modePopover.hide();
     }
-    // ── Device ──────────────────────────────────────────────
-    toggleDevicePopover(event) {
-        this.devicePopover.toggle(event);
-    }
-    selectDevice(mode) {
-        if (this.activeDevice !== mode) {
-            this.deviceChange.emit(mode);
-        }
-        this.devicePopover.hide();
+    // ── Breakpoint ──────────────────────────────────────────
+    selectBreakpoint(bp) {
+        if (this.activeBreakpoint !== bp)
+            this.breakpointChange.emit(bp);
     }
     // ── Zoom slider ──────────────────────────────────────────
     onSliderChange(event) {
@@ -4620,14 +4864,16 @@ 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", activeDevice: "activeDevice", activeZoom: "activeZoom", activeScreenWidth: "activeScreenWidth", canUndo: "canUndo", canRedo: "canRedo", isSaving: "isSaving", pageStatus: "pageStatus" }, outputs: { modeChange: "modeChange", deviceChange: "deviceChange", zoomChange: "zoomChange", screenWidthChange: "screenWidthChange", undo: "undo", redo: "redo", save: "save", preview: "preview", publishToggle: "publishToggle" }, viewQueries: [{ propertyName: "modePopover", first: true, predicate: ["modePopover"], descendants: true }, { propertyName: "devicePopover", first: true, predicate: ["devicePopover"], 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 Device switcher (stateful) \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)=\"toggleDevicePopover($event)\"\n            [title]=\"activeDeviceOption.label\">\n        <i [class]=\"activeDeviceOption.icon\"></i>\n    </button>\n\n    <p-popover #devicePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let d of deviceOptions\"\n                    [class.is-active]=\"activeDevice === d.mode\"\n                    (click)=\"selectDevice(d.mode)\">\n                <i [class]=\"d.icon\"></i>\n                <span>{{ d.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Screen width \u2014 Desktop only \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (activeDevice === deviceModes.Desktop) {\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}.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", 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"] }] }); }
 }
 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 Device switcher (stateful) \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)=\"toggleDevicePopover($event)\"\n            [title]=\"activeDeviceOption.label\">\n        <i [class]=\"activeDeviceOption.icon\"></i>\n    </button>\n\n    <p-popover #devicePopover [appendTo]=\"'body'\" styleClass=\"toolbar-popover\">\n        <div class=\"popover-strip\">\n            <button class=\"popover-option\"\n                    *ngFor=\"let d of deviceOptions\"\n                    [class.is-active]=\"activeDevice === d.mode\"\n                    (click)=\"selectDevice(d.mode)\">\n                <i [class]=\"d.icon\"></i>\n                <span>{{ d.label }}</span>\n            </button>\n        </div>\n    </p-popover>\n\n    <!-- \u2500\u2500 Screen width \u2014 Desktop only \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    @if (activeDevice === deviceModes.Desktop) {\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}.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    <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"] }]
         }], propDecorators: { activeMode: [{
                 type: Input
-            }], activeDevice: [{
+            }], activeBreakpoint: [{
+                type: Input
+            }], breakpointCounts: [{
                 type: Input
             }], activeZoom: [{
                 type: Input
@@ -4643,7 +4889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], modeChange: [{
                 type: Output
-            }], deviceChange: [{
+            }], breakpointChange: [{
                 type: Output
             }], zoomChange: [{
                 type: Output
@@ -4662,9 +4908,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }], modePopover: [{
                 type: ViewChild,
                 args: ['modePopover']
-            }], devicePopover: [{
-                type: ViewChild,
-                args: ['devicePopover']
             }], zoomPopover: [{
                 type: ViewChild,
                 args: ['zoomPopover']
@@ -4956,8 +5199,8 @@ class BuilderComponent {
     handleToolbarModeChange(mode) {
         this.onModeChange(mode);
     }
-    handleToolbarDeviceChange(device) {
-        this.onDeviceChange(device);
+    handleToolbarBreakpointChange(bp) {
+        this.onBreakpointChange(bp);
     }
     handleToolbarZoomChange(value) {
         this.onZoomChange(value);
@@ -5076,7 +5319,11 @@ class BuilderComponent {
         this.panelTypes = PanelTypes;
         this.activeMode = BuilderMode.Select;
         this.builderModes = BuilderMode;
-        this.activeDevice = DeviceMode.Desktop;
+        /** The breakpoint being edited — derived from the canvas width by ViewportService. */
+        this.activeBreakpoint = Breakpoint.Base;
+        /** Overrides per breakpoint for the selection (or the whole page when nothing is selected) —
+         *  the breakpoint bar's dots. A field recomputed on change, never a getter (OnPush input). */
+        this.breakpointCounts = {};
         this.activeZoom = 100;
         this.activeScreenWidth = 1440;
         this.selectedItem = null;
@@ -5135,7 +5382,7 @@ class BuilderComponent {
         }));
         this.panelEventService.emit(PanelEventTypes.PANEL_OPEN, PanelTypes.STYLES);
         this.viewportSub = this.viewportService.state$.subscribe(state => {
-            this.activeDevice = state.device;
+            this.activeBreakpoint = state.breakpoint;
             this.activeZoom = Math.round(state.scale * 100);
             this.activeScreenWidth = state.width;
             this.dragEngine.setScale(state.scale);
@@ -5160,6 +5407,9 @@ class BuilderComponent {
             // globalOverlayRef is in the DOM before we try to set CSS vars on it.
             setTimeout(() => this.updatePreviewVh());
         }
+        // A newly loaded page: the bar's dots must reflect its overrides before anything is selected.
+        if (changes['layout'] || changes['globalElements'])
+            this.refreshBreakpointCounts();
     }
     ngAfterViewInit() {
         this.updatePreviewVh();
@@ -5450,8 +5700,8 @@ class BuilderComponent {
             this.panY = 0;
         }
     }
-    onDeviceChange(device) {
-        this.viewportService.setDevice(device);
+    onBreakpointChange(bp) {
+        this.viewportService.setBreakpoint(bp);
         this.panX = 0;
         this.panY = 0;
         this.autoFitViewport();
@@ -5537,6 +5787,7 @@ class BuilderComponent {
         this.selectedItem = null;
         this.selectedPath = [];
         this.overlayService.clearSelect();
+        this.refreshBreakpointCounts();
     }
     /** Breadcrumb crumb clicked — select that ancestor. Mirrors a layer-tree click. */
     onCrumbSelect(node) {
@@ -5608,6 +5859,12 @@ class BuilderComponent {
         if (!node)
             return;
         switch (action) {
+            case ToolbarAction.AddElement: {
+                // Quick-add: open the components panel. The insert target is the selection itself
+                // (inside a container, after a leaf) — see insertFromPanel.
+                this.activeSidebar = 'components';
+                break;
+            }
             case ToolbarAction.Delete: {
                 const result = this.findNodeInTree(node, this.layout) ?? this.findNodeInTree(node, this.globalElements);
                 if (result) {
@@ -5933,6 +6190,30 @@ class BuilderComponent {
         // array would make the OnPush input look changed on every change-detection pass.
         this.selectedPath = nodeAncestorPathInEither(this.layout, this.globalElements, node) ?? [node];
         this.panelEventService.emit(PanelEventTypes.ELEMENT_SELECT, { node, componentRef, symbolAncestor, repeaterAncestor, parentDisplay });
+        this.refreshBreakpointCounts();
+    }
+    /**
+     * Insert a components-panel payload at the position the SELECTION implies (B2):
+     * nothing selected → end of the page; a container → inside it; a leaf → right after it.
+     * `dropComplete$` then selects the new node and records the undo step, exactly as a drop does.
+     */
+    insertFromPanel(data) {
+        const inGlobals = !!nodeAncestorPath(this.globalElements, this.selectedItem);
+        const roots = inGlobals ? this.globalElements : this.layout;
+        let target = resolveInsertTarget(roots, this.selectedItem, n => this.dragEngine.isDropContainer(n.children));
+        // A selected TOP-LEVEL global element would make the new node its sibling — i.e. a second
+        // global element, which is not what "add an element" means. Put it on the page instead.
+        if (inGlobals && !target.parent) {
+            target = resolveInsertTarget(this.layout, null, n => this.dragEngine.isDropContainer(n.children));
+        }
+        if (!this.dragEngine.insertPayload(target.children, target.index, data))
+            return;
+        this.cdr.detectChanges();
+    }
+    refreshBreakpointCounts() {
+        this.breakpointCounts = this.selectedItem
+            ? nodeBreakpointCounts(this.selectedItem)
+            : treeBreakpointCounts(this.layout, this.globalElements);
     }
     /** Read a node's current `display` value. The style panel mutates `styleTraits` in place at edit
      *  time, so that is the live source of truth; fall back to a preset's `styleOverrides` map, then
@@ -5945,6 +6226,16 @@ class BuilderComponent {
         return node.styleOverrides?.['display'] ?? 'block';
     }
     handlePanelEvents(panelEvent) {
+        // Click-to-insert from the components panel (B2) — no drag, same node and same undo step.
+        if (panelEvent.type === PanelEventTypes.INSERT_COMPONENT) {
+            this.insertFromPanel(panelEvent.data);
+            return;
+        }
+        // Every style or structural edit — including a breakpoint override — emits LAYOUT_CHANGED.
+        if (panelEvent.type === PanelEventTypes.LAYOUT_CHANGED) {
+            this.refreshBreakpointCounts();
+            return;
+        }
         if (panelEvent.type === PanelEventTypes.PANEL_CLOSE) {
             this.isPanelOpen = false;
             return;
@@ -5954,11 +6245,11 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: 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            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i15.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i16.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeDevice", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "deviceChange", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "nodePeek"] }] }); }
+    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"] }] }); }
 }
 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            [activeDevice]=\"activeDevice\"\n            [activeZoom]=\"activeZoom\"\n            [activeScreenWidth]=\"activeScreenWidth\"\n            [isSaving]=\"isSaving\"\n            [pageStatus]=\"pageStatus\"\n            [canUndo]=\"canUndo\"\n            [canRedo]=\"canRedo\"\n            (modeChange)=\"handleToolbarModeChange($event)\"\n            (deviceChange)=\"handleToolbarDeviceChange($event)\"\n            (zoomChange)=\"handleToolbarZoomChange($event)\"\n            (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n            (save)=\"save.emit()\"\n            (preview)=\"preview.emit()\"\n            (publishToggle)=\"publishToggle.emit()\"\n            (undo)=\"undo.emit()\"\n            (redo)=\"redo.emit()\">\n        </app-toolbar>\n\n        <div class=\"panel-switcher\">\n            <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                <i class=\"ph-thin ph-plugs-connected\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                <i class=\"ph-thin ph-paint-brush\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                <i class=\"ph-thin ph-gear-six\"></i>\n            </button>\n            <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                <i class=\"ph-thin ph-lightning\"></i>\n            </button>\n        </div>                    \n    </header>\n\n    <app-breadcrumb-bar\n        [path]=\"selectedPath\"\n        (nodeSelect)=\"onCrumbSelect($event)\"\n        (nodePeek)=\"onCrumbPeek($event)\">\n    </app-breadcrumb-bar>\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <aside class=\"sidebar\">\n            <div *ngIf=\"activeSidebar === 'pages'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderPages]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'components'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderComponents]\"></ng-content>\n            </div>\n            <div *ngIf=\"activeSidebar === 'tokens'\" class=\"sidebar-slot\">\n                <ng-content select=\"[builderTokens]\"></ng-content>\n            </div>\n            <app-layer-tree *ngIf=\"activeSidebar === 'tree'\"\n                [layout]=\"layout\"\n                [globalElements]=\"globalElements\"\n                (nodeSelect)=\"onTreeNodeSelect($event)\"\n                (nodeAction)=\"onTreeNodeAction($event)\"\n                (nodeMove)=\"onTreeNodeMove()\"></app-layer-tree>\n        </aside>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <ng-container *ngFor=\"let item of layout\"\n                            [ioxRender]=\"item\"\n                            [ioxDragSourceId]=\"'canvas-preview'\"\n                            (onClick)=\"handleClick($event)\"\n                            (onMouseEnter)=\"handleMouseEnter($event)\"\n                            (onMouseLeave)=\"handleMouseLeave()\">\n                        </ng-container>\n                    </div>\n                </iox-page-component>\n            </div>\n            </div>\n        </main>\n\n        <ng-content select=\"[builderPanel]\"></ng-content>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .builder-header{background:var(--p-surface-0);padding:.375rem .75rem;border-bottom:1px solid var(--p-surface-200);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;flex-shrink:0}.builder .builder-header .header-back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--p-text-muted-color);font-size:16px;transition:background .15s ease-out;margin-inline-end:.25rem}.builder .builder-header .header-back:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .builder-header .header-page-name{flex:1;text-align:center;font-size:.8rem;font-weight:500;color:var(--p-text-muted-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:1rem}.builder .sidebar-switcher,.builder .panel-switcher{display:flex;gap:.25rem}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:6px;border:none;background:transparent;color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--p-surface-50);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:#cb9090;color:#fff}.builder .panel-switcher{justify-self:end}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.builder .sidebar{width:260px;min-width:260px;background:var(--p-surface-0);border-inline-end:1px solid var(--p-surface-200);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;transition:width .25s ease,transform .25s ease}.builder iox-page-component ::ng-deep .iox-page-wrapper{height:auto!important;overflow:visible!important}.builder #canvas-preview{background:#fff}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden}.builder .global-elements-overlay ::ng-deep>*{pointer-events:auto}.builder .preview-node.is-selected{cursor:grab}.builder .empty-state{min-height:240px;border:1px dashed var(--p-surface-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--p-text-muted-color);text-align:center;padding:1rem}.save-block-backdrop{position:fixed;inset:0;z-index:1000;background:#00000040}.save-block-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000002e;padding:24px;width:320px}.save-block-dialog .save-block-title{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--p-text-color, #333)}.save-block-dialog .save-block-input{width:100%;padding:8px 10px;border:1px solid var(--p-surface-300, #d1d5db);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;margin-bottom:16px}.save-block-dialog .save-block-input:focus{border-color:#cb9090;box-shadow:0 0 0 2px #cb909033}.save-block-dialog .save-block-actions{display:flex;justify-content:flex-end;gap:8px}::ng-deep .moveable-control-box.iox-moveable-silent{z-index:1000!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-line,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation,::ng-deep .moveable-control-box.iox-moveable-silent .moveable-rotation-line{display:none!important}::ng-deep .moveable-control-box.iox-moveable-silent .moveable-control{display:block!important;width:10px!important;height:10px!important;margin-top:-5px!important;margin-left:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+            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: [{
                 type: Input
             }], dataSources: [{
@@ -6153,9 +6444,11 @@ class BuilderContainerComponent {
     }
     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: `
+        <!-- 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">
-            <i class="ph-thin ph-square"></i>
-            <span>Drop components here</span>
+            <i class="ph-thin ph-plus"></i>
+            <span>Click to select, then add an element</span>
         </div>
 
         <!-- WRAPPER COLLAPSE (task 9c): render each child DIRECTLY — no .container-child wrapper. The
@@ -6174,9 +6467,11 @@ 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: `
+        <!-- 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">
-            <i class="ph-thin ph-square"></i>
-            <span>Drop components here</span>
+            <i class="ph-thin ph-plus"></i>
+            <span>Click to select, then add an element</span>
         </div>
 
         <!-- WRAPPER COLLAPSE (task 9c): render each child DIRECTLY — no .container-child wrapper. The
@@ -8772,5 +9067,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, findParentOf, flattenSchemaFields, generateNodeId, nodeAncestorPath, nodeAncestorPathInEither, resolveTraitControllerType, resolveTraitOptions, wrapNode };
+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, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EffectsGroupStyleConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, buildFullStyleTraits, buildPresetStyleTraits, defaultPageSettings, findNodeLocation, findParentOf, flattenSchemaFields, generateNodeId, nodeAncestorPath, nodeAncestorPathInEither, resolveTraitControllerType, resolveTraitOptions, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map