[BUG] AnimatePresence child re-entering during its exit stays stuck at initial (stale isExitComplete + blockInitialAnimation); MotionValue.start() orphans the next animation

import { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { AnimatePresence, motion } from "motion/react";
import { MotionGlobalConfig } from "motion-utils";
import { JSAnimation, frameData, motionValue, type MotionValue } from "motion-dom";

// ─── Bug 1 — AnimatePresence: a child re-entering during its exit can stay
// stuck at `initial` forever (opacity 0, scale 0).
//
// Deterministic with `MotionGlobalConfig.instantAnimations`: animations settle
// on the next frame, so the exit resolves AFTER the element has re-entered —
// exactly the one-frame window we hit in CI with springs.

const frame = () => new Promise<void>((r) => setTimeout(r, 60));

function Bug1() {
  const [mode, setMode] = useState<"bar" | "panel">("bar");
  const [result, setResult] = useState("running…");
  useEffect(() => {
    let cancelled = false;
    (async () => {
      MotionGlobalConfig.instantAnimations = true;
      // 1. exit + re-enter before the frame → the exit promise resolves after
      //    re-entry → ExitAnimationFeature.isExitComplete becomes stale (true).
      flushSync(() => setMode("panel"));
      flushSync(() => setMode("bar"));
      await frame();
      // 2. same gesture → re-entry takes the "at rest" branch → jump(initial)
      //    + reset() + animateChanges(), which blockInitialAnimation disables
      //    (first child of <AnimatePresence initial={false}>) → stuck.
      flushSync(() => setMode("panel"));
      flushSync(() => setMode("bar"));
      await frame();
      await frame();
      MotionGlobalConfig.instantAnimations = false;
      if (cancelled) return;
      const el = document.querySelector<HTMLElement>('[data-testid="bar"]');
      const ok = !!el && el.style.opacity === "1";
      setResult(
        ok
          ? "PASS — bar visible"
          : `FAIL — bar stuck: opacity=${el?.style.opacity} transform=${el?.style.transform}`
      );
    })();
    return () => {
      cancelled = true;
    };
  }, []);
  return (
    <section>
      <h2>Bug 1 — AnimatePresence re-entry: {result}</h2>
      <div style={{ height: 60 }}>
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.div
            key={mode}
            data-testid={mode}
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0 }}
            style={{ padding: 12, background: mode === "bar" ? "#3a6" : "#a63", color: "#fff" }}
          >
            {mode === "bar" ? "bar (should be visible)" : "panel"}
          </motion.div>
        </AnimatePresence>
      </div>
    </section>
  );
}

// ─── Bug 2 — MotionValue.start(): the previous animation's `.then(() =>
// this.clearAnimation())` runs AFTER `this.animation = next`, so it deletes
// the reference to the NEW animation when the previous one finishes inside
// `stop()` (JSAnimation.stop() does a last tick). The new animation becomes an
// orphan: unstoppable, and it wins against any later animation on the value.

type Driver = { tick: (t: number) => void };
const makeDriver = (register: (d: Driver) => void) => (update: (t: number) => void) => {
  register({ tick: update });
  return { start: () => {}, stop: () => {}, now: () => frameData.timestamp };
};
const startLinear = (value: MotionValue<number>, to: number, duration: number, register: (d: Driver) => void) =>
  value.start(
    (onComplete) =>
      new JSAnimation({
        keyframes: [value.get(), to],
        duration,
        ease: (t: number) => t,
        driver: makeDriver(register),
        motionValue: value,
        onUpdate: (v) => value.set(v),
        onComplete,
      })
  );

async function bug2(): Promise<string> {
  MotionGlobalConfig.useManualTiming = true;
  frameData.timestamp = 0;
  const value = motionValue(0);
  let a: Driver | undefined;
  let b: Driver | undefined;
  startLinear(value, 1, 100, (d) => (a = d));
  frameData.timestamp = 90;
  await Promise.resolve(); // time.now() caches until the next microtask
  a!.tick(90);
  frameData.timestamp = 100;
  await Promise.resolve();
  startLinear(value, 0, 100, (d) => (b = d)); // stop() finishes A inside this call
  const bAnimation = value.animation;
  await Promise.resolve();
  await Promise.resolve(); // A's `.then(clearAnimation)` runs here
  const stillReferenced = value.animation === bAnimation && value.isAnimating();
  value.stop();
  const frozen = value.get();
  frameData.timestamp = 150;
  await Promise.resolve();
  b!.tick(150);
  const stoppable = value.get() === frozen;
  MotionGlobalConfig.useManualTiming = false;
  return stillReferenced && stoppable
    ? "PASS"
    : `FAIL — value.animation ${stillReferenced ? "kept" : "was cleared (orphan)"}; stop() ${stoppable ? "worked" : "did NOT stop it (value moved to " + value.get().toFixed(3) + ")"}`;
}

function Bug2() {
  const [result, setResult] = useState("running…");
  useEffect(() => {
    bug2().then(setResult);
  }, []);
  return (
    <section>
      <h2>Bug 2 — MotionValue.start() orphan: {result}</h2>
    </section>
  );
}

// No StrictMode: its double-invoked effects would run the scripted gestures twice.
createRoot(document.getElementById("root")!).render(
  <main style={{ fontFamily: "system-ui", padding: 24 }}>
    <h1>motion 12.40.0 — AnimatePresence re-entry freeze</h1>
    <Bug1 />
    <Bug2 />
  </main>
);

import { JSAnimation, frameData, motionValue, type MotionValue } from 'motion-dom'
import { MotionGlobalConfig } from 'motion-utils'

type Driver = { tick: (t: number) => void }

/** Pilote manuel : aucune rAF, on avance le temps à la main. */
function makeDriver(register: (d: Driver) => void) {
  return (update: (timestamp: number) => void) => {
    register({ tick: update })
    return {
      start: () => {},
      stop: () => {},
      now: () => frameData.timestamp,
    }
  }
}

function startLinear(value: MotionValue<number>, to: number, duration: number, register: (d: Driver) => void) {
  return value.start(
    (onComplete) =>
      new JSAnimation({
        keyframes: [value.get(), to],
        duration,
        ease: (t: number) => t,
        driver: makeDriver(register),
        motionValue: value,
        onUpdate: (v) => value.set(v),
        onComplete,
      }),
  )
}

describe('MotionValue.start() — redémarrage au moment où la précédente se termine', () => {
  beforeEach(() => {
    MotionGlobalConfig.useManualTiming = true
    frameData.timestamp = 0
  })
  afterEach(() => {
    MotionGlobalConfig.useManualTiming = false
  })

  it('la nouvelle animation reste référencée et arrêtable', async () => {
    const value = motionValue(0)
    let a: Driver | undefined
    let b: Driver | undefined

    // A : 0 → 1 en 100 ms. On la joue jusqu'à 90 ms.
    startLinear(value, 1, 100, (d) => (a = d))
    // `time.now()` met son horloge en cache jusqu'à la prochaine microtâche :
    // après chaque avance du temps, on cède une microtâche pour la vider.
    frameData.timestamp = 90
    await Promise.resolve()
    a!.tick(90)
    expect(value.get()).toBeCloseTo(0.9, 5)

    // À t = 100 ms, on démarre B (→ 0). `stop()` fait un dernier tick de A à
    // t = 100 : A se TERMINE dans ce tick, sa promesse se résout.
    frameData.timestamp = 100
    await Promise.resolve()
    startLinear(value, 0, 100, (d) => (b = d))
    const bAnimation = value.animation
    expect(bAnimation).toBeDefined()

    // Microtâches : le `.then(clearAnimation)` de A s'exécute ici.
    await Promise.resolve()
    await Promise.resolve()

    // Contrat : B est TOUJOURS l'animation courante de la valeur…
    expect(value.animation).toBe(bAnimation)
    expect(value.isAnimating()).toBe(true)

    // … et `stop()` l'arrête vraiment : un tick ultérieur ne doit plus écrire.
    value.stop()
    const frozen = value.get()
    frameData.timestamp = 150
    await Promise.resolve()
    b!.tick(150)
    expect(value.get()).toBe(frozen)
  })
})

import { act, render } from '@testing-library/react'
import { useEffect, useState } from 'react'
import { AnimatePresence, motion } from 'motion/react'
import { MotionGlobalConfig } from 'motion-utils'

let setMode: (m: 'bar' | 'panel') => void = () => {}

function Island() {
  const [mode, set] = useState<'bar' | 'panel'>('bar')
  useEffect(() => {
    setMode = set
  }, [])
  return (
    <AnimatePresence mode="popLayout" initial={false}>
      <motion.div
        key={mode}
        data-testid={mode}
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0 }}
      >
        {mode}
      </motion.div>
    </AnimatePresence>
  )
}

const frame = () => new Promise<void>((resolve) => setTimeout(resolve, 40))

describe('AnimatePresence — ré-entrée pendant la sortie (premier enfant, initial={false})', () => {
  beforeEach(() => {
    MotionGlobalConfig.instantAnimations = true
  })
  afterEach(() => {
    MotionGlobalConfig.instantAnimations = false
  })

  it('un enfant qui ré-entre reste visible, même quand sa sortie précédente s’est terminée après sa ré-entrée', async () => {
    const { getByTestId } = render(<Island />)
    const bar = () => getByTestId('bar') as HTMLElement

    // 1. Sortie puis ré-entrée AVANT la frame : la sortie se termine après la
    //    ré-entrée → `isExitComplete` devient périmé (true sur un présent).
    act(() => setMode('panel'))
    act(() => setMode('bar'))
    await act(frame)
    expect(bar().style.opacity).toBe('1')

    // 2. Même geste : cette ré-entrée-ci prend la branche « au repos »
    //    (drapeau périmé) → jump(initial) + reset + animateChanges bloqué.
    act(() => setMode('panel'))
    act(() => setMode('bar'))
    await act(frame)
    await act(frame)

    expect(bar().style.opacity).toBe('1')
    expect(bar().style.transform === 'none' || bar().style.transform === '').toBe(true)
  })
})