angular-movement 0.0.1

package/fesm2022/angular-movement.mjs

@@ -0,0 +1,2190 @@
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, input, ElementRef, Directive, computed, effect, forwardRef, afterEveryRender, NgZone, signal, ViewContainerRef, TemplateRef, makeEnvironmentProviders } from '@angular/core';
+
+const MOVEMENT_DEFAULTS = {
+    duration: 300,
+    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    delay: 0,
+    disabled: false,
+};
+const MOVEMENT_CONFIG = new InjectionToken('MOVEMENT_CONFIG', {
+    factory: () => ({ ...MOVEMENT_DEFAULTS }),
+});
+
+const DEFAULT_DURATION = 300;
+const DEFAULT_EASING = 'ease';
+const DEFAULT_DELAY = 0;
+const DEFAULT_PERSPECTIVE = '1200px';
+const DEFAULT_SPRING = {
+    stiffness: 500,
+    damping: 30,
+};
+const SPRING_BASE = {
+    stiffness: 100,
+    damping: 10,
+    mass: 1,
+    velocity: 0,
+};
+const SIMULATION_TICK_RATE = 1000 / 60; // 60fps
+const SIMULATION_MAX_ITERATIONS = 600;
+const SIMULATION_SETTLED_THRESHOLD = 0.001;
+const SCROLL_MAP_DURATION = 1000;
+const SCROLL_WAAPI_CAP = 0.999;
+const SCROLL_LERP_FACTOR = 0.12;
+const SCROLL_RAF_THRESHOLD = 0.001;
+const SMOOTH_SCROLL_FRICTION = 0.92;
+const SMOOTH_SCROLL_MIN_VELOCITY = 0.05;
+const DEFAULT_STAGGER_TIME = 100;
+const DEFAULT_TEXT_STAGGER = 30;
+const DRAG_SNAP_DURATION = 300;
+const DRAG_SNAP_EASING = 'ease';
+
+function getValAt(arr, index) {
+    if (!arr || arr.length === 0)
+        return undefined;
+    return arr[Math.min(index, arr.length - 1)];
+}
+function getInterpolated(arr, i1, i2, p) {
+    if (!arr || arr.length === 0)
+        return undefined;
+    const v1 = arr[Math.min(i1, arr.length - 1)];
+    const v2 = arr[Math.min(i2, arr.length - 1)];
+    return v1 + (v2 - v1) * p;
+}
+function buildKeyframe(frames, getVal) {
+    const keyframe = {};
+    const opacity = getVal(frames.opacity);
+    if (opacity !== undefined) {
+        keyframe.opacity = opacity;
+    }
+    const x = getVal(frames.x);
+    const y = getVal(frames.y);
+    if (x !== undefined || y !== undefined) {
+        keyframe.translate = `${x ?? 0}px ${y ?? 0}px`;
+    }
+    const scale = getVal(frames.scale);
+    if (scale !== undefined) {
+        keyframe.scale = `${scale}`;
+    }
+    else {
+        const scaleX = getVal(frames.scaleX);
+        const scaleY = getVal(frames.scaleY);
+        if (scaleX !== undefined || scaleY !== undefined) {
+            keyframe.scale = `${scaleX ?? 1} ${scaleY ?? 1}`;
+        }
+    }
+    const rotate = getVal(frames.rotate);
+    if (rotate !== undefined) {
+        keyframe.rotate = `${rotate}deg`;
+    }
+    const blur = getVal(frames.blur);
+    if (blur !== undefined) {
+        keyframe.filter = `blur(${blur}px)`;
+    }
+    const rotateX = getVal(frames.rotateX);
+    const rotateY = getVal(frames.rotateY);
+    if (rotateX !== undefined || rotateY !== undefined) {
+        keyframe.transform = `perspective(${DEFAULT_PERSPECTIVE}) rotateX(${rotateX ?? 0}deg) rotateY(${rotateY ?? 0}deg)`;
+    }
+    return keyframe;
+}
+function composeKeyframeAt(frames, index) {
+    return buildKeyframe(frames, (arr) => getValAt(arr, index));
+}
+function composeInterpolatedKeyframe(frames, i1, i2, p) {
+    return buildKeyframe(frames, (arr) => getInterpolated(arr, i1, i2, p));
+}
+function composeInitialStyle(frames) {
+    return buildKeyframe(frames, (arr) => (arr && arr.length > 0 ? arr[0] : undefined));
+}
+function composeFinalStyle(frames) {
+    return buildKeyframe(frames, (arr) => (arr && arr.length > 0 ? arr[arr.length - 1] : undefined));
+}
+function applyComposedStyle(el, style) {
+    if (style.opacity !== undefined)
+        el.style.opacity = `${style.opacity}`;
+    if (style.translate !== undefined)
+        el.style.translate = style.translate;
+    if (style.scale !== undefined)
+        el.style.scale = style.scale;
+    if (style.rotate !== undefined)
+        el.style.rotate = style.rotate;
+    if (style.transform !== undefined)
+        el.style.transform = style.transform;
+    if (style.filter !== undefined)
+        el.style.filter = style.filter;
+}
+function clearComposedStyle(el) {
+    el.style.opacity = '';
+    el.style.translate = '';
+    el.style.scale = '';
+    el.style.rotate = '';
+    el.style.transform = '';
+    el.style.filter = '';
+}
+
+const DEFAULT_FADE_OPACITY = [0, 1];
+const DEFAULT_LEAVE_OPACITY = [1, 0];
+const MOVE_PRESETS = {
+    'fade-up': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, y: [24, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, y: [0, -16] },
+    },
+    'fade-down': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, y: [-24, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, y: [0, 16] },
+    },
+    'fade-left': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, x: [24, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, x: [0, -16] },
+    },
+    'fade-right': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, x: [-24, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, x: [0, 16] },
+    },
+    'slide-up': {
+        enter: { y: [60, 0], opacity: DEFAULT_FADE_OPACITY },
+        leave: { y: [0, -60], opacity: DEFAULT_LEAVE_OPACITY },
+    },
+    'slide-down': {
+        enter: { y: [-60, 0], opacity: DEFAULT_FADE_OPACITY },
+        leave: { y: [0, 60], opacity: DEFAULT_LEAVE_OPACITY },
+    },
+    'slide-left': {
+        enter: { x: [60, 0], opacity: DEFAULT_FADE_OPACITY },
+        leave: { x: [0, -60], opacity: DEFAULT_LEAVE_OPACITY },
+    },
+    'slide-right': {
+        enter: { x: [-60, 0], opacity: DEFAULT_FADE_OPACITY },
+        leave: { x: [0, 60], opacity: DEFAULT_LEAVE_OPACITY },
+    },
+    'zoom-in': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, scale: [0.5, 1] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, scale: [1, 0.5] },
+    },
+    'zoom-out': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, scale: [1.3, 1] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, scale: [1, 1.3] },
+    },
+    'flip-x': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, rotateX: [-90, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, rotateX: [0, 90] },
+    },
+    'flip-y': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, rotateY: [-90, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, rotateY: [0, 90] },
+    },
+    'bounce-in': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, y: [30, 0], scale: [0.85, 1] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, y: [0, -20], scale: [1, 0.9] },
+    },
+    'blur-in': {
+        enter: { opacity: DEFAULT_FADE_OPACITY, blur: [10, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, blur: [0, 10] },
+    },
+    spin: {
+        enter: { opacity: DEFAULT_FADE_OPACITY, rotate: [-360, 0] },
+        leave: { opacity: DEFAULT_LEAVE_OPACITY, rotate: [0, 360] },
+    },
+    pulse: {
+        enter: { scale: [1, 1.05, 1] },
+        leave: { scale: [1, 0.95, 1] },
+    },
+    none: {
+        enter: { opacity: [1, 1] },
+        leave: { opacity: [1, 1] },
+    },
+};
+
+function resolveMovementConfig(defaults, overrides, reducedMotion) {
+    if (reducedMotion && typeof ngDevMode !== 'undefined' && ngDevMode) {
+        console.warn('[Movement] Animations disabled: prefers-reduced-motion is active. ' +
+            'Disable "Reduce motion" in your OS accessibility settings to see animations.');
+    }
+    return {
+        duration: Math.max(0, overrides.duration ?? defaults.duration),
+        easing: overrides.easing ?? defaults.easing,
+        delay: Math.max(0, overrides.delay ?? defaults.delay),
+        disabled: reducedMotion || (overrides.disabled ?? defaults.disabled),
+    };
+}
+function resolveMoveFrames(value, phase) {
+    if (typeof value === 'string') {
+        const preset = MOVE_PRESETS[value];
+        if (!preset) {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                console.warn(`[Movement] Unknown preset: "${value}". Using "none" preset.`);
+            }
+            return MOVE_PRESETS['none'][phase];
+        }
+        return preset[phase];
+    }
+    return value;
+}
+function prefersReducedMotion(documentRef) {
+    const view = documentRef.defaultView;
+    if (!view || typeof view.matchMedia !== 'function') {
+        return false;
+    }
+    return view.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Reverses all keyframe value arrays in a MoveKeyframes object.
+ * Used by hover and tap directives to animate back to the original state.
+ */
+function reverseFrames(frames) {
+    const reversed = {};
+    for (const key in frames) {
+        const k = key;
+        const arr = frames[k];
+        if (arr) {
+            reversed[k] = [...arr].reverse();
+        }
+    }
+    return reversed;
+}
+/**
+ * Applies the first keyframe values as inline styles to an element.
+ * Used by in-view and text directives to set the initial (hidden) state
+ * before the IntersectionObserver triggers the animation.
+ */
+function applyInitialStyles(el, frames) {
+    applyComposedStyle(el, composeInitialStyle(frames));
+}
+/**
+ * Clears all inline styles set by `applyInitialStyles`.
+ * Called just before WAAPI animates so it can take full control.
+ */
+function clearInitialStyles(el) {
+    clearComposedStyle(el);
+}
+
+class WaapiPlayer {
+    #animation = null;
+    #resolveFinished;
+    finished = new Promise((resolve) => {
+        this.#resolveFinished = resolve;
+    });
+    constructor(host, frames, config, onDone) {
+        if (typeof host.animate !== 'function') {
+            this.#resolveFinished();
+            onDone?.();
+            return;
+        }
+        const keyframes = this.#toWAAPIKeyframes(frames);
+        this.#animation = host.animate(keyframes, {
+            duration: config.duration,
+            easing: config.easing,
+            delay: config.delay,
+            fill: 'both',
+        });
+        this.#animation.addEventListener('finish', () => {
+            this.#animation?.commitStyles?.();
+            this.#animation?.cancel();
+            this.#resolveFinished();
+            onDone?.();
+        }, { once: true });
+    }
+    play() {
+        this.#animation?.play();
+    }
+    pause() {
+        this.#animation?.pause();
+    }
+    cancel() {
+        if (this.#animation?.playState !== 'idle') {
+            this.#animation?.cancel();
+        }
+        this.#resolveFinished();
+    }
+    get currentTime() {
+        return this.#animation?.currentTime ?? 0;
+    }
+    set currentTime(time) {
+        if (this.#animation) {
+            this.#animation.currentTime = time;
+        }
+    }
+    #toWAAPIKeyframes(frames) {
+        let maxLength = 0;
+        for (const key in frames) {
+            const arr = frames[key];
+            if (Array.isArray(arr)) {
+                maxLength = Math.max(maxLength, arr.length);
+            }
+        }
+        if (maxLength === 0)
+            return [];
+        const keyframes = [];
+        for (let i = 0; i < maxLength; i++) {
+            keyframes.push(composeKeyframeAt(frames, i));
+        }
+        return keyframes;
+    }
+}
+
+class SpringPlayer {
+    host;
+    frames;
+    delay;
+    onDone;
+    #resolveFinished;
+    finished = new Promise((resolve) => {
+        this.#resolveFinished = resolve;
+    });
+    #animation = null;
+    constructor(host, frames, userConfig, delay, onDone) {
+        this.host = host;
+        this.frames = frames;
+        this.delay = delay;
+        this.onDone = onDone;
+        if (typeof host.animate !== 'function') {
+            this.#resolveFinished();
+            onDone?.();
+            return;
+        }
+        const config = {
+            stiffness: 100,
+            damping: 10,
+            mass: 1,
+            velocity: 0,
+            ...userConfig,
+        };
+        const keyframes = this.#generateSpringKeyframes(frames, config);
+        if (keyframes.length === 0) {
+            this.#resolveFinished();
+            onDone?.();
+            return;
+        }
+        // Default duration of the calculated simulation is bound to the arrays output.
+        // We run it over that specific time frame, we know exactly the duration by counting ticks * tick duration.
+        // Let's assume tick rate is 16.66ms (60fps simulation)
+        const duration = keyframes.length * SIMULATION_TICK_RATE;
+        this.#animation = host.animate(keyframes, {
+            duration,
+            delay: this.delay,
+            fill: 'both',
+            easing: 'linear', // Spring physics already has the easing baked into the frames
+        });
+        this.#animation.addEventListener('finish', () => {
+            this.#animation?.commitStyles?.();
+            this.#animation?.cancel();
+            this.#resolveFinished();
+            onDone?.();
+        }, { once: true });
+    }
+    play() {
+        this.#animation?.play();
+    }
+    pause() {
+        this.#animation?.pause();
+    }
+    cancel() {
+        if (this.#animation?.playState !== 'idle') {
+            this.#animation?.cancel();
+        }
+        this.#resolveFinished();
+    }
+    get currentTime() {
+        return this.#animation?.currentTime ?? 0;
+    }
+    set currentTime(time) {
+        if (this.#animation) {
+            this.#animation.currentTime = time;
+        }
+    }
+    #generateSpringKeyframes(frames, config) {
+        let maxSteps = 0;
+        for (const key in frames) {
+            const arr = frames[key];
+            if (Array.isArray(arr)) {
+                maxSteps = Math.max(maxSteps, arr.length);
+            }
+        }
+        if (maxSteps <= 1)
+            return [];
+        const keyframes = [];
+        const dt = 1 / 60; // Simulate at 60fps (16.66ms per tick)
+        const stiffness = config.stiffness;
+        const damping = config.damping;
+        const mass = config.mass;
+        // We will simulate segments between keyframes based on physics
+        for (let step = 0; step < maxSteps - 1; step++) {
+            let progress = 0;
+            let velocity = step === 0 ? (config.velocity ?? 0) : 0;
+            let isSettled = false;
+            // Simulate the spring for this intermediate segment
+            // Prevent infinite loops safely by bounding iterations
+            let iterations = 0;
+            const maxIterations = SIMULATION_MAX_ITERATIONS; // max 10 seconds per step
+            while (!isSettled && iterations < maxIterations) {
+                // Evaluate frame
+                const p = Math.min(Math.max(progress, 0), 1);
+                keyframes.push(this.#composeFrame(frames, step, step + 1, p));
+                // Advance physics F = -k*x - c*v
+                const displacement = progress - 1;
+                const force = -stiffness * displacement - damping * velocity;
+                const acceleration = force / mass;
+                velocity += acceleration * dt;
+                progress += velocity * dt;
+                if (Math.abs(displacement) < SIMULATION_SETTLED_THRESHOLD &&
+                    Math.abs(velocity) < SIMULATION_SETTLED_THRESHOLD) {
+                    isSettled = true;
+                }
+                iterations++;
+            }
+            // Ensure the final state of the step is exactly 1
+            keyframes.push(this.#composeFrame(frames, step, step + 1, 1));
+        }
+        return keyframes;
+    }
+    #composeFrame(frames, i1, i2, p) {
+        return composeInterpolatedKeyframe(frames, i1, i2, p);
+    }
+}
+
+class AnimationEngine {
+    #platformId = inject(PLATFORM_ID);
+    #defaults = inject(MOVEMENT_CONFIG);
+    play(host, frames, options = {}) {
+        if (!isPlatformBrowser(this.#platformId)) {
+            options.onDone?.();
+            return null;
+        }
+        if (options.disabled) {
+            this.#applyFinalStyles(host, frames);
+            options.onDone?.();
+            return null;
+        }
+        const config = options.config ?? this.#defaults;
+        const isSpring = options.spring || config.easing === 'spring';
+        if (isSpring) {
+            return new SpringPlayer(host, frames, options.spring ?? {}, options.delay ?? config.delay, options.onDone);
+        }
+        else {
+            return new WaapiPlayer(host, frames, {
+                duration: config.duration,
+                easing: config.easing,
+                delay: options.delay ?? config.delay,
+                disabled: false,
+            }, options.onDone);
+        }
+    }
+    #applyFinalStyles(host, frames) {
+        applyComposedStyle(host, composeFinalStyle(frames));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AnimationEngine, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AnimationEngine, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: AnimationEngine, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const MOVE_STAGGER_PARENT = new InjectionToken('MOVE_STAGGER_PARENT');
+
+const MOVE_PRESENCE_PARENT = new InjectionToken('MOVE_PRESENCE_PARENT');
+
+class MoveAnimateDirective {
+    move = input(undefined, ...(ngDevMode ? [{ debugName: "move" }] : /* istanbul ignore next */ []));
+    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
+    moveAnimateLeave = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimateLeave" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #presence = inject(MOVE_PRESENCE_PARENT, { optional: true });
+    #config = this.#defaults;
+    #enterPlayer = null;
+    #leavePlayer = null;
+    ngOnInit() {
+        this.#stagger?.register(this.#host.nativeElement);
+        this.#presence?.register(this);
+        Promise.resolve().then(() => {
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            this.#config = resolveMovementConfig(this.#defaults, {
+                duration: this.moveDuration(),
+                easing: this.moveEasing(),
+                delay: (this.moveDelay() ?? 0) + staggerDelay,
+                disabled: this.moveDisabled(),
+            }, prefersReducedMotion(this.#documentRef));
+            const enterInput = this.resolveEnterInput();
+            this.#enterPlayer = this.#engine.play(this.#host.nativeElement, resolveMoveFrames(enterInput, 'enter'), {
+                config: this.#config,
+                spring: this.moveSpring(),
+                disabled: this.#config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#presence?.unregister(this);
+        this.#enterPlayer?.cancel();
+        this.#leavePlayer?.cancel();
+    }
+    playLeave() {
+        if (this.#config.disabled) {
+            return Promise.resolve();
+        }
+        this.#enterPlayer?.cancel();
+        this.#leavePlayer = this.#engine.play(this.#host.nativeElement, resolveMoveFrames(this.resolveLeaveInput(), 'leave'), {
+            config: this.#config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+        return this.#leavePlayer?.finished ?? Promise.resolve();
+    }
+    resolveEnterInput() {
+        return this.moveAnimate() ?? this.move() ?? 'none';
+    }
+    resolveLeaveInput() {
+        return this.moveAnimateLeave() ?? this.resolveEnterInput();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveAnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveAnimateDirective, isStandalone: true, selector: "[move],[moveAnimate]", inputs: { move: { classPropertyName: "move", publicName: "move", isSignal: true, isRequired: false, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", isSignal: true, isRequired: false, transformFunction: null }, moveAnimateLeave: { classPropertyName: "moveAnimateLeave", publicName: "moveAnimateLeave", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveAnimateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[move],[moveAnimate]',
+                }]
+        }], propDecorators: { move: [{ type: i0.Input, args: [{ isSignal: true, alias: "move", required: false }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", required: false }] }], moveAnimateLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimateLeave", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveAnimationDirective {
+    moveAnimation = input.required(...(ngDevMode ? [{ debugName: "moveAnimation" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #presence = inject(MOVE_PRESENCE_PARENT, { optional: true });
+    #config = this.#defaults;
+    #enterPlayer = null;
+    #leavePlayer = null;
+    ngOnInit() {
+        this.#stagger?.register(this.#host.nativeElement);
+        this.#presence?.register(this);
+        Promise.resolve().then(() => {
+            const cfg = this.moveAnimation();
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            this.#config = resolveMovementConfig(this.#defaults, {
+                duration: cfg.duration,
+                easing: cfg.easing,
+                delay: (cfg.delay ?? 0) + staggerDelay,
+                disabled: undefined,
+            }, prefersReducedMotion(this.#documentRef));
+            if (!cfg.initial || !cfg.animate)
+                return;
+            const frames = statesToKeyframes(cfg.initial, cfg.animate);
+            if (Object.keys(frames).length === 0)
+                return;
+            this.#enterPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+                config: this.#config,
+                spring: cfg.spring,
+                disabled: this.#config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#presence?.unregister(this);
+        this.#enterPlayer?.cancel();
+        this.#leavePlayer?.cancel();
+    }
+    playLeave() {
+        const cfg = this.moveAnimation();
+        if (this.#config.disabled || !cfg.exit || !cfg.animate) {
+            return Promise.resolve();
+        }
+        this.#enterPlayer?.cancel();
+        const frames = statesToKeyframes(cfg.animate, cfg.exit);
+        if (Object.keys(frames).length === 0)
+            return Promise.resolve();
+        this.#leavePlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config: this.#config,
+            spring: cfg.spring,
+            disabled: false,
+        });
+        return this.#leavePlayer?.finished ?? Promise.resolve();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveAnimationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveAnimationDirective, isStandalone: true, selector: "[moveAnimation]", inputs: { moveAnimation: { classPropertyName: "moveAnimation", publicName: "moveAnimation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveAnimationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveAnimation]',
+                }]
+        }], propDecorators: { moveAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimation", required: true }] }] } });
+function statesToKeyframes(from, to) {
+    const result = {};
+    for (const key of Object.keys(from)) {
+        const f = from[key];
+        const t = to[key];
+        if (f !== undefined && t !== undefined) {
+            result[key] = [f, t];
+        }
+    }
+    return result;
+}
+
+class MoveEnterDirective {
+    moveEnter = input('none', ...(ngDevMode ? [{ debugName: "moveEnter" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #player = null;
+    ngOnInit() {
+        this.#stagger?.register(this.#host.nativeElement);
+        Promise.resolve().then(() => {
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            const config = resolveMovementConfig(this.#defaults, {
+                duration: this.moveDuration(),
+                easing: this.moveEasing(),
+                delay: (this.moveDelay() ?? 0) + staggerDelay,
+                disabled: this.moveDisabled(),
+            }, prefersReducedMotion(this.#documentRef));
+            this.#player = this.#engine.play(this.#host.nativeElement, resolveMoveFrames(this.moveEnter(), 'enter'), {
+                config: config,
+                spring: this.moveSpring(),
+                disabled: config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#player?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveEnterDirective, isStandalone: true, selector: "[moveEnter]", inputs: { moveEnter: { classPropertyName: "moveEnter", publicName: "moveEnter", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveEnterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveEnter]',
+                }]
+        }], propDecorators: { moveEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEnter", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveLeaveDirective {
+    moveLeave = input('none', ...(ngDevMode ? [{ debugName: "moveLeave" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #presence = inject(MOVE_PRESENCE_PARENT, { optional: true });
+    #config = this.#defaults;
+    #player = null;
+    ngOnInit() {
+        this.#presence?.register(this);
+        this.#config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, prefersReducedMotion(this.#documentRef));
+    }
+    ngOnDestroy() {
+        this.#presence?.unregister(this);
+        this.#player?.cancel();
+    }
+    playLeave() {
+        if (this.#config.disabled) {
+            return Promise.resolve();
+        }
+        this.#player = this.#engine.play(this.#host.nativeElement, resolveMoveFrames(this.moveLeave(), 'leave'), {
+            config: this.#config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+        return this.#player?.finished ?? Promise.resolve();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLeaveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveLeaveDirective, isStandalone: true, selector: "[moveLeave]", inputs: { moveLeave: { classPropertyName: "moveLeave", publicName: "moveLeave", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLeaveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveLeave]',
+                }]
+        }], propDecorators: { moveLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeave", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveHoverDirective {
+    moveWhileHover = input.required(...(ngDevMode ? [{ debugName: "moveWhileHover" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #currentPlayer = null;
+    #isHovered = false;
+    onMouseEnter() {
+        if (this.#isHovered)
+            return;
+        this.#isHovered = true;
+        this.play(false);
+    }
+    onMouseLeave() {
+        if (!this.#isHovered)
+            return;
+        this.#isHovered = false;
+        this.play(true);
+    }
+    onTouchStart(event) {
+        event.preventDefault();
+        if (this.#isHovered)
+            return;
+        this.#isHovered = true;
+        this.play(false);
+    }
+    onTouchEnd() {
+        if (!this.#isHovered)
+            return;
+        this.#isHovered = false;
+        this.play(true);
+    }
+    play(reverse) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        if (config.disabled)
+            return;
+        let frames = resolveMoveFrames(this.moveWhileHover(), 'enter');
+        if (reverse) {
+            frames = reverseFrames(frames);
+        }
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+    }
+    ngOnDestroy() {
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveHoverDirective, isStandalone: true, selector: "[moveWhileHover]", inputs: { moveWhileHover: { classPropertyName: "moveWhileHover", publicName: "moveWhileHover", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()", "touchcancel": "onTouchEnd()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveWhileHover]',
+                    host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(touchstart)': 'onTouchStart($event)',
+                        '(touchend)': 'onTouchEnd()',
+                        '(touchcancel)': 'onTouchEnd()',
+                    },
+                }]
+        }], propDecorators: { moveWhileHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileHover", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveTapDirective {
+    moveWhileTap = input.required(...(ngDevMode ? [{ debugName: "moveWhileTap" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #currentPlayer = null;
+    #isTapped = false;
+    onPointerDown() {
+        if (this.#isTapped)
+            return;
+        this.#isTapped = true;
+        this.play(false);
+    }
+    onPointerUp() {
+        if (!this.#isTapped)
+            return;
+        this.#isTapped = false;
+        this.play(true);
+    }
+    play(reverse) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        if (config.disabled)
+            return;
+        let frames = resolveMoveFrames(this.moveWhileTap(), 'enter');
+        if (reverse) {
+            frames = reverseFrames(frames);
+        }
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+    }
+    ngOnDestroy() {
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTapDirective, isStandalone: true, selector: "[moveWhileTap]", inputs: { moveWhileTap: { classPropertyName: "moveWhileTap", publicName: "moveWhileTap", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "pointerleave": "onPointerUp()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveWhileTap]',
+                    host: {
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()',
+                        '(pointerleave)': 'onPointerUp()',
+                    },
+                }]
+        }], propDecorators: { moveWhileTap: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileTap", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+const MOVE_VARIANTS_PARENT = new InjectionToken('MOVE_VARIANTS_PARENT');
+class MoveVariantsDirective {
+    moveVariants = input.required(...(ngDevMode ? [{ debugName: "moveVariants" }] : /* istanbul ignore next */ []));
+    moveAnimate = input(undefined, ...(ngDevMode ? [{ debugName: "moveAnimate" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #parent = inject(MOVE_VARIANTS_PARENT, { optional: true, skipSelf: true });
+    #engine = inject(AnimationEngine);
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #stagger = inject(MOVE_STAGGER_PARENT, { optional: true });
+    #currentPlayer = null;
+    #isReducedMotion = false;
+    activeVariant = computed(() => {
+        return this.moveAnimate() ?? this.#parent?.activeVariant();
+    }, ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
+        this.#stagger?.register(this.#host.nativeElement);
+        effect(() => {
+            const variantName = this.activeVariant();
+            if (!variantName)
+                return;
+            const variants = this.moveVariants();
+            if (!variants)
+                return;
+            const state = variants[variantName];
+            if (!state)
+                return;
+            this.#currentPlayer?.cancel();
+            const { spring, duration, easing, delay, ...keyframesMap } = state;
+            const keyframes = keyframesMap;
+            const staggerDelay = this.#stagger?.getDelay(this.#host.nativeElement) ?? 0;
+            const config = resolveMovementConfig(this.#defaults, {
+                duration: duration ?? this.moveDuration(),
+                easing: easing ?? this.moveEasing(),
+                delay: (delay ?? this.moveDelay() ?? 0) + staggerDelay,
+                disabled: this.moveDisabled(),
+            }, this.#isReducedMotion);
+            this.#currentPlayer = this.#engine.play(this.#host.nativeElement, keyframes, {
+                config,
+                spring: spring ?? this.moveSpring(),
+                disabled: config.disabled,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.#stagger?.unregister(this.#host.nativeElement);
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveVariantsDirective, isStandalone: true, selector: "[moveVariants]", inputs: { moveVariants: { classPropertyName: "moveVariants", publicName: "moveVariants", isSignal: true, isRequired: true, transformFunction: null }, moveAnimate: { classPropertyName: "moveAnimate", publicName: "moveAnimate", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MOVE_VARIANTS_PARENT,
+                useExisting: forwardRef(() => MoveVariantsDirective),
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveVariantsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveVariants]',
+                    providers: [
+                        {
+                            provide: MOVE_VARIANTS_PARENT,
+                            useExisting: forwardRef(() => MoveVariantsDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveVariants", required: true }] }], moveAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveAnimate", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveStaggerDirective {
+    moveStagger = input.required(...(ngDevMode ? [{ debugName: "moveStagger" }] : /* istanbul ignore next */ []));
+    moveStaggerDirection = input('first', ...(ngDevMode ? [{ debugName: "moveStaggerDirection" }] : /* istanbul ignore next */ []));
+    #children = new Set();
+    register(el) {
+        this.#children.add(el);
+    }
+    unregister(el) {
+        this.#children.delete(el);
+    }
+    getDelay(el) {
+        if (!this.#children.has(el))
+            return 0;
+        const list = Array.from(this.#children).sort((a, b) => {
+            // Unreliable on detached elements, but they are in DOM when sorting
+            const pos = a.compareDocumentPosition(b);
+            return pos & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+        });
+        const index = list.indexOf(el);
+        if (index === -1)
+            return 0;
+        const staggerConfig = this.moveStagger();
+        // If it's a spring config but used for stagger, default to 100ms or try to derive.
+        const staggerTime = typeof staggerConfig === 'number' ? staggerConfig : 100;
+        const direction = this.moveStaggerDirection();
+        const total = list.length;
+        let staggerIndex = index;
+        if (direction === 'last') {
+            staggerIndex = total - 1 - index;
+        }
+        else if (direction === 'center') {
+            const center = (total - 1) / 2;
+            staggerIndex = Math.abs(index - center);
+        }
+        return staggerIndex * staggerTime;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveStaggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveStaggerDirective, isStandalone: true, selector: "[moveStagger]", inputs: { moveStagger: { classPropertyName: "moveStagger", publicName: "moveStagger", isSignal: true, isRequired: true, transformFunction: null }, moveStaggerDirection: { classPropertyName: "moveStaggerDirection", publicName: "moveStaggerDirection", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MOVE_STAGGER_PARENT,
+                useExisting: forwardRef(() => MoveStaggerDirective),
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveStaggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveStagger]',
+                    providers: [
+                        {
+                            provide: MOVE_STAGGER_PARENT,
+                            useExisting: forwardRef(() => MoveStaggerDirective),
+                        },
+                    ],
+                }]
+        }], propDecorators: { moveStagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveStagger", required: true }] }], moveStaggerDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveStaggerDirection", required: false }] }] } });
+
+class MoveLayoutDirective {
+    moveLayout = input(true, ...(ngDevMode ? [{ debugName: "moveLayout" }] : /* istanbul ignore next */ []));
+    moveLayoutId = input(undefined, ...(ngDevMode ? [{ debugName: "moveLayoutId" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #snapshot = null;
+    #currentPlayer = null;
+    #isReducedMotion = false;
+    #isAnimating = false;
+    constructor() {
+        this.#isReducedMotion = prefersReducedMotion(this.#documentRef);
+        afterEveryRender({
+            earlyRead: () => {
+                if (this.moveLayout() === false ||
+                    this.moveDisabled() ||
+                    this.#isReducedMotion ||
+                    this.#isAnimating) {
+                    return null;
+                }
+                const currentRect = this.#host.nativeElement.getBoundingClientRect();
+                if (this.#snapshot) {
+                    const dx = this.#snapshot.left - currentRect.left;
+                    const dy = this.#snapshot.top - currentRect.top;
+                    const dw = this.#snapshot.width / currentRect.width;
+                    const dh = this.#snapshot.height / currentRect.height;
+                    if (Math.abs(dx) > 0.5 ||
+                        Math.abs(dy) > 0.5 ||
+                        Math.abs(dw - 1) > 0.01 ||
+                        Math.abs(dh - 1) > 0.01) {
+                        return {
+                            dx,
+                            dy,
+                            dw,
+                            dh,
+                            targetRect: currentRect,
+                        };
+                    }
+                }
+                this.#snapshot = currentRect;
+                return null;
+            },
+            write: (flipData) => {
+                if (flipData) {
+                    this.playFlip(flipData);
+                }
+            },
+        });
+    }
+    playFlip(flipData) {
+        this.#isAnimating = true;
+        // The host is currently visually at its NEW position (unpainted).
+        // We apply the inverse transform to make it LOOK like it's at the OLD position.
+        // We apply transform origin 0 0 so scaling works correctly from top-left.
+        const transformOrigin = this.#host.nativeElement.style.transformOrigin;
+        this.#host.nativeElement.style.transformOrigin = '0 0';
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, this.#isReducedMotion);
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, {
+            x: [flipData.dx, 0],
+            y: [flipData.dy, 0],
+            scaleX: [flipData.dw, 1],
+            scaleY: [flipData.dh, 1],
+        }, {
+            config,
+            spring: this.moveSpring(),
+            disabled: false,
+            onDone: () => {
+                this.#isAnimating = false;
+                this.#host.nativeElement.style.transformOrigin = transformOrigin;
+                // Take final snapshot so next check is fresh
+                this.#snapshot = this.#host.nativeElement.getBoundingClientRect();
+            },
+        });
+    }
+    ngOnDestroy() {
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveLayoutDirective, isStandalone: true, selector: "[moveLayout]", inputs: { moveLayout: { classPropertyName: "moveLayout", publicName: "moveLayout", isSignal: true, isRequired: false, transformFunction: null }, moveLayoutId: { classPropertyName: "moveLayoutId", publicName: "moveLayoutId", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveLayout]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLayout", required: false }] }], moveLayoutId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLayoutId", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+/**
+ * SmoothScrollService — Lenis-inspired smooth scroll for Angular.
+ *
+ * Desktop: intercepts wheel events → lerp interpolation → synthetic scrollTop.
+ * Mobile:  listens to native touch scroll → lerp interpolation → synthetic scrollTop.
+ *          Native scroll is prevented during touch to avoid the vibration conflict.
+ *
+ * The `scrollY` signal is updated on every RAF tick and can be consumed by
+ * `MoveScrollDirective` (or any other consumer) to react to smooth scroll position
+ * without relying on the native `scroll` event (which is NOT fired during smooth scroll).
+ *
+ * Usage (in app root or a layout service):
+ *
+ *   constructor() {
+ *     inject(SmoothScrollService).init();
+ *   }
+ */
+class SmoothScrollService {
+    #document = inject(DOCUMENT);
+    #platformId = inject(PLATFORM_ID);
+    #zone = inject(NgZone);
+    /** Lerp factor — lower = smoother/slower, higher = snappier. Range 0–1. */
+    #lerp = 0.1;
+    #targetY = 0;
+    #currentY = 0;
+    #rafId = 0;
+    #isRunning = false;
+    #scrollElement = null;
+    /**
+     * Reactive scroll position (in pixels) updated on every RAF tick.
+     * Use this signal instead of listening to `window.scroll` when smooth scroll is active,
+     * since native scroll events are NOT fired during lerp-based scrolling.
+     */
+    scrollY = signal(0, ...(ngDevMode ? [{ debugName: "scrollY" }] : /* istanbul ignore next */ []));
+    // Touch tracking
+    #touchStartY = 0;
+    #lastTouchY = 0;
+    #touchVelocity = 0;
+    #isTouching = false;
+    #lastTouchTimestamp = 0;
+    // ─── Event handlers ────────────────────────────────────────────────────────
+    #onWheel = (e) => {
+        if (this.#isInsideScrollable(e.target))
+            return;
+        e.preventDefault();
+        this.#targetY = this.#clamp(this.#targetY + e.deltaY);
+    };
+    #onTouchStart = (e) => {
+        if (this.#isInsideScrollable(e.target))
+            return;
+        this.#isTouching = true;
+        this.#touchVelocity = 0;
+        this.#touchStartY = e.touches[0].clientY;
+        this.#lastTouchY = this.#touchStartY;
+        this.#lastTouchTimestamp = e.timeStamp;
+    };
+    #onTouchMove = (e) => {
+        if (!this.#isTouching)
+            return;
+        if (this.#isInsideScrollable(e.target))
+            return;
+        // Prevent native scroll on the root element — we handle it ourselves
+        e.preventDefault();
+        const currentY = e.touches[0].clientY;
+        const deltaTime = Math.max(e.timeStamp - this.#lastTouchTimestamp, 1);
+        const deltaY = this.#lastTouchY - currentY; // inverted: swipe up → scroll down
+        // Track velocity (px/ms) for momentum after lift
+        this.#touchVelocity = deltaY / deltaTime;
+        this.#targetY = this.#clamp(this.#targetY + deltaY);
+        this.#lastTouchY = currentY;
+        this.#lastTouchTimestamp = e.timeStamp;
+    };
+    #onTouchEnd = () => {
+        this.#isTouching = false;
+        // Apply momentum: fling the targetY by velocity × decay frames
+        this.#applyMomentum();
+    };
+    // ─── Public API ────────────────────────────────────────────────────────────
+    /** Whether the service is currently active (i.e. `init()` has been called). */
+    get isActive() {
+        return this.#isRunning;
+    }
+    init(options = {}) {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        if (this.#isRunning)
+            return;
+        this.#lerp = options.lerp ?? 0.1;
+        this.#scrollElement = options.element ?? this.#document.documentElement;
+        this.#currentY = this.#scrollElement.scrollTop;
+        this.#targetY = this.#currentY;
+        // Run entirely outside Angular zone to avoid change detection on every RAF
+        this.#zone.runOutsideAngular(() => {
+            const el = this.#scrollElement;
+            el.addEventListener('wheel', this.#onWheel, { passive: false });
+            // Touch events must also be non-passive to call preventDefault()
+            el.addEventListener('touchstart', this.#onTouchStart, { passive: true });
+            el.addEventListener('touchmove', this.#onTouchMove, { passive: false });
+            el.addEventListener('touchend', this.#onTouchEnd, { passive: true });
+            this.#isRunning = true;
+            this.#tick();
+        });
+    }
+    destroy() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        this.#isRunning = false;
+        cancelAnimationFrame(this.#rafId);
+        const el = this.#scrollElement;
+        if (el) {
+            el.removeEventListener('wheel', this.#onWheel);
+            el.removeEventListener('touchstart', this.#onTouchStart);
+            el.removeEventListener('touchmove', this.#onTouchMove);
+            el.removeEventListener('touchend', this.#onTouchEnd);
+        }
+        this.#scrollElement = null;
+    }
+    /** Scroll programmatically to a Y position */
+    scrollTo(y, instant = false) {
+        this.#targetY = this.#clamp(y);
+        if (instant) {
+            this.#currentY = this.#targetY;
+            this.#applyScroll(this.#currentY);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    // ─── Internal ──────────────────────────────────────────────────────────────
+    #tick() {
+        if (!this.#isRunning)
+            return;
+        this.#currentY += (this.#targetY - this.#currentY) * this.#lerp;
+        if (Math.abs(this.#targetY - this.#currentY) < 0.1) {
+            this.#currentY = this.#targetY;
+        }
+        this.#applyScroll(this.#currentY);
+        this.#rafId = requestAnimationFrame(() => this.#tick());
+    }
+    /**
+     * After finger lift, simulate Lenis-style momentum decay.
+     * Velocity decays by a friction factor each frame until negligible.
+     */
+    #applyMomentum() {
+        const FRICTION = 0.92; // higher = more glide; lower = stops faster
+        const MIN_VELOCITY = 0.05; // px/ms threshold to stop
+        let v = this.#touchVelocity * 16; // convert px/ms → px/frame (~16ms)
+        const step = () => {
+            if (!this.#isRunning || Math.abs(v) < MIN_VELOCITY)
+                return;
+            v *= FRICTION;
+            this.#targetY = this.#clamp(this.#targetY + v);
+            requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    }
+    #applyScroll(y) {
+        if (!this.#scrollElement)
+            return;
+        this.#scrollElement.scrollTop = y;
+        // Update the reactive signal so consumers (e.g. MoveScrollDirective) can react
+        // without relying on native scroll events which don't fire during lerp-based scroll.
+        this.scrollY.set(y);
+    }
+    #getMaxScroll() {
+        if (!this.#scrollElement)
+            return 0;
+        return this.#scrollElement.scrollHeight - this.#scrollElement.clientHeight;
+    }
+    #clamp(y) {
+        return Math.max(0, Math.min(y, this.#getMaxScroll()));
+    }
+    /**
+     * Checks if the element is inside a scrollable container OTHER than the root scroll element.
+     * Used to let native scroll handle inner overflow-y:auto containers (like Lenis does).
+     */
+    #isInsideScrollable(el) {
+        let current = el.parentElement;
+        while (current && current !== this.#scrollElement) {
+            const { overflowY } = getComputedStyle(current);
+            if ((overflowY === 'auto' || overflowY === 'scroll') &&
+                current.scrollHeight > current.clientHeight) {
+                return true;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SmoothScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SmoothScrollService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SmoothScrollService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MoveScrollDirective {
+    moveScroll = input(undefined, ...(ngDevMode ? [{ debugName: "moveScroll" }] : /* istanbul ignore next */ []));
+    moveScrollOffset = input(['0 1', '1 0'], ...(ngDevMode ? [{ debugName: "moveScrollOffset" }] : /* istanbul ignore next */ []));
+    /** Optional CSS selector for a custom scrollable container. Defaults to window scroll. */
+    moveScrollContainer = input(null, ...(ngDevMode ? [{ debugName: "moveScrollContainer" }] : /* istanbul ignore next */ []));
+    progress = signal(0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    #documentRef = inject(DOCUMENT);
+    #platformId = inject(PLATFORM_ID);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #smoothScroll = inject(SmoothScrollService, { optional: true });
+    #player = null;
+    #observer = null;
+    #isVisible = false;
+    #scrollListener = () => this.#updateProgress();
+    #scrollTarget = null;
+    #targetProgress = 0;
+    #animProgress = 0;
+    #rafId = null;
+    constructor() {
+        // Recreate the player whenever keyframes change (e.g. user changes effect type).
+        // Uses duration=1000 + linear easing so that currentTime ∈ [0,1000] maps cleanly
+        // to the [0,1] scroll progress without easing distortion or premature finish.
+        effect(() => {
+            if (!isPlatformBrowser(this.#platformId))
+                return;
+            const keyframes = this.moveScroll();
+            if (this.#rafId !== null) {
+                this.#documentRef.defaultView?.cancelAnimationFrame(this.#rafId);
+                this.#rafId = null;
+            }
+            this.#player?.cancel();
+            this.#player = null;
+            this.#animProgress = 0;
+            this.#targetProgress = 0;
+            if (!keyframes)
+                return;
+            const view = this.#documentRef.defaultView;
+            if (!view)
+                return;
+            this.#player = this.#engine.play(this.#host.nativeElement, keyframes, {
+                config: { duration: 1000, easing: 'linear', delay: 0, disabled: false },
+            });
+            this.#player?.pause();
+            // Sync the new player to the current scroll position immediately.
+            this.#updateProgress();
+        });
+        // Smooth-scroll service support (fires via RAF signal instead of native scroll event).
+        effect(() => {
+            this.#smoothScroll?.scrollY();
+            if (this.#smoothScroll?.isActive && this.#isVisible) {
+                this.#updateProgress();
+            }
+        });
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const view = this.#documentRef.defaultView;
+        if (!view)
+            return;
+        // Resolve scroll target: custom container selector or window.
+        const containerSelector = this.moveScrollContainer();
+        const containerEl = containerSelector
+            ? this.#documentRef.querySelector(containerSelector)
+            : null;
+        this.#scrollTarget = containerEl ?? view;
+        // Use the custom container as IntersectionObserver root when available so that
+        // the observer fires based on container-viewport visibility, not page-viewport visibility.
+        this.#observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            this.#isVisible = entry.isIntersecting;
+            if (entry.isIntersecting) {
+                if (!this.#smoothScroll?.isActive) {
+                    this.#scrollTarget.addEventListener('scroll', this.#scrollListener, { passive: true });
+                }
+                this.#updateProgress();
+            }
+            else {
+                this.#scrollTarget?.removeEventListener('scroll', this.#scrollListener);
+            }
+        }, {
+            root: containerEl ?? null,
+            threshold: [0, 0.1, 0.25, 0.5, 0.75, 0.9, 1],
+        });
+        this.#observer.observe(this.#host.nativeElement);
+    }
+    #updateProgress() {
+        const view = this.#documentRef.defaultView;
+        if (!view)
+            return;
+        const el = this.#host.nativeElement;
+        const containerEl = this.#scrollTarget instanceof HTMLElement ? this.#scrollTarget : null;
+        let p;
+        if (containerEl) {
+            // Container-relative scroll progress.
+            const containerRect = containerEl.getBoundingClientRect();
+            const elRect = el.getBoundingClientRect();
+            // Element's fixed position within the scroll content (invariant to scrollTop changes).
+            const elTop = elRect.top - containerRect.top + containerEl.scrollTop;
+            const elHeight = el.offsetHeight;
+            const containerHeight = containerEl.clientHeight;
+            const offsets = this.moveScrollOffset();
+            const startScroll = this.#calcContainerOffset(elTop, elHeight, containerHeight, offsets[0]);
+            const endScroll = this.#calcContainerOffset(elTop, elHeight, containerHeight, offsets[1]);
+            const range = endScroll - startScroll;
+            if (range === 0)
+                return;
+            p = (containerEl.scrollTop - startScroll) / range;
+        }
+        else {
+            // Viewport-relative scroll progress (window scroll).
+            const rect = el.getBoundingClientRect();
+            const windowHeight = view.innerHeight;
+            const offsets = this.moveScrollOffset();
+            const startY = this.#calcViewportOffset(rect, windowHeight, offsets[0]);
+            const endY = this.#calcViewportOffset(rect, windowHeight, offsets[1]);
+            const totalDistance = startY - endY;
+            if (totalDistance === 0)
+                return;
+            p = startY / totalDistance;
+        }
+        // Cap at 0.999 to prevent the WAAPI player's `finish` event from firing,
+        // which would cancel the animation and make it uncontrollable for further scroll.
+        p = Math.max(0, Math.min(0.999, p));
+        this.#targetProgress = p;
+        this.#startRaf();
+    }
+    #startRaf() {
+        if (this.#rafId !== null)
+            return;
+        const view = this.#documentRef.defaultView;
+        if (!view)
+            return;
+        const tick = () => {
+            const diff = this.#targetProgress - this.#animProgress;
+            // Stop the loop when close enough (< 0.001 difference).
+            if (Math.abs(diff) < 0.001) {
+                this.#animProgress = this.#targetProgress;
+                this.#rafId = null;
+                this.#applyProgress(this.#animProgress);
+                return;
+            }
+            this.#animProgress += diff * 0.12;
+            this.#applyProgress(this.#animProgress);
+            this.#rafId = view.requestAnimationFrame(tick);
+        };
+        this.#rafId = view.requestAnimationFrame(tick);
+    }
+    #applyProgress(p) {
+        this.progress.set(p);
+        if (this.#player) {
+            this.#player.currentTime = p * 1000;
+        }
+    }
+    /**
+     * Scroll position at which the animation start/end offset is reached.
+     * "elFraction viewFraction" → e.g. "0 1" = element-top meets container-bottom.
+     */
+    #calcContainerOffset(elTop, elHeight, containerHeight, offsetStr) {
+        const [elVal, viewVal] = offsetStr.split(' ').map(parseFloat);
+        return elTop + elHeight * elVal - containerHeight * viewVal;
+    }
+    #calcViewportOffset(rect, windowHeight, offsetStr) {
+        const [elVal, viewVal] = offsetStr.split(' ').map(parseFloat);
+        return rect.top + rect.height * elVal - windowHeight * viewVal;
+    }
+    ngOnDestroy() {
+        if (this.#rafId !== null) {
+            this.#documentRef.defaultView?.cancelAnimationFrame(this.#rafId);
+            this.#rafId = null;
+        }
+        this.#player?.cancel();
+        this.#scrollTarget?.removeEventListener('scroll', this.#scrollListener);
+        this.#observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveScrollDirective, isStandalone: true, selector: "[moveScroll]", inputs: { moveScroll: { classPropertyName: "moveScroll", publicName: "moveScroll", isSignal: true, isRequired: false, transformFunction: null }, moveScrollOffset: { classPropertyName: "moveScrollOffset", publicName: "moveScrollOffset", isSignal: true, isRequired: false, transformFunction: null }, moveScrollContainer: { classPropertyName: "moveScrollContainer", publicName: "moveScrollContainer", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["moveScroll"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveScroll]',
+                    exportAs: 'moveScroll',
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveScroll", required: false }] }], moveScrollOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveScrollOffset", required: false }] }], moveScrollContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveScrollContainer", required: false }] }] } });
+
+class MovePresenceDirective {
+    movePresence = input(...(ngDevMode ? [undefined, { debugName: "movePresence" }] : /* istanbul ignore next */ []));
+    #viewContainer = inject(ViewContainerRef);
+    #template = inject(TemplateRef);
+    #view = null;
+    #isRemoving = false;
+    #children = new Set();
+    constructor() {
+        effect(() => {
+            const show = !!this.movePresence();
+            if (show) {
+                if (!this.#view) {
+                    this.#view = this.#viewContainer.createEmbeddedView(this.#template);
+                    this.#isRemoving = false;
+                }
+                else if (this.#isRemoving) {
+                    // If we were removing, cancel the removal
+                    this.#isRemoving = false;
+                }
+            }
+            else if (!show && this.#view && !this.#isRemoving) {
+                this.#isRemoving = true;
+                this.removeView();
+            }
+        });
+    }
+    register(child) {
+        this.#children.add(child);
+    }
+    unregister(child) {
+        this.#children.delete(child);
+    }
+    async removeView() {
+        const promises = [];
+        // Trigger leave on all registered children
+        for (const child of this.#children) {
+            promises.push(child.playLeave());
+        }
+        try {
+            if (promises.length > 0) {
+                await Promise.all(promises);
+            }
+        }
+        catch {
+            // Ignore errors in animations
+        }
+        if (this.#isRemoving && this.#view) {
+            this.#viewContainer.clear();
+            this.#view = null;
+            this.#isRemoving = false;
+            this.#children.clear();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MovePresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MovePresenceDirective, isStandalone: true, selector: "[movePresence]", inputs: { movePresence: { classPropertyName: "movePresence", publicName: "movePresence", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: MOVE_PRESENCE_PARENT,
+                useExisting: forwardRef(() => MovePresenceDirective),
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MovePresenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[movePresence]',
+                    providers: [
+                        {
+                            provide: MOVE_PRESENCE_PARENT,
+                            useExisting: forwardRef(() => MovePresenceDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { movePresence: [{ type: i0.Input, args: [{ isSignal: true, alias: "movePresence", required: false }] }] } });
+
+class MoveDragDirective {
+    moveDrag = input(true, ...(ngDevMode ? [{ debugName: "moveDrag" }] : /* istanbul ignore next */ []));
+    moveDragConstraints = input(undefined, ...(ngDevMode ? [{ debugName: "moveDragConstraints" }] : /* istanbul ignore next */ []));
+    moveDragElastic = input(0.5, ...(ngDevMode ? [{ debugName: "moveDragElastic" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #isDragging = false;
+    #pointerId = null;
+    #startX = 0;
+    #startY = 0;
+    #_x = 0;
+    #_y = 0;
+    #dragBounds = null;
+    #player = null;
+    onPointerDown(e) {
+        if (this.moveDrag() === false || e.button !== 0)
+            return;
+        this.#isDragging = true;
+        this.#pointerId = e.pointerId;
+        this.#host.nativeElement.setPointerCapture(e.pointerId);
+        this.#player?.cancel();
+        // read bounds cleanly before next render
+        this.#dragBounds = this.resolveBounds();
+        this.#startX = e.clientX - this.#_x;
+        this.#startY = e.clientY - this.#_y;
+        // Prevent text selection while dragging
+        this.#host.nativeElement.style.touchAction = 'none';
+        this.#host.nativeElement.style.userSelect = 'none';
+    }
+    onPointerMove(e) {
+        if (!this.#isDragging || e.pointerId !== this.#pointerId)
+            return;
+        this.#_x = e.clientX - this.#startX;
+        this.#_y = e.clientY - this.#startY;
+        this.applyTransform();
+    }
+    onPointerUp(e) {
+        if (!this.#isDragging || e.pointerId !== this.#pointerId)
+            return;
+        this.#isDragging = false;
+        this.#host.nativeElement.releasePointerCapture(e.pointerId);
+        this.#pointerId = null;
+        this.#host.nativeElement.style.touchAction = '';
+        this.#host.nativeElement.style.userSelect = '';
+        this.snapBackIfNeeded();
+    }
+    resolveBounds() {
+        const constraints = this.moveDragConstraints();
+        if (!constraints)
+            return null;
+        if (constraints instanceof HTMLElement) {
+            const oldTranslate = this.#host.nativeElement.style.translate;
+            this.#host.nativeElement.style.translate = 'none';
+            const elRect = this.#host.nativeElement.getBoundingClientRect();
+            const containerRect = constraints.getBoundingClientRect();
+            this.#host.nativeElement.style.translate = oldTranslate;
+            return {
+                left: containerRect.left - elRect.left,
+                right: containerRect.right - elRect.right,
+                top: containerRect.top - elRect.top,
+                bottom: containerRect.bottom - elRect.bottom,
+            };
+        }
+        return constraints;
+    }
+    applyTransform() {
+        let x = this.#_x;
+        let y = this.#_y;
+        if (this.#dragBounds) {
+            const elastic = this.moveDragElastic();
+            if (this.#dragBounds.left !== undefined && x < this.#dragBounds.left) {
+                x = this.#dragBounds.left - (this.#dragBounds.left - x) * elastic;
+            }
+            else if (this.#dragBounds.right !== undefined && x > this.#dragBounds.right) {
+                x = this.#dragBounds.right + (x - this.#dragBounds.right) * elastic;
+            }
+            if (this.#dragBounds.top !== undefined && y < this.#dragBounds.top) {
+                y = this.#dragBounds.top - (this.#dragBounds.top - y) * elastic;
+            }
+            else if (this.#dragBounds.bottom !== undefined && y > this.#dragBounds.bottom) {
+                y = this.#dragBounds.bottom + (y - this.#dragBounds.bottom) * elastic;
+            }
+        }
+        this.#host.nativeElement.style.translate = `${x}px ${y}px`;
+    }
+    snapBackIfNeeded() {
+        if (!this.#dragBounds)
+            return;
+        // We base the snap on the current logical _x, _y, calculating the nearest valid position.
+        let targetX = this.#_x;
+        let targetY = this.#_y;
+        if (this.#dragBounds.left !== undefined && targetX < this.#dragBounds.left)
+            targetX = this.#dragBounds.left;
+        if (this.#dragBounds.right !== undefined && targetX > this.#dragBounds.right)
+            targetX = this.#dragBounds.right;
+        if (this.#dragBounds.top !== undefined && targetY < this.#dragBounds.top)
+            targetY = this.#dragBounds.top;
+        if (this.#dragBounds.bottom !== undefined && targetY > this.#dragBounds.bottom)
+            targetY = this.#dragBounds.bottom;
+        if (targetX !== this.#_x || targetY !== this.#_y) {
+            // Find the currently visible coordinates (which include elasticity)
+            let currentVisX = this.#_x;
+            let currentVisY = this.#_y;
+            const elastic = this.moveDragElastic();
+            if (this.#dragBounds.left !== undefined && this.#_x < this.#dragBounds.left) {
+                currentVisX = this.#dragBounds.left - (this.#dragBounds.left - this.#_x) * elastic;
+            }
+            else if (this.#dragBounds.right !== undefined && this.#_x > this.#dragBounds.right) {
+                currentVisX = this.#dragBounds.right + (this.#_x - this.#dragBounds.right) * elastic;
+            }
+            if (this.#dragBounds.top !== undefined && this.#_y < this.#dragBounds.top) {
+                currentVisY = this.#dragBounds.top - (this.#dragBounds.top - this.#_y) * elastic;
+            }
+            else if (this.#dragBounds.bottom !== undefined && this.#_y > this.#dragBounds.bottom) {
+                currentVisY = this.#dragBounds.bottom + (this.#_y - this.#dragBounds.bottom) * elastic;
+            }
+            this.#player = this.#engine.play(this.#host.nativeElement, {
+                x: [currentVisX, targetX],
+                y: [currentVisY, targetY],
+            }, {
+                config: { duration: 300, easing: 'ease', delay: 0, disabled: false },
+                spring: this.moveSpring() ?? { stiffness: 500, damping: 30 },
+                disabled: prefersReducedMotion(this.#documentRef),
+            });
+            this.#_x = targetX;
+            this.#_y = targetY;
+        }
+    }
+    ngOnDestroy() {
+        this.#player?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveDragDirective, isStandalone: true, selector: "[moveDrag]", inputs: { moveDrag: { classPropertyName: "moveDrag", publicName: "moveDrag", isSignal: true, isRequired: false, transformFunction: null }, moveDragConstraints: { classPropertyName: "moveDragConstraints", publicName: "moveDragConstraints", isSignal: true, isRequired: false, transformFunction: null }, moveDragElastic: { classPropertyName: "moveDragElastic", publicName: "moveDragElastic", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveDrag]',
+                    host: {
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerUp($event)',
+                    },
+                }]
+        }], propDecorators: { moveDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDrag", required: false }] }], moveDragConstraints: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDragConstraints", required: false }] }], moveDragElastic: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDragElastic", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveInViewDirective {
+    moveInView = input('none', ...(ngDevMode ? [{ debugName: "moveInView" }] : /* istanbul ignore next */ []));
+    moveInViewMargin = input('0px', ...(ngDevMode ? [{ debugName: "moveInViewMargin" }] : /* istanbul ignore next */ []));
+    moveInViewOnce = input(true, ...(ngDevMode ? [{ debugName: "moveInViewOnce" }] : /* istanbul ignore next */ []));
+    /** CSS selector for the IntersectionObserver root (for inner scrollable containers). */
+    moveInViewRoot = input(null, ...(ngDevMode ? [{ debugName: "moveInViewRoot" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #platformId = inject(PLATFORM_ID);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #player = null;
+    #observer = null;
+    #frames = null;
+    #isAnimated = false;
+    ngOnInit() {
+        if (!isPlatformBrowser(this.#platformId) || this.moveDisabled())
+            return;
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        if (isReduced)
+            return;
+        this.#frames = resolveMoveFrames(this.moveInView(), 'enter');
+        // Apply initial (invisible) state directly to DOM - avoid creating a player
+        applyInitialStyles(this.#host.nativeElement, this.#frames);
+        const rootSelector = this.moveInViewRoot();
+        const rootEl = rootSelector ? this.#documentRef.querySelector(rootSelector) : null;
+        this.#observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting && !this.#isAnimated) {
+                this.#playAnimation();
+                if (this.moveInViewOnce()) {
+                    this.#isAnimated = true;
+                    this.#observer?.disconnect();
+                }
+            }
+            else if (!entry.isIntersecting && !this.moveInViewOnce() && this.#isAnimated) {
+                // Reset to initial state for re-animation
+                this.#player?.cancel();
+                this.#player = null;
+                this.#isAnimated = false;
+                if (this.#frames) {
+                    applyInitialStyles(this.#host.nativeElement, this.#frames);
+                }
+            }
+        }, {
+            root: rootEl,
+            rootMargin: this.moveInViewMargin(),
+            threshold: 0,
+        });
+        this.#observer.observe(this.#host.nativeElement);
+    }
+    #playAnimation() {
+        if (!this.#frames)
+            return;
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay() ?? 0,
+            disabled: false,
+        }, false);
+        // Clear inline styles before animating so WAAPI can take over cleanly
+        clearInitialStyles(this.#host.nativeElement);
+        this.#player = this.#engine.play(this.#host.nativeElement, this.#frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+        this.#isAnimated = true;
+    }
+    ngOnDestroy() {
+        this.#observer?.disconnect();
+        this.#player?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveInViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveInViewDirective, isStandalone: true, selector: "[moveInView]", inputs: { moveInView: { classPropertyName: "moveInView", publicName: "moveInView", isSignal: true, isRequired: false, transformFunction: null }, moveInViewMargin: { classPropertyName: "moveInViewMargin", publicName: "moveInViewMargin", isSignal: true, isRequired: false, transformFunction: null }, moveInViewOnce: { classPropertyName: "moveInViewOnce", publicName: "moveInViewOnce", isSignal: true, isRequired: false, transformFunction: null }, moveInViewRoot: { classPropertyName: "moveInViewRoot", publicName: "moveInViewRoot", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveInViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveInView]',
+                }]
+        }], propDecorators: { moveInView: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveInView", required: false }] }], moveInViewMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveInViewMargin", required: false }] }], moveInViewOnce: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveInViewOnce", required: false }] }], moveInViewRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveInViewRoot", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveTextDirective {
+    moveText = input('fade-up', ...(ngDevMode ? [{ debugName: "moveText" }] : /* istanbul ignore next */ []));
+    moveTextSplit = input('chars', ...(ngDevMode ? [{ debugName: "moveTextSplit" }] : /* istanbul ignore next */ []));
+    moveTextStagger = input(30, ...(ngDevMode ? [{ debugName: "moveTextStagger" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #platformId = inject(PLATFORM_ID);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #players = [];
+    #spans = [];
+    #observer = null;
+    #frames = null;
+    ngOnInit() {
+        if (!isPlatformBrowser(this.#platformId) || this.moveDisabled())
+            return;
+        // Defer to after Angular has completed its first rendering pass and set
+        // the interpolated text content on the host element (same pattern as moveEnter).
+        Promise.resolve().then(() => {
+            this.#splitText();
+            const isReduced = prefersReducedMotion(this.#documentRef);
+            if (isReduced)
+                return;
+            this.#frames = resolveMoveFrames(this.moveText(), 'enter');
+            // Apply initial (invisible) state to each span directly — no player yet
+            this.#spans.forEach((span) => {
+                if (this.#frames) {
+                    applyInitialStyles(span, this.#frames);
+                }
+            });
+            // Create player and animate only when visible
+            this.#observer = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting) {
+                    this.#playAll();
+                    this.#observer?.disconnect();
+                }
+            });
+            this.#observer.observe(this.#host.nativeElement);
+        });
+    }
+    #playAll() {
+        if (!this.#frames)
+            return;
+        const baseDelay = this.moveDelay() ?? 0;
+        const stagger = this.moveTextStagger();
+        this.#spans.forEach((span, index) => {
+            if (!this.#frames)
+                return;
+            const config = resolveMovementConfig(this.#defaults, {
+                duration: this.moveDuration(),
+                easing: this.moveEasing(),
+                delay: baseDelay + index * stagger,
+                disabled: false,
+            }, false);
+            // Clear inline styles so WAAPI can animate from the keyframe starting point
+            clearInitialStyles(span);
+            const player = this.#engine.play(span, this.#frames, {
+                config,
+                spring: this.moveSpring(),
+                disabled: false,
+            });
+            if (player) {
+                this.#players.push(player);
+            }
+        });
+    }
+    #splitText() {
+        const el = this.#host.nativeElement;
+        const text = (el.textContent ?? '').trim();
+        el.innerHTML = '';
+        el.setAttribute('aria-label', text);
+        const byChars = this.moveTextSplit() === 'chars';
+        if (byChars) {
+            // Split character by character, preserving spaces as text nodes
+            [...text].forEach((char) => {
+                if (char === ' ') {
+                    el.appendChild(this.#documentRef.createTextNode(' '));
+                    return;
+                }
+                const span = this.#documentRef.createElement('span');
+                span.setAttribute('aria-hidden', 'true');
+                span.style.display = 'inline-block';
+                span.textContent = char;
+                el.appendChild(span);
+                this.#spans.push(span);
+            });
+        }
+        else {
+            // Split word by word
+            const words = text.split(/\s+/);
+            words.forEach((word, index) => {
+                const span = this.#documentRef.createElement('span');
+                span.setAttribute('aria-hidden', 'true');
+                span.style.display = 'inline-block';
+                span.style.whiteSpace = 'pre';
+                span.textContent = index < words.length - 1 ? word + ' ' : word;
+                el.appendChild(span);
+                this.#spans.push(span);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.#observer?.disconnect();
+        this.#players.forEach((p) => p.cancel());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveTextDirective, isStandalone: true, selector: "[moveText]", inputs: { moveText: { classPropertyName: "moveText", publicName: "moveText", isSignal: true, isRequired: false, transformFunction: null }, moveTextSplit: { classPropertyName: "moveTextSplit", publicName: "moveTextSplit", isSignal: true, isRequired: false, transformFunction: null }, moveTextStagger: { classPropertyName: "moveTextStagger", publicName: "moveTextStagger", isSignal: true, isRequired: false, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveText]',
+                }]
+        }], propDecorators: { moveText: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveText", required: false }] }], moveTextSplit: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTextSplit", required: false }] }], moveTextStagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTextStagger", required: false }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+/**
+ * Directive that enables smooth scrolling on a specific scrollable container.
+ *
+ * Supports both mouse wheel (desktop) and touch scroll (mobile) with
+ * momentum-based inertia after finger lift, similar to Lenis.
+ *
+ * ⚠️  SmoothScrollService is a root singleton. Do NOT use this directive
+ * on multiple elements simultaneously — use it once on the page root or
+ * inject the service directly where needed.
+ *
+ * Usage:
+ *   <div moveSmoothScroll [moveSmoothScrollLerp]="0.08" style="overflow-y: auto; height: 100vh">
+ *     ...content...
+ *   </div>
+ *
+ * Or use the service directly (e.g. on documentElement):
+ *   constructor() {
+ *     inject(SmoothScrollService).init({ lerp: 0.1 });
+ *   }
+ */
+class MoveSmoothScrollDirective {
+    /** Lerp factor passed to SmoothScrollService. Lower = smoother. Range: 0–1. */
+    moveSmoothScrollLerp = input(0.1, ...(ngDevMode ? [{ debugName: "moveSmoothScrollLerp" }] : /* istanbul ignore next */ []));
+    #host = inject((ElementRef));
+    #scroll = inject(SmoothScrollService);
+    #platformId = inject(PLATFORM_ID);
+    ngOnInit() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        this.#scroll.init({
+            lerp: this.moveSmoothScrollLerp(),
+            element: this.#host.nativeElement,
+        });
+    }
+    ngOnDestroy() {
+        this.#scroll.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveSmoothScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveSmoothScrollDirective, isStandalone: true, selector: "[moveSmoothScroll]", inputs: { moveSmoothScrollLerp: { classPropertyName: "moveSmoothScrollLerp", publicName: "moveSmoothScrollLerp", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveSmoothScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveSmoothScroll]',
+                }]
+        }], propDecorators: { moveSmoothScrollLerp: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSmoothScrollLerp", required: false }] }] } });
+
+class MoveFocusDirective {
+    moveWhileFocus = input.required(...(ngDevMode ? [{ debugName: "moveWhileFocus" }] : /* istanbul ignore next */ []));
+    moveDuration = input(undefined, ...(ngDevMode ? [{ debugName: "moveDuration" }] : /* istanbul ignore next */ []));
+    moveEasing = input(undefined, ...(ngDevMode ? [{ debugName: "moveEasing" }] : /* istanbul ignore next */ []));
+    moveDelay = input(undefined, ...(ngDevMode ? [{ debugName: "moveDelay" }] : /* istanbul ignore next */ []));
+    moveDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []));
+    moveSpring = input(undefined, ...(ngDevMode ? [{ debugName: "moveSpring" }] : /* istanbul ignore next */ []));
+    #defaults = inject(MOVEMENT_CONFIG);
+    #documentRef = inject(DOCUMENT);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #currentPlayer = null;
+    #isFocused = false;
+    onFocus() {
+        if (this.#isFocused)
+            return;
+        this.#isFocused = true;
+        this.play(false);
+    }
+    onBlur() {
+        if (!this.#isFocused)
+            return;
+        this.#isFocused = false;
+        this.play(true);
+    }
+    play(reverse) {
+        this.#currentPlayer?.cancel();
+        const isReduced = prefersReducedMotion(this.#documentRef);
+        const config = resolveMovementConfig(this.#defaults, {
+            duration: this.moveDuration(),
+            easing: this.moveEasing(),
+            delay: this.moveDelay(),
+            disabled: this.moveDisabled(),
+        }, isReduced);
+        if (config.disabled)
+            return;
+        let frames = resolveMoveFrames(this.moveWhileFocus(), 'enter');
+        if (reverse) {
+            frames = reverseFrames(frames);
+        }
+        this.#currentPlayer = this.#engine.play(this.#host.nativeElement, frames, {
+            config,
+            spring: this.moveSpring(),
+            disabled: false,
+        });
+    }
+    ngOnDestroy() {
+        this.#currentPlayer?.cancel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveFocusDirective, isStandalone: true, selector: "[moveWhileFocus]", inputs: { moveWhileFocus: { classPropertyName: "moveWhileFocus", publicName: "moveWhileFocus", isSignal: true, isRequired: true, transformFunction: null }, moveDuration: { classPropertyName: "moveDuration", publicName: "moveDuration", isSignal: true, isRequired: false, transformFunction: null }, moveEasing: { classPropertyName: "moveEasing", publicName: "moveEasing", isSignal: true, isRequired: false, transformFunction: null }, moveDelay: { classPropertyName: "moveDelay", publicName: "moveDelay", isSignal: true, isRequired: false, transformFunction: null }, moveDisabled: { classPropertyName: "moveDisabled", publicName: "moveDisabled", isSignal: true, isRequired: false, transformFunction: null }, moveSpring: { classPropertyName: "moveSpring", publicName: "moveSpring", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveWhileFocus]',
+                    host: {
+                        '(focusin)': 'onFocus()',
+                        '(focusout)': 'onBlur()',
+                    },
+                }]
+        }], propDecorators: { moveWhileFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveWhileFocus", required: true }] }], moveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDuration", required: false }] }], moveEasing: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveEasing", required: false }] }], moveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDelay", required: false }] }], moveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveDisabled", required: false }] }], moveSpring: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveSpring", required: false }] }] } });
+
+class MoveParallaxDirective {
+    moveParallax = input(0.2, ...(ngDevMode ? [{ debugName: "moveParallax" }] : /* istanbul ignore next */ []));
+    moveParallaxAxis = input('y', ...(ngDevMode ? [{ debugName: "moveParallaxAxis" }] : /* istanbul ignore next */ []));
+    #documentRef = inject(DOCUMENT);
+    #platformId = inject(PLATFORM_ID);
+    #host = inject((ElementRef));
+    #engine = inject(AnimationEngine);
+    #smoothScroll = inject(SmoothScrollService, { optional: true });
+    #player = null;
+    #observer = null;
+    #isVisible = false;
+    #scrollListener = () => this.#updateProgress();
+    #elHeight = 0;
+    #windowHeight = 0;
+    #totalDistance = 0;
+    #initialAbsoluteTop = 0;
+    constructor() {
+        effect(() => {
+            this.#smoothScroll?.scrollY();
+            if (this.#smoothScroll?.isActive && this.#isVisible) {
+                this.#updateProgress();
+            }
+        });
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const view = this.#documentRef.defaultView;
+        if (!view)
+            return;
+        this.#initAnimation();
+        this.#observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            this.#isVisible = entry.isIntersecting;
+            if (entry.isIntersecting) {
+                if (!this.#smoothScroll?.isActive) {
+                    view.addEventListener('scroll', this.#scrollListener, { passive: true });
+                }
+                this.#updateProgress();
+            }
+            else {
+                view.removeEventListener('scroll', this.#scrollListener);
+            }
+        }, { root: null });
+        this.#observer.observe(this.#host.nativeElement);
+        // Re-initialize animation on resize to update dimensions
+        view.addEventListener('resize', this.#resizeListener, { passive: true });
+    }
+    #resizeListener = () => {
+        this.#initAnimation();
+    };
+    #initAnimation() {
+        const view = this.#documentRef.defaultView;
+        if (!view)
+            return;
+        this.#windowHeight = view.innerHeight;
+        this.#elHeight = this.#host.nativeElement.offsetHeight;
+        this.#totalDistance = this.#windowHeight + this.#elHeight;
+        const scrollY = this.#smoothScroll?.isActive
+            ? this.#smoothScroll.scrollY()
+            : view.scrollY || view.pageYOffset || 0;
+        const rect = this.#host.nativeElement.getBoundingClientRect();
+        this.#initialAbsoluteTop = scrollY + rect.top;
+        const speed = this.moveParallax();
+        const axis = this.moveParallaxAxis();
+        // Total translation distance across the entire scroll intersection
+        const translateDist = this.#totalDistance * speed;
+        const frames = {};
+        if (axis === 'x') {
+            frames.x = [translateDist / 2, -translateDist / 2];
+        }
+        else {
+            frames.y = [translateDist / 2, -translateDist / 2];
+        }
+        this.#player?.cancel();
+        this.#player = this.#engine.play(this.#host.nativeElement, frames, {
+            config: { duration: 1000, delay: 0, easing: 'linear', disabled: false },
+        });
+        this.#player?.pause();
+        if (this.#player) {
+            this.#player.currentTime = 0;
+        }
+    }
+    #updateProgress() {
+        const view = this.#documentRef.defaultView;
+        if (!view || this.#totalDistance === 0)
+            return;
+        const scrollY = this.#smoothScroll?.isActive
+            ? this.#smoothScroll.scrollY()
+            : view.scrollY || view.pageYOffset || 0;
+        // Efficiently calculate the current visual top without triggering layout thrashing
+        // or feedback loops caused by the active CSS transform translating the element.
+        const currentVirtualTop = this.#initialAbsoluteTop - scrollY;
+        // progress is 0 when element top hits window bottom (currentVirtualTop === windowHeight)
+        // progress is 1 when element bottom hits window top (currentVirtualTop === -elHeight)
+        let p = (this.#windowHeight - currentVirtualTop) / this.#totalDistance;
+        p = Math.max(0, Math.min(1, p));
+        if (this.#player) {
+            this.#player.currentTime = p * 1000;
+        }
+    }
+    ngOnDestroy() {
+        this.#player?.cancel();
+        const view = this.#documentRef.defaultView;
+        if (view) {
+            view.removeEventListener('scroll', this.#scrollListener);
+            view.removeEventListener('resize', this.#resizeListener);
+        }
+        this.#observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveParallaxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", type: MoveParallaxDirective, isStandalone: true, selector: "[moveParallax]", inputs: { moveParallax: { classPropertyName: "moveParallax", publicName: "moveParallax", isSignal: true, isRequired: false, transformFunction: null }, moveParallaxAxis: { classPropertyName: "moveParallaxAxis", publicName: "moveParallaxAxis", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["moveParallax"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MoveParallaxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[moveParallax]',
+                    exportAs: 'moveParallax',
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveParallax: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallax", required: false }] }], moveParallaxAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveParallaxAxis", required: false }] }] } });
+
+function provideMovement(config = {}) {
+    return makeEnvironmentProviders([
+        {
+            provide: MOVEMENT_CONFIG,
+            useValue: {
+                ...MOVEMENT_DEFAULTS,
+                ...config,
+            },
+        },
+    ]);
+}
+
+const MOVEMENT_DIRECTIVES = [
+    MoveEnterDirective,
+    MoveLeaveDirective,
+    MoveAnimateDirective,
+    MoveHoverDirective,
+    MoveTapDirective,
+    MoveVariantsDirective,
+    MoveStaggerDirective,
+    MoveLayoutDirective,
+    MoveScrollDirective,
+    MovePresenceDirective,
+    MoveDragDirective,
+    MoveInViewDirective,
+    MoveTextDirective,
+    MoveSmoothScrollDirective,
+    MoveFocusDirective,
+    MoveParallaxDirective,
+    MoveAnimationDirective,
+];
+
+/*
+ * Public API Surface of movement
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimationEngine, MOVEMENT_CONFIG, MOVEMENT_DEFAULTS, MOVEMENT_DIRECTIVES, MOVE_PRESENCE_PARENT, MOVE_PRESETS, MOVE_STAGGER_PARENT, MOVE_VARIANTS_PARENT, MoveAnimateDirective, MoveAnimationDirective, MoveDragDirective, MoveEnterDirective, MoveFocusDirective, MoveHoverDirective, MoveInViewDirective, MoveLayoutDirective, MoveLeaveDirective, MoveParallaxDirective, MovePresenceDirective, MoveScrollDirective, MoveSmoothScrollDirective, MoveStaggerDirective, MoveTapDirective, MoveTextDirective, MoveVariantsDirective, SmoothScrollService, SpringPlayer, WaapiPlayer, provideMovement };
+//# sourceMappingURL=angular-movement.mjs.map