react-panel-layout 0.5.1 → 0.6.0

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

@@ -0,0 +1,1277 @@
+/**
+ * @file Tests for SwipeStackContent component.
+ *
+ * These tests ensure:
+ * 1. Swipe preview: active panel follows finger, behind panel reveals with parallax
+ * 2. Swipe commit: when swipe completes, navigation changes and panels animate to final positions
+ * 3. Swipe cancel: when swipe is released without threshold, panels snap back
+ * 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";
+
+// Mock requestAnimationFrame for animation testing
+let rafCallbacks: FrameRequestCallback[] = [];
+let rafId = 0;
+let mockTimestamp = 0;
+
+const mockRAF = vi.fn((callback: FrameRequestCallback) => {
+  rafCallbacks.push(callback);
+  return ++rafId;
+});
+
+const mockCAF = vi.fn(() => {
+  // Cancel callback if needed
+});
+
+/**
+ * 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));
+};
+
+beforeEach(() => {
+  rafCallbacks = [];
+  rafId = 0;
+  mockTimestamp = 0;
+  vi.stubGlobal("requestAnimationFrame", mockRAF);
+  vi.stubGlobal("cancelAnimationFrame", mockCAF);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.clearAllMocks();
+});
+
+const IDLE_STATE: SwipeInputState = {
+  phase: "idle",
+  displacement: { x: 0, y: 0 },
+  velocity: { x: 0, y: 0 },
+  direction: 0,
+};
+
+const createSwipingState = (displacementX: number): SwipeInputState => ({
+  phase: "swiping",
+  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", () => {
+  describe("rendering", () => {
+    it("renders children correctly", () => {
+      const { getByText } = render(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          <div>Test Content</div>
+        </SwipeStackContent>,
+      );
+
+      expect(getByText("Test Content")).toBeInTheDocument();
+    });
+
+    it("applies correct data attributes", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel-1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.getAttribute("data-stack-content")).toBe("panel-1");
+      expect(element.getAttribute("data-depth")).toBe("1");
+      expect(element.getAttribute("data-active")).toBe("true");
+      expect(element.getAttribute("data-role")).toBe("active");
+    });
+
+    it("applies correct role for behind panel", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel-0"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.getAttribute("data-role")).toBe("behind");
+    });
+  });
+
+  describe("visibility", () => {
+    it("active panel is always visible", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.visibility).toBe("visible");
+    });
+
+    it("behind panel is hidden when idle", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.visibility).toBe("hidden");
+    });
+
+    it("behind panel is visible when swiping", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(100)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.visibility).toBe("visible");
+    });
+  });
+
+  describe("transform during swipe", () => {
+    it("active panel follows displacement", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="test"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Start swiping
+      rerender(
+        <SwipeStackContent
+          id="test"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createSwipingState(150)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(150px)");
+    });
+
+    it("behind panel uses parallax effect", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Start swiping - at 50% progress (200px), behind should move from -120 to -60
+      rerender(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(200)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Behind panel should be at -60px (halfway from -120 to 0)
+      expect(element.style.transform).toBe("translateX(-60px)");
+    });
+  });
+
+  describe("z-index", () => {
+    it("applies z-index based on depth", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={3}
+          navigationDepth={3}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.zIndex).toBe("3");
+    });
+  });
+
+  describe("pointer events", () => {
+    it("active panel has auto pointer events", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.pointerEvents).toBe("auto");
+    });
+
+    it("inactive panel has none pointer events", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="test"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.pointerEvents).toBe("none");
+    });
+  });
+
+  describe("swipe preview behavior", () => {
+    it("active panel position changes immediately with displacement during swiping", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Initial position
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Start tracking (before direction lock) - displacement is still applied
+      // because we want responsive feedback even before direction is confirmed
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createTrackingState(50)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      // Tracking phase also applies displacement for responsive feedback
+      expect(element.style.transform).toBe("translateX(50px)");
+
+      // Swipe confirmed (direction locked)
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createSwipingState(100)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(100px)");
+
+      // Continue swiping
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createSwipingState(250)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(250px)");
+    });
+
+    it("behind panel reveals progressively during swipe with parallax effect", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Initial: behind panel at -30% = -120px
+      expect(element.style.transform).toBe("translateX(-120px)");
+      expect(element.style.visibility).toBe("hidden");
+
+      // Swipe 25% (100px of 400px)
+      rerender(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(100)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      // Behind moves 25% of 120px = 30px, so from -120 to -90
+      expect(element.style.transform).toBe("translateX(-90px)");
+      expect(element.style.visibility).toBe("visible");
+
+      // Swipe 50% (200px)
+      rerender(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(200)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(-60px)");
+
+      // Swipe 100% (400px) - behind should be at 0
+      rerender(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(400)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+
+    it("does not respond to negative displacement (swiping wrong direction)", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Swipe left (negative) should be clamped to 0
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createSwipingState(-100)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+  });
+
+  describe("swipe release and snap-back", () => {
+    it("returns to original position when swipe ends without navigation change", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Swipe in progress
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={createSwipingState(150)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(150px)");
+
+      // Swipe released (back to idle) - animation starts
+      rerender(
+        <SwipeStackContent
+          id="active"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Flush RAF within act() to complete the snap-back animation
+      act(() => {
+        flushRAF(0); // First flush starts the animation (sets startTime)
+        flushRAF(400); // Second flush completes the animation (elapsed > duration)
+      });
+
+      // After animation completes, should be at 0
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+
+    it("behind panel returns to hidden position when swipe is canceled", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Swipe in progress
+      rerender(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(200)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+      expect(element.style.transform).toBe("translateX(-60px)");
+      expect(element.style.visibility).toBe("visible");
+
+      // Swipe canceled - animation starts
+      rerender(
+        <SwipeStackContent
+          id="behind"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Flush RAF within act() to complete the snap-back animation
+      act(() => {
+        flushRAF(0); // First flush starts the animation (sets startTime)
+        flushRAF(400); // Second flush completes the animation (elapsed > duration)
+      });
+
+      // After animation completes, should be at -120px
+      expect(element.style.transform).toBe("translateX(-120px)");
+    });
+  });
+
+  describe("button navigation (without swipe)", () => {
+    it("animates behind panel to center when going back via button", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Initial: behind panel at -30% = -120px
+      expect(element.style.transform).toBe("translateX(-120px)");
+
+      // Button click triggers navigation change: depth 0 becomes active
+      rerender(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start: still at -120px immediately
+      // (not snapping directly to 0)
+      expect(element.style.transform).toBe("translateX(-120px)");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation completes, should be at 0
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+
+    it("animates active panel off-screen when going back via button", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Initial: active panel at 0
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Button click triggers navigation change: depth 1 becomes hidden
+      rerender(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start: still at 0px immediately
+      // (not snapping directly to 400)
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation completes, should be at 400px (off-screen)
+      expect(element.style.transform).toBe("translateX(400px)");
+    });
+  });
+
+  describe("forward navigation (push)", () => {
+    it("new panel animates in from off-screen when first mounted as active with animateOnMount", () => {
+      // Scenario: Panel is mounted for the first time as active (push navigation)
+      // This is what happens when visiblePanelIds changes to include the new panel
+      const { container } = render(
+        <SwipeStackContent
+          id="newPanel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          animateOnMount={true}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // On first mount as active with animateOnMount, panel should start at off-screen position
+      // (not at 0, which would cause a jarring pop-in)
+      expect(element.style.transform).toBe("translateX(400px)");
+
+      // Flush RAF to complete the entrance animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at center (0)
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+
+    it("pre-existing hidden panel animates in when pushed", () => {
+      // Scenario: Panel already exists but was hidden, then becomes active
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="newPanel"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Hidden panel should be at containerSize (off-screen right)
+      expect(element.style.transform).toBe("translateX(400px)");
+
+      // Push navigation: panel becomes active
+      rerender(
+        <SwipeStackContent
+          id="newPanel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start: still at 400px immediately (not snapping to 0)
+      expect(element.style.transform).toBe("translateX(400px)");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at center (0)
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+
+    it("behind panel animates to offset position when new panel is pushed", () => {
+      // First render: panel at depth 0 is active
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="currentPanel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Active panel at center
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Push navigation: this panel becomes "behind"
+      rerender(
+        <SwipeStackContent
+          id="currentPanel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start: still at 0px immediately (not snapping to -120px)
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at behind offset (-30% = -120px)
+      expect(element.style.transform).toBe("translateX(-120px)");
+    });
+  });
+
+  describe("mount → push → back sequence", () => {
+    it("panel animates from correct position after push then back", () => {
+      // This test covers the bug where:
+      // 1. Mount: root panel at depth 0, active
+      // 2. Push: new panel at depth 1 is mounted with animateOnMount
+      // 3. Back: the panel at depth 1 should animate from its current position (0) to off-screen
+
+      // Step 1: Mount panel at depth 1 as active (simulating push navigation)
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          animateOnMount={true}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+
+      // Initially at off-screen (400px) due to animateOnMount
+      expect(element.style.transform).toBe("translateX(400px)");
+
+      // Complete the push animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After push animation: should be at center (0)
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Step 2: Go back - navigation depth changes, panel becomes hidden
+      rerender(
+        <SwipeStackContent
+          id="panel1"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          animateOnMount={true}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start from current position (0px), not from initialPx (400px)
+      // The bug is that it might jump to 400px immediately because of animateOnMount logic
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Complete the back animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After back animation: should be off-screen (400px)
+      expect(element.style.transform).toBe("translateX(400px)");
+    });
+
+    it("behind panel animates correctly in mount → push → back sequence", () => {
+      // Track the behind panel (depth 0) through the sequence
+
+      // Step 1: Mount as active
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="rootPanel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Step 2: Push - this panel becomes "behind"
+      rerender(
+        <SwipeStackContent
+          id="rootPanel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation starts from 0px
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at behind offset (-120px)
+      expect(element.style.transform).toBe("translateX(-120px)");
+
+      // Step 3: Back - this panel becomes active again
+      rerender(
+        <SwipeStackContent
+          id="rootPanel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Animation should start from current position (-120px)
+      expect(element.style.transform).toBe("translateX(-120px)");
+
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at center (0)
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+  });
+
+  describe("shadow effects", () => {
+    it("shows shadow on active panel at depth > 0 by default", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.boxShadow).toBe("-5px 0 15px rgba(0, 0, 0, 0.1)");
+    });
+
+    it("does not show shadow on root panel (depth 0)", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.boxShadow).toBe("");
+    });
+
+    it("does not show shadow on behind panel", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.boxShadow).toBe("");
+    });
+
+    it("can disable shadow with showShadow=false", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          showShadow={false}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.boxShadow).toBe("");
+    });
+  });
+
+  describe("scale effects (stack displayMode)", () => {
+    it("behind panel has scale < 1 in stack mode", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          displayMode="stack"
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Transform should include scale(0.95) for 1 level behind
+      expect(element.style.transform).toContain("scale(0.95)");
+    });
+
+    it("active panel has no scale in stack mode", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          displayMode="stack"
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // Active panel should not have scale transform (or scale(1))
+      expect(element.style.transform).not.toContain("scale(0.");
+    });
+
+    it("no scale effect in overlay mode", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          displayMode="overlay"
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      // No scale in overlay mode
+      expect(element.style.transform).not.toContain("scale");
+    });
+  });
+
+  describe("dimming overlay", () => {
+    it("shows dimming overlay on behind panel by default", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const overlay = container.querySelector("[data-dimming-overlay]");
+      expect(overlay).toBeInTheDocument();
+    });
+
+    it("no dimming overlay on active panel", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const overlay = container.querySelector("[data-dimming-overlay]");
+      expect(overlay).not.toBeInTheDocument();
+    });
+
+    it("dimming fades during swipe", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // At rest, should have dimming
+      let overlay = container.querySelector("[data-dimming-overlay]") as HTMLElement;
+      expect(overlay).toBeInTheDocument();
+      const initialOpacity = overlay.style.backgroundColor;
+
+      // During swipe at 100% progress, dimming should be gone
+      rerender(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={createSwipingState(400)}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      overlay = container.querySelector("[data-dimming-overlay]") as HTMLElement;
+      // At 100% swipe, opacity should be 0 (no overlay)
+      expect(overlay).not.toBeInTheDocument();
+    });
+
+    it("can disable dimming with showDimming=false", () => {
+      const { container } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+          showDimming={false}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const overlay = container.querySelector("[data-dimming-overlay]");
+      expect(overlay).not.toBeInTheDocument();
+    });
+  });
+
+  describe("swipe commit (navigation changes)", () => {
+    it("active panel moves off-screen when navigation depth decreases", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={1}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(0px)");
+
+      // Navigation changed: depth 1 is no longer active (went back to depth 0)
+      // Panel should animate to off-screen position (containerSize = 400)
+      rerender(
+        <SwipeStackContent
+          id="panel"
+          depth={1}
+          navigationDepth={0}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Role changes to "hidden"
+      expect(element.getAttribute("data-role")).toBe("hidden");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: off-screen at containerSize
+      expect(element.style.transform).toBe("translateX(400px)");
+    });
+
+    it("behind panel becomes active and moves to center when navigation commits", () => {
+      const { container, rerender } = render(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={1}
+          isActive={false}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      const element = container.firstChild as HTMLElement;
+      expect(element.style.transform).toBe("translateX(-120px)");
+      expect(element.getAttribute("data-role")).toBe("behind");
+
+      // Navigation commits: panel at depth 0 becomes active
+      rerender(
+        <SwipeStackContent
+          id="panel"
+          depth={0}
+          navigationDepth={0}
+          isActive={true}
+          inputState={IDLE_STATE}
+          containerSize={400}
+        >
+          Content
+        </SwipeStackContent>,
+      );
+
+      // Role changes to "active"
+      expect(element.getAttribute("data-role")).toBe("active");
+
+      // Flush RAF to complete animation
+      act(() => {
+        flushRAF(0);
+        flushRAF(400);
+      });
+
+      // After animation: at center (0)
+      expect(element.style.transform).toBe("translateX(0px)");
+    });
+  });
+});