@hanzogui/animations-reanimated 8.3.0 → 8.3.2

package/dist/cjs/createAnimations.js

@@ -0,0 +1,1160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 core_1 = require("@hanzogui/core");
+const use_presence_1 = require("@hanzogui/use-presence");
+const normalize_colors_1 = tslib_1.__importDefault(require("@react-native/normalize-colors"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+// =============================================================================
+// ESM/CJS compatibility
+// =============================================================================
+/**
+ * Handle ESM/CJS module interop for react-native-reanimated
+ * @see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754
+ */
+const getDefaultExport = (module) => {
+    const mod = module;
+    if (mod.__esModule || mod[Symbol.toStringTag] === 'Module') {
+        return mod.default || mod;
+    }
+    return mod;
+};
+const Animated = getDefaultExport(react_native_reanimated_1.default);
+const silenceAnimatedComponentDevCheck = (style) => {
+    if (process.env.NODE_ENV !== 'development' ||
+        core_1.isWeb ||
+        !style ||
+        typeof style !== 'object') {
+        return;
+    }
+    // react fabric's dev performance logger diffs component props and reads the
+    // reanimated guard getter even when the style is on an animated component.
+    Object.defineProperty(style, '_requiresAnimatedComponent', {
+        configurable: true,
+        enumerable: false,
+        value: true,
+    });
+};
+// =============================================================================
+// Utility Functions
+// =============================================================================
+/**
+ * Resolve dynamic theme values (e.g., `{dynamic: {dark: "value", light: "value"}}`)
+ */
+const resolveDynamicValue = (value, isDark) => {
+    if (value !== null &&
+        typeof value === 'object' &&
+        'dynamic' in value &&
+        typeof value.dynamic === 'object') {
+        const dynamic = value.dynamic;
+        return isDark ? dynamic.dark : dynamic.light;
+    }
+    return value;
+};
+const updateMapperState = core_1.isWeb
+    ? (state, emitted) => {
+        state.value.emitted = emitted;
+    }
+    : (state, emitted) => {
+        'worklet';
+        if (!globalThis._WORKLET)
+            return;
+        state.modify((current) => {
+            current.emitted = emitted;
+            return current;
+        }, false);
+    };
+const cloneAnimationValue = (value) => {
+    if (Array.isArray(value)) {
+        return value.map(cloneAnimationValue);
+    }
+    if (value && typeof value === 'object') {
+        const next = {};
+        for (const key in value) {
+            next[key] = cloneAnimationValue(value[key]);
+        }
+        return next;
+    }
+    return value;
+};
+const cloneStyleRecord = (style) => {
+    const next = {};
+    for (const key in style) {
+        next[key] = cloneAnimationValue(style[key]);
+    }
+    return next;
+};
+const cloneTransitionConfig = (config) => {
+    return cloneAnimationValue(config);
+};
+const getAnimatedTransforms = (value) => {
+    if (!Array.isArray(value))
+        return [];
+    return value.filter((item) => item !== null && typeof item === 'object' && !Array.isArray(item));
+};
+const getRemovedAnimatedKeys = (current, previous) => {
+    const removedKeys = {};
+    for (const key of previous) {
+        if (!current.has(key))
+            removedKeys[key] = true;
+    }
+    return removedKeys;
+};
+// implicit start values for style keys that were never painted (e.g. a key
+// introduced by exitStyle with no base value). most numerics default to 0.
+const getImplicitDefault = (key, targetValue) => {
+    'worklet';
+    const value = key === 'opacity' || key === 'scale' || key === 'scaleX' || key === 'scaleY' ? 1 : 0;
+    if (typeof targetValue !== 'string')
+        return value;
+    // reanimated derives a string animation's suffix from its start value. keep
+    // units on implicit starts so fresh `50%` and `90deg` keys interpolate.
+    let suffixIndex = 0;
+    while (suffixIndex < targetValue.length) {
+        const character = targetValue[suffixIndex];
+        const code = character.charCodeAt(0);
+        if ((code >= 48 && code <= 57) ||
+            character === '.' ||
+            character === '-' ||
+            character === '+') {
+            suffixIndex++;
+        }
+        else {
+            break;
+        }
+    }
+    return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
+};
+const COLOR_STYLE_KEYS = {
+    backgroundColor: true,
+    borderColor: true,
+    borderLeftColor: true,
+    borderRightColor: true,
+    borderTopColor: true,
+    borderBottomColor: true,
+    color: true,
+};
+// reanimated can pass either its rgba output or a processed numeric color back
+// as animation history. snapshot targets are normalized on the JS side below;
+// this worklet conversion exists only to validate that in-flight history.
+const toReanimatedColor = (value) => {
+    'worklet';
+    if (typeof value === 'number') {
+        const color = value >>> 0;
+        const alpha = ((color >>> 24) & 255) / 255;
+        const red = (color >>> 16) & 255;
+        const green = (color >>> 8) & 255;
+        const blue = color & 255;
+        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    }
+    if (typeof value !== 'string')
+        return value;
+    const trimmed = value.trim();
+    if (trimmed === 'transparent')
+        return 'rgba(0, 0, 0, 0)';
+    return trimmed;
+};
+const isReanimatedColorHistory = (value) => {
+    'worklet';
+    const normalized = toReanimatedColor(value);
+    return typeof normalized === 'string' && normalized.startsWith('rgba(');
+};
+const normalizeAnimationColor = (value) => {
+    if (typeof value === 'number') {
+        return toReanimatedColor(value);
+    }
+    if (typeof value !== 'string')
+        return;
+    const color = (0, normalize_colors_1.default)(value);
+    if (color == null)
+        return;
+    const red = Math.round((color & 0xff000000) >>> 24);
+    const green = Math.round((color & 0x00ff0000) >>> 16);
+    const blue = Math.round((color & 0x0000ff00) >>> 8);
+    const alpha = (color & 0x000000ff) / 255;
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
+    const snapshotAnimated = {};
+    const snapshotStatics = cloneStyleRecord(statics);
+    for (const key in snapshotStatics) {
+        if (!COLOR_STYLE_KEYS[key])
+            continue;
+        const normalized = normalizeAnimationColor(snapshotStatics[key]);
+        if (normalized !== undefined)
+            snapshotStatics[key] = normalized;
+    }
+    for (const key in animated) {
+        if (key === 'transform')
+            continue;
+        const value = animated[key];
+        if (COLOR_STYLE_KEYS[key]) {
+            const normalized = normalizeAnimationColor(value);
+            if (normalized === undefined) {
+                // invalid colors must paint plainly. creating a descriptor makes
+                // reanimated's string interpolator emit '<letters>NaN'.
+                snapshotStatics[key] = cloneAnimationValue(value);
+                continue;
+            }
+            snapshotAnimated[key] = normalized;
+        }
+        else {
+            snapshotAnimated[key] = cloneAnimationValue(value);
+        }
+    }
+    const snapshotTransforms = transforms.map(cloneStyleRecord);
+    const keys = new Set(Object.keys(snapshotAnimated));
+    for (const transform of snapshotTransforms) {
+        const key = Object.keys(transform)[0];
+        const value = key ? transform[key] : undefined;
+        if (key && (typeof value === 'number' || typeof value === 'string')) {
+            keys.add(`transform:${key}`);
+        }
+    }
+    const seeds = {};
+    for (const key of keys) {
+        let value = lastPainted[key];
+        if (typeof value !== 'number' && typeof value !== 'string')
+            continue;
+        if (value === 'auto' || (typeof value === 'string' && value.startsWith('calc'))) {
+            continue;
+        }
+        if (COLOR_STYLE_KEYS[key])
+            value = normalizeAnimationColor(value);
+        if (value !== undefined)
+            seeds[key] = value;
+    }
+    const gatedKeys = {};
+    for (const key of keys)
+        gatedKeys[key] = true;
+    const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
+    const painted = {
+        ...snapshotStatics,
+        ...snapshotAnimated,
+    };
+    const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
+    delete painted.transform;
+    for (const transform of staticTransforms) {
+        const key = Object.keys(transform)[0];
+        if (key)
+            painted[`transform:${key}`] = transform[key];
+    }
+    for (const transform of snapshotTransforms) {
+        const key = Object.keys(transform)[0];
+        if (key)
+            painted[`transform:${key}`] = transform[key];
+    }
+    return {
+        value: {
+            animated: snapshotAnimated,
+            statics: snapshotStatics,
+            transforms: snapshotTransforms,
+            gatedKeys,
+            seeds,
+            removedKeys,
+            removeTransform: Object.keys(removedKeys).some((key) => key.startsWith('transform:')),
+            clearValue: core_1.isWeb ? '' : null,
+        },
+        painted,
+        keys,
+    };
+};
+const getGatedKeys = (snapshot) => Object.keys(snapshot.gatedKeys);
+const createReanimatedConfig = (config) => {
+    'worklet';
+    const next = {};
+    const source = config;
+    for (const key in source) {
+        if (key === 'type' || key === 'delay')
+            continue;
+        const value = source[key];
+        if (value !== undefined) {
+            next[key] = value;
+        }
+    }
+    return next;
+};
+/**
+ * Apply animation to a value based on config, with optional completion callback
+ */
+const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
+    'worklet';
+    const delay = config.delay;
+    const reanimatedConfig = createReanimatedConfig(config);
+    let animatedValue;
+    if (config.type === 'timing') {
+        animatedValue = (0, react_native_reanimated_1.withTiming)(targetValue, reanimatedConfig, callback);
+    }
+    else {
+        animatedValue = (0, react_native_reanimated_1.withSpring)(targetValue, reanimatedConfig, callback);
+    }
+    // reanimated starts a descriptor from its per-view history for the key — the
+    // key's last output value, or the descriptor's own toValue when there is
+    // none (an instant snap). both are wrong for a key that turns animated with
+    // a painted predecessor: history may hold a stale clear-value ('') from when
+    // the key was last removed, which poisons the start value (NaN frames). the
+    // wrapper substitutes the seed for whatever start value reanimated passes.
+    // color history gets the same treatment only when reanimated's own parser
+    // rejects it, preserving valid in-flight values during interruption.
+    if (seedValue !== undefined || validateStartAsColor) {
+        const innerOnStart = animatedValue.onStart;
+        animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
+            'worklet';
+            const startValue = validateStartAsColor
+                ? isReanimatedColorHistory(value)
+                    ? toReanimatedColor(value)
+                    : (seedValue ?? targetValue)
+                : seedValue;
+            innerOnStart(animation, startValue, timestamp, previousAnimation);
+        };
+    }
+    if (delay && delay > 0) {
+        animatedValue = (0, react_native_reanimated_1.withDelay)(delay, animatedValue);
+    }
+    return animatedValue;
+};
+const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingAnimation, didAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, validateStartAsColor = false) => {
+    'worklet';
+    const cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation);
+    if (!previouslyEmitted && seedValue === undefined && !cycleGated) {
+        return targetValue;
+    }
+    let callback;
+    if (gated && currentlyExiting) {
+        callback = (finished) => {
+            'worklet';
+            (0, react_native_reanimated_1.runOnJS)(markExitKeyDone)(key, exitCycleId, finished ?? false);
+        };
+    }
+    else if (gated && currentlyCompletingAnimation) {
+        callback = (finished) => {
+            'worklet';
+            (0, react_native_reanimated_1.runOnJS)(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false);
+        };
+    }
+    return applyAnimation(targetValue, config, callback, previouslyEmitted
+        ? undefined
+        : (seedValue ?? getImplicitDefault(implicitKey, targetValue)), validateStartAsColor);
+};
+// =============================================================================
+// Animatable Properties
+// =============================================================================
+const ANIMATABLE_PROPERTIES = {
+    // Transform
+    transform: true,
+    // Opacity
+    opacity: true,
+    // Dimensions
+    height: true,
+    width: true,
+    minWidth: true,
+    minHeight: true,
+    maxWidth: true,
+    maxHeight: true,
+    // Background
+    backgroundColor: true,
+    // Border colors
+    borderColor: true,
+    borderLeftColor: true,
+    borderRightColor: true,
+    borderTopColor: true,
+    borderBottomColor: true,
+    // Border radius
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    // Border width
+    borderWidth: true,
+    borderLeftWidth: true,
+    borderRightWidth: true,
+    borderTopWidth: true,
+    borderBottomWidth: true,
+    // Text
+    color: true,
+    fontSize: true,
+    fontWeight: true,
+    lineHeight: true,
+    letterSpacing: true,
+    // Position
+    left: true,
+    right: true,
+    top: true,
+    bottom: true,
+    // Margin
+    margin: true,
+    marginTop: true,
+    marginBottom: true,
+    marginLeft: true,
+    marginRight: true,
+    marginHorizontal: true,
+    marginVertical: true,
+    // Padding
+    padding: true,
+    paddingTop: true,
+    paddingBottom: true,
+    paddingLeft: true,
+    paddingRight: true,
+    paddingHorizontal: true,
+    paddingVertical: true,
+    // Flex/Gap
+    gap: true,
+    rowGap: true,
+    columnGap: true,
+    flex: true,
+    flexGrow: true,
+    flexShrink: true,
+};
+/**
+ * Check if a style property can be animated
+ */
+const canAnimateProperty = (key, value, animateOnly) => {
+    if (!ANIMATABLE_PROPERTIES[key])
+        return false;
+    if (value === 'auto')
+        return false;
+    if (typeof value === 'string' && value.startsWith('calc'))
+        return false;
+    if (animateOnly && !animateOnly.includes(key))
+        return false;
+    return true;
+};
+const splitAnimationStyles = (style, isDark, disableAnimation, animateOnly) => {
+    const animated = {};
+    const statics = {};
+    for (const key in style) {
+        const value = resolveDynamicValue(style[key], isDark);
+        if (value === undefined)
+            continue;
+        if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
+            animated[key] = cloneAnimationValue(value);
+        }
+        else {
+            statics[key] = cloneAnimationValue(value);
+        }
+    }
+    return { animated, statics };
+};
+// =============================================================================
+// Animated Components (Web)
+// =============================================================================
+/**
+ * Create a Gui-compatible animated component for web
+ * Supports data- attributes, className, and proper style handling
+ */
+function createWebAnimatedComponent(defaultTag) {
+    const isText = defaultTag === 'span';
+    const Component = Animated.createAnimatedComponent((0, react_1.forwardRef)((propsIn, ref) => {
+        const { forwardedRef, render = defaultTag, ...rest } = propsIn;
+        const hostRef = (0, react_1.useRef)(null);
+        const composedRefs = (0, core_1.useComposedRefs)(forwardedRef, ref, hostRef);
+        const stateRef = (0, react_1.useRef)({
+            get host() {
+                return hostRef.current;
+            },
+        });
+        const [, themeState] = (0, core_1.useThemeWithState)({});
+        const result = (0, core_1.getSplitStyles)(rest, isText ? core_1.Text.staticConfig : core_1.View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? '', { unmounted: false }, { isAnimated: false, noClass: true });
+        const viewProps = result?.viewProps ?? {};
+        const Element = render;
+        const transformedProps = core_1.hooks.usePropsTransform?.(render, viewProps, stateRef, false);
+        return (0, jsx_runtime_1.jsx)(Element, { ...transformedProps, ref: composedRefs });
+    }));
+    Component.acceptRenderProp = true;
+    return Component;
+}
+const AnimatedView = createWebAnimatedComponent('div');
+const AnimatedText = createWebAnimatedComponent('span');
+/**
+ * Builds animation config from a transition prop.
+ * Shared logic used in both initial render and style emitter updates.
+ */
+function buildTransitionConfig(transition, animations, animationState, styleKeys) {
+    const normalized = (0, animation_helpers_1.normalizeTransition)(transition);
+    const effectiveKey = (0, animation_helpers_1.getEffectiveAnimation)(normalized, animationState);
+    let base = cloneTransitionConfig(effectiveKey
+        ? (animations[effectiveKey] ??
+            { type: 'spring' })
+        : { type: 'spring' });
+    if (normalized.delay) {
+        base = cloneTransitionConfig({ ...base, delay: normalized.delay });
+    }
+    if (normalized.config) {
+        base = cloneTransitionConfig({ ...base, ...normalized.config });
+        // infer type: 'timing' if duration is provided without spring params
+        if (base.type !== 'timing' &&
+            normalized.config.duration !== undefined &&
+            normalized.config.damping === undefined &&
+            normalized.config.stiffness === undefined &&
+            normalized.config.mass === undefined) {
+            base = cloneTransitionConfig({ ...base, type: 'timing' });
+        }
+    }
+    // build per-property configs
+    const propertyConfigs = {};
+    for (const key of styleKeys) {
+        const propAnimation = normalized.properties[key];
+        if (typeof propAnimation === 'string') {
+            propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
+        }
+        else if (propAnimation && typeof propAnimation === 'object') {
+            const configType = propAnimation.type;
+            const baseForProp = configType
+                ? (animations[configType] ?? base)
+                : base;
+            propertyConfigs[key] = cloneTransitionConfig({
+                ...baseForProp,
+                ...propAnimation,
+            });
+        }
+        else {
+            propertyConfigs[key] = cloneTransitionConfig(base);
+        }
+    }
+    return { baseConfig: base, propertyConfigs };
+}
+/**
+ * Extracts all style keys including transform sub-properties.
+ */
+function getStyleKeys(style) {
+    const keys = new Set(Object.keys(style));
+    if (style.transform && Array.isArray(style.transform)) {
+        for (const t of style.transform) {
+            if (t && typeof t === 'object') {
+                keys.add(Object.keys(t)[0]);
+            }
+        }
+    }
+    return keys;
+}
+// =============================================================================
+// Animation Driver Factory
+// =============================================================================
+/**
+ * Create a Reanimated-based animation driver for Gui.
+ *
+ * This is a native Reanimated implementation without Moti dependency.
+ * It provides smooth spring and timing animations with full support for:
+ * - Per-property animation configurations
+ * - Exit animations with proper completion callbacks
+ * - Dynamic theme value resolution
+ * - Transform property animations
+ * - avoidReRenders optimization for hover/press/focus states
+ *
+ * @example
+ * ```tsx
+ * const animations = createAnimations({
+ *   fast: { type: 'spring', damping: 20, stiffness: 250 },
+ *   slow: { type: 'timing', duration: 500 },
+ * })
+ *
+ * ```
+ */
+function createAnimations(animationsConfig) {
+    // Normalize animation configs - default to spring if not specified
+    // This matches behavior of moti and motion drivers
+    const animations = {};
+    for (const key in animationsConfig) {
+        animations[key] = cloneTransitionConfig({
+            type: 'spring',
+            ...animationsConfig[key],
+        });
+    }
+    return {
+        needsCustomComponent: true,
+        View: core_1.isWeb ? AnimatedView : Animated.View,
+        Text: core_1.isWeb ? AnimatedText : Animated.Text,
+        isReactNative: true,
+        inputStyle: 'value',
+        outputStyle: 'inline',
+        avoidReRenders: true,
+        animations,
+        usePresence: use_presence_1.usePresence,
+        ResetPresence: use_presence_1.ResetPresence,
+        // =========================================================================
+        // useAnimatedNumber - For imperative animated values
+        // =========================================================================
+        useAnimatedNumber(initial) {
+            const sharedValue = (0, react_native_reanimated_1.useSharedValue)(initial);
+            return (0, react_1.useMemo)(() => ({
+                getInstance() {
+                    'worklet';
+                    return sharedValue;
+                },
+                getValue() {
+                    'worklet';
+                    return sharedValue.value;
+                },
+                setValue(next, config = { type: 'spring' }, onFinish) {
+                    if (config.type === 'direct') {
+                        sharedValue.value = next;
+                        onFinish?.();
+                    }
+                    else {
+                        // animations must start on the ui thread in reanimated 4.x -
+                        // withSpring/withTiming return animation descriptors that only
+                        // work when assigned to a SharedValue inside the UI runtime
+                        const cb = onFinish
+                            ? (finished) => {
+                                'worklet';
+                                if (finished !== false) {
+                                    (0, react_native_reanimated_1.runOnJS)(onFinish)();
+                                }
+                            }
+                            : undefined;
+                        const animationConfig = cloneTransitionConfig(config);
+                        if (core_1.isWeb) {
+                            // on web there's no UI thread - set directly
+                            sharedValue.value = applyAnimation(next, animationConfig, cb);
+                        }
+                        else {
+                            (0, react_native_reanimated_1.runOnUI)((targetValue, animationConfig) => {
+                                'worklet';
+                                sharedValue.value = applyAnimation(targetValue, animationConfig, cb);
+                            })(next, animationConfig);
+                        }
+                    }
+                },
+                stop() {
+                    (0, react_native_reanimated_1.cancelAnimation)(sharedValue);
+                },
+            }), [sharedValue]);
+        },
+        // =========================================================================
+        // useAnimatedNumberReaction - React to animated value changes
+        // =========================================================================
+        useAnimatedNumberReaction({ value }, onValue) {
+            const instance = value.getInstance();
+            return (0, react_native_reanimated_1.useAnimatedReaction)(() => instance.value, (next, prev) => {
+                if (prev !== next) {
+                    (0, react_native_reanimated_1.runOnJS)(onValue)(next);
+                }
+            }, [onValue, instance]);
+        },
+        // =========================================================================
+        // useAnimatedNumberStyle - Create animated styles from values
+        // =========================================================================
+        useAnimatedNumberStyle(val, getStyle) {
+            const instance = val.getInstance();
+            if (core_1.isWeb) {
+                // web: must pass explicit deps (no babel plugin)
+                return (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+                    'worklet';
+                    return getStyle(instance.value);
+                }, [instance, getStyle]);
+            }
+            const styleVal = (0, react_native_reanimated_1.useDerivedValue)(() => {
+                'worklet';
+                return getStyle(instance.value);
+            });
+            const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+                'worklet';
+                return styleVal.value;
+            });
+            silenceAnimatedComponentDevCheck(animatedStyle);
+            return animatedStyle;
+        },
+        useAnimatedNumbersStyle(vals, getStyle) {
+            const instances = vals.map((v) => v.getInstance());
+            const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+                'worklet';
+                const currentValues = instances.map((inst) => inst.value);
+                return getStyle(...currentValues);
+            }, core_1.isWeb ? [getStyle, ...instances] : undefined);
+            silenceAnimatedComponentDevCheck(animatedStyle);
+            return animatedStyle;
+        },
+        // =========================================================================
+        // useAnimations - Main animation hook for components
+        // =========================================================================
+        useAnimations(animationProps) {
+            const { props, presence, style, componentState, useStyleEmitter, themeName, stateRef, styleState, onDidAnimate, } = animationProps;
+            // State flags
+            const isHydrating = componentState.unmounted === true;
+            const isMounting = componentState.unmounted === 'should-enter';
+            const isEntering = !!componentState.unmounted;
+            // Presence state for exit animations
+            const isExiting = presence?.[0] === false;
+            // Track if we just finished entering (transition from entering to not entering)
+            const wasEnteringRef = (0, react_1.useRef)(isEntering);
+            const justFinishedEntering = wasEnteringRef.current && !isEntering;
+            react_1.default.useEffect(() => {
+                wasEnteringRef.current = isEntering;
+            });
+            // Use effectiveTransition computed by createComponent (single source of truth)
+            const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+            const normalized = (0, animation_helpers_1.normalizeTransition)(effectiveTransition);
+            // Use 'enter' if we're mounting OR if we just finished entering
+            const animationState = isExiting
+                ? 'exit'
+                : isMounting || justFinishedEntering
+                    ? 'enter'
+                    : 'default';
+            const animationKey = (0, animation_helpers_1.getEffectiveAnimation)(normalized, animationState);
+            const disableAnimation = isHydrating || !animationKey;
+            // Theme state for dynamic values - use themeName from props instead of hook
+            const isDark = themeName?.startsWith('dark') || false;
+            // Get sendExitComplete callback from presence
+            const sendExitComplete = presence?.[1];
+            const onDidAnimateRef = (0, react_1.useRef)(onDidAnimate);
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                onDidAnimateRef.current = onDidAnimate;
+            }, [onDidAnimate]);
+            const didAnimateCycleIdRef = (0, react_1.useRef)(0);
+            const pendingDidAnimateKeysRef = (0, react_1.useRef)(new Set());
+            const didAnimateCompletedRef = (0, react_1.useRef)(false);
+            const isCompletingAnimationRef = (0, react_native_reanimated_1.useSharedValue)(false);
+            const didAnimateCycleIdShared = (0, react_native_reanimated_1.useSharedValue)(0);
+            const markDidAnimateKeyDone = (0, core_1.useEvent)((key, cycleId, finished) => {
+                if (!finished || cycleId !== didAnimateCycleIdRef.current)
+                    return;
+                if (didAnimateCompletedRef.current)
+                    return;
+                pendingDidAnimateKeysRef.current.delete(key);
+                if (pendingDidAnimateKeysRef.current.size === 0) {
+                    didAnimateCompletedRef.current = true;
+                    isCompletingAnimationRef.value = false;
+                    onDidAnimateRef.current?.();
+                }
+            });
+            // =========================================================================
+            // Exit cycle state for deterministic per-property completion tracking
+            // =========================================================================
+            const exitCycleIdRef = (0, react_1.useRef)(0);
+            const pendingExitKeysRef = (0, react_1.useRef)(new Set());
+            const exitCompletedRef = (0, react_1.useRef)(false);
+            const wasExitingRef = (0, react_1.useRef)(false);
+            // detect transition into/out of exiting state
+            const justStartedExiting = isExiting && !wasExitingRef.current;
+            const justStoppedExiting = !isExiting && wasExitingRef.current;
+            // stable callback to mark a property as done (called from worklet via runOnJS)
+            const markExitKeyDone = (0, core_1.useEvent)((key, cycleId, finished) => {
+                // ignore callbacks from stale cycles
+                if (cycleId !== exitCycleIdRef.current)
+                    return;
+                // ignore if already completed
+                if (exitCompletedRef.current)
+                    return;
+                // count both finished and canceled animations as "done" during exit
+                // (element is leaving anyway, canceled animations shouldn't block completion)
+                pendingExitKeysRef.current.delete(key);
+                // check if all exit animations are done
+                if (pendingExitKeysRef.current.size === 0) {
+                    exitCompletedRef.current = true;
+                    sendExitComplete?.();
+                }
+            });
+            // SharedValue to pass exit state into worklet
+            const isExitingRef = (0, react_native_reanimated_1.useSharedValue)(isExiting);
+            const exitCycleIdShared = (0, react_native_reanimated_1.useSharedValue)(exitCycleIdRef.current);
+            // start new exit cycle only on transition INTO exiting (not every render while exiting)
+            if (justStartedExiting) {
+                exitCycleIdRef.current++;
+                exitCompletedRef.current = false;
+                pendingExitKeysRef.current.clear();
+                didAnimateCycleIdRef.current++;
+                pendingDidAnimateKeysRef.current.clear();
+                didAnimateCompletedRef.current = true;
+            }
+            // invalidate pending callbacks when exit is canceled/interrupted
+            if (justStoppedExiting) {
+                exitCycleIdRef.current++;
+                pendingExitKeysRef.current.clear();
+            }
+            // update shared values (using effect to avoid writing during render)
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                isExitingRef.value = isExiting;
+                exitCycleIdShared.value = exitCycleIdRef.current;
+                if (justStartedExiting) {
+                    isCompletingAnimationRef.value = false;
+                    didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
+                }
+            }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
+            // track previous exiting state
+            react_1.default.useEffect(() => {
+                wasExitingRef.current = isExiting;
+            });
+            // =========================================================================
+            // avoidRerenders: SharedValues for style updates without re-renders
+            // =========================================================================
+            const committedRenderKeysRef = (0, react_1.useRef)(new Set());
+            // full painted style of the last committed source (render or emitter):
+            // statics + animated targets, transform sub-keys flattened as `transform:key`.
+            // seeds read from it.
+            const lastPaintedRef = (0, react_1.useRef)({});
+            // per-key first-animated values React keeps painting under the mapper —
+            // see the styles memo below
+            const carryRef = (0, react_1.useRef)({});
+            // Separate styles into animated and static
+            const { animatedStyles, staticStyles, nextCarry } = (0, react_1.useMemo)(() => {
+                const animateOnly = props.animateOnly;
+                const { animated, statics } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
+                // every animated key keeps its FIRST animated value in React's style for
+                // as long as it stays animated. the value never changes across renders,
+                // so React's per-key style diff never touches the key again and the
+                // mapper's inline writes survive every commit — reanimated's Fabric
+                // commit hook provides this guarantee on native, web has no equivalent.
+                // during enter the carry is the enterStyle (the mapper animates over it);
+                // a key appearing post-mount (a just-measured height) paints its value in
+                // the same commit the mapper first sees it, a frame before the mapper's
+                // first write.
+                // derive from committed state. mutating carryRef during render leaks
+                // abandoned concurrent renders into later commits.
+                const nextCarry = cloneStyleRecord(carryRef.current);
+                for (const key in nextCarry) {
+                    if (!(key in animated))
+                        delete nextCarry[key];
+                }
+                for (const key in animated) {
+                    if (!(key in nextCarry)) {
+                        nextCarry[key] = cloneAnimationValue(animated[key]);
+                    }
+                    statics[key] = nextCarry[key];
+                }
+                return { animatedStyles: animated, staticStyles: statics, nextCarry };
+            }, [disableAnimation, style, isDark, props.animateOnly]);
+            const renderSnapshot = (0, react_1.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
+            const renderSnapshotRef = (0, react_native_reanimated_1.useSharedValue)({
+                animated: {},
+                statics: {},
+                transforms: [],
+                gatedKeys: {},
+                seeds: {},
+                removedKeys: {},
+                removeTransform: false,
+                clearValue: core_1.isWeb ? '' : null,
+            });
+            const emitterSnapshotRef = (0, react_native_reanimated_1.useSharedValue)(null);
+            const emitterKeysRef = (0, react_1.useRef)(null);
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                carryRef.current = nextCarry;
+                committedRenderKeysRef.current = renderSnapshot.keys;
+                lastPaintedRef.current = renderSnapshot.painted;
+            }, [nextCarry, renderSnapshot]);
+            // reconcile the emitter latch with real re-renders.
+            //
+            // the avoidReRenders fast path lets a pure pseudo change (hover/press/focus) push
+            // styles straight to the worklet via useStyleEmitter with no React commit — it sets
+            // emitterSnapshotRef. the worklet then treats `emitterSnapshotRef !== null` as a
+            // permanent latch: once the emitter has fired even once, it reads its last-emitted
+            // snapshot and IGNORES `animatedStyles` from every subsequent re-render. so a base
+            // style that changes through React (e.g. a row's `backgroundColor` flipping with an
+            // external selection store, not a hover) never reaches the screen — it stays stuck on
+            // the stale emitted value until the next hover re-fires the emitter. (the "active row
+            // highlight gets stuck until you hover it again" report.)
+            //
+            // a real re-render is the freshest source of truth for the base style, so on render we
+            // drop the emitter latch and let the worklet fall back to `animatedStyles`. the one
+            // exception: while a self pseudo (hover/press/focus) is active the emitted style is a
+            // transient override that isn't in this render, so keep it latched — otherwise an
+            // unrelated re-render while hovering would snap back to the base. `pseudoActiveRef`
+            // tracks that flag straight off the emitter (which fires on every pseudo transition), so
+            // the un-hover/un-press emission flips it false and the next render reclaims the style.
+            // no value comparison needed; runtime media stays correct because a render re-reads live
+            // media into `animatedStyles`.
+            // exit overrides the pseudo exception: the exit render's style IS the
+            // authoritative target, and an element that exits while hovered/focused (every
+            // dialog closed by clicking a button inside it) would otherwise keep the stale
+            // emitted base latched — the worklet then "animates" to values already on
+            // screen, every exit-key callback completes in a frame, and AnimatePresence
+            // unmounts immediately (the dialog-exit-snap). mirrored into a plain ref so the
+            // emitter callback (which runs outside render) can read it.
+            const pseudoActiveRef = (0, react_1.useRef)(false);
+            const isExitingJSRef = (0, react_1.useRef)(false);
+            isExitingJSRef.current = isExiting;
+            // the committed render is the worklet's source of truth whenever the emitter is not
+            // latched, so every render must publish its snapshot — not just the renders that drop
+            // a latch. animated keys live only in this snapshot after mount (staticStyles carries
+            // them during mount only), so a render that never publishes leaves the worklet reading
+            // an empty snapshot and the animated properties never reach the screen at all.
+            const publishedSnapshotRef = (0, react_1.useRef)(null);
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
+                // when the latch drops, keys the emitter owned that this render no longer has must
+                // be cleared too, otherwise reanimated keeps painting the stale emitted value
+                const emitterKeys = droppingLatch ? emitterKeysRef.current : null;
+                if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
+                    const removedKeys = emitterKeys
+                        ? {
+                            ...renderSnapshot.value.removedKeys,
+                            ...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys),
+                        }
+                        : renderSnapshot.value.removedKeys;
+                    renderSnapshotRef.value = {
+                        ...renderSnapshot.value,
+                        removedKeys,
+                        removeTransform: Object.keys(removedKeys).some((key) => key.startsWith('transform:')),
+                    };
+                    publishedSnapshotRef.current = renderSnapshot.value;
+                }
+                if (droppingLatch) {
+                    emitterSnapshotRef.value = null;
+                    emitterKeysRef.current = null;
+                }
+            });
+            // Build animation config with per-property overrides using normalized transition
+            const { baseConfig, propertyConfigs } = (0, react_1.useMemo)(() => {
+                if (isHydrating) {
+                    return {
+                        baseConfig: { type: 'timing', duration: 0 },
+                        propertyConfigs: {},
+                    };
+                }
+                // use effectiveTransition (createComponent's single source of truth) so a
+                // platform-pseudo component with no declared transition resolves its BASE
+                // config to instant ('0ms') too — not just its pseudo flips. otherwise base
+                // style changes on the driver path animate with the default spring and a
+                // hover-out / base color change visibly lingers (looks "stuck").
+                return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
+            }, [isHydrating, effectiveTransition, animatedStyles, animationState]);
+            // Store config in SharedValue for worklet access (concurrent-safe)
+            // Using useEffect to avoid writing to shared value during render
+            const configRef = (0, react_native_reanimated_1.useSharedValue)({
+                baseConfig,
+                propertyConfigs,
+                disableAnimation,
+                isHydrating,
+            });
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                configRef.value = {
+                    baseConfig,
+                    propertyConfigs,
+                    disableAnimation,
+                    isHydrating,
+                };
+            }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
+            // =========================================================================
+            // avoidRerenders: register style emitter callback
+            // when hover/press/etc state changes, this is called instead of re-rendering
+            // =========================================================================
+            useStyleEmitter?.((nextStyle, effectiveTransition, pseudoActive) => {
+                // while exiting, the exit render owns the style — a pseudo flip mid-exit
+                // (hover-out as the element fades under the cursor) must not re-latch the
+                // base style over the in-flight exit targets.
+                if (isExitingJSRef.current)
+                    return;
+                // track whether a self pseudo is active so the render-time layout effect knows whether
+                // this emitter snapshot is a transient override to keep latched or a base it can drop.
+                pseudoActiveRef.current = pseudoActive === true;
+                const animateOnly = props.animateOnly;
+                // effectiveTransition is computed in createComponent based on entering/exiting pseudo states
+                // rebuild config whenever transition changes (entering OR exiting pseudo states)
+                const transitionToUse = effectiveTransition ?? props.transition;
+                const { baseConfig: newBase, propertyConfigs: newPropertyConfigs } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
+                // update configRef with the new config
+                configRef.value = {
+                    baseConfig: newBase,
+                    propertyConfigs: newPropertyConfigs,
+                    disableAnimation: configRef.value.disableAnimation,
+                    isHydrating: configRef.value.isHydrating,
+                };
+                const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
+                const { animated, statics } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
+                const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
+                emitterSnapshotRef.value = snapshot.value;
+                emitterKeysRef.current = snapshot.keys;
+                lastPaintedRef.current = snapshot.painted;
+                if (process.env.NODE_ENV === 'development' &&
+                    props.debug &&
+                    props.debug !== 'profile') {
+                    console.info('[animations-reanimated] useStyleEmitter update', {
+                        animated,
+                        statics,
+                        transforms: snapshot.value.transforms,
+                    });
+                }
+            });
+            // Compute and register exit keys synchronously during render to avoid race conditions
+            // This must happen BEFORE useAnimatedStyle runs so callbacks have a populated set
+            const exitKeysRegistered = (0, react_1.useRef)(false);
+            if (justStartedExiting && sendExitComplete) {
+                const exitKeys = getGatedKeys(renderSnapshot.value);
+                pendingExitKeysRef.current = new Set(exitKeys);
+                exitKeysRegistered.current = exitKeys.length > 0;
+            }
+            // onDidAnimate is an internal completion hook used by components that
+            // need to retain content through an in-place style transition. register
+            // the exact keys that can animate before publishing the cycle to the
+            // worklet; shared values are only written from the layout effect, never
+            // from the mapper that reads them.
+            const previousDidAnimateStyleRef = (0, react_1.useRef)(null);
+            const didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
+            const previousDidAnimateStyle = previousDidAnimateStyleRef.current;
+            const shouldRegisterDidAnimate = didAnimateStyle !== null &&
+                previousDidAnimateStyle !== null &&
+                previousDidAnimateStyle !== didAnimateStyle &&
+                !isExiting &&
+                !isEntering &&
+                !justFinishedEntering;
+            const didAnimateKeys = shouldRegisterDidAnimate
+                ? getGatedKeys(renderSnapshot.value)
+                : [];
+            (0, core_1.useIsomorphicLayoutEffect)(() => {
+                if (didAnimateStyle === null) {
+                    previousDidAnimateStyleRef.current = null;
+                    isCompletingAnimationRef.value = false;
+                    return;
+                }
+                // only a committed render may advance the authoritative cycle. the
+                // captured previous value prevents StrictMode's repeated effect from
+                // registering the same transition twice.
+                const previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
+                previousDidAnimateStyleRef.current = didAnimateStyle;
+                if (!shouldRegisterDidAnimate || !previousStyleStillCurrent)
+                    return;
+                const cycleId = ++didAnimateCycleIdRef.current;
+                pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
+                didAnimateCompletedRef.current = didAnimateKeys.length === 0;
+                isCompletingAnimationRef.value = didAnimateKeys.length > 0;
+                didAnimateCycleIdShared.value = cycleId;
+                if (didAnimateKeys.length === 0) {
+                    onDidAnimateRef.current?.();
+                }
+            }, [didAnimateStyle, shouldRegisterDidAnimate]);
+            // handle zero-animation case in effect (after render commit)
+            react_1.default.useEffect(() => {
+                if (!justStartedExiting || !sendExitComplete)
+                    return;
+                // if no keys were registered, complete immediately
+                if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
+                    if (!exitCompletedRef.current) {
+                        exitCompletedRef.current = true;
+                        sendExitComplete();
+                    }
+                }
+            }, [justStartedExiting, sendExitComplete]);
+            // the worklet's own record of which animated keys it has emitted (mirrors
+            // reanimated's per-view style history, which resets whenever a key leaves
+            // the output). a key not in here is fresh to the mapper no matter what
+            // React has committed — several renders can coalesce into one mapper run.
+            // native updates use modify with the same object and no forced update, so
+            // the mapper doesn't react to its own history write.
+            const mapperStateRef = (0, react_native_reanimated_1.useSharedValue)({
+                emitted: {},
+            });
+            // Create animated style
+            const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+                'worklet';
+                const mapperState = mapperStateRef.value;
+                const config = configRef.value;
+                if (config.disableAnimation || config.isHydrating) {
+                    // the empty return wipes reanimated's per-key history, so ours
+                    // resets with it
+                    updateMapperState(mapperStateRef, {});
+                    return {};
+                }
+                const previouslyEmitted = mapperState.emitted;
+                const emitted = {};
+                const result = {};
+                // Check if we have avoidRerenders updates from useStyleEmitter
+                const emitterSnapshot = emitterSnapshotRef.value;
+                const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
+                // Use emitter values if available, otherwise use the committed render snapshot.
+                // statics must fall back to the render's staticStyles (not {}): once an
+                // emitter snapshot has applied static keys, reanimated never unsets
+                // them, so after the latch drops a stale emitted value (e.g. a border
+                // color that missed animateOnly) would keep painting over the fresh
+                // style prop forever
+                const animatedValues = snapshot.animated;
+                const staticValues = snapshot.statics;
+                // read exit state from shared values
+                const currentlyExiting = isExitingRef.value;
+                const currentCycleId = exitCycleIdShared.value;
+                const currentlyCompletingAnimation = isCompletingAnimationRef.value;
+                const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
+                // Include static values from emitter (for hover/press style changes)
+                for (const key in staticValues) {
+                    result[key] = staticValues[key];
+                }
+                for (const key in snapshot.removedKeys) {
+                    if (!key.startsWith('transform:') && !(key in staticValues)) {
+                        result[key] = snapshot.clearValue;
+                    }
+                }
+                // Animate regular properties
+                for (const key in animatedValues) {
+                    if (key === 'transform')
+                        continue;
+                    const targetValue = animatedValues[key];
+                    emitted[key] = true;
+                    if (typeof targetValue !== 'number' && typeof targetValue !== 'string') {
+                        result[key] = targetValue;
+                        continue;
+                    }
+                    result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key]);
+                }
+                // Handle transforms
+                const transforms = snapshot.transforms;
+                // Animate transform properties with validation
+                if (transforms.length > 0 || snapshot.removeTransform) {
+                    const validTransforms = [];
+                    for (const t of transforms) {
+                        if (!t)
+                            continue;
+                        const keys = Object.keys(t);
+                        if (keys.length === 0)
+                            continue;
+                        const transformKey = keys[0];
+                        const value = t[transformKey];
+                        if (typeof value === 'number' || typeof value === 'string') {
+                            const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
+                            const subKey = `transform:${transformKey}`;
+                            emitted[subKey] = true;
+                            validTransforms.push({
+                                [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone),
+                            });
+                        }
+                        else {
+                            validTransforms.push(t);
+                        }
+                    }
+                    if (validTransforms.length > 0 || !('transform' in staticValues)) {
+                        result.transform = validTransforms;
+                    }
+                }
+                updateMapperState(mapperStateRef, emitted);
+                return result;
+            }, core_1.isWeb
+                ? [
+                    // pass SharedValues so the stable mapper watches them on web (no babel plugin)
+                    renderSnapshotRef,
+                    emitterSnapshotRef,
+                    configRef,
+                    isExitingRef,
+                    exitCycleIdShared,
+                    markExitKeyDone,
+                    isCompletingAnimationRef,
+                    didAnimateCycleIdShared,
+                    markDidAnimateKeyDone,
+                ]
+                : undefined);
+            silenceAnimatedComponentDevCheck(animatedStyle);
+            // Debug logging
+            if (process.env.NODE_ENV === 'development' &&
+                props.debug &&
+                props.debug !== 'profile') {
+                console.info('[animations-reanimated] useAnimations', {
+                    animationKey,
+                    componentState,
+                    isExiting,
+                    animatedStyles,
+                    staticStyles,
+                    baseConfig,
+                    propertyConfigs,
+                });
+            }
+            // staticStyles carries animated keys only while mounting or on a key's
+            // first post-mount appearance; after that the mapper owns them and the
+            // commit bridge above keeps React commits from wiping its inline writes.
+            return {
+                style: [staticStyles, animatedStyle],
+            };
+        },
+    };
+}
+//# sourceMappingURL=createAnimations.js.map