@vectoriox/iox-builder 11.11.0 → 11.12.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i20 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
-import { nodeCssId, needsGroupName, resolveBoundValue, 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, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, 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, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, animateAction, entranceDelay, repeatedRowIndex, keyframeStyleEntries, entrancePreStateStyle, buildInteractionKeyframes, cascadeChain, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, releaseElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, 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, 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, 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, isScrolled, SCROLLED_ATTRIBUTE, syncSubmitButtons, IS_PREVIEW, buttonBlockHref, 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 } from '@vectoriox/iox-ui/composite-core';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
@@ -1346,11 +1346,13 @@ const ACTION_TYPE_OPTIONS = [
 ];
 /** Dialog actions, for the engines' dispatch branch (mirror of SWIPER's set). */
 const DIALOG_ACTION_TYPES = new Set(['openDialog', 'closeDialog', 'toggleDialog']);
+/** The keyword easings — the panel lists the look's easing tokens (iox-ui `EASING_TOKENS`) and a custom curve beside them. */
 const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 const INTERACTION_STATES = ['hover', 'active', 'focus'];
-/** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
-const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
+/** Structural pseudo-classes — matched on the outer element by the shared `planStateRule` (@vectoriox/iox-ui), the
+ *  engine's planner too (iox-client-engine#14). */
+const STRUCTURAL_STATES = [...STRUCTURAL_STATES$1];
 /**
  * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
  * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
@@ -1397,7 +1399,7 @@ const VALIDATION_STATE_CLASS = VALIDATION_STATE_CLASS$1;
  * (`stateSelectorSuffix` in @vectoriox/iox-ui), never a pseudo-class. Offered per type by
  * `componentStatesFor`.
  */
-const COMPONENT_STATES = ['current', 'on'];
+const COMPONENT_STATES = ['current', 'on', 'disabled', 'busy', 'selected', 'scrolled'];
 const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES, ...TARGETED_STATES, ...VALIDATION_STATES, ...COMPONENT_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -1827,6 +1829,19 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('rotate', 'Rotate', TraitInputType.Scrub, { min: -360, max: 360, step: 1, units: UNITS_DEG }, '0deg', true),
             new TraitConfig('skewX', 'Skew X', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
             new TraitConfig('skewY', 'Skew Y', TraitInputType.Scrub, { min: -180, max: 180, step: 1, units: UNITS_DEG }, '0deg', true),
+            // G3: where the element scales and turns FROM — a popover grows from its trigger (Emil 47). Physical
+            // keywords: transform-origin has no logical ones. The default is the CSS initial (never emitted).
+            new TraitConfig('transformOrigin', 'Origin', TraitInputType.Select, [
+                { label: 'Center', value: 'center' },
+                { label: 'Top', value: 'top' },
+                { label: 'Bottom', value: 'bottom' },
+                { label: 'Left', value: 'left' },
+                { label: 'Right', value: 'right' },
+                { label: 'Top left', value: 'top left' },
+                { label: 'Top right', value: 'top right' },
+                { label: 'Bottom left', value: 'bottom left' },
+                { label: 'Bottom right', value: 'bottom right' },
+            ], 'center'),
             // ── Filter (virtual — composed to CSS filter: …) ──────
             new TraitConfig('_sep_filter', 'Filter', TraitInputType.SectionLabel),
             new TraitConfig('filterBlur', 'Blur', TraitInputType.Scrub, { min: 0, max: 50, step: 1, units: ['px'] }, '0px', true),
@@ -1859,8 +1874,10 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
                 { label: 'Hexagon', value: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' },
                 { label: 'Chevron', value: 'polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%)' },
             ], 'none'),
-            // ── Transition (virtual — composed to CSS transition: all …) ──
+            // ── Transition (virtual — composed to one CSS transition entry per property, never `all`: G2) ──
             new TraitConfig('_sep_transition', 'Transition', TraitInputType.SectionLabel),
+            // Empty: the properties the element's states change (the renderers fill them in); a list wins.
+            new TraitConfig('transitionProperty', 'Properties', TraitInputType.Text, undefined, ''),
             new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms', true),
             new TraitConfig('transitionDelay', 'Delay', TraitInputType.Scrub, { min: 0, max: 2000, step: 50, units: ['ms'] }, '0ms', true),
             new TraitConfig('transitionTimingFunction', 'Easing', TraitInputType.Select, [
@@ -2145,26 +2162,6 @@ class StyleRegistryService {
         this.styleEl = null;
         this._flushPending = false;
     }
-    /**
-     * Properties that must live on the OUTER wrapper (.iox-outer-{id}) because they
-     * affect how the element participates in its PARENT layout (flex/block flow).
-     * Everything else goes to the INNER element (.iox-node-{id}).
-     *
-     * Exception — out-of-flow positioning (position:fixed/absolute):
-     * When position is fixed or absolute, width is redirected to the inner element
-     * (the positioned one) and a default width:100% is added if none is set, so the
-     * element stays visible. top/right/bottom/left/zIndex are always inner because
-     * they are co-ordinates of the positioned element, not the flow wrapper.
-     * position itself goes to inner with `!important` to beat component-scoped CSS.
-     */
-    static { this.OUTER_PROPS = new Set([
-        'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-        'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order',
-        // Grid-child placement — like the flex-child props above, these position the node
-        // within the PARENT's grid, so they must land on the outer host, not the inner div.
-        'gridColumn', 'gridRow', 'justifySelf',
-        'width',
-    ]); }
     /**
      * Properties that need !important on the inner element to beat Angular's scoped-CSS
      * specificity boost. CANVAS-ONLY (H2 audit, 2026-10-11): the shared compiler never forces
@@ -2221,8 +2218,7 @@ class StyleRegistryService {
             // breakpoint is scoped identically without re-resolving it (see upsertResponsive).
             if (relativeToId || triggerId)
                 this.stateScopes.set(key, { relativeToId, triggerId });
-            const selector = this.stateSelector(nodeId, state, relativeToId, triggerId);
-            const css = selector ? this.compile(selector, styles) : '';
+            const css = this.stateRuleCss(nodeId, state, styles, relativeToId, triggerId, DeclarationContext.Base);
             if (css)
                 this.rules.set(key, css);
             else
@@ -2256,9 +2252,10 @@ class StyleRegistryService {
         if (!nodeId || !partClassName)
             return;
         const key = `${nodeId}:part:${partClassName}${state ? ':' + state : ''}`;
-        const validationClass = state ? VALIDATION_STATE_CLASS[state] : undefined;
-        const selector = buildPartSelector(nodeId, partClassName, validationClass);
-        const css = Object.keys(styles).length ? this.compile(selector, styles) : '';
+        // The shared planner the engine uses (iox-client-engine#14): a part's hover / focus is the PART's own pseudo-class
+        // — before, any non-validation state compiled to the bare part selector and applied at all times.
+        const selector = planPartRule(nodeId, partClassName, state);
+        const css = selector && Object.keys(styles).length ? gateHoverRule(state, this.compileSelector(selector, styles)) : '';
         if (css)
             this.rules.set(key, css);
         else
@@ -2304,10 +2301,9 @@ class StyleRegistryService {
                 this.setResponsiveRule(nodeId, bp, `${nodeId}::marker`, marker);
             for (const [state, map] of Object.entries(layer.stateStyles)) {
                 const scope = this.stateScopes.get(`${nodeId}:${state}`);
-                const selector = this.stateSelector(nodeId, state, scope?.relativeToId, scope?.triggerId);
                 // A relational/targeted state whose scope isn't known yet is skipped; it is re-emitted
                 // when the base state rule arrives with its scope (see upsert).
-                const css = selector ? this.compile(selector, this.ownProps(nodeId, map), DeclarationContext.Override) : '';
+                const css = this.stateRuleCss(nodeId, state, this.ownProps(nodeId, map), scope?.relativeToId, scope?.triggerId, DeclarationContext.Override);
                 if (css)
                     this.setResponsiveRule(nodeId, bp, `${nodeId}:${state}`, css);
             }
@@ -2333,37 +2329,21 @@ class StyleRegistryService {
         return pos === 'fixed' || pos === 'absolute';
     }
     /**
-     * The selector BODY (no leading dot) for a state rule, or null when a relational / targeted
-     * state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * A state rule's CSS through the SHARED planner the engine emits with (`planStateRule`, iox-client-engine#14), or ''
+     * when a relational / targeted state has no scope yet (emitting it unscoped would be wrong — a page-global `:has()`).
+     * `relativeToId` is the parent for a relational state (parent-hover) and the nearest common ancestor of the node and
+     * its trigger for a targeted one (trigger-hover, trigger-on). A structural state is matched on the outer element and
+     * reaches the node's own; its outer props stay outer.
      */
-    stateSelector(nodeId, state, relativeToId, triggerId) {
-        // Targeted states (trigger-hover): the styled node restyles when an ARBITRARY chosen
-        // element is hovered. The selector is `:has()`-scoped to `relativeToId` (the nearest
-        // common ancestor of styled + trigger) so it stays repetition-safe with one shared rule.
-        // `trigger-on` (CC2 "Item open"): the same scoping, keyed on the item's `[data-iox-on]` — the ONE
-        // shared `targetedStateSelector` the engine uses too.
-        if (TARGETED_STATES.includes(state)) {
-            return relativeToId && triggerId ? targetedStateSelector(state, relativeToId, triggerId, nodeId) : null;
-        }
-        // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
-        // and cascades to this element. Requires the ancestor's css id.
-        if (RELATIONAL_STATES.includes(state)) {
-            const base = RELATIONAL_STATE_BASE[state];
-            return relativeToId && base ? `iox-node-${relativeToId}:${base} .iox-node-${nodeId}` : null;
-        }
-        // Validation states (wrong/accepted, board 7) are not real CSS pseudo-classes — `:wrong`
-        // doesn't exist. Compound a CLASS instead, matching the host class IoxFieldComponent
-        // already sets from forceInvalid/showValid. Reuses buildPartSelector with no part, since
-        // "whole node, when wrong" is exactly that function's no-part case.
-        const validationClass = VALIDATION_STATE_CLASS[state];
-        if (validationClass)
-            return buildPartSelector(nodeId, undefined, validationClass);
-        // Structural pseudo-classes (first-child, last-child, nth-child) target the
-        // outer wrapper element so they participate correctly in grid/flex layout.
-        const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
-        // `focus` compiles to :focus-visible (DS2) and a component state to its attribute (`current` →
-        // [aria-current="page"], CC1) — shared with the engine via stateSelectorSuffix.
-        return `${prefix}-${nodeId}${stateSelectorSuffix(state)}`;
+    stateRuleCss(nodeId, state, styles, relativeToId, triggerId, context) {
+        const targeted = TARGETED_STATES.includes(state);
+        const plan = planStateRule(nodeId, state, targeted ? { scopeId: relativeToId, triggerId } : { parentId: relativeToId });
+        if (!plan)
+            return '';
+        const { inner, outer } = plan.outer ? splitOuterProps(styles) : { inner: styles, outer: {} };
+        // A hover state's rule only where there is a hover (G1) — the engine gates the same rules the same way.
+        return gateHoverRule(state, [this.compileSelector(plan.inner, inner, context), plan.outer ? this.compileSelector(plan.outer, outer, context) : '']
+            .filter(Boolean).join('\n'));
     }
     /**
      * The inner + outer rule (joined) and the `::marker` rule for one composed style map.
@@ -2380,7 +2360,7 @@ class StyleRegistryService {
         for (const [k, v] of Object.entries(styles)) {
             if (k === '__markerStyles')
                 continue;
-            const wantsOuter = StyleRegistryService.OUTER_PROPS.has(k);
+            const wantsOuter = OUTER_STYLE_PROPS.has(k);
             // width goes to inner for fixed/absolute (the positioned element owns its own width)
             if (wantsOuter && !(isOutOfFlow && k === 'width')) {
                 outer[k] = v;
@@ -2526,14 +2506,16 @@ class StyleRegistryService {
         }
     }
     compile(className, styles, context = DeclarationContext.Base) {
-        // Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
-        // the shared style-compiler so the SSR engine produces byte-identical output.
-        // The inner/outer partition + selector emission stay here (builder-only concern).
+        return this.compileSelector(`.${className}`, styles, context);
+    }
+    /** One rule for a FULL selector. Declaration compilation (kebab-case, viewport-unit rewrite, !important) lives in
+     *  the shared style-compiler so the SSR engine produces byte-identical output. */
+    compileSelector(selector, styles, context = DeclarationContext.Base) {
         const decls = compileDeclarations(styles, StyleRegistryService.IMPORTANT_PROPS, context);
         if (!decls.length)
             return '';
         const body = decls.map(d => `  ${d};`).join('\n');
-        return `.${className} {\n${body}\n}`;
+        return `${selector} {\n${body}\n}`;
     }
     flush() {
         if (!this.styleEl || this._flushPending)
@@ -4085,6 +4067,8 @@ 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.
@@ -4444,6 +4428,9 @@ class InteractionEngineService {
         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.
@@ -4452,18 +4439,29 @@ class InteractionEngineService {
                 this.toggleStates.set(ix.id, !isToggled);
             }
             else {
-                this.runActions(node, ix.actions, element);
+                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);
-        return () => element.removeEventListener('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) {
-        const enterHandler = () => this.runActions(node, ix.actions, element);
-        const leaveHandler = () => {
+        // 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))
@@ -4480,11 +4478,11 @@ class InteractionEngineService {
                 this.reverseAction(target, action);
             }
         };
-        element.addEventListener('mouseenter', enterHandler);
-        element.addEventListener('mouseleave', leaveHandler);
+        element.addEventListener('pointerenter', enterHandler);
+        element.addEventListener('pointerleave', leaveHandler);
         return () => {
-            element.removeEventListener('mouseenter', enterHandler);
-            element.removeEventListener('mouseleave', leaveHandler);
+            element.removeEventListener('pointerenter', enterHandler);
+            element.removeEventListener('pointerleave', leaveHandler);
         };
     }
     // ── Actions ──────────────────────────────────────────────
@@ -4706,22 +4704,28 @@ class InteractionEngineService {
             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 takes its final frame at once.
+        // 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()) {
-            this.applyFrame(element, finalKeyframe(keyframes));
+            settleInteraction(element, keyframes, settleModeFor(type), this.settleOptions());
             this.settleAfter(element, type);
             return;
         }
-        // 'both' = backwards (holds first keyframe during delay) + forwards (holds last keyframe after end). A look
+        // 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 = animateAction(element, { type, params: action.params }, keyframes, {
+        const anim = playInteraction(element, { type, params: action.params }, keyframes, {
             duration: action.duration,
             delay: entranceDelay(action, repeatedRowIndex(element)),
-            easing: action.easing,
-            fill: 'both',
-        });
+            // 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)) {
@@ -4738,15 +4742,6 @@ class InteractionEngineService {
             element.style.setProperty('pointer-events', 'none');
         }
     }
-    /** Write a frame inline. On the canvas never a transform: one inside the scaled page breaks Lenis. */
-    applyFrame(element, frame) {
-        const canvas = this.isBuilderMode();
-        for (const [prop, value] of keyframeStyleEntries(frame)) {
-            if (canvas && prop === 'transform')
-                continue;
-            element.style.setProperty(prop, value);
-        }
-    }
     /**
      * Freeze an element at the animation's starting frame immediately, before any
      * trigger fires. Called for ALL entrance-type actions regardless of trigger so
@@ -4787,20 +4782,22 @@ class InteractionEngineService {
         element.style.removeProperty('pointer-events');
         element.removeAttribute(INTERACTION_HIDDEN_ATTRIBUTE);
     }
+    /** 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 keyframes = this.keyframesFor(effectiveActionType(action.type, element.hasAttribute(INTERACTION_HIDDEN_ATTRIBUTE)), 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()) {
-            this.applyFrame(element, keyframes[0]);
+            settleInteraction(element, frames, settleModeFor(type, true), this.settleOptions());
             return;
         }
-        // Reverse: play the keyframes backwards
-        animateAction(element, action, [...keyframes].reverse(), {
+        playInteraction(element, { type, params: action.params }, frames, {
             duration: action.duration,
-            easing: action.easing,
-            fill: 'forwards',
-        }, { reverse: true });
+            easing: resolveInteractionEasing(action.easing, element),
+        }, { ...this.settleOptions(), reverse: true });
     }
     /** The action's keyframes from the ONE shared table both runtimes animate from (composite T2). */
     keyframesFor(type, action) {
@@ -5713,7 +5710,9 @@ class RenderDirective {
             // The default hover transition (shared, marker-aware — the engine emits the same one):
             // without it a hovering node's base rule, re-upserted here on every render, dropped the
             // transition page-ui had added on load, and the canvas snapped where the site eased.
-            const composedBase = composeVirtualTraits(withDefaultHoverTransition(initialStyle, node.stateStyles, node.elementStyle));
+            // The transition names what the node's states change (G2) — the engine composes the same, from the same call.
+            const timedBase = withStateTransitions(initialStyle, node.stateStyles, node.elementStyle, node.responsive);
+            const composedBase = composeVirtualTraits(timedBase);
             this.styleRegistry.upsert(cssId, composedBase);
             // Restore per-state overrides saved from a previous session.
             // Every state set at base OR at any breakpoint — so a breakpoint-only state (a Mobile-only
@@ -5760,7 +5759,7 @@ class RenderDirective {
                 }
             }
             // Breakpoint layers — AFTER the state loop, so every scope resolved above is recorded.
-            this.styleRegistry.upsertResponsive(cssId, initialStyle, node.stateStyles, node.responsive);
+            this.styleRegistry.upsertResponsive(cssId, timedBase, node.stateStyles, node.responsive);
             // Part styles (board 7 — "the failure design"). Simpler than the state loop above:
             // a part+state combo always compounds onto THIS node (no relational/targeted scope
             // to resolve), so every entry just needs its base plus each of its own state overrides.
@@ -6962,8 +6961,8 @@ function nodeStyleMap(node) {
     return base;
 }
 /**
- * Re-register a node's compiled rules from its CURRENT style values — the base rule (with the default
- * hover transition), its self-scoped state rules and its breakpoint layers — exactly as the
+ * Re-register a node's compiled rules from its CURRENT style values — the base rule (its transition naming what its
+ * states change, G2), its self-scoped state rules and its breakpoint layers — exactly as the
  * RenderDirective registers them at render. For edits that rewrite a node's styles from outside the Style
  * panel (a Card's layout preset, a reset to defaults).
  */
@@ -6973,13 +6972,14 @@ function upsertNodeStyles(styleRegistry, node) {
         return;
     const base = nodeStyleMap(node);
     styleRegistry.setNodeType(cssId, node.type, colorSchemeOf(node));
-    styleRegistry.upsert(cssId, composeVirtualTraits(withDefaultHoverTransition(base, node.stateStyles, node.elementStyle)));
+    const timedBase = withStateTransitions(base, node.stateStyles, node.elementStyle, node.responsive);
+    styleRegistry.upsert(cssId, composeVirtualTraits(timedBase));
     for (const [state, map] of Object.entries(node.stateStyles ?? {})) {
         if (DOM_SCOPED_STATES.has(state) || !map || !Object.keys(map).length)
             continue;
         styleRegistry.upsert(cssId, composeVirtualTraits(map, base), state);
     }
-    styleRegistry.upsertResponsive(cssId, base, node.stateStyles, node.responsive);
+    styleRegistry.upsertResponsive(cssId, timedBase, node.stateStyles, node.responsive);
 }
 /** Push every content trait of a node to its rendered component (a Card title's link switched on). */
 function syncNodeInputs(ref, node) {
@@ -10007,6 +10007,15 @@ class BuilderComponent {
         this.globalOverlayRef?.nativeElement?.style.setProperty('--preview-vw', vwVal);
         this.canvasFrameHeight = Math.round(frameH);
     }
+    /** Keep the Scrolled attribute (iox-ui SCROLLED_ATTRIBUTE) on the canvas page and the header overlay — written only
+     *  when it changes, so the overlay's mutation observers never wake for a scroll tick. */
+    syncScrolled(offset) {
+        const scrolled = isScrolled(offset);
+        for (const el of [this.previewCanvas?.nativeElement, this.globalOverlayRef?.nativeElement]) {
+            if (el && el.hasAttribute(SCROLLED_ATTRIBUTE) !== scrolled)
+                el.toggleAttribute(SCROLLED_ATTRIBUTE, scrolled);
+        }
+    }
     initLenis() {
         this.destroyLenis();
         if (!this.previewScrollRef?.nativeElement || !this.lenisContentRef?.nativeElement)
@@ -10021,6 +10030,8 @@ class BuilderComponent {
         this.lenis.on('scroll', (instance) => {
             // A Scene's stage is held against this very scroll: a frame later, it would paint carried off its pin.
             this.sceneCanvas?.pinNow();
+            // The Scrolled state (G4) on the canvas: the page and its header globals know the canvas has moved.
+            this.syncScrolled(instance.scroll);
             const clientH = this.previewScrollRef.nativeElement.clientHeight;
             this.onPageScroll({
                 scrollTop: instance.scroll,
@@ -11147,6 +11158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/** The formClass a Form's canvas twin wears (form.config). */
+const FORM_CLASS = 'iox-form';
 const ACCORDION_TRACK_WRAPPER = 'track';
 /**
  * Directive-host Container (Phase 2 of the Moveable migration = task 9c). The real tag (div/section/
@@ -11157,6 +11170,14 @@ const ACCORDION_TRACK_WRAPPER = 'track';
  * See moveable-migration.md.
  */
 class BuilderContainerComponent {
+    /** Which state the canvas is showing. Only meaningful on a form host: its submit buttons follow it (busy, disabled
+     *  while Sending — the ONE `syncSubmitButtons` both live paths call, iox-ui#42); "While sending" is the shared CSS's. */
+    set formState(state) {
+        this._formState = state;
+        if (this.formClass === FORM_CLASS)
+            syncSubmitButtons(this.elRef?.nativeElement, state);
+    }
+    get formState() { return this._formState; }
     /** The wrapper a child renders in: an Accordion item's header → its heading level; an item's panel (either
      *  kind) → the track. A disclosure's toggle has no heading — it is a button in the flow. */
     wrapperOf(child) {
@@ -11186,8 +11207,7 @@ class BuilderContainerComponent {
          * stylesheet treat them exactly as it treats the engine's own twins.
          */
         this.formClass = '';
-        /** Which state the canvas is showing. Only meaningful on a form host. */
-        this.formState = 'idle';
+        this._formState = 'idle';
         this.childClick = new EventEmitter();
         this.childMouseEnter = new EventEmitter();
         this.childMouseLeave = new EventEmitter();