@hanzogui/animations-motion 8.3.0 → 8.3.2

package/dist/cjs/createAnimations.js

@@ -0,0 +1,804 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disableAnimationProps = void 0;
+exports.createAnimations = createAnimations;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const animation_helpers_1 = require("@hanzogui/animation-helpers");
+const use_presence_1 = require("@hanzogui/use-presence");
+const web_1 = require("@hanzogui/web");
+const react_1 = require("motion/react");
+const react_2 = tslib_1.__importStar(require("react"));
+const isServer = typeof window === 'undefined';
+// SSR-safe wrapper: framer-motion's useAnimate imports its own React copy in
+// Vite SSR bundles which causes "Invalid hook call" errors. during SSR we
+// don't need animations so we return a no-op scope/animate pair.
+function useAnimateSSRSafe() {
+    if (isServer) {
+        return [(0, react_2.useRef)(null), () => { }];
+    }
+    return (0, react_1.useAnimate)();
+}
+const MotionValueStrategy = new WeakMap();
+// pending setValue onFinish callbacks, keyed by motion value. setValue stores
+// the callback here; the change handler in the animated component's useEffect
+// consumes it by chaining to the DOM-level animate() controls so onFinish
+// fires when the *visible* animation actually completes.
+const PendingMotionOnFinish = new WeakMap();
+function settlePendingMotionOnFinish(mv, controls) {
+    const onFinish = PendingMotionOnFinish.get(mv);
+    if (!onFinish)
+        return;
+    PendingMotionOnFinish.delete(mv);
+    // chain to the DOM animation's completion. settle on both resolve and
+    // reject — a rejection means the animation was cancelled by a later
+    // setValue, and the caller still needs a completion signal. use the
+    // real Promise interface (.then().catch()) because framer-motion types
+    // the .then() callbacks as VoidFunction with no error arg.
+    controls.then(() => onFinish()).catch(() => onFinish());
+}
+function createAnimations(animations) {
+    let isHydratingGlobal;
+    const hydratingComponents = new Set();
+    return {
+        View: MotionView,
+        Text: MotionText,
+        isReactNative: false,
+        inputStyle: 'css',
+        outputStyle: 'inline',
+        avoidReRenders: true,
+        animations,
+        usePresence: use_presence_1.usePresence,
+        ResetPresence: use_presence_1.ResetPresence,
+        onMount() {
+            isHydratingGlobal = false;
+            hydratingComponents.forEach((cb) => cb());
+        },
+        useAnimations: (animationProps) => {
+            if (isHydratingGlobal === undefined && !(0, web_1.getConfig)().settings.disableSSR) {
+                isHydratingGlobal = true;
+            }
+            const { props, style, componentState, stateRef, useStyleEmitter, presence, styleProps, } = animationProps;
+            const animationKey = Array.isArray(props.transition)
+                ? props.transition[0]
+                : props.transition;
+            const isComponentHydrating = componentState.unmounted === true;
+            const isMounting = componentState.unmounted === 'should-enter';
+            const isEntering = !!componentState.unmounted;
+            const isExiting = presence?.[0] === false;
+            const sendExitComplete = presence?.[1];
+            // single consolidated ref with lazy init
+            const refs = (0, react_2.useRef)(null);
+            if (!refs.current) {
+                refs.current = {
+                    isFirstRender: true,
+                    lastDoAnimate: null,
+                    lastDontAnimate: null,
+                    controls: null,
+                    lastAnimateAt: 0,
+                    disposed: false,
+                    wasExiting: false,
+                    isExiting: false,
+                    sendExitComplete: undefined,
+                    animationState: 'default',
+                    frozenExitTarget: null,
+                    exitCompleteScheduled: false,
+                    wasEntering: false,
+                    wasDisabled: false,
+                    wasNoClass: !!styleProps.noClass,
+                };
+            }
+            // track entering state transitions
+            const justFinishedEntering = refs.current.wasEntering && !isEntering;
+            (0, react_2.useEffect)(() => {
+                refs.current.wasEntering = isEntering;
+            });
+            // determine animation state for enter/exit transitions
+            const animationState = isExiting
+                ? 'exit'
+                : isMounting || justFinishedEntering
+                    ? 'enter'
+                    : 'default';
+            // disable animation during hydration and mounting (prevents "flying across the page")
+            const disableAnimation = isComponentHydrating || isMounting || !animationKey;
+            const [scope, animate] = useAnimateSSRSafe();
+            // sync ref values for reliable access from callbacks
+            refs.current.isExiting = isExiting;
+            refs.current.sendExitComplete = sendExitComplete;
+            refs.current.animationState = animationState;
+            // detect transition into exiting state
+            const justStartedExiting = isExiting && !refs.current.wasExiting;
+            const justStoppedExiting = !isExiting && refs.current.wasExiting;
+            // freeze exit animation target so direction changes don't reverse mid-exit
+            if (justStartedExiting || justStoppedExiting) {
+                refs.current.frozenExitTarget = null;
+                refs.current.exitCompleteScheduled = false;
+            }
+            // track previous exiting state
+            (0, react_2.useEffect)(() => {
+                refs.current.wasExiting = isExiting;
+            });
+            const { dontAnimate = {}, doAnimate, animationOptions, } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+            const [firstRenderStyle] = (0, react_2.useState)(style);
+            // avoid first render returning wrong styles - always render all, after that we can just mutate
+            if (refs.current.isFirstRender) {
+                refs.current.lastDontAnimate = firstRenderStyle;
+            }
+            const [isHydrating, setIsHydrating] = (0, react_2.useState)(isHydratingGlobal);
+            (0, react_2.useLayoutEffect)(() => {
+                if (isHydratingGlobal) {
+                    hydratingComponents.add(() => {
+                        setIsHydrating(false);
+                    });
+                }
+                return () => {
+                    refs.current.disposed = true;
+                };
+            }, []);
+            const flushAnimation = ({ doAnimate: doAnimateRaw = {}, animationOptions: passedOptions = {}, dontAnimate, }) => {
+                // track whether THIS flush starts a new animation (vs using stale controls)
+                let startedControls = null;
+                // read current state from refs (closure variables can be stale)
+                const isCurrentlyExiting = refs.current.isExiting;
+                const currentSendExitComplete = refs.current.sendExitComplete;
+                // freeze exit target: once the first exit animation starts, subsequent
+                // renders (e.g. direction change) should not reverse the exit animation.
+                let doAnimate = doAnimateRaw;
+                if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+                    doAnimate = refs.current.frozenExitTarget;
+                }
+                // only recompute animation options for exit animations to avoid stale state.
+                const animationOptions = isCurrentlyExiting && currentSendExitComplete
+                    ? getAnimationOptions(props.transition ?? null, 'exit')
+                    : passedOptions;
+                try {
+                    const node = stateRef.current.host;
+                    // on first render, reset stale animation refs - they can persist if component
+                    // instance is reused (e.g. AnimatePresence keepChildrenMounted)
+                    if (refs.current.isFirstRender) {
+                        refs.current.lastDontAnimate = null;
+                        refs.current.lastDoAnimate = null;
+                    }
+                    if (process.env.NODE_ENV === 'development') {
+                        if (props['debug'] && props['debug'] !== 'profile') {
+                            console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate), null, 2)})`);
+                            console.info({
+                                props,
+                                componentState,
+                                doAnimate,
+                                dontAnimate,
+                                animationOptions,
+                                animationProps,
+                                lastDoAnimate: { ...refs.current.lastDoAnimate },
+                                lastDontAnimate: { ...refs.current.lastDontAnimate },
+                                isExiting,
+                                style,
+                                node,
+                            });
+                            console.groupCollapsed(`trace >`);
+                            console.trace();
+                            console.groupEnd();
+                            console.groupEnd();
+                        }
+                    }
+                    if (!(node instanceof HTMLElement)) {
+                        return;
+                    }
+                    // handle case where dontAnimate changes
+                    const prevDont = refs.current.lastDontAnimate;
+                    if (dontAnimate) {
+                        if (prevDont) {
+                            removeRemovedStyles(prevDont, dontAnimate, node, doAnimate);
+                            const changed = getDiff(prevDont, dontAnimate);
+                            if (changed) {
+                                Object.assign(node.style, changed);
+                            }
+                        }
+                        else {
+                            Object.assign(node.style, dontAnimate);
+                        }
+                    }
+                    if (doAnimate) {
+                        // when a property moves from dontAnimate to doAnimate, preserve
+                        // the current inline style value so WAAPI starts from the right place
+                        if (prevDont) {
+                            for (const key in prevDont) {
+                                if (key in doAnimate) {
+                                    node.style[key] = prevDont[key];
+                                    if (refs.current.lastDoAnimate) {
+                                        refs.current.lastDoAnimate[key] = prevDont[key];
+                                    }
+                                }
+                            }
+                        }
+                        const lastAnimated = refs.current.lastDoAnimate;
+                        if (lastAnimated) {
+                            removeRemovedStyles(lastAnimated, doAnimate, node, dontAnimate);
+                        }
+                        const diff = getDiff(refs.current.lastDoAnimate, doAnimate);
+                        if (diff) {
+                            // capture frozen exit target on first exit diff
+                            if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+                                refs.current.frozenExitTarget = { ...doAnimate };
+                            }
+                            // capture mid-flight values so we can provide explicit [from, to]
+                            // keyframes to WAAPI, ensuring smooth interpolation from the
+                            // current visual state.
+                            //
+                            // only stop() during exit — for non-exit cases, WAAPI
+                            // naturally replaces only conflicting property animations,
+                            // letting non-conflicting ones (like an in-flight enter
+                            // opacity animation) continue to completion.
+                            const isPopperPosition = node.hasAttribute('data-popper-animate-position');
+                            let midFlightValues = null;
+                            if (refs.current.controls) {
+                                try {
+                                    const computed = getComputedStyle(node);
+                                    midFlightValues = {};
+                                    for (const key in diff) {
+                                        const val = computed[key];
+                                        if (val !== undefined && val !== '') {
+                                            midFlightValues[key] = val;
+                                        }
+                                    }
+                                }
+                                catch {
+                                    // getComputedStyle can fail on detached nodes
+                                }
+                                if (isCurrentlyExiting) {
+                                    refs.current.controls.stop();
+                                }
+                                // write mid-flight values to inline so the 1-frame gap
+                                // (while motion resolves keyframes) shows the correct
+                                // position instead of stale inline styles
+                                if (midFlightValues) {
+                                    for (const key in midFlightValues) {
+                                        ;
+                                        node.style[key] = midFlightValues[key];
+                                    }
+                                }
+                                // for popper position elements, cancel WAAPI animations
+                                // directly so motion.dev's internal stop() sees "idle" state
+                                // and skips commitStyles. without this, commitStyles writes
+                                // a mid-flight transform that's visible for 1 frame before
+                                // the new animation starts, causing a flash toward (0,0).
+                                if (isPopperPosition) {
+                                    const anims = node.getAnimations();
+                                    for (const anim of anims) {
+                                        anim.cancel();
+                                    }
+                                }
+                            }
+                            const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate);
+                            // provide explicit [from, to] keyframe for transforms during
+                            // mid-flight interruption so motion starts from the right place —
+                            // but ONLY when we've torn down the previous animation (popper
+                            // cancel above, or exit stop()). otherwise the prior WAAPI
+                            // transform animation is still running, and pinning a one-frame-
+                            // stale `from` matrix makes each new flush re-start the animation
+                            // from that stale base instead of continuing from the live value.
+                            // for a plain transition element being interrupted repeatedly
+                            // (the hanzogui.dev logo dot swept back and forth — worse the more
+                            // concurrent React work the page is doing, since each render flushes
+                            // again) that reads as a constant stutter/reset instead of a smooth
+                            // glide. in the un-torn-down case motion's resolver already
+                            // interpolates from the live value, so leave it alone. (regressed in
+                            // 9485bcef0e when this keyframe was ungated; covered by
+                            // LogoDotInterrupt.animated.test.tsx)
+                            //
+                            // note: an earlier version also keyframed entering-presence-child
+                            // interrupts, but enter no longer tears down (see the stop() comment
+                            // above — WAAPI replaces conflicting props per-property), so those
+                            // now rely on the same live-value interpolation. covered by
+                            // PopoverClickDuringEnter / AnimatePresenceEnterExit.
+                            if ((isPopperPosition || isCurrentlyExiting) &&
+                                midFlightValues?.transform &&
+                                fixedDiff.transform) {
+                                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
+                            }
+                            startedControls = animate(scope.current, fixedDiff, animationOptions);
+                            refs.current.controls = startedControls;
+                            refs.current.lastAnimateAt = Date.now();
+                        }
+                    }
+                    refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+                    refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+                }
+                finally {
+                    // exit completion: notify AnimatePresence when exit animation finishes
+                    if (isCurrentlyExiting && currentSendExitComplete) {
+                        if (startedControls) {
+                            // new animation started — attach completion handler
+                            refs.current.exitCompleteScheduled = true;
+                            startedControls.finished
+                                .then(() => {
+                                // guard: only complete if still exiting (prevents stale promise
+                                // from calling sendExitComplete after a re-entry cancels the exit)
+                                if (refs.current.isExiting) {
+                                    currentSendExitComplete();
+                                }
+                            })
+                                .catch(() => {
+                                if (refs.current.isExiting) {
+                                    currentSendExitComplete();
+                                }
+                            });
+                        }
+                        else if (!refs.current.exitCompleteScheduled) {
+                            // no animation started AND none previously scheduled (e.g. diff=null
+                            // on re-render mid-exit because frozenExitTarget matches lastDoAnimate)
+                            // — complete immediately only if we've never started an exit animation
+                            currentSendExitComplete();
+                        }
+                        // else: exit animation already scheduled via a previous flush,
+                        // its .finished promise will call sendExitComplete when done
+                    }
+                }
+            };
+            useStyleEmitter?.((nextStyle, effectiveTransition) => {
+                const animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+                flushAnimation(animationProps);
+            });
+            (0, web_1.useIsomorphicLayoutEffect)(() => {
+                if (refs.current.isFirstRender) {
+                    refs.current.isFirstRender = false;
+                    refs.current.wasDisabled = disableAnimation;
+                    // during hydration, skip inline style writes entirely — SSR CSS
+                    // already has the correct values. writing them again as inline
+                    // styles triggers browser style recalc that causes visible font
+                    // flashes (fontWeight, fontSize, letterSpacing, lineHeight).
+                    // we only need to track refs for future animation diffing.
+                    if (isHydrating) {
+                        if (doAnimate && Object.keys(doAnimate).length > 0) {
+                            refs.current.lastDoAnimate = { ...doAnimate };
+                        }
+                        else {
+                            refs.current.lastDoAnimate = dontAnimate ? { ...dontAnimate } : {};
+                        }
+                        refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+                        refs.current.lastAnimateAt = Date.now();
+                        return;
+                    }
+                    // after hydration, use simpler logic
+                    refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+                    refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+                    return;
+                }
+                // when animations first turn on after the mount/hydration handoff, the
+                // element is already at its resting position (SSR atomic class, or the
+                // dontAnimate inline styles). animating now would spring from the lost
+                // "from" value — which for a transform reads as 0 and flashes the
+                // element across the screen (e.g. progress bar flashing full, #4011).
+                // jump straight to the resolved styles instead, so it renders at the
+                // right place with no enter animation. only real changes after this
+                // animate. components with an explicit enter animation still animate.
+                const justEnabled = refs.current.wasDisabled && !disableAnimation;
+                refs.current.wasDisabled = disableAnimation;
+                // SSR hydration handoff: styleProps.noClass flips false -> true on the
+                // render where the core strips the SSR atomic classes and moves every
+                // style inline (outputStyle: 'inline'). the style delta is huge but the
+                // visual state is unchanged — animating it would spring every property
+                // from the stripped (zeroed) computed values, visibly collapsing and
+                // re-growing SSR-painted elements right after load. jump instead: the
+                // inline writes below run pre-paint, so the strip is never visible.
+                const justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
+                refs.current.wasNoClass = !!styleProps.noClass;
+                if ((justEnabled || justStrippedClasses) && animationState !== 'enter') {
+                    const node = stateRef.current.host;
+                    if (node instanceof HTMLElement) {
+                        if (dontAnimate)
+                            Object.assign(node.style, dontAnimate);
+                        if (doAnimate)
+                            Object.assign(node.style, doAnimate);
+                    }
+                    refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+                    refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+                    return;
+                }
+                flushAnimation({
+                    doAnimate,
+                    dontAnimate,
+                    animationOptions,
+                });
+            }, [style, isExiting, disableAnimation, styleProps.noClass]);
+            if (process.env.NODE_ENV === 'development') {
+                if (props['debug'] && props['debug'] !== 'profile') {
+                    console.groupCollapsed(`[motion] render`);
+                    console.info({
+                        style,
+                        doAnimate,
+                        dontAnimate,
+                        scope,
+                        animationOptions,
+                        isExiting,
+                        isFirstRender: refs.current.isFirstRender,
+                        animationProps,
+                    });
+                    console.groupEnd();
+                }
+            }
+            return {
+                style: firstRenderStyle,
+                ref: scope,
+                render: 'div',
+            };
+        },
+        useAnimatedNumber(initial) {
+            const motionValue = (0, react_1.useMotionValue)(initial);
+            return react_2.default.useMemo(() => ({
+                getInstance() {
+                    return motionValue;
+                },
+                getValue() {
+                    return motionValue.get();
+                },
+                setValue(next, config = { type: 'spring' }, onFinish) {
+                    if (config.type === 'direct') {
+                        MotionValueStrategy.set(motionValue, { type: 'direct' });
+                        motionValue.set(next);
+                        onFinish?.();
+                        return;
+                    }
+                    MotionValueStrategy.set(motionValue, config);
+                    // we intentionally DO NOT animate the motion value itself here
+                    // (via framer-motion's imperative animate(motionValue, next)).
+                    // doing so drives the JS value over time, which fires a 'change'
+                    // event per frame, and each change event kicks off a new DOM
+                    // animate(node, ...) that cancels the previous one — the DOM
+                    // never reaches the target (double-animation stall).
+                    //
+                    // instead we jump the motion value to `next` synchronously. the
+                    // animated component's change handler receives a single change
+                    // event, computes the final webStyle, and drives the visible
+                    // animation via DOM animate(node, webStyle, springConfig). that
+                    // DOM animation is the real timing source.
+                    //
+                    // to make `onFinish` resolve when the VISIBLE animation finishes
+                    // (not synchronously on the change event), we stash it in
+                    // PendingMotionOnFinish here and the change handler chains it to
+                    // the DOM animate() controls.
+                    if (onFinish) {
+                        // if a previous setValue is still pending on this motion value,
+                        // fire it now — the new setValue will cancel the prior DOM
+                        // animation, and the caller is still owed a completion signal.
+                        const prior = PendingMotionOnFinish.get(motionValue);
+                        if (prior) {
+                            PendingMotionOnFinish.delete(motionValue);
+                            prior();
+                        }
+                        PendingMotionOnFinish.set(motionValue, onFinish);
+                    }
+                    motionValue.set(next);
+                },
+                stop() {
+                    motionValue.stop();
+                },
+            }), [motionValue]);
+        },
+        useAnimatedNumberReaction({ value }, onValue) {
+            const instance = value.getInstance();
+            (0, react_1.useMotionValueEvent)(instance, 'change', onValue);
+        },
+        useAnimatedNumberStyle(val, getStyleProp) {
+            const motionValue = val.getInstance();
+            const getStyleRef = (0, react_2.useRef)(getStyleProp);
+            // we need to change useAnimatedNumberStyle to have dep args to be concurrent safe
+            getStyleRef.current = getStyleProp;
+            return (0, react_2.useMemo)(() => {
+                return {
+                    getStyle: (cur) => {
+                        return getStyleRef.current(cur);
+                    },
+                    motionValue,
+                };
+            }, []);
+        },
+        useAnimatedNumbersStyle(vals, getStyleProp) {
+            const motionValues = vals.map((v) => v.getInstance());
+            const getStyleRef = (0, react_2.useRef)(getStyleProp);
+            getStyleRef.current = getStyleProp;
+            return (0, react_2.useMemo)(() => {
+                return {
+                    getStyle: (...currentValues) => getStyleRef.current(...currentValues),
+                    motionValues,
+                };
+            }, []);
+        },
+    };
+    function getMotionAnimatedProps(props, style, disable, animationState = 'default', transitionOverride) {
+        if (disable) {
+            return {
+                dontAnimate: style,
+            };
+        }
+        const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
+        let dontAnimate;
+        let doAnimate;
+        const animateOnly = props.animateOnly;
+        for (const key in style) {
+            const value = style[key];
+            if (exports.disableAnimationProps.has(key) || (animateOnly && !animateOnly.includes(key))) {
+                dontAnimate || (dontAnimate = {});
+                dontAnimate[key] = value;
+            }
+            else {
+                doAnimate || (doAnimate = {});
+                doAnimate[key] = value;
+            }
+        }
+        return {
+            dontAnimate,
+            doAnimate,
+            animationOptions,
+        };
+    }
+    function getAnimationOptions(transitionProp, animationState = 'default') {
+        const normalized = (0, animation_helpers_1.normalizeTransition)(transitionProp);
+        let effectiveKey = (0, animation_helpers_1.getEffectiveAnimation)(normalized, animationState);
+        // fallback: if we have enter/exit defined but state is 'default' and no default key,
+        // use enter timing as fallback to avoid empty animation options
+        if (!effectiveKey && animationState === 'default') {
+            effectiveKey = normalized.enter || normalized.exit || null;
+        }
+        const globalConfigOverride = normalized.config
+            ? { ...normalized.config }
+            : undefined;
+        if (!effectiveKey &&
+            Object.keys(normalized.properties).length === 0 &&
+            !globalConfigOverride) {
+            return {};
+        }
+        const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+        const delay = normalized.delay;
+        // framer motion's animate() expects default config at the TOP LEVEL
+        const result = {};
+        if (defaultConfig) {
+            Object.assign(result, defaultConfig);
+        }
+        if (globalConfigOverride) {
+            Object.assign(result, globalConfigOverride);
+            if (result.type === undefined &&
+                result.duration !== undefined &&
+                result.damping === undefined &&
+                result.stiffness === undefined &&
+                result.mass === undefined) {
+                result.type = 'tween';
+            }
+        }
+        if (delay) {
+            result.delay = delay;
+        }
+        if (defaultConfig || globalConfigOverride || delay) {
+            result.default = {
+                ...defaultConfig,
+                ...globalConfigOverride,
+                ...(delay ? { delay } : null),
+            };
+        }
+        for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
+            if (typeof animationNameOrConfig === 'string') {
+                result[propName] = withInferredType(animations[animationNameOrConfig]);
+            }
+            else if (animationNameOrConfig && typeof animationNameOrConfig === 'object') {
+                const baseConfig = animationNameOrConfig.type
+                    ? withInferredType(animations[animationNameOrConfig.type])
+                    : defaultConfig;
+                result[propName] = {
+                    ...baseConfig,
+                    ...animationNameOrConfig,
+                };
+            }
+        }
+        // we standardize to ms across drivers, motion expects s
+        convertMsToS(result);
+        convertMsToS(result.default);
+        for (const key in result) {
+            if (key !== 'default' && typeof result[key] === 'object') {
+                convertMsToS(result[key]);
+            }
+        }
+        return result;
+    }
+}
+function withInferredType(config) {
+    if (!config) {
+        return { type: 'spring' };
+    }
+    const isTimingBased = config.duration !== undefined &&
+        config.damping === undefined &&
+        config.stiffness === undefined &&
+        config.mass === undefined;
+    return { type: isTimingBased ? 'tween' : 'spring', ...config };
+}
+function convertMsToS(config) {
+    if (!config)
+        return;
+    if (typeof config.delay === 'number')
+        config.delay = config.delay / 1000;
+    if (typeof config.duration === 'number') {
+        const isTimingBased = config.type === 'tween' ||
+            (config.type === undefined &&
+                config.damping === undefined &&
+                config.stiffness === undefined &&
+                config.mass === undefined);
+        if (isTimingBased) {
+            config.duration = config.duration / 1000;
+        }
+    }
+}
+function removeRemovedStyles(prev, next, node, dontClearIfIn) {
+    for (const key in prev) {
+        if (!(key in next)) {
+            if (dontClearIfIn && key in dontClearIfIn) {
+                continue;
+            }
+            node.style[key] = '';
+        }
+    }
+}
+// truly non-animatable CSS properties (discrete, keyword-based, no interpolation)
+// properties like margin, maxHeight, zIndex, etc are animatable and intentionally excluded
+exports.disableAnimationProps = new Set([
+    'alignContent',
+    'alignItems',
+    'boxSizing',
+    'contain',
+    'containerType',
+    'display',
+    'flexBasis',
+    'flexDirection',
+    'fontFamily',
+    'justifyContent',
+    'overflow',
+    'overflowX',
+    'overflowY',
+    'pointerEvents',
+    'position',
+    'textWrap',
+    'userSelect',
+]);
+const MotionView = createMotionView('div');
+const MotionText = createMotionView('span');
+function createMotionView(defaultTag) {
+    const isText = defaultTag === 'span';
+    const Component = (0, react_2.forwardRef)((propsIn, ref) => {
+        const { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn;
+        const [scope, animate] = useAnimateSSRSafe();
+        const hostRef = (0, react_2.useRef)(null);
+        const composedRefs = (0, web_1.useComposedRefs)(forwardedRef, ref, hostRef, scope);
+        const stateRef = (0, react_2.useRef)(null);
+        if (!stateRef.current) {
+            stateRef.current = {
+                get host() {
+                    return hostRef.current;
+                },
+            };
+        }
+        const [_, state] = (0, web_1.useThemeWithState)({});
+        const styles = Array.isArray(style) ? style : [style];
+        const [animatedStyle, nonAnimatedStyles] = (() => {
+            let animatedStyle;
+            const nonAnimatedStyles = [];
+            for (const style of styles) {
+                if (style.getStyle) {
+                    animatedStyle = style;
+                }
+                else {
+                    nonAnimatedStyles.push(style);
+                }
+            }
+            return [animatedStyle, nonAnimatedStyles];
+        })();
+        function getProps(props) {
+            const out = (0, web_1.getSplitStyles)(props, isText ? web_1.Text.staticConfig : web_1.View.staticConfig, state?.theme, state?.name, {
+                unmounted: false,
+            }, {
+                isAnimated: false,
+                noClass: true,
+                resolveValues: 'auto',
+            });
+            if (!out) {
+                return {};
+            }
+            if (out.viewProps.style) {
+                (0, web_1.fixStyles)(out.viewProps.style);
+                (0, web_1.styleToCSS)(out.viewProps.style);
+            }
+            return out.viewProps;
+        }
+        const props = getProps({ ...propsRest, style: nonAnimatedStyles });
+        const Element = render || 'div';
+        const transformedProps = web_1.hooks.usePropsTransform?.(render, props, stateRef, false);
+        (0, react_2.useEffect)(() => {
+            if (!animatedStyle)
+                return;
+            // multi-value path: subscribe to all motion values
+            if (animatedStyle.motionValues) {
+                const mvs = animatedStyle.motionValues;
+                const unsubs = mvs.map((mv) => mv.on('change', () => {
+                    const currentValues = mvs.map((v) => v.get());
+                    const nextStyle = animatedStyle.getStyle(...currentValues);
+                    const animationConfig = MotionValueStrategy.get(mv);
+                    const node = hostRef.current;
+                    const webStyle = getProps({ style: nextStyle }).style;
+                    if (webStyle && node instanceof HTMLElement) {
+                        const motionAnimationConfig = animationConfig?.type === 'timing'
+                            ? { type: 'tween', duration: (animationConfig?.duration || 0) / 1000 }
+                            : animationConfig?.type === 'direct'
+                                ? { type: 'tween', duration: 0 }
+                                : { type: 'spring', ...animationConfig };
+                        const controls = animate(node, webStyle, motionAnimationConfig);
+                        settlePendingMotionOnFinish(mv, controls);
+                    }
+                }));
+                return () => unsubs.forEach((fn) => fn());
+            }
+            // single-value path
+            if (!animatedStyle.motionValue)
+                return;
+            return animatedStyle.motionValue.on('change', (value) => {
+                const nextStyle = animatedStyle.getStyle(value);
+                const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
+                const node = hostRef.current;
+                const webStyle = getProps({ style: nextStyle }).style;
+                if (webStyle && node instanceof HTMLElement) {
+                    const motionAnimationConfig = animationConfig?.type === 'timing'
+                        ? {
+                            type: 'tween',
+                            duration: (animationConfig?.duration || 0) / 1000,
+                        }
+                        : animationConfig?.type === 'direct'
+                            ? { type: 'tween', duration: 0 }
+                            : {
+                                type: 'spring',
+                                ...animationConfig,
+                            };
+                    const controls = animate(node, webStyle, motionAnimationConfig);
+                    settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
+                }
+            });
+        }, [animatedStyle]);
+        return (0, jsx_runtime_1.jsx)(Element, { ...transformedProps, ref: composedRefs });
+    });
+    Component['acceptRenderProp'] = true;
+    return Component;
+}
+function getDiff(previous, next) {
+    if (!previous) {
+        return next;
+    }
+    let diff = null;
+    for (const key in next) {
+        if (next[key] !== previous[key]) {
+            diff || (diff = {});
+            diff[key] = next[key];
+        }
+    }
+    return diff;
+}
+// motion.dev can't animate to "transparent" - convert it to rgba
+// try to extract RGB from previous or next value for smooth color transitions
+function fixTransparentColors(diff, previous, next) {
+    let result = diff;
+    for (const key in diff) {
+        if (diff[key] === 'transparent') {
+            let fixed = 'rgba(0, 0, 0, 0)';
+            const candidates = [previous?.[key], next?.[key]];
+            for (const candidate of candidates) {
+                if (typeof candidate === 'string' && candidate !== 'transparent') {
+                    const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+                    if (rgbaMatch) {
+                        fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+                        break;
+                    }
+                }
+            }
+            if (result === diff) {
+                result = { ...diff };
+            }
+            result[key] = fixed;
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=createAnimations.js.map