react-panel-layout 0.6.1 → 0.7.1

package/src/components/window/useRevealDrawerTransform.spec.ts

@@ -0,0 +1,1936 @@
+/**
+ * @file Tests for useRevealDrawerTransform hook.
+ *
+ * Comprehensive tests covering all operation scenarios for reveal drawer.
+ * Tests follow TDD approach to ensure animation continuity and correct state management.
+ */
+import * as React from "react";
+import { renderHook, act } from "@testing-library/react";
+import { useRevealDrawerTransform } from "./useRevealDrawerTransform.js";
+import type { UseRevealDrawerTransformOptions } from "./useRevealDrawerTransform.js";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+/**
+ * Create mock drawer element with style tracking.
+ */
+function createMockDrawer(): HTMLDivElement {
+  const element = document.createElement("div");
+  return element;
+}
+
+/**
+ * Create mock content element (simulates #root or grid container).
+ */
+function createMockContent(): HTMLDivElement {
+  const element = document.createElement("div");
+  element.id = "root";
+  document.body.appendChild(element);
+  return element;
+}
+
+/**
+ * Create idle swipe state.
+ */
+function createIdleSwipeState(): ContinuousOperationState {
+  return {
+    phase: "idle",
+    displacement: { x: 0, y: 0 },
+    velocity: { x: 0, y: 0 },
+  };
+}
+
+/**
+ * Create operating swipe state.
+ */
+function createOperatingSwipeState(displacement: { x: number; y: number }): ContinuousOperationState {
+  return {
+    phase: "operating",
+    displacement,
+    velocity: { x: 0, y: 0 },
+  };
+}
+
+/**
+ * Default options for hook.
+ */
+function createDefaultOptions(
+  drawerRef: React.RefObject<HTMLElement | null>,
+  overrides: Partial<UseRevealDrawerTransformOptions> = {},
+): UseRevealDrawerTransformOptions {
+  return {
+    drawerRef,
+    placement: "left",
+    drawerSize: 300,
+    isOpen: false,
+    swipeState: createIdleSwipeState(),
+    displacement: 0,
+    isOpening: false,
+    isClosing: false,
+    enabled: true,
+    inline: false,
+    contentBackground: "#fff",
+    ...overrides,
+  };
+}
+
+/**
+ * Setup mock requestAnimationFrame for animation testing.
+ */
+function setupAnimationFrameMock(): { runFrame: () => void; runAllFrames: () => void } {
+  const callbacks: FrameRequestCallback[] = [];
+  const counter = { frameId: 0 };
+
+  globalThis.requestAnimationFrame = (callback: FrameRequestCallback): number => {
+    callbacks.push(callback);
+    counter.frameId += 1;
+    return counter.frameId;
+  };
+
+  globalThis.cancelAnimationFrame = (): void => {
+    // Simple implementation - in real tests we might need to track by ID
+  };
+
+  return {
+    runFrame: () => {
+      const callback = callbacks.shift();
+      if (callback) {
+        callback(performance.now());
+      }
+    },
+    runAllFrames: () => {
+      while (callbacks.length > 0) {
+        const callback = callbacks.shift();
+        if (callback) {
+          callback(performance.now());
+        }
+      }
+    },
+  };
+}
+
+/**
+ * Cleanup after tests.
+ */
+function cleanup(): void {
+  const root = document.getElementById("root");
+  if (root) {
+    root.remove();
+  }
+  document.body.style.overflow = "";
+}
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe("useRevealDrawerTransform", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  // --------------------------------------------------------------------------
+  // Initial State Tests
+  // --------------------------------------------------------------------------
+
+  describe("Initial State", () => {
+    it("starts with closed phase when isOpen=false", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { result } = renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: false })),
+      );
+
+      expect(result.current.phase).toBe("closed");
+      expect(result.current.isAnimating).toBe(false);
+    });
+
+    it("starts with open phase when isOpen=true", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { result } = renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: true })),
+      );
+
+      expect(result.current.phase).toBe("open");
+      expect(result.current.isAnimating).toBe(false);
+    });
+
+    it("drawer is hidden initially when closed", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: false })),
+      );
+
+      expect(drawer.style.visibility).toBe("hidden");
+      expect(drawer.style.pointerEvents).toBe("none");
+    });
+
+    it("drawer is visible initially when open", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: true })),
+      );
+
+      // When open, drawer should be visible with correct transform
+      expect(drawer.style.visibility).toBe("visible");
+      expect(drawer.style.pointerEvents).toBe("auto");
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Swipe Opening Tests
+  // --------------------------------------------------------------------------
+
+  describe("Opening via Swipe", () => {
+    it("drawer becomes visible when swipe starts", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Start opening swipe
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 50, y: 0 }),
+        displacement: 50,
+        isOpening: true,
+      }));
+
+      expect(drawer.style.visibility).toBe("visible");
+    });
+
+    it("drawer transform updates during swipe", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Swipe to 50%
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 150, y: 0 }),
+        displacement: 150,
+        isOpening: true,
+      }));
+
+      // Drawer should have transform applied
+      expect(drawer.style.transform).not.toBe("");
+      expect(drawer.style.transform).toContain("translate");
+    });
+
+    it("content transform updates during swipe", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      const content = createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Swipe to 50%
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 150, y: 0 }),
+        displacement: 150,
+        isOpening: true,
+      }));
+
+      // Content should have transform applied
+      expect(content.style.transform).not.toBe("");
+      expect(content.style.transform).toContain("translate");
+    });
+
+    it("stacking context is applied to content during swipe", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      const content = createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Start opening swipe
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 50, y: 0 }),
+        displacement: 50,
+        isOpening: true,
+      }));
+
+      expect(content.style.position).toBe("relative");
+      expect(content.style.zIndex).toBe("1");
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Animation Continuity Tests (Critical for preventing jumps)
+  // --------------------------------------------------------------------------
+
+  describe("Animation Continuity", () => {
+    it("preserves position when swipe ends - no jump", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Swipe to 50%
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 150, y: 0 }),
+        displacement: 150,
+        isOpening: true,
+      }));
+
+      // End swipe - isOpening becomes false, displacement resets
+      // This simulates the multi-render issue where isOpen changes after
+      rerender(createDefaultOptions(ref, {
+        isOpen: false, // Not yet updated
+        swipeState: createIdleSwipeState(),
+        displacement: 0, // Reset!
+        isOpening: false, // No longer opening
+        isClosing: false,
+      }));
+
+      // Transform should NOT have jumped to closed position
+      // It should either be the same (preserved) or animation started
+      // The key assertion: transform should not reset to closed position immediately
+      expect(drawer.style.transform).not.toBe("");
+    });
+
+    it("starts animation from current position when swipe ends with threshold crossed", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Swipe past threshold (50%)
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 200, y: 0 }),
+        displacement: 200,
+        isOpening: true,
+      }));
+
+      // End swipe with isOpen changing to true
+      act(() => {
+        rerender(createDefaultOptions(ref, {
+          isOpen: true, // Now open!
+          swipeState: createIdleSwipeState(),
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+        }));
+      });
+
+      // Should be animating to open position
+      expect(result.current.phase).toBe("opening");
+      expect(result.current.isAnimating).toBe(true);
+    });
+
+    it("starts animation from current position when swipe ends without threshold crossed", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Swipe just a bit (not past threshold)
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        swipeState: createOperatingSwipeState({ x: 50, y: 0 }),
+        displacement: 50,
+        isOpening: true,
+      }));
+
+      // End swipe - isOpen stays false
+      act(() => {
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createIdleSwipeState(),
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+        }));
+      });
+
+      // Should be animating back to closed position
+      expect(result.current.phase).toBe("closing");
+      expect(result.current.isAnimating).toBe(true);
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Stable State Tests (Critical for "open but shows closed" bug)
+  // --------------------------------------------------------------------------
+
+  describe("Stable Open State", () => {
+    it("drawer remains visible after opening animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Trigger open via button (non-swipe)
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      // Drawer should remain visible
+      expect(drawer.style.visibility).toBe("visible");
+      expect(drawer.style.pointerEvents).toBe("auto");
+    });
+
+    it("drawer has correct transform after opening animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Trigger open
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      // Drawer should be at open position (translateX(0px) for left placement)
+      expect(drawer.style.transform).toContain("0px");
+    });
+
+    it("content has correct transform after opening animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      const content = createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        {
+          initialProps: createDefaultOptions(ref, {
+            isOpen: false,
+            drawerSize: 300,
+          }),
+        },
+      );
+
+      // Trigger open
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      // Content should be offset by drawer size
+      expect(content.style.transform).toContain("300px");
+    });
+
+    it("phase becomes open after animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Trigger open
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      expect(result.current.phase).toBe("open");
+      expect(result.current.isAnimating).toBe(false);
+    });
+  });
+
+  describe("Stable Closed State", () => {
+    it("drawer is hidden after closing animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Trigger close
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      expect(drawer.style.visibility).toBe("hidden");
+      expect(drawer.style.pointerEvents).toBe("none");
+    });
+
+    it("content transform is cleared after closing animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      const content = createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Trigger close
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      expect(content.style.transform).toBe("");
+    });
+
+    it("stacking context is cleared after closing animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      const content = createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Trigger close
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      expect(content.style.position).toBe("");
+      expect(content.style.zIndex).toBe("");
+      expect(content.style.background).toBe("");
+    });
+
+    it("phase becomes closed after closing animation completes", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Trigger close
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+
+      // Run animation to completion
+      act(() => {
+        runAllFrames();
+      });
+
+      expect(result.current.phase).toBe("closed");
+      expect(result.current.isAnimating).toBe(false);
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Non-Swipe State Change Tests (Button clicks)
+  // --------------------------------------------------------------------------
+
+  describe("Non-Swipe State Changes (Button)", () => {
+    it("animates from closed to open when isOpen changes to true", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Click open button
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+
+      expect(result.current.phase).toBe("opening");
+      expect(result.current.isAnimating).toBe(true);
+      expect(drawer.style.visibility).toBe("visible");
+    });
+
+    it("animates from open to closed when isOpen changes to false", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Click close button
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+
+      expect(result.current.phase).toBe("closing");
+      expect(result.current.isAnimating).toBe(true);
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Closing via Swipe Tests
+  // --------------------------------------------------------------------------
+
+  describe("Closing via Swipe", () => {
+    it("drawer transform updates during close swipe", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Start closing swipe
+      rerender(createDefaultOptions(ref, {
+        isOpen: true,
+        swipeState: createOperatingSwipeState({ x: -50, y: 0 }),
+        displacement: 50, // Displacement is absolute
+        isClosing: true,
+      }));
+
+      expect(drawer.style.transform).not.toBe("");
+    });
+
+    it("animates to closed when close swipe crosses threshold", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Swipe past threshold
+      rerender(createDefaultOptions(ref, {
+        isOpen: true,
+        swipeState: createOperatingSwipeState({ x: -150, y: 0 }),
+        displacement: 150,
+        isClosing: true,
+      }));
+
+      // End swipe with isOpen changing to false
+      act(() => {
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createIdleSwipeState(),
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+        }));
+      });
+
+      expect(result.current.phase).toBe("closing");
+      expect(result.current.isAnimating).toBe(true);
+    });
+
+    it("animates back to open when close swipe does not cross threshold", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Swipe just a bit
+      rerender(createDefaultOptions(ref, {
+        isOpen: true,
+        swipeState: createOperatingSwipeState({ x: -30, y: 0 }),
+        displacement: 30,
+        isClosing: true,
+      }));
+
+      // End swipe - isOpen stays true
+      act(() => {
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createIdleSwipeState(),
+          displacement: 0,
+          isOpening: false,
+          isClosing: false,
+        }));
+      });
+
+      expect(result.current.phase).toBe("opening");
+      expect(result.current.isAnimating).toBe(true);
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+
+  describe("Edge Cases", () => {
+    it("handles disabled state correctly", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false, enabled: true }) },
+      );
+
+      // Disable the hook
+      rerender(createDefaultOptions(ref, { isOpen: false, enabled: false }));
+
+      // Transform should be cleared, but visibility stays hidden
+      // (disabled drawer should not become visible)
+      expect(drawer.style.transform).toBe("");
+      expect(drawer.style.visibility).toBe("hidden");
+    });
+
+    it("handles null drawer ref gracefully", () => {
+      const nullRef: React.RefObject<HTMLElement | null> = { current: null };
+      createMockContent();
+
+      const { result } = renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(nullRef, { isOpen: false })),
+      );
+
+      // Should not throw and have default state
+      expect(result.current.phase).toBe("closed");
+      expect(result.current.isAnimating).toBe(false);
+    });
+
+    it("handles content element not found gracefully", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      // Don't create content element
+
+      const { result } = renderHook(() =>
+        useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: false })),
+      );
+
+      // Should not throw
+      expect(result.current.phase).toBe("closed");
+    });
+
+    it("handles rapid open/close toggles", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      const { result, rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+      );
+
+      // Rapid toggles
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: false }));
+      });
+      act(() => {
+        rerender(createDefaultOptions(ref, { isOpen: true }));
+      });
+
+      // Should handle without error and be in some valid state
+      expect(["opening", "closing", "open", "closed"]).toContain(result.current.phase);
+    });
+
+    it("applies overflow hidden during animation", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      setupAnimationFrameMock();
+
+      renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+      );
+
+      // Body should have overflow hidden when open
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Abnormal User Behavior Tests (Edge cases for unusual interactions)
+  // --------------------------------------------------------------------------
+
+  describe("Abnormal User Behaviors", () => {
+    describe("Opening attempt then give up", () => {
+      it("animates back to closed when user starts opening but gives up before threshold", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Start opening swipe
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createOperatingSwipeState({ x: 80, y: 0 }),
+          displacement: 80, // ~27% of 300, below threshold
+          isOpening: true,
+        }));
+
+        expect(drawer.style.visibility).toBe("visible");
+        const transformDuringSwipe = drawer.style.transform;
+        expect(transformDuringSwipe).not.toBe("");
+
+        // User gives up - releases without crossing threshold
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false, // Stays closed
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should animate back to closed
+        expect(result.current.phase).toBe("closing");
+        expect(result.current.isAnimating).toBe(true);
+      });
+
+      it("drawer becomes hidden after give-up animation completes", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        const { runAllFrames } = setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Start then give up
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createOperatingSwipeState({ x: 50, y: 0 }),
+          displacement: 50,
+          isOpening: true,
+        }));
+
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Run animation to completion
+        act(() => {
+          runAllFrames();
+        });
+
+        expect(result.current.phase).toBe("closed");
+        expect(drawer.style.visibility).toBe("hidden");
+      });
+    });
+
+    describe("Closing attempt then give up", () => {
+      it("animates back to open when user starts closing but gives up before threshold", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+        );
+
+        // Start closing swipe
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createOperatingSwipeState({ x: -50, y: 0 }),
+          displacement: 50, // Below 30% threshold
+          isClosing: true,
+        }));
+
+        // User gives up - releases without crossing threshold
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true, // Stays open
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should animate back to open
+        expect(result.current.phase).toBe("opening");
+        expect(result.current.isAnimating).toBe(true);
+      });
+
+      it("drawer remains visible after give-up animation completes", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        const { runAllFrames } = setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+        );
+
+        // Start closing then give up
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createOperatingSwipeState({ x: -40, y: 0 }),
+          displacement: 40,
+          isClosing: true,
+        }));
+
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Run animation to completion
+        act(() => {
+          runAllFrames();
+        });
+
+        expect(result.current.phase).toBe("open");
+        expect(drawer.style.visibility).toBe("visible");
+      });
+    });
+
+    describe("Incremental small movements (jittery swipe)", () => {
+      it("tracks position correctly during jittery opening swipe", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+
+        const { rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Small incremental movements
+        const positions = [10, 15, 12, 20, 18, 25, 30, 28, 35];
+        const transforms: string[] = [];
+
+        for (const pos of positions) {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createOperatingSwipeState({ x: pos, y: 0 }),
+            displacement: pos,
+            isOpening: true,
+          }));
+          transforms.push(drawer.style.transform);
+        }
+
+        // Each position should have a valid transform
+        for (const transform of transforms) {
+          expect(transform).not.toBe("");
+          expect(transform).toContain("translate");
+        }
+      });
+
+      it("tracks position correctly during jittery closing swipe then give up", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+        );
+
+        // Jittery closing movements
+        const positions = [10, 15, 12, 20, 18, 25, 20, 15, 10];
+
+        for (const pos of positions) {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            swipeState: createOperatingSwipeState({ x: -pos, y: 0 }),
+            displacement: pos,
+            isClosing: true,
+          }));
+        }
+
+        // Give up - didn't cross threshold
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should animate back to open
+        expect(result.current.phase).toBe("opening");
+        expect(result.current.isAnimating).toBe(true);
+      });
+    });
+
+    describe("Overshoot then reverse", () => {
+      it("handles overshoot opening then reverse to close", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Overshoot past threshold (past 100%)
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createOperatingSwipeState({ x: 350, y: 0 }),
+          displacement: 350, // More than drawer size (300)
+          isOpening: true,
+        }));
+
+        expect(drawer.style.visibility).toBe("visible");
+
+        // Pull back below threshold
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createOperatingSwipeState({ x: 50, y: 0 }),
+          displacement: 50, // Back below threshold
+          isOpening: true,
+        }));
+
+        // Release - should close because below threshold
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false, // Didn't cross threshold on release
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should animate to closed
+        expect(result.current.phase).toBe("closing");
+        expect(result.current.isAnimating).toBe(true);
+      });
+
+      it("handles overshoot closing then reverse to stay open", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+        );
+
+        // Overshoot past close threshold
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createOperatingSwipeState({ x: -200, y: 0 }),
+          displacement: 200, // Well past 30% threshold
+          isClosing: true,
+        }));
+
+        // Pull back below threshold
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createOperatingSwipeState({ x: -30, y: 0 }),
+          displacement: 30, // Back below threshold
+          isClosing: true,
+        }));
+
+        // Release - should stay open because below threshold
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true, // Stays open
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should animate back to open
+        expect(result.current.phase).toBe("opening");
+        expect(result.current.isAnimating).toBe(true);
+      });
+
+      it("preserves transform continuity during overshoot and reverse", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+
+        const { rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Track transforms during the sequence
+        const sequence = [
+          { displacement: 100, expected: "moving forward" },
+          { displacement: 200, expected: "more forward" },
+          { displacement: 300, expected: "at full open" },
+          { displacement: 350, expected: "overshoot" },
+          { displacement: 300, expected: "pulling back" },
+          { displacement: 200, expected: "more back" },
+          { displacement: 100, expected: "back to 1/3" },
+          { displacement: 50, expected: "below threshold" },
+        ];
+
+        const transforms: string[] = [];
+
+        for (const step of sequence) {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createOperatingSwipeState({ x: step.displacement, y: 0 }),
+            displacement: step.displacement,
+            isOpening: true,
+          }));
+          transforms.push(drawer.style.transform);
+        }
+
+        // All transforms should be valid (no empty strings or undefined)
+        for (const transform of transforms) {
+          expect(transform).not.toBe("");
+          expect(transform).toContain("translateX");
+        }
+
+        // Transforms should actually change with displacement
+        const uniqueTransforms = new Set(transforms);
+        expect(uniqueTransforms.size).toBeGreaterThan(1);
+      });
+    });
+
+    describe("Interrupted animations", () => {
+      it("handles swipe interrupting an opening animation", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Start opening via button
+        act(() => {
+          rerender(createDefaultOptions(ref, { isOpen: true }));
+        });
+
+        expect(result.current.isAnimating).toBe(true);
+
+        // User starts swiping during animation
+        rerender(createDefaultOptions(ref, {
+          isOpen: true,
+          swipeState: createOperatingSwipeState({ x: -50, y: 0 }),
+          displacement: 50,
+          isClosing: true,
+        }));
+
+        // Animation should be cancelled during operation
+        expect(result.current.isAnimating).toBe(false);
+      });
+
+      it("handles swipe interrupting a closing animation", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: true }) },
+        );
+
+        // Start closing via button
+        act(() => {
+          rerender(createDefaultOptions(ref, { isOpen: false }));
+        });
+
+        expect(result.current.isAnimating).toBe(true);
+
+        // User starts swiping during animation (trying to reopen)
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          swipeState: createOperatingSwipeState({ x: 100, y: 0 }),
+          displacement: 100,
+          isOpening: true,
+        }));
+
+        // Animation should be cancelled during operation
+        expect(result.current.isAnimating).toBe(false);
+      });
+    });
+
+    describe("Multiple direction changes during single gesture", () => {
+      it("handles back-and-forth movement during opening", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+
+        const { rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Simulate back-and-forth user movement
+        const movements = [50, 100, 80, 150, 120, 200, 180, 250, 200, 280];
+
+        for (const displacement of movements) {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createOperatingSwipeState({ x: displacement, y: 0 }),
+            displacement,
+            isOpening: true,
+          }));
+
+          // Should always have valid transform
+          expect(drawer.style.transform).not.toBe("");
+          expect(drawer.style.visibility).toBe("visible");
+        }
+      });
+    });
+
+    describe("Edge: Very small movements", () => {
+      it("handles micro-movements without breaking", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false }) },
+        );
+
+        // Very small movements (1-5 pixels)
+        for (let i = 1; i <= 5; i++) {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createOperatingSwipeState({ x: i, y: 0 }),
+            displacement: i,
+            isOpening: true,
+          }));
+        }
+
+        // Release with tiny displacement
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // Should handle gracefully
+        expect(["closing", "closed"]).toContain(result.current.phase);
+      });
+    });
+
+    describe("Edge: Maximum displacement (beyond drawer size)", () => {
+      it("handles displacement larger than drawer size", () => {
+        const drawer = createMockDrawer();
+        const ref = { current: drawer };
+        createMockContent();
+        setupAnimationFrameMock();
+
+        const { result, rerender } = renderHook(
+          (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+          { initialProps: createDefaultOptions(ref, { isOpen: false, drawerSize: 300 }) },
+        );
+
+        // Displacement way beyond drawer size
+        rerender(createDefaultOptions(ref, {
+          isOpen: false,
+          drawerSize: 300,
+          swipeState: createOperatingSwipeState({ x: 500, y: 0 }),
+          displacement: 500, // 167% of drawer size
+          isOpening: true,
+        }));
+
+        // Should handle without error
+        expect(drawer.style.transform).not.toBe("");
+
+        // Release
+        act(() => {
+          rerender(createDefaultOptions(ref, {
+            isOpen: true, // Threshold crossed
+            drawerSize: 300,
+            swipeState: createIdleSwipeState(),
+            displacement: 0,
+            isOpening: false,
+            isClosing: false,
+          }));
+        });
+
+        // When overshoot > 100%, we're already at target, so may snap directly to "open"
+        // or animate if there's a small distance
+        expect(["opening", "open"]).toContain(result.current.phase);
+      });
+    });
+
+    // =========================================================================
+    // Overshoot Issues (Critical bugs to fix)
+    // =========================================================================
+
+    describe("Overshoot Issues", () => {
+      describe("Opening with overshoot should stay open", () => {
+        it("drawer stays open when released at overshoot position", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          createMockContent();
+          const { runAllFrames } = setupAnimationFrameMock();
+
+          const { result, rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: false, drawerSize: 300 }) },
+          );
+
+          // Overshoot past 100% - swipe to 400px when drawer is 300px
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: 400, y: 0 }),
+            displacement: 400,
+            isOpening: true,
+          }));
+
+          // Drawer should be fully visible (progress clamped to 1)
+          expect(drawer.style.visibility).toBe("visible");
+
+          // Release at overshoot position - isOpen should become true
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: true, // Threshold definitely crossed
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // When at overshoot position, we're already at target, so may snap to "open" directly
+          // The key assertion: drawer should NOT be closing
+          expect(["opening", "open"]).toContain(result.current.phase);
+          expect(drawer.style.visibility).toBe("visible");
+
+          // Run animation to completion (if any)
+          act(() => {
+            runAllFrames();
+          });
+
+          // Final state should be open
+          expect(result.current.phase).toBe("open");
+          expect(drawer.style.visibility).toBe("visible");
+        });
+
+        it("drawer transform is at open position after overshoot release", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          createMockContent();
+          const { runAllFrames } = setupAnimationFrameMock();
+
+          const { rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: false, drawerSize: 300 }) },
+          );
+
+          // Overshoot
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: 350, y: 0 }),
+            displacement: 350,
+            isOpening: true,
+          }));
+
+          // Release
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: true,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // Run to completion
+          act(() => {
+            runAllFrames();
+          });
+
+          // Drawer should be at 0px (fully open) for left placement
+          expect(drawer.style.transform).toBe("translateX(0px)");
+        });
+
+        it("content is offset by drawer size after overshoot open", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          const content = createMockContent();
+          const { runAllFrames } = setupAnimationFrameMock();
+
+          const { rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: false, drawerSize: 300 }) },
+          );
+
+          // Overshoot and release
+          rerender(createDefaultOptions(ref, {
+            isOpen: false,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: 400, y: 0 }),
+            displacement: 400,
+            isOpening: true,
+          }));
+
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: true,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          act(() => {
+            runAllFrames();
+          });
+
+          // Content should be offset by 300px
+          expect(content.style.transform).toBe("translateX(300px)");
+        });
+      });
+
+      describe("Closing with overshoot should not cause content jump", () => {
+        it("content position is correct during and after overshoot close", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          const content = createMockContent();
+          setupAnimationFrameMock();
+
+          const { result, rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }) },
+          );
+
+          // Overshoot close - swipe past the drawer size
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: -350, y: 0 }),
+            displacement: 350, // Overshoot past drawer size
+            isClosing: true,
+          }));
+
+          // Content should be at 0px (closed position) due to progress clamping
+          // Progress = 1 - 350/300 = clamped to 0
+          const duringOvershootTransform = content.style.transform;
+          expect(duringOvershootTransform).toBe("translateX(0px)");
+
+          // Release at overshoot
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: false, // Threshold crossed
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // Since we're already at target (0px), should go directly to closed
+          // No animation needed - distance is 0
+          expect(result.current.phase).toBe("closed");
+
+          // Content transform should be cleared (we were already at target)
+          expect(content.style.transform).toBe("");
+        });
+
+        it("content does not jump when closing with partial overshoot", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          const content = createMockContent();
+          const { runFrame } = setupAnimationFrameMock();
+
+          const { result, rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }) },
+          );
+
+          // Close swipe not quite at overshoot - should still animate
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: -250, y: 0 }),
+            displacement: 250,
+            isClosing: true,
+          }));
+
+          // Progress = 1 - 250/300 ≈ 0.167, content at ~50px
+          const duringSwipeTransform = content.style.transform;
+          // Use regex to match approximately 50px (floating point precision)
+          expect(duringSwipeTransform).toMatch(/translateX\(49\.9+|translateX\(50/);
+
+          // Release
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: false,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // Should be animating (distance = 50 > 1)
+          expect(result.current.phase).toBe("closing");
+          expect(result.current.isAnimating).toBe(true);
+
+          // First animation frame - content should be close to 50px, not jumping
+          act(() => {
+            runFrame();
+          });
+
+          // Content should be animating from ~50px toward 0px
+          // At very start of animation, should be close to starting position
+          const afterFirstFrame = content.style.transform;
+          expect(afterFirstFrame).toContain("px");
+          // Should not have jumped to some random position
+        });
+
+        it("drawer hides correctly after overshoot close completes", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          createMockContent();
+          const { runAllFrames } = setupAnimationFrameMock();
+
+          const { result, rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }) },
+          );
+
+          // Overshoot close
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: -400, y: 0 }),
+            displacement: 400,
+            isClosing: true,
+          }));
+
+          // Release
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: false,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // Run animation
+          act(() => {
+            runAllFrames();
+          });
+
+          // Drawer should be hidden
+          expect(result.current.phase).toBe("closed");
+          expect(drawer.style.visibility).toBe("hidden");
+        });
+
+        it("content transform is cleared after overshoot close completes", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          const content = createMockContent();
+          const { runAllFrames } = setupAnimationFrameMock();
+
+          const { rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }) },
+          );
+
+          // Overshoot and release
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: -350, y: 0 }),
+            displacement: 350,
+            isClosing: true,
+          }));
+
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: false,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          act(() => {
+            runAllFrames();
+          });
+
+          // Content transform should be cleared (back to normal)
+          expect(content.style.transform).toBe("");
+        });
+
+        it("no CSS transition on content during close animation", () => {
+          const drawer = createMockDrawer();
+          const ref = { current: drawer };
+          const content = createMockContent();
+          setupAnimationFrameMock();
+
+          const { rerender } = renderHook(
+            (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+            { initialProps: createDefaultOptions(ref, { isOpen: true, drawerSize: 300 }) },
+          );
+
+          // Close swipe
+          rerender(createDefaultOptions(ref, {
+            isOpen: true,
+            drawerSize: 300,
+            swipeState: createOperatingSwipeState({ x: -200, y: 0 }),
+            displacement: 200,
+            isClosing: true,
+          }));
+
+          // During swipe - no transition
+          expect(content.style.transition).toBe("none");
+
+          // Release
+          act(() => {
+            rerender(createDefaultOptions(ref, {
+              isOpen: false,
+              drawerSize: 300,
+              swipeState: createIdleSwipeState(),
+              displacement: 0,
+              isOpening: false,
+              isClosing: false,
+            }));
+          });
+
+          // During animation - still no CSS transition (using RAF)
+          expect(content.style.transition).toBe("none");
+        });
+      });
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // Placement Tests
+  // --------------------------------------------------------------------------
+
+  describe("Placement Variations", () => {
+    it("uses translateX for left placement", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false, placement: "left" }) },
+      );
+
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        placement: "left",
+        swipeState: createOperatingSwipeState({ x: 100, y: 0 }),
+        displacement: 100,
+        isOpening: true,
+      }));
+
+      expect(drawer.style.transform).toContain("translateX");
+    });
+
+    it("uses translateX for right placement", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false, placement: "right" }) },
+      );
+
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        placement: "right",
+        swipeState: createOperatingSwipeState({ x: -100, y: 0 }),
+        displacement: 100,
+        isOpening: true,
+      }));
+
+      expect(drawer.style.transform).toContain("translateX");
+    });
+
+    it("uses translateY for top placement", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false, placement: "top" }) },
+      );
+
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        placement: "top",
+        swipeState: createOperatingSwipeState({ x: 0, y: 100 }),
+        displacement: 100,
+        isOpening: true,
+      }));
+
+      expect(drawer.style.transform).toContain("translateY");
+    });
+
+    it("uses translateY for bottom placement", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        { initialProps: createDefaultOptions(ref, { isOpen: false, placement: "bottom" }) },
+      );
+
+      rerender(createDefaultOptions(ref, {
+        isOpen: false,
+        placement: "bottom",
+        swipeState: createOperatingSwipeState({ x: 0, y: -100 }),
+        displacement: 100,
+        isOpening: true,
+      }));
+
+      expect(drawer.style.transform).toContain("translateY");
+    });
+  });
+
+  // --------------------------------------------------------------------------
+  // React Strict Mode Compatibility Tests
+  // --------------------------------------------------------------------------
+
+  describe("React StrictMode Compatibility", () => {
+    /**
+     * CRITICAL: These tests verify the hook works correctly in StrictMode.
+     *
+     * In StrictMode, React calls the render function twice and mounts/unmounts
+     * effects to catch bugs. The drawer hook must handle this correctly:
+     * - Drawer visibility must be set on initial mount
+     * - Cleanup must not break subsequent mounts
+     */
+    const StrictModeWrapper = ({ children }: { children: React.ReactNode }): React.ReactNode => {
+      return React.createElement(React.StrictMode, null, children);
+    };
+
+    it("drawer is hidden on initial render when closed (Strict Mode)", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      renderHook(
+        () => useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: false })),
+        { wrapper: StrictModeWrapper },
+      );
+
+      // After StrictMode's double-mount, drawer should still be hidden
+      expect(drawer.style.visibility).toBe("hidden");
+      expect(drawer.style.pointerEvents).toBe("none");
+    });
+
+    it("drawer is visible on initial render when open (Strict Mode)", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      renderHook(
+        () => useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: true })),
+        { wrapper: StrictModeWrapper },
+      );
+
+      // After StrictMode's double-mount, drawer should still be visible
+      expect(drawer.style.visibility).toBe("visible");
+      expect(drawer.style.pointerEvents).toBe("auto");
+    });
+
+    it("drawer visibility survives StrictMode double-mount cycle", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+      const { runAllFrames } = setupAnimationFrameMock();
+
+      // Start closed
+      const { rerender } = renderHook(
+        (props: UseRevealDrawerTransformOptions) => useRevealDrawerTransform(props),
+        {
+          initialProps: createDefaultOptions(ref, { isOpen: false }),
+          wrapper: StrictModeWrapper,
+        },
+      );
+
+      expect(drawer.style.visibility).toBe("hidden");
+
+      // Open drawer
+      rerender(createDefaultOptions(ref, { isOpen: true }));
+      expect(drawer.style.visibility).toBe("visible");
+
+      // Close drawer - animation starts
+      rerender(createDefaultOptions(ref, { isOpen: false }));
+      // During animation, drawer is still visible
+
+      // Complete animation
+      act(() => {
+        runAllFrames();
+      });
+
+      // After animation, drawer should be hidden
+      expect(drawer.style.visibility).toBe("hidden");
+    });
+
+    it("body overflow is cleared on unmount (navigation scenario)", () => {
+      const drawer = createMockDrawer();
+      const ref = { current: drawer };
+      createMockContent();
+
+      // Open drawer with body overflow
+      const { unmount } = renderHook(
+        () => useRevealDrawerTransform(createDefaultOptions(ref, { isOpen: true })),
+        { wrapper: StrictModeWrapper },
+      );
+
+      // Body should have overflow hidden when drawer is open
+      expect(document.body.style.overflow).toBe("hidden");
+
+      // Unmount (simulates navigation)
+      unmount();
+
+      // Body overflow should be cleared
+      expect(document.body.style.overflow).toBe("");
+    });
+  });
+});