@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/InstantTransitionChecksScreen.tsx

@@ -0,0 +1,839 @@
+// U7b instant-transition device checks (the U7b packet's floor 3): the native card mirroring the
+// pinned catalog useInstantTransition.tsx example — on mount, startInstantTransition(() =>
+// setX(100)) against a MotionView initial={false} animate={{ x }} — plus the window's global
+// scope, delay-zeroing, relock, and token-guard semantics as self-driven rows. Six claims:
+//
+//   1. MOUNT (the pin example verbatim) — the value reaches 100 with NO intermediate flight
+//      values (the generator is skipped entirely — NOT a 0-duration tween), and the same-tick
+//      read at the call still reads the origin: the commit lands on the driver's next update
+//      tick, never synchronously at the call. The commit's JS readback is observed by a rAF
+//      poll with a fail-closed deadline, NEVER a fixed frame budget: the pin's law covers the
+//      UI-side commit (the driver's next update tick), while this card measures the JS
+//      readback, which adds the command crossing, the t=0 frame (null dt — the pin's
+//      frame.update deferral), and the marshal's return — a device-dependent latency
+//      (cold-boot iOS 2026-08-18 landed past a fixed 5-frame chain, with the boot capture
+//      proving the commit by +1400ms; warm Android landed at frame 3). The landing frame/time
+//      is EVIDENCE; the gates are never-synchronous and no-flight.
+//   2. PRESS + GLOBAL SCOPE — a button press (timeline-fired through the same handler — the iOS
+//      simulator has no tap injection, so the card self-drives) opens the window and retargets
+//      TWO boxes on DIFFERENT components: the window is global (any component, any motion
+//      value), so both commit instantly.
+//   3. DELAY ZEROED — a third retarget inside the same press carries an AUTHORED
+//      { type: 'tween', duration: 0.6, delay: 0.5 }: the window's consult replaces it with the
+//      instant commit and zeroes the delay (the pin's global-flag asymmetry — the authored
+//      type:false honors a nonzero delay, the global flag does not). A +150ms sample — well
+//      before the authored 500ms — must already read the target.
+//   4. THE RELOCK — a retarget started ~100ms post-press (past the two-frame relock) on an
+//      ordinary short tween (0.5s) FLIES: post-retarget committed samples must land STRICTLY
+//      BETWEEN origin and target — a stuck window commits instantly and shows ZERO
+//      intermediates (both 2026-08-18 platforms showed the flight). The terminal value's
+//      settle-edge marshal is awaited by a poll with a fail-closed deadline and its landing
+//      latency is DISCLOSED as evidence, never gated to a fixed offset: the settle frame's
+//      emission is unit-pinned (workletDriver.lanes "the settle frame emits its final
+//      change"), but its device delivery lags — both platforms read the last in-flight frame
+//      (88.8) at +900ms and the terminal 90.0 later, the 7a settle-notification finding's
+//      family. A terminal that never lands inside the deadline fails loud as the
+//      genuinely-missing-marshal class.
+//   5. BACK-TO-BACK EXTENSION — two calls ONE FRAME apart; the second retarget still commits
+//      instantly: the second call bumped the render-count token, so the first call's stale
+//      unlock bails instead of closing the window the second call extended (the pin's own
+//      stale-token test, use-instant-transition.test.tsx:150-176). Each call's commit is
+//      observed by its own deadline poll — the double forced render lands the readback
+//      systematically later than the single-render press leg (the 2026-08-18 runs), so fixed
+//      frame budgets are evidence here too. A premature close shows as FLIGHT samples on the
+//      second box, and those stay gated.
+//   6. CLEAN RUN — zero refusal reports through the console tap (the U5 pattern: console.error
+//      is the severity law's production error channel) across the whole timeline.
+//
+// Readback honesty: every x sample rides the element's own onUpdate (the driver's per-frame
+// committed-values marshal) — the value the host actually received, never a JS-side mirror. A
+// screenshot is the assertion; the console tap is evidence capture, never suppression.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { useInstantTransition } from '../../native/motion/useInstantTransition'
+
+const ROW_MOUNT = 'mount (pin example verbatim): instant commit — never synchronous, no flight'
+const ROW_PRESS = 'press + global scope: two boxes on different components both commit instantly'
+const ROW_DELAY = 'delay zeroed: an authored delay 0.5 inside the window commits without waiting'
+const ROW_RELOCK = 'the relock: a retarget 100ms post-press on a 0.5s tween FLIES (window closed)'
+const ROW_B2B = 'back-to-back: two calls one frame apart — the second retarget still commits'
+const ROW_CLEAN = 'clean run: zero refusal reports through the console tap'
+const ROW_ORDER = [ROW_MOUNT, ROW_PRESS, ROW_DELAY, ROW_RELOCK, ROW_B2B, ROW_CLEAN] as const
+
+// Every subject starts at x = 0; the targets are distinct so a crossed wire reads as a wrong
+// value, never a coincidence.
+const MOUNT_TARGET = 100
+const PRESS_A_TARGET = 60
+const PRESS_B_TARGET = -60
+const DELAY_TARGET = 80
+const RELOCK_TARGET = 90
+const B2B_A_TARGET = -70
+const B2B_B_TARGET = 70
+// Committed-x equality / flight margins (device px): the instant commit lands exactly on the
+// target; a "flight" sample must clear 2px off both endpoints to count.
+const EPS = 0.5
+const FLIGHT_MARGIN = 2
+
+// Fail-closed observation deadlines (ms after the triggering call/retarget). The instant-commit
+// readback is a few bridge frames warm and ran past a fixed 5-frame chain at cold-boot iOS;
+// the settle-edge terminal of the 0.5s relock tween landed past +900ms on both 2026-08-18
+// platforms. The deadlines sit far past every observed landing; missing one is a loud fail,
+// never a silent wait.
+const COMMIT_DEADLINE_MS = 2000
+const SETTLE_DEADLINE_MS = 3000
+
+// Timeline (ms). Dwells make every staged state capturable: the boot dwell (0–2400) holds the
+// pin example's post-mount state (the mount box committed at x=100, every other subject at its
+// origin); the press fires at 2400, the delay leg's early sample at +150ms and the relock
+// retarget at +100ms; the dwell 3400–5400 holds both press boxes and the delay box committed
+// while the relock box's flight settles (its terminal marshal lands inside this window); the
+// back-to-back pair fires at 5400; the final verdict holds from ~8000 on. Rows 1, 4, and 5
+// SELF-FINALIZE when their deadline polls resolve (landing or deadline); rows 2, 3, and 6
+// finalize at fixed offsets (3400 / 7800) — proven green on both 2026-08-18 platforms.
+const T_PRESS = 2400
+const T_RELOCK_RETARGET = 2500
+const T_DELAY_EARLY = 2550
+const T_PRESS_FINALIZE = 3400
+const T_B2B = 5400
+const T_CLEAN = 7800
+const T_DONE = 8000
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface XSample {
+  readonly at: number
+  readonly value: number
+}
+
+interface SubjectTrace {
+  latest: number
+  readonly samples: XSample[]
+}
+
+// A deadline poll's resolution: the rAF frame count and the mount-relative time at which the
+// JS readback first read the target — or null when the deadline passed first.
+interface Landing {
+  readonly frames: number
+  readonly at: number
+}
+
+type SubjectKey = 'mount' | 'pressA' | 'pressB' | 'delay' | 'relock' | 'b2bA' | 'b2bB'
+
+const freshTrace = (): SubjectTrace => ({ latest: 0, samples: [] })
+
+function freshTraces(): Record<SubjectKey, SubjectTrace> {
+  return {
+    mount: freshTrace(),
+    pressA: freshTrace(),
+    pressB: freshTrace(),
+    delay: freshTrace(),
+    relock: freshTrace(),
+    b2bA: freshTrace(),
+    b2bB: freshTrace(),
+  }
+}
+
+function readX(latest: Readonly<Record<string, string | number>>): number | null {
+  const raw = latest['x']
+  const value = typeof raw === 'number' ? raw : typeof raw === 'string' ? Number(raw) : NaN
+  return Number.isFinite(value) ? value : null
+}
+
+// A post-retarget sample strictly between the endpoints is a FLIGHT — under an instant commit
+// none may exist. lo/hi are the sorted endpoints.
+function flightSample(
+  trace: SubjectTrace,
+  stamp: number,
+  lo: number,
+  hi: number,
+): XSample | undefined {
+  return trace.samples.find(
+    (s) => s.at >= stamp && s.value > lo + FLIGHT_MARGIN && s.value < hi - FLIGHT_MARGIN,
+  )
+}
+
+// The first rAF-chain frame (1-based) reading the target, or 0 when it never lands.
+function targetFrame(chain: readonly number[], target: number): number {
+  return chain.findIndex((value) => Math.abs(value - target) <= EPS) + 1
+}
+
+// The rows 1/4/5 observation primitive: poll per rAF until the trace's latest committed value
+// reads `target` or the fail-closed deadline passes. Replaces the fixed 5-frame chains — the
+// commit/settle JS-readback latency is device-dependent, so the landing is measured EVIDENCE
+// and the deadline is the only time gate. Fires `onResolve` exactly once.
+function pollLanding(
+  trace: SubjectTrace,
+  target: number,
+  deadlineAt: number,
+  now: () => number,
+  trackRaf: (id: ReturnType<typeof requestAnimationFrame>) => void,
+  onResolve: (landing: Landing | null) => void,
+): void {
+  let frames = 0
+  const step = (): void => {
+    frames += 1
+    if (Math.abs(trace.latest - target) <= EPS) {
+      onResolve({ frames, at: now() })
+      return
+    }
+    if (now() >= deadlineAt) {
+      onResolve(null)
+      return
+    }
+    trackRaf(requestAnimationFrame(step))
+  }
+  trackRaf(requestAnimationFrame(step))
+}
+
+function fmt(value: number | null): string {
+  return value === null ? 'unavailable' : value.toFixed(1)
+}
+
+// Row 2's two subjects are DIFFERENT components by construction — the window is global, so a
+// per-component authority would commit only one of them.
+function PressSubjectA({
+  target,
+  onSample,
+}: {
+  readonly target: number
+  readonly onSample: (value: number) => void
+}) {
+  return (
+    <MotionView
+      animate={{ x: target }}
+      initial={false}
+      onUpdate={(latest) => {
+        const value = readX(latest)
+        if (value !== null) onSample(value)
+      }}
+      style={styles.pressBoxA}
+      accessibilityLabel="u7b-press-subject-a"
+    />
+  )
+}
+
+function PressSubjectB({
+  target,
+  onSample,
+}: {
+  readonly target: number
+  readonly onSample: (value: number) => void
+}) {
+  return (
+    <MotionView
+      animate={{ x: target }}
+      initial={false}
+      onUpdate={(latest) => {
+        const value = readX(latest)
+        if (value !== null) onSample(value)
+      }}
+      style={styles.pressBoxB}
+      accessibilityLabel="u7b-press-subject-b"
+    />
+  )
+}
+
+export function InstantTransitionChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const startInstantTransition = useInstantTransition()
+
+  // The pin example's exact state: `const [x, setX] = useState(0)`.
+  const [x, setX] = useState(0)
+  const [pressTargetA, setPressTargetA] = useState(0)
+  const [pressTargetB, setPressTargetB] = useState(0)
+  const [delayTarget, setDelayTarget] = useState(0)
+  const [relockTarget, setRelockTarget] = useState(0)
+  const [b2bTargetA, setB2bTargetA] = useState(0)
+  const [b2bTargetB, setB2bTargetB] = useState(0)
+  const [pressCount, setPressCount] = useState(0)
+  const [stage, setStage] = useState('boot: pin example mounted (initial={false}), window firing')
+  const [live, setLive] = useState<Partial<Record<SubjectKey, string>>>({})
+  const [rows, setRows] = useState<Partial<Record<(typeof ROW_ORDER)[number], RowResult>>>({})
+
+  const mountStampRef = useRef(Date.now())
+  const tracesRef = useRef<Record<SubjectKey, SubjectTrace> | null>(null)
+  if (tracesRef.current === null) tracesRef.current = freshTraces()
+
+  // Row 1 evidence: the same-tick read at the mount call (the poll reports the landing itself).
+  const mountSameTickRef = useRef<number | null>(null)
+
+  // Row 2/3 evidence: the press stamp, the same-tick reads, and the shared post-press chain.
+  const pressStampRef = useRef(0)
+  const pressSameTickRef = useRef<readonly number[] | null>(null)
+  const pressChainRef = useRef<readonly { a: number; b: number; d: number }[]>([])
+  const delayEarlyRef = useRef<number | null>(null)
+
+  // Row 5 evidence: both call stamps, both same-tick reads, both poll resolutions
+  // (undefined = the poll is still running; null = the deadline passed first).
+  const b2bStampARef = useRef(0)
+  const b2bStampBRef = useRef(0)
+  const b2bSameTickARef = useRef<number | null>(null)
+  const b2bSameTickBRef = useRef<number | null>(null)
+  const b2bLandingARef = useRef<Landing | null | undefined>(undefined)
+  const b2bLandingBRef = useRef<Landing | null | undefined>(undefined)
+
+  const rafsRef = useRef<ReturnType<typeof requestAnimationFrame>[]>([])
+  const reportsRef = useRef<string[]>([])
+
+  const trackRaf = (id: ReturnType<typeof requestAnimationFrame>): void => {
+    rafsRef.current.push(id)
+  }
+
+  const record = useCallback((key: SubjectKey, value: number): void => {
+    const trace = tracesRef.current![key]
+    trace.latest = value
+    trace.samples.push({ at: Date.now() - mountStampRef.current, value })
+    setLive((previous) => ({ ...previous, [key]: value.toFixed(1) }))
+  }, [])
+
+  const finalize = (id: (typeof ROW_ORDER)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  // 1. MOUNT — the pin example verbatim (dev/react/src/examples/useInstantTransition.tsx:14-16):
+  //    on mount, startInstantTransition(() => setX(100)). The instrumentation around the call
+  //    does not touch its semantics: the same-tick read proves the commit is NOT synchronous at
+  //    the call, and the deadline poll observes when the commit's JS readback lands.
+  useEffect(() => {
+    const traces = tracesRef.current!
+    const now = (): number => Date.now() - mountStampRef.current
+    const stamp = now()
+    startInstantTransition(() => setX(MOUNT_TARGET))
+    mountSameTickRef.current = traces.mount.latest
+    pollLanding(
+      traces.mount,
+      MOUNT_TARGET,
+      stamp + COMMIT_DEADLINE_MS,
+      now,
+      trackRaf,
+      (landing) => {
+        const sameTick = mountSameTickRef.current
+        const post = traces.mount.samples.filter((s) => s.at >= stamp)
+        const postText = post.map((s) => s.value.toFixed(1)).join(', ')
+        const flight = flightSample(traces.mount, stamp, 0, MOUNT_TARGET)
+        let bad: string | null = null
+        if (sameTick === null || Math.abs(sameTick - 0) > EPS) {
+          bad = `the same-tick read at the call reads ${fmt(sameTick)}, want origin 0 — a synchronous commit inside startInstantTransition`
+        } else if (landing === null) {
+          bad = `the commit's JS readback never landed within the ${COMMIT_DEADLINE_MS}ms deadline (latest ${traces.mount.latest.toFixed(1)}; post-call onUpdates [${postText || 'none'}])`
+        } else if (flight !== undefined) {
+          bad = `a post-call sample reads ${flight.value.toFixed(1)} at +${flight.at.toFixed(0)}ms — that is a flight, not an instant commit (a generator ran)`
+        }
+        finalize(
+          ROW_MOUNT,
+          bad === null,
+          bad ??
+            `same-tick read ${sameTick!.toFixed(1)} = origin (the commit is NOT synchronous at ` +
+              `the call); target ${MOUNT_TARGET} committed — the JS readback landed at ` +
+              `+${landing!.at.toFixed(0)}ms (rAF frame ${landing!.frames} of the poll); ` +
+              `post-call onUpdates [${postText}] — no flight. The landing latency is the ` +
+              'device-dependent readback of the UI-side next-tick commit (command crossing + ' +
+              'the null-dt t=0 frame + the marshal return) — EVIDENCE, never the gate; the ' +
+              'gates are never-synchronous and no-flight',
+        )
+        setStage('mount row finalized — press fires next (two components + the delay box)')
+      },
+    )
+    // The hook's callback is stable by contract; the mount leg runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // The press handler — the Pressable below and the timeline both fire THIS: one handler, so
+  // the self-driven run exercises the same path a tap would.
+  const firePress = useCallback((): void => {
+    const traces = tracesRef.current!
+    pressStampRef.current = Date.now() - mountStampRef.current
+    pressChainRef.current = []
+    startInstantTransition(() => {
+      setPressTargetA(PRESS_A_TARGET)
+      setPressTargetB(PRESS_B_TARGET)
+      setDelayTarget(DELAY_TARGET)
+    })
+    pressSameTickRef.current = [traces.pressA.latest, traces.pressB.latest, traces.delay.latest]
+    setPressCount((count) => count + 1)
+    let frame = 0
+    const step = (): void => {
+      frame += 1
+      pressChainRef.current = [
+        ...pressChainRef.current,
+        { a: traces.pressA.latest, b: traces.pressB.latest, d: traces.delay.latest },
+      ]
+      if (frame < 5) trackRaf(requestAnimationFrame(step))
+    }
+    trackRaf(requestAnimationFrame(step))
+  }, [startInstantTransition])
+
+  useEffect(() => {
+    const mountStamp = mountStampRef.current
+    const now = (): number => Date.now() - mountStamp
+    const traces = tracesRef.current!
+
+    // The production error channel tap (the U5 pattern): refusal reports ride consoleReporter →
+    // console.error. Installed for this screen's lifetime only; everything passes through.
+    const originalError = console.error
+    console.error = (...args: unknown[]) => {
+      for (const arg of args) {
+        const message = arg instanceof Error ? arg.message : typeof arg === 'string' ? arg : null
+        if (message !== null && /motion/i.test(message)) reportsRef.current.push(message)
+      }
+      originalError(...args)
+    }
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // 2/3. THE PRESS — one handler opens the window and retargets both components plus the
+    //      authored-delay box.
+    at(T_PRESS, () => {
+      firePress()
+      setStage(
+        `press fired: ${PRESS_A_TARGET} / ${PRESS_B_TARGET} on two components, ` +
+          `${DELAY_TARGET} on the authored delay-0.5 box — all inside the window`,
+      )
+    })
+    at(T_DELAY_EARLY, () => {
+      delayEarlyRef.current = traces.delay.latest
+      setStage(
+        'delay leg: +150ms sample taken (well before the authored 500ms — must read the target)',
+      )
+    })
+
+    // 4. THE RELOCK — ~100ms post-press, past the two-frame relock: an ordinary short tween
+    //    must FLY. The row self-finalizes when the terminal's settle-edge marshal lands (or
+    //    the deadline passes): the flight witness is the existence of intermediate committed
+    //    samples — immune to the flight's start latency, unlike a fixed-offset mid sample.
+    at(T_RELOCK_RETARGET, () => {
+      const stamp = now()
+      setRelockTarget(RELOCK_TARGET)
+      setStage(`relock leg: 0 → ${RELOCK_TARGET} on a plain 0.5s tween, started 100ms post-press`)
+      pollLanding(
+        traces.relock,
+        RELOCK_TARGET,
+        stamp + SETTLE_DEADLINE_MS,
+        now,
+        trackRaf,
+        (landing) => {
+          const post = traces.relock.samples.filter((s) => s.at >= stamp)
+          const interior = post.filter(
+            (s) => s.value > 0 + FLIGHT_MARGIN && s.value < RELOCK_TARGET - FLIGHT_MARGIN,
+          )
+          const gap = stamp - pressStampRef.current
+          let bad: string | null = null
+          if (interior.length === 0) {
+            bad =
+              landing !== null
+                ? `ZERO intermediate committed samples — the retarget committed INSTANTLY ` +
+                  `${gap.toFixed(0)}ms post-press (readback +${(landing.at - stamp).toFixed(0)}ms): ` +
+                  'the window is stuck open (the relock never fired)'
+                : `no intermediate samples AND the terminal never landed within the ` +
+                  `${SETTLE_DEADLINE_MS}ms deadline (latest ${traces.relock.latest.toFixed(1)}) — ` +
+                  'the post-window tween did not fly'
+          } else if (landing === null) {
+            bad =
+              `the flight flew (${interior.length} intermediate samples) but the terminal ` +
+              `${RELOCK_TARGET}'s marshal never landed within the ${SETTLE_DEADLINE_MS}ms ` +
+              `deadline (latest ${traces.relock.latest.toFixed(1)}) — a genuinely-missing ` +
+              "settle-edge marshal (the 7a finding-B class), not the card's timing"
+          }
+          finalize(
+            ROW_RELOCK,
+            bad === null,
+            bad ??
+              `the retarget FLEW: ${interior.length} intermediate committed samples ` +
+                `(${interior[0]!.value.toFixed(1)} → ${interior[interior.length - 1]!.value.toFixed(1)}, ` +
+                `strictly between 0 and ${RELOCK_TARGET}) — a stuck window commits instantly with ` +
+                `ZERO intermediates; the terminal ${RELOCK_TARGET} landed at +${(landing!.at - stamp).toFixed(0)}ms ` +
+                'post-retarget (the 500ms flight + the settle-edge delivery — the landing ' +
+                'latency is DISCLOSED, not gated to a fixed offset: the settle frame’s emission ' +
+                'is unit-pinned, its device delivery lags — the 7a settle-notification ' +
+                `finding’s family); the window closed on schedule (the retarget fired ` +
+                `${gap.toFixed(0)}ms post-press, past the two-post-render-frame relock)`,
+          )
+          setStage('relock row finalized — back-to-back pair next')
+        },
+      )
+    })
+
+    at(T_PRESS_FINALIZE, () => {
+      const pressStamp = pressStampRef.current
+      const chain = pressChainRef.current
+      const sameTick = pressSameTickRef.current
+      const chainText = chain
+        .map((c, i) => `f${i + 1}=(${c.a.toFixed(1)},${c.b.toFixed(1)},${c.d.toFixed(1)})`)
+        .join(' ')
+
+      // Row 2 — both components committed instantly.
+      const frameA = targetFrame(
+        chain.map((c) => c.a),
+        PRESS_A_TARGET,
+      )
+      const frameB = targetFrame(
+        chain.map((c) => c.b),
+        PRESS_B_TARGET,
+      )
+      const flightA = flightSample(traces.pressA, pressStamp, 0, PRESS_A_TARGET)
+      const flightB = flightSample(traces.pressB, pressStamp, PRESS_B_TARGET, 0)
+      const committedA = Math.abs(traces.pressA.latest - PRESS_A_TARGET) <= EPS
+      const committedB = Math.abs(traces.pressB.latest - PRESS_B_TARGET) <= EPS
+      let badPress: string | null = null
+      if (sameTick === null || sameTick.some((value) => Math.abs(value - 0) > EPS)) {
+        badPress = `a same-tick read at the press reads [${sameTick?.map((v) => v.toFixed(1)).join(', ') ?? 'none'}], want origins [0, 0, 0] — a synchronous commit`
+      } else if (frameA === 0 || frameA > 4 || frameB === 0 || frameB > 4) {
+        badPress = `a target never landed within the 4-frame band (A frame ${frameA}, B frame ${frameB}; chain: ${chainText || 'empty'})`
+      } else if (flightA !== undefined) {
+        badPress = `component A flew (sample ${flightA.value.toFixed(1)} at +${flightA.at.toFixed(0)}ms) — the window did not cover it`
+      } else if (flightB !== undefined) {
+        badPress = `component B flew (sample ${flightB.value.toFixed(1)} at +${flightB.at.toFixed(0)}ms) — the window is not global`
+      } else if (!committedA || !committedB) {
+        badPress = `committed values A=${traces.pressA.latest.toFixed(1)} B=${traces.pressB.latest.toFixed(1)}, want ${PRESS_A_TARGET} / ${PRESS_B_TARGET}`
+      }
+      finalize(
+        ROW_PRESS,
+        badPress === null,
+        badPress ??
+          `same-tick reads [${sameTick!.map((v) => v.toFixed(1)).join(', ')}] = origins; ` +
+            `component A committed ${PRESS_A_TARGET} at rAF frame ${frameA}, component B ` +
+            `committed ${PRESS_B_TARGET} at frame ${frameB} (chain A/B/D: ${chainText}); no ` +
+            'flight on either — the window is GLOBAL across components',
+      )
+
+      // Row 3 — the authored 500ms delay was zeroed: the +150ms sample already reads the
+      // target, and the commit landed inside the same band as the undelayed boxes.
+      const frameD = targetFrame(
+        chain.map((c) => c.d),
+        DELAY_TARGET,
+      )
+      const early = delayEarlyRef.current
+      const flightD = flightSample(traces.delay, pressStamp, 0, DELAY_TARGET)
+      const committedD = Math.abs(traces.delay.latest - DELAY_TARGET) <= EPS
+      let badDelay: string | null = null
+      if (early === null || Math.abs(early - DELAY_TARGET) > EPS) {
+        badDelay = `the +150ms sample reads ${fmt(early)}, want target ${DELAY_TARGET} — the authored 500ms delay was NOT zeroed inside the window`
+      } else if (frameD === 0 || frameD > 4) {
+        badDelay = `the delayed box's target never landed within the 4-frame band (chain: ${chainText || 'empty'})`
+      } else if (flightD !== undefined) {
+        badDelay = `the delayed box flew (sample ${flightD.value.toFixed(1)}) — a generator ran despite the window`
+      } else if (!committedD) {
+        badDelay = `the delayed box committed ${traces.delay.latest.toFixed(1)}, want ${DELAY_TARGET}`
+      }
+      finalize(
+        ROW_DELAY,
+        badDelay === null,
+        badDelay ??
+          `+150ms sample ${early!.toFixed(1)} = target ${DELAY_TARGET} (well before the ` +
+            `authored 500ms), committed at rAF frame ${frameD} — the window zeroed the authored ` +
+            "{ type: 'tween', duration: 0.6, delay: 0.5 } (the pin's global-flag asymmetry: " +
+            'the authored type:false honors delay, the global flag does not)',
+      )
+      setStage('press rows finalized — the relock poll and the back-to-back pair remain')
+    })
+
+    // 5. BACK-TO-BACK — two calls one frame apart; the token guard keeps the window open for
+    //    the second. Each call's commit lands on its own deadline poll; the row finalizes once
+    //    BOTH polls resolved.
+    const finalizeB2B = (): void => {
+      const landingA = b2bLandingARef.current
+      const landingB = b2bLandingBRef.current
+      if (landingA === undefined || landingB === undefined) return
+      const stampA = b2bStampARef.current
+      const stampB = b2bStampBRef.current
+      const sameTickA = b2bSameTickARef.current
+      const sameTickB = b2bSameTickBRef.current
+      const postA = traces.b2bA.samples.filter((s) => s.at >= stampA).map((s) => s.value.toFixed(1))
+      const postB = traces.b2bB.samples.filter((s) => s.at >= stampB).map((s) => s.value.toFixed(1))
+      const flightA = flightSample(traces.b2bA, stampA, B2B_A_TARGET, 0)
+      const flightB = flightSample(traces.b2bB, stampB, 0, B2B_B_TARGET)
+      let bad: string | null = null
+      if (
+        sameTickA === null ||
+        Math.abs(sameTickA - 0) > EPS ||
+        sameTickB === null ||
+        Math.abs(sameTickB - 0) > EPS
+      ) {
+        bad = `a same-tick read reads A=${fmt(sameTickA)} B=${fmt(sameTickB)}, want origins 0 — a synchronous commit`
+      } else if (landingA === null) {
+        bad = `call A's commit readback never landed within the ${COMMIT_DEADLINE_MS}ms deadline (post-call onUpdates [${postA.join(', ') || 'none'}])`
+      } else if (landingB === null) {
+        bad = `call B's commit readback never landed within the ${COMMIT_DEADLINE_MS}ms deadline (post-call onUpdates [${postB.join(', ') || 'none'}])`
+      } else if (flightA !== undefined) {
+        bad = `call A's box flew (sample ${flightA.value.toFixed(1)})`
+      } else if (flightB !== undefined) {
+        bad = `call B's box flew (sample ${flightB.value.toFixed(1)} at +${flightB.at.toFixed(0)}ms) — the token guard failed: the stale unlock closed the window under the second call`
+      }
+      finalize(
+        ROW_B2B,
+        bad === null,
+        bad ??
+          `call A committed ${B2B_A_TARGET} (readback +${(landingA!.at - stampA).toFixed(0)}ms, ` +
+            `rAF frame ${landingA!.frames} of its poll); call B — one frame later — committed ` +
+            `${B2B_B_TARGET} (+${(landingB!.at - stampB).toFixed(0)}ms, frame ${landingB!.frames}); ` +
+            `post-call onUpdates A[${postA.join(', ')}] B[${postB.join(', ')}] — no flight on ` +
+            "either: the second call's token kept the window open (the stale first unlock " +
+            'bailed)',
+      )
+      setStage('back-to-back row finalized — clean-run verdict next')
+    }
+
+    at(T_B2B, () => {
+      b2bStampARef.current = now()
+      b2bLandingARef.current = undefined
+      b2bLandingBRef.current = undefined
+      startInstantTransition(() => setB2bTargetA(B2B_A_TARGET))
+      b2bSameTickARef.current = traces.b2bA.latest
+      pollLanding(
+        traces.b2bA,
+        B2B_A_TARGET,
+        b2bStampARef.current + COMMIT_DEADLINE_MS,
+        now,
+        trackRaf,
+        (landing) => {
+          b2bLandingARef.current = landing
+          finalizeB2B()
+        },
+      )
+      // The second call ONE FRAME later — the pin's stale-token shape: the first call's unlock
+      // (scheduled two frames out) must bail against the newer token, or it closes the window
+      // this call extended.
+      trackRaf(
+        requestAnimationFrame(() => {
+          b2bStampBRef.current = now()
+          startInstantTransition(() => setB2bTargetB(B2B_B_TARGET))
+          b2bSameTickBRef.current = traces.b2bB.latest
+          pollLanding(
+            traces.b2bB,
+            B2B_B_TARGET,
+            b2bStampBRef.current + COMMIT_DEADLINE_MS,
+            now,
+            trackRaf,
+            (landing) => {
+              b2bLandingBRef.current = landing
+              finalizeB2B()
+            },
+          )
+        }),
+      )
+      setStage(`back-to-back: call A → ${B2B_A_TARGET}, call B one frame later → ${B2B_B_TARGET}`)
+    })
+
+    // 6. CLEAN RUN — the console tap saw zero refusal reports across the whole timeline.
+    at(T_CLEAN, () => {
+      const reports = reportsRef.current
+      finalize(
+        ROW_CLEAN,
+        reports.length === 0,
+        reports.length === 0
+          ? `0 refusal reports through the console tap across ${now().toFixed(0)}ms of ` +
+              'the mount commit, the press, the delay/relock legs, and the back-to-back pair'
+          : `${reports.length} report(s): ${reports
+              .map((message) => `"${message.slice(0, 80)}…"`)
+              .join(' | ')}`,
+      )
+    })
+    at(T_DONE, () => setStage('done'))
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      for (const raf of rafsRef.current) cancelAnimationFrame(raf)
+      console.error = originalError
+    }
+    // All captured values are refs or stable setters; the timeline runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const done = ROW_ORDER.every((id) => rows[id] !== undefined)
+  const failing = ROW_ORDER.filter((id) => rows[id] !== undefined && !rows[id]!.pass)
+  const verdict = !done ? 'RUNNING' : failing.length === 0 ? 'PASS' : 'FAIL'
+  const passed = Object.keys(rows).length - failing.length
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>U7b instant-transition checks</Text>
+      <Text style={styles.subtitle}>
+        useInstantTransition global window — the pin example verbatim ({severity} severity)
+      </Text>
+      <View
+        style={[
+          styles.banner,
+          verdict === 'PASS' ? styles.pass : verdict === 'FAIL' ? styles.fail : styles.running,
+        ]}
+      >
+        <Text style={styles.bannerText}>{verdict}</Text>
+      </View>
+      <Text style={styles.tally}>
+        {done
+          ? `${passed} PASS / ${failing.length} FAIL of ${ROW_ORDER.length} rows`
+          : `${Object.keys(rows).length}/${ROW_ORDER.length} rows complete — RUNNING`}
+      </Text>
+      <Text style={styles.tallyDetail}>
+        {done
+          ? failing.length === 0
+            ? 'no failing rows'
+            : `FAILING: ${failing.join('  |  ')}`
+          : `stage: ${stage}`}
+      </Text>
+      <Text style={styles.status}>
+        stage: {stage} · presses={pressCount} · mount x={live.mount ?? '0.0'} · A=
+        {live.pressA ?? '0.0'} B=
+        {live.pressB ?? '0.0'} · delay={live.delay ?? '0.0'} · relock={live.relock ?? '0.0'} · b2b=
+        {live.b2bA ?? '0.0'}/{live.b2bB ?? '0.0'}
+      </Text>
+
+      <Pressable onPress={firePress} style={styles.button} accessibilityLabel="u7b-press-button">
+        <Text style={styles.buttonText}>PRESS (auto-fires at +{T_PRESS}ms)</Text>
+      </Pressable>
+
+      {/* The subjects. The white box is the pin example verbatim (useInstantTransition.tsx:4-9,
+          18): 100×100 white, initial={false}, animate={{ x }}. The press pair are two DIFFERENT
+          components retargeted inside one window; the delay box carries the authored 500ms
+          delay; the relock box flies a plain 0.5s tween after the window closes; the b2b pair
+          takes the two back-to-back calls. onUpdate on each is the committed-values readback. */}
+      <View style={styles.stageRow}>
+        <MotionView
+          initial={false}
+          animate={{ x }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('mount', value)
+          }}
+          style={styles.mountBox}
+          accessibilityLabel="u7b-mount-subject"
+        />
+        <PressSubjectA target={pressTargetA} onSample={(value) => record('pressA', value)} />
+        <PressSubjectB target={pressTargetB} onSample={(value) => record('pressB', value)} />
+      </View>
+      <View style={styles.stageRow}>
+        <MotionView
+          animate={{ x: delayTarget }}
+          initial={false}
+          transition={{ type: 'tween', duration: 0.6, delay: 0.5 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('delay', value)
+          }}
+          style={styles.delayBox}
+          accessibilityLabel="u7b-delay-subject"
+        />
+        <MotionView
+          animate={{ x: relockTarget }}
+          initial={false}
+          transition={{ type: 'tween', duration: 0.5 }}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('relock', value)
+          }}
+          style={styles.relockBox}
+          accessibilityLabel="u7b-relock-subject"
+        />
+        <MotionView
+          animate={{ x: b2bTargetA }}
+          initial={false}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('b2bA', value)
+          }}
+          style={styles.b2bBoxA}
+          accessibilityLabel="u7b-b2b-subject-a"
+        />
+        <MotionView
+          animate={{ x: b2bTargetB }}
+          initial={false}
+          onUpdate={(latest) => {
+            const value = readX(latest)
+            if (value !== null) record('b2bB', value)
+          }}
+          style={styles.b2bBoxB}
+          accessibilityLabel="u7b-b2b-subject-b"
+        />
+      </View>
+
+      {ROW_ORDER.map((id) => {
+        const row = rows[id]
+        return (
+          <View key={id} style={styles.row}>
+            <Text
+              style={[
+                styles.verdict,
+                row === undefined ? styles.pending : row.pass ? styles.ok : styles.bad,
+              ]}
+            >
+              {row === undefined ? '…' : row.pass ? 'PASS' : 'FAIL'}
+            </Text>
+            <View style={styles.rowBody}>
+              <Text style={styles.rowId}>{id}</Text>
+              <Text style={styles.rowDetail} numberOfLines={4}>
+                {row === undefined ? 'pending' : row.detail}
+              </Text>
+            </View>
+          </View>
+        )
+      })}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 8 },
+  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' },
+  running: { backgroundColor: '#7a641d' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  tally: { color: '#e6e6f0', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  tallyDetail: { color: '#f87171', fontSize: 11, marginTop: 3, textAlign: 'center' },
+  status: {
+    color: '#c9c9d8',
+    fontSize: 11,
+    marginTop: 8,
+    textAlign: 'center',
+    fontFamily: 'Menlo',
+  },
+  button: {
+    alignSelf: 'center',
+    marginTop: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: '#2a2a3a',
+  },
+  buttonText: { color: '#c9c9d8', fontSize: 12, fontWeight: '700' },
+  stageRow: {
+    flexDirection: 'row',
+    marginTop: 18,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+  // The pin example's style verbatim (useInstantTransition.tsx:4-9): 100×100 white.
+  mountBox: { width: 100, height: 100, backgroundColor: 'white', borderRadius: 12 },
+  pressBoxA: { width: 60, height: 60, backgroundColor: '#3b82f6', borderRadius: 10 },
+  pressBoxB: { width: 60, height: 60, backgroundColor: '#f59e0b', borderRadius: 10 },
+  delayBox: { width: 60, height: 60, backgroundColor: '#a855f7', borderRadius: 10 },
+  relockBox: { width: 60, height: 60, backgroundColor: '#22c55e', borderRadius: 10 },
+  b2bBoxA: { width: 60, height: 60, backgroundColor: '#ec4899', borderRadius: 10 },
+  b2bBoxB: { width: 60, height: 60, backgroundColor: '#14b8a6', borderRadius: 10 },
+  row: { flexDirection: 'row', marginTop: 10 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  pending: { color: '#8a8aa0' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+})