@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ContentionProbeScreen.tsx

@@ -0,0 +1,224 @@
+// Device proof for REQ-DRIVER-026 (FLAG 5a): the REAL worklet driver executes the full
+// gesture↔declarative same-axis CONTENTION sequence on the UI runtime and settles at the FAR snap.
+// Self-driving (no touch — so the iOS simulator proves it too, not just Android real-touch): a held
+// write (grab to the finger position 110) → a declarative retarget (`animate.x → 200`) that CONTENDS,
+// drifting the live value PAST the [0,240] snap midpoint (120) while the hold persists → a release
+// that reads the drifted LIVE value as its origin (REQ-GESTURE-022) → settle at snap `240`. The
+// pre-fix skip froze the origin at the finger (110 < 120) and settled at `0`.
+//
+// The driver methods are driven from JS timers (`write`/`command`/`liveFor` are the wiring's own
+// calls). Phased with holds so the drift is screenshot-capturable; completion comes only from the
+// driver's real settle edge. A `settled` verdict therefore proves the frame loop stopped, the release
+// origin crossed the snap midpoint, and the committed endpoint is exactly 240.
+
+import { useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import {
+  type DragConstraints,
+  type ElementHandle,
+  type SnapConfig,
+  selectReleaseTarget,
+} from '@unrulysystems/native-motion-core'
+import { useWorkletDriver } from '../../native/driver/workletDriver'
+
+const SNAP: SnapConfig = { points: [0, 240] } // midpoint 120: origin < 120 ⇒ 0, > 120 ⇒ 240
+const CONSTRAINTS: DragConstraints = { min: 0, max: 240, elastic: 0.4 }
+const FINGER = 110 // dragged-to position, held (release velocity 0); 110 < the 120 midpoint
+// The contending declarative spring (a mount/`animate` feel) and the release settle spring.
+const CONTEND_SPRING = { type: 'spring', stiffness: 180, damping: 20 } as const
+const RELEASE_SPRING = { type: 'spring', stiffness: 400, damping: 40 } as const
+
+// Phase timings (ms). Generous so the drift crosses the midpoint and each phase is capturable.
+const CONTEND_AT = 800
+const RELEASE_AT = 2400
+const SETTLE_TIMEOUT_AT = 10_000
+const SNAP_MIDPOINT = 120
+const EXPECTED_ENDPOINT = 240
+
+const LOG_PREFIX = 'CONTENTION_PROBE '
+
+type Phase = 'grab' | 'contending' | 'released' | 'settled' | 'failed'
+
+interface LoggingGlobal {
+  nativeLoggingHook?: (message: string, level: number) => void
+}
+
+export function ContentionProbeScreen() {
+  const [phase, setPhase] = useState<Phase>('grab')
+  const [origin, setOrigin] = useState<number | null>(null)
+  const [settledValue, setSettledValue] = useState<number | null>(null)
+  const [failure, setFailure] = useState<string | null>(null)
+  const releaseOriginRef = useRef<number | null>(null)
+  const settleEdgeCountRef = useRef(0)
+  const timedOutRef = useRef(false)
+  const handleRef = useRef<ElementHandle | null>(null)
+  // The LIVE worklet driver from the hook — the single useFrameCallback on the UI runtime.
+  const binding = useWorkletDriver({
+    onAllSettled: () => {
+      settleEdgeCountRef.current += 1
+      const settleEdgeCount = settleEdgeCountRef.current
+      const handle = handleRef.current
+      if (handle === null) {
+        setFailure('settle edge fired without a registered handle')
+        setPhase('failed')
+        return
+      }
+
+      const releaseOrigin = releaseOriginRef.current
+      const committed = binding.driver.committed(handle)['x']
+      const active = binding.driver.isActive(handle)
+      const failures: string[] = []
+      if (timedOutRef.current) {
+        failures.push(`settle edge arrived after the ${SETTLE_TIMEOUT_AT}ms timeout`)
+      }
+      if (settleEdgeCount !== 1) {
+        failures.push(`settle edge count=${settleEdgeCount}, want exactly 1`)
+      }
+      if (releaseOrigin === null) failures.push('settle edge fired before release')
+      else if (releaseOrigin <= SNAP_MIDPOINT) {
+        failures.push(`release origin ${releaseOrigin} did not cross ${SNAP_MIDPOINT}`)
+      }
+      if (committed === undefined) failures.push('committed x is missing')
+      else if (committed !== EXPECTED_ENDPOINT) {
+        failures.push(`committed x=${committed}, want exactly ${EXPECTED_ENDPOINT}`)
+      }
+      if (active) failures.push('driver is still active after the settle edge')
+
+      const passed = failures.length === 0
+      setSettledValue(committed ?? null)
+      setFailure(passed ? null : failures.join('; '))
+      setPhase(passed ? 'settled' : 'failed')
+      const hook = (globalThis as LoggingGlobal).nativeLoggingHook
+      hook?.(
+        `${LOG_PREFIX}${JSON.stringify({
+          pass: passed,
+          releaseOrigin,
+          settledX: committed ?? null,
+          active,
+          settleEdgeCount,
+          finger: FINGER,
+          failures,
+        })}`,
+        1,
+      )
+    },
+  })
+  if (handleRef.current === null) {
+    handleRef.current = binding.driver.register({ x: 0 })
+  }
+  const handle = handleRef.current
+  const shared = binding.sharedFor(handle, 'x')
+
+  useEffect(() => {
+    const driver = binding.driver
+    // 1. Grab + drag to the finger position, HELD (velocity 0) — the driver write lane, exactly as
+    //    the gesture wiring's handlePanStart/Update do (REQ-DRIVER-024).
+    driver.write(handle, { x: FINGER }, { x: 0 })
+
+    // 2. A declarative `animate.x → 200` CONTENDS while held: it seeds a generator that drifts the
+    //    live value from the finger toward 200 without clearing the hold (REQ-DRIVER-026).
+    const t1 = setTimeout(() => {
+      setPhase('contending')
+      driver.command(handle, { kind: 'retarget', targets: { x: 200 }, transition: CONTEND_SPRING })
+    }, CONTEND_AT)
+
+    // 3. Release: read the ACTUAL live value (drifted past the midpoint) as the handoff ORIGIN, select
+    //    the snap target from it, and start the release spring (REQ-GESTURE-022) — the wiring's own
+    //    handlePanEnd logic, driven here without a real finger.
+    const t2 = setTimeout(() => {
+      const live = driver.liveFor(handle, 'x').value
+      const target = selectReleaseTarget(live, 0, CONSTRAINTS, SNAP)
+      releaseOriginRef.current = live
+      setOrigin(live)
+      // Preserve an early-settle failure: a later valid release must never overwrite evidence that
+      // the hold violated G-INV-7. The edge counter also keeps the eventual second edge failed.
+      setPhase((current) => (current === 'failed' ? current : 'released'))
+      driver.command(handle, {
+        kind: 'start',
+        targets: { x: { to: target, from: live, velocity: 0 } },
+        transition: RELEASE_SPRING,
+        releasesGesture: true,
+      })
+    }, RELEASE_AT)
+
+    // A missing settle edge is a bounded FAIL, never an indefinite wait and never timer-derived
+    // success. A late edge remains failed through timedOutRef, so it cannot overwrite this verdict.
+    const t3 = setTimeout(() => {
+      if (settleEdgeCountRef.current !== 0) return
+      timedOutRef.current = true
+      const committed = driver.committed(handle)['x']
+      const active = driver.isActive(handle)
+      const detail = `no settle edge by ${SETTLE_TIMEOUT_AT}ms; committed x=${String(committed)} active=${String(active)}`
+      setSettledValue(committed ?? null)
+      setFailure(detail)
+      setPhase('failed')
+      const hook = (globalThis as LoggingGlobal).nativeLoggingHook
+      hook?.(
+        `${LOG_PREFIX}${JSON.stringify({
+          pass: false,
+          releaseOrigin: releaseOriginRef.current,
+          settledX: committed ?? null,
+          active,
+          settleEdgeCount: 0,
+          finger: FINGER,
+          failures: [detail],
+        })}`,
+        1,
+      )
+    }, SETTLE_TIMEOUT_AT)
+
+    return () => {
+      clearTimeout(t1)
+      clearTimeout(t2)
+      clearTimeout(t3)
+    }
+  }, [binding, handle])
+
+  const boxStyle = useAnimatedStyle(() => ({ transform: [{ translateX: shared.value }] }))
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Native Motion</Text>
+      <Text style={styles.subtitle}>REQ-DRIVER-026: gesture↔declarative contention (worklet)</Text>
+      <View style={styles.track}>
+        <View style={[styles.snapMark, { left: 0 }]} />
+        <View style={[styles.snapMark, { left: 240 }]} />
+        <Animated.View style={[styles.box, boxStyle]} />
+      </View>
+      <Text style={styles.phase}>
+        phase: {phase}
+        {origin === null ? '' : ` · release origin x=${origin.toFixed(1)} · required >120`}
+        {settledValue === null ? '' : ` · committed x=${settledValue}`}
+        {phase === 'settled' ? ' · inactive' : ''}
+      </Text>
+      {failure === null ? null : <Text style={styles.failure}>FAIL: {failure}</Text>}
+      <Text style={styles.note}>
+        held at {FINGER} → animate x→200 drifts past 120 → release from the live value → snap 240
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0b0b12',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  title: { color: '#fff', fontSize: 28, fontWeight: '700' },
+  subtitle: { color: '#8a8aa0', fontSize: 14, marginTop: 6, marginBottom: 40 },
+  track: { width: 240 + 64, height: 72, justifyContent: 'center' },
+  snapMark: {
+    position: 'absolute',
+    width: 2,
+    height: 72,
+    backgroundColor: '#33334a',
+  },
+  box: { width: 64, height: 64, borderRadius: 16, backgroundColor: '#6c8cff' },
+  phase: { color: '#c9c9d8', fontSize: 13, marginTop: 32, fontFamily: 'Menlo' },
+  failure: { color: '#ff6b6b', fontSize: 13, marginTop: 12, textAlign: 'center' },
+  note: { color: '#6a6a80', fontSize: 12, marginTop: 12, textAlign: 'center' },
+})

package/src/verification/screens/DriverSmokeScreen.tsx

@@ -0,0 +1,99 @@
+// M2.1 device smoke (specs/M2.1-BUILD-PACKET.md, Milestone 3): the REAL worklet driver runs a core
+// spring on the UI runtime and STOPS at settle. Phased for screenshot proof without UI automation:
+// a fixed hold before the spring starts (so a "before" frame is capturable), an underdamped spring
+// (visible overshoot mid-flight), then the settled hold — with the phase and the driver's live
+// activity rendered on screen. When the phase reads "settled" the frame loop has already stopped
+// requeuing (the onAllSettled edge fires only after the loop halts): the screenshot itself is the
+// settle-cancel evidence the M2.0 smoke could never produce (its JS rAF loop ran forever).
+
+import { useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import type { ElementHandle } from '@unrulysystems/native-motion-core'
+import { useWorkletDriver } from '../../native/driver/workletDriver'
+
+const TRAVEL = 220
+// Hold before the spring starts, so launch→screenshot latency lands a deterministic "before" frame.
+const START_DELAY_MS = 1500
+// Motion's default underdamped feel — overshoots past the target, unmistakable in a mid-flight frame.
+const SPRING = { type: 'spring', stiffness: 100, damping: 10 } as const
+
+type Phase = 'waiting' | 'animating' | 'settled'
+
+export function DriverSmokeScreen() {
+  const [phase, setPhase] = useState<Phase>('waiting')
+  // The LIVE driver comes from the hook — it owns the single useFrameCallback (REQ-DRIVER-011).
+  const binding = useWorkletDriver({ onAllSettled: () => setPhase('settled') })
+  const handleRef = useRef<ElementHandle | null>(null)
+  if (handleRef.current === null) {
+    handleRef.current = binding.driver.register({ translateX: 0 })
+  }
+  const handle = handleRef.current
+  const shared = binding.sharedFor(handle, 'translateX')
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setPhase('animating')
+      binding.driver.command(handle, {
+        kind: 'start',
+        targets: { translateX: { from: 0, to: TRAVEL } },
+        transition: SPRING,
+      })
+    }, START_DELAY_MS)
+    return () => clearTimeout(timer)
+  }, [binding, handle])
+
+  const boxStyle = useAnimatedStyle(() => ({ transform: [{ translateX: shared.value }] }))
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Native Motion</Text>
+      <Text style={styles.subtitle}>M2.1: the worklet driver springs on the UI thread</Text>
+      <View style={styles.track}>
+        <Animated.View style={[styles.box, boxStyle]} />
+      </View>
+      <Text style={styles.phase}>
+        phase: {phase}
+        {phase === 'settled' ? ' — frame loop stopped' : ''}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0b0b12',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  title: {
+    color: '#fff',
+    fontSize: 28,
+    fontWeight: '700',
+  },
+  subtitle: {
+    color: '#8a8aa0',
+    fontSize: 14,
+    marginTop: 6,
+    marginBottom: 40,
+  },
+  track: {
+    width: TRAVEL + 64,
+    height: 72,
+    justifyContent: 'center',
+  },
+  box: {
+    width: 64,
+    height: 64,
+    borderRadius: 16,
+    backgroundColor: '#6c8cff',
+  },
+  phase: {
+    color: '#c9c9d8',
+    fontSize: 14,
+    marginTop: 32,
+    fontFamily: 'Menlo',
+  },
+})

package/src/verification/screens/DurationOnlyTweenChecksScreen.tsx

@@ -0,0 +1,294 @@
+// REQ-TIMING-006 device checks (U7a finding A / motion.duration-without-type-generator): an
+// authored SCALAR `{ duration }` with NO `type` takes the pin's keyframes generator — monotone,
+// easeOut by default, never the old omitted-type duration-spring (the 2026-08-18 U7a finals read
+// peak 1.046 on a 0→1 fade). iOS has no tap injection, so the screen self-drives.
+// Discriminators (Decision 94 analog of 77/82/86/90): native is the committed-sample channel
+// (onUpdate x), not host paint. The mid-flight bands key on the sample nearest the flight's
+// own t0+500ms — self-calibrating against mount→commitRect host latency (the U8 2295fbab
+// wall-clock lesson), never a fixed setTimeout sample.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_UNTYPED = 'untyped { duration }: monotone to the target, never overshoots'
+const ROW_EASEOUT = 'untyped { duration }: the mid-flight value is the easeOut curve'
+const ROW_LINEAR = 'authored ease spelling suppresses the easeOut default'
+const ROW_TYPED_SPRING = 'typed { type: "spring", duration } control still overshoots'
+const ROW_CLEAN = 'clean run: zero unexpected reports'
+const ROWS = [ROW_UNTYPED, ROW_EASEOUT, ROW_LINEAR, ROW_TYPED_SPRING, ROW_CLEAN] as const
+
+const T_A_END = 1400
+const T_B_END = 2700
+const T_C_END = 4000
+const T_CLEAN = 4100
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Sample {
+  readonly value: number
+  readonly at: number
+}
+
+// The sample whose timestamp is nearest the flight's own t0 + offsetMs, where t0 is the FIRST
+// INTERIOR sample (value > 0.05) — never the mount/command-edge sample: on device the first
+// onUpdate can carry the pre-flight value 0 one crossing before the tween clock starts (the
+// 2026-08-21 first run read 57.1 ≈ easeOut(0.4) on the untyped leg and 0.0 on the linear leg,
+// both traced to a mount-edge t0 ~100ms early). The flight clock is the device clock, so this
+// lands at the requested progress regardless of frame cadence.
+function nearestAfterT0(samples: readonly Sample[], offsetMs: number): Sample | null {
+  const first = samples.find((s) => s.value > 0.05)
+  if (first === undefined) return null
+  const target = first.at + offsetMs
+  let best: Sample | null = null
+  for (const sample of samples) {
+    if (best === null || Math.abs(sample.at - target) < Math.abs(best.at - target)) best = sample
+  }
+  return best
+}
+
+export function DurationOnlyTweenChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [targetA, setTargetA] = useState<'a' | 'b'>('a')
+  const [targetB, setTargetB] = useState<'a' | 'b'>('a')
+  const [targetC, setTargetC] = useState<'a' | 'b'>('a')
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const samplesA = useRef<Sample[]>([])
+  const samplesB = useRef<Sample[]>([])
+  const peakC = useRef(0)
+  const reportsRef = useRef<string[]>([])
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|transition|spring|tween/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const onA = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    if (typeof latest.x === 'number') samplesA.current.push({ value: latest.x, at: Date.now() })
+  }, [])
+  const onB = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    if (typeof latest.x === 'number') samplesB.current.push({ value: latest.x, at: Date.now() })
+  }, [])
+  const onC = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    if (typeof latest.x === 'number' && latest.x > peakC.current) peakC.current = latest.x
+  }, [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(80, () => {
+      setTargetA('b')
+      setStage('untyped { duration } flight started')
+    })
+    at(T_A_END, () => {
+      const samples = samplesA.current
+      const interior = samples.filter((s) => s.value > 0.05 && s.value < 99.95)
+      const peak = samples.reduce((max, s) => Math.max(max, s.value), 0)
+      let monotone = true
+      for (let index = 1; index < samples.length; index += 1) {
+        if (samples[index]!.value < samples[index - 1]!.value - 1e-6) monotone = false
+      }
+      const first = samples[0]
+      const last = samples[samples.length - 1]
+      const span = first !== undefined && last !== undefined ? last.at - first.at : 0
+      const reached = last !== undefined && last.value > 99.5
+      const untypedPass =
+        samples.length > 10 && peak <= 100.05 && monotone && reached && span >= 600 && span <= 1800
+      finalize(
+        ROW_UNTYPED,
+        untypedPass,
+        `peak ${peak.toFixed(3)} (the pre-fix spring read ≈104.6), monotone=${String(monotone)}, ` +
+          `${interior.length} interior samples, span ${span}ms, end ${last?.value.toFixed(2) ?? 'n/a'}`,
+      )
+      // easeOut(0.5) ≈ 0.688 — discriminates against linear (0.5) and the old duration-spring
+      // (≈0.9 at half its duration). The band is the sample nearest the flight's own t0+500ms.
+      const mid = nearestAfterT0(samples, 500)
+      const midPass = mid !== null && mid.value >= 58 && mid.value <= 80
+      finalize(
+        ROW_EASEOUT,
+        midPass,
+        mid === null
+          ? 'no samples'
+          : `t0+500ms sample reads ${mid.value.toFixed(1)} — easeOut ≈68.8, linear 50, spring ≈90`,
+      )
+      setTargetB('b')
+      setStage(untypedPass && midPass ? 'A pass; linear leg started' : 'A FAIL; linear leg started')
+    })
+    at(T_B_END, () => {
+      const mid = nearestAfterT0(samplesB.current, 500)
+      const pass = mid !== null && mid.value >= 40 && mid.value <= 60
+      finalize(
+        ROW_LINEAR,
+        pass,
+        mid === null
+          ? 'no samples'
+          : `t0+500ms sample reads ${mid.value.toFixed(1)} — linear 50 (no easeOut injection)`,
+      )
+      setTargetC('b')
+      setStage(pass ? 'linear pass; typed-spring control started' : 'linear FAIL; control started')
+    })
+    at(T_C_END, () => {
+      const pass = peakC.current > 100.5
+      finalize(
+        ROW_TYPED_SPRING,
+        pass,
+        `peak ${peakC.current.toFixed(2)} — the typed duration-spring keeps its overshoot`,
+      )
+      setStage(pass ? 'control pass' : 'control FAIL')
+    })
+    at(T_CLEAN, () => {
+      const pass = reportsRef.current.length === 0
+      finalize(
+        ROW_CLEAN,
+        pass,
+        pass
+          ? '0 unexpected reports'
+          : `${reportsRef.current.length} unexpected: ${reportsRef.current
+              .map((message) => message.slice(0, 80))
+              .join(' | ')}`,
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      restoreTapRef.current?.()
+      restoreTapRef.current = null
+    }
+  }, [])
+
+  const done = ROWS.every((id) => rows[id] !== undefined)
+  const failing = ROWS.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 (
+    <MotionRoot>
+      <View style={styles.scroll}>
+        <View style={styles.container}>
+          <Text style={styles.title}>duration-without-type checks</Text>
+          <Text style={styles.subtitle}>
+            untyped {'{ duration }'} scalar → keyframes tween ({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 ${ROWS.length} rows`
+              : `${Object.keys(rows).length}/${ROWS.length} rows complete — RUNNING`}
+          </Text>
+          <Text style={styles.tallyDetail}>
+            {done
+              ? failing.length === 0
+                ? 'no failing rows'
+                : `FAILING: ${failing.join('  |  ')}`
+              : `stage: ${stage}`}
+          </Text>
+
+          <MotionView
+            animate={targetA === 'a' ? { x: 0 } : { x: 100 }}
+            transition={{ duration: 1 }}
+            onUpdate={onA}
+            style={styles.box}
+            accessibilityLabel="durationonly-untyped-box"
+          />
+          <MotionView
+            animate={targetB === 'a' ? { x: 0 } : { x: 100 }}
+            transition={{ duration: 1, ease: 'linear' }}
+            onUpdate={onB}
+            style={[styles.box, styles.boxLinear]}
+            accessibilityLabel="durationonly-linear-box"
+          />
+          <MotionView
+            animate={targetC === 'a' ? { x: 0 } : { x: 100 }}
+            transition={{ type: 'spring', duration: 1 }}
+            onUpdate={onC}
+            style={[styles.box, styles.boxSpring]}
+            accessibilityLabel="durationonly-typedspring-box"
+          />
+
+          {ROWS.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={3}>
+                    {row === undefined ? 'pending' : row.detail}
+                  </Text>
+                </View>
+              </View>
+            )
+          })}
+        </View>
+      </View>
+    </MotionRoot>
+  )
+}
+
+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' },
+  box: {
+    width: 40,
+    height: 40,
+    marginTop: 12,
+    backgroundColor: '#ef4444',
+    borderRadius: 8,
+  },
+  boxLinear: { backgroundColor: '#38bdf8' },
+  boxSpring: { backgroundColor: '#f97316' },
+  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 },
+})