feat(expo): AssistiveTouch-style edge-snap drag for the launcher

Users were asking to drag the launcher anywhere along the edge of the
screen, not just to one of four corners. Switch to iOS AssistiveTouch
behavior: free movement during drag, then snap on release to whichever
of the four screen edges (left/right/top/bottom) is nearest, preserving
the position along that edge. The launcher can never end up parked
mid-screen.

- Extract pure geometry to launcher-geometry.ts (anchor types, bounds,
  edge-snap math) so it's unit-testable without RN/Animated/AsyncStorage.
  Tests cover anchor parsing, bound computation, anchor → center
  projection, drop-point → nearest-edge resolution, clamping, and
  tie-break determinism.
- launcher.tsx now drives an Animated.ValueXY for absolute top-left
  position and springs to the resolved edge anchor on drag end. A JS-side
  ref mirrors the animated value so onStart can read the current position
  without touching Animated's private _value field. Window-resize listener
  recomputes bounds on rotation.
- Persistence migrates @reprojs/expo/launcher-corner/v1 (Corner string)
  → @reprojs/expo/launcher-edge/v2 ({edge, along} JSON). The v1 key is
  read once as a fallback so users on the previous SDK keep their
  preferred side after upgrade.
- `position` prop still accepts the four Corner values for back-compat as
  the initial position before persistence kicks in. No public API break.
- Update docs/guide/expo.md to describe the new behavior.

No standalone tests for the React component itself — covering it
properly would require mocking RN gesture-handler, Animated, AsyncStorage,
and Dimensions, which is out of scope. The geometry module owns the
non-trivial logic and is fully tested.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Ripwords

docs/guide/expo.md

@@ -104,7 +104,9 @@ The report lands in your dashboard's inbox with a Mobile / iOS / Android platfor
 
 ## Draggable launcher
 
-The launcher is draggable to any of the four corners. Drag anywhere on screen, release, and it snaps (spring-animated) to the nearest corner. The choice persists across app restarts via AsyncStorage. Disable the behavior if you want a fixed position:
+The launcher drags AssistiveTouch-style: free movement during the drag, and on release it springs to the nearest screen edge (left, right, top, or bottom) with the position along that edge preserved. It can never end up parked in the middle of the screen. The chosen edge + along-axis position persists across app restarts via AsyncStorage.
+
+Pass `position` as the initial corner before the user has dragged it; after the first drag, the persisted position takes over. Disable dragging entirely with `draggable={false}` to pin the launcher to `position`:
 
 ```tsx
 <ReproLauncher draggable={false} position="top-right" />

packages/expo/src/launcher-geometry.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, test } from "bun:test"
+import {
+  anchorToCenter,
+  computeBounds,
+  cornerToAnchor,
+  isAnchor,
+  nearestEdgeAnchor,
+} from "./launcher-geometry"
+
+const SIZE = 52
+const MARGIN = 24
+const WIN = { width: 400, height: 800 }
+const OFFSET = {} as const
+
+describe("cornerToAnchor", () => {
+  test("bottom-right → right edge bottom", () => {
+    expect(cornerToAnchor("bottom-right")).toEqual({ edge: "right", along: 1 })
+  })
+  test("bottom-left → left edge bottom", () => {
+    expect(cornerToAnchor("bottom-left")).toEqual({ edge: "left", along: 1 })
+  })
+  test("top-right → right edge top", () => {
+    expect(cornerToAnchor("top-right")).toEqual({ edge: "right", along: 0 })
+  })
+  test("top-left → left edge top", () => {
+    expect(cornerToAnchor("top-left")).toEqual({ edge: "left", along: 0 })
+  })
+})
+
+describe("isAnchor", () => {
+  test("accepts a well-formed anchor", () => {
+    expect(isAnchor({ edge: "left", along: 0.5 })).toBe(true)
+    expect(isAnchor({ edge: "right", along: 0 })).toBe(true)
+    expect(isAnchor({ edge: "top", along: 1 })).toBe(true)
+    expect(isAnchor({ edge: "bottom", along: 0.25 })).toBe(true)
+  })
+  test("rejects unknown edges", () => {
+    expect(isAnchor({ edge: "diagonal", along: 0.5 })).toBe(false)
+  })
+  test("rejects out-of-range along", () => {
+    expect(isAnchor({ edge: "left", along: -0.1 })).toBe(false)
+    expect(isAnchor({ edge: "left", along: 1.1 })).toBe(false)
+  })
+  test("rejects missing fields and non-objects", () => {
+    expect(isAnchor({ edge: "left" })).toBe(false)
+    expect(isAnchor({ along: 0.5 })).toBe(false)
+    expect(isAnchor(null)).toBe(false)
+    expect(isAnchor("left")).toBe(false)
+    expect(isAnchor(undefined)).toBe(false)
+  })
+})
+
+describe("computeBounds", () => {
+  test("uses DEFAULT_MARGIN + half-size to keep the launcher fully on-screen", () => {
+    const b = computeBounds(OFFSET, WIN)
+    expect(b.minX).toBe(MARGIN + SIZE / 2)
+    expect(b.maxX).toBe(WIN.width - MARGIN - SIZE / 2)
+    expect(b.minY).toBe(MARGIN + SIZE / 2)
+    expect(b.maxY).toBe(WIN.height - MARGIN - SIZE / 2)
+  })
+  test("respects explicit per-side offsets", () => {
+    const b = computeBounds({ top: 60, bottom: 30, left: 10, right: 40 }, WIN)
+    expect(b.minX).toBe(10 + SIZE / 2)
+    expect(b.maxX).toBe(WIN.width - 40 - SIZE / 2)
+    expect(b.minY).toBe(60 + SIZE / 2)
+    expect(b.maxY).toBe(WIN.height - 30 - SIZE / 2)
+  })
+})
+
+describe("anchorToCenter", () => {
+  const b = computeBounds(OFFSET, WIN)
+  test("left edge along=0 → top-left bound center", () => {
+    expect(anchorToCenter({ edge: "left", along: 0 }, b)).toEqual({ x: b.minX, y: b.minY })
+  })
+  test("left edge along=1 → bottom-left bound center", () => {
+    expect(anchorToCenter({ edge: "left", along: 1 }, b)).toEqual({ x: b.minX, y: b.maxY })
+  })
+  test("right edge along=0.5 → middle-right", () => {
+    expect(anchorToCenter({ edge: "right", along: 0.5 }, b)).toEqual({
+      x: b.maxX,
+      y: b.minY + (b.maxY - b.minY) / 2,
+    })
+  })
+  test("top edge along=0.5 → middle-top", () => {
+    expect(anchorToCenter({ edge: "top", along: 0.5 }, b)).toEqual({
+      x: b.minX + (b.maxX - b.minX) / 2,
+      y: b.minY,
+    })
+  })
+  test("bottom edge along=1 → bottom-right bound center", () => {
+    expect(anchorToCenter({ edge: "bottom", along: 1 }, b)).toEqual({ x: b.maxX, y: b.maxY })
+  })
+  test("clamps along to [0, 1]", () => {
+    expect(anchorToCenter({ edge: "left", along: -1 }, b)).toEqual({ x: b.minX, y: b.minY })
+    expect(anchorToCenter({ edge: "left", along: 2 }, b)).toEqual({ x: b.minX, y: b.maxY })
+  })
+})
+
+describe("nearestEdgeAnchor", () => {
+  const b = computeBounds(OFFSET, WIN)
+  test("point near the left edge → left", () => {
+    const r = nearestEdgeAnchor({ x: b.minX + 5, y: WIN.height / 2 }, b)
+    expect(r.edge).toBe("left")
+    expect(r.along).toBeGreaterThan(0.4)
+    expect(r.along).toBeLessThan(0.6)
+  })
+  test("point near the right edge mid-height → right with along ~0.5", () => {
+    const r = nearestEdgeAnchor({ x: b.maxX - 5, y: WIN.height / 2 }, b)
+    expect(r.edge).toBe("right")
+    expect(r.along).toBeGreaterThan(0.4)
+    expect(r.along).toBeLessThan(0.6)
+  })
+  test("point near the top edge → top", () => {
+    const r = nearestEdgeAnchor({ x: WIN.width / 2, y: b.minY + 5 }, b)
+    expect(r.edge).toBe("top")
+  })
+  test("point near the bottom edge → bottom", () => {
+    const r = nearestEdgeAnchor({ x: WIN.width / 2, y: b.maxY - 5 }, b)
+    expect(r.edge).toBe("bottom")
+  })
+  test("clamps along to [0, 1] when drop is outside the bounding rect", () => {
+    const r = nearestEdgeAnchor({ x: -50, y: -50 }, b)
+    expect(r.edge).toBe("left")
+    expect(r.along).toBe(0)
+  })
+  test("ties resolve deterministically (left wins over top)", () => {
+    // A point exactly equidistant from left and top edges — chosen so dLeft == dTop.
+    const r = nearestEdgeAnchor({ x: b.minX + 10, y: b.minY + 10 }, b)
+    expect(r.edge).toBe("left")
+  })
+})

packages/expo/src/launcher-geometry.ts

@@ -0,0 +1,101 @@
+// Pure geometry helpers for the floating launcher. Extracted from launcher.tsx
+// so the math (edge snapping, bound computation, drop-point → anchor) can be
+// unit-tested without spinning up React Native, AsyncStorage, or gesture
+// handlers.
+
+export type Edge = "left" | "right" | "top" | "bottom"
+export type Corner = "bottom-right" | "bottom-left" | "top-right" | "top-left"
+
+export interface Anchor {
+  edge: Edge
+  along: number
+}
+
+export interface OffsetInput {
+  top?: number
+  bottom?: number
+  left?: number
+  right?: number
+}
+
+export interface WindowSize {
+  width: number
+  height: number
+}
+
+export interface Bounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export const LAUNCHER_SIZE = 52
+export const DEFAULT_MARGIN = 24
+
+const EDGES = new Set<Edge>(["left", "right", "top", "bottom"])
+
+function clamp01(n: number): number {
+  if (n < 0) return 0
+  if (n > 1) return 1
+  return n
+}
+
+export function cornerToAnchor(corner: Corner): Anchor {
+  const edge: Edge = corner.endsWith("right") ? "right" : "left"
+  const along = corner.startsWith("bottom") ? 1 : 0
+  return { edge, along }
+}
+
+export function isAnchor(v: unknown): v is Anchor {
+  if (typeof v !== "object" || v === null) return false
+  const a = v as { edge?: unknown; along?: unknown }
+  if (typeof a.edge !== "string" || !EDGES.has(a.edge as Edge)) return false
+  if (typeof a.along !== "number" || a.along < 0 || a.along > 1) return false
+  return true
+}
+
+export function computeBounds(offset: OffsetInput, win: WindowSize): Bounds {
+  const top = offset.top ?? DEFAULT_MARGIN
+  const bottom = offset.bottom ?? DEFAULT_MARGIN
+  const left = offset.left ?? DEFAULT_MARGIN
+  const right = offset.right ?? DEFAULT_MARGIN
+  return {
+    minX: left + LAUNCHER_SIZE / 2,
+    maxX: win.width - right - LAUNCHER_SIZE / 2,
+    minY: top + LAUNCHER_SIZE / 2,
+    maxY: win.height - bottom - LAUNCHER_SIZE / 2,
+  }
+}
+
+export function anchorToCenter(anchor: Anchor, b: Bounds): { x: number; y: number } {
+  const a = clamp01(anchor.along)
+  const xRange = b.maxX - b.minX
+  const yRange = b.maxY - b.minY
+  switch (anchor.edge) {
+    case "left":
+      return { x: b.minX, y: b.minY + a * yRange }
+    case "right":
+      return { x: b.maxX, y: b.minY + a * yRange }
+    case "top":
+      return { x: b.minX + a * xRange, y: b.minY }
+    case "bottom":
+      return { x: b.minX + a * xRange, y: b.maxY }
+  }
+}
+
+export function nearestEdgeAnchor(point: { x: number; y: number }, b: Bounds): Anchor {
+  const dLeft = Math.abs(point.x - b.minX)
+  const dRight = Math.abs(point.x - b.maxX)
+  const dTop = Math.abs(point.y - b.minY)
+  const dBottom = Math.abs(point.y - b.maxY)
+  const xRange = b.maxX - b.minX
+  const yRange = b.maxY - b.minY
+  const alongY = yRange === 0 ? 0 : clamp01((point.y - b.minY) / yRange)
+  const alongX = xRange === 0 ? 0 : clamp01((point.x - b.minX) / xRange)
+  const min = Math.min(dLeft, dRight, dTop, dBottom)
+  if (min === dLeft) return { edge: "left", along: alongY }
+  if (min === dRight) return { edge: "right", along: alongY }
+  if (min === dTop) return { edge: "top", along: alongX }
+  return { edge: "bottom", along: alongX }
+}