@hanzogui/animations-reanimated 8.3.0 → 8.3.2

package/dist/esm/createAnimations.mjs

@@ -1,923 +0,0 @@
-import { getEffectiveAnimation, normalizeTransition } from "@hanzogui/animation-helpers";
-import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState, View } from "@hanzogui/core";
-import { ResetPresence, usePresence } from "@hanzogui/use-presence";
-import normalizeColor from "@react-native/normalize-colors";
-import React, { forwardRef, useMemo, useRef } from "react";
-import Animated_, { cancelAnimation, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
-import { jsx } from "react/jsx-runtime";
-const getDefaultExport = module => {
-  const mod = module;
-  if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
-    return mod.default || mod;
-  }
-  return mod;
-};
-const Animated = getDefaultExport(Animated_);
-const silenceAnimatedComponentDevCheck = style => {
-  if (process.env.NODE_ENV !== "development" || isWeb || !style || typeof style !== "object") {
-    return;
-  }
-  Object.defineProperty(style, "_requiresAnimatedComponent", {
-    configurable: true,
-    enumerable: false,
-    value: true
-  });
-};
-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 = 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;
-};
-const getImplicitDefault = (key, targetValue) => {
-  "worklet";
-
-  const value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
-  if (typeof targetValue !== "string") return value;
-  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
-};
-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 = normalizeColor(value);
-  if (color == null) return;
-  const red = Math.round((color & 4278190080) >>> 24);
-  const green = Math.round((color & 16711680) >>> 16);
-  const blue = Math.round((color & 65280) >>> 8);
-  const alpha = (color & 255) / 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 !== void 0) 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 === void 0) {
-        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] : void 0;
-    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 !== void 0) 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: 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 !== void 0) {
-      next[key] = value;
-    }
-  }
-  return next;
-};
-const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
-  "worklet";
-
-  const delay = config.delay;
-  const reanimatedConfig = createReanimatedConfig(config);
-  let animatedValue;
-  if (config.type === "timing") {
-    animatedValue = withTiming(targetValue, reanimatedConfig, callback);
-  } else {
-    animatedValue = withSpring(targetValue, reanimatedConfig, callback);
-  }
-  if (seedValue !== void 0 || 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 = 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 === void 0 && !cycleGated) {
-    return targetValue;
-  }
-  let callback;
-  if (gated && currentlyExiting) {
-    callback = finished => {
-      "worklet";
-
-      runOnJS(markExitKeyDone)(key, exitCycleId, finished ?? false);
-    };
-  } else if (gated && currentlyCompletingAnimation) {
-    callback = finished => {
-      "worklet";
-
-      runOnJS(markDidAnimateKeyDone)(key, didAnimateCycleId, finished ?? false);
-    };
-  }
-  return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
-};
-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
-};
-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 === void 0) continue;
-    if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
-      animated[key] = cloneAnimationValue(value);
-    } else {
-      statics[key] = cloneAnimationValue(value);
-    }
-  }
-  return {
-    animated,
-    statics
-  };
-};
-function createWebAnimatedComponent(defaultTag) {
-  const isText = defaultTag === "span";
-  const Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
-    const {
-      forwardedRef,
-      render = defaultTag,
-      ...rest
-    } = propsIn;
-    const hostRef = useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef);
-    const stateRef = useRef({
-      get host() {
-        return hostRef.current;
-      }
-    });
-    const [, themeState] = useThemeWithState({});
-    const result = getSplitStyles(rest, isText ? Text.staticConfig : View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", {
-      unmounted: false
-    }, {
-      isAnimated: false,
-      noClass: true
-    });
-    const viewProps = result?.viewProps ?? {};
-    const Element = render;
-    const transformedProps = hooks.usePropsTransform?.(render, viewProps, stateRef, false);
-    return /* @__PURE__ */jsx(Element, {
-      ...transformedProps,
-      ref: composedRefs
-    });
-  }));
-  Component.acceptRenderProp = true;
-  return Component;
-}
-const AnimatedView = createWebAnimatedComponent("div");
-const AnimatedText = createWebAnimatedComponent("span");
-function buildTransitionConfig(transition, animations, animationState, styleKeys) {
-  const normalized = normalizeTransition(transition);
-  const effectiveKey = 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
-    });
-    if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
-      base = cloneTransitionConfig({
-        ...base,
-        type: "timing"
-      });
-    }
-  }
-  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
-  };
-}
-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;
-}
-function createAnimations(animationsConfig) {
-  const animations = {};
-  for (const key in animationsConfig) {
-    animations[key] = cloneTransitionConfig({
-      type: "spring",
-      ...animationsConfig[key]
-    });
-  }
-  return {
-    needsCustomComponent: true,
-    View: isWeb ? AnimatedView : Animated.View,
-    Text: isWeb ? AnimatedText : Animated.Text,
-    isReactNative: true,
-    inputStyle: "value",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    usePresence,
-    ResetPresence,
-    // =========================================================================
-    // useAnimatedNumber - For imperative animated values
-    // =========================================================================
-    useAnimatedNumber(initial) {
-      const sharedValue = useSharedValue(initial);
-      return 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 {
-            const cb = onFinish ? finished => {
-              "worklet";
-
-              if (finished !== false) {
-                runOnJS(onFinish)();
-              }
-            } : void 0;
-            const animationConfig = cloneTransitionConfig(config);
-            if (isWeb) {
-              sharedValue.value = applyAnimation(next, animationConfig, cb);
-            } else {
-              runOnUI((targetValue, animationConfig2) => {
-                "worklet";
-
-                sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
-              })(next, animationConfig);
-            }
-          }
-        },
-        stop() {
-          cancelAnimation(sharedValue);
-        }
-      }), [sharedValue]);
-    },
-    // =========================================================================
-    // useAnimatedNumberReaction - React to animated value changes
-    // =========================================================================
-    useAnimatedNumberReaction({
-      value
-    }, onValue) {
-      const instance = value.getInstance();
-      return useAnimatedReaction(() => instance.value, (next, prev) => {
-        if (prev !== next) {
-          runOnJS(onValue)(next);
-        }
-      }, [onValue, instance]);
-    },
-    // =========================================================================
-    // useAnimatedNumberStyle - Create animated styles from values
-    // =========================================================================
-    useAnimatedNumberStyle(val, getStyle) {
-      const instance = val.getInstance();
-      if (isWeb) {
-        return useAnimatedStyle(() => {
-          "worklet";
-
-          return getStyle(instance.value);
-        }, [instance, getStyle]);
-      }
-      const styleVal = useDerivedValue(() => {
-        "worklet";
-
-        return getStyle(instance.value);
-      });
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        return styleVal.value;
-      });
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      return animatedStyle;
-    },
-    useAnimatedNumbersStyle(vals, getStyle) {
-      const instances = vals.map(v => v.getInstance());
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        const currentValues = instances.map(inst => inst.value);
-        return getStyle(...currentValues);
-      }, isWeb ? [getStyle, ...instances] : void 0);
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      return animatedStyle;
-    },
-    // =========================================================================
-    // useAnimations - Main animation hook for components
-    // =========================================================================
-    useAnimations(animationProps) {
-      const {
-        props,
-        presence,
-        style,
-        componentState,
-        useStyleEmitter,
-        themeName,
-        stateRef,
-        styleState,
-        onDidAnimate
-      } = animationProps;
-      const isHydrating = componentState.unmounted === true;
-      const isMounting = componentState.unmounted === "should-enter";
-      const isEntering = !!componentState.unmounted;
-      const isExiting = presence?.[0] === false;
-      const wasEnteringRef = useRef(isEntering);
-      const justFinishedEntering = wasEnteringRef.current && !isEntering;
-      React.useEffect(() => {
-        wasEnteringRef.current = isEntering;
-      });
-      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
-      const normalized = normalizeTransition(effectiveTransition);
-      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-      const animationKey = getEffectiveAnimation(normalized, animationState);
-      const disableAnimation = isHydrating || !animationKey;
-      const isDark = themeName?.startsWith("dark") || false;
-      const sendExitComplete = presence?.[1];
-      const onDidAnimateRef = useRef(onDidAnimate);
-      useIsomorphicLayoutEffect(() => {
-        onDidAnimateRef.current = onDidAnimate;
-      }, [onDidAnimate]);
-      const didAnimateCycleIdRef = useRef(0);
-      const pendingDidAnimateKeysRef = useRef(/* @__PURE__ */new Set());
-      const didAnimateCompletedRef = useRef(false);
-      const isCompletingAnimationRef = useSharedValue(false);
-      const didAnimateCycleIdShared = useSharedValue(0);
-      const markDidAnimateKeyDone = 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?.();
-        }
-      });
-      const exitCycleIdRef = useRef(0);
-      const pendingExitKeysRef = useRef(/* @__PURE__ */new Set());
-      const exitCompletedRef = useRef(false);
-      const wasExitingRef = useRef(false);
-      const justStartedExiting = isExiting && !wasExitingRef.current;
-      const justStoppedExiting = !isExiting && wasExitingRef.current;
-      const markExitKeyDone = useEvent((key, cycleId, finished) => {
-        if (cycleId !== exitCycleIdRef.current) return;
-        if (exitCompletedRef.current) return;
-        pendingExitKeysRef.current.delete(key);
-        if (pendingExitKeysRef.current.size === 0) {
-          exitCompletedRef.current = true;
-          sendExitComplete?.();
-        }
-      });
-      const isExitingRef = useSharedValue(isExiting);
-      const exitCycleIdShared = useSharedValue(exitCycleIdRef.current);
-      if (justStartedExiting) {
-        exitCycleIdRef.current++;
-        exitCompletedRef.current = false;
-        pendingExitKeysRef.current.clear();
-        didAnimateCycleIdRef.current++;
-        pendingDidAnimateKeysRef.current.clear();
-        didAnimateCompletedRef.current = true;
-      }
-      if (justStoppedExiting) {
-        exitCycleIdRef.current++;
-        pendingExitKeysRef.current.clear();
-      }
-      useIsomorphicLayoutEffect(() => {
-        isExitingRef.value = isExiting;
-        exitCycleIdShared.value = exitCycleIdRef.current;
-        if (justStartedExiting) {
-          isCompletingAnimationRef.value = false;
-          didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
-        }
-      }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
-      React.useEffect(() => {
-        wasExitingRef.current = isExiting;
-      });
-      const committedRenderKeysRef = useRef(/* @__PURE__ */new Set());
-      const lastPaintedRef = useRef({});
-      const carryRef = useRef({});
-      const {
-        animatedStyles,
-        staticStyles,
-        nextCarry
-      } = useMemo(() => {
-        const animateOnly = props.animateOnly;
-        const {
-          animated,
-          statics
-        } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
-        const nextCarry2 = cloneStyleRecord(carryRef.current);
-        for (const key in nextCarry2) {
-          if (!(key in animated)) delete nextCarry2[key];
-        }
-        for (const key in animated) {
-          if (!(key in nextCarry2)) {
-            nextCarry2[key] = cloneAnimationValue(animated[key]);
-          }
-          statics[key] = nextCarry2[key];
-        }
-        return {
-          animatedStyles: animated,
-          staticStyles: statics,
-          nextCarry: nextCarry2
-        };
-      }, [disableAnimation, style, isDark, props.animateOnly]);
-      const renderSnapshot = useMemo(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
-      const renderSnapshotRef = useSharedValue({
-        animated: {},
-        statics: {},
-        transforms: [],
-        gatedKeys: {},
-        seeds: {},
-        removedKeys: {},
-        removeTransform: false,
-        clearValue: isWeb ? "" : null
-      });
-      const emitterSnapshotRef = useSharedValue(null);
-      const emitterKeysRef = useRef(null);
-      useIsomorphicLayoutEffect(() => {
-        carryRef.current = nextCarry;
-        committedRenderKeysRef.current = renderSnapshot.keys;
-        lastPaintedRef.current = renderSnapshot.painted;
-      }, [nextCarry, renderSnapshot]);
-      const pseudoActiveRef = useRef(false);
-      const isExitingJSRef = useRef(false);
-      isExitingJSRef.current = isExiting;
-      const publishedSnapshotRef = useRef(null);
-      useIsomorphicLayoutEffect(() => {
-        const droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
-        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;
-        }
-      });
-      const {
-        baseConfig,
-        propertyConfigs
-      } = useMemo(() => {
-        if (isHydrating) {
-          return {
-            baseConfig: {
-              type: "timing",
-              duration: 0
-            },
-            propertyConfigs: {}
-          };
-        }
-        return buildTransitionConfig(effectiveTransition, animations, animationState, getStyleKeys(animatedStyles));
-      }, [isHydrating, effectiveTransition, animatedStyles, animationState]);
-      const configRef = useSharedValue({
-        baseConfig,
-        propertyConfigs,
-        disableAnimation,
-        isHydrating
-      });
-      useIsomorphicLayoutEffect(() => {
-        configRef.value = {
-          baseConfig,
-          propertyConfigs,
-          disableAnimation,
-          isHydrating
-        };
-      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
-      useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
-        if (isExitingJSRef.current) return;
-        pseudoActiveRef.current = pseudoActive === true;
-        const animateOnly = props.animateOnly;
-        const transitionToUse = effectiveTransition2 ?? props.transition;
-        const {
-          baseConfig: newBase,
-          propertyConfigs: newPropertyConfigs
-        } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
-        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
-          });
-        }
-      });
-      const exitKeysRegistered = useRef(false);
-      if (justStartedExiting && sendExitComplete) {
-        const exitKeys = getGatedKeys(renderSnapshot.value);
-        pendingExitKeysRef.current = new Set(exitKeys);
-        exitKeysRegistered.current = exitKeys.length > 0;
-      }
-      const previousDidAnimateStyleRef = 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) : [];
-      useIsomorphicLayoutEffect(() => {
-        if (didAnimateStyle === null) {
-          previousDidAnimateStyleRef.current = null;
-          isCompletingAnimationRef.value = false;
-          return;
-        }
-        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]);
-      React.useEffect(() => {
-        if (!justStartedExiting || !sendExitComplete) return;
-        if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
-          if (!exitCompletedRef.current) {
-            exitCompletedRef.current = true;
-            sendExitComplete();
-          }
-        }
-      }, [justStartedExiting, sendExitComplete]);
-      const mapperStateRef = useSharedValue({
-        emitted: {}
-      });
-      const animatedStyle = useAnimatedStyle(() => {
-        "worklet";
-
-        const mapperState = mapperStateRef.value;
-        const config = configRef.value;
-        if (config.disableAnimation || config.isHydrating) {
-          updateMapperState(mapperStateRef, {});
-          return {};
-        }
-        const previouslyEmitted = mapperState.emitted;
-        const emitted = {};
-        const result = {};
-        const emitterSnapshot = emitterSnapshotRef.value;
-        const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
-        const animatedValues = snapshot.animated;
-        const staticValues = snapshot.statics;
-        const currentlyExiting = isExitingRef.value;
-        const currentCycleId = exitCycleIdShared.value;
-        const currentlyCompletingAnimation = isCompletingAnimationRef.value;
-        const currentDidAnimateCycleId = didAnimateCycleIdShared.value;
-        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;
-          }
-        }
-        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]);
-        }
-        const transforms = snapshot.transforms;
-        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;
-      }, isWeb ? [
-      // pass SharedValues so the stable mapper watches them on web (no babel plugin)
-      renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
-      silenceAnimatedComponentDevCheck(animatedStyle);
-      if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
-        console.info("[animations-reanimated] useAnimations", {
-          animationKey,
-          componentState,
-          isExiting,
-          animatedStyles,
-          staticStyles,
-          baseConfig,
-          propertyConfigs
-        });
-      }
-      return {
-        style: [staticStyles, animatedStyle]
-      };
-    }
-  };
-}
-export { createAnimations };
-//# sourceMappingURL=createAnimations.mjs.map