@vectoriox/iox-builder 4.37.3 → 5.0.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 i1 from '@vectoriox/iox-ui';
-import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, resolveFlavorDefaults, Breakpoint, BREAKPOINTS, countOverrides, setOverride, DEFAULT_FLAVOR, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, composeVirtualTraits, stateNamesIn, partClassName, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileTokenCssBlocks, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, composeVirtualTraits, stateNamesIn, partClassName, syncElementStyleMarker, resolveInputs, setInputOverride, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, resolveBoundValue, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule, PALETTE_PRESETS, PART_CLASS_NAMES } 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';
@@ -245,26 +245,6 @@ class ComponentConfig {
         }
     }
 }
-/**
- * Layer 2 of the flavor cascade (flavors plan §4), applied by the registry factory to every
- * BRAND-NEW element: overwrite matching styleTrait defaults with the pack's token references
- * (`var(--iox-<token>, <packValue>)`). Runs AFTER the subclass constructor, so a pack beats the
- * constructor's literals; the author's own edits (layer 4) beat everything as always. Self-
- * describing serialisation then writes the var into styleProps on save — which is why the
- * engine's `flavorDefaultDeclarations` only has to cover LEGACY nodes.
- */
-function applyFlavorDefaults(config, pack) {
-    const defaults = resolveFlavorDefaults(config.type, pack);
-    const names = Object.keys(defaults);
-    if (!names.length)
-        return;
-    for (const group of config.styleTraits) {
-        for (const trait of group.traits) {
-            if (defaults[trait.name] !== undefined)
-                trait.default = defaults[trait.name];
-        }
-    }
-}
 class TraitConfig {
     constructor(name, label, type, options, defaultValue, inline, showWhen, responsive) {
         this.name = name;
@@ -553,6 +533,14 @@ class TypographyGroupStyleConfig extends GroupStyleConfig {
             // completely (icons/glyph-only elements), which `0.5` used to block.
             new TraitConfig('lineHeight', 'Line Height', TraitInputType.Scrub, { min: 0, max: 5, step: 0.05, units: [''] }, '1.5'),
             new TraitConfig('letterSpacing', 'Spacing', TraitInputType.Scrub, { min: -5, max: 50, step: 0.5, units: UNITS_FIXED }, '0px'),
+            // DS2: element styles write `var(--iox-button-case)` / `var(--iox-case-label)` here.
+            // `none` is the CSS initial and a compiler no-op (T4), so it never leaks onto nodes.
+            new TraitConfig('textTransform', 'Case', TraitInputType.Select, [
+                { label: 'None', value: 'none' },
+                { label: 'UPPERCASE', value: 'uppercase' },
+                { label: 'lowercase', value: 'lowercase' },
+                { label: 'Capitalize', value: 'capitalize' },
+            ], 'none'),
             new TraitConfig('textAlign', '', TraitInputType.SelectButton, [
                 { value: 'left', icon: 'ph-thin ph-text-align-left' },
                 { value: 'center', icon: 'ph-thin ph-text-align-center' },
@@ -606,6 +594,9 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('filterInvert', 'Invert', TraitInputType.Range, { min: 0, max: 1, step: 0.05, showExtremes: false, showValue: true, compact: true }, '0'),
             // ── Backdrop filter (virtual — composed to CSS backdrop-filter: …)
             new TraitConfig('_sep_backdrop', 'Backdrop', TraitInputType.SectionLabel),
+            // DS2 whole-value backdrop (`var(--iox-card-backdrop)`, `blur(12px) saturate(1.4)`).
+            // When set it WINS over the composed controls below; `none` = unset and a no-op (T3).
+            new TraitConfig('backdropFilter', 'Filter', TraitInputType.Text, undefined, 'none'),
             new TraitConfig('backdropBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
             new TraitConfig('backdropBrightness', 'Brightness', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
             new TraitConfig('backdropContrast', 'Contrast', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
@@ -1558,16 +1549,39 @@ class ComponentRegistryService {
     hasComponent(type) {
         return !!this.components[type];
     }
+    /**
+     * A NEW element, born wearing its type's default element style (design-system plan §3e):
+     * the style's exact trait map goes into `styleTraits`, its hover/active/focus into
+     * `stateStyles`, its id into `elementStyle`. Flavor-independent — the look arrives through the
+     * org's tokens, so no pack is consulted here.
+     */
     createConfig(type) {
-        const configType = this.components[type]?.config;
-        if (!configType)
+        const config = this.createBaseConfig(type);
+        if (!config)
             return null;
-        const config = new configType();
-        // Flavor layer (F1): every new element is born wearing the pack's token references.
-        // DEFAULT_FLAVOR until F2 lets the org choose; see flavors-and-theming-plan.md §4.
-        applyFlavorDefaults(config, DEFAULT_FLAVOR);
+        const id = defaultElementStyleFor(type, traitValues(config));
+        if (id)
+            applyElementStyle(config, id);
         return config;
     }
+    /**
+     * The type's UNSTYLED config — constructor defaults only. For rebuilding a SAVED node (its own
+     * stored values decide its look; a pre-DS2 page must not silently adopt element styles) and as
+     * the baseline a switched-off style's traits fall back to.
+     */
+    createBaseConfig(type) {
+        const configType = this.components[type]?.config;
+        return configType ? new configType() : null;
+    }
+    /** The unstyled base style map of a type — `switchElementStyle`'s baseline. */
+    baselineStyleProps(type) {
+        const out = {};
+        for (const group of this.createBaseConfig(type)?.styleTraits ?? []) {
+            for (const trait of group.traits ?? [])
+                out[trait.name] = trait.default;
+        }
+        return out;
+    }
     register(type, component, config) {
         this.components[type] = { type, component, config };
     }
@@ -1580,6 +1594,12 @@ class ComponentRegistryService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ComponentRegistryService, decorators: [{
             type: Injectable
         }] });
+function traitValues(config) {
+    const out = {};
+    for (const trait of config.traits ?? [])
+        out[trait.name] = trait.default;
+    return out;
+}
 
 class OverlayService {
     constructor() {
@@ -1777,60 +1797,445 @@ function resolveDragTarget(el, selectedElement, isDragHandle) {
 }
 
 /**
- * SymbolRegistryService — in-memory store for org-level symbols.
+ * 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';
+/**
+ * The class that carries the ORG's design tokens on the canvas. Tokens used to be declared on
+ * `:root`, where they collided with the admin's own `--iox-*` chrome tokens (`accent`, `surface-2`,
+ * `scrim`, `focus-ring`… — DS2 seeds all 161 Crisp rows, so the clash became universal and the
+ * admin turned the studio's accent colour). Every surface that renders site content through this
+ * registry — the canvas frame, the global-elements overlay, preview, specimens — wears this class.
+ */
+const BUILDER_TOKEN_SCOPE_CLASS = 'iox-token-scope';
+/**
+ * StyleRegistryService — manages a single <style> tag for the builder canvas.
  *
- * Loaded once per page by PageUiComponent alongside the page layout.
- * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
+ * Each builder component gets two CSS classes:
+ *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
+ *                     (display, flex, background, border, padding, etc.)
+ *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
+ *                     properties that participate in the PARENT flow (margin,
+ *                     align-self, flex-grow/shrink/basis, order).
+ *
+ * This split is necessary because margin on an inner wrapper only adds internal
+ * space — it does not push sibling elements. Applying margin to the host element
+ * (which IS the flex/block child in the parent container) makes it work correctly.
+ *
+ * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
+ * and compiled to `.iox-node-{id}:hover { … }` selectors.
+ *
+ * Design tokens are compiled by the SHARED token compiler (`compileTokenCssBlocks`, design-core)
+ * scoped to `.iox-token-scope`: its base half (variables, scheme classes, reduced-motion and
+ * reduced-transparency blocks) is prepended to all other rules and its dark half appended LAST —
+ * the same two halves, in the same places, as the SSR engine.
+ *
+ * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
-class SymbolRegistryService {
+class StyleRegistryService {
     constructor() {
-        this.symbols = new Map();
-        /** symbolIds that have a live reusable block in the DB — used to guard isDetachedSymbol. */
-        this.blockSymbolIds = new Set();
+        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();
+        /** Node type per css id — the compiler strips the props a type's renderer owns (a Dialog's
+         *  positioning, an Icon's line-height) from EVERY rule of that node, whoever upserts it. */
+        this.nodeTypes = new Map();
+        this.tokenCss = { base: '', dark: '' };
+        this.styleEl = null;
+        this._flushPending = false;
     }
-    setSymbols(symbols) {
-        this.symbols.clear();
-        for (const s of symbols) {
-            this.symbols.set(s.id, s);
-        }
+    /**
+     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
+     * affect how the element participates in its PARENT layout (flex/block flow).
+     * Everything else goes to the INNER element (.iox-node-{id}).
+     *
+     * Exception — out-of-flow positioning (position:fixed/absolute):
+     * When position is fixed or absolute, width is redirected to the inner element
+     * (the positioned one) and a default width:100% is added if none is set, so the
+     * element stays visible. top/right/bottom/left/zIndex are always inner because
+     * they are co-ordinates of the positioned element, not the flow wrapper.
+     * position itself goes to inner with `!important` to beat component-scoped CSS.
+     */
+    static { this.OUTER_PROPS = new Set([
+        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
+        // Grid-child placement — like the flex-child props above, these position the node
+        // within the PARENT's grid, so they must land on the outer host, not the inner div.
+        'gridColumn', 'gridRow', 'justifySelf',
+        'width',
+    ]); }
+    /**
+     * Properties that need !important on the inner element to beat Angular's scoped-CSS
+     * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
+     * importance and the SSR engine never emits it — this is the builder's own fight with its
+     * scoped component styles. The A4 dialog centring clash this once caused is resolved
+     * structurally (the grid stage PLACES a static surface), so the set stays at exactly one
+     * documented member; adding to it needs the same scrutiny.
+     */
+    static { this.IMPORTANT_PROPS = new Set(['position']); }
+    init() {
+        this.styleEl = document.createElement('style');
+        this.styleEl.id = 'iox-runtime-styles';
+        document.head.appendChild(this.styleEl);
     }
-    getSymbol(id) {
-        return this.symbols.get(id);
+    /**
+     * Write or update the base styles for a node, or a pseudo-class state override.
+     *
+     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
+     * @param styles  Flat CSS property map (camelCase keys)
+     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
+     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
+     *                State rules are NOT partitioned into inner/outer.
+     * @param relativeToId  For RELATIONAL states (e.g. 'parent-hover') this is the ancestor
+     *                css id; compiles to `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     *                For TARGETED states (e.g. 'trigger-hover') this is the SCOPE css id
+     *                (nearest common ancestor of the styled node + trigger).
+     * @param triggerId  For TARGETED states only: the css id of the trigger node whose
+     *                pseudo-class drives the state. Compiles a `:has()`-scoped selector.
+     */
+    /** Record a node's type (RenderDirective, before its first upsert) and recompile nothing —
+     *  every later rule for the node is stripped of what the type's renderer owns. */
+    setNodeType(nodeId, type) {
+        if (nodeId && type)
+            this.nodeTypes.set(nodeId, type);
     }
-    getAll() {
-        return Array.from(this.symbols.values());
+    ownProps(nodeId, styles) {
+        const type = this.nodeTypes.get(nodeId);
+        return type ? stripSuppressedProps(type, styles) : styles;
     }
-    upsert(symbol) {
-        this.symbols.set(symbol.id, symbol);
+    upsert(nodeId, styles, state, relativeToId, triggerId) {
+        if (!nodeId)
+            return;
+        styles = this.ownProps(nodeId, styles);
+        if (state) {
+            const key = `${nodeId}:${state}`;
+            // 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
+                this.rules.delete(key);
+            if (this.responsiveInputs.has(nodeId))
+                this.emitResponsive(nodeId);
+            this.flush();
+            return;
+        }
+        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();
     }
-    remove(id) {
-        this.symbols.delete(id);
+    /**
+     * Write or clear the styles for one PART of a compound component (board 7 — "the failure
+     * design"), optionally further scoped to a validation state ('wrong'/'accepted'). Compiles
+     * through the exact same `compile()` every other rule uses — `buildPartSelector` (shared,
+     * `@vectoriox/iox-ui`) just builds a different selector string. Unlike interaction/relational/
+     * targeted states, a validation state compounds a CLASS onto the node (`.iox-invalid`), not a
+     * `:pseudo-class`, since `IoxFieldComponent` sets that class itself from `forceInvalid`/
+     * `showValid` — there is no real "wrong" pseudo-class to hook.
+     */
+    upsertPart(nodeId, partClassName, styles, state) {
+        if (!nodeId || !partClassName)
+            return;
+        const key = `${nodeId}:part:${partClassName}${state ? ':' + state : ''}`;
+        const validationClass = state ? VALIDATION_STATE_CLASS[state] : undefined;
+        const selector = buildPartSelector(nodeId, partClassName, validationClass);
+        const css = Object.keys(styles).length ? this.compile(selector, styles) : '';
+        if (css)
+            this.rules.set(key, css);
+        else
+            this.rules.delete(key);
+        this.flush();
     }
-    /** Set the symbolIds that have a live reusable block. Called on page load. */
-    setBlockSymbolIds(ids) {
-        this.blockSymbolIds = new Set(ids);
+    /**
+     * 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();
     }
-    /** Returns true only when the symbol has a live backing reusable block. */
-    isBlockSymbol(id) {
-        return this.blockSymbolIds.has(id);
+    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;
+            const layerProps = this.ownProps(nodeId, layer.styleProps);
+            // 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, layerProps, 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, this.ownProps(nodeId, map), DeclarationContext.Override) : '';
+                if (css)
+                    this.setResponsiveRule(nodeId, bp, `${nodeId}:${state}`, css);
+            }
+        }
     }
-    /** Remove a symbolId from the block-backed set (called when a block is deleted). */
-    removeBlockSymbolId(id) {
-        this.blockSymbolIds.delete(id);
+    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]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService, decorators: [{
-            type: Injectable
-        }] });
-
-/** Marks the overlay's dedicated drag-handle chrome (see overlay.component.html) — it carries no
- *  node of its own, so a drag started on it always redirects to whatever is currently selected. */
-const DRAG_HANDLE_ATTR = 'data-iox-drag-handle';
-// Ease-out-quint — fast start, precise stop, no overshoot. Used for FLIP sibling
-// reflow and the insertion indicator open/close. Deliberately NOT a spring/back
-// curve (e.g. cubic-bezier(0.34,1.56,0.64,1)): multiple siblings animating with
+    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'] ?? '');
+        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;
+        }
+        // Validation states (wrong/accepted, board 7) are not real CSS pseudo-classes — `:wrong`
+        // doesn't exist. Compound a CLASS instead, matching the host class IoxFieldComponent
+        // already sets from forceInvalid/showValid. Reuses buildPartSelector with no part, since
+        // "whole node, when wrong" is exactly that function's no-part case.
+        const validationClass = VALIDATION_STATE_CLASS[state];
+        if (validationClass)
+            return buildPartSelector(nodeId, undefined, validationClass);
+        // 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';
+        // `focus` compiles to :focus-visible (DS2) — shared with the engine via statePseudoClass.
+        return `${prefix}-${nodeId}:${statePseudoClass(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)) {
+            if (k === '__markerStyles')
+                continue;
+            const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
+            // width goes to inner for fixed/absolute (the positioned element owns its own width)
+            if (wantsOuter && !(isOutOfFlow && k === 'width')) {
+                outer[k] = v;
+            }
+            else {
+                inner[k] = v;
+            }
+        }
+        // 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, context);
+        const outerCss = this.compile(`iox-outer-${nodeId}`, outer, context);
+        return { main: [innerCss, outerCss].filter(Boolean).join('\n'), marker };
+    }
+    /**
+     * The org's design tokens on the canvas — through the SHARED compiler (`compileTokenCssBlocks`,
+     * design-core), scoped to `.iox-token-scope` (BUILDER_TOKEN_SCOPE_CLASS — never `:root`, which
+     * the admin's chrome tokens own). So the canvas gets exactly what the live site gets: the
+     * variables, the scheme classes, the reduced-motion / reduced-transparency blocks and the dark
+     * block, LAST. It used to be a hand-written copy that emitted variables and dark only.
+     * Pass the full row set every time (an empty list clears).
+     */
+    upsertTokens(tokens) {
+        this.tokenCss = compileTokenCssBlocks(tokens, { scope: `.${BUILDER_TOKEN_SCOPE_CLASS}` });
+        this.flush();
+    }
+    remove(nodeId) {
+        if (!nodeId)
+            return;
+        // Remove base rule and all state rules for this node
+        this.rules.delete(nodeId);
+        for (const key of this.rules.keys()) {
+            if (key.startsWith(`${nodeId}:`)) {
+                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.nodeTypes.delete(nodeId);
+        this.flush();
+    }
+    destroy() {
+        this.rules.clear();
+        this.responsiveRules.clear();
+        this.responsiveInputs.clear();
+        this.responsiveKeys.clear();
+        this.stateScopes.clear();
+        this.nodeTypes.clear();
+        this.tokenCss = { base: '', dark: '' };
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    }
+    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, context);
+        if (!decls.length)
+            return '';
+        const body = decls.map(d => `  ${d};`).join('\n');
+        return `.${className} {\n${body}\n}`;
+    }
+    flush() {
+        if (!this.styleEl || this._flushPending)
+            return;
+        this._flushPending = true;
+        requestAnimationFrame(() => {
+            this._flushPending = false;
+            if (!this.styleEl)
+                return;
+            // The token base first, so variables are available to all subsequent rules.
+            const rest = Array.from(this.rules.values());
+            // 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)
+                : '');
+            // …and the token dark half LAST (the appended-last contract the engine also keeps).
+            this.styleEl.textContent = [this.tokenCss.base, ...rest, ...breakpoints, this.tokenCss.dark].filter(Boolean).join('\n');
+            this.changes$.next();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * SymbolRegistryService — in-memory store for org-level symbols.
+ *
+ * Loaded once per page by PageUiComponent alongside the page layout.
+ * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
+ */
+class SymbolRegistryService {
+    constructor() {
+        this.symbols = new Map();
+        /** symbolIds that have a live reusable block in the DB — used to guard isDetachedSymbol. */
+        this.blockSymbolIds = new Set();
+    }
+    setSymbols(symbols) {
+        this.symbols.clear();
+        for (const s of symbols) {
+            this.symbols.set(s.id, s);
+        }
+    }
+    getSymbol(id) {
+        return this.symbols.get(id);
+    }
+    getAll() {
+        return Array.from(this.symbols.values());
+    }
+    upsert(symbol) {
+        this.symbols.set(symbol.id, symbol);
+    }
+    remove(id) {
+        this.symbols.delete(id);
+    }
+    /** Set the symbolIds that have a live reusable block. Called on page load. */
+    setBlockSymbolIds(ids) {
+        this.blockSymbolIds = new Set(ids);
+    }
+    /** Returns true only when the symbol has a live backing reusable block. */
+    isBlockSymbol(id) {
+        return this.blockSymbolIds.has(id);
+    }
+    /** Remove a symbolId from the block-backed set (called when a block is deleted). */
+    removeBlockSymbolId(id) {
+        this.blockSymbolIds.delete(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SymbolRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Marks the overlay's dedicated drag-handle chrome (see overlay.component.html) — it carries no
+ *  node of its own, so a drag started on it always redirects to whatever is currently selected. */
+const DRAG_HANDLE_ATTR = 'data-iox-drag-handle';
+// Ease-out-quint — fast start, precise stop, no overshoot. Used for FLIP sibling
+// reflow and the insertion indicator open/close. Deliberately NOT a spring/back
+// curve (e.g. cubic-bezier(0.34,1.56,0.64,1)): multiple siblings animating with
 // overshoot at once reads as jitter, not polish — reserve overshoot for single-
 // element motion (ghost drop-settle, a later phase).
 const MOTION_EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
@@ -2211,6 +2616,10 @@ class DragEngineService {
                 'margin:0',
             ].join(';');
             clone.classList.add('iox-drag-moving');
+            // The org's tokens are declared on the token scope (never :root), and <body> is outside
+            // it — so a ghost without the scope class resolved every var(--iox-…) to nothing and an
+            // element-styled button lost its fill and padding mid-drag (DS2 verification).
+            clone.classList.add(BUILDER_TOKEN_SCOPE_CLASS);
             document.body.appendChild(clone);
             this._overlay = clone;
             this._startGhostFollow(rect.left, rect.top);
@@ -3475,566 +3884,192 @@ class InteractionEngineService {
                 element.style.removeProperty('pointer-events');
                 element.removeAttribute('data-iox-hidden');
                 this.preStatedElements.delete(element);
-                // Builder: clear inline pre-state so cancelling animations later
-                // doesn't leave the element invisible after a play preview.
-                if (this.isBuilderMode())
-                    this.clearInlineAnimationStyles(element);
-            }).catch(() => { });
-        }
-        else if (this.EXIT_TYPES.has(action.type)) {
-            // Once the exit animation finishes the element is invisible —
-            // disable pointer events so it doesn't silently block clicks underneath it.
-            anim.finished.then(() => {
-                element.style.setProperty('pointer-events', 'none');
-            }).catch(() => { });
-        }
-    }
-    /**
-     * Freeze an element at the animation's starting frame immediately, before any
-     * trigger fires. Called for ALL entrance-type actions regardless of trigger so
-     * that a click-triggered fadeIn on a menu overlay also starts it hidden.
-     *
-     * In builder mode only opacity:0 is applied — transforms on canvas elements
-     * inside iox-page-component's scale() transform break Lenis scroll. The transform
-     * jump at animation t=0 is invisible because the element is already opacity:0.
-     * In production the full keyframe is applied + pointer-events:none.
-     */
-    applyPreState(element, action) {
-        const { keyframes } = this.buildAnimation(action);
-        if (!keyframes.length)
-            return;
-        const first = keyframes[0];
-        if (this.isBuilderMode()) {
-            // No transforms — inline transforms on children inside iox-page-component's
-            // scale() break Lenis scroll. pointer-events:none lets wheel events and
-            // hover fall through to visible elements underneath.
-            element.style.setProperty('opacity', '0');
-            element.style.setProperty('pointer-events', 'none');
-        }
-        else {
-            for (const [prop, val] of Object.entries(first)) {
-                element.style[prop] = String(val);
-            }
-            element.style.setProperty('pointer-events', 'none');
-        }
-        element.setAttribute('data-iox-hidden', '');
-        this.preStatedElements.add(element);
-    }
-    clearInlineAnimationStyles(element) {
-        element.style.removeProperty('opacity');
-        element.style.removeProperty('transform');
-        element.style.removeProperty('visibility');
-        element.style.removeProperty('pointer-events');
-        element.removeAttribute('data-iox-hidden');
-    }
-    reverseAction(element, action) {
-        const { keyframes } = this.buildAnimation(action);
-        if (!keyframes.length)
-            return;
-        // Reverse: play the keyframes backwards
-        element.animate([...keyframes].reverse(), {
-            duration: action.duration,
-            easing: action.easing,
-            fill: 'forwards',
-        });
-    }
-    buildAnimation(action) {
-        const dist = action.params?.['distance'] ?? 20;
-        let keyframes = [];
-        switch (action.type) {
-            case 'fadeIn':
-                keyframes = [{ opacity: 0 }, { opacity: 1 }];
-                break;
-            case 'fadeOut':
-                keyframes = [{ opacity: 1 }, { opacity: 0 }];
-                break;
-            case 'moveUp':
-                keyframes = [{ transform: `translateY(${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
-                break;
-            case 'moveDown':
-                keyframes = [{ transform: `translateY(-${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
-                break;
-            case 'moveLeft':
-                keyframes = [{ transform: `translateX(${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
-                break;
-            case 'moveRight':
-                keyframes = [{ transform: `translateX(-${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
-                break;
-            case 'scaleIn':
-                keyframes = [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }];
-                break;
-            case 'scaleOut':
-                keyframes = [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }];
-                break;
-            case 'rotate':
-                const deg = action.params?.['degrees'] ?? 360;
-                keyframes = [{ transform: `rotate(0deg)` }, { transform: `rotate(${deg}deg)` }];
-                break;
-            case 'show':
-                keyframes = [{ opacity: 0, visibility: 'hidden' }, { opacity: 1, visibility: 'visible' }];
-                break;
-            case 'hide':
-                keyframes = [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'hidden' }];
-                break;
-            case 'toggleVisibility':
-                // Toggle is stateful — handled separately via element style
-                keyframes = [{ opacity: 0 }, { opacity: 1 }];
-                break;
-        }
-        return {
-            keyframes,
-            options: {
-                duration: action.duration,
-                delay: action.delay,
-                easing: action.easing,
-                fill: 'forwards',
-            },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: OverlayService }] });
-
-/**
- * InteractionPresetRegistryService — in-memory store for org-level interaction presets.
- *
- * Loaded once per page by PageUiComponent alongside the page layout.
- * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
- */
-class InteractionPresetRegistryService {
-    constructor() {
-        this.presets = new Map();
-    }
-    setPresets(presets) {
-        this.presets.clear();
-        for (const p of presets) {
-            this.presets.set(p.id, p);
-        }
-    }
-    getPreset(id) {
-        return this.presets.get(id);
-    }
-    getAll() {
-        return Array.from(this.presets.values());
-    }
-    upsert(preset) {
-        this.presets.set(preset.id, preset);
-    }
-    remove(id) {
-        this.presets.delete(id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * BuilderClipboardService — in-memory typed clipboard for the page builder.
- *
- * Stores element copies, style preset references, and interaction preset references.
- * Lives in memory only — no navigator.clipboard usage.
- * Scoped to PageUiComponent.providers[] — one clipboard per builder instance.
- */
-class BuilderClipboardService {
-    constructor() {
-        this._clip = {};
-    }
-    copyNode(node) {
-        this._clip = { node: JSON.parse(JSON.stringify(node)) };
-    }
-    copyPreset(presetId) {
-        this._clip = { ...this._clip, presetId };
-    }
-    copyInteractionPreset(interactionPresetId) {
-        this._clip = { ...this._clip, interactionPresetId };
-    }
-    getNode() { return this._clip.node; }
-    getPresetId() { return this._clip.presetId; }
-    getInteractionPresetId() { return this._clip.interactionPresetId; }
-    clear() { this._clip = {}; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService, decorators: [{
-            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.
- *
- * Each builder component gets two CSS classes:
- *   .iox-node-{id}  — applied to the inner element; handles layout/visual props
- *                     (display, flex, background, border, padding, etc.)
- *   .iox-outer-{id} — applied to the host element by RenderDirective; handles
- *                     properties that participate in the PARENT flow (margin,
- *                     align-self, flex-grow/shrink/basis, order).
- *
- * This split is necessary because margin on an inner wrapper only adds internal
- * space — it does not push sibling elements. Applying margin to the host element
- * (which IS the flex/block child in the parent container) makes it work correctly.
- *
- * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
- * and compiled to `.iox-node-{id}:hover { … }` selectors.
- *
- * Design token variables are stored under the reserved key `__tokens__` and
- * compiled to a `:root { … }` block prepended to all other rules.
- *
- * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
- */
-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;
-    }
-    /**
-     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
-     * affect how the element participates in its PARENT layout (flex/block flow).
-     * Everything else goes to the INNER element (.iox-node-{id}).
-     *
-     * Exception — out-of-flow positioning (position:fixed/absolute):
-     * When position is fixed or absolute, width is redirected to the inner element
-     * (the positioned one) and a default width:100% is added if none is set, so the
-     * element stays visible. top/right/bottom/left/zIndex are always inner because
-     * they are co-ordinates of the positioned element, not the flow wrapper.
-     * position itself goes to inner with `!important` to beat component-scoped CSS.
-     */
-    static { this.OUTER_PROPS = new Set([
-        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
-        // Grid-child placement — like the flex-child props above, these position the node
-        // within the PARENT's grid, so they must land on the outer host, not the inner div.
-        'gridColumn', 'gridRow', 'justifySelf',
-        'width',
-    ]); }
-    /**
-     * Properties that need !important on the inner element to beat Angular's scoped-CSS
-     * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
-     * importance and the SSR engine never emits it — this is the builder's own fight with its
-     * scoped component styles. The A4 dialog centring clash this once caused is resolved
-     * structurally (the grid stage PLACES a static surface), so the set stays at exactly one
-     * documented member; adding to it needs the same scrutiny.
-     */
-    static { this.IMPORTANT_PROPS = new Set(['position']); }
-    init() {
-        this.styleEl = document.createElement('style');
-        this.styleEl.id = 'iox-runtime-styles';
-        document.head.appendChild(this.styleEl);
-    }
-    /**
-     * Write or update the base styles for a node, or a pseudo-class state override.
-     *
-     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
-     * @param styles  Flat CSS property map (camelCase keys)
-     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
-     *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
-     *                State rules are NOT partitioned into inner/outer.
-     * @param relativeToId  For RELATIONAL states (e.g. 'parent-hover') this is the ancestor
-     *                css id; compiles to `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
-     *                For TARGETED states (e.g. 'trigger-hover') this is the SCOPE css id
-     *                (nearest common ancestor of the styled node + trigger).
-     * @param triggerId  For TARGETED states only: the css id of the trigger node whose
-     *                pseudo-class drives the state. Compiles a `:has()`-scoped selector.
-     */
-    upsert(nodeId, styles, state, relativeToId, triggerId) {
-        if (!nodeId)
-            return;
-        if (state) {
-            const key = `${nodeId}:${state}`;
-            // 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
-                this.rules.delete(key);
-            if (this.responsiveInputs.has(nodeId))
-                this.emitResponsive(nodeId);
-            this.flush();
-            return;
-        }
-        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();
-    }
-    /**
-     * Write or clear the styles for one PART of a compound component (board 7 — "the failure
-     * design"), optionally further scoped to a validation state ('wrong'/'accepted'). Compiles
-     * through the exact same `compile()` every other rule uses — `buildPartSelector` (shared,
-     * `@vectoriox/iox-ui`) just builds a different selector string. Unlike interaction/relational/
-     * targeted states, a validation state compounds a CLASS onto the node (`.iox-invalid`), not a
-     * `:pseudo-class`, since `IoxFieldComponent` sets that class itself from `forceInvalid`/
-     * `showValid` — there is no real "wrong" pseudo-class to hook.
-     */
-    upsertPart(nodeId, partClassName, styles, state) {
-        if (!nodeId || !partClassName)
-            return;
-        const key = `${nodeId}:part:${partClassName}${state ? ':' + state : ''}`;
-        const validationClass = state ? VALIDATION_STATE_CLASS[state] : undefined;
-        const selector = buildPartSelector(nodeId, partClassName, validationClass);
-        const css = Object.keys(styles).length ? this.compile(selector, styles) : '';
-        if (css)
-            this.rules.set(key, css);
-        else
-            this.rules.delete(key);
-        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'] ?? '');
-        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;
-        }
-        // Validation states (wrong/accepted, board 7) are not real CSS pseudo-classes — `:wrong`
-        // doesn't exist. Compound a CLASS instead, matching the host class IoxFieldComponent
-        // already sets from forceInvalid/showValid. Reuses buildPartSelector with no part, since
-        // "whole node, when wrong" is exactly that function's no-part case.
-        const validationClass = VALIDATION_STATE_CLASS[state];
-        if (validationClass)
-            return buildPartSelector(nodeId, undefined, validationClass);
-        // 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)) {
-            if (k === '__markerStyles')
-                continue;
-            const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
-            // width goes to inner for fixed/absolute (the positioned element owns its own width)
-            if (wantsOuter && !(isOutOfFlow && k === 'width')) {
-                outer[k] = v;
-            }
-            else {
-                inner[k] = v;
-            }
+                // Builder: clear inline pre-state so cancelling animations later
+                // doesn't leave the element invisible after a play preview.
+                if (this.isBuilderMode())
+                    this.clearInlineAnimationStyles(element);
+            }).catch(() => { });
         }
-        // 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%';
+        else if (this.EXIT_TYPES.has(action.type)) {
+            // Once the exit animation finishes the element is invisible —
+            // disable pointer events so it doesn't silently block clicks underneath it.
+            anim.finished.then(() => {
+                element.style.setProperty('pointer-events', 'none');
+            }).catch(() => { });
         }
-        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.
-     * Token names should be CSS custom property names without the `--` prefix
-     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
-     * Pass an empty object to clear all tokens.
+     * Freeze an element at the animation's starting frame immediately, before any
+     * trigger fires. Called for ALL entrance-type actions regardless of trigger so
+     * that a click-triggered fadeIn on a menu overlay also starts it hidden.
+     *
+     * In builder mode only opacity:0 is applied — transforms on canvas elements
+     * inside iox-page-component's scale() transform break Lenis scroll. The transform
+     * jump at animation t=0 is invisible because the element is already opacity:0.
+     * In production the full keyframe is applied + pointer-events:none.
      */
-    upsertTokens(tokens, darkTokens) {
-        const entries = Object.entries(tokens)
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  --${k}: ${v};`);
-        if (entries.length) {
-            this.rules.set('__tokens__', `:root {\n${entries.join('\n')}\n}`);
-        }
-        else {
-            this.rules.delete('__tokens__');
-        }
-        // Dark-scheme overrides (flavors F0): variables only, appended as the token layer's
-        // LAST rule — one ordering convention for every @media block (responsive A3 lesson).
-        const darkEntries = Object.entries(darkTokens ?? {})
-            .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `    --${k}: ${v};`);
-        if (darkEntries.length) {
-            this.rules.set('__tokens_dark__', `@media (prefers-color-scheme: dark) {\n  :root {\n${darkEntries.join('\n')}\n  }\n}`);
+    applyPreState(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        const first = keyframes[0];
+        if (this.isBuilderMode()) {
+            // No transforms — inline transforms on children inside iox-page-component's
+            // scale() break Lenis scroll. pointer-events:none lets wheel events and
+            // hover fall through to visible elements underneath.
+            element.style.setProperty('opacity', '0');
+            element.style.setProperty('pointer-events', 'none');
         }
         else {
-            this.rules.delete('__tokens_dark__');
+            for (const [prop, val] of Object.entries(first)) {
+                element.style[prop] = String(val);
+            }
+            element.style.setProperty('pointer-events', 'none');
         }
-        this.flush();
+        element.setAttribute('data-iox-hidden', '');
+        this.preStatedElements.add(element);
     }
-    remove(nodeId) {
-        if (!nodeId)
+    clearInlineAnimationStyles(element) {
+        element.style.removeProperty('opacity');
+        element.style.removeProperty('transform');
+        element.style.removeProperty('visibility');
+        element.style.removeProperty('pointer-events');
+        element.removeAttribute('data-iox-hidden');
+    }
+    reverseAction(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
             return;
-        // Remove base rule and all state rules for this node
-        this.rules.delete(nodeId);
-        for (const key of this.rules.keys()) {
-            if (key.startsWith(`${nodeId}:`)) {
-                this.rules.delete(key);
-            }
-        }
-        for (const key of this.stateScopes.keys()) {
-            if (key.startsWith(`${nodeId}:`))
-                this.stateScopes.delete(key);
+        // Reverse: play the keyframes backwards
+        element.animate([...keyframes].reverse(), {
+            duration: action.duration,
+            easing: action.easing,
+            fill: 'forwards',
+        });
+    }
+    buildAnimation(action) {
+        const dist = action.params?.['distance'] ?? 20;
+        let keyframes = [];
+        switch (action.type) {
+            case 'fadeIn':
+                keyframes = [{ opacity: 0 }, { opacity: 1 }];
+                break;
+            case 'fadeOut':
+                keyframes = [{ opacity: 1 }, { opacity: 0 }];
+                break;
+            case 'moveUp':
+                keyframes = [{ transform: `translateY(${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
+                break;
+            case 'moveDown':
+                keyframes = [{ transform: `translateY(-${dist}px)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }];
+                break;
+            case 'moveLeft':
+                keyframes = [{ transform: `translateX(${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
+                break;
+            case 'moveRight':
+                keyframes = [{ transform: `translateX(-${dist}px)`, opacity: 0 }, { transform: 'translateX(0)', opacity: 1 }];
+                break;
+            case 'scaleIn':
+                keyframes = [{ transform: 'scale(0.8)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 }];
+                break;
+            case 'scaleOut':
+                keyframes = [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0.8)', opacity: 0 }];
+                break;
+            case 'rotate':
+                const deg = action.params?.['degrees'] ?? 360;
+                keyframes = [{ transform: `rotate(0deg)` }, { transform: `rotate(${deg}deg)` }];
+                break;
+            case 'show':
+                keyframes = [{ opacity: 0, visibility: 'hidden' }, { opacity: 1, visibility: 'visible' }];
+                break;
+            case 'hide':
+                keyframes = [{ opacity: 1, visibility: 'visible' }, { opacity: 0, visibility: 'hidden' }];
+                break;
+            case 'toggleVisibility':
+                // Toggle is stateful — handled separately via element style
+                keyframes = [{ opacity: 0 }, { opacity: 1 }];
+                break;
         }
-        this.responsiveInputs.delete(nodeId);
-        this.clearResponsive(nodeId);
-        this.flush();
+        return {
+            keyframes,
+            options: {
+                duration: action.duration,
+                delay: action.delay,
+                easing: action.easing,
+                fill: 'forwards',
+            },
+        };
     }
-    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;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OverlayService }] });
+
+/**
+ * InteractionPresetRegistryService — in-memory store for org-level interaction presets.
+ *
+ * Loaded once per page by PageUiComponent alongside the page layout.
+ * Scoped to PageUiComponent.providers[] via IoxBuilderModule — one registry per builder instance.
+ */
+class InteractionPresetRegistryService {
+    constructor() {
+        this.presets = new Map();
+    }
+    setPresets(presets) {
+        this.presets.clear();
+        for (const p of presets) {
+            this.presets.set(p.id, p);
         }
     }
-    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, context);
-        if (!decls.length)
-            return '';
-        const body = decls.map(d => `  ${d};`).join('\n');
-        return `.${className} {\n${body}\n}`;
+    getPreset(id) {
+        return this.presets.get(id);
     }
-    flush() {
-        if (!this.styleEl || this._flushPending)
-            return;
-        this._flushPending = true;
-        requestAnimationFrame(() => {
-            this._flushPending = false;
-            if (!this.styleEl)
-                return;
-            // __tokens__ always first so variables are available to all subsequent rules
-            const tokenBlock = this.rules.get('__tokens__');
-            const rest = Array.from(this.rules.entries())
-                .filter(([k]) => k !== '__tokens__')
-                .map(([, v]) => v);
-            // 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();
-        });
+    getAll() {
+        return Array.from(this.presets.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService }); }
+    upsert(preset) {
+        this.presets.set(preset.id, preset);
+    }
+    remove(id) {
+        this.presets.delete(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: StyleRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionPresetRegistryService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * BuilderClipboardService — in-memory typed clipboard for the page builder.
+ *
+ * Stores element copies, style preset references, and interaction preset references.
+ * Lives in memory only — no navigator.clipboard usage.
+ * Scoped to PageUiComponent.providers[] — one clipboard per builder instance.
+ */
+class BuilderClipboardService {
+    constructor() {
+        this._clip = {};
+    }
+    copyNode(node) {
+        this._clip = { node: JSON.parse(JSON.stringify(node)) };
+    }
+    copyPreset(presetId) {
+        this._clip = { ...this._clip, presetId };
+    }
+    copyInteractionPreset(interactionPresetId) {
+        this._clip = { ...this._clip, interactionPresetId };
+    }
+    getNode() { return this._clip.node; }
+    getPresetId() { return this._clip.presetId; }
+    getInteractionPresetId() { return this._clip.interactionPresetId; }
+    clear() { this._clip = {}; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderClipboardService, decorators: [{
             type: Injectable
         }] });
 
@@ -4466,6 +4501,11 @@ const DIRECTIVE_HOST_TYPES = new Set([
     'Image', 'Icon', 'Divider', 'Spacer', 'Button', 'Link', 'Heading', 'Text', 'ButtonBlock',
     // Phase 2 (9c): layout components converted to directive-hosts (host IS the real tag).
     'Section', 'Container', 'List', 'ListItem',
+    // Forms: Field/SubmitButton are the engine's own directive-host twins, and Form/FieldGroup/
+    // FormSuccess/FormError render through the Container twin (a directive-host). The forced
+    // inline `display:block` out-ranked the node rule (a SubmitButton wearing a button style) —
+    // the engine never had it (DS2.1).
+    'Form', 'Field', 'FieldGroup', 'SubmitButton', 'FormSuccess', 'FormError',
 ]);
 const CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'];
 /**
@@ -4670,8 +4710,10 @@ class RenderDirective {
         }
         // Use styleId when present (clone nodes share the template node's CSS rule).
         const cssId = node.styleId ?? node.id;
-        // Register CSS rules in the central stylesheet (inner + outer split).
+        // Register CSS rules in the central stylesheet (inner + outer split). The type first: the
+        // registry strips the props a type's renderer owns (a Dialog's positioning) on every rule.
         if (cssId) {
+            this.styleRegistry.setNodeType(cssId, node.type);
             const composedBase = composeVirtualTraits(initialStyle);
             this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
@@ -4771,6 +4813,10 @@ class RenderDirective {
         // For layout components the host element is <app-section>; for leaf components
         // it is e.g. <app-card>. Either way this is the correct inspectable element.
         const nativeEl = componentRef.location?.nativeElement ?? null;
+        // The element-style marker (design-system §3b-bis) — on the HOST, as both engine paths do:
+        // component CSS that carries the system look is scoped to it, so a node saved before DS2
+        // keeps its exact pre-DS2 look. Clones carry it too (they render the same look).
+        syncElementStyleMarker(nativeEl, node.elementStyle);
         // Custom element host defaults to display:inline. Set it to block so it participates
         // properly in layout and CDK can capture its bounding rect. SKIP for directive-hosts: the
         // host is a real element with its own display, and an inline style here out-ranks both
@@ -7429,11 +7475,11 @@ class BuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, deps: [{ token: ComponentRegistryService }, { token: OverlayService }, { token: PanelEventService }, { token: DragEngineService }, { token: DataSourceRegistryService }, { token: ViewportService }, { token: FormStateService }, { token: InteractionEngineService }, { token: InteractionPresetRegistryService }, { token: BuilderClipboardService }, { token: SymbolRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.ApplicationRef }, { token: MoveableCanvasService }, { token: SelectoCanvasService }, { token: StyleRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", canUndo: "canUndo", canRedo: "canRedo", moveableMode: "moveableMode" }, outputs: { save: "save", undo: "undo", redo: "redo", back: "back", preview: "preview", publishToggle: "publishToggle", pageSettingsChange: "pageSettingsChange", applyAnimationToAll: "applyAnimationToAll", saveBlock: "saveBlock", globalElementsChange: "globalElementsChange" }, viewQueries: [{ propertyName: "previewCanvas", first: true, predicate: ["previewCanvas"], descendants: true }, { propertyName: "previewScrollRef", first: true, predicate: ["previewScroll"], descendants: true }, { propertyName: "lenisContentRef", first: true, predicate: ["lenisContent"], descendants: true }, { propertyName: "globalOverlayRef", first: true, predicate: ["globalOverlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <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            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <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            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.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-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.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: i16.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: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i17.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: i1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderComponent, isStandalone: false, selector: "app-builder", inputs: { layout: "layout", dataSources: "dataSources", orgId: "orgId", routeParams: "routeParams", pageName: "pageName", isSaving: "isSaving", pageStatus: "pageStatus", pageSettings: "pageSettings", globalElements: "globalElements", 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\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <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            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\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-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <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            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.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-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"], dependencies: [{ kind: "directive", type: i2.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: i16.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: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i17.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: i1.IoxPageComponent, selector: "iox-page-component", inputs: ["class"], outputs: ["scrollEvent"] }, { kind: "directive", type: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: OverlayComponent, selector: "app-overlay", outputs: ["toolbarAction"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["activeMode", "activeBreakpoint", "breakpointCounts", "auditCount", "auditOpen", "activeZoom", "activeScreenWidth", "canUndo", "canRedo", "isSaving", "pageStatus"], outputs: ["modeChange", "breakpointChange", "auditToggle", "zoomChange", "screenWidthChange", "undo", "redo", "save", "preview", "publishToggle"] }, { kind: "component", type: LayerTreeComponent, selector: "app-layer-tree", inputs: ["layout", "globalElements"], outputs: ["nodeSelect", "nodeAction", "nodeMove"] }, { kind: "component", type: BreadcrumbBarComponent, selector: "app-breadcrumb-bar", inputs: ["path"], outputs: ["nodeSelect", "rootSelect", "nodePeek"] }, { kind: "component", type: AuditPanelComponent, selector: "app-audit-panel", inputs: ["findings", "breakpointLabel", "running"], outputs: ["select", "fix", "fixAll", "rerun", "closePanel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <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            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay\"\n                 [style.width.px]=\"viewportWidth\"\n                 [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                 [style.transform]=\"viewportTransform\">\n                <ng-container *ngFor=\"let item of globalElementsBefore\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngFor=\"let item of globalElementsAfter\">\n                    <ng-container [ioxRender]=\"item\"\n                        (onClick)=\"handleClick($event)\"\n                        (onMouseEnter)=\"handleMouseEnter($event)\"\n                        (onMouseLeave)=\"handleMouseLeave()\">\n                    </ng-container>\n                </ng-container>\n            </div>\n\n            <div class=\"preview-scroll\"\n                 #previewScroll\n                 [style.width.px]=\"viewportScaledWidth\"\n                 [class.pan-mode]=\"activeMode === builderModes.Pan\">\n\n            <!-- Lenis content proxy: height = realContentHeight \u00D7 scale.\n                 Lenis scrolls against this value so scroll range is always in\n                 visual px \u2014 correct at any zoom level. -->\n            <div class=\"preview-lenis-content\" #lenisContent\n                 [style.height.px]=\"scaledContentHeight\">\n\n                 <iox-page-component\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <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            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.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-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
+            args: [{ selector: 'app-builder', standalone: false, template: "<div class=\"builder\">\n\n    <div class=\"builder-main\" [class.panel-open]=\"isPanelOpen\">\n        <!-- The switcher is the panel's OWN tab bar. It used to live in the header, at the\n             maximum possible distance from the thing it controls; attached, the column and the\n             panel are one card with one shadow. See board D2. -->\n        <aside class=\"sidebar\">\n            <div class=\"sidebar-switcher\">\n                <button (click)=\"activeSidebar = 'pages'\" [class.active]=\"activeSidebar === 'pages'\" title=\"Pages\" aria-label=\"Pages\">\n                    <i class=\"ph-thin ph-browsers\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'components'\" [class.active]=\"activeSidebar === 'components'\" title=\"Components\" aria-label=\"Components\">\n                    <i class=\"ph-thin ph-cube\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tree'\" [class.active]=\"activeSidebar === 'tree'\" title=\"Layers\" aria-label=\"Layers\">\n                    <i class=\"ph-thin ph-tree-structure\"></i>\n                </button>\n                <button (click)=\"activeSidebar = 'tokens'\" [class.active]=\"activeSidebar === 'tokens'\" title=\"Design Tokens\" aria-label=\"Design Tokens\">\n                    <i class=\"ph-thin ph-circles-three\"></i>\n                </button>\n            </div>\n            <div class=\"sidebar-body\">\n            <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            </div>\n        </aside>\n\n        <!-- \u26A0\uFE0F The strips are SIBLINGS of .preview, not children of it. Board D2 floated them\n             over the canvas and that is what they did \u2014 over the page being edited, which is the\n             one thing in the builder that must stay clear. They keep their pill shape and their\n             centre alignment; they just take their own row.\n\n             Siblings, specifically, rather than a wrapper INSIDE .preview: `previewCanvas` is the\n             overlay container and the coordinate origin for the selection box, the drag clone,\n             Lenis and the zoom maths (nine call sites). Nesting anything between it and the canvas\n             would shift every one of them by the strip's height. -->\n        <div class=\"canvas-column\">\n            <!-- \u2460 THE ACTION STRIP \u2014 floating, top-centre (board D2). It was a solid\n                 full-width header bar costing 56px of height on every screen; the canvas now\n                 starts at the top of the viewport and the strip hovers over it.\n                 stopPropagation for the same reason the breadcrumb does: .preview's (click)\n                 is \"you clicked empty canvas, drop the selection\". -->\n            <div class=\"toolbar-strip\" (click)=\"$event.stopPropagation()\">\n            <app-toolbar\n                [activeMode]=\"activeMode\"\n                [activeBreakpoint]=\"activeBreakpoint\"\n                [breakpointCounts]=\"breakpointCounts\"\n                [auditCount]=\"auditFindings.length\"\n                [auditOpen]=\"auditOpen\"\n                [activeZoom]=\"activeZoom\"\n                [activeScreenWidth]=\"activeScreenWidth\"\n                [isSaving]=\"isSaving\"\n                [pageStatus]=\"pageStatus\"\n                [canUndo]=\"canUndo\"\n                [canRedo]=\"canRedo\"\n                (modeChange)=\"handleToolbarModeChange($event)\"\n                (breakpointChange)=\"handleToolbarBreakpointChange($event)\"\n                (auditToggle)=\"toggleAudit()\"\n                (zoomChange)=\"handleToolbarZoomChange($event)\"\n                (screenWidthChange)=\"handleToolbarScreenWidthChange($event)\"\n                (save)=\"save.emit()\"\n                (preview)=\"preview.emit()\"\n                (publishToggle)=\"publishToggle.emit()\"\n                (undo)=\"undo.emit()\"\n                (redo)=\"redo.emit()\">\n                <ng-content select=\"[builderToolbarActions]\"></ng-content>\n            </app-toolbar>\n            </div>\n\n        <main #previewCanvas class=\"preview\"\n              [class.grab-mode]=\"activeMode === builderModes.Pan\"\n              [class.grabbing]=\"isPanning\"\n              (click)=\"handleCanvasClick()\"\n              (mousedown)=\"onBoardMouseDown($event)\"\n              (mousemove)=\"onBoardMouseMove($event)\"\n              (mouseup)=\"onBoardMouseUp()\"\n              (mouseleave)=\"onBoardMouseUp()\">\n            <app-overlay (toolbarAction)=\"onToolbarAction($event)\"></app-overlay>\n\n            <!-- Responsive audit (A5) \u2014 floats over the canvas, right gutter. -->\n            @if (auditOpen) {\n            <div class=\"audit-dock\" (click)=\"$event.stopPropagation()\">\n                <app-audit-panel\n                    [findings]=\"auditFindings\"\n                    [breakpointLabel]=\"auditBreakpointLabel\"\n                    [running]=\"auditRunning\"\n                    (select)=\"selectAuditNode($event)\"\n                    (fix)=\"applyAuditFix($event)\"\n                    (fixAll)=\"applyAllAuditFixes()\"\n                    (rerun)=\"runAudit()\"\n                    (closePanel)=\"toggleAudit()\"></app-audit-panel>\n            </div>\n            }\n\n            <!-- Custom Lenis scrollbar \u2014 lives in .preview (not .preview-scroll) so it\n                 stays in the right gutter and never overlaps the canvas at large widths.\n                 No translateY counteract needed since it isn't inside the Lenis wrapper. -->\n            <div class=\"canvas-scrollbar\"\n                 [class.visible]=\"isScrollbarVisible\">\n                <div class=\"canvas-scrollbar-thumb\"\n                     [style.height.px]=\"scrollThumbHeight\"\n                     [style.top.px]=\"scrollThumbTop\">\n                </div>\n            </div>\n\n            <!-- Global elements overlay \u2014 outside Lenis so position:fixed children\n                 stay pinned to the canvas viewport rather than scrolling with content.\n                 Shares viewportTransform so elements scale correctly at any zoom level.\n                 Height matches viewportHeight so position:fixed + inset:0 fills the\n                 simulated viewport correctly (CSS calc(100%) would give the wrong\n                 containing-block height and break full-screen fixed overlays). -->\n            <div *ngIf=\"globalElements.length\"\n                 #globalOverlay\n                 class=\"global-elements-overlay iox-token-scope\"\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-token-scope: the ORG's design tokens are declared on this class, not :root\n                      (StyleRegistryService.upsertTokens), so they never repaint the admin chrome. -->\n                 <iox-page-component class=\"iox-token-scope\"\n                     [style.width.px]=\"viewportWidth\"\n                     [style.height.px]=\"canvasFrameHeight || viewportHeight\"\n                     [style.transform]=\"viewportTransform\">\n\n                    <!-- ngStyle carries the page's own background/typography (pageSettings.style),\n                         compiled by the SAME function the engine applies to <body>. Inline wins over\n                         the #canvas-preview white default, which stays as the unset fallback. -->\n                    <div class=\"canvas-viewport\"\n                         id=\"canvas-preview\"\n                         [ngStyle]=\"pageStyleCss\"\n                         [style.min-height.px]=\"canvasMinHeight\">\n\n                        <!-- Empty page (B4): a starting point beats a blank canvas. Each starter is\n                             a responsive layout preset \u2014 ordinary nodes, editable afterwards. -->\n                        @if (isPageEmpty) {\n                        <div class=\"empty-canvas\" (click)=\"$event.stopPropagation()\">\n                            <h2 class=\"empty-title\">Start with a layout</h2>\n                            <p class=\"empty-sub\">Each one already adapts to tablet and phone. You can edit or take it apart afterwards.</p>\n                            <div class=\"empty-grid\">\n                                @for (starter of starterLayouts; track starter.id) {\n                                <button type=\"button\" class=\"empty-card\" (click)=\"startWithLayout(starter)\">\n                                    <i [class]=\"starter.icon\" aria-hidden=\"true\"></i>\n                                    <span class=\"empty-card-name\">{{ starter.name }}</span>\n                                    <span class=\"empty-card-desc\">{{ starter.description }}</span>\n                                </button>\n                                }\n                            </div>\n                            <button type=\"button\" class=\"empty-link\" (click)=\"browseComponents()\">Or start from a single element</button>\n                        </div>\n                        }\n\n                        <!-- WRAPPER COLLAPSE (task 9c): top-level nodes render DIRECTLY into the\n                             canvas viewport \u2014 no .preview-node wrapper; iox-outer + drag move to the\n                             host (RenderDirective, via ioxDragSourceId). -->\n                        <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            <!-- \u2462 THE ELEMENT PATH \u2014 a thin floating strip, BOTTOM-CENTRE (board D2). It is\n                 pinned to the PREVIEW VIEWPORT, not to the canvas frame: the frame pans and\n                 scales, so a breadcrumb tracking its edge would drift off-screen and shrink with\n                 zoom. It used to sit in the top gutter, which is where the eye is least often \u2014\n                 and where the floating action strip now lives.\n\n                 \u26A0\uFE0F stopPropagation is REQUIRED, not defensive. This element lives inside .preview,\n                 whose (click) is handleCanvasClick() \u2014 \"you clicked empty canvas, drop the\n                 selection\". Without it, picking an ancestor crumb selects that node and then\n                 immediately bubbles into the canvas handler, which clears it: the selection and the\n                 layer-tree highlight both fall back to Body. Same reason .audit-dock stops its own. -->\n            <app-breadcrumb-bar\n                (click)=\"$event.stopPropagation()\"\n                [path]=\"selectedPath\"\n                (nodeSelect)=\"onCrumbSelect($event)\"\n                (rootSelect)=\"onCrumbRootSelect()\"\n                (nodePeek)=\"onCrumbPeek($event)\">\n            </app-breadcrumb-bar>\n\n        </div>\n\n        <!-- Same rule as the sidebar: the switcher belongs to the panel it drives, as a\n             tab ROW across its top. -->\n        <div class=\"panel-dock\">\n            <div class=\"panel-switcher\">\n                <button (click)=\"selectPanel(panelTypes.BINDINGS)\" [class.active]=\"activePanel === panelTypes.BINDINGS\" title=\"Bindings\">\n                    <i class=\"ph-thin ph-plugs-connected\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.STYLES)\" [class.active]=\"activePanel === panelTypes.STYLES\" title=\"Styles\">\n                    <i class=\"ph-thin ph-paint-brush\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.PAGE)\" [class.active]=\"activePanel === panelTypes.PAGE\" title=\"Page settings\" aria-label=\"Page settings\">\n                    <i class=\"ph-thin ph-gear-six\"></i>\n                </button>\n                <button (click)=\"selectPanel(panelTypes.INTERACTIONS)\" [class.active]=\"activePanel === panelTypes.INTERACTIONS\" title=\"Interactions\">\n                    <i class=\"ph-thin ph-lightning\"></i>\n                </button>\n            </div>\n            <ng-content select=\"[builderPanel]\"></ng-content>\n        </div>\n    </div>\n\n    <!-- Save as Reusable Block dialog -->\n    @if (showSaveBlockDialog) {\n    <div class=\"save-block-backdrop\" (click)=\"cancelSaveBlock()\"></div>\n    <div class=\"save-block-dialog\" (click)=\"$event.stopPropagation()\">\n        <h4 class=\"save-block-title\">Save as Reusable Block</h4>\n        <input class=\"save-block-input\"\n               type=\"text\"\n               placeholder=\"Block name...\"\n               [(ngModel)]=\"saveBlockName\"\n               (keydown.enter)=\"confirmSaveBlock()\"\n               (keydown.escape)=\"cancelSaveBlock()\"\n               autofocus>\n        <div class=\"save-block-actions\">\n            <p-button size=\"small\" severity=\"secondary\" label=\"Cancel\" (click)=\"cancelSaveBlock()\"></p-button>\n            <p-button size=\"small\" label=\"Save\" [disabled]=\"!saveBlockName.trim()\" (click)=\"confirmSaveBlock()\"></p-button>\n        </div>\n    </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:flex;flex:1;min-height:0;overflow:hidden}.builder{display:flex;flex-direction:column;direction:ltr;width:100%;height:100%;min-height:0;border-radius:0;overflow:hidden;position:relative}.builder .toolbar-strip{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:6px 8px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 40px);overflow-x:auto;scrollbar-width:none}.builder .toolbar-strip::-webkit-scrollbar{display:none}.builder .sidebar-switcher,.builder .panel-switcher{flex:none;display:flex;flex-direction:row;align-items:center;gap:.375rem;padding:7px 10px;background:var(--p-surface-0);border-block-end:1px solid var(--iox-neutral-100, #EDEFF3)}.builder .sidebar-switcher button,.builder .panel-switcher button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:none;background:var(--iox-surface-3, #F6F7F9);color:var(--p-text-muted-color);cursor:pointer;font-size:1rem;transition:background .15s ease-out,color .15s ease-out}.builder .sidebar-switcher button i,.builder .panel-switcher button i{pointer-events:none}.builder .sidebar-switcher button:hover,.builder .panel-switcher button:hover{background:var(--iox-rose-100, #F8EAEA);color:var(--p-text-color)}.builder .sidebar-switcher button.active,.builder .panel-switcher button.active{background:var(--iox-grad-brand, linear-gradient(135deg, #9B4458 0%, #8A3A72 50%, #63347F 100%));color:#fff}.builder .panel-dock{display:grid;grid-template-rows:auto minmax(0,1fr);flex:none;min-height:0;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden}.builder .builder-main{display:flex;flex:1 1 0;min-height:0;position:relative;overflow:hidden;gap:12px;padding:14px;background:var(--iox-surface-2, #EDEFF3)}.builder .sidebar{display:flex;flex-direction:column;inline-size:260px;min-inline-size:260px;background:var(--p-surface-0);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:var(--iox-radius-card, 20px);box-shadow:var(--iox-elev-1, 0 0 12px rgba(16, 27, 66, .05));overflow:hidden;flex-shrink:0;min-block-size:0}.builder .sidebar .sidebar-body{flex:1;min-inline-size:0;overflow-y:auto;overflow-x:hidden}.builder .canvas-column{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.builder .preview{flex:1 1 0;min-width:0;min-height:0;position:relative;overflow:hidden;background:transparent}.builder .preview.grab-mode{cursor:grab}.builder .preview.grab-mode iox-page-component{pointer-events:none}.builder .preview.grabbing{cursor:grabbing}.builder .canvas-scrollbar{position:absolute;right:4px;top:20px;bottom:20px;width:6px;z-index:20;opacity:0;transition:opacity .2s ease;pointer-events:none}.builder .canvas-scrollbar.visible{opacity:1}.builder .canvas-scrollbar-thumb{position:absolute;left:0;width:100%;background:#00000059;border-radius:3px;transition:top .05s linear}.builder .preview-scroll{position:absolute;inset:20px auto;inset-inline-start:50%;transform:translate(-50%);max-width:calc(100% - 40px);height:calc(100% - 40px);overflow:hidden}.builder .preview-lenis-content{position:relative;width:100%;overflow:hidden;contain:paint}.builder iox-page-component{position:absolute!important;top:0;bottom:auto!important;right:auto!important;left:50%;transform-origin:top center;overflow:visible!important;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 .empty-canvas{max-inline-size:560px;margin:0 auto;padding:48px 24px;text-align:center;color:#4b5563}.builder .empty-title{margin:0;font-size:18px;font-weight:600;color:#111827}.builder .empty-sub{margin:6px 0 20px;font-size:12px;line-height:1.5;color:#6b7280}.builder .empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.builder .empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.builder .empty-card:hover{border-color:#cb9090;box-shadow:0 2px 10px #0000000f}.builder .empty-card:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder .empty-card i{font-size:20px;color:#a05c5c}.builder .empty-card-name{font-size:11.5px;font-weight:600;color:#111827}.builder .empty-card-desc{font-size:9.5px;line-height:1.35;color:#6b7280}.builder .empty-link{margin-block-start:16px;padding:0;border:none;background:none;font-size:11px;color:#a05c5c;cursor:pointer}.builder .empty-link:hover{text-decoration:underline}.builder .empty-link:focus-visible{outline:2px solid #cb9090;outline-offset:2px}.builder app-breadcrumb-bar{flex:none;align-self:center;max-inline-size:100%;display:flex;align-items:center;padding:5px 13px;background:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--iox-border-1, #DDE1E8);border-radius:999px;box-shadow:0 6px 20px #101b421a;max-inline-size:calc(100% - 112px);pointer-events:none}.builder .audit-dock{position:absolute;inset-block-start:20px;inset-inline-end:16px;z-index:20}.builder .global-elements-overlay{position:absolute;top:20px;left:50%;transform-origin:top center;pointer-events:none;z-index:9;overflow:hidden;container:iox-canvas/inline-size}.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-inline-start:-5px!important;background:#fff!important;border:1.5px solid #cb9090!important;border-radius:2px!important;box-shadow:0 1px 3px #0003!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentRegistryService }, { type: OverlayService }, { type: PanelEventService }, { type: DragEngineService }, { type: DataSourceRegistryService }, { type: ViewportService }, { type: FormStateService }, { type: InteractionEngineService }, { type: InteractionPresetRegistryService }, { type: BuilderClipboardService }, { type: SymbolRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.ApplicationRef }, { type: MoveableCanvasService }, { type: SelectoCanvasService }, { type: StyleRegistryService }], propDecorators: { layout: [{
                 type: Input
             }], dataSources: [{
@@ -7796,7 +7842,6 @@ class BuilderLinkedContainerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderLinkedContainerComponent, isStandalone: false, selector: "app-builder-linked-container", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <a [href]="resolvedHref"
            [target]="target"
-           [ngStyle]="style"
            [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
            class="linked-container-root"
            ioxDropzone
@@ -7819,14 +7864,13 @@ class BuilderLinkedContainerComponent {
                 (onMouseLeave)="childMouseLeave.emit()">
             </ng-container>
         </a>
-    `, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}:host ::ng-deep .linked-container-root>[class*=iox-outer-]{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [":where(.linked-container-root){display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}:host ::ng-deep .linked-container-root>[class*=iox-outer-]{min-width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderLinkedContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-builder-linked-container', template: `
         <a [href]="resolvedHref"
            [target]="target"
-           [ngStyle]="style"
            [ngClass]="['iox-node-' + nodeId, listOrientation === 'horizontal' ? 'is-horizontal' : '']"
            class="linked-container-root"
            ioxDropzone
@@ -7849,7 +7893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 (onMouseLeave)="childMouseLeave.emit()">
             </ng-container>
         </a>
-    `, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}:host ::ng-deep .linked-container-root>[class*=iox-outer-]{min-width:0}\n"] }]
+    `, standalone: false, styles: [":where(.linked-container-root){display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}.linked-container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.linked-container-root:hover .linked-container-placeholder,.linked-container-root.iox-drag-over .linked-container-placeholder{opacity:1}.linked-container-placeholder i{font-size:18px}:host ::ng-deep .linked-container-root>[class*=iox-outer-]{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -8518,7 +8562,6 @@ class BuilderDialogComponent {
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.children = [];
-        this.style = {};
         this.nodeId = '';
         this.dropListId = '';
         this.closeOnBackdrop = true;
@@ -8589,11 +8632,10 @@ class BuilderDialogComponent {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, deps: [{ token: DragEngineService }, { token: i1.ComponentInstanceRegistryService }, { token: OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderDialogComponent, isStandalone: false, selector: "app-builder-dialog", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", placement: "placement" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
-            <div [ngStyle]="style"
-                 [ngClass]="'iox-node-' + nodeId"
+            <div [ngClass]="['iox-node-' + nodeId, 'iox-outer-' + nodeId]"
                  class="dialog-surface"
                  ioxDropzone
                  [ioxDropzoneId]="dropListId"
@@ -8622,15 +8664,14 @@ class BuilderDialogComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-builder-dialog', template: `
         <div *ngIf="designOpen" class="dialog-stage" [attr.data-placement]="placementValue"
              (click)="onStageClick($event)">
-            <div [ngStyle]="style"
-                 [ngClass]="'iox-node-' + nodeId"
+            <div [ngClass]="['iox-node-' + nodeId, 'iox-outer-' + nodeId]"
                  class="dialog-surface"
                  ioxDropzone
                  [ioxDropzoneId]="dropListId"
@@ -8659,11 +8700,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}.dialog-surface{box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
+    `, standalone: false, styles: [".dialog-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:#0f172a73}:host(.iox-es) .dialog-stage{background:var(--iox-scrim)}.dialog-stage[data-placement=top]{align-items:start}.dialog-stage[data-placement=bottom]{align-items:end}.dialog-stage[data-placement=start]{justify-items:start}.dialog-stage[data-placement=end]{justify-items:end}:where(.dialog-surface){box-sizing:border-box;max-width:100%;max-height:100%;overflow:auto;contain:layout}.dialog-close{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border:none;border-radius:999px;background:#0f172a0f;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}:host(.iox-es) .dialog-close{border-radius:var(--iox-radius-pill);background:var(--iox-surface-2);color:var(--iox-text)}.dialog-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:90px;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px}.dialog-placeholder i{font-size:18px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i1.ComponentInstanceRegistryService }, { type: OverlayService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], nodeId: [{
                 type: Input
             }], dropListId: [{
@@ -9482,24 +9521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }] } });
 
 class SliderSlideComponent {
-    set style(v) {
-        if (v === this._style)
-            return;
-        this._style = v;
-        // Strip width constraints; rebuild cached object so ngStyle only updates DOM
-        // when the input actually changed — prevents spurious MutationObserver triggers.
-        const { width, minWidth, maxWidth, ...rest } = v || {};
-        this._slideEditStyle = rest;
-    }
-    get style() { return this._style; }
-    get slideEditStyle() { return this._slideEditStyle; }
     constructor(dragEngine, cdr, isPreview) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.isPreview = isPreview;
         this.children = [];
-        this._style = {};
-        this._slideEditStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
@@ -9513,18 +9539,15 @@ class SliderSlideComponent {
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, deps: [{ token: DragEngineService }, { token: i0.ChangeDetectorRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: SliderSlideComponent, isStandalone: false, selector: "app-slider-slide", inputs: { children: "children", nodeId: "nodeId", dropListId: "dropListId" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <!-- The .swiper-slide wrapper (with the iox-outer-* class) is provided by SliderContainer —
              Swiper needs it as a direct child of .swiper-wrapper — and the SLIDE'S size lands there
-             via StyleRegistryService. This is only the styled INNER block, so width/min-width/
-             max-width MUST be stripped (slideEditStyle): the slide is already sized on the outer
-             wrapper, and re-applying width here would size the content to 71% OF the 71% slide (the
-             engine's iox-slider-slide is a single host, so it never had this trap). Preview and edit
-             behave identically — the earlier preview branch used the un-stripped style input and
-             shrank the content inside its own slide. -->
+             via StyleRegistryService (width is an outer prop). This is only the styled INNER block:
+             its look (aspect-ratio, background, radius, the media style's hover scale) comes from
+             the node's .iox-node-{id} class rule ONLY, like every other component — an inline
+             base map beat the rule's :hover (DS2 verification). -->
         <div class="slide-edit-block"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -9548,22 +9571,19 @@ class SliderSlideComponent {
                 </ng-container>
             </div>
         </div>
-    `, isInline: true, styles: [".slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
+    `, isInline: true, styles: [":where(.slide-edit-block){position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;background-color:var(--p-surface-300)}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: RenderDirective, selector: "[ioxRender]", inputs: ["ioxRender", "ioxDragSourceId"], outputs: ["onClick", "onMouseEnter", "onMouseLeave"] }, { kind: "directive", type: IoxDraggableDirective, selector: "[ioxDraggable]", inputs: ["ioxDragData", "ioxDragSourceId", "ioxDragDisabled"] }, { kind: "directive", type: IoxDropzoneDirective, selector: "[ioxDropzone]", inputs: ["ioxDropzoneId", "ioxDropzoneData", "ioxDropzonePostDrop"], outputs: ["ioxDrop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SliderSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-slider-slide', template: `
         <!-- The .swiper-slide wrapper (with the iox-outer-* class) is provided by SliderContainer —
              Swiper needs it as a direct child of .swiper-wrapper — and the SLIDE'S size lands there
-             via StyleRegistryService. This is only the styled INNER block, so width/min-width/
-             max-width MUST be stripped (slideEditStyle): the slide is already sized on the outer
-             wrapper, and re-applying width here would size the content to 71% OF the 71% slide (the
-             engine's iox-slider-slide is a single host, so it never had this trap). Preview and edit
-             behave identically — the earlier preview branch used the un-stripped style input and
-             shrank the content inside its own slide. -->
+             via StyleRegistryService (width is an outer prop). This is only the styled INNER block:
+             its look (aspect-ratio, background, radius, the media style's hover scale) comes from
+             the node's .iox-node-{id} class rule ONLY, like every other component — an inline
+             base map beat the rule's :hover (DS2 verification). -->
         <div class="slide-edit-block"
              [ngClass]="['iox-node-' + nodeId]"
-             [ngStyle]="slideEditStyle"
              ioxDropzone
              [ioxDropzoneId]="dropListId"
              [ioxDropzoneData]="children"
@@ -9587,7 +9607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 </ng-container>
             </div>
         </div>
-    `, standalone: false, styles: [".slide-edit-block{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--p-surface-300)}.slide-edit-block{width:100%}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
+    `, standalone: false, styles: [":where(.slide-edit-block){position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;background-color:var(--p-surface-300)}.slide-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}:host:hover .slide-placeholder,:host.iox-drag-over .slide-placeholder{opacity:1}.slide-placeholder i{font-size:22px}\n"] }]
         }], ctorParameters: () => [{ type: DragEngineService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -9595,8 +9615,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     args: [IS_PREVIEW]
                 }] }], propDecorators: { children: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], nodeId: [{
                 type: Input
             }], dropListId: [{
@@ -10131,6 +10149,42 @@ function setTrait(node, name, value) {
         trait.default = value;
 }
 
+const PRESENTATION = {
+    card: { icon: 'ph-thin ph-cards', description: 'A Container with the Card look: surface, border, radius and a hover lift.' },
+    panel: { icon: 'ph-thin ph-square-half', description: 'A quiet tinted block for grouping content.' },
+    nav: { icon: 'ph-thin ph-app-window', description: 'A <nav> row: brand at one end, links at the other.' },
+};
+const PALETTE_PRESET_DEFS = Object.freeze(PALETTE_PRESETS.map(preset => ({
+    id: preset.elementStyle,
+    name: preset.label,
+    icon: PRESENTATION[preset.elementStyle]?.icon ?? 'ph-thin ph-square',
+    description: PRESENTATION[preset.elementStyle]?.description ?? '',
+    preset,
+})));
+function setDefault(list, name, value) {
+    const hit = list?.find(t => t.name === name);
+    if (hit)
+        hit.default = value;
+}
+/**
+ * A fresh preset node: the type's NEW-element config (already wearing its own default style), moved
+ * onto the preset's element style, then the preset's traits and layout styleProps on top.
+ */
+function buildPalettePreset(def, createConfig) {
+    const node = createConfig(def.preset.type);
+    if (!node)
+        return null;
+    applyElementStyle(node, def.preset.elementStyle);
+    for (const [name, value] of Object.entries(def.preset.traits ?? {}))
+        setDefault(node.traits, name, value);
+    for (const [name, value] of Object.entries(def.preset.styleProps)) {
+        for (const group of node.styleTraits ?? [])
+            setDefault(group.traits, name, value);
+    }
+    node.label = def.name;
+    return node;
+}
+
 function text$1(content, styles, createConfig) {
     const node = textNode(content, createConfig);
     if (node)
@@ -10490,12 +10544,18 @@ class BuilderButtonComponentConfig extends ComponentConfig {
             new TraitConfig('variant', 'Variant', TraitInputType.Select, ['primary', 'outlined', 'text'], 'primary'),
         ];
         this.styleTraits = buildFullStyleTraits();
+        // Hidden from the palette since DS2 (design-system plan T5): its `:host.variant-*` CSS
+        // out-ranks the node rule, so an author's colour silently lost. ButtonBlock is "Button".
+        // Stays registered and renderable for the saved pages that hold one.
+        this.hidden = true;
     }
 }
 
 class ButtonBlockComponentConfig extends ComponentConfig {
     constructor() {
         super('ButtonBlock', 'app-builder-button-block', 'ph-thin ph-cursor-click', 'Basic');
+        // The palette's one button since DS2 (the legacy Button is hidden).
+        this.label = 'Button';
         this.children = [];
         this.inputs = {
             tag: 'select',
@@ -10618,13 +10678,16 @@ class GalleryConfig extends ComponentConfig {
             new TraitConfig('fadeDuration', 'Fade duration (ms)', TraitInputType.Number, undefined, 1000),
             new TraitConfig('autoStart', 'Auto start', TraitInputType.Checkbox, undefined, true),
         ];
-        // Styling: size + spacing + border + background (letterbox). No typography (not text-bearing).
+        // Styling: size + spacing + border + background (letterbox) + effects. No typography (not
+        // text-bearing). Effects since DS2: the Image element style a Gallery may wear writes a
+        // transition and a hover scale, and a trait with no slot is silently dropped.
         this.styleTraits = [
             new PositionGroupStyleConfig(),
             new SizeGroupStyleConfig(),
             new SpacingGroupStyleConfig(),
             new BorderGroupStyleConfig(),
             new BackgroundGroupStyleConfig(),
+            new EffectsGroupStyleConfig(),
         ];
         // Size traits stay at their group default (auto) so a gallery starts unconstrained. The one
         // exception is `minHeight: 200px` — the image layers are absolutely positioned (no intrinsic
@@ -11147,6 +11210,8 @@ class SliderSlideConfig extends ComponentConfig {
             new BorderGroupStyleConfig(),
             new BackgroundGroupStyleConfig(),
             new TypographyGroupStyleConfig(),
+            // DS2: the default `media` element style writes a transition and a hover scale.
+            new EffectsGroupStyleConfig(),
         ];
         this.applyStyleDefaults({
             width: '33%',
@@ -11297,5 +11362,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, DEFAULT_ESSENTIAL_TRAITS, DRAG_HANDLE_ATTR, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_PRESETS, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GalleryConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, IOX_FONT_MANAGER, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, buildConsentPreset, buildFieldKindPreset, buildFlavorSampler, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, canFluidise, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropTargetLabel, essentialTraitsFor, findNodeLocation, findParentOf, flattenSchemaFields, fluidiseProps, generateNodeId, isHiddenAt, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, reorderProps, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, setStyleTrait, setTrait, stackChildrenProps, summarise, textNode, visibilityProps, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map