@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/GestureChecksScreen.tsx

@@ -0,0 +1,685 @@
+// M2.4 gesture-binding checks (specs/M2.4-BUILD-PACKET.md §pinned semantics). All seven rows drive
+// the binding with SYNTHETIC Pan-event shapes + a ManualClock/ManualScheduler graph — fully
+// deterministic, no real touches (the live legs are the smoke: adb swipes on Android, a replayed
+// stream on iOS). A screenshot is the assertion; try/catch is evidence capture, never suppression.
+
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import {
+  ManualClock,
+  ManualScheduler,
+  createMotionGraph,
+  type MotionGraph,
+} from '@unrulysystems/native-motion-core'
+import {
+  createGestureBinding,
+  routePanEnd,
+  routePanFinalize,
+  type GestureBinding,
+} from '../../native/motion/gestureBinding'
+import {
+  createTapGestureWiring,
+  createGlobalTapObserver,
+  gatePostMountTapArrival,
+  gateTapCallbackProps,
+} from '../../native/motion/tapGestureWiring'
+import { createDragHubStream } from '../../native/motion/dragHubStream'
+import { createGestureStateResolver } from '../../native/motion/gestureStateResolver'
+import { gateGestureStateProps } from '../../native/motion/gestureStateGate'
+
+const DT = 16.67
+
+interface Row {
+  readonly id: string
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Rig {
+  readonly graph: MotionGraph
+  readonly clock: ManualClock
+  readonly scheduler: ManualScheduler
+}
+
+function rig(): Rig {
+  const clock = new ManualClock()
+  const scheduler = new ManualScheduler(clock)
+  return { graph: createMotionGraph({ clock, scheduler }), clock, scheduler }
+}
+
+const SNAPPED = {
+  constraints: { min: 0, max: 240, elastic: 0.4 },
+  snap: { points: [0, 240] as const },
+} as const
+
+function bindingWith(
+  r: Rig,
+  extra: Partial<Parameters<typeof createGestureBinding>[0]> = {},
+): GestureBinding {
+  return createGestureBinding({
+    graph: r.graph,
+    clock: r.clock,
+    initial: 0,
+    constraints: SNAPPED.constraints,
+    snap: { points: [...SNAPPED.snap.points] },
+    ...extra,
+  })
+}
+
+function checkDeadZone(): Row {
+  const id = 'activation dead-zone: no jump at grab'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 12, velocityX: 0 }) // recognizer already moved 12px to activate
+    if (b.session.value() !== 0) {
+      return { id, pass: false, detail: `value jumped to ${b.session.value()} at begin, want 0` }
+    }
+    b.onUpdate({ translationX: 13, velocityX: 60 })
+    const first = b.session.value()
+    if (Math.abs(first - 1) > 1e-9) {
+      return {
+        id,
+        pass: false,
+        detail: `first active frame value=${first}, want 1 (13−12 from grab)`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'begin at translation 12 → value 0; first frame 13 → value 1 (C0)',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkDragFollowAndHandoff(): Row {
+  const id = 'drag-follow; §G platform velocity passes UNSCALED'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    for (let translation = 20; translation <= 200; translation += 20) {
+      b.onUpdate({ translationX: translation, velocityX: 500 })
+      r.scheduler.frame(DT)
+    }
+    if (Math.abs(b.session.value() - 200) > 1e-9) {
+      return { id, pass: false, detail: `value ${b.session.value()} after dragging to 200` }
+    }
+    b.onEnd({ translationX: 200, velocityX: 833.25 })
+    const handoff = b.session.handoffVelocity()
+    if (handoff !== 833.25) {
+      return {
+        id,
+        pass: false,
+        detail: `handoff ${String(handoff)}, want the platform's exact 833.25 (§G)`,
+      }
+    }
+    return { id, pass: true, detail: 'followed to 200; handoff === 833.25 exactly (unscaled)' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkReleaseSnap(): Row {
+  const id = 'release settles at the projected snap point'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    b.onUpdate({ translationX: 150, velocityX: 900 })
+    b.onEnd({ translationX: 150, velocityX: 900 }) // fast rightward release from 150
+    r.scheduler.frames(240, DT)
+    const settled = b.session.value()
+    if (Math.abs(settled - 240) > 0.5 || !b.session.isSettled()) {
+      return {
+        id,
+        pass: false,
+        detail: `settled at ${settled} (settled=${String(b.session.isSettled())}), want snap 240`,
+      }
+    }
+    if (b.session.state() !== 'idle') {
+      return { id, pass: false, detail: `state ${b.session.state()} after settle, want idle` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'released at 150 w/ +900 px/s → snapped to 240, settled, idle',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkConstraints(): Row {
+  const id = 'constraints: hard clamp at 0, rubber-band above 0'
+  try {
+    const rHard = rig()
+    const hard = bindingWith(rHard, { constraints: { min: 0, max: 240, elastic: 0 } })
+    hard.onStart({ translationX: 0, velocityX: 0 })
+    hard.onUpdate({ translationX: 300, velocityX: 0 })
+    const clamped = hard.session.value()
+    if (clamped !== 240)
+      return { id, pass: false, detail: `elastic 0: value ${clamped}, want hard 240` }
+    const rSoft = rig()
+    const soft = bindingWith(rSoft, { constraints: { min: 0, max: 240, elastic: 0.5 } })
+    soft.onStart({ translationX: 0, velocityX: 0 })
+    soft.onUpdate({ translationX: 300, velocityX: 0 })
+    const banded = soft.session.value()
+    if (!(banded > 240 && banded < 300)) {
+      return {
+        id,
+        pass: false,
+        detail: `elastic 0.5: value ${banded}, want strictly between 240 and 300`,
+      }
+    }
+    return { id, pass: true, detail: `clamped 300→240; rubber-banded 300→${banded.toFixed(1)}` }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkRegrabContinuity(): Row {
+  const id = 'mid-settle re-grab seeds from the live value'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    b.onUpdate({ translationX: 150, velocityX: 900 })
+    b.onEnd({ translationX: 150, velocityX: 900 })
+    r.scheduler.frames(6, DT) // spring in flight toward 240
+    const live = b.session.value()
+    if (!(live > 150 && live < 240)) {
+      return { id, pass: false, detail: `live value ${live} not mid-flight` }
+    }
+    b.onStart({ translationX: 30, velocityX: 0 }) // re-grab mid-settle (nonzero activation offset)
+    if (b.session.state() !== 'active') {
+      return { id, pass: false, detail: `state ${b.session.state()} after re-grab, want active` }
+    }
+    const atGrab = b.session.value()
+    if (Math.abs(atGrab - live) > 1e-6) {
+      return {
+        id,
+        pass: false,
+        detail: `re-grab snapped ${live.toFixed(2)} → ${atGrab.toFixed(2)}`,
+      }
+    }
+    return { id, pass: true, detail: `re-grabbed at live ${live.toFixed(1)}, no snap-back, active` }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkCancelFailAndFreeDrag(): Row {
+  const id = 'cancel/fail → pre-grab; free-drag release projects (REQ-GESTURE-023)'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    b.onUpdate({ translationX: 120, velocityX: 0 })
+    b.onCancel()
+    r.scheduler.frames(240, DT)
+    if (Math.abs(b.session.value()) > 0.5 || !b.session.isSettled()) {
+      return { id, pass: false, detail: `cancel settled at ${b.session.value()}, want pre-grab 0` }
+    }
+    const r2 = rig()
+    const b2 = bindingWith(r2)
+    b2.onStart({ translationX: 0, velocityX: 0 })
+    b2.onUpdate({ translationX: 80, velocityX: 0 })
+    b2.onFail()
+    r2.scheduler.frames(240, DT)
+    if (Math.abs(b2.session.value()) > 0.5) {
+      return { id, pass: false, detail: `fail settled at ${b2.session.value()}, want pre-grab 0` }
+    }
+    // Free-drag (no snap, no constraints): release settles at project(50, 100) = 130.
+    const r3 = rig()
+    const free = createGestureBinding({ graph: r3.graph, clock: r3.clock, initial: 0 })
+    free.onStart({ translationX: 0, velocityX: 0 })
+    free.onUpdate({ translationX: 50, velocityX: 100 })
+    free.onEnd({ translationX: 50, velocityX: 100 })
+    r3.scheduler.frames(400, DT)
+    if (Math.abs(free.session.value() - 130) > 1 || !free.session.isSettled()) {
+      return {
+        id,
+        pass: false,
+        detail: `free-drag settled at ${free.session.value()}, want ~130`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'cancel + fail settle at pre-grab; free-drag release projects to ideal',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkMalformedEventGuard(): Row {
+  const id = 'malformed Pan events fail loud at the binding'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    let missingError: unknown = null
+    try {
+      b.onUpdate({ velocityX: 5 })
+    } catch (e) {
+      missingError = e
+    }
+    const missingOk = missingError instanceof Error && missingError.message.includes('translationX')
+    let badTypeError: unknown = null
+    try {
+      b.onUpdate({ translationX: 5, velocityX: 'fast' })
+    } catch (e) {
+      badTypeError = e
+    }
+    const badTypeOk = badTypeError instanceof Error && badTypeError.message.includes('velocityX')
+    if (!missingOk || !badTypeOk) {
+      return {
+        id,
+        pass: false,
+        detail: `missing→${missingError instanceof Error ? missingError.message.slice(0, 50) : 'no throw'}; badType→${badTypeError instanceof Error ? badTypeError.message.slice(0, 50) : 'no throw'}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'missing translationX and non-numeric velocityX both throw naming the field',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// R5 (REQ-API-030): the tap protocol rows — the recognizer wiring exercised with scripted
+// substrate event sequences (real-touch evidence rides the Android proof leg; the iOS leg
+// self-describes through these rows, R5-F2).
+function checkTapProtocol(): Row {
+  const id = 'tap protocol: up-target law (leave-and-return taps; release-outside cancels)'
+  try {
+    const events: string[] = []
+    const wiring = createTapGestureWiring({
+      callbacks: {
+        onTapStart: () => events.push('start'),
+        onTap: (_event, info) => events.push(`tap@${info.point.x},${info.point.y}`),
+        onTapCancel: () => events.push('cancel'),
+      },
+      getElementSize: () => ({ width: 100, height: 100 }),
+    })
+    const at = (x: number, y: number, absoluteX = x, absoluteY = y) => ({
+      x,
+      y,
+      absoluteX,
+      absoluteY,
+    })
+    wiring.handleBegin(at(12, 34))
+    wiring.handleEnd(at(12, 34), true) // release inside — leave-and-return still lands here
+    wiring.handleFinalize(at(12, 34), true)
+    wiring.handleBegin(at(5, 5))
+    wiring.handleEnd(at(200, 5), true) // recognizer ended; the UP target is OFF the element
+    wiring.handleFinalize(at(200, 5), true)
+    wiring.handleFinalize(at(0, 0), false) // never began — nothing
+    const want = ['start', 'tap@12,34', 'start', 'cancel']
+    if (events.join('|') !== want.join('|')) {
+      return { id, pass: false, detail: `got ${events.join('|')}, want ${want.join('|')}` }
+    }
+    return { id, pass: true, detail: 'up-target verdict: inside taps, outside cancels, once each' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// U7d (REQ-API-030 global form): the global press observer, exercised through the REAL
+// stack — root hub stream → tap-observation channel → global observer → wiring
+// (globalTarget: true) — with scripted root touches. The pinned law (motion-dom
+// press/index.ts: useGlobalTarget window listener + the up-verdict short-circuit): a down
+// ANYWHERE under the root begins the press (containment never read), EVERY up resolves it,
+// TapInfo.point carries the absolute up point; start-gates (non-primary, active drag) refuse;
+// cancel arrives only from the touch-cancel path; observation is unconditional — no
+// recognizer claim suppresses it (packet F1/F2).
+function checkGlobalTapObserver(): Row {
+  const id = 'global tap: root-outside down begins; up-anywhere resolves; cancel only via stream'
+  try {
+    const events: string[] = []
+    let dragActive = false
+    const wiring = createTapGestureWiring({
+      callbacks: {
+        onTapStart: () => events.push('start'),
+        onTap: (_event, info) => events.push(`tap@${info.point.x},${info.point.y}`),
+        onTapCancel: () => events.push('cancel'),
+      },
+      // A 100x100 element at the origin — every touch below lands OUTSIDE it; the local
+      // form would cancel each one at the containment verdict (checkTapProtocol above).
+      getElementSize: () => ({ width: 100, height: 100 }),
+      globalTarget: true,
+    })
+    const observer = createGlobalTapObserver({ wiring, isDragActive: () => dragActive })
+    const stream = createDragHubStream()
+    stream.subscribeTapObserver(observer)
+    const touch = (id: number, x: number, y: number) => ({ id, absoluteX: x, absoluteY: y })
+
+    // Root-outside down BEGINS the press; the up lands far off-element and still resolves,
+    // with TapInfo.point carrying the absolute up point.
+    stream.notifyTapDown(touch(1, 400, 500))
+    stream.notifyTapUp(touch(1, 900, 50))
+    // The multi-touch law: a second (non-primary) touch neither starts nor resolves the
+    // press — only the touch that began it does.
+    stream.notifyTapDown(touch(1, 10, 10))
+    stream.notifyTapDown(touch(2, 20, 20))
+    stream.notifyTapUp(touch(2, 20, 20))
+    stream.notifyTapUp(touch(1, 10, 10))
+    // The start-gate: no press begins while a drag is active.
+    dragActive = true
+    stream.notifyTapDown(touch(1, 30, 30))
+    stream.notifyTapUp(touch(1, 30, 30))
+    dragActive = false
+    // Cancel arrives only from the touch-cancel path; the id is forgotten, so its later up
+    // (and an id the stream never saw) notify nothing.
+    stream.notifyTapDown(touch(1, 40, 40))
+    stream.notifyTapCancel(touch(1, 40, 40))
+    stream.notifyTapUp(touch(1, 40, 40))
+    stream.notifyTapUp(touch(99, 0, 0))
+
+    const want = ['start', 'tap@900,50', 'start', 'tap@10,10', 'start', 'cancel']
+    if (events.join('|') !== want.join('|')) {
+      return { id, pass: false, detail: `got ${events.join('|')}, want ${want.join('|')}` }
+    }
+    return {
+      id,
+      pass: true,
+      detail:
+        'outside down + far outside up tapped (@900,50); 2nd finger inert; drag-gated; cancel-path only',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkTapBoundaryGates(): Row {
+  const id = 'tap boundary: malformed callback + post-mount arrival fail loud'
+  try {
+    let malformed: unknown = null
+    try {
+      gateTapCallbackProps({ onTap: 42 as never })
+    } catch (e) {
+      malformed = e
+    }
+    let postMount: unknown = null
+    try {
+      gatePostMountTapArrival(false, true, undefined, '<Motion.View>')
+    } catch (e) {
+      postMount = e
+    }
+    const malformedOk = malformed instanceof Error && malformed.message.includes('onTap')
+    const postMountOk = postMount instanceof Error && postMount.message.includes('fixed at mount')
+    if (!malformedOk || !postMountOk) {
+      return {
+        id,
+        pass: false,
+        detail: `malformed→${malformed instanceof Error ? 'typed' : 'no throw'}; postMount→${postMount instanceof Error ? 'typed' : 'no throw'}`,
+      }
+    }
+    return { id, pass: true, detail: 'both boundary violations throw typed, named errors' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkPanEndRouting(): Row {
+  // Review-cycle-1 major 1: RNGH fires onEnd(event, success=false) for FAILED/CANCELLED gestures
+  // BEFORE onFinalize. An unsuccessful end must NOT release — the session stays active so the
+  // finalize path cancels to the pre-grab value; a successful end releases normally.
+  const id = 'RNGH end routing: unsuccessful end cancels, never releases'
+  try {
+    const r = rig()
+    const b = bindingWith(r)
+    b.onStart({ translationX: 0, velocityX: 0 })
+    b.onUpdate({ translationX: 120, velocityX: 400 })
+    routePanEnd(b, { translationX: 120, velocityX: 400 }, false) // FAILED/CANCELLED end
+    if (b.session.state() !== 'active') {
+      return {
+        id,
+        pass: false,
+        detail: `unsuccessful end moved state to ${b.session.state()}, want active`,
+      }
+    }
+    routePanFinalize(b, false)
+    r.scheduler.frames(240, DT)
+    if (Math.abs(b.session.value()) > 0.5 || !b.session.isSettled()) {
+      return {
+        id,
+        pass: false,
+        detail: `cancel path settled at ${b.session.value()}, want pre-grab 0`,
+      }
+    }
+    const r2 = rig()
+    const b2 = bindingWith(r2)
+    b2.onStart({ translationX: 0, velocityX: 0 })
+    b2.onUpdate({ translationX: 150, velocityX: 900 })
+    routePanEnd(b2, { translationX: 150, velocityX: 900 }, true) // successful release
+    routePanFinalize(b2, true)
+    r2.scheduler.frames(240, DT)
+    if (Math.abs(b2.session.value() - 240) > 0.5) {
+      return {
+        id,
+        pass: false,
+        detail: `successful end settled at ${b2.session.value()}, want snap 240`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'end(false) stayed active → finalize cancelled to 0; end(true) released to 240',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// R6 (REQ-API-031): the gesture-STATE rows — the resolver's overlay/revert law and the
+// boundary gates exercised with scripted flips (real-touch evidence rides the Android proof
+// leg; the iOS leg self-describes through these rows, the R5-F2 posture).
+function checkGestureStateResolver(): Row {
+  const id = 'gesture state: overlay + revert law (pinned priority; destination transitions)'
+  try {
+    const SOFT = { type: 'spring', stiffness: 120, damping: 20 } as const
+    const ELEMENT = { type: 'spring', stiffness: 300, damping: 30 } as const
+    let animateTarget: Record<string, number> = { scale: 1, opacity: 1 }
+    const resolver = createGestureStateResolver({
+      layers: () => ({
+        animate: { target: animateTarget },
+        whileTap: { target: { scale: 0.9 }, transition: SOFT },
+        whileDrag: { target: { scale: 1.1 } },
+      }),
+      baseValueFor: () => undefined,
+      elementTransition: () => ELEMENT,
+    })
+    // Every retarget asserts key AND transition (r27 major f69e1db7a2c4: a wrong-property
+    // or wrong-transition retarget must FAIL the row — R6-F1's per-key destination law).
+    const expectRetarget = (
+      label: string,
+      got: readonly { key: string; value: unknown; transition: unknown }[],
+      want: { key: string; value: number; transition: unknown },
+    ): string | null => {
+      const one = got.length === 1 ? got[0]! : undefined
+      if (
+        one === undefined ||
+        one.key !== want.key ||
+        one.value !== want.value ||
+        one.transition !== want.transition
+      ) {
+        return `${label}: got ${JSON.stringify(got)}, want ${JSON.stringify(want)}`
+      }
+      return null
+    }
+    const pressBad = expectRetarget('press', resolver.setActive('whileTap', true), {
+      key: 'scale',
+      value: 0.9,
+      transition: SOFT, // the layer's OWN transition
+    })
+    if (pressBad !== null) return { id, pass: false, detail: pressBad }
+    const dragOverBad = expectRetarget('drag-over', resolver.setActive('whileDrag', true), {
+      key: 'scale',
+      value: 1.1,
+      transition: ELEMENT, // whileDrag has no layer transition — element fallback
+    })
+    if (dragOverBad !== null) return { id, pass: false, detail: dragOverBad }
+    const dragOffBad = expectRetarget('drag-off', resolver.setActive('whileDrag', false), {
+      key: 'scale',
+      value: 0.9,
+      transition: SOFT, // the DESTINATION layer's (whileTap's) transition, R6-F1
+    })
+    if (dragOffBad !== null) return { id, pass: false, detail: dragOffBad }
+    animateTarget = { scale: 0.5, opacity: 1 } // a live rerender while pressed (r4 major 19)
+    const releaseBad = expectRetarget('release', resolver.setActive('whileTap', false), {
+      key: 'scale',
+      value: 0.5,
+      transition: ELEMENT, // the animate destination rides the element transition
+    })
+    if (releaseBad !== null) return { id, pass: false, detail: releaseBad }
+    return { id, pass: true, detail: 'overlay 0.9 → drag 1.1 → back to 0.9 → live revert 0.5' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkGestureStateBoundary(): Row {
+  const id = 'gesture-state boundary: label resolution + inert options + bound-key XOR'
+  try {
+    // R7 (REQ-API-032): the label form RESOLVES against the dictionary (the R6-era refusal
+    // is superseded); a local miss is the pinned NO-OP — an empty layer, never an error.
+    const softTap = { type: 'spring', stiffness: 120, damping: 20 } as const
+    const resolved = gateGestureStateProps(
+      { whileTap: 'pressed' as never },
+      {
+        dragAxes: [],
+        variantsDictionary: { pressed: { scale: 0.9, transition: softTap } },
+      },
+    )
+    // Structural, never identity: the gate stores a RESOLVED frozen snapshot of the authored
+    // transition (major 0cb829 — the accepted layer never holds the caller's object), and the
+    // host test (gestureStateGate.test.ts "R7: a label form RESOLVES") asserts toEqual. The
+    // earlier `=== softTap` form read the snapshot law as a failure — broken since T19's
+    // per-property resolution (daf4fc8f) put resolveTransitionForKey on this path.
+    const attribution = resolved.whileTap?.transitions?.['scale']
+    const resolvedRight =
+      resolved.whileTap !== undefined &&
+      (resolved.whileTap.target as { scale?: number }).scale === 0.9 &&
+      attribution?.type === 'spring' &&
+      (attribution as { stiffness?: number }).stiffness === 120 &&
+      (attribution as { damping?: number }).damping === 20
+    if (!resolvedRight) {
+      return { id, pass: false, detail: 'label must resolve with per-key attribution (law b)' }
+    }
+    const miss = gateGestureStateProps({ whileTap: 'missing' as never }, { dragAxes: [] })
+    const missRight = miss.whileTap !== undefined && Object.keys(miss.whileTap.target).length === 0
+    if (!missRight) {
+      return { id, pass: false, detail: 'a local miss must be the empty-layer NO-OP (law a)' }
+    }
+    const delayAccepted = gateGestureStateProps(
+      { whileTap: { opacity: 0.5, transition: { delay: 0.2 } } },
+      { dragAxes: [] },
+    )
+    const delayRight =
+      delayAccepted.whileTap?.transition?.delay === 0.2 &&
+      (delayAccepted.whileTap.target as { opacity?: number }).opacity === 0.5
+    if (!delayRight) {
+      return { id, pass: false, detail: 'property-lane delay must be accepted and preserved' }
+    }
+    const reported: Error[] = []
+    const accepted = gateGestureStateProps(
+      { whileTap: { scale: 0.9, opacity: 0.5 } },
+      { dragAxes: [], boundKeys: ['scale'] },
+      {
+        severity: 'production',
+        report: (error) => reported.push(error),
+        componentId: '<Motion.View>' as const,
+      },
+    )
+    const strippedRight =
+      reported.length === 1 &&
+      accepted.whileTap !== undefined &&
+      !('scale' in accepted.whileTap.target) &&
+      (accepted.whileTap.target as { opacity?: number }).opacity === 0.5
+    if (!strippedRight) {
+      return { id, pass: false, detail: 'bound key must STRIP with one report; survivor kept' }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'label resolved (law a/b), delay accepted, bound key stripped + survivor kept',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+export function GestureChecksScreen() {
+  const rows: Row[] = [
+    checkDeadZone(),
+    checkDragFollowAndHandoff(),
+    checkReleaseSnap(),
+    checkConstraints(),
+    checkRegrabContinuity(),
+    checkCancelFailAndFreeDrag(),
+    checkMalformedEventGuard(),
+    checkPanEndRouting(),
+    checkTapProtocol(),
+    checkGlobalTapObserver(),
+    checkTapBoundaryGates(),
+    checkGestureStateResolver(),
+    checkGestureStateBoundary(),
+  ]
+  const allPass = rows.every((row) => row.pass)
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>M2.4 gesture checks</Text>
+      <Text style={styles.subtitle}>
+        binding semantics vs synthetic Pan events + a manual graph
+      </Text>
+      <View style={[styles.banner, allPass ? styles.pass : styles.fail]}>
+        <Text style={styles.bannerText}>{allPass ? 'PASS' : 'FAIL'}</Text>
+      </View>
+      {rows.map((row) => (
+        <View key={row.id} style={styles.row}>
+          <Text style={[styles.verdict, row.pass ? styles.ok : styles.bad]}>
+            {row.pass ? 'PASS' : 'FAIL'}
+          </Text>
+          <View style={styles.rowBody}>
+            <Text style={styles.rowId}>{row.id}</Text>
+            <Text style={styles.rowDetail} numberOfLines={3}>
+              {row.detail}
+            </Text>
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 20 },
+  title: { color: '#fff', fontSize: 22, fontWeight: '700', textAlign: 'center' },
+  subtitle: { color: '#8a8aa0', fontSize: 12, marginTop: 6, textAlign: 'center' },
+  banner: {
+    alignSelf: 'center',
+    paddingHorizontal: 36,
+    paddingVertical: 10,
+    borderRadius: 10,
+    marginTop: 18,
+    marginBottom: 10,
+  },
+  pass: { backgroundColor: '#1d7a3e' },
+  fail: { backgroundColor: '#a32633' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  row: { flexDirection: 'row', marginTop: 10 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+})