@vectoriox/iox-builder 4.38.0 → 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, Breakpoint, BREAKPOINTS, countOverrides, setOverride, defaultElementStyleFor, applyElementStyle, breakpointDef, breakpointForWidth, FormRenderState, safeSetInput, ContextStore, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, buildTargetedStateSelector, statePseudoClass, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, composeVirtualTraits, stateNamesIn, partClassName, 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';
+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';
@@ -1797,78 +1797,463 @@ 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
-// 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)';
-// Per-frame exponential smoothing factor for the drag ghost's cursor-follow.
-// Was: ghost position set 1:1 to the pointer every dragmove (rigid/teleporty).
-// Lower = more lag/weight, higher = snappier. 0.35 catches up to the pointer
-// within ~5-6 frames (~80-100ms) — reads as "responsive but weighted".
-const GHOST_FOLLOW_SMOOTHING = 0.35;
-function deepCloneNode(node) {
-    const clone = JSON.parse(JSON.stringify(node));
-    // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
-    // structure stays self-consistent — e.g. trigger-hover keeps pointing at the clone's own trigger.
-    regenerateNodeIds(clone);
-    return clone;
-}
-class DragEngineService {
-    constructor(registry, symbolRegistry, overlayService) {
-        this.registry = registry;
+    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)';
+// Per-frame exponential smoothing factor for the drag ghost's cursor-follow.
+// Was: ghost position set 1:1 to the pointer every dragmove (rigid/teleporty).
+// Lower = more lag/weight, higher = snappier. 0.35 catches up to the pointer
+// within ~5-6 frames (~80-100ms) — reads as "responsive but weighted".
+const GHOST_FOLLOW_SMOOTHING = 0.35;
+function deepCloneNode(node) {
+    const clone = JSON.parse(JSON.stringify(node));
+    // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
+    // structure stays self-consistent — e.g. trigger-hover keeps pointing at the clone's own trigger.
+    regenerateNodeIds(clone);
+    return clone;
+}
+class DragEngineService {
+    constructor(registry, symbolRegistry, overlayService) {
+        this.registry = registry;
         this.symbolRegistry = symbolRegistry;
         this.overlayService = overlayService;
         // ── Drop-zone registry ────────────────────────────────────
@@ -2231,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);
@@ -3348,723 +3737,339 @@ class InteractionEngineService {
             }
             // Context actions write STATE, not animation. `selfEl` is deliberate: $item is read by
             // walking up from the element actually hovered/clicked, which for a repeater PREVIEW ROW
-            // is the clone — so each row publishes its own item, exactly as on the live site.
-            if (isContextAction(action)) {
-                this.applyContextAction(action, selfEl ?? null, 'forward');
-                continue;
-            }
-            // selfEl lets 'self'-targeted actions resolve for preview CLONES, which aren't
-            // overlay-registered (getNodeRef would return undefined) — see attachTo. (issue #2)
-            const target = this.resolveTarget(node, action, selfEl);
-            if (!target)
-                continue;
-            this.executeAction(target, action);
-        }
-    }
-    /**
-     * Execute a context action against the shared store. The forward/reverse semantics come from
-     * `contextActionEffect` in @vectoriox/iox-ui — the same function the SSR engine calls, so the
-     * builder canvas and the live site behave identically.
-     */
-    applyContextAction(action, el, pass) {
-        const effect = contextActionEffect(action, pass);
-        if (!effect)
-            return;
-        if (effect.op === 'clear') {
-            this.contextStore.clear(effect.slot);
-            return;
-        }
-        const value = resolveContextValue(effect.value, {
-            item: this.rowItemFor(el),
-            resolvedData: this.contextData,
-        });
-        this.contextStore.set(effect.slot, value);
-    }
-    /** The repeater item this element belongs to — the nearest marked row ancestor. */
-    rowItemFor(el) {
-        const row = el?.closest?.('[data-iox-row-idx]');
-        if (!row)
-            return undefined;
-        const source = row.getAttribute('data-iox-row-src') ?? '';
-        const index = Number(row.getAttribute('data-iox-row-idx'));
-        const items = this.contextData?.[source];
-        return Array.isArray(items) && Number.isInteger(index) ? items[index] : undefined;
-    }
-    /** Resolved data for the canvas, kept current by the repeater as it fetches. */
-    setContextData(data) {
-        // MERGE, not replace — a page can hold several repeaters, each publishing its own source.
-        this.contextData = { ...this.contextData, ...(data ?? {}) };
-    }
-    executeBehaviourAction(node, action, selfEl) {
-        switch (action.type) {
-            case 'copyToClipboard': {
-                const text = String(action.params?.['text'] ?? '');
-                if (text)
-                    navigator.clipboard?.writeText(text).catch(() => { });
-                return;
-            }
-            case 'scrollTo': {
-                const target = this.resolveTarget(node, action, selfEl);
-                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                return;
-            }
-            case 'navigate':
-            case 'submitForm': {
-                // Simulated: the host (the admin app) listens and shows "would …" as a toast.
-                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
-                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
-                return;
-            }
-        }
-    }
-    executeConsentAction(action) {
-        if (action.type === 'openConsentPreferences') {
-            const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
-            dialog?.open?.();
-            return;
-        }
-        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
-        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
-    }
-    executeDialogAction(action) {
-        const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
-        if (!dialog)
-            return;
-        switch (action.type) {
-            case 'openDialog':
-                dialog.open?.();
-                break;
-            case 'closeDialog':
-                dialog.close?.();
-                break;
-            case 'toggleDialog':
-                dialog.toggle?.();
-                break;
-        }
-    }
-    executeSwiperAction(action) {
-        // Target is the nodeId of the SliderContainer to control.
-        const swiper = this.instanceRegistry.get(action.target);
-        if (!swiper)
-            return;
-        switch (action.type) {
-            case 'swiperNext':
-                swiper.slideNext();
-                break;
-            case 'swiperPrev':
-                swiper.slidePrev();
-                break;
-            case 'swiperGoToSlide':
-                swiper.slideTo(action.params?.['index'] ?? 0);
-                break;
-            case 'swiperAutoplayStart':
-                swiper.autoplay?.start();
-                break;
-            case 'swiperAutoplayStop':
-                swiper.autoplay?.stop();
-                break;
-            case 'swiperAutoplayPause':
-                swiper.autoplay?.pause();
-                break;
-        }
-    }
-    resolveTarget(ownerNode, action, selfEl) {
-        if (action.target === 'self' || !action.target) {
-            return selfEl ?? this.overlayService.getNodeRef(ownerNode)?.element ?? null;
-        }
-        // Find by node ID
-        for (const [n, ref] of this.overlayService.getAllNodeEntries()) {
-            if (n.id === action.target)
-                return ref.element;
-        }
-        return null;
-    }
-    executeAction(element, action) {
-        const { keyframes } = this.buildAnimation(action);
-        if (!keyframes.length)
-            return;
-        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
-        const anim = element.animate(keyframes, {
-            duration: action.duration,
-            delay: action.delay,
-            easing: action.easing,
-            fill: 'both',
-        });
-        if (this.ENTRANCE_TYPES.has(action.type)) {
-            anim.finished.then(() => {
-                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';
-/**
- * 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.
- *
- * 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 `.iox-token-scope { … }` 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;
+            // is the clone — so each row publishes its own item, exactly as on the live site.
+            if (isContextAction(action)) {
+                this.applyContextAction(action, selfEl ?? null, 'forward');
+                continue;
+            }
+            // selfEl lets 'self'-targeted actions resolve for preview CLONES, which aren't
+            // overlay-registered (getNodeRef would return undefined) — see attachTo. (issue #2)
+            const target = this.resolveTarget(node, action, selfEl);
+            if (!target)
+                continue;
+            this.executeAction(target, action);
         }
-        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).
+     * Execute a context action against the shared store. The forward/reverse semantics come from
+     * `contextActionEffect` in @vectoriox/iox-ui — the same function the SSR engine calls, so the
+     * builder canvas and the live site behave identically.
      */
-    upsertResponsive(nodeId, styleProps, stateStyles, responsive) {
-        if (!nodeId)
+    applyContextAction(action, el, pass) {
+        const effect = contextActionEffect(action, pass);
+        if (!effect)
             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))
+        if (effect.op === 'clear') {
+            this.contextStore.clear(effect.slot);
             return;
-        if (hasOverrides)
-            this.responsiveInputs.set(nodeId, { styleProps, stateStyles, responsive: responsive });
-        else
-            this.responsiveInputs.delete(nodeId);
-        this.emitResponsive(nodeId);
-        this.flush();
+        }
+        const value = resolveContextValue(effect.value, {
+            item: this.rowItemFor(el),
+            resolvedData: this.contextData,
+        });
+        this.contextStore.set(effect.slot, value);
     }
-    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);
+    /** The repeater item this element belongs to — the nearest marked row ancestor. */
+    rowItemFor(el) {
+        const row = el?.closest?.('[data-iox-row-idx]');
+        if (!row)
+            return undefined;
+        const source = row.getAttribute('data-iox-row-src') ?? '';
+        const index = Number(row.getAttribute('data-iox-row-idx'));
+        const items = this.contextData?.[source];
+        return Array.isArray(items) && Number.isInteger(index) ? items[index] : undefined;
+    }
+    /** Resolved data for the canvas, kept current by the repeater as it fetches. */
+    setContextData(data) {
+        // MERGE, not replace — a page can hold several repeaters, each publishing its own source.
+        this.contextData = { ...this.contextData, ...(data ?? {}) };
+    }
+    executeBehaviourAction(node, action, selfEl) {
+        switch (action.type) {
+            case 'copyToClipboard': {
+                const text = String(action.params?.['text'] ?? '');
+                if (text)
+                    navigator.clipboard?.writeText(text).catch(() => { });
+                return;
+            }
+            case 'scrollTo': {
+                const target = this.resolveTarget(node, action, selfEl);
+                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                return;
+            }
+            case 'navigate':
+            case 'submitForm': {
+                // Simulated: the host (the admin app) listens and shows "would …" as a toast.
+                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+                return;
             }
         }
     }
-    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]);
+    executeConsentAction(action) {
+        if (action.type === 'openConsentPreferences') {
+            const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+            dialog?.open?.();
+            return;
+        }
+        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
     }
-    clearResponsive(nodeId) {
-        for (const [bp, key] of this.responsiveKeys.get(nodeId) ?? [])
-            this.responsiveRules.get(bp)?.delete(key);
-        this.responsiveKeys.delete(nodeId);
+    executeDialogAction(action) {
+        const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+        if (!dialog)
+            return;
+        switch (action.type) {
+            case 'openDialog':
+                dialog.open?.();
+                break;
+            case 'closeDialog':
+                dialog.close?.();
+                break;
+            case 'toggleDialog':
+                dialog.toggle?.();
+                break;
+        }
     }
-    isOutOfFlow(styles) {
-        const pos = String(styles['position'] ?? '');
-        return pos === 'fixed' || pos === 'absolute';
+    executeSwiperAction(action) {
+        // Target is the nodeId of the SliderContainer to control.
+        const swiper = this.instanceRegistry.get(action.target);
+        if (!swiper)
+            return;
+        switch (action.type) {
+            case 'swiperNext':
+                swiper.slideNext();
+                break;
+            case 'swiperPrev':
+                swiper.slidePrev();
+                break;
+            case 'swiperGoToSlide':
+                swiper.slideTo(action.params?.['index'] ?? 0);
+                break;
+            case 'swiperAutoplayStart':
+                swiper.autoplay?.start();
+                break;
+            case 'swiperAutoplayStop':
+                swiper.autoplay?.stop();
+                break;
+            case 'swiperAutoplayPause':
+                swiper.autoplay?.pause();
+                break;
+        }
     }
-    /**
-     * 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;
+    resolveTarget(ownerNode, action, selfEl) {
+        if (action.target === 'self' || !action.target) {
+            return selfEl ?? this.overlayService.getNodeRef(ownerNode)?.element ?? 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;
+        // Find by node ID
+        for (const [n, ref] of this.overlayService.getAllNodeEntries()) {
+            if (n.id === action.target)
+                return ref.element;
         }
-        // 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)}`;
+        return null;
     }
-    /**
-     * 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;
-            }
+    executeAction(element, action) {
+        const { keyframes } = this.buildAnimation(action);
+        if (!keyframes.length)
+            return;
+        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end).
+        const anim = element.animate(keyframes, {
+            duration: action.duration,
+            delay: action.delay,
+            easing: action.easing,
+            fill: 'both',
+        });
+        if (this.ENTRANCE_TYPES.has(action.type)) {
+            anim.finished.then(() => {
+                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(() => { });
         }
-        // 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 `.iox-token-scope { … }` block (see
-     * BUILDER_TOKEN_SCOPE_CLASS — never `:root`, which the admin's chrome tokens own).
-     * 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__', `.${BUILDER_TOKEN_SCOPE_CLASS} {\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  .${BUILDER_TOKEN_SCOPE_CLASS} {\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
         }] });
 
@@ -4496,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'];
 /**
@@ -4700,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.
@@ -4801,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
@@ -7826,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
@@ -7849,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
@@ -7879,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
                 }, {
@@ -8548,7 +8562,6 @@ class BuilderDialogComponent {
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.children = [];
-        this.style = {};
         this.nodeId = '';
         this.dropListId = '';
         this.closeOnBackdrop = true;
@@ -8619,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"
@@ -8652,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:var(--iox-scrim, rgba(15, 23, 42, .45))}.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:var(--iox-radius-pill, 999px);background:var(--iox-dialog-close-bg, rgba(15, 23, 42, .06));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"
@@ -8689,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:var(--iox-scrim, rgba(15, 23, 42, .45))}.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:var(--iox-radius-pill, 999px);background:var(--iox-dialog-close-bg, rgba(15, 23, 42, .06));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: [{
@@ -9512,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();
@@ -9543,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"
@@ -9578,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"
@@ -9617,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
                 }, {
@@ -9625,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: [{