@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ReducedMotionChecksScreen.tsx

@@ -0,0 +1,614 @@
+// U7a reduced-motion device checks (the U7a packet's floor 3 — dissolved at the unit terminal
+// into REQ-API-027-adjacent surface text): the
+// native card mirroring the pinned catalog useReducedMotion.tsx example — an outer motion View
+// carrying the animate label with initial={false}, an inner variants-only child whose embedded
+// transition is SELECTED BY THE HOOK SNAPSHOT (`shouldReduceMotion ? { type: false } :
+// { duration: 1 }`), visibility toggling every ~1.5s. Five claims, self-driven:
+//
+//   1. HOOK RESOLVE — the mounted hook's first-render value is false (the pin's matchMedia-absent
+//      fallback, packet F2's async transient) and the resolved value equals a DIRECT
+//      AccessibilityInfo.isReduceMotionEnabled() read taken at +900ms. On the proof devices the
+//      OS preference is OFF, so the resolve is a same-value setState bail; the one-update /
+//      no-subscription snapshot law is pinned by the mock-driven useReducedMotion.test.ts — the
+//      row says so rather than claiming a device witness it cannot have.
+//   2. SNAPSHOT SELECTS THE TWEEN — with the resolved value false the example's toggle drives
+//      opacity through the 1s flight: mid-fade onUpdate samples must land STRICTLY between 0.02
+//      and 0.98 in BOTH fades (a broken label propagation animates nothing; an instant commit
+//      shows no interior samples), each fade must REACH its target, and the flight-activity
+//      span (how long the samples keep moving) must read the 1s class — all measured from the
+//      committed samples, never the settle marshal. The fade peak and the onAnimationComplete
+//      stamps are recorded as evidence, not gated: the 2026-08-18 proof showed the flight
+//      running with a spring OVERSHOOT (peak ≈1.046 — native's omitted-type { duration }
+//      mapping, FIXED by REQ-TIMING-006: the fade now tweens monotone, peak ≤ 1.0) and zero
+//      completion deliveries (RESOLVED 2026-08-21 by the finding-B unit: the dispatch chain was
+//      intact — the fade-in was superseded by the raced fade-out retarget, which the widened
+//      toggle gap above removes, and the card read completions once past their landing).
+//   3. THE INSTANT LANE (contract 0's device witness) — a second box on an AUTHORED
+//      `{ type: false }` transition: on retarget the final value commits with NO flight. The
+//      same-tick sample must still read the origin (the commit is NEXT-FRAME, never synchronous
+//      at the retarget call) and the rAF chain must read the target within the 4-frame
+//      JS-readback band: 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 setTimeout(0)
+//      return; the delay leg's +350ms on a 300ms delay corroborates the ~3-frame round trip.
+//      Any post-retarget sample strictly between origin and target is a flight and fails.
+//   4. AUTHORED DELAY — the same box retargeted on `{ type: false, delay: 0.3 }`: a +150ms
+//      sample still reads the origin, a +600ms sample reads the target (the pin's authored-form
+//      asymmetry — the global instant flag zeroes delay, the authored form honors it).
+//   5. 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 opacity 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 { useEffect, useMemo, useRef, useState } from 'react'
+import { AccessibilityInfo, ScrollView, StyleSheet, Text, View } from 'react-native'
+import type { Transition } from '@unrulysystems/native-motion-core'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { useReducedMotion } from '../../native/motion/useReducedMotion'
+
+const ROW_HOOK = 'hook resolve: first-render false, resolved value = the direct OS read'
+const ROW_TWEEN = 'snapshot selects the 1s tween: mid-fade samples strictly between 0.02 and 0.98'
+const ROW_INSTANT = 'authored { type: false }: no flight — next-frame commit, never synchronous'
+const ROW_DELAY = 'authored { type: false, delay: 0.3 }: the authored delay is honored'
+const ROW_CLEAN = 'clean run: zero refusal reports through the console tap'
+const ROW_ORDER = [ROW_HOOK, ROW_TWEEN, ROW_INSTANT, ROW_DELAY, ROW_CLEAN] as const
+
+// The instant box's two legs: 0.15 → 0.85 bare, then 0.85 → 0.15 under the authored 300ms delay.
+const INSTANT_ORIGIN = 0.15
+const INSTANT_TARGET = 0.85
+const EPS = 0.005
+
+// Timeline (ms). Dwells make every staged state capturable: the boot frame holds the pin
+// example's hidden mount (0–1500, the initial={false} witness), the fade-in mid-flight window is
+// ~1900–2300 and the fade-out's ~5000–5400, the instant-lane commit dwells 7600–8100, and the
+// final verdict holds from ~9700 on. The 2026-08-21 re-base (finding-B resolution, REQ-API-060):
+// the toggle gap widened 1700 → 3100ms so the 1s fade-in completes BEFORE the fade-out retarget
+// even under the measured ~770ms mount→flight-start latency — at the original 3200 the fade-in
+// was superseded mid-flight (peak 0.858, no completion), a healthy-but-raced flight, not a
+// defect; and row 2's finalize is event-driven on the two completions (a fixed wall-clock
+// finalize raced the stretched flight both ways).
+const T_HOOK = 900
+const T_TOGGLE_1 = 1500
+const T_TOGGLE_2 = 4600
+const T_INSTANT_RETARGET = 7000
+const T_INSTANT_FINALIZE = 7600
+const T_DELAY_RETARGET = 8100
+const T_DELAY_EARLY = 8250
+const T_DELAY_LATE = 8700
+const T_DELAY_FINALIZE = 8900
+const T_CLEAN = 9500
+const T_DONE = 9700
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface OpacitySample {
+  readonly at: number
+  readonly value: number
+}
+
+function readOpacity(latest: Readonly<Record<string, string | number>>): number | null {
+  const raw = latest['opacity']
+  const value = typeof raw === 'number' ? raw : typeof raw === 'string' ? Number(raw) : NaN
+  return Number.isFinite(value) ? value : null
+}
+
+// The flight-activity span: how long the committed samples keep MOVING (a later sample differs
+// by > 0.002), measured from the FIRST moving sample to the last. Generator-agnostic by design —
+// the pin's 1s tween and native's 1s duration-spring both move for ~1s; a default-duration
+// fallback (~0.3s) or an instant commit falls short. Latency-agnostic by the same design
+// (2026-08-21, finding-B re-base): measuring from the toggle conflated the ~770ms
+// mount→flight-start latency with the flight class and read 1944ms on a healthy 1s tween. The
+// band tops at 2400ms because the driver's dt CEILING (40ms; owner REQ-CLOCK-003, consumer
+// REQ-DRIVER-012) stretches a 1s
+// flight to ~1.9s under a loaded host — a 3s flight still reads well past the band.
+function activitySpan(w: readonly OpacitySample[]): number | null {
+  let firstMoving = -1
+  for (let i = 0; i < w.length - 1; i++) {
+    if (Math.abs(w[i + 1]!.value - w[i]!.value) > 0.002) {
+      firstMoving = i
+      break
+    }
+  }
+  if (firstMoving === -1) return null
+  for (let i = w.length - 2; i >= firstMoving; i--) {
+    if (Math.abs(w[i + 1]!.value - w[i]!.value) > 0.002) return w[i + 1]!.at - w[firstMoving]!.at
+  }
+  return null
+}
+
+function fmtSpan(span: number | null): string {
+  return span === null ? 'none' : `~${span.toFixed(0)}ms`
+}
+
+export function ReducedMotionChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const shouldReduceMotion = useReducedMotion()
+
+  // The pin example's exact structure: the transition is selected by the hook snapshot and rides
+  // INSIDE the variant entries. Memoized on the hook value so an unrelated re-render never
+  // re-identities the dictionary into the label lane (R7 law b: labels execute on a definition
+  // change) — on the proof devices the value never changes after resolve, so this is the pin's
+  // `transition` constant, not a reactive re-arm.
+  const variants = useMemo(() => {
+    const transition: Transition = shouldReduceMotion ? { type: false } : { duration: 1 }
+    return {
+      visible: { opacity: 1, transition },
+      hidden: { opacity: 0, transition },
+    }
+  }, [shouldReduceMotion])
+
+  const [isVisible, setIsVisible] = useState(false)
+  const [instantTarget, setInstantTarget] = useState(INSTANT_ORIGIN)
+  const [instantTransition, setInstantTransition] = useState<Transition>({ type: false })
+  const [stage, setStage] = useState('boot: mounted hidden (initial={false}), hook resolving')
+  const [liveTween, setLiveTween] = useState('—')
+  const [liveInstant, setLiveInstant] = useState(INSTANT_ORIGIN.toFixed(3))
+  const [rows, setRows] = useState<Partial<Record<(typeof ROW_ORDER)[number], RowResult>>>({})
+
+  // Row 1 evidence: the first-render value, the live resolved value (a ref so the single-run
+  // timeline never reads a stale closure), and the distinct-value history (the snapshot law).
+  const mountStampRef = useRef(Date.now())
+  const firstRenderRef = useRef<boolean | null>(null)
+  if (firstRenderRef.current === null) firstRenderRef.current = shouldReduceMotion
+  const resolvedRef = useRef(shouldReduceMotion)
+  resolvedRef.current = shouldReduceMotion
+  const valueHistoryRef = useRef<readonly (boolean | null)[]>([])
+
+  // Row 2 evidence: every committed opacity sample + completion stamps on the tween subject.
+  const tweenSamplesRef = useRef<OpacitySample[]>([])
+  const tweenCompletionsRef = useRef<number[]>([])
+  const toggleStampsRef = useRef<number[]>([])
+
+  // Rows 3/4 evidence: the instant box's committed samples, the same-tick read, the retarget
+  // rAF chain, and the delay leg's early/late reads.
+  const instantSamplesRef = useRef<OpacitySample[]>([])
+  const instantLatestRef = useRef(INSTANT_ORIGIN)
+  const instantStampRef = useRef(0)
+  const delayStampRef = useRef(0)
+  const sameTickRef = useRef<number | null>(null)
+  const frameChainRef = useRef<OpacitySample[]>([])
+  const delayEarlyRef = useRef<number | null>(null)
+  const delayLateRef = useRef<number | null>(null)
+
+  const reportsRef = useRef<string[]>([])
+
+  useEffect(() => {
+    valueHistoryRef.current = [...valueHistoryRef.current, shouldReduceMotion]
+  }, [shouldReduceMotion])
+
+  const finalize = (id: (typeof ROW_ORDER)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    const mountStamp = mountStampRef.current
+    const now = (): number => Date.now() - mountStamp
+
+    // 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))
+    }
+    let raf: ReturnType<typeof requestAnimationFrame> | null = null
+
+    const fmt = (value: number | null): string =>
+      value === null ? 'unavailable' : value.toFixed(3)
+
+    // 1. HOOK RESOLVE — compare the mounted hook's resolved value against a direct OS read.
+    at(T_HOOK, () => {
+      void AccessibilityInfo.isReduceMotionEnabled()
+        .then((osEnabled) => {
+          const resolved = resolvedRef.current
+          const changes = valueHistoryRef.current.length - 1
+          const pass = firstRenderRef.current === false && resolved === osEnabled && changes <= 1
+          finalize(
+            ROW_HOOK,
+            pass,
+            `first render ${String(firstRenderRef.current)} (the pin's matchMedia-absent ` +
+              `fallback — packet F2's async transient); resolved ${String(resolved)} = direct ` +
+              `AccessibilityInfo read ${String(osEnabled)} at +${T_HOOK}ms; ${changes} value ` +
+              'change(s) this mount (OS OFF → the false→false resolve is a same-value setState ' +
+              'bail; the one-update/no-subscription snapshot law is pinned by the mock-driven ' +
+              'useReducedMotion.test.ts, not claimable on device)',
+          )
+          setStage('hook resolved — toggle 1: hidden → visible on the selected transition')
+        })
+        .catch((error: unknown) => {
+          finalize(
+            ROW_HOOK,
+            false,
+            `the direct AccessibilityInfo read rejected: ${error instanceof Error ? error.message : String(error)}`,
+          )
+        })
+    })
+
+    // 2. The pin example's toggle: visibility flips ~every 1.5s, the snapshot-selected
+    //    transition carries it (resolved false on the proof devices → the 1s tween).
+    at(T_TOGGLE_1, () => {
+      toggleStampsRef.current = [now()]
+      setIsVisible(true)
+      setStage('fade-in: hidden → visible (mid-flight capture window ~+1.9–2.3s)')
+    })
+    at(T_TOGGLE_2, () => {
+      toggleStampsRef.current = [...toggleStampsRef.current, now()]
+      setIsVisible(false)
+      setStage('fade-out: visible → hidden (mid-flight capture window ~+5.0–5.4s)')
+    })
+    const finalizeTweenRow = (): void => {
+      const [t1, t2] = toggleStampsRef.current
+      const samples = tweenSamplesRef.current
+      const completions = tweenCompletionsRef.current
+      if (t1 === undefined || t2 === undefined) {
+        finalize(ROW_TWEEN, false, 'a toggle never fired — the timeline is broken')
+        return
+      }
+      // The 2026-08-21 latency-tolerant window (finding-B resolution): 1400ms raced the
+      // ~770ms mount→flight-start latency — the flight ends at toggle+~1800ms on the proof
+      // devices, so the peak/trough read landed mid-flight (0.844) even with the supersession
+      // removed. 2400ms covers flight + latency with margin and never reaches the next toggle.
+      const window = (t: number): OpacitySample[] =>
+        samples.filter((s) => s.at >= t && s.at <= t + 2400)
+      const interior = (t: number): OpacitySample[] =>
+        window(t).filter((s) => s.value > 0.02 && s.value < 0.98)
+      const in1 = interior(t1)
+      const in2 = interior(t2)
+      const w1 = window(t1)
+      const w2 = window(t2)
+      const span1 = activitySpan(w1)
+      const span2 = activitySpan(w2)
+      const peak1 = w1.reduce((max, s) => Math.max(max, s.value), 0)
+      const trough2 = w2.reduce((min, s) => Math.min(min, s.value), 1)
+      const preToggle = samples.filter((s) => s.at < t1).length
+      let bad: string | null = null
+      if (in1.length < 3) {
+        bad = `fade-in produced ${in1.length} interior sample(s) — a broken label propagation animates nothing, an instant commit shows none`
+      } else if (in1[in1.length - 1]!.value <= in1[0]!.value) {
+        bad = `fade-in interior samples do not climb (${in1[0]!.value.toFixed(3)} → ${in1[in1.length - 1]!.value.toFixed(3)})`
+      } else if (in2.length < 3) {
+        bad = `fade-out produced ${in2.length} interior sample(s)`
+      } else if (in2[in2.length - 1]!.value >= in2[0]!.value) {
+        bad = `fade-out interior samples do not fall (${in2[0]!.value.toFixed(3)} → ${in2[in2.length - 1]!.value.toFixed(3)})`
+      } else if (peak1 < 0.98) {
+        bad = `fade-in never reached the target (peak ${peak1.toFixed(3)})`
+      } else if (trough2 > 0.02) {
+        bad = `fade-out never reached the target (trough ${trough2.toFixed(3)})`
+      } else if (span1 === null || span1 < 600 || span1 > 2400) {
+        bad = `fade-in flight activity ${fmtSpan(span1)} — want the 1s class (600–2400ms of movement)`
+      } else if (span2 === null || span2 < 600 || span2 > 2400) {
+        bad = `fade-out flight activity ${fmtSpan(span2)} — want the 1s class`
+      }
+      // Measured evidence, never gated: the fade peak (peak ≤ 1.0 since REQ-TIMING-006 retired
+      // the omitted-type duration-spring mapping; the 2026-08-18 pre-fix run read ≈1.046) and
+      // the onAnimationComplete delivery (finding B resolved 2026-08-21: with the widened toggle
+      // gap the fade-in is never superseded, so BOTH completions land — the dispatch chain was
+      // intact all along, REQ-API-060).
+      const completionEvidence =
+        completions.length === 0
+          ? 'none delivered by finalize (finding-B signature — the widened gap should have ' +
+            'removed the supersession; investigate before re-proofing)'
+          : completions.map((c) => `+${(c - t1).toFixed(0)}ms`).join(', ')
+      finalize(
+        ROW_TWEEN,
+        bad === null,
+        bad ??
+          `fade-in ${in1.length} interior samples ${in1[0]!.value.toFixed(3)}→${in1[in1.length - 1]!.value.toFixed(3)}, ` +
+            `peak ${peak1.toFixed(3)}, activity ${fmtSpan(span1)}; fade-out ${in2.length} interior ` +
+            `${in2[0]!.value.toFixed(3)}→${in2[in2.length - 1]!.value.toFixed(3)}, activity ` +
+            `${fmtSpan(span2)}; ${preToggle} pre-toggle onUpdate(s) (the initial={false} ` +
+            `no-entrance witness); onAnimationComplete: ${completionEvidence}; resolved snapshot ` +
+            'false → variants carried { duration: 1 }',
+      )
+      setStage('tween rows finalized — instant-lane retarget next')
+    }
+    // Event-driven row-2 finalize (finding-B resolution, the U8 2295fbab analog): the fade
+    // completions ARE the settle edges, so the row judges them, never a wall-clock sample — a
+    // fixed finalize raced the latency-stretched flight both ways (supersession at 1.7s gap,
+    // mid-flight window read at 3.1s). Fail-closed deadline: 3s past the fade-out toggle.
+    const tweenRowPoll = setInterval(() => {
+      const [, t2] = toggleStampsRef.current
+      if (t2 === undefined) return
+      if (tweenCompletionsRef.current.length >= 2 || now() - t2 > 3000) {
+        clearInterval(tweenRowPoll)
+        finalizeTweenRow()
+      }
+    }, 200)
+
+    // 3. THE INSTANT LANE — retarget on the authored { type: false }. The same-tick read must
+    //    still see the origin (the commit is next-frame, not synchronous); the rAF chain must
+    //    see the target within the 4-frame JS-readback band (the pin's law covers the UI-side
+    //    commit; the card's readback also spans the command crossing, the null-dt t=0 frame,
+    //    and the marshal's setTimeout(0) return); no sample may land between origin and target.
+    at(T_INSTANT_RETARGET, () => {
+      instantStampRef.current = now()
+      sameTickRef.current = instantLatestRef.current
+      frameChainRef.current = []
+      setInstantTarget(INSTANT_TARGET)
+      let frame = 0
+      const step = (): void => {
+        frame += 1
+        frameChainRef.current = [
+          ...frameChainRef.current,
+          { at: now() - instantStampRef.current, value: instantLatestRef.current },
+        ]
+        if (frame < 5) raf = requestAnimationFrame(step)
+      }
+      raf = requestAnimationFrame(step)
+      setStage(`instant retarget: ${INSTANT_ORIGIN} → ${INSTANT_TARGET} on { type: false }`)
+    })
+    at(T_INSTANT_FINALIZE, () => {
+      const stamp = instantStampRef.current
+      const post = instantSamplesRef.current.filter((s) => s.at >= stamp)
+      const flight = post.find(
+        (s) => s.value > INSTANT_ORIGIN + 0.02 && s.value < INSTANT_TARGET - 0.02,
+      )
+      const sameTick = sameTickRef.current
+      const frames = frameChainRef.current
+      const targetFrame = frames.findIndex((f) => Math.abs(f.value - INSTANT_TARGET) <= EPS) + 1
+      const chain = frames.map((f, i) => `f${i + 1}=${f.value.toFixed(3)}`).join(' ')
+      const committed =
+        post.length > 0 && Math.abs(post[post.length - 1]!.value - INSTANT_TARGET) <= EPS
+      let bad: string | null = null
+      if (sameTick === null || Math.abs(sameTick - INSTANT_ORIGIN) > EPS) {
+        bad = `the same-tick sample reads ${fmt(sameTick)}, want origin ${INSTANT_ORIGIN} — a synchronous commit at the retarget call`
+      } else if (targetFrame === 0 || targetFrame > 4) {
+        bad = `the target never landed within the 4-frame JS-readback band of the retarget (chain: ${chain || 'empty'})`
+      } else if (flight !== undefined) {
+        bad = `a post-retarget sample reads ${flight.value.toFixed(3)} at +${flight.at.toFixed(0)}ms — that is a flight, not an instant commit`
+      } else if (!committed) {
+        bad = `no post-retarget onUpdate committed the target (samples: ${post.map((s) => s.value.toFixed(3)).join(', ') || 'none'})`
+      }
+      finalize(
+        ROW_INSTANT,
+        bad === null,
+        bad ??
+          `same-tick sample ${sameTick!.toFixed(3)} = origin (the commit is NOT synchronous at ` +
+            `the retarget call); target ${INSTANT_TARGET} read at rAF frame ${targetFrame} ` +
+            `(chain: ${chain}); post-retarget onUpdates [${post.map((s) => s.value.toFixed(3)).join(', ')}] — ` +
+            'no flight (the ≤4-frame band is the JS readback of the UI-side next-frame commit: ' +
+            'command crossing + the null-dt t=0 frame + the marshal return)',
+      )
+      setStage('instant lane committed — authored-delay leg next')
+    })
+
+    // 4. AUTHORED DELAY — { type: false, delay: 0.3 }: +150ms still reads the origin, +600ms
+    //    reads the target. The pin's asymmetry: the authored form honors delay, the global
+    //    instant flag (7b's window) zeroes it.
+    at(T_DELAY_RETARGET, () => {
+      delayStampRef.current = now()
+      setInstantTransition({ type: false, delay: 0.3 })
+      setInstantTarget(INSTANT_ORIGIN)
+      setStage(`delay leg: ${INSTANT_TARGET} → ${INSTANT_ORIGIN} on { type: false, delay: 0.3 }`)
+    })
+    at(T_DELAY_EARLY, () => {
+      delayEarlyRef.current = instantLatestRef.current
+      setStage('delay leg: +150ms sample taken (must still read the origin)')
+    })
+    at(T_DELAY_LATE, () => {
+      delayLateRef.current = instantLatestRef.current
+      setStage('delay leg: +600ms sample taken (must read the target)')
+    })
+    at(T_DELAY_FINALIZE, () => {
+      const stamp = delayStampRef.current
+      const post = instantSamplesRef.current.filter((s) => s.at >= stamp)
+      const commit = post.find((s) => Math.abs(s.value - INSTANT_ORIGIN) <= EPS)
+      const flight = post.find(
+        (s) => s.value > INSTANT_ORIGIN + 0.02 && s.value < INSTANT_TARGET - 0.02,
+      )
+      const early = delayEarlyRef.current
+      const late = delayLateRef.current
+      const commitAt = commit === undefined ? null : commit.at - stamp
+      let bad: string | null = null
+      if (early === null || Math.abs(early - INSTANT_TARGET) > EPS) {
+        bad = `the +150ms sample reads ${fmt(early)}, want origin ${INSTANT_TARGET} — the authored 300ms delay was not honored`
+      } else if (late === null || Math.abs(late - INSTANT_ORIGIN) > EPS) {
+        bad = `the +600ms sample reads ${fmt(late)}, want target ${INSTANT_ORIGIN} — the delayed commit never landed`
+      } else if (commitAt === null || commitAt < 250 || commitAt > 900) {
+        bad = `the commit landed at ${commitAt === null ? 'never' : `+${commitAt.toFixed(0)}ms`} — want the 300ms class (250–900ms)`
+      } else if (flight !== undefined) {
+        bad = `a post-retarget sample reads ${flight.value.toFixed(3)} — a flight under the delay leg`
+      }
+      finalize(
+        ROW_DELAY,
+        bad === null,
+        bad ??
+          `+150ms sample ${early!.toFixed(3)} = origin (delay holding), +600ms sample ` +
+            `${late!.toFixed(3)} = target, commit at +${commitAt!.toFixed(0)}ms — the authored ` +
+            '300ms delay is honored (the pin’s authored-form asymmetry: the global instant flag ' +
+            'would zero it)',
+      )
+      setStage('delay leg finalized — clean-run verdict next')
+    })
+
+    // 5. CLEAN RUN — the console tap saw zero refusal reports across the whole timeline. The
+    //    completion ledger is re-read here as a second witness: before the finding-B
+    //    resolution the tween row read it once at a wall-clock finalize and a healthy
+    //    completion landing past the read permanently read "none delivered".
+    at(T_CLEAN, () => {
+      const reports = reportsRef.current
+      const completions = tweenCompletionsRef.current
+      finalize(
+        ROW_CLEAN,
+        reports.length === 0,
+        (reports.length === 0
+          ? `0 refusal reports through the console tap across ${now().toFixed(0)}ms of ` +
+            'hook resolve, two tween fades, and both instant-lane legs'
+          : `${reports.length} report(s): ${reports
+              .map((message) => `"${message.slice(0, 80)}…"`)
+              .join(' | ')}`) +
+          `; tween completions by T_CLEAN: ${
+            completions.length === 0
+              ? 'none (the finding-B signature)'
+              : completions.map((c) => `+${c.toFixed(0)}ms`).join(', ')
+          }`,
+      )
+    })
+    at(T_DONE, () => setStage('done'))
+
+    return () => {
+      clearInterval(tweenRowPoll)
+      for (const timer of timers) clearTimeout(timer)
+      if (raf !== null) 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}>U7a reduced-motion checks</Text>
+      <Text style={styles.subtitle}>
+        useReducedMotion snapshot + authored {'{ type: false }'} instant lane ({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} · reduced={String(shouldReduceMotion)} · visible={String(isVisible)} · tween
+        opacity={liveTween} · instant opacity={liveInstant} → {instantTarget}
+      </Text>
+
+      {/* The subjects. Left: the pin example verbatim — outer carries the animate label with
+          initial={false}, the inner variants-only child resolves it (label propagation) with the
+          snapshot-selected transition embedded. Right: the authored { type: false } instant-lane
+          box. onUpdate on both is the committed-values readback. */}
+      <View style={styles.stageRow}>
+        <MotionView animate={isVisible ? 'visible' : 'hidden'} initial={false}>
+          <MotionView
+            variants={variants}
+            onUpdate={(latest) => {
+              const value = readOpacity(latest)
+              if (value === null) return
+              tweenSamplesRef.current.push({ at: Date.now() - mountStampRef.current, value })
+              setLiveTween(value.toFixed(3))
+            }}
+            onAnimationComplete={() => {
+              tweenCompletionsRef.current.push(Date.now() - mountStampRef.current)
+            }}
+            style={styles.tweenBox}
+            accessibilityLabel="u7a-tween-subject"
+          />
+        </MotionView>
+        <MotionView
+          animate={{ opacity: instantTarget }}
+          initial={false}
+          transition={instantTransition}
+          onUpdate={(latest) => {
+            const value = readOpacity(latest)
+            if (value === null) return
+            instantLatestRef.current = value
+            instantSamplesRef.current.push({ at: Date.now() - mountStampRef.current, value })
+            setLiveInstant(value.toFixed(3))
+          }}
+          style={styles.instantBox}
+          accessibilityLabel="u7a-instant-subject"
+        />
+      </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',
+  },
+  stageRow: {
+    flexDirection: 'row',
+    marginTop: 18,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+  // The pin example's style verbatim (useReducedMotion.tsx:4-9): 100×100 red, base opacity 1.
+  tweenBox: { width: 100, height: 100, backgroundColor: 'red', opacity: 1, borderRadius: 12 },
+  instantBox: { width: 100, height: 100, backgroundColor: '#3b82f6', borderRadius: 12 },
+  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 },
+})