@vectoriox/iox-builder 11.15.1 → 11.16.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,9 +17,9 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, entranceStartsHidden, isActionEnabled, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, showToast, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, attachTooltips, showToastDesign, TOOLTIP_ATTRIBUTE, hidingHeadersIn, HeaderRuntime, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, layerFrame, rectInLayer, placeFloating, FloatingAlign, popoverSide, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
+import { nodeCssId, needsGroupName, resolveBoundValue, STRUCTURAL_STATES as STRUCTURAL_STATES$1, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, planPartRule, gateHoverRule, planResponsiveRules, resolveStyleProps, planStateRule, splitOuterProps, OUTER_STYLE_PROPS, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, isLastEmittedStateKey, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, PROGRESS_ATTRIBUTE, interactionMarkerAttributes, cascadeChain, attachScrollProgress, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, syncInteractionMarkers, entranceStartsHidden, isActionEnabled, restoreCountUp, SCROLL_PROGRESS_TRIGGER, armInteractionCounts, splitPressFeedback, isHoverPointer, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, COUNT_UP_ACTION, motionAllowed, settleInteraction, settleModeFor, playInteraction, resolveInteractionEasing, entranceDelay, repeatedRowIndex, entrancePreStateStyle, buildInteractionKeyframes, showToast, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, withStateTransitions, composeVirtualTraits, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, attachTooltips, showToastDesign, TOOLTIP_ATTRIBUTE, hidingHeadersIn, HeaderRuntime, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, layerFrame, rectInLayer, placeFloating, FloatingAlign, popoverSide, bootSlider, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, DisclosureRole, isExclusiveTrigger, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts, SLIDE_CAPTION_TRAIT, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_PLACEMENT_TRAIT, SliderPlacement, SliderFlag } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, isSliderPart, isTabsPart, isSegmentedPart, structureRefusal, StructureRefusal, SegmentedRole, SEGMENTED_MAX_OPTIONS, AccordionRole, SEGMENTED_MIN_OPTIONS, isExclusiveItemPart, TabsRole, ITEM_OPEN_STATE, readStyle, isSegmentedRoot, segmentedDefaultOn, segmentedOptions, isTabsRoot, isTabsFromContent, tabsTriggers, isAccordionRoot, isAccordionFromContent, accordionItems, initialAccordionOpen, accordionBehaviour, exclusiveItemLabel, exclusiveRootOf, tabTriggerOf, tabLabel, removeTabPair, tabPanelOf, tabsListOf, tabsPanelsOf, nextTabKey, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, TabsBehaviourTrait, TABS_ACTIVATE_ONS, TABS_ORIENTATIONS, MarqueeTrait, MarqueeSpeed, MarqueeDirection, DisclosureRole, isExclusiveTrigger, onCompositeItemState, isCompositeItemOn, runCompositeItemAction, shouldScrollToItem, rowIndexOf as rowIndexOf$1, slideIndexForRow, isMarqueeRoot, compositeScopeId, compositeRowKeys, isExclusiveRoot, ExclusiveRuntime, exclusiveDefaultOf, exclusiveLabelOf, exclusiveBehaviourOf, exclusiveKindOf, compositeKindOfRole, AccordionRuntime, isToggleKind, MarqueeRuntime, closestAccordionItem, isAnyCompositeRoot, SceneRole, isExclusiveList, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, buildTabsRecipe, buildSegmentedRecipe, buildLightboxRecipe, buildMarqueeRecipe, buildCounterRecipe, buildReadingBarRecipe, NO_ELEMENT_STYLE, CompositeKind, SliderRole, accordionItemLabel, segmentedOptionLabel, isExclusivePanels, isLockedPart, accordionRootOf, accordionItemOf, addAccordionItem, addTabPair, segmentedAddRefusal, addSegmentedOption, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger, splitSliderChildren, hasSliderParts, SLIDE_CAPTION_TRAIT, SLIDER_SCROLL_PLAYS_TRAIT, SLIDER_PLACEMENT_TRAIT, SliderPlacement, SliderFlag } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts, FORM_CHANNEL_ROLE, channelHref, channelOpensNewTab, FORM_ACTIONS_ROLE, SUBMIT_BUTTON_NODE_TYPE, FORM_AFTER_SEND_TRAIT, FormAfterSend } from '@vectoriox/iox-ui/forms-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
@@ -1338,6 +1338,9 @@ const ACTION_TYPE_OPTIONS = [
     { value: 'clipReveal', label: 'Reveal' },
     { value: 'zoomOut', label: 'Zoom settle' },
     { value: 'revealText', label: 'Reveal text' },
+    { value: 'countUp', label: 'Count up' },
+    { value: 'parallax', label: 'Depth (parallax)' },
+    { value: 'progressBar', label: 'Fill as read' },
     { value: 'show', label: 'Show' },
     { value: 'hide', label: 'Hide' },
     { value: 'toggleVisibility', label: 'Toggle visibility' },
@@ -1948,6 +1951,18 @@ function buildCompositeBehaviourTraits() {
         new TraitConfig(TabsBehaviourTrait.Label, 'Accessible name', TraitInputType.Text),
     ];
 }
+/**
+ * A Marquee band's own settings (premium components M6, N6) — on the band's root Container. No default: a plain Container
+ * saves none (the recipe writes them); edited in Bindings ▸ Marquee, never as generic rows.
+ */
+function buildMarqueeTraits() {
+    return [
+        new TraitConfig(MarqueeTrait.Speed, 'Speed', TraitInputType.Select, Object.values(MarqueeSpeed).map(v => ({ label: v, value: v }))),
+        new TraitConfig(MarqueeTrait.Direction, 'Direction', TraitInputType.Select, Object.values(MarqueeDirection).map(v => ({ label: v, value: v }))),
+        new TraitConfig(MarqueeTrait.Fade, 'Fade the edges', TraitInputType.Checkbox),
+        new TraitConfig(MarqueeTrait.PauseOnHover, 'Pause on hover', TraitInputType.Checkbox),
+    ];
+}
 /**
  * How a header behaves as the page scrolls (premium components T2, M4) — on the Navigation bar's root. No default: a
  * plain Container saves none; edited in the Navigation bar's Header section, never as generic rows.
@@ -4111,1092 +4126,1277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 // Re-exported from the shared iox-ui package so iox-builder consumers
 // don't need to import from two different packages.
 
-/** What the canvas never writes inline (a transform inside the scaled page breaks Lenis). */
-const CANVAS_SKIPPED_PROPS = new Set(['transform']);
 /**
- * Wires ComponentNode interactions to live DOM elements via the
- * OverlayService node-element registry.
+ * Parts that are HIDDEN AT REST (complex-components R2, board 3): on the live site they are not on
+ * screen until something opens them, so on the canvas they show only while selected into or switched
+ * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. A Dialog (the mobile
+ * menu's drawer, a consent banner) by its type; an Accordion's PANEL by its role (CC2 — closed until its
+ * item opens); a Disclosure's panel and its "Read less" word (CC2.1 — shown only while it is open).
+ */
+const HIDDEN_AT_REST_TYPES = ['Dialog', 'Popover'];
+const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel, DisclosureRole.Panel, DisclosureRole.Less];
+/** A READING BAR (premium M6, N7): empty until the scroll fills it, so on the canvas the selection holds it full. */
+function isReadingBar(node) {
+    return PROGRESS_ATTRIBUTE in interactionMarkerAttributes(node);
+}
+function isHiddenAtRest(node) {
+    return (!!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type)) || (!!node?.role && HIDDEN_AT_REST_ROLES.includes(node.role)) || isReadingBar(node);
+}
+/**
+ * How the selection shows a node hidden at rest — the two approved rules, by what the node IS:
+ * - a PART of a composite (it carries a `role`: the mobile menu's drawer) follows R2 (board 3): the
+ *   selection is the reveal, and moving it out of the part hides it again;
+ * - a free-standing overlay (a plain Dialog) follows board A4: selecting it opens it, and it stays open
+ *   while the author works elsewhere, until its X, its backdrop or the eye closes it.
+ */
+var SelectionReveal;
+(function (SelectionReveal) {
+    SelectionReveal["WhileSelected"] = "while-selected";
+    SelectionReveal["UntilClosed"] = "until-closed";
+})(SelectionReveal || (SelectionReveal = {}));
+/**
+ * Parts hidden at rest that live in a composite's TOGGLE, not in its panel (CC2.1 follow-up, approved 2026-10-21): a
+ * click on one on the canvas toggles the composite live — selecting it never forces the reveal, so "Read less"
+ * closes the disclosure it was clicked in. Only a part inside a PANEL is revealed by the selection.
+ */
+const TOGGLE_PART_ROLES = [DisclosureRole.Less];
+/**
+ * Parts the selection REVEALS though they are not hidden at rest (CC4a): a tab PANEL — one is always on, so the layer
+ * tree draws it no eye-slash (board 3), but selecting anything inside an inactive one shows its tab while selected.
+ */
+const REVEALED_WHILE_SELECTED_ROLES = [TabsRole.Panel];
+function selectionRevealOf(node) {
+    if ((!!node?.role && REVEALED_WHILE_SELECTED_ROLES.includes(node.role)) || isReadingBar(node))
+        return SelectionReveal.WhileSelected;
+    if (!isHiddenAtRest(node) || (!!node?.role && TOGGLE_PART_ROLES.includes(node.role)))
+        return null;
+    return node?.role ? SelectionReveal.WhileSelected : SelectionReveal.UntilClosed;
+}
+/** Root → `target`, inclusive, across `roots` (page layout and globals), or [] when it is not there. */
+function pathToNode(roots, target) {
+    for (const root of roots) {
+        if (root === target)
+            return [root];
+        const below = pathToNode(root.children ?? [], target);
+        if (below.length)
+            return [root, ...below];
+    }
+    return [];
+}
+
+const NAV_CONTEXT_ROLES = new Set([NavRole.Root, NavRole.Drawer, NavRole.Bar]);
+function findRole(nodes, role) {
+    for (const n of nodes) {
+        if (n.role === role)
+            return n;
+        const below = findRole(n.children ?? [], role);
+        if (below)
+            return below;
+    }
+    return null;
+}
+/** True when the selection (root → selected) is the Navigation bar, its drawer, its bottom bar, or anything inside them. */
+function inPhoneMenuContext(path) {
+    return path.some(n => !!n.role && NAV_CONTEXT_ROLES.has(n.role));
+}
+/**
+ * The phone menu a selection belongs to, or null when the selection is outside a navigation or the site has no drawer
+ * (no phone shape yet, or the Bottom bar shape). The drawer is looked up in the selection's own Navigation bar first,
+ * then in the globals (the Both shape makes it a global of its own).
+ */
+function phoneMenuOf(path, globals = []) {
+    if (!inPhoneMenuContext(path))
+        return null;
+    const root = path.find(n => n.role === NavRole.Root) ?? null;
+    const scopes = root ? [root, ...globals] : [...globals];
+    const drawer = path.find(n => n.role === NavRole.Drawer) ?? findRole(scopes, NavRole.Drawer);
+    if (!drawer)
+        return null;
+    const menuButton = findRole(scopes, NavRole.MenuButton);
+    const at = navShapeBreakpoint(scopes);
+    return { root, drawer, menuButton, at };
+}
+/** True when the canvas, at `breakpoint`, shows the phone menu that takes over at `at` (that width or narrower). */
+function phoneMenuShowsAt(at, breakpoint) {
+    return cascadeChain(breakpoint).includes(at);
+}
+const OPENER_TRIGGER = 'click';
+/** The dialog actions a phone menu's opener runs (generation-core stamps Toggle; CC1 menus still hold Open). */
+var PhoneMenuOpenerAction;
+(function (PhoneMenuOpenerAction) {
+    PhoneMenuOpenerAction["Open"] = "openDialog";
+    PhoneMenuOpenerAction["Toggle"] = "toggleDialog";
+})(PhoneMenuOpenerAction || (PhoneMenuOpenerAction = {}));
+const OPENER_ACTIONS = new Set(Object.values(PhoneMenuOpenerAction));
+/** True when `interaction` is the phone menu's own opener: the menu button's (or More's) click opening the drawer. */
+function isPhoneMenuOpener(node, interaction, drawerId) {
+    if (!drawerId || (node?.role !== NavRole.MenuButton && node?.role !== NavRole.More))
+        return false;
+    const actions = interaction?.actions ?? [];
+    return interaction?.trigger === OPENER_TRIGGER && actions.length === 1
+        && OPENER_ACTIONS.has(actions[0].type ?? '') && actions[0].target === drawerId;
+}
+
+/** What a hidden-at-rest part shows on the canvas when the author picks it in "Showing on canvas". */
+var CanvasShowState;
+(function (CanvasShowState) {
+    CanvasShowState["Closed"] = "closed";
+    CanvasShowState["Open"] = "open";
+})(CanvasShowState || (CanvasShowState = {}));
+const EMPTY_SNAPSHOT = () => ({
+    revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map(),
+    runtime: new Set(), menu: null, tooltips: new Set(), toast: null,
+});
+/**
+ * The canvas's DESIGN state (complex-components R2; composite plan §5a's CompositeDesignStateService,
+ * started here for the navigation and reused by Accordion in CC2): which parts that are hidden at rest
+ * — a closed drawer today, a collapsed panel or an inactive tab next — the canvas shows right now.
  *
- * Call `attach(node)` after the node is rendered and registered.
- * Call `detach(node)` on destroy to tear down listeners/observers.
+ * Two sources, the Dialog's "selection is the reveal" and the Form's switcher, generalised:
+ * - **the selection** — selecting anything inside a hidden part (tree, breadcrumb, an Items row,
+ *   SELECT_NODE) shows it; deselecting hides it again (`setSelectionPath`);
+ * - **"Showing on canvas"** — the Bindings panel's switcher, for the one case a selection cannot express:
+ *   the page with the menu open while a part OUTSIDE it is selected (`setShown`).
+ *
+ * Canvas-only: never saved, never a history step. Also carries the canvas page's path, so a link to the
+ * page being edited renders as the current page (N2) — the same decision the live site makes.
  */
-class InteractionEngineService {
-    constructor(overlayService) {
-        this.overlayService = overlayService;
-        this.attached = new Map();
-        /** Shared with the SSR engine — one store type, one set of semantics. */
-        this.contextStore = inject(ContextStore);
-        /** Resolved data for the canvas, so a row marker (source + index) resolves back to its item. */
-        this.contextData = {};
-        /** Elements that have had pre-state applied (hidden by attach). */
-        this.preStatedElements = new Set();
-        /**
-         * Toggle state for click interactions with reverseActions.
-         * false = next click runs actions (primary); true = next click runs reverseActions.
-         */
-        this.toggleStates = new Map();
-        /**
-         * Pre-states queued for elements that weren't registered yet when the owner
-         * node's attach() ran. Keyed by target node ID. Consumed when the target
-         * element's own attach() fires.
-         */
-        this.pendingPreStates = new Map();
-        /** Action types that animate an element from hidden → visible / visible → hidden — the SHARED sets
-         *  (@vectoriox/iox-ui), the same ones the live site's runtime reads. */
-        this.ENTRANCE_TYPES = ENTRANCE_ACTION_TYPES;
-        this.EXIT_TYPES = EXIT_ACTION_TYPES;
-        this.SWIPER_ACTIONS = new Set([
-            'swiperNext', 'swiperPrev', 'swiperGoToSlide',
-            'swiperAutoplayStart', 'swiperAutoplayStop', 'swiperAutoplayPause',
-        ]);
-        this.instanceRegistry = inject(ComponentInstanceRegistryService);
-        this.ngZone = inject(NgZone);
+class CanvasDesignStateService {
+    constructor() {
+        this._state$ = new BehaviorSubject(EMPTY_SNAPSHOT());
+        this.state$ = this._state$.asObservable();
+        this._pagePath$ = new BehaviorSubject(null);
+        /** The app path of the page on the canvas (`/work`), or null when unknown. */
+        this.pagePath$ = this._pagePath$.asObservable();
+    }
+    get snapshot() {
+        return this._state$.value;
+    }
+    get pagePath() {
+        return this._pagePath$.value;
+    }
+    setPagePath(path) {
+        const next = path ?? null;
+        if (next !== this._pagePath$.value)
+            this._pagePath$.next(next);
     }
     /**
-     * Run all DOM-manipulation operations (pre-state, observers, animations)
-     * outside the Angular zone so Zone.js does not schedule unnecessary CD ticks
-     * for each RAF/IntersectionObserver/animation callback.
-     * The caller is responsible for calling markForCheck() / refreshSelect() inside
-     * the zone after this returns.
+     * The selection moved. The hidden-at-rest PARTS on its path are revealed and every other part is not
+     * (R2); a free-standing overlay on the path is pinned open until it is closed (A4). `globals` lets it find the
+     * phone menu the selection belongs to when its drawer lives outside the path (the Both shape).
      */
-    runOutside(fn) {
-        return this.ngZone.runOutsideAngular(fn);
+    setSelectionPath(path, globals = []) {
+        const ids = (reveal) => path.filter(n => selectionRevealOf(n) === reveal).map(n => n.id).filter((id) => !!id);
+        const revealed = new Set(ids(SelectionReveal.WhileSelected));
+        const selectedTriggers = new Set(path.filter(n => isExclusiveTrigger(n)).map(n => n.id).filter((id) => !!id));
+        const triggeredBySelection = new Set(path.map(displayTriggerOf).filter((id) => !!id));
+        const { revealed: was, pinned: held, selectedTriggers: wasTriggers, triggeredBySelection: wasTriggered } = this._state$.value;
+        const pinned = new Set([...held, ...ids(SelectionReveal.UntilClosed)]);
+        const menu = phoneMenuOf(path, globals);
+        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers) && sameSet(triggeredBySelection, wasTriggered)
+            && sameMenu(menu, this._state$.value.menu))
+            return;
+        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection, menu });
     }
-    /** Wire all interactions for a node to its rendered DOM element. */
-    attach(node) { this.runOutside(() => this._attach(node)); }
-    /** Attach interactions to a node whose element is NOT overlay-registered — e.g. repeater/slider
-     *  PREVIEW CLONES, which are non-selectable but must still animate (parity with the SSR runtime,
-     *  which animates every repeated row). See RenderDirective. */
-    attachTo(node, element) { this.runOutside(() => this._attach(node, element)); }
-    _attach(node, elementOverride) {
-        const element = elementOverride ?? this.overlayService.getNodeRef(node)?.element;
-        if (!element)
+    /** Closed on the canvas (its X, its backdrop, the eye): no longer pinned, switched open or revealed by the
+     *  selection — selecting into it again reveals it again. */
+    dismiss(nodeId) {
+        if (!nodeId)
             return;
-        const inBuilder = this.isBuilderMode();
-        // Apply any pre-states queued for THIS element by earlier-registered nodes.
-        // Pending entries are only added when appropriate (see loop below), so always consume.
-        if (node.id) {
-            const pending = this.pendingPreStates.get(node.id);
-            if (pending) {
-                for (const action of pending) {
-                    this.applyPreState(element, action);
-                }
-                this.pendingPreStates.delete(node.id);
-            }
-        }
-        if (!node.interactions?.length)
+        const { pinned, shown, revealed, runtime } = this._state$.value;
+        if (!pinned.has(nodeId) && !shown.has(nodeId) && !revealed.has(nodeId) && !runtime.has(nodeId))
             return;
-        const cleanups = [];
-        for (const ix of node.interactions) {
-            // Pre-state: hide target elements before their entrance animation fires so
-            // the user sees a real hidden→visible animation on the canvas. Every trigger
-            // now runs live in the builder (see attachInteraction), so pre-state is applied
-            // for all of them EXCEPT scrollProgress — that trigger is unimplemented (no-op),
-            // so pre-stating it would leave the element stuck at opacity:0 forever.
-            // Under reduced motion a self-playing entrance starts shown and never moves (shared `entranceStartsHidden`).
-            const skipPreState = (inBuilder && ix.trigger === 'scrollProgress') || !entranceStartsHidden(ix.trigger);
-            if (!skipPreState) {
-                for (const action of ix.actions) {
-                    // A disabled action must not pre-state: it would hide the element with nothing
-                    // left to reveal it.
-                    if (!isActionEnabled(action))
-                        continue;
-                    if (this.ENTRANCE_TYPES.has(action.type)) {
-                        const target = this.resolveTarget(node, action, element);
-                        if (target) {
-                            this.applyPreState(target, action);
-                        }
-                        else if (action.target && action.target !== 'self') {
-                            const list = this.pendingPreStates.get(action.target) ?? [];
-                            list.push(action);
-                            this.pendingPreStates.set(action.target, list);
-                        }
-                    }
-                }
-            }
-            const cleanup = this.attachInteraction(node, ix, element);
-            cleanups.push({ node, interaction: ix, cleanup });
-        }
-        this.attached.set(node, cleanups);
+        const nextPinned = new Set(pinned);
+        nextPinned.delete(nodeId);
+        const nextShown = new Map(shown);
+        nextShown.delete(nodeId);
+        const nextRevealed = new Set(revealed);
+        nextRevealed.delete(nodeId);
+        const nextRuntime = new Set(runtime);
+        nextRuntime.delete(nodeId);
+        this._state$.next({ ...this._state$.value, pinned: nextPinned, shown: nextShown, revealed: nextRevealed, runtime: nextRuntime });
     }
-    /** Tear down all interaction listeners for a node and reset its animated state. */
-    detach(node) { this.runOutside(() => this._detach(node)); }
-    _detach(node) {
-        const entries = this.attached.get(node);
-        if (!entries)
+    /** An action opened the overlay on the canvas (a click on the menu button): shown until something closes it. */
+    markOpened(nodeId) {
+        if (!nodeId || this._state$.value.runtime.has(nodeId))
             return;
-        for (const entry of entries) {
-            entry.cleanup();
-        }
-        this.attached.delete(node);
-        // Reset toggle state so re-attach starts from the primary actions.
-        for (const entry of entries) {
-            if (entry.interaction.reverseActions?.length) {
-                this.toggleStates.delete(entry.interaction.id);
-            }
-        }
-        // Cancel Web Animations and strip any inline pre-state styles that
-        // were applied by applyPreState() so the element returns to its natural CSS state.
-        const ref = this.overlayService.getNodeRef(node);
-        if (ref) {
-            ref.element.getAnimations().forEach(a => a.cancel());
-            this.clearInlineAnimationStyles(ref.element);
-        }
-        // Also clean up pre-state on any target elements this node was animating.
-        if (node.interactions) {
-            for (const ix of node.interactions) {
-                for (const action of ix.actions) {
-                    // Remove any pending pre-states for unregistered targets.
-                    if (action.target && action.target !== 'self') {
-                        const pending = this.pendingPreStates.get(action.target);
-                        if (pending) {
-                            const filtered = pending.filter(a => a !== action);
-                            if (filtered.length) {
-                                this.pendingPreStates.set(action.target, filtered);
-                            }
-                            else {
-                                this.pendingPreStates.delete(action.target);
-                            }
-                        }
-                    }
-                    // Clean up inline styles on already-registered target elements.
-                    const target = this.resolveTarget(node, action);
-                    if (target && this.preStatedElements.has(target)) {
-                        target.getAnimations().forEach(a => a.cancel());
-                        this.clearInlineAnimationStyles(target);
-                        this.preStatedElements.delete(target);
-                    }
-                }
-            }
-        }
+        this._state$.next({ ...this._state$.value, runtime: new Set([...this._state$.value.runtime, nodeId]) });
     }
-    /** Re-attach interactions after they have been edited in the panel. */
-    refresh(node) {
-        this.runOutside(() => { this._detach(node); this._attach(node); });
+    /** The switcher's choice for one part (null = back to the saved default). */
+    setShown(nodeId, state) {
+        const shown = new Map(this._state$.value.shown);
+        if (state && state !== CanvasShowState.Closed)
+            shown.set(nodeId, state);
+        else
+            shown.delete(nodeId);
+        this._state$.next({ ...this._state$.value, shown });
     }
-    /**
-     * Replay all interactions on a node immediately, regardless of their trigger.
-     * Used by the builder overlay play button for in-editor animation preview.
-     * Uses fill:'none' so the element returns to its natural state after the preview.
-     */
-    replay(node) { this.runOutside(() => this._replay(node)); }
-    _replay(node) {
-        if (!node.interactions?.length)
+    /** Tabs' "Showing on canvas": the item a root shows (null = whatever the canvas shows live). */
+    setShownItem(rootId, key) {
+        if ((this._state$.value.items.get(rootId) ?? null) === key)
             return;
-        const ref = this.overlayService.getNodeRef(node);
-        if (ref) {
-            ref.element.getAnimations().forEach(a => a.cancel());
-            // Clear any leftover inline styles so the pre-state applies cleanly.
-            this.clearInlineAnimationStyles(ref.element);
-        }
-        // In builder mode pre-state is never applied on attach, so apply it now
-        // to give an accurate hidden→visible preview. It is cleaned up via
-        // executeAction's anim.finished handler once the animation completes.
-        for (const ix of node.interactions) {
-            for (const action of ix.actions) {
-                if (this.ENTRANCE_TYPES.has(action.type)) {
-                    const target = this.resolveTarget(node, action);
-                    if (target)
-                        this.applyPreState(target, action);
-                }
-            }
-        }
-        for (const ix of node.interactions) {
-            this.runActions(node, ix.actions);
-        }
+        const items = new Map(this._state$.value.items);
+        if (key)
+            items.set(rootId, key);
+        else
+            items.delete(rootId);
+        this._state$.next({ ...this._state$.value, items });
     }
-    /**
-     * Fire all interactions on the given node that match the specified trigger.
-     * Used by Swiper (and future components) to dispatch their events into the
-     * interaction engine without coupling to the engine's attach/detach lifecycle.
-     */
-    replayTrigger(nodeId, trigger) { this.runOutside(() => this._replayTrigger(nodeId, trigger)); }
-    _replayTrigger(nodeId, trigger) {
-        for (const [node] of this.attached) {
-            if (node.id !== nodeId)
-                continue;
-            for (const ix of (node.interactions ?? [])) {
-                if (ix.trigger === trigger) {
-                    this.runActions(node, ix.actions);
-                }
-            }
+    /** The item a root's "Showing on canvas" shows, or null. */
+    shownItem(rootId) {
+        return (rootId && this._state$.value.items.get(rootId)) || null;
+    }
+    /** The switcher's current choice for one part. */
+    shownState(nodeId) {
+        return (nodeId && this._state$.value.shown.get(nodeId)) || CanvasShowState.Closed;
+    }
+    /** True when the canvas shows the part: selected into, switched open, or opened by an action. */
+    isShown(nodeId) {
+        if (!nodeId)
+            return false;
+        const { revealed, pinned, shown, runtime } = this._state$.value;
+        return revealed.has(nodeId) || pinned.has(nodeId) || runtime.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
+    }
+    /** True when the canvas shows an item because the selection is styled "when it is on" (the switcher's hint). */
+    isTriggeredBySelection(triggerId) {
+        return !!triggerId && this._state$.value.triggeredBySelection.has(triggerId);
+    }
+    /** True when the part is shown only because the selection is inside it (the switcher's hint line). */
+    isRevealedBySelection(nodeId) {
+        return !!nodeId && this._state$.value.revealed.has(nodeId);
+    }
+    /** Hold a control's tooltip open on the canvas (true), or let it go. */
+    setTooltipShown(nodeId, on) {
+        if (!nodeId || this._state$.value.tooltips.has(nodeId) === on)
             return;
-        }
+        const tooltips = new Set(this._state$.value.tooltips);
+        if (on)
+            tooltips.add(nodeId);
+        else
+            tooltips.delete(nodeId);
+        this._state$.next({ ...this._state$.value, tooltips });
     }
-    // ── Private ──────────────────────────────────────────────
-    attachInteraction(node, ix, element) {
-        // All triggers run live in the builder canvas so the user sees the real
-        // animation (pageLoad on attach, viewportEnter on scroll-into-view, click/hover).
-        // The former NG0103 crash was caused by (a) Swiper's ResizeObserver created inside
-        // the Angular zone — fixed in SliderContainerComponent via runOutsideAngular — and
-        // (b) the overlay's Resize/MutationObservers synchronously re-dirtying the view
-        // during synchronize() — fixed by coalescing overlay updates through a RAF.
-        // scrollProgress is still unimplemented and returns a no-op below.
-        switch (ix.trigger) {
-            case 'pageLoad':
-                return this.attachPageLoad(node, ix, element);
-            case 'pageEnter':
-                // In the builder canvas there is no navigation, so preview a page-enter the same
-                // way as page-load (pre-stated hidden → animate in). In production the SSR engine
-                // fires it only after the page transition completes (ClientInteractionService).
-                return this.attachPageLoad(node, ix, element);
-            case 'pageLeave':
-                // Exit choreography that plays on navigate-away. There is no navigation in the
-                // builder, so it does not auto-fire (element stays visible) — the overlay play
-                // button previews it via replay(). In production the orchestrator awaits it.
-                return () => { };
-            case 'viewportEnter':
-                return this.attachViewportEnter(node, ix, element);
-            case 'click':
-                return this.attachClick(node, ix, element);
-            case 'hover':
-                return this.attachHover(node, ix, element);
-            case 'scrollProgress':
-                // Scroll-progress is complex — deferred.
-                return () => { };
-            case 'itemOn':
-            case 'itemOff':
-                return this.attachItemState(node, ix, element, ix.trigger === 'itemOn');
-            default:
-                return () => { };
-        }
+    /** True while the canvas holds the control's tooltip open. */
+    tooltipShown(nodeId) {
+        return !!nodeId && this._state$.value.tooltips.has(nodeId);
     }
-    /**
-     * `itemOn` / `itemOff` (CC2): run when the part's accordion ITEM opens / closes — announced by the shared
-     * composite-core runtime on the item, on the canvas as on the site. An item already open when the
-     * listener attaches has opened: its `itemOn` runs at once (its entrance was pre-stated hidden).
-     */
-    attachItemState(node, ix, element, on) {
-        const run = () => this.runActions(node, ix.actions, element);
-        const off = onCompositeItemState(element, on, run);
-        const timer = on && isCompositeItemOn(element) ? setTimeout(run, 50) : null;
-        return () => { off(); if (timer)
-            clearTimeout(timer); };
+    /** Hold a toast up on the canvas with these words, or take it down (null). */
+    setToastShown(words) {
+        const next = words === null ? null : String(words);
+        if (this._state$.value.toast === next)
+            return;
+        this._state$.next({ ...this._state$.value, toast: next });
     }
-    // ── Triggers ─────────────────────────────────────────────
-    attachPageLoad(node, ix, element) {
-        const timer = setTimeout(() => {
-            if (this.hasPreStatedAncestor(element)) {
-                this.deferUntilVisible(element, () => this.runActions(node, ix.actions, element));
-            }
-            else {
-                this.runActions(node, ix.actions, element);
-            }
-        }, 50);
-        return () => clearTimeout(timer);
+    /** The words of the toast the canvas holds up, or null. */
+    get toastShown() {
+        return this._state$.value.toast;
     }
-    attachViewportEnter(node, ix, element) {
-        const firedSet = new Set();
-        const fire = () => {
-            const key = ix.id;
-            if (ix.actions.some(a => a.once) && firedSet.has(key))
-                return;
-            if (this.hasPreStatedAncestor(element)) {
-                this.deferUntilVisible(element, () => {
-                    if (ix.actions.some(a => a.once) && firedSet.has(key))
-                        return;
-                    firedSet.add(key);
-                    this.runActions(node, ix.actions, element);
-                });
-                return;
-            }
-            firedSet.add(key);
-            this.runActions(node, ix.actions, element);
-        };
-        // IntersectionObserver with no root uses the browser viewport.
-        // It respects overflow:hidden clipping from .preview-scroll so it fires
-        // correctly as Lenis scrolls (Lenis changes scrollTop on .preview-scroll).
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    cleanup();
-                    fire();
-                }
-            }
-        }, { threshold: 0.1 });
-        observer.observe(element);
-        // Builder: also listen to Lenis scroll events on .preview-lenis-content
-        // as a fallback in case IntersectionObserver misses elements behind a
-        // CSS transform (scale) on iox-page-component.
-        const lenisEl = this.overlayService.getScrollContainer();
-        let scrollFired = false;
-        const onScroll = () => {
-            if (scrollFired)
-                return;
-            const rootEl = this.overlayService.getIntersectionRoot();
-            if (!rootEl)
-                return;
-            const rootRect = rootEl.getBoundingClientRect();
-            const elRect = element.getBoundingClientRect();
-            const overlapH = Math.min(elRect.bottom, rootRect.bottom) - Math.max(elRect.top, rootRect.top);
-            const elH = elRect.bottom - elRect.top;
-            if (elH > 0 && overlapH / elH >= 0.1) {
-                scrollFired = true;
-                cleanup();
-                fire();
-            }
-        };
-        if (lenisEl)
-            lenisEl.addEventListener('scroll', onScroll, { passive: true });
-        const cleanup = () => {
-            observer.disconnect();
-            scrollFired = true;
-            if (lenisEl)
-                lenisEl.removeEventListener('scroll', onScroll);
-        };
-        return cleanup;
+    /** A new page on the canvas: nothing is revealed or switched open. */
+    reset() {
+        this._state$.next(EMPTY_SNAPSHOT());
     }
-    isBuilderMode() {
-        return document.body.classList.contains('builder-active');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, decorators: [{
+            type: Injectable
+        }] });
+function sameMenu(a, b) {
+    if (!a || !b)
+        return a === b;
+    return a.drawer === b.drawer && a.menuButton === b.menuButton && a.root === b.root && a.at === b.at;
+}
+function sameSet(a, b) {
+    return a.size === b.size && [...a].every(id => b.has(id));
+}
+/**
+ * Show or hide an overlay part (the Menu drawer) for DESIGN — ONE move for every control that previews it (the
+ * Bindings ▸ Phone menu row, the canvas's Menu chip). Opening switches it open; closing closes its canvas twin the way
+ * its own Close does (the exit plays, the reveal and the switch are cleared, a selection inside it moves to its
+ * opener), so a drawer shown because the selection sits in it closes too.
+ */
+function setOverlayPreview(state, twins, id, open) {
+    if (!id)
+        return;
+    if (open) {
+        state.setShown(id, CanvasShowState.Open);
+        return;
     }
-    /** Returns true if any DOM ancestor of element is currently faded out via pre-state. */
-    hasPreStatedAncestor(element) {
-        let el = element.parentElement;
-        while (el && el !== document.body) {
-            if (this.preStatedElements.has(el))
-                return true;
-            el = el.parentElement;
+    const twin = twins?.get(id);
+    if (twin?.close)
+        twin.close();
+    else
+        state.dismiss(id);
+}
+
+const CANVAS_SCROLLER = '.preview-scroll';
+const PREVIEW_SCROLLER = '.iox-page-wrapper';
+/** What a page-long reading bar measures: the canvas's page frame, or Preview's page inside its scroller. */
+const CANVAS_PAGE = '#canvas-preview';
+const PREVIEW_PAGE = '.iox-page-wrapper > .page-mask';
+/**
+ * Scenes on the canvas and in Preview: the SAME scene-core driver the live site runs, so a layer stands at the same
+ * value at the same progress in every renderer (premium-sites plan §5b). The canvas's page never scrolls itself (its
+ * Lenis scrolls a wrapper around a zoomed frame), so `position: sticky` cannot hold the stage there and the driver does;
+ * Preview's page is a real scroller, and sticky works. Canvas-only state: it never writes a node, so nothing here is
+ * saved or becomes an undo step.
+ */
+class SceneCanvasService {
+    constructor() {
+        this.zone = inject(NgZone);
+        this.overlay = inject(OverlayService, { optional: true });
+        /** The selection holds a reading bar full (R2): a design-state change plays the next frame. */
+        this.designSub = inject(CanvasDesignStateService, { optional: true })?.state$.subscribe(() => this.wake()) ?? null;
+        this.driver = null;
+        this.rootsById = new Map();
+        this.idsByRoot = new Map();
+        /** Every frame on every Scene: the selection box and the timeline follow on it. */
+        this.frames$ = new Subject();
+    }
+    /**
+     * Drive a root. `onCanvas` comes from the caller, because only the render directive can read IOX_BUILDER_CANVAS: the
+     * token is provided on the canvas's element, below where this service lives. Read here, it answered false, and the
+     * canvas measured its Scenes against a page that moves with them, so they never left progress 0.
+     */
+    attach(root, onCanvas, nodeId) {
+        this.zone.runOutsideAngular(() => this.driverFor(onCanvas).add(root));
+        if (nodeId) {
+            this.rootsById.set(nodeId, root);
+            this.idsByRoot.set(root, nodeId);
         }
-        return false;
     }
-    /** Polls via RAF until no ancestor is in pre-state, then fires callback. */
-    deferUntilVisible(element, callback) {
-        const poll = () => {
-            if (!this.hasPreStatedAncestor(element)) {
-                callback();
-            }
-            else {
-                requestAnimationFrame(poll);
-            }
-        };
-        requestAnimationFrame(poll);
+    /**
+     * Play an element's `scrollProgress` interaction on THIS driver — the Scenes' — never a loop of its own (premium M6,
+     * N7). The live site makes the same call (`attachScrollProgress`) on its own driver. Returns the way to let go.
+     */
+    linkScroll(owner, interaction, options) {
+        return this.zone.runOutsideAngular(() => {
+            const driver = this.driverFor(options.onCanvas);
+            const page = owner.closest(options.onCanvas ? CANVAS_PAGE : PREVIEW_PAGE)
+                ?? owner.ownerDocument.querySelector(options.onCanvas ? CANVAS_PAGE : PREVIEW_PAGE)
+                ?? owner.ownerDocument.documentElement;
+            return attachScrollProgress(owner, interaction, { driver, page, targetsOf: action => options.targetsOf(action), held: options.held });
+        });
     }
-    attachClick(node, ix, element) {
-        // G7: press FEEDBACK (an animation of the pressed element that hides and shows nothing) lands on pointer-down,
-        // at once; the rest commits on the click. A toggle keeps its whole list on the click (the shared split, iox-ui).
-        const { onPress, onClick } = ix.reverseActions?.length ? { onPress: [], onClick: ix.actions } : splitPressFeedback(ix.actions);
-        const handler = () => {
-            if (ix.reverseActions?.length) {
-                // Toggle: alternate between primary and reverse actions on each click.
-                const isToggled = this.toggleStates.get(ix.id) ?? false;
-                this.runActions(node, isToggled ? ix.reverseActions : ix.actions, element);
-                this.toggleStates.set(ix.id, !isToggled);
-            }
-            else {
-                this.runActions(node, onClick, element);
-            }
-        };
-        const press = (e) => { if (e.button === 0 || e.pointerType !== 'mouse')
-            this.runActions(node, onPress, element); };
-        // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
-        // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
-        // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
-        element.addEventListener('click', handler, true);
-        if (onPress.length)
-            element.addEventListener('pointerdown', press, true);
-        return () => {
-            element.removeEventListener('click', handler, true);
-            element.removeEventListener('pointerdown', press, true);
-        };
+    /** Something only the canvas knows moved (the selection held a reading bar full): play the next frame. */
+    wake() {
+        this.driver?.wake();
     }
-    attachHover(node, ix, element) {
-        // G7: a hover trigger answers a mouse or a pen — a finger's emulated hover stuck until the next tap elsewhere.
-        const enterHandler = (e) => { if (isHoverPointer(e))
-            this.runActions(node, ix.actions, element); };
-        const leaveHandler = (e) => {
-            if (!isHoverPointer(e))
-                return;
-            // Reverse animations on leave for hover triggers
-            for (const action of ix.actions) {
-                if (!isActionEnabled(action))
-                    continue;
-                // Context actions have no "backwards" — the shared table decides what leave does
-                // (clear, unless the action sets noReverse). Same call the SSR engine makes.
-                if (isContextAction(action)) {
-                    this.applyContextAction(action, element, 'reverse');
-                    continue;
-                }
-                const target = this.resolveTarget(node, action, element);
-                if (!target)
-                    continue;
-                this.reverseAction(target, action);
-            }
-        };
-        element.addEventListener('pointerenter', enterHandler);
-        element.addEventListener('pointerleave', leaveHandler);
-        return () => {
-            element.removeEventListener('pointerenter', enterHandler);
-            element.removeEventListener('pointerleave', leaveHandler);
-        };
+    driverFor(onCanvas) {
+        this.driver ??= new ScrollDriver({
+            pin: onCanvas,
+            observe: true,
+            originOf: el => el.closest(onCanvas ? CANVAS_SCROLLER : PREVIEW_SCROLLER),
+            view: () => viewOf(document.querySelector(onCanvas ? CANVAS_SCROLLER : PREVIEW_SCROLLER)),
+            onFrame: (el, state) => this.frames$.next({ nodeId: this.idsByRoot.get(el) ?? null, ...state }),
+        });
+        return this.driver;
     }
-    // ── Actions ──────────────────────────────────────────────
-    runActions(node, actions, selfEl) {
-        for (const action of actions) {
-            if (!isActionEnabled(action))
-                continue; // switched off by the author
-            if (this.SWIPER_ACTIONS.has(action.type)) {
-                this.executeSwiperAction(action);
-                continue;
-            }
-            // Dialog actions (A1b): the canvas RUNS them — styling a dialog you cannot open is
-            // impossible. The canvas twin registered open/close/toggle under its nodeId, exactly
-            // the Swiper-method pattern; a missing/mistargeted id is a silent no-op, never a throw.
-            if (DIALOG_ACTION_TYPES.has(action.type)) {
-                this.executeDialogAction(action, selfEl);
-                continue;
-            }
-            // Popover actions (premium M5): the canvas RUNS them too, through the twin's registry — beside the element
-            // whose click ran them (the opener the live runtime anchors to).
-            if (POPOVER_ACTION_TYPE_SET.has(action.type)) {
-                this.executePopoverAction(action, selfEl);
-                continue;
-            }
-            // A toast (premium M5): RUN inside the page's frame — the layer of the token scope the element sits in (the
-            // page, or the globals' overlay), so it wears the look and zooms with the canvas.
-            if (TOAST_ACTION_TYPES.has(action.type)) {
-                showCanvasToast(action.params?.['text'], action.params?.['edge'], selfEl ?? null);
-                continue;
-            }
-            // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
-            // one the live site runs — and brings an item that opened out of view into it.
-            const itemAction = itemActionOf(action.type);
-            if (itemAction) {
-                this.executeItemAction(node, action, itemAction, selfEl);
-                continue;
-            }
-            // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
-            // (ELEMENT_ACTION_DESCRIPTORS): copy runs, scrollTo runs (scrollIntoView — the frame
-            // scrolls natively here; the Lenis rule is the LIVE side's), navigate and submitForm
-            // SIMULATE — a dispatched event the host surfaces as a toast, never a route change
-            // or a fake submit under the author's feet.
-            if (BEHAVIOUR_ACTION_TYPES.has(action.type)) {
-                this.executeBehaviourAction(node, action, selfEl);
-                continue;
-            }
-            // Tier-B server actions (A2). ALWAYS a simulation here: the canvas is the ADMIN's
-            // browser and a server action is a public-site write (an email, a webhook, a content
-            // row) — the toast says what the LIVE site would do.
-            if (SERVER_ELEMENT_ACTION_TYPES.has(action.type)) {
-                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
-                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
-                continue;
-            }
-            // Consent actions (C3). Recording ones SIMULATE — the canvas is the ADMIN's browser,
-            // and an admin's cookie is not a visitor's decision; the toast says what would be
-            // recorded. Opening the preferences dialog is dialog-opening and honestly RUNS.
-            if (CONSENT_ACTION_TYPES.has(action.type)) {
-                this.executeConsentAction(action);
-                continue;
-            }
-            // 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);
-        }
+    detach(root) {
+        this.driver?.remove(root);
+        const id = this.idsByRoot.get(root);
+        // A re-render attaches the new element before the old one detaches: it must not lose the new one.
+        if (id && this.rootsById.get(id) === root)
+            this.rootsById.delete(id);
+        this.idsByRoot.delete(root);
+    }
+    /** The canvas's Lenis just moved the scroll, inside this frame: hold every stage in this same frame. */
+    pinNow() {
+        this.driver?.pinNow();
+    }
+    /** The damped progress a root's layers stand at. */
+    progressOf(root) {
+        return this.driver?.progressOf(root) ?? null;
+    }
+    /** Where the scroll stands in a Scene, 0 to 1. Null for a Scene that is not on the canvas. */
+    positionOf(nodeId) {
+        const root = nodeId ? this.rootsById.get(nodeId) : null;
+        return root ? this.driver?.targetOf(root) ?? null : null;
     }
     /**
-     * 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.
+     * Stand a Scene at `p` by really scrolling the canvas: there is one position, so the scrubber, the wheel, the pin and
+     * the selection box can never disagree. It lands with no glide, because the author is waiting to see that moment.
      */
-    applyContextAction(action, el, pass) {
-        const effect = contextActionEffect(action, pass);
-        if (!effect)
-            return;
-        if (effect.op === 'clear') {
-            this.contextStore.clear(effect.slot);
+    goTo(nodeId, p) {
+        const root = nodeId ? this.rootsById.get(nodeId) : null;
+        const offset = root ? this.driver?.offsetFor(root, p) : null;
+        const scroller = root?.closest(CANVAS_SCROLLER);
+        if (!root || offset == null || !scroller)
             return;
-        }
-        const value = resolveContextValue(effect.value, {
-            item: this.rowItemFor(el),
-            resolvedData: this.contextData,
-        });
-        this.contextStore.set(effect.slot, value);
+        const rect = root.getBoundingClientRect();
+        const zoom = root.offsetHeight ? rect.height / root.offsetHeight : 1;
+        scroller.scrollTop += rect.top - scroller.getBoundingClientRect().top + offset * zoom;
+        this.driver?.settle(root);
     }
-    /** 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;
+    /**
+     * A layer's tracks were edited: its element carries them now and its Scene plays them on the next frame, with no
+     * re-render, because a Scene's own DOM is what the author is looking at.
+     */
+    refreshLayer(node, root) {
+        const ref = this.overlay?.getNodeRef(node) ?? (node.id ? this.overlay?.findRefByNodeId(node.id)?.ref : undefined);
+        if (ref?.element && this.overlay)
+            syncSceneAttributes(this.overlay.getStyledElement(ref.element), node);
+        const el = root?.id ? this.rootsById.get(root.id) : null;
+        if (el)
+            this.driver?.reread(el);
     }
-    /** 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 ?? {}) };
+    /**
+     * A value a layer's own component draws changed (a Video's pictures): its instance takes it now. Its Scene reads the new
+     * attribute when it lands, with no re-render of the page.
+     */
+    setLayerInput(node, name, value) {
+        const ref = this.overlay?.getNodeRef(node) ?? (node.id ? this.overlay?.findRefByNodeId(node.id)?.ref : undefined);
+        const component = ref?.componentRef;
+        if (!component?.instance)
+            return;
+        component.instance[name] = value;
+        component.changeDetectorRef.detectChanges();
     }
-    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;
-            }
-        }
+    ngOnDestroy() {
+        this.designSub?.unsubscribe();
+        this.driver?.destroy();
+        this.driver = null;
+        this.rootsById.clear();
+        this.idsByRoot.clear();
+        this.frames$.complete();
     }
-    executeItemAction(node, action, itemAction, selfEl) {
-        const target = this.resolveTarget(node, action, selfEl);
-        const open = runCompositeItemAction(target, itemAction);
-        if (!open || !target)
-            return;
-        if (shouldScrollToItem(target.getBoundingClientRect().top, window.innerHeight))
-            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService, decorators: [{
+            type: Injectable
+        }] });
+/** The part of the page on screen: the scroller's own rectangle (the canvas's, Preview's). */
+function viewOf(scroller) {
+    if (!scroller)
+        return null;
+    const rect = scroller.getBoundingClientRect();
+    return { top: rect.top, height: rect.height };
+}
+
+/** What the canvas never writes inline (a transform inside the scaled page breaks Lenis). */
+const CANVAS_SKIPPED_PROPS = new Set(['transform']);
+/**
+ * Wires ComponentNode interactions to live DOM elements via the
+ * OverlayService node-element registry.
+ *
+ * Call `attach(node)` after the node is rendered and registered.
+ * Call `detach(node)` on destroy to tear down listeners/observers.
+ */
+class InteractionEngineService {
+    constructor(overlayService) {
+        this.overlayService = overlayService;
+        this.attached = new Map();
+        /** Shared with the SSR engine — one store type, one set of semantics. */
+        this.contextStore = inject(ContextStore);
+        /** Resolved data for the canvas, so a row marker (source + index) resolves back to its item. */
+        this.contextData = {};
+        /** Elements that have had pre-state applied (hidden by attach). */
+        this.preStatedElements = new Set();
+        /**
+         * Toggle state for click interactions with reverseActions.
+         * false = next click runs actions (primary); true = next click runs reverseActions.
+         */
+        this.toggleStates = new Map();
+        /**
+         * Pre-states queued for elements that weren't registered yet when the owner
+         * node's attach() ran. Keyed by target node ID. Consumed when the target
+         * element's own attach() fires.
+         */
+        this.pendingPreStates = new Map();
+        /** Action types that animate an element from hidden → visible / visible → hidden — the SHARED sets
+         *  (@vectoriox/iox-ui), the same ones the live site's runtime reads. */
+        this.ENTRANCE_TYPES = ENTRANCE_ACTION_TYPES;
+        this.EXIT_TYPES = EXIT_ACTION_TYPES;
+        this.SWIPER_ACTIONS = new Set([
+            'swiperNext', 'swiperPrev', 'swiperGoToSlide',
+            'swiperAutoplayStart', 'swiperAutoplayStop', 'swiperAutoplayPause',
+        ]);
+        this.instanceRegistry = inject(ComponentInstanceRegistryService);
+        this.ngZone = inject(NgZone);
+        /** The ONE scroll loop of this canvas (its Scenes' driver): `scrollProgress` interactions ride it as links (M6, N7). */
+        this.sceneCanvas = inject(SceneCanvasService, { optional: true });
+        this.designState = inject(CanvasDesignStateService, { optional: true });
+        /** Numbers armed to count (M6, N5): put back when the node lets go. */
+        this.armedCounts = new Map();
     }
-    executeConsentAction(action) {
-        if (action.type === 'openConsentPreferences') {
-            const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
-            dialog?.open?.();
+    /**
+     * Run all DOM-manipulation operations (pre-state, observers, animations)
+     * outside the Angular zone so Zone.js does not schedule unnecessary CD ticks
+     * for each RAF/IntersectionObserver/animation callback.
+     * The caller is responsible for calling markForCheck() / refreshSelect() inside
+     * the zone after this returns.
+     */
+    runOutside(fn) {
+        return this.ngZone.runOutsideAngular(fn);
+    }
+    /** Wire all interactions for a node to its rendered DOM element. */
+    attach(node) { this.runOutside(() => this._attach(node)); }
+    /** Attach interactions to a node whose element is NOT overlay-registered — e.g. repeater/slider
+     *  PREVIEW CLONES, which are non-selectable but must still animate (parity with the SSR runtime,
+     *  which animates every repeated row). See RenderDirective. */
+    attachTo(node, element) { this.runOutside(() => this._attach(node, element)); }
+    _attach(node, elementOverride) {
+        const element = elementOverride ?? this.overlayService.getNodeRef(node)?.element;
+        if (!element)
             return;
+        // Apply any pre-states queued for THIS element by earlier-registered nodes.
+        // Pending entries are only added when appropriate (see loop below), so always consume.
+        if (node.id) {
+            const pending = this.pendingPreStates.get(node.id);
+            if (pending) {
+                for (const action of pending) {
+                    this.applyPreState(element, action);
+                }
+                this.pendingPreStates.delete(node.id);
+            }
         }
-        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
-        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
-    }
-    executeDialogAction(action, selfEl) {
-        const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
-        if (!dialog)
+        // What its interactions say about its first paint (tabular digits, an empty reading bar) — the same markers every
+        // renderer writes, kept in step with the Interactions panel.
+        syncInteractionMarkers(element, node);
+        if (!node.interactions?.length)
             return;
-        switch (action.type) {
-            case 'openDialog':
-                dialog.open?.();
-                // CC3 "Open at the clicked item": the lightbox's slider goes to the clicked row's slide — the same
-                // rule the live site runs (composite-core `slideIndexForRow`), once the canvas twin has rendered it.
-                if (opensAtClickedItem(action))
-                    this.slideDialogToRow(action.target, rowIndexOf$1(selfEl));
-                break;
-            case 'closeDialog':
-                dialog.close?.();
-                break;
-            case 'toggleDialog':
-                dialog.toggle?.();
-                break;
+        const cleanups = [];
+        for (const ix of node.interactions) {
+            // Pre-state: hide target elements before their entrance animation fires so
+            // the user sees a real hidden→visible animation on the canvas. Every trigger
+            // runs live in the builder (see attachInteraction).
+            // Under reduced motion a self-playing entrance starts shown and never moves (shared `entranceStartsHidden`).
+            // A scroll-played entrance never starts hidden either (shared: the scroll stands it — M6).
+            const skipPreState = !entranceStartsHidden(ix.trigger);
+            if (!skipPreState) {
+                for (const action of ix.actions) {
+                    // A disabled action must not pre-state: it would hide the element with nothing
+                    // left to reveal it.
+                    if (!isActionEnabled(action))
+                        continue;
+                    if (this.ENTRANCE_TYPES.has(action.type)) {
+                        const target = this.resolveTarget(node, action, element);
+                        if (target) {
+                            this.applyPreState(target, action);
+                        }
+                        else if (action.target && action.target !== 'self') {
+                            const list = this.pendingPreStates.get(action.target) ?? [];
+                            list.push(action);
+                            this.pendingPreStates.set(action.target, list);
+                        }
+                    }
+                }
+            }
+            const cleanup = this.attachInteraction(node, ix, element);
+            cleanups.push({ node, interaction: ix, cleanup });
         }
+        this.armCounts(node, element);
+        this.attached.set(node, cleanups);
     }
-    executePopoverAction(action, selfEl) {
-        const popover = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
-        if (!popover)
-            return;
-        switch (action.type) {
-            case 'openPopover':
-                popover.open?.(selfEl ?? null);
-                break;
-            case 'closePopover':
-                popover.close?.();
-                break;
-            case 'togglePopover':
-                popover.toggle?.(selfEl ?? null);
-                break;
+    /** Tear down all interaction listeners for a node and reset its animated state. */
+    detach(node) { this.runOutside(() => this._detach(node)); }
+    _detach(node) {
+        for (const el of this.armedCounts.get(node) ?? [])
+            restoreCountUp(el);
+        this.armedCounts.delete(node);
+        const entries = this.attached.get(node);
+        if (!entries)
+            return;
+        for (const entry of entries) {
+            entry.cleanup();
         }
-    }
-    /** The slider inside the opened dialog (its canvas twin renders on the next passes) → the row's slide. */
-    slideDialogToRow(dialogId, row) {
-        let tries = 0;
-        const attempt = () => {
-            const host = document.querySelector(`.iox-node-${CSS.escape(dialogId)}`);
-            const swiper = host?.querySelector('.swiper')?.swiper;
-            if (swiper?.slides?.length) {
-                swiper.update?.();
-                swiper.slideTo(slideIndexForRow(row, swiper.slides.length), 0);
-                return;
+        this.attached.delete(node);
+        // Reset toggle state so re-attach starts from the primary actions.
+        for (const entry of entries) {
+            if (entry.interaction.reverseActions?.length) {
+                this.toggleStates.delete(entry.interaction.id);
             }
-            if (++tries < 40)
-                requestAnimationFrame(attempt);
-        };
-        requestAnimationFrame(attempt);
-    }
-    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;
+        // Cancel Web Animations and strip any inline pre-state styles that
+        // were applied by applyPreState() so the element returns to its natural CSS state.
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            ref.element.getAnimations().forEach(a => a.cancel());
+            this.clearInlineAnimationStyles(ref.element);
         }
-        // Find by node ID
-        for (const [n, ref] of this.overlayService.getAllNodeEntries()) {
-            if (n.id === action.target)
-                return ref.element;
+        // Also clean up pre-state on any target elements this node was animating.
+        if (node.interactions) {
+            for (const ix of node.interactions) {
+                for (const action of ix.actions) {
+                    // Remove any pending pre-states for unregistered targets.
+                    if (action.target && action.target !== 'self') {
+                        const pending = this.pendingPreStates.get(action.target);
+                        if (pending) {
+                            const filtered = pending.filter(a => a !== action);
+                            if (filtered.length) {
+                                this.pendingPreStates.set(action.target, filtered);
+                            }
+                            else {
+                                this.pendingPreStates.delete(action.target);
+                            }
+                        }
+                    }
+                    // Clean up inline styles on already-registered target elements.
+                    const target = this.resolveTarget(node, action);
+                    if (target && this.preStatedElements.has(target)) {
+                        target.getAnimations().forEach(a => a.cancel());
+                        this.clearInlineAnimationStyles(target);
+                        this.preStatedElements.delete(target);
+                    }
+                }
+            }
         }
-        return null;
     }
-    executeAction(element, action) {
-        // toggleVisibility HIDES a visible element and SHOWS a hidden one — resolved against the element's
-        // own state, the same rule the live site applies (shared `effectiveActionType`, CC1 N5).
-        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
-        const keyframes = this.keyframesFor(type, action);
-        if (!keyframes.length)
-            return;
-        if (this.ENTRANCE_TYPES.has(type))
-            element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
-        else if (this.EXIT_TYPES.has(type))
-            element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
-        // Reduced motion (CC1 R1): no animation runs — the element is left as the run would leave it (the shared settle
-        // rule: an entrance releases to the stylesheet, an exit holds its hidden frame).
-        if (!motionAllowed()) {
-            settleInteraction(element, keyframes, settleModeFor(type), this.settleOptions());
-            this.settleAfter(element, type);
+    /** Re-attach interactions after they have been edited in the panel. */
+    refresh(node) {
+        this.runOutside(() => { this._detach(node); this._attach(node); });
+    }
+    /**
+     * Replay all interactions on a node immediately, regardless of their trigger.
+     * Used by the builder overlay play button for in-editor animation preview.
+     * Uses fill:'none' so the element returns to its natural state after the preview.
+     */
+    replay(node) { this.runOutside(() => this._replay(node)); }
+    _replay(node) {
+        if (!node.interactions?.length)
             return;
+        const ref = this.overlayService.getNodeRef(node);
+        if (ref) {
+            ref.element.getAnimations().forEach(a => a.cancel());
+            // Clear any leftover inline styles so the pre-state applies cleanly.
+            this.clearInlineAnimationStyles(ref.element);
         }
-        // The ONE call the live site makes too: fill both (holds the first frame through a delay), started from the live
-        // value, settled by the shared rule — an element that has entered keeps its hover and press (iox-ui#41). A look
-        // entrance on a Repeater's template staggers its rows: each copy adds its row's share (shared `entranceDelay`).
-        const anim = playInteraction(element, { type, params: action.params }, keyframes, {
-            duration: action.duration,
-            delay: entranceDelay(action, repeatedRowIndex(element)),
-            // A keyword, a curve, or the look's easing token as this element sees it (G6) — the live site's resolver.
-            easing: resolveInteractionEasing(action.easing, element),
-        }, this.settleOptions());
-        anim.finished.then(() => this.settleAfter(element, type)).catch(() => { });
-    }
-    /** On the canvas a run never writes a transform inline (one inside the scaled page breaks Lenis). */
-    settleOptions() {
-        return this.isBuilderMode() ? { skip: CANVAS_SKIPPED_PROPS } : {};
-    }
-    /** What an element is left as once an action is done: a revealed one interactive, a hidden one inert. */
-    settleAfter(element, type) {
-        if (this.ENTRANCE_TYPES.has(type)) {
-            element.style.removeProperty('pointer-events');
-            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);
+        // In builder mode pre-state is never applied on attach, so apply it now
+        // to give an accurate hidden→visible preview. It is cleaned up via
+        // executeAction's anim.finished handler once the animation completes.
+        for (const ix of node.interactions) {
+            for (const action of ix.actions) {
+                if (this.ENTRANCE_TYPES.has(action.type)) {
+                    const target = this.resolveTarget(node, action);
+                    if (target)
+                        this.applyPreState(target, action);
+                }
+            }
         }
-        else if (this.EXIT_TYPES.has(type)) {
-            // Once the exit is done the element is invisible — disable pointer events so it doesn't
-            // silently block clicks underneath it.
-            element.style.setProperty('pointer-events', 'none');
+        for (const ix of node.interactions) {
+            this.runActions(node, ix.actions);
         }
     }
     /**
-     * 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.
+     * Fire all interactions on the given node that match the specified trigger.
+     * Used by Swiper (and future components) to dispatch their events into the
+     * interaction engine without coupling to the engine's attach/detach lifecycle.
      */
-    applyPreState(element, action) {
-        const keyframes = this.keyframesFor(action.type, action);
-        if (!keyframes.length)
+    replayTrigger(nodeId, trigger) { this.runOutside(() => this._replayTrigger(nodeId, trigger)); }
+    _replayTrigger(nodeId, trigger) {
+        for (const [node] of this.attached) {
+            if (node.id !== nodeId)
+                continue;
+            for (const ix of (node.interactions ?? [])) {
+                if (ix.trigger === trigger) {
+                    this.runActions(node, ix.actions);
+                }
+            }
             return;
-        const first = entrancePreStateStyle(action.type, action.params);
-        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. An entrance that hides
-            // nothing (a picture settling) stays in view.
-            if ('opacity' in first || 'visibility' in first)
-                element.style.setProperty('opacity', '0');
-            element.style.setProperty('pointer-events', 'none');
         }
-        else {
-            for (const [prop, val] of Object.entries(first))
-                element.style.setProperty(prop, val);
-            element.style.setProperty('pointer-events', 'none');
+    }
+    // ── Private ──────────────────────────────────────────────
+    attachInteraction(node, ix, element) {
+        // All triggers run live in the builder canvas so the user sees the real
+        // animation (pageLoad on attach, viewportEnter on scroll-into-view, click/hover).
+        // The former NG0103 crash was caused by (a) Swiper's ResizeObserver created inside
+        // the Angular zone — fixed in SliderContainerComponent via runOutsideAngular — and
+        // (b) the overlay's Resize/MutationObservers synchronously re-dirtying the view
+        // during synchronize() — fixed by coalescing overlay updates through a RAF.
+        // scrollProgress is still unimplemented and returns a no-op below.
+        switch (ix.trigger) {
+            case 'pageLoad':
+                return this.attachPageLoad(node, ix, element);
+            case 'pageEnter':
+                // In the builder canvas there is no navigation, so preview a page-enter the same
+                // way as page-load (pre-stated hidden → animate in). In production the SSR engine
+                // fires it only after the page transition completes (ClientInteractionService).
+                return this.attachPageLoad(node, ix, element);
+            case 'pageLeave':
+                // Exit choreography that plays on navigate-away. There is no navigation in the
+                // builder, so it does not auto-fire (element stays visible) — the overlay play
+                // button previews it via replay(). In production the orchestrator awaits it.
+                return () => { };
+            case 'viewportEnter':
+                return this.attachViewportEnter(node, ix, element);
+            case 'click':
+                return this.attachClick(node, ix, element);
+            case 'hover':
+                return this.attachHover(node, ix, element);
+            case 'scrollProgress':
+                return this.attachScrollProgress(node, ix, element);
+            case 'itemOn':
+            case 'itemOff':
+                return this.attachItemState(node, ix, element, ix.trigger === 'itemOn');
+            default:
+                return () => { };
         }
-        element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
-        this.preStatedElements.add(element);
     }
-    clearInlineAnimationStyles(element) {
-        element.style.removeProperty('opacity');
-        element.style.removeProperty('transform');
-        element.style.removeProperty('clip-path');
-        element.style.removeProperty('visibility');
-        element.style.removeProperty('pointer-events');
-        element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
+    /**
+     * `scrollProgress` (premium M6, N7): the actions follow where the element stands in the canvas's page, on the canvas's
+     * ONE scroll loop — the Scenes' driver (iox-ui `attachScrollProgress`, the live site's same call). While a reading bar
+     * is selected (R2) it stands full, so it can be seen and styled.
+     */
+    attachScrollProgress(node, ix, element) {
+        if (!this.sceneCanvas || ix.trigger !== SCROLL_PROGRESS_TRIGGER)
+            return () => { };
+        return this.sceneCanvas.linkScroll(element, ix, {
+            onCanvas: this.isBuilderMode(),
+            targetsOf: action => {
+                const target = this.resolveTarget(node, action, element);
+                return target ? [target] : [];
+            },
+            held: () => (node.id && this.designState?.isShown(node.id) ? 1 : null),
+        });
     }
-    /** A hover-out: the action played back from where the element IS (never from its end frame), settled by the shared
-     *  rule — played back to hidden, it holds hidden; to shown, it releases. */
-    reverseAction(element, action) {
-        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
-        const keyframes = this.keyframesFor(type, action);
-        if (!keyframes.length)
-            return;
-        const frames = [...keyframes].reverse();
-        if (!motionAllowed()) {
-            settleInteraction(element, frames, settleModeFor(type, true), this.settleOptions());
-            return;
-        }
-        playInteraction(element, { type, params: action.params }, frames, {
-            duration: action.duration,
-            easing: resolveInteractionEasing(action.easing, element),
-        }, { ...this.settleOptions(), reverse: true });
+    /**
+     * A count (premium M6, N5) shows its start value once armed, so it can count when it comes into view; armed after
+     * every pre-state, so a number its entrance hides is armed and one the author can already read keeps its value.
+     */
+    armCounts(node, element) {
+        const armed = armInteractionCounts(node.interactions, action => this.resolveTarget(node, action, element));
+        if (armed.length)
+            this.armedCounts.set(node, armed);
     }
-    /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
-    keyframesFor(type, action) {
-        return buildInteractionKeyframes(type, action.params) ?? [];
+    /**
+     * `itemOn` / `itemOff` (CC2): run when the part's accordion ITEM opens / closes — announced by the shared
+     * composite-core runtime on the item, on the canvas as on the site. An item already open when the
+     * listener attaches has opened: its `itemOn` runs at once (its entrance was pre-stated hidden).
+     */
+    attachItemState(node, ix, element, on) {
+        const run = () => this.runActions(node, ix.actions, element);
+        const off = onCompositeItemState(element, on, run);
+        const timer = on && isCompositeItemOn(element) ? setTimeout(run, 50) : null;
+        return () => { off(); if (timer)
+            clearTimeout(timer); };
     }
-    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 }] });
-/** The canvas's token scopes: the page frame and the globals' overlay (each declares the org's tokens). */
-const CANVAS_TOKEN_SCOPE = '.iox-token-scope';
-/** The floating layer's home on the canvas for an element: the token scope (the zoomed frame) it sits in. */
-function canvasFloatingContainer(from) {
-    return from?.closest?.(CANVAS_TOKEN_SCOPE) ?? from?.ownerDocument?.querySelector(CANVAS_TOKEN_SCOPE) ?? null;
-}
-/** Raise a toast on the canvas (a showToast action the canvas runs): inside the frame, never over the builder. */
-function showCanvasToast(text, edge, from) {
-    const doc = from?.ownerDocument ?? (typeof document !== 'undefined' ? document : null);
-    showToast(doc, typeof text === 'string' ? text : '', { edge: typeof edge === 'string' ? edge : null, from, topLayer: false, container: canvasFloatingContainer(from) });
-}
-
-// Virtual trait composition now lives in @vectoriox/iox-ui so the SSR engine (which does NOT depend
-// on iox-builder) can use the SAME logic — otherwise the engine emitted raw virtual keys
-// (translate-x, filter-blur…) as invalid CSS. This is a re-export passthrough to keep existing
-// iox-builder imports (`../style-compose`) working with no duplicated implementation.
-
-/**
- * Parts that are HIDDEN AT REST (complex-components R2, board 3): on the live site they are not on
- * screen until something opens them, so on the canvas they show only while selected into or switched
- * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. A Dialog (the mobile
- * menu's drawer, a consent banner) by its type; an Accordion's PANEL by its role (CC2 — closed until its
- * item opens); a Disclosure's panel and its "Read less" word (CC2.1 — shown only while it is open).
- */
-const HIDDEN_AT_REST_TYPES = ['Dialog', 'Popover'];
-const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel, DisclosureRole.Panel, DisclosureRole.Less];
-function isHiddenAtRest(node) {
-    return (!!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type)) || (!!node?.role && HIDDEN_AT_REST_ROLES.includes(node.role));
-}
-/**
- * How the selection shows a node hidden at rest — the two approved rules, by what the node IS:
- * - a PART of a composite (it carries a `role`: the mobile menu's drawer) follows R2 (board 3): the
- *   selection is the reveal, and moving it out of the part hides it again;
- * - a free-standing overlay (a plain Dialog) follows board A4: selecting it opens it, and it stays open
- *   while the author works elsewhere, until its X, its backdrop or the eye closes it.
- */
-var SelectionReveal;
-(function (SelectionReveal) {
-    SelectionReveal["WhileSelected"] = "while-selected";
-    SelectionReveal["UntilClosed"] = "until-closed";
-})(SelectionReveal || (SelectionReveal = {}));
-/**
- * Parts hidden at rest that live in a composite's TOGGLE, not in its panel (CC2.1 follow-up, approved 2026-10-21): a
- * click on one on the canvas toggles the composite live — selecting it never forces the reveal, so "Read less"
- * closes the disclosure it was clicked in. Only a part inside a PANEL is revealed by the selection.
- */
-const TOGGLE_PART_ROLES = [DisclosureRole.Less];
-/**
- * Parts the selection REVEALS though they are not hidden at rest (CC4a): a tab PANEL — one is always on, so the layer
- * tree draws it no eye-slash (board 3), but selecting anything inside an inactive one shows its tab while selected.
- */
-const REVEALED_WHILE_SELECTED_ROLES = [TabsRole.Panel];
-function selectionRevealOf(node) {
-    if (!!node?.role && REVEALED_WHILE_SELECTED_ROLES.includes(node.role))
-        return SelectionReveal.WhileSelected;
-    if (!isHiddenAtRest(node) || (!!node?.role && TOGGLE_PART_ROLES.includes(node.role)))
-        return null;
-    return node?.role ? SelectionReveal.WhileSelected : SelectionReveal.UntilClosed;
-}
-/** Root → `target`, inclusive, across `roots` (page layout and globals), or [] when it is not there. */
-function pathToNode(roots, target) {
-    for (const root of roots) {
-        if (root === target)
-            return [root];
-        const below = pathToNode(root.children ?? [], target);
-        if (below.length)
-            return [root, ...below];
+    // ── Triggers ─────────────────────────────────────────────
+    attachPageLoad(node, ix, element) {
+        const timer = setTimeout(() => {
+            if (this.hasPreStatedAncestor(element)) {
+                this.deferUntilVisible(element, () => this.runActions(node, ix.actions, element));
+            }
+            else {
+                this.runActions(node, ix.actions, element);
+            }
+        }, 50);
+        return () => clearTimeout(timer);
     }
-    return [];
-}
-
-const NAV_CONTEXT_ROLES = new Set([NavRole.Root, NavRole.Drawer, NavRole.Bar]);
-function findRole(nodes, role) {
-    for (const n of nodes) {
-        if (n.role === role)
-            return n;
-        const below = findRole(n.children ?? [], role);
-        if (below)
-            return below;
+    attachViewportEnter(node, ix, element) {
+        const firedSet = new Set();
+        const fire = () => {
+            const key = ix.id;
+            if (ix.actions.some(a => a.once) && firedSet.has(key))
+                return;
+            if (this.hasPreStatedAncestor(element)) {
+                this.deferUntilVisible(element, () => {
+                    if (ix.actions.some(a => a.once) && firedSet.has(key))
+                        return;
+                    firedSet.add(key);
+                    this.runActions(node, ix.actions, element);
+                });
+                return;
+            }
+            firedSet.add(key);
+            this.runActions(node, ix.actions, element);
+        };
+        // IntersectionObserver with no root uses the browser viewport.
+        // It respects overflow:hidden clipping from .preview-scroll so it fires
+        // correctly as Lenis scrolls (Lenis changes scrollTop on .preview-scroll).
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    cleanup();
+                    fire();
+                }
+            }
+        }, { threshold: 0.1 });
+        observer.observe(element);
+        // Builder: also listen to Lenis scroll events on .preview-lenis-content
+        // as a fallback in case IntersectionObserver misses elements behind a
+        // CSS transform (scale) on iox-page-component.
+        const lenisEl = this.overlayService.getScrollContainer();
+        let scrollFired = false;
+        const onScroll = () => {
+            if (scrollFired)
+                return;
+            const rootEl = this.overlayService.getIntersectionRoot();
+            if (!rootEl)
+                return;
+            const rootRect = rootEl.getBoundingClientRect();
+            const elRect = element.getBoundingClientRect();
+            const overlapH = Math.min(elRect.bottom, rootRect.bottom) - Math.max(elRect.top, rootRect.top);
+            const elH = elRect.bottom - elRect.top;
+            if (elH > 0 && overlapH / elH >= 0.1) {
+                scrollFired = true;
+                cleanup();
+                fire();
+            }
+        };
+        if (lenisEl)
+            lenisEl.addEventListener('scroll', onScroll, { passive: true });
+        const cleanup = () => {
+            observer.disconnect();
+            scrollFired = true;
+            if (lenisEl)
+                lenisEl.removeEventListener('scroll', onScroll);
+        };
+        return cleanup;
     }
-    return null;
-}
-/** True when the selection (root → selected) is the Navigation bar, its drawer, its bottom bar, or anything inside them. */
-function inPhoneMenuContext(path) {
-    return path.some(n => !!n.role && NAV_CONTEXT_ROLES.has(n.role));
-}
-/**
- * The phone menu a selection belongs to, or null when the selection is outside a navigation or the site has no drawer
- * (no phone shape yet, or the Bottom bar shape). The drawer is looked up in the selection's own Navigation bar first,
- * then in the globals (the Both shape makes it a global of its own).
- */
-function phoneMenuOf(path, globals = []) {
-    if (!inPhoneMenuContext(path))
-        return null;
-    const root = path.find(n => n.role === NavRole.Root) ?? null;
-    const scopes = root ? [root, ...globals] : [...globals];
-    const drawer = path.find(n => n.role === NavRole.Drawer) ?? findRole(scopes, NavRole.Drawer);
-    if (!drawer)
-        return null;
-    const menuButton = findRole(scopes, NavRole.MenuButton);
-    const at = navShapeBreakpoint(scopes);
-    return { root, drawer, menuButton, at };
-}
-/** True when the canvas, at `breakpoint`, shows the phone menu that takes over at `at` (that width or narrower). */
-function phoneMenuShowsAt(at, breakpoint) {
-    return cascadeChain(breakpoint).includes(at);
-}
-const OPENER_TRIGGER = 'click';
-/** The dialog actions a phone menu's opener runs (generation-core stamps Toggle; CC1 menus still hold Open). */
-var PhoneMenuOpenerAction;
-(function (PhoneMenuOpenerAction) {
-    PhoneMenuOpenerAction["Open"] = "openDialog";
-    PhoneMenuOpenerAction["Toggle"] = "toggleDialog";
-})(PhoneMenuOpenerAction || (PhoneMenuOpenerAction = {}));
-const OPENER_ACTIONS = new Set(Object.values(PhoneMenuOpenerAction));
-/** True when `interaction` is the phone menu's own opener: the menu button's (or More's) click opening the drawer. */
-function isPhoneMenuOpener(node, interaction, drawerId) {
-    if (!drawerId || (node?.role !== NavRole.MenuButton && node?.role !== NavRole.More))
+    isBuilderMode() {
+        return document.body.classList.contains('builder-active');
+    }
+    /** Returns true if any DOM ancestor of element is currently faded out via pre-state. */
+    hasPreStatedAncestor(element) {
+        let el = element.parentElement;
+        while (el && el !== document.body) {
+            if (this.preStatedElements.has(el))
+                return true;
+            el = el.parentElement;
+        }
         return false;
-    const actions = interaction?.actions ?? [];
-    return interaction?.trigger === OPENER_TRIGGER && actions.length === 1
-        && OPENER_ACTIONS.has(actions[0].type ?? '') && actions[0].target === drawerId;
-}
-
-/** What a hidden-at-rest part shows on the canvas when the author picks it in "Showing on canvas". */
-var CanvasShowState;
-(function (CanvasShowState) {
-    CanvasShowState["Closed"] = "closed";
-    CanvasShowState["Open"] = "open";
-})(CanvasShowState || (CanvasShowState = {}));
-const EMPTY_SNAPSHOT = () => ({
-    revealed: new Set(), selectedTriggers: new Set(), pinned: new Set(), triggeredBySelection: new Set(), shown: new Map(), items: new Map(),
-    runtime: new Set(), menu: null, tooltips: new Set(), toast: null,
-});
-/**
- * The canvas's DESIGN state (complex-components R2; composite plan §5a's CompositeDesignStateService,
- * started here for the navigation and reused by Accordion in CC2): which parts that are hidden at rest
- * — a closed drawer today, a collapsed panel or an inactive tab next — the canvas shows right now.
- *
- * Two sources, the Dialog's "selection is the reveal" and the Form's switcher, generalised:
- * - **the selection** — selecting anything inside a hidden part (tree, breadcrumb, an Items row,
- *   SELECT_NODE) shows it; deselecting hides it again (`setSelectionPath`);
- * - **"Showing on canvas"** — the Bindings panel's switcher, for the one case a selection cannot express:
- *   the page with the menu open while a part OUTSIDE it is selected (`setShown`).
- *
- * Canvas-only: never saved, never a history step. Also carries the canvas page's path, so a link to the
- * page being edited renders as the current page (N2) — the same decision the live site makes.
- */
-class CanvasDesignStateService {
-    constructor() {
-        this._state$ = new BehaviorSubject(EMPTY_SNAPSHOT());
-        this.state$ = this._state$.asObservable();
-        this._pagePath$ = new BehaviorSubject(null);
-        /** The app path of the page on the canvas (`/work`), or null when unknown. */
-        this.pagePath$ = this._pagePath$.asObservable();
     }
-    get snapshot() {
-        return this._state$.value;
+    /** Polls via RAF until no ancestor is in pre-state, then fires callback. */
+    deferUntilVisible(element, callback) {
+        const poll = () => {
+            if (!this.hasPreStatedAncestor(element)) {
+                callback();
+            }
+            else {
+                requestAnimationFrame(poll);
+            }
+        };
+        requestAnimationFrame(poll);
+    }
+    attachClick(node, ix, element) {
+        // G7: press FEEDBACK (an animation of the pressed element that hides and shows nothing) lands on pointer-down,
+        // at once; the rest commits on the click. A toggle keeps its whole list on the click (the shared split, iox-ui).
+        const { onPress, onClick } = ix.reverseActions?.length ? { onPress: [], onClick: ix.actions } : splitPressFeedback(ix.actions);
+        const handler = () => {
+            if (ix.reverseActions?.length) {
+                // Toggle: alternate between primary and reverse actions on each click.
+                const isToggled = this.toggleStates.get(ix.id) ?? false;
+                this.runActions(node, isToggled ? ix.reverseActions : ix.actions, element);
+                this.toggleStates.set(ix.id, !isToggled);
+            }
+            else {
+                this.runActions(node, onClick, element);
+            }
+        };
+        const press = (e) => { if (e.button === 0 || e.pointerType !== 'mouse')
+            this.runActions(node, onPress, element); };
+        // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
+        // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
+        // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
+        element.addEventListener('click', handler, true);
+        if (onPress.length)
+            element.addEventListener('pointerdown', press, true);
+        return () => {
+            element.removeEventListener('click', handler, true);
+            element.removeEventListener('pointerdown', press, true);
+        };
+    }
+    attachHover(node, ix, element) {
+        // G7: a hover trigger answers a mouse or a pen — a finger's emulated hover stuck until the next tap elsewhere.
+        const enterHandler = (e) => { if (isHoverPointer(e))
+            this.runActions(node, ix.actions, element); };
+        const leaveHandler = (e) => {
+            if (!isHoverPointer(e))
+                return;
+            // Reverse animations on leave for hover triggers
+            for (const action of ix.actions) {
+                if (!isActionEnabled(action))
+                    continue;
+                // Context actions have no "backwards" — the shared table decides what leave does
+                // (clear, unless the action sets noReverse). Same call the SSR engine makes.
+                if (isContextAction(action)) {
+                    this.applyContextAction(action, element, 'reverse');
+                    continue;
+                }
+                const target = this.resolveTarget(node, action, element);
+                if (!target)
+                    continue;
+                this.reverseAction(target, action);
+            }
+        };
+        element.addEventListener('pointerenter', enterHandler);
+        element.addEventListener('pointerleave', leaveHandler);
+        return () => {
+            element.removeEventListener('pointerenter', enterHandler);
+            element.removeEventListener('pointerleave', leaveHandler);
+        };
+    }
+    // ── Actions ──────────────────────────────────────────────
+    runActions(node, actions, selfEl) {
+        for (const action of actions) {
+            if (!isActionEnabled(action))
+                continue; // switched off by the author
+            if (this.SWIPER_ACTIONS.has(action.type)) {
+                this.executeSwiperAction(action);
+                continue;
+            }
+            // Dialog actions (A1b): the canvas RUNS them — styling a dialog you cannot open is
+            // impossible. The canvas twin registered open/close/toggle under its nodeId, exactly
+            // the Swiper-method pattern; a missing/mistargeted id is a silent no-op, never a throw.
+            if (DIALOG_ACTION_TYPES.has(action.type)) {
+                this.executeDialogAction(action, selfEl);
+                continue;
+            }
+            // Popover actions (premium M5): the canvas RUNS them too, through the twin's registry — beside the element
+            // whose click ran them (the opener the live runtime anchors to).
+            if (POPOVER_ACTION_TYPE_SET.has(action.type)) {
+                this.executePopoverAction(action, selfEl);
+                continue;
+            }
+            // A toast (premium M5): RUN inside the page's frame — the layer of the token scope the element sits in (the
+            // page, or the globals' overlay), so it wears the look and zooms with the canvas.
+            if (TOAST_ACTION_TYPES.has(action.type)) {
+                showCanvasToast(action.params?.['text'], action.params?.['edge'], selfEl ?? null);
+                continue;
+            }
+            // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
+            // one the live site runs — and brings an item that opened out of view into it.
+            const itemAction = itemActionOf(action.type);
+            if (itemAction) {
+                this.executeItemAction(node, action, itemAction, selfEl);
+                continue;
+            }
+            // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
+            // (ELEMENT_ACTION_DESCRIPTORS): copy runs, scrollTo runs (scrollIntoView — the frame
+            // scrolls natively here; the Lenis rule is the LIVE side's), navigate and submitForm
+            // SIMULATE — a dispatched event the host surfaces as a toast, never a route change
+            // or a fake submit under the author's feet.
+            if (BEHAVIOUR_ACTION_TYPES.has(action.type)) {
+                this.executeBehaviourAction(node, action, selfEl);
+                continue;
+            }
+            // Tier-B server actions (A2). ALWAYS a simulation here: the canvas is the ADMIN's
+            // browser and a server action is a public-site write (an email, a webhook, a content
+            // row) — the toast says what the LIVE site would do.
+            if (SERVER_ELEMENT_ACTION_TYPES.has(action.type)) {
+                const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+                window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+                continue;
+            }
+            // Consent actions (C3). Recording ones SIMULATE — the canvas is the ADMIN's browser,
+            // and an admin's cookie is not a visitor's decision; the toast says what would be
+            // recorded. Opening the preferences dialog is dialog-opening and honestly RUNS.
+            if (CONSENT_ACTION_TYPES.has(action.type)) {
+                this.executeConsentAction(action);
+                continue;
+            }
+            // 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;
     }
-    get pagePath() {
-        return this._pagePath$.value;
+    /** 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 ?? {}) };
     }
-    setPagePath(path) {
-        const next = path ?? null;
-        if (next !== this._pagePath$.value)
-            this._pagePath$.next(next);
+    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;
+            }
+        }
     }
-    /**
-     * The selection moved. The hidden-at-rest PARTS on its path are revealed and every other part is not
-     * (R2); a free-standing overlay on the path is pinned open until it is closed (A4). `globals` lets it find the
-     * phone menu the selection belongs to when its drawer lives outside the path (the Both shape).
-     */
-    setSelectionPath(path, globals = []) {
-        const ids = (reveal) => path.filter(n => selectionRevealOf(n) === reveal).map(n => n.id).filter((id) => !!id);
-        const revealed = new Set(ids(SelectionReveal.WhileSelected));
-        const selectedTriggers = new Set(path.filter(n => isExclusiveTrigger(n)).map(n => n.id).filter((id) => !!id));
-        const triggeredBySelection = new Set(path.map(displayTriggerOf).filter((id) => !!id));
-        const { revealed: was, pinned: held, selectedTriggers: wasTriggers, triggeredBySelection: wasTriggered } = this._state$.value;
-        const pinned = new Set([...held, ...ids(SelectionReveal.UntilClosed)]);
-        const menu = phoneMenuOf(path, globals);
-        if (sameSet(revealed, was) && sameSet(pinned, held) && sameSet(selectedTriggers, wasTriggers) && sameSet(triggeredBySelection, wasTriggered)
-            && sameMenu(menu, this._state$.value.menu))
+    executeItemAction(node, action, itemAction, selfEl) {
+        const target = this.resolveTarget(node, action, selfEl);
+        const open = runCompositeItemAction(target, itemAction);
+        if (!open || !target)
             return;
-        this._state$.next({ ...this._state$.value, revealed, pinned, selectedTriggers, triggeredBySelection, menu });
+        if (shouldScrollToItem(target.getBoundingClientRect().top, window.innerHeight))
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    /** Closed on the canvas (its X, its backdrop, the eye): no longer pinned, switched open or revealed by the
-     *  selection — selecting into it again reveals it again. */
-    dismiss(nodeId) {
-        if (!nodeId)
+    executeConsentAction(action) {
+        if (action.type === 'openConsentPreferences') {
+            const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+            dialog?.open?.();
             return;
-        const { pinned, shown, revealed, runtime } = this._state$.value;
-        if (!pinned.has(nodeId) && !shown.has(nodeId) && !revealed.has(nodeId) && !runtime.has(nodeId))
+        }
+        const detail = { type: action.type, params: action.params ?? {}, target: action.target };
+        window.dispatchEvent(new CustomEvent('iox-action-simulated', { detail }));
+    }
+    executeDialogAction(action, selfEl) {
+        const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+        if (!dialog)
             return;
-        const nextPinned = new Set(pinned);
-        nextPinned.delete(nodeId);
-        const nextShown = new Map(shown);
-        nextShown.delete(nodeId);
-        const nextRevealed = new Set(revealed);
-        nextRevealed.delete(nodeId);
-        const nextRuntime = new Set(runtime);
-        nextRuntime.delete(nodeId);
-        this._state$.next({ ...this._state$.value, pinned: nextPinned, shown: nextShown, revealed: nextRevealed, runtime: nextRuntime });
+        switch (action.type) {
+            case 'openDialog':
+                dialog.open?.();
+                // CC3 "Open at the clicked item": the lightbox's slider goes to the clicked row's slide — the same
+                // rule the live site runs (composite-core `slideIndexForRow`), once the canvas twin has rendered it.
+                if (opensAtClickedItem(action))
+                    this.slideDialogToRow(action.target, rowIndexOf$1(selfEl));
+                break;
+            case 'closeDialog':
+                dialog.close?.();
+                break;
+            case 'toggleDialog':
+                dialog.toggle?.();
+                break;
+        }
     }
-    /** An action opened the overlay on the canvas (a click on the menu button): shown until something closes it. */
-    markOpened(nodeId) {
-        if (!nodeId || this._state$.value.runtime.has(nodeId))
+    executePopoverAction(action, selfEl) {
+        const popover = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
+        if (!popover)
             return;
-        this._state$.next({ ...this._state$.value, runtime: new Set([...this._state$.value.runtime, nodeId]) });
+        switch (action.type) {
+            case 'openPopover':
+                popover.open?.(selfEl ?? null);
+                break;
+            case 'closePopover':
+                popover.close?.();
+                break;
+            case 'togglePopover':
+                popover.toggle?.(selfEl ?? null);
+                break;
+        }
     }
-    /** The switcher's choice for one part (null = back to the saved default). */
-    setShown(nodeId, state) {
-        const shown = new Map(this._state$.value.shown);
-        if (state && state !== CanvasShowState.Closed)
-            shown.set(nodeId, state);
-        else
-            shown.delete(nodeId);
-        this._state$.next({ ...this._state$.value, shown });
+    /** The slider inside the opened dialog (its canvas twin renders on the next passes) → the row's slide. */
+    slideDialogToRow(dialogId, row) {
+        let tries = 0;
+        const attempt = () => {
+            const host = document.querySelector(`.iox-node-${CSS.escape(dialogId)}`);
+            const swiper = host?.querySelector('.swiper')?.swiper;
+            if (swiper?.slides?.length) {
+                swiper.update?.();
+                swiper.slideTo(slideIndexForRow(row, swiper.slides.length), 0);
+                return;
+            }
+            if (++tries < 40)
+                requestAnimationFrame(attempt);
+        };
+        requestAnimationFrame(attempt);
     }
-    /** Tabs' "Showing on canvas": the item a root shows (null = whatever the canvas shows live). */
-    setShownItem(rootId, key) {
-        if ((this._state$.value.items.get(rootId) ?? null) === key)
+    executeSwiperAction(action) {
+        // Target is the nodeId of the SliderContainer to control.
+        const swiper = this.instanceRegistry.get(action.target);
+        if (!swiper)
             return;
-        const items = new Map(this._state$.value.items);
-        if (key)
-            items.set(rootId, key);
-        else
-            items.delete(rootId);
-        this._state$.next({ ...this._state$.value, items });
-    }
-    /** The item a root's "Showing on canvas" shows, or null. */
-    shownItem(rootId) {
-        return (rootId && this._state$.value.items.get(rootId)) || null;
+        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 switcher's current choice for one part. */
-    shownState(nodeId) {
-        return (nodeId && this._state$.value.shown.get(nodeId)) || CanvasShowState.Closed;
+    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;
     }
-    /** True when the canvas shows the part: selected into, switched open, or opened by an action. */
-    isShown(nodeId) {
-        if (!nodeId)
-            return false;
-        const { revealed, pinned, shown, runtime } = this._state$.value;
-        return revealed.has(nodeId) || pinned.has(nodeId) || runtime.has(nodeId) || shown.get(nodeId) === CanvasShowState.Open;
+    executeAction(element, action) {
+        // toggleVisibility HIDES a visible element and SHOWS a hidden one — resolved against the element's
+        // own state, the same rule the live site applies (shared `effectiveActionType`, CC1 N5).
+        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
+        const keyframes = this.keyframesFor(type, action);
+        // A count has no frames (its digits are written from its own clock) and is still an action.
+        if (!keyframes.length && type !== COUNT_UP_ACTION)
+            return;
+        if (this.ENTRANCE_TYPES.has(type))
+            element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
+        else if (this.EXIT_TYPES.has(type))
+            element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
+        // Reduced motion (CC1 R1): no animation runs — the element is left as the run would leave it (the shared settle
+        // rule: an entrance releases to the stylesheet, an exit holds its hidden frame).
+        if (!motionAllowed()) {
+            settleInteraction(element, keyframes, settleModeFor(type), this.settleOptions());
+            this.settleAfter(element, type);
+            return;
+        }
+        // The ONE call the live site makes too: fill both (holds the first frame through a delay), started from the live
+        // value, settled by the shared rule — an element that has entered keeps its hover and press (iox-ui#41). A look
+        // entrance on a Repeater's template staggers its rows: each copy adds its row's share (shared `entranceDelay`).
+        const anim = playInteraction(element, { type, params: action.params }, keyframes, {
+            duration: action.duration,
+            delay: entranceDelay(action, repeatedRowIndex(element)),
+            // A keyword, a curve, or the look's easing token as this element sees it (G6) — the live site's resolver.
+            easing: resolveInteractionEasing(action.easing, element),
+        }, this.settleOptions());
+        anim.finished.then(() => this.settleAfter(element, type)).catch(() => { });
     }
-    /** True when the canvas shows an item because the selection is styled "when it is on" (the switcher's hint). */
-    isTriggeredBySelection(triggerId) {
-        return !!triggerId && this._state$.value.triggeredBySelection.has(triggerId);
+    /** On the canvas a run never writes a transform inline (one inside the scaled page breaks Lenis). */
+    settleOptions() {
+        return this.isBuilderMode() ? { skip: CANVAS_SKIPPED_PROPS } : {};
     }
-    /** True when the part is shown only because the selection is inside it (the switcher's hint line). */
-    isRevealedBySelection(nodeId) {
-        return !!nodeId && this._state$.value.revealed.has(nodeId);
+    /** What an element is left as once an action is done: a revealed one interactive, a hidden one inert. */
+    settleAfter(element, type) {
+        if (this.ENTRANCE_TYPES.has(type)) {
+            element.style.removeProperty('pointer-events');
+            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);
+        }
+        else if (this.EXIT_TYPES.has(type)) {
+            // Once the exit is done the element is invisible — disable pointer events so it doesn't
+            // silently block clicks underneath it.
+            element.style.setProperty('pointer-events', 'none');
+        }
     }
-    /** Hold a control's tooltip open on the canvas (true), or let it go. */
-    setTooltipShown(nodeId, on) {
-        if (!nodeId || this._state$.value.tooltips.has(nodeId) === on)
+    /**
+     * 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.keyframesFor(action.type, action);
+        if (!keyframes.length)
             return;
-        const tooltips = new Set(this._state$.value.tooltips);
-        if (on)
-            tooltips.add(nodeId);
-        else
-            tooltips.delete(nodeId);
-        this._state$.next({ ...this._state$.value, tooltips });
+        const first = entrancePreStateStyle(action.type, action.params);
+        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. An entrance that hides
+            // nothing (a picture settling) stays in view.
+            if ('opacity' in first || 'visibility' in first)
+                element.style.setProperty('opacity', '0');
+            element.style.setProperty('pointer-events', 'none');
+        }
+        else {
+            for (const [prop, val] of Object.entries(first))
+                element.style.setProperty(prop, val);
+            element.style.setProperty('pointer-events', 'none');
+        }
+        element.setAttribute(INTERACTION_HIDDEN_ATTRIBUTE, '');
+        this.preStatedElements.add(element);
     }
-    /** True while the canvas holds the control's tooltip open. */
-    tooltipShown(nodeId) {
-        return !!nodeId && this._state$.value.tooltips.has(nodeId);
+    clearInlineAnimationStyles(element) {
+        element.style.removeProperty('opacity');
+        element.style.removeProperty('transform');
+        element.style.removeProperty('clip-path');
+        element.style.removeProperty('visibility');
+        element.style.removeProperty('pointer-events');
+        element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
     }
-    /** Hold a toast up on the canvas with these words, or take it down (null). */
-    setToastShown(words) {
-        const next = words === null ? null : String(words);
-        if (this._state$.value.toast === next)
+    /** A hover-out: the action played back from where the element IS (never from its end frame), settled by the shared
+     *  rule — played back to hidden, it holds hidden; to shown, it releases. */
+    reverseAction(element, action) {
+        const type = effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE));
+        const keyframes = this.keyframesFor(type, action);
+        if (!keyframes.length)
             return;
-        this._state$.next({ ...this._state$.value, toast: next });
-    }
-    /** The words of the toast the canvas holds up, or null. */
-    get toastShown() {
-        return this._state$.value.toast;
+        const frames = [...keyframes].reverse();
+        if (!motionAllowed()) {
+            settleInteraction(element, frames, settleModeFor(type, true), this.settleOptions());
+            return;
+        }
+        playInteraction(element, { type, params: action.params }, frames, {
+            duration: action.duration,
+            easing: resolveInteractionEasing(action.easing, element),
+        }, { ...this.settleOptions(), reverse: true });
     }
-    /** A new page on the canvas: nothing is revealed or switched open. */
-    reset() {
-        this._state$.next(EMPTY_SNAPSHOT());
+    /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
+    keyframesFor(type, action) {
+        return buildInteractionKeyframes(type, action.params) ?? [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CanvasDesignStateService }); }
+    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: CanvasDesignStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: InteractionEngineService, decorators: [{
             type: Injectable
-        }] });
-function sameMenu(a, b) {
-    if (!a || !b)
-        return a === b;
-    return a.drawer === b.drawer && a.menuButton === b.menuButton && a.root === b.root && a.at === b.at;
-}
-function sameSet(a, b) {
-    return a.size === b.size && [...a].every(id => b.has(id));
+        }], ctorParameters: () => [{ type: OverlayService }] });
+/** The canvas's token scopes: the page frame and the globals' overlay (each declares the org's tokens). */
+const CANVAS_TOKEN_SCOPE = '.iox-token-scope';
+/** The floating layer's home on the canvas for an element: the token scope (the zoomed frame) it sits in. */
+function canvasFloatingContainer(from) {
+    return from?.closest?.(CANVAS_TOKEN_SCOPE) ?? from?.ownerDocument?.querySelector(CANVAS_TOKEN_SCOPE) ?? null;
 }
-/**
- * Show or hide an overlay part (the Menu drawer) for DESIGN — ONE move for every control that previews it (the
- * Bindings ▸ Phone menu row, the canvas's Menu chip). Opening switches it open; closing closes its canvas twin the way
- * its own Close does (the exit plays, the reveal and the switch are cleared, a selection inside it moves to its
- * opener), so a drawer shown because the selection sits in it closes too.
- */
-function setOverlayPreview(state, twins, id, open) {
-    if (!id)
-        return;
-    if (open) {
-        state.setShown(id, CanvasShowState.Open);
-        return;
-    }
-    const twin = twins?.get(id);
-    if (twin?.close)
-        twin.close();
-    else
-        state.dismiss(id);
+/** Raise a toast on the canvas (a showToast action the canvas runs): inside the frame, never over the builder. */
+function showCanvasToast(text, edge, from) {
+    const doc = from?.ownerDocument ?? (typeof document !== 'undefined' ? document : null);
+    showToast(doc, typeof text === 'string' ? text : '', { edge: typeof edge === 'string' ? edge : null, from, topLayer: false, container: canvasFloatingContainer(from) });
 }
 
+// Virtual trait composition now lives in @vectoriox/iox-ui so the SSR engine (which does NOT depend
+// on iox-builder) can use the SAME logic — otherwise the engine emitted raw virtual keys
+// (translate-x, filter-blur…) as invalid CSS. This is a re-export passthrough to keep existing
+// iox-builder imports (`../style-compose`) working with no duplicated implementation.
+
 /** The node whose "Showing on canvas" choice a rendered root follows: itself, or — a preview row's copy — its
  *  template (a copy shares its template's style id). */
 function designIdOf(node) {
@@ -5222,11 +5422,12 @@ class CompositeCanvasService {
         this.zone = zone;
         this.attached = new Map();
         this.exclusive = new Map();
+        this.marquees = new Map();
         this.sub = designState?.state$.subscribe(() => this.applyDesignState()) ?? null;
     }
     ngOnDestroy() {
         this.sub?.unsubscribe();
-        for (const id of [...this.attached.keys(), ...this.exclusive.keys()])
+        for (const id of [...this.attached.keys(), ...this.exclusive.keys(), ...this.marquees.keys()])
             this.detach(id);
     }
     /** A composite root rendered on the canvas (the template, or a preview row's copy): run it. `element` is the
@@ -5235,6 +5436,11 @@ class CompositeCanvasService {
         if (!node.id)
             return;
         this.detach(node.id);
+        if (isMarqueeRoot(node)) {
+            this.marquees.set(node.id, { node, element, runtime: null });
+            this.applyMarquee(this.marquees.get(node.id));
+            return;
+        }
         const cssId = node.styleId ?? node.id;
         const rootId = () => compositeScopeId(cssId, compositeRowKeys(element));
         if (isExclusiveRoot(node)) {
@@ -5280,6 +5486,12 @@ class CompositeCanvasService {
         tabs?.runtime.destroy();
         tabs?.release();
         this.exclusive.delete(nodeId);
+        this.marquees.get(nodeId)?.runtime?.destroy();
+        this.marquees.delete(nodeId);
+    }
+    /** The runtime of a Marquee moving on the canvas, or null while it stands still. */
+    marqueeRuntimeOf(nodeId) {
+        return (nodeId && this.marquees.get(nodeId)?.runtime) || null;
     }
     /** The root's behaviour changed in its panel (Allow several open, Open by default; Activate on, Orientation). */
     refreshBehaviour(node) {
@@ -5316,6 +5528,18 @@ class CompositeCanvasService {
         }
         for (const entry of this.exclusive.values())
             this.applyExclusive(entry);
+        for (const entry of this.marquees.values())
+            this.applyMarquee(entry);
+    }
+    /** Moving while "Showing on canvas" says so (the live site's runtime: its copy, its pause control), else still. */
+    applyMarquee(entry) {
+        const moving = this.designState?.shownState(designIdOf(entry.node)) === CanvasShowState.Open;
+        if (moving && !entry.runtime)
+            entry.runtime = this.zone.runOutsideAngular(() => new MarqueeRuntime(entry.element));
+        else if (!moving && entry.runtime) {
+            entry.runtime.destroy();
+            entry.runtime = null;
+        }
     }
     /** A Tabs on the canvas follows "Showing on canvas" and a selected tab (live), then shows any forced panel. */
     applyExclusive(entry) {
@@ -5380,119 +5604,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     type: Optional
                 }] }, { type: i0.NgZone }] });
 
-const CANVAS_SCROLLER = '.preview-scroll';
-const PREVIEW_SCROLLER = '.iox-page-wrapper';
-/**
- * Scenes on the canvas and in Preview: the SAME scene-core driver the live site runs, so a layer stands at the same
- * value at the same progress in every renderer (premium-sites plan §5b). The canvas's page never scrolls itself (its
- * Lenis scrolls a wrapper around a zoomed frame), so `position: sticky` cannot hold the stage there and the driver does;
- * Preview's page is a real scroller, and sticky works. Canvas-only state: it never writes a node, so nothing here is
- * saved or becomes an undo step.
- */
-class SceneCanvasService {
-    constructor() {
-        this.zone = inject(NgZone);
-        this.overlay = inject(OverlayService, { optional: true });
-        this.driver = null;
-        this.rootsById = new Map();
-        this.idsByRoot = new Map();
-        /** Every frame on every Scene: the selection box and the timeline follow on it. */
-        this.frames$ = new Subject();
-    }
-    /**
-     * Drive a root. `onCanvas` comes from the caller, because only the render directive can read IOX_BUILDER_CANVAS: the
-     * token is provided on the canvas's element, below where this service lives. Read here, it answered false, and the
-     * canvas measured its Scenes against a page that moves with them, so they never left progress 0.
-     */
-    attach(root, onCanvas, nodeId) {
-        this.zone.runOutsideAngular(() => {
-            this.driver ??= new ScrollDriver({
-                pin: onCanvas,
-                observe: true,
-                originOf: el => el.closest(onCanvas ? CANVAS_SCROLLER : PREVIEW_SCROLLER),
-                onFrame: (el, state) => this.frames$.next({ nodeId: this.idsByRoot.get(el) ?? null, ...state }),
-            });
-            this.driver.add(root);
-        });
-        if (nodeId) {
-            this.rootsById.set(nodeId, root);
-            this.idsByRoot.set(root, nodeId);
-        }
-    }
-    detach(root) {
-        this.driver?.remove(root);
-        const id = this.idsByRoot.get(root);
-        // A re-render attaches the new element before the old one detaches: it must not lose the new one.
-        if (id && this.rootsById.get(id) === root)
-            this.rootsById.delete(id);
-        this.idsByRoot.delete(root);
-    }
-    /** The canvas's Lenis just moved the scroll, inside this frame: hold every stage in this same frame. */
-    pinNow() {
-        this.driver?.pinNow();
-    }
-    /** The damped progress a root's layers stand at. */
-    progressOf(root) {
-        return this.driver?.progressOf(root) ?? null;
-    }
-    /** Where the scroll stands in a Scene, 0 to 1. Null for a Scene that is not on the canvas. */
-    positionOf(nodeId) {
-        const root = nodeId ? this.rootsById.get(nodeId) : null;
-        return root ? this.driver?.targetOf(root) ?? null : null;
-    }
-    /**
-     * Stand a Scene at `p` by really scrolling the canvas: there is one position, so the scrubber, the wheel, the pin and
-     * the selection box can never disagree. It lands with no glide, because the author is waiting to see that moment.
-     */
-    goTo(nodeId, p) {
-        const root = nodeId ? this.rootsById.get(nodeId) : null;
-        const offset = root ? this.driver?.offsetFor(root, p) : null;
-        const scroller = root?.closest(CANVAS_SCROLLER);
-        if (!root || offset == null || !scroller)
-            return;
-        const rect = root.getBoundingClientRect();
-        const zoom = root.offsetHeight ? rect.height / root.offsetHeight : 1;
-        scroller.scrollTop += rect.top - scroller.getBoundingClientRect().top + offset * zoom;
-        this.driver?.settle(root);
-    }
-    /**
-     * A layer's tracks were edited: its element carries them now and its Scene plays them on the next frame, with no
-     * re-render, because a Scene's own DOM is what the author is looking at.
-     */
-    refreshLayer(node, root) {
-        const ref = this.overlay?.getNodeRef(node) ?? (node.id ? this.overlay?.findRefByNodeId(node.id)?.ref : undefined);
-        if (ref?.element && this.overlay)
-            syncSceneAttributes(this.overlay.getStyledElement(ref.element), node);
-        const el = root?.id ? this.rootsById.get(root.id) : null;
-        if (el)
-            this.driver?.reread(el);
-    }
-    /**
-     * A value a layer's own component draws changed (a Video's pictures): its instance takes it now. Its Scene reads the new
-     * attribute when it lands, with no re-render of the page.
-     */
-    setLayerInput(node, name, value) {
-        const ref = this.overlay?.getNodeRef(node) ?? (node.id ? this.overlay?.findRefByNodeId(node.id)?.ref : undefined);
-        const component = ref?.componentRef;
-        if (!component?.instance)
-            return;
-        component.instance[name] = value;
-        component.changeDetectorRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.driver?.destroy();
-        this.driver = null;
-        this.rootsById.clear();
-        this.idsByRoot.clear();
-        this.frames$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: SceneCanvasService, decorators: [{
-            type: Injectable
-        }] });
-
 /** The input a component declares to receive its empty-image placeholder (the Image). */
 const EMPTY_SRC_INPUT = 'emptySrc';
 /** The editing canvas's "Add image" label, through the host's i18n. */
@@ -6026,7 +6137,7 @@ class RenderDirective {
         // A composite root runs its behaviour on the canvas — the live site's runtime (CC2; the Disclosure, CC2.1).
         // A preview row's copy runs too, scoped by its row (vectoriox/iox-ui#20): its ids are its own and it shows
         // the saved default, as every row does on the live site.
-        if (nativeEl && node.id && isAnyCompositeRoot(node) && this.compositeCanvas) {
+        if (nativeEl && node.id && (isAnyCompositeRoot(node) || isMarqueeRoot(node)) && this.compositeCanvas) {
             this.compositeCanvas.attach(node, nativeEl);
             this.compositeRootId = node.id;
         }
@@ -6603,6 +6714,9 @@ var CompositePresetId;
     CompositePresetId["Segmented"] = "segmented";
     CompositePresetId["Lightbox"] = "lightbox";
     CompositePresetId["Scene"] = "scene";
+    CompositePresetId["Marquee"] = "marquee";
+    CompositePresetId["Counter"] = "counter";
+    CompositePresetId["ReadingBar"] = "reading-bar";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
  *  composites (the Accordion — CC2, the Disclosure — CC2.1, Tabs — CC4a, the Segmented control — CC4b; the floating
@@ -6658,6 +6772,22 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'A stage that holds still while the page scrolls past it, and everything on it moves. Add your pictures and words as layers.',
         build: create => buildSceneRecipe(create),
     },
+    // Premium components M6.
+    {
+        id: CompositePresetId.Marquee, group: CompositePaletteGroup.Interactive, name: 'Marquee', icon: 'ph-thin ph-arrows-left-right',
+        description: 'A band of words that moves on its own, with a pause button. Still when the visitor asks for less motion.',
+        build: create => buildMarqueeRecipe(create),
+    },
+    {
+        id: CompositePresetId.Counter, group: CompositePaletteGroup.Interactive, name: 'Counter', icon: 'ph-thin ph-number-circle-one',
+        description: 'A number that counts up once, the first time it comes into view — the real number is always in the page.',
+        build: create => buildCounterRecipe(create),
+    },
+    {
+        id: CompositePresetId.ReadingBar, group: CompositePaletteGroup.Interactive, name: 'Reading bar', icon: 'ph-thin ph-line-segment',
+        description: 'A thin bar that fills as the page is read — or its section: change it in Interactions.',
+        build: create => buildReadingBarRecipe(create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -14746,6 +14876,7 @@ class BuilderContainerComponentConfig extends ComponentConfig {
             buildColorSchemeTrait(),
             ...buildCompositeBehaviourTraits(),
             ...buildHeaderBehaviourTraits(),
+            ...buildMarqueeTraits(),
         ];
         this.styleTraits = buildFullStyleTraits();
         this.applyStyleDefaults({
@@ -15592,5 +15723,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderPopoverComponent, BuilderRepeaterComponent, BuilderSpacerComponentConfig, BusinessSpecimenView, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CANVAS_TOKEN_SCOPE, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FieldTrait, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, POPOVER_PLACEMENT_OPTIONS, POPOVER_SHEET_MAX_WIDTH, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PhoneMenuOpenerAction, PopoverComponentConfig, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SENT_LABEL_TRAIT, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SceneCanvasService, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, addFormChannel, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormActionsRow, buildFormChannel, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasFloatingContainer, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeByIdInEither, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, formChannelOf, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, inPhoneMenuContext, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPhoneMenuOpener, isPinnedGlobal, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, phoneMenuOf, phoneMenuShowsAt, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setChannelAddress, setOverlayPreview, setStyleTrait, setTrait, shortDescriptor, showCanvasToast, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderPopoverComponent, BuilderRepeaterComponent, BuilderSpacerComponentConfig, BusinessSpecimenView, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, CANVAS_TOKEN_SCOPE, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FieldTrait, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PAGE_TRANSITION_EASING_OPTIONS, PALETTE_PRESET_DEFS, POPOVER_PLACEMENT_OPTIONS, POPOVER_SHEET_MAX_WIDTH, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PhoneMenuOpenerAction, PopoverComponentConfig, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, REVEALED_WHILE_SELECTED_ROLES, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, SENT_LABEL_TRAIT, SILENT_REFUSALS, STRUCTURAL_STATES, SUPPORTED_STATES, SceneCanvasService, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TOGGLE_PART_ROLES, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, VideoConfig, ViewportService, ZOOM_OPTIONS, addFormChannel, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildBusinessSpecimen, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormActionsRow, buildFormChannel, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, canvasFloatingContainer, canvasHostDisplay, collapseColumnsProps, columnCountOf, compositeStructureFindings, defaultBuilderLabels, defaultPageSettings, deleteTabPair, displayTriggerOf, dropChildren, dropTargetLabel, duplicateTabPair, escapesRoot, essentialTraitsFor, findNodeByIdInEither, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, formChannelOf, generateNodeId, globalCanvasLayer, hiddenAtBase, hiddenUntilItemOn, inPhoneMenuContext, insertRefusal, insertRefusalLabel, interactionTargets, isHiddenAt, isHiddenAtRest, isPhoneMenuOpener, isPinnedGlobal, isReadingBar, isSpecimen, itemsOnAtRest, markSpecimen, matchesControlSearch, nearestFormNode, neverShown, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, phoneMenuOf, phoneMenuShowsAt, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setChannelAddress, setOverlayPreview, setStyleTrait, setTrait, shortDescriptor, showCanvasToast, shownBeforeControl, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, tabPairLabel, tabsRootForPart, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map