@vectoriox/iox-ui 5.43.0 → 5.44.0

package/generation-core/index.d.ts

@@ -36,6 +36,9 @@ declare const SPEC_SITE_PLAN_SHAPE: {
         readonly mode: "'light' | 'dark' | 'auto'";
         readonly "tint?": "string — axes.tints (DS9 neutral tint)";
         readonly "fonts?": "object — uploaded font families per role (DS5)";
+        readonly "scroll?": "string — axes.scrolls: how the site scrolls (rev 3.1; absent = axes.motionChoices.pre)";
+        readonly "animate?": "string — axes.animations: how much the sections move in as they scroll into view";
+        readonly "between?": "string — axes.betweens: what plays between pages";
     };
     readonly contentType: {
         readonly name: "string — unique";

package/index.d.ts

@@ -1,15 +1,16 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, EventEmitter, ElementRef, SimpleChanges, OnDestroy, OnInit, Renderer2, ModuleWithProviders, InjectionToken, ChangeDetectorRef, ViewContainerRef, OnChanges, Type, ComponentRef } from '@angular/core';
+import { AfterViewInit, EventEmitter, ElementRef, SimpleChanges, OnDestroy, OnInit, Renderer2, ModuleWithProviders, OnChanges, InjectionToken, ChangeDetectorRef, ViewContainerRef, Type, ComponentRef } from '@angular/core';
 import { AnimationPlayer, AnimationBuilder } from '@angular/animations';
 import { Observable } from 'rxjs';
 import * as i3 from '@angular/platform-browser/animations';
-import Lenis from 'lenis';
+import { ScrollId } from '@vectoriox/iox-ui/design-core';
+export * from '@vectoriox/iox-ui/design-core';
+import Lenis, { LenisOptions } from 'lenis';
 import * as i2 from '@angular/common';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { VideoPlan } from '@vectoriox/iox-ui/media-core';
 import { SliderWords } from '@vectoriox/iox-ui/composite-core';
 import { OpenerNodeLike } from '@vectoriox/iox-ui/actions-core';
-export * from '@vectoriox/iox-ui/design-core';
 export * from '@vectoriox/iox-ui/data-core';
 
 declare class ViewPositionDirective implements AfterViewInit {
@@ -100,11 +101,27 @@ declare class IoxAosModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<IoxAosModule>;
 }
 
+/** Where the page scrolls, and how. `lenis: null` = the browser's own scrolling (planScroll's Normal). */
+interface PageScrollStart {
+    /** The scrolling element; absent = the document (the live site scrolls the window, CC1). */
+    wrapper?: HTMLElement;
+    content?: HTMLElement;
+    lenis: LenisOptions | null;
+}
+/**
+ * The ONE page scroller (AI plan rev 3.1 §3p). `IoxPageComponent` starts it with the plan of the look's
+ * Scrolling choice (`planScroll`); `scrollTo` actions and the dialog lock go through it whether or not
+ * Lenis runs. Never on the server: there is no window to scroll.
+ */
 declare class PageScrollProvider {
     private zone;
-    private lenis?;
+    private lenis;
     private rafId?;
-    init(options?: ConstructorParameters<typeof Lenis>[0]): void;
+    private wrapper;
+    private lockedOverflow;
+    init(start: PageScrollStart): void;
+    /** Stop Lenis and its loop; the page falls back to the browser's own scrolling. */
+    destroy(): void;
     /** Hard-stop page scroll (dialog open, A1b): wheel/touch frozen until start(). */
     stop(): void;
     /** Resume after stop() — the dialog's close path, incl. native Esc/backdrop closes. */
@@ -117,17 +134,23 @@ declare class PageScrollProvider {
         duration?: number;
         immediate?: boolean;
     }): void;
-    get instance(): Lenis;
+    /** The running Lenis, or null when the page scrolls natively (Normal, reduced motion, the server). */
+    get instance(): Lenis | null;
+    private scrollElement;
+    private unlock;
     private startLoop;
     static ɵfac: i0.ɵɵFactoryDeclaration<PageScrollProvider, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PageScrollProvider>;
 }
 
-declare class IoxPageComponent implements AfterViewInit, OnDestroy {
+declare class IoxPageComponent implements AfterViewInit, OnChanges, OnDestroy {
     private pageScrollProvider;
     class: string;
+    /** The look's Scrolling choice (`designMotion.scroll`); absent = Smooth, what every page did before rev 3.1. */
+    scroll?: ScrollId | string | null;
     page: ElementRef<HTMLDivElement>;
     private scrollSubscription;
+    private started;
     scrollEvent: EventEmitter<{
         scrollTop: number;
         scrollLeft: number;
@@ -139,10 +162,12 @@ declare class IoxPageComponent implements AfterViewInit, OnDestroy {
     }>;
     constructor(pageScrollProvider: PageScrollProvider);
     ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     onScroll(event: Event): void;
     ngOnDestroy(): void;
+    private startScroller;
     static ɵfac: i0.ɵɵFactoryDeclaration<IoxPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IoxPageComponent, "iox-page-component", never, { "class": { "alias": "class"; "required": false; }; }, { "scrollEvent": "scrollEvent"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IoxPageComponent, "iox-page-component", never, { "class": { "alias": "class"; "required": false; }; "scroll": { "alias": "scroll"; "required": false; }; }, { "scrollEvent": "scrollEvent"; }, never, ["*"], false, never>;
 }
 
 declare class IoxPageModule {
@@ -2141,6 +2166,23 @@ declare function prefersReducedMotion(host?: MatchMediaHost | null | undefined):
 /** True when script may animate. The ONE question every runtime asks before moving anything. */
 declare function motionAllowed(host?: MatchMediaHost | null | undefined): boolean;
 
+/**
+ * Scrolling (AI plan rev 3.1 §3p, MO-D1/MO-D7): the look's `scroll` choice → the options the ONE page
+ * scroller starts Lenis with, or `null` for the browser's own scrolling. The table is the contract's
+ * `axes.scrolls`; this only turns its named easing into the function Lenis wants. Pure: the caller asks the
+ * visitor's reduced-motion preference (`prefersReducedMotion`) and passes the answer in.
+ */
+declare enum ScrollEasing {
+    ExpoOut = "expo-out"
+}
+/** The curves `axes.scrolls[].lenis.easing` may name. Expo-out is Lenis's own default curve. */
+declare const SCROLL_EASINGS: Readonly<Record<ScrollEasing, (t: number) => number>>;
+interface ScrollPlanContext {
+    /** The visitor asked for reduced motion: the page always scrolls natively. */
+    reducedMotion: boolean;
+}
+declare function planScroll(scroll: string | null | undefined, ctx: ScrollPlanContext): LenisOptions | null;
+
 /**
  * THE interaction keyframes (composite plan T2 · CC1 N5). Both runtimes — the builder's
  * InteractionEngineService and the live site's ClientInteractionService — animate an element action
@@ -2799,19 +2841,6 @@ declare function isActionEnabled(action: ToggleableAction | null | undefined): b
 /** The actions that should actually run, preserving order. */
 declare function activeActions<T extends ToggleableAction>(actions: readonly T[] | undefined): T[];
 
-/**
- * Cinematic page-transition presets — the SINGLE SOURCE OF TRUTH shared by the page builder
- * (preview) and the SSR client engine (production). Pure, transport-agnostic: this module only
- * describes WAAPI keyframe pairs + timing/ordering. It never touches the DOM.
- *
- * A page transition plays TWO synchronized WAAPI animations at once — an `out` animation on a
- * snapshot of the outgoing page and an `in` animation on the incoming page — inside a shared
- * `perspective` container, gated on BOTH finishing (the "cinematic" feel, à la Codrops
- * PageTransitions). The consumer supplies the DOM (snapshot layer + live page) and calls
- * `element.animate(frames, options)`; it does NOT redefine the frames.
- *
- * @see architecture/builder/page-transitions.md
- */
 /** Perspective (px) applied to the transition container unless a preset overrides it. */
 declare const DEFAULT_PAGE_TRANSITION_PERSPECTIVE = 1200;
 /**
@@ -2945,6 +2974,65 @@ declare function effectiveTransitionId(anim: {
     transition?: string | null;
     enter?: string | null;
 } | null | undefined): string;
+/** The settings a page's own `routeAnimation` carries (Page ▸ Design ▸ Route animation). */
+interface RouteAnimationLike {
+    transition?: string | null;
+    enter?: string | null;
+    duration?: number | string;
+    easing?: string;
+    perspective?: number | string;
+    curtainColor?: string;
+}
+interface PageTransitionContext {
+    /** `pageSettings.designSystem` — only a design-system page follows the look. */
+    designSystem?: boolean;
+    /** The look's Between pages choice (`designMotion.between`); absent = `PRE_MOTION.between`. */
+    between?: string | null;
+    /** The viewport is a phone (`PHONE_TRANSITION_QUERY`): Slide and Cinematic play their `phone` choice. */
+    phone?: boolean;
+    /** The page reads right to left: a Slide pushes from the other side. */
+    rtl?: boolean;
+    /** The page's initial (hydrated) load — no outgoing page. */
+    initial?: boolean;
+}
+/** What `resolvePageTransition` is asked for. `transition: 'none'` is a valid, silent choice. */
+interface PlannedPageTransition {
+    transition: string;
+    duration?: number | string;
+    easing?: string;
+    perspective?: number | string;
+    curtainColor?: string;
+    /** The page follows the look (rather than its own Route animation). */
+    fromLook: boolean;
+}
+declare const NO_PAGE_TRANSITION = "none";
+/** The widest viewport a page change treats as a phone (MO-D5): the Mobile landscape breakpoint. */
+declare const PHONE_TRANSITION_QUERY: string;
+/** What a window can tell `pageTransitionOf`: the media query and the computed direction. */
+interface TransitionViewport {
+    matchMedia?: (query: string) => {
+        matches: boolean;
+    };
+    getComputedStyle?: (el: Element) => {
+        direction?: string;
+    };
+}
+/**
+ * The part of the context only the browser knows — is this a phone, does the page read right to left —
+ * read the same way by every runtime that plays a page change (the engine, Preview). No window → neither.
+ */
+declare function viewportTransitionContext(view: TransitionViewport | null | undefined, el: Element | null | undefined): Pick<PageTransitionContext, 'phone' | 'rtl'>;
+/** The page set its own transition (a preset id, or a legacy `enter` that migrates to one). */
+declare function hasOwnPageTransition(anim: RouteAnimationLike | null | undefined): boolean;
+/**
+ * The ONE decision of what plays when a page arrives, for the engine and every builder preview:
+ *  • a page with its own Route animation plays it, exactly as before (an unflagged page too: with none set
+ *    it keeps the platform default, `effectiveTransitionId`);
+ *  • a design-system page with none follows the look's Between pages — never on its initial load (MO-D6:
+ *    no IN half, no server pre-state), as Fade on a phone for Slide and Cinematic (MO-D5), mirrored in RTL.
+ * Reduced motion is the runtime's own question (`motionAllowed`), asked before anything plays.
+ */
+declare function pageTransitionOf(anim: RouteAnimationLike | null | undefined, ctx?: PageTransitionContext): PlannedPageTransition;
 
 /**
  * Gallery effect registry — the SHARED, effect-agnostic description of how each gallery slide looks
@@ -3068,5 +3156,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, feelFor, finalKeyframe, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, parentBreakpoint, parseUrlList, partClassName, planResponsiveRules, planSwiperOptions, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, SCROLL_EASINGS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, feelFor, finalKeyframe, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planResponsiveRules, planScroll, planSwiperOptions, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sliderControlElements, sliderInputsFromProps, sliderInputsOf, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SliderBootOptions, SliderControlElements, SliderInputs, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.43.0",
+  "version": "5.44.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/design-core/design-settings.ts

@@ -1,6 +1,9 @@
 import { SPEC_AXES, SPEC_FONT_ROLES } from './flavor-spec.generated';
 import { parseHexColor } from './brand';
-import { DesignChoices, DesignMode, FlavorPackV2, FontRoleToken, PRE_TINT_DEFAULT, SPEC_FLAVORS, TintId } from './design-token.model';
+import {
+    AnimateId, BetweenId, DesignChoices, DesignMode, DesignMotion, FlavorPackV2, FontRoleToken, PRE_MOTION, PRE_TINT_DEFAULT, ScrollId,
+    SPEC_FLAVORS, TintId,
+} from './design-token.model';
 import type { FlavorRevertSnapshot } from './flavor-seed';
 
 /**
@@ -32,6 +35,9 @@ export enum DesignConfigKey {
     Mode = 'mode',
     Tint = 'tint',
     Fonts = 'fonts',
+    Scroll = 'scroll',
+    Animate = 'animate',
+    Between = 'between',
     Revert = 'revert',
 }
 
@@ -124,6 +130,16 @@ export function resolveDesignChoices(partial: Partial<DesignChoices> | null | un
         mode: (MODES.includes(asString(partial?.mode) ?? '') ? asString(partial?.mode) : pack.defaults.mode) as DesignMode,
         tint: keyOf(SPEC_AXES.tints, asString(partial?.tint)) ?? pack.defaults.tint,
         ...(fonts ? { fonts } : {}),
+        ...resolveDesignMotion(partial),
+    };
+}
+
+/** The look's motion, completed: an absent or unknown choice reads `PRE_MOTION` — what the site already does. */
+export function resolveDesignMotion(partial: Readonly<Partial<Record<keyof DesignMotion, unknown>>> | null | undefined): DesignMotion {
+    return {
+        scroll: keyOf<ScrollId>(SPEC_AXES.scrolls, asString(partial?.scroll)) ?? PRE_MOTION.scroll,
+        animate: keyOf<AnimateId>(SPEC_AXES.animations, asString(partial?.animate)) ?? PRE_MOTION.animate,
+        between: keyOf<BetweenId>(SPEC_AXES.betweens, asString(partial?.between)) ?? PRE_MOTION.between,
     };
 }
 
@@ -135,12 +151,13 @@ export function packDesignChoices(flavorId: string): DesignChoices {
 /**
  * What picking a pack card means, given the design the studio wears: the applied pack → the applied
  * choices; another pack → that pack's defaults, CARRYING the author's chosen fonts (§5b — a font the
- * author chose survives a pack switch unless the author changes it). Both picker homes call this.
+ * author chose survives a pack switch unless the author changes it) and the site's motion (rev 3.1 MO-D3 —
+ * how it scrolls and changes page is not a pack's, so a Look pick never resets it). Both picker homes call this.
  */
 export function choicesForPack(flavorId: string, applied: DesignChoices | null | undefined): DesignChoices {
     const pack = flavorPackById(flavorId) ?? defaultPack();
     if (applied && resolveDesignChoices(applied).flavorId === pack.id) return resolveDesignChoices(applied);
-    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts });
+    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts, ...resolveDesignMotion(applied) });
 }
 
 /**
@@ -164,6 +181,9 @@ export function readDesignConfig(config: ReadonlyArray<DesignConfigEntry> | null
         mode: map.get(DesignConfigKey.Mode) as DesignMode,
         tint: (storedTint ?? undefined) as TintId | undefined,
         fonts: map.get(DesignConfigKey.Fonts) as DesignChoices['fonts'],
+        scroll: map.get(DesignConfigKey.Scroll) as ScrollId,
+        animate: map.get(DesignConfigKey.Animate) as AnimateId,
+        between: map.get(DesignConfigKey.Between) as BetweenId,
     });
     return {
         choices,
@@ -180,6 +200,11 @@ export function designModeOf(config: ReadonlyArray<DesignConfigEntry> | null | u
     return readDesignConfig(config).choices.mode;
 }
 
+/** The look's motion of a stored config — what the public page read hands the engine (`designMotion`). */
+export function designMotionOf(config: ReadonlyArray<DesignConfigEntry> | null | undefined): DesignMotion {
+    return resolveDesignMotion(readDesignConfig(config).choices);
+}
+
 /** Resolved choices (+ the revert snapshot) → the config array a settings row stores. */
 export function designConfigEntries(
     choices: DesignChoices,
@@ -198,6 +223,9 @@ export function designConfigEntries(
         { key: DesignConfigKey.PillButtons, value: String(c.pillButtons) },
         { key: DesignConfigKey.Mode, value: c.mode },
         { key: DesignConfigKey.Tint, value: c.tint },
+        { key: DesignConfigKey.Scroll, value: c.scroll },
+        { key: DesignConfigKey.Animate, value: c.animate },
+        { key: DesignConfigKey.Between, value: c.between },
         ...(c.fonts ? [{ key: DesignConfigKey.Fonts, value: JSON.stringify(c.fonts) }] : []),
         ...(revert ? [{ key: DesignConfigKey.Revert, value: JSON.stringify(revert) }] : []),
     ];
@@ -210,5 +238,6 @@ export function sameDesignChoices(a: DesignChoices, b: DesignChoices): boolean {
     return x.flavorId === y.flavorId && x.seed.toLowerCase() === y.seed.toLowerCase() && x.pairId === y.pairId
         && x.shape === y.shape && x.density === y.density && x.motion === y.motion
         && x.pillButtons === y.pillButtons && x.mode === y.mode && x.tint === y.tint
+        && x.scroll === y.scroll && x.animate === y.animate && x.between === y.between
         && JSON.stringify(x.fonts ?? {}) === JSON.stringify(y.fonts ?? {});
 }

package/src/design-core/design-token.model.ts

@@ -46,6 +46,25 @@ export type TintId = keyof typeof SPEC_AXES.tints;
 export const TINT_IDS = Object.keys(SPEC_AXES.tints) as ReadonlyArray<TintId>;
 /** What a studio that stored its look BEFORE the tint existed wears: exactly the look's own palette. */
 export const PRE_TINT_DEFAULT: TintId = 'neutral';
+/** How the site scrolls (AI plan rev 3.1 §3p): Normal (the browser's own) · Smooth · Extra smooth. */
+export type ScrollId = keyof typeof SPEC_AXES.scrolls;
+/** How much the sections move in as they scroll into view: Still · Subtle · Standard · Lively. */
+export type AnimateId = keyof typeof SPEC_AXES.animations;
+/** What plays between pages: None · Fade · Slide · Cinematic. */
+export type BetweenId = keyof typeof SPEC_AXES.betweens;
+export const SCROLL_IDS = Object.keys(SPEC_AXES.scrolls) as ReadonlyArray<ScrollId>;
+export const ANIMATE_IDS = Object.keys(SPEC_AXES.animations) as ReadonlyArray<AnimateId>;
+export const BETWEEN_IDS = Object.keys(SPEC_AXES.betweens) as ReadonlyArray<BetweenId>;
+/** The look's motion — the three choices the runtime and the composer read from `settings.design`. */
+export interface DesignMotion {
+    scroll: ScrollId;
+    animate: AnimateId;
+    between: BetweenId;
+}
+/** What a look stored BEFORE rev 3.1 wears: exactly what every live site did (Smooth · Still · Cinematic). */
+export const PRE_MOTION: Readonly<DesignMotion> = SPEC_AXES.motionChoices.pre;
+/** What a visitor who asks for reduced motion always gets, whatever the look chose. */
+export const REDUCED_DESIGN_MOTION: Readonly<DesignMotion> = SPEC_AXES.motionChoices.reduced;
 export type SchemeId = keyof typeof SPEC_SCHEMES;
 export type FontRoleToken = (typeof SPEC_FONT_ROLES)[number]['token'];
 
@@ -63,6 +82,10 @@ export interface DesignChoices {
      *  `neutral` — the palette it was applied with. */
     tint?: TintId;
     fonts?: Partial<Record<FontRoleToken, string>>;
+    /** Absent = `PRE_MOTION` (a row stored before rev 3.1 reads what its site already did). */
+    scroll?: ScrollId;
+    animate?: AnimateId;
+    between?: BetweenId;
 }
 
 export interface FlavorSpecToken {

package/src/design-core/flavor-spec.generated.ts

@@ -1429,6 +1429,208 @@ export const SPEC_AXES = {
         "inverse-line": 0.03
       }
     }
+  },
+  "scrolls": {
+    "normal": {
+      "label": "Normal",
+      "he": "רגילה",
+      "hint": "The browser's own scrolling.",
+      "lenis": null
+    },
+    "smooth": {
+      "label": "Smooth",
+      "he": "חלקה",
+      "hint": "A short glide after each wheel turn — what every IOX site does today.",
+      "lenis": {
+        "duration": 1.2,
+        "easing": "expo-out",
+        "wheelMultiplier": 1,
+        "syncTouch": false
+      }
+    },
+    "extra": {
+      "label": "Extra smooth",
+      "he": "חלקה מאוד",
+      "hint": "A longer, softer glide; each wheel turn moves a little less.",
+      "lenis": {
+        "duration": 1.8,
+        "easing": "expo-out",
+        "wheelMultiplier": 0.9,
+        "syncTouch": false
+      }
+    }
+  },
+  "animations": {
+    "still": {
+      "label": "Still",
+      "he": "ללא",
+      "hint": "Nothing moves in as you scroll. Buttons and cards still respond to the pointer (Speed).",
+      "parts": {}
+    },
+    "subtle": {
+      "label": "Subtle",
+      "he": "עדינה",
+      "hint": "Each section's content fades in once, together.",
+      "parts": {
+        "content": {
+          "type": "fadeIn",
+          "duration": 500
+        }
+      }
+    },
+    "standard": {
+      "label": "Standard",
+      "he": "רגילה",
+      "hint": "Headings rise in; cards, prices and steps follow one after another.",
+      "parts": {
+        "heading": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 500
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 450,
+          "stagger": 80,
+          "cap": 6
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 600
+        }
+      }
+    },
+    "lively": {
+      "label": "Lively",
+      "he": "תוססת",
+      "hint": "Bigger, longer entrances; side-by-side rows slide in from their side; the hero's words fade in.",
+      "parts": {
+        "heroText": {
+          "type": "fadeIn",
+          "duration": 400
+        },
+        "heading": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600,
+          "stagger": 100,
+          "cap": 8
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 700
+        },
+        "rowMedia": {
+          "type": "moveLeft",
+          "mirror": "moveRight",
+          "distance": 24,
+          "duration": 600
+        }
+      }
+    }
+  },
+  "animationFamilies": {
+    "nav": [],
+    "footer": [],
+    "hero": [
+      "heroText"
+    ],
+    "header": [
+      "heading"
+    ],
+    "detail": [
+      "heading",
+      "media"
+    ],
+    "proof": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "feature": [
+      "content",
+      "heading",
+      "items",
+      "media",
+      "rowMedia"
+    ],
+    "collection": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "story": [
+      "content",
+      "heading",
+      "media"
+    ],
+    "cta": [
+      "content",
+      "heading"
+    ],
+    "contact": [
+      "content",
+      "heading"
+    ],
+    "faq": [
+      "content",
+      "heading"
+    ],
+    "pricing": [
+      "content",
+      "heading",
+      "items"
+    ]
+  },
+  "betweens": {
+    "none": {
+      "label": "None",
+      "he": "ללא",
+      "hint": "The next page simply appears.",
+      "transition": "none"
+    },
+    "fade": {
+      "label": "Fade",
+      "he": "דהייה",
+      "hint": "The page fades into the next.",
+      "transition": "fade",
+      "feel": "snappy"
+    },
+    "slide": {
+      "label": "Slide",
+      "he": "החלקה",
+      "hint": "The next page pushes this one aside (from the left on a Hebrew site). On phones: Fade.",
+      "transition": "move-left",
+      "rtl": "move-right",
+      "feel": "smooth",
+      "phone": "fade"
+    },
+    "cinematic": {
+      "label": "Cinematic",
+      "he": "קולנועית",
+      "hint": "This page sinks back while the next rises over it. On phones: Fade.",
+      "transition": "parallax-up",
+      "feel": "cinematic",
+      "phone": "fade"
+    }
+  },
+  "motionChoices": {
+    "pre": {
+      "scroll": "smooth",
+      "animate": "still",
+      "between": "cinematic"
+    },
+    "reduced": {
+      "scroll": "normal",
+      "animate": "still",
+      "between": "none"
+    }
   }
 } as const;
 

package/src/design-core/flavor-tokens.ts

@@ -3,7 +3,7 @@ import { flavorColours, FlavorColours, preTintAccentGrounds } from './brand-neut
 import { fontStackWithout, formatFontFamily } from './fonts';
 import { SPEC_AXES } from './flavor-spec.generated';
 import {
-    DesignChoices, DesignTokenRow, FlavorPackV2, FlavorSpecToken, flavorSourceStamp, USER_TOKEN_SOURCE,
+    DesignChoices, DesignTokenRow, FlavorPackV2, FlavorSpecToken, flavorSourceStamp, PRE_MOTION, USER_TOKEN_SOURCE,
 } from './design-token.model';
 
 /**
@@ -37,6 +37,7 @@ export function defaultDesignChoices(pack: FlavorPackV2): DesignChoices {
         seed: pack.seed,
         pairId: pack.pairs[0]?.id ?? '',
         ...pack.defaults,
+        ...PRE_MOTION,
     };
 }
 

package/src/generation-core/site-spec.generated.ts

@@ -37,7 +37,10 @@ export const SPEC_SITE_PLAN_SHAPE = {
     "pillButtons": "boolean",
     "mode": "'light' | 'dark' | 'auto'",
     "tint?": "string — axes.tints (DS9 neutral tint)",
-    "fonts?": "object — uploaded font families per role (DS5)"
+    "fonts?": "object — uploaded font families per role (DS5)",
+    "scroll?": "string — axes.scrolls: how the site scrolls (rev 3.1; absent = axes.motionChoices.pre)",
+    "animate?": "string — axes.animations: how much the sections move in as they scroll into view",
+    "between?": "string — axes.betweens: what plays between pages"
   },
   "contentType": {
     "name": "string — unique",

package/src/generation-core/validate-site-plan.ts

@@ -200,6 +200,9 @@ function validateDesign(c: Collector, design: unknown): void {
     axis('density', SPEC_AXES.densities);
     axis('motion', SPEC_AXES.motions);
     axis('tint', SPEC_AXES.tints);
+    axis('scroll', SPEC_AXES.scrolls);
+    axis('animate', SPEC_AXES.animations);
+    axis('between', SPEC_AXES.betweens);
     if (design['mode'] !== undefined && !(SPEC_AXES.modes as ReadonlyArray<unknown>).includes(design['mode'])) bad('mode', `must be one of ${SPEC_AXES.modes.join(', ')}`);
     if (design['pillButtons'] !== undefined && typeof design['pillButtons'] !== 'boolean') bad('pillButtons', 'must be a boolean');
     if (design['fonts'] !== undefined && !isObject(design['fonts'])) bad('fonts', 'must be an object');