react-panel-layout 0.6.0 → 0.6.1

package/src/modules/stack/SwipeStackContent.spec.tsx

@@ -8,67 +8,64 @@
  * 4. Button navigation: when navigationDepth changes without swipe, panels should animate
  */
 import { render, act } from "@testing-library/react";
-import { beforeEach, afterEach, vi } from "vitest";
 import { SwipeStackContent } from "./SwipeStackContent.js";
-import type { SwipeInputState } from "../../hooks/gesture/types.js";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
 
 // Mock requestAnimationFrame for animation testing
-let rafCallbacks: FrameRequestCallback[] = [];
-let rafId = 0;
-let mockTimestamp = 0;
+const rafState = {
+  callbacks: [] as FrameRequestCallback[],
+  id: 0,
+  mockTimestamp: 0,
+  originalRAF: globalThis.requestAnimationFrame,
+  originalCAF: globalThis.cancelAnimationFrame,
+};
 
-const mockRAF = vi.fn((callback: FrameRequestCallback) => {
-  rafCallbacks.push(callback);
-  return ++rafId;
-});
+const resetRafState = (): void => {
+  rafState.callbacks = [];
+  rafState.id = 0;
+  rafState.mockTimestamp = 0;
+};
 
-const mockCAF = vi.fn(() => {
-  // Cancel callback if needed
-});
+const mockRAF = (callback: FrameRequestCallback): number => {
+  rafState.callbacks = [...rafState.callbacks, callback];
+  rafState.id += 1;
+  return rafState.id;
+};
+
+const mockCAF = (): void => {};
 
 /**
  * Flush all pending RAF callbacks.
  * @param advanceMs - How much to advance the mock timestamp (default: 400ms to complete 300ms animation)
  */
-const flushRAF = (advanceMs = 400) => {
-  mockTimestamp += advanceMs;
-  const callbacks = rafCallbacks;
-  rafCallbacks = [];
-  callbacks.forEach(cb => cb(mockTimestamp));
+const flushRAF = (advanceMs = 400): void => {
+  rafState.mockTimestamp += advanceMs;
+  const callbacks = rafState.callbacks;
+  rafState.callbacks = [];
+  callbacks.forEach((cb) => cb(rafState.mockTimestamp));
 };
 
 beforeEach(() => {
-  rafCallbacks = [];
-  rafId = 0;
-  mockTimestamp = 0;
-  vi.stubGlobal("requestAnimationFrame", mockRAF);
-  vi.stubGlobal("cancelAnimationFrame", mockCAF);
+  resetRafState();
+  globalThis.requestAnimationFrame = mockRAF;
+  globalThis.cancelAnimationFrame = mockCAF;
 });
 
 afterEach(() => {
-  vi.unstubAllGlobals();
-  vi.clearAllMocks();
+  globalThis.requestAnimationFrame = rafState.originalRAF;
+  globalThis.cancelAnimationFrame = rafState.originalCAF;
 });
 
-const IDLE_STATE: SwipeInputState = {
+const IDLE_STATE: ContinuousOperationState = {
   phase: "idle",
   displacement: { x: 0, y: 0 },
   velocity: { x: 0, y: 0 },
-  direction: 0,
 };
 
-const createSwipingState = (displacementX: number): SwipeInputState => ({
-  phase: "swiping",
+const createOperatingState = (displacementX: number): ContinuousOperationState => ({
+  phase: "operating",
   displacement: { x: displacementX, y: 0 },
   velocity: { x: 0.5, y: 0 },
-  direction: displacementX > 0 ? 1 : displacementX < 0 ? -1 : 0,
-});
-
-const createTrackingState = (displacementX: number): SwipeInputState => ({
-  phase: "tracking",
-  displacement: { x: displacementX, y: 0 },
-  velocity: { x: 0.1, y: 0 },
-  direction: 0,
 });
 
 describe("SwipeStackContent", () => {
@@ -80,7 +77,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           <div>Test Content</div>
@@ -97,7 +94,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -118,7 +115,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -138,7 +135,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -156,7 +153,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -174,7 +171,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(100)}
+          operationState={createOperatingState(100)}
           containerSize={400}
         >
           Content
@@ -194,7 +191,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -208,7 +205,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createSwipingState(150)}
+          operationState={createOperatingState(150)}
           containerSize={400}
         >
           Content
@@ -226,7 +223,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -240,7 +237,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(200)}
+          operationState={createOperatingState(200)}
           containerSize={400}
         >
           Content
@@ -261,7 +258,7 @@ describe("SwipeStackContent", () => {
           depth={3}
           navigationDepth={3}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -281,7 +278,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -299,7 +296,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -319,7 +316,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -339,7 +336,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createTrackingState(50)}
+          operationState={createOperatingState(50)}
           containerSize={400}
         >
           Content
@@ -355,7 +352,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createSwipingState(100)}
+          operationState={createOperatingState(100)}
           containerSize={400}
         >
           Content
@@ -370,7 +367,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createSwipingState(250)}
+          operationState={createOperatingState(250)}
           containerSize={400}
         >
           Content
@@ -386,7 +383,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -406,7 +403,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(100)}
+          operationState={createOperatingState(100)}
           containerSize={400}
         >
           Content
@@ -423,7 +420,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(200)}
+          operationState={createOperatingState(200)}
           containerSize={400}
         >
           Content
@@ -438,7 +435,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(400)}
+          operationState={createOperatingState(400)}
           containerSize={400}
         >
           Content
@@ -454,7 +451,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -470,7 +467,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createSwipingState(-100)}
+          operationState={createOperatingState(-100)}
           containerSize={400}
         >
           Content
@@ -488,7 +485,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -504,7 +501,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={createSwipingState(150)}
+          operationState={createOperatingState(150)}
           containerSize={400}
         >
           Content
@@ -519,7 +516,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -543,7 +540,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -559,7 +556,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(200)}
+          operationState={createOperatingState(200)}
           containerSize={400}
         >
           Content
@@ -575,7 +572,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -601,7 +598,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -619,7 +616,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -647,7 +644,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -665,7 +662,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={0}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -697,7 +694,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           animateOnMount={true}
         >
@@ -729,7 +726,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={0}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -747,7 +744,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -775,7 +772,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -793,7 +790,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -828,7 +825,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           animateOnMount={true}
         >
@@ -857,7 +854,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={0}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           animateOnMount={true}
         >
@@ -889,7 +886,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -906,7 +903,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -931,7 +928,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -959,7 +956,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -977,7 +974,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -995,7 +992,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1013,7 +1010,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           showShadow={false}
         >
@@ -1034,7 +1031,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           displayMode="stack"
         >
@@ -1054,7 +1051,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           displayMode="stack"
         >
@@ -1074,7 +1071,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           displayMode="overlay"
         >
@@ -1096,7 +1093,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1114,7 +1111,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1132,7 +1129,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1140,9 +1137,8 @@ describe("SwipeStackContent", () => {
       );
 
       // At rest, should have dimming
-      let overlay = container.querySelector("[data-dimming-overlay]") as HTMLElement;
-      expect(overlay).toBeInTheDocument();
-      const initialOpacity = overlay.style.backgroundColor;
+      const initialOverlay = container.querySelector("[data-dimming-overlay]") as HTMLElement;
+      expect(initialOverlay).toBeInTheDocument();
 
       // During swipe at 100% progress, dimming should be gone
       rerender(
@@ -1151,16 +1147,16 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={createSwipingState(400)}
+          operationState={createOperatingState(400)}
           containerSize={400}
         >
           Content
         </SwipeStackContent>,
       );
 
-      overlay = container.querySelector("[data-dimming-overlay]") as HTMLElement;
+      const overlayAfter = container.querySelector("[data-dimming-overlay]") as HTMLElement;
       // At 100% swipe, opacity should be 0 (no overlay)
-      expect(overlay).not.toBeInTheDocument();
+      expect(overlayAfter).not.toBeInTheDocument();
     });
 
     it("can disable dimming with showDimming=false", () => {
@@ -1170,7 +1166,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
           showDimming={false}
         >
@@ -1183,6 +1179,297 @@ describe("SwipeStackContent", () => {
     });
   });
 
+  describe("navigation during animation", () => {
+    it("handles push during back animation", () => {
+      // Scenario: Panel is animating back (going from active to hidden)
+      // User quickly clicks to push forward again
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Step 1: Go back - panel becomes hidden, starts animating to off-screen
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Start animation but don't complete it
+      act(() => {
+        flushRAF(0);
+        flushRAF(100); // Partial animation
+      });
+
+      // Panel should be somewhere between 0 and 400
+      const midAnimationTransform = element.style.transform;
+      expect(midAnimationTransform).not.toBe("translateX(0px)");
+      expect(midAnimationTransform).not.toBe("translateX(400px)");
+
+      // Step 2: Push again - panel becomes active again DURING animation
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Complete all pending animations
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // Panel should end up at center (0), visible
+      expect(element.style.transform).toBe("translateX(0px)");
+      expect(element.style.visibility).toBe("visible");
+    });
+
+    it("handles back during push animation", () => {
+      // Scenario: New panel is animating in from off-screen
+      // User quickly clicks back before animation completes
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+          animateOnMount={true}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Panel starts off-screen
+      expect(element.style.transform).toBe("translateX(400px)");
+
+      // Start animation but don't complete it
+      act(() => {
+        flushRAF(0);
+        flushRAF(100); // Partial animation
+      });
+
+      // Panel should be somewhere between 400 and 0
+      const midAnimationTransform = element.style.transform;
+      expect(midAnimationTransform).not.toBe("translateX(400px)");
+      expect(midAnimationTransform).not.toBe("translateX(0px)");
+
+      // Go back during animation
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          operationState={IDLE_STATE}
+          containerSize={400}
+          animateOnMount={true}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Complete all pending animations
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // Panel should end up off-screen (400), hidden
+      expect(element.style.transform).toBe("translateX(400px)");
+    });
+
+    it("handles rapid back-push-back sequence during animations", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Back
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      act(() => {
+        flushRAF(0);
+        flushRAF(50);
+      });
+
+      // Push (before back animation completes)
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      act(() => {
+        flushRAF(0);
+        flushRAF(50);
+      });
+
+      // Back again (before push animation completes)
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Complete all animations
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // Final state: should be off-screen (hidden)
+      expect(element.style.transform).toBe("translateX(400px)");
+    });
+
+    it("panel remains visible and usable after rapid navigation", () => {
+      // This is the bug scenario: after rapid back-and-forth, panel becomes permanently hidden
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Rapid sequence without waiting for animations
+      for (let i = 0; i < 5; i++) {
+        // Go back
+        rerender(
+          <SwipeStackContent
+            id="panel1"
+            depth={1}
+            navigationDepth={0}
+            isActive={false}
+            operationState={IDLE_STATE}
+            containerSize={400}
+          >
+            Content
+          </SwipeStackContent>,
+        );
+
+        act(() => {
+          flushRAF(0);
+          flushRAF(30);
+        });
+
+        // Push forward
+        rerender(
+          <SwipeStackContent
+            id="panel1"
+            depth={1}
+            navigationDepth={1}
+            isActive={true}
+            operationState={IDLE_STATE}
+            containerSize={400}
+          >
+            Content
+          </SwipeStackContent>,
+        );
+
+        act(() => {
+          flushRAF(0);
+          flushRAF(30);
+        });
+      }
+
+      // Final state: panel should be active
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          operationState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Complete all animations
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // Panel should be visible at center
+      expect(element.style.transform).toBe("translateX(0px)");
+      expect(element.style.visibility).toBe("visible");
+    });
+  });
+
   describe("swipe commit (navigation changes)", () => {
     it("active panel moves off-screen when navigation depth decreases", () => {
       const { container, rerender } = render(
@@ -1191,7 +1478,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={1}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1209,7 +1496,7 @@ describe("SwipeStackContent", () => {
           depth={1}
           navigationDepth={0}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1236,7 +1523,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={1}
           isActive={false}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content
@@ -1254,7 +1541,7 @@ describe("SwipeStackContent", () => {
           depth={0}
           navigationDepth={0}
           isActive={true}
-          inputState={IDLE_STATE}
+          operationState={IDLE_STATE}
           containerSize={400}
         >
           Content