@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/probe/layoutIdentityProbeEngine.ts

@@ -0,0 +1,429 @@
+// RN-free engine for the layout-identity worklet probe: the plain-object probe graph, the fixed
+// two-holder registry trajectory, and the live-leg state machine. Extracted from
+// LayoutIdentityWorkletProbe.tsx so the reporting semantics are unit-testable off-device (vitest
+// runs this on the JS thread, where the 'worklet' directives are inert); the screen keeps the
+// React/Reanimated wiring. Function-level directives on app source are workletized per-function by
+// the worklets babel plugin and importable into worklets cross-module — the same pattern as
+// motion/colorProjection.ts (device-proven by the L1/L4 rungs).
+
+import {
+  createLayoutIdentityRegistry,
+  type ActivityHandle,
+  type Animation,
+  type Generator,
+  type GeneratorFactory,
+  type LayoutIdentityRegistry,
+  type MotionGraph,
+  type MotionValue,
+  type MotionValueEvent,
+  type ValueChangeListener,
+  type WindowSpaceRect,
+  MAX_VELOCITY_DELTA_MS,
+} from '@unrulysystems/native-motion-core/worklet-layout'
+
+const ID = 'probe-card'
+const FROM_TOKEN = 'from-holder'
+const TO_TOKEN = 'to-holder'
+export const STEPS_PER_LEG = 600
+export const LIVE_MAX_FRAMES = STEPS_PER_LEG * 2
+export const DT_MS = 16.67
+const SPRING = { stiffness: 550, damping: 45 } as const
+const FROM_RECT = { x: 24, y: 420, width: 112, height: 72 } as WindowSpaceRect
+const TO_RECT = { x: 176, y: 96, width: 168, height: 132 } as WindowSpaceRect
+
+interface ProbeAnimation extends Animation {
+  done: boolean
+  /**
+   * Reentrancy latch for the interruption window (r21): this graph's count SCANS `done`, so
+   * the exactly-once guard cannot flip it before the cancel notification — the listener must
+   * still observe a live count. Core's markFinished maps to this latch here.
+   */
+  __latched?: boolean
+  /**
+   * Ledger/ownership teardown with or without the end-of-animation velocity cleanup (r19):
+   * interruption carries velocity into the successor seed, so it finishes WITHOUT cleanup;
+   * a direct stop() cleans up (r17).
+   */
+  __finish(runEndCleanup: boolean): void
+}
+
+interface ProbeMotionValue extends MotionValue<number> {
+  __active: ProbeAnimation | null
+  __applyAnimationSample(value: number, velocity: number): void
+  __endAnimation(): void
+  /** Fire a lifecycle event on this value (r15 e18b6f40a2d7 — the union is EMITTED, not just accepted). */
+  __emit(event: 'animationStart' | 'animationComplete' | 'animationCancel' | 'destroy'): void
+}
+
+interface ProbeActiveAnimation {
+  readonly value: ProbeMotionValue
+  readonly generator: Generator
+  readonly handle: ProbeAnimation
+  elapsedMs: number
+}
+
+interface ProbeGraph extends MotionGraph {
+  frame(dtMs: number): void
+}
+
+function createProbeMotionValue(initial: number, now: () => number): ProbeMotionValue {
+  'worklet'
+  let value = initial
+  // Core MotionValueImpl's EXACT sample-window model (r20 26d0a09db7f4 — a manual-write
+  // timestamp alone missed same-frame compounding, identical-write suppression, and the
+  // clock velocity of listener writes): the animated velocity takes precedence while a
+  // flight drives the value; manual writes roll the frame window only when time moved.
+  let animatedVelocity: number | null = null
+  let prev: number | null = null
+  let prevUpdatedAtMs: number | null = null
+  let updatedAtMs = now()
+  const listeners: Array<ValueChangeListener<number>> = []
+  // 'change' listeners take the latest value (the pinned payload); lifecycle listeners take
+  // none — one storage shape, lifecycle emission casts to the payload-free call.
+  const eventListeners: Record<MotionValueEvent, Array<(latest: number) => void>> = {
+    change: [],
+    animationStart: [],
+    animationComplete: [],
+    animationCancel: [],
+    destroy: [],
+  }
+  const mv: ProbeMotionValue = {
+    __active: null,
+    __applyAnimationSample(next, nextVelocity) {
+      value = next
+      animatedVelocity = nextVelocity
+      for (const listener of listeners) listener(value)
+      for (const listener of eventListeners.change) listener(value)
+    },
+    __endAnimation() {
+      // Core MotionValueImpl.endAnimation() verbatim (r20): clears the animated velocity AND
+      // resets the clock window — the registry's EPSILON_VEL settle floor clears, and no
+      // stale manual sample can synthesize a velocity against the flight's final value.
+      animatedVelocity = null
+      prev = null
+      prevUpdatedAtMs = null
+      updatedAtMs = now()
+    },
+    get: () => value,
+    set(next) {
+      // Core set() verbatim (r20): window rolls only when time moved; identical writes
+      // do not notify.
+      animatedVelocity = null
+      const nowMs = now()
+      if (nowMs !== updatedAtMs) {
+        prev = value
+        prevUpdatedAtMs = updatedAtMs
+        updatedAtMs = nowMs
+      }
+      const previous = value
+      value = next
+      if (value !== previous) {
+        for (const listener of listeners) listener(value)
+        for (const listener of eventListeners.change) listener(value)
+      }
+    },
+    jump(next) {
+      // Core jump() VERBATIM (r16/r17/r20): set (window semantics + identical-write
+      // suppression + clock velocity for the change listener) -> window reset -> stop whose
+      // cancellation reads 0 with the animation still observable.
+      mv.set(next)
+      prev = null
+      prevUpdatedAtMs = null
+      updatedAtMs = now()
+      mv.stop()
+    },
+    subscribe(listener) {
+      listeners.push(listener)
+      return () => {
+        const at = listeners.indexOf(listener)
+        if (at >= 0) listeners.splice(at, 1)
+      }
+    },
+    getVelocity: () => {
+      // Core getVelocity() verbatim: the animated velocity wins while a flight drives the
+      // value; otherwise the clock formula over the manual-write window, stale -> 0.
+      if (animatedVelocity !== null) return animatedVelocity
+      if (prev === null || prevUpdatedAtMs === null) return 0
+      if (now() - updatedAtMs > MAX_VELOCITY_DELTA_MS) return 0
+      const dtMs = Math.min(updatedAtMs - prevUpdatedAtMs, MAX_VELOCITY_DELTA_MS)
+      if (dtMs <= 0) return 0
+      return ((value - prev) * 1000) / dtMs
+    },
+    on(event, listener) {
+      eventListeners[event].push(listener)
+      return () => {
+        const at = eventListeners[event].indexOf(listener)
+        if (at >= 0) eventListeners[event].splice(at, 1)
+      }
+    },
+    // Liveness IS the __active handle (set at animate, nulled at stop and natural completion).
+    isAnimating: () => mv.__active !== null,
+    // Lifecycle emission (r15 e18b6f40a2d7): mirrors uiLayoutGraph / core parity.
+    __emit(event) {
+      for (const listener of eventListeners[event]) (listener as () => void)()
+    },
+    stop() {
+      if (mv.__active !== null) {
+        // Pinned ORDER (r17): the cancellation is notified while the animation is still
+        // observable; the handle's ledger/liveness/velocity cleanup runs after.
+        mv.__emit('animationCancel')
+        mv.__active.stop()
+        mv.__active = null
+      }
+    },
+    destroy() {
+      // Pinned teardown ORDER (r16 major 1): destroy announces FIRST (the listener observes
+      // the live animation), then the SILENT stop — never an animationCancel from teardown.
+      mv.__emit('destroy')
+      if (mv.__active !== null) {
+        mv.__active.stop()
+        mv.__active = null
+      }
+      listeners.length = 0
+      eventListeners.change.length = 0
+      eventListeners.animationStart.length = 0
+      eventListeners.animationComplete.length = 0
+      eventListeners.animationCancel.length = 0
+      eventListeners.destroy.length = 0
+    },
+  }
+  return mv
+}
+
+function createProbeGraph(): ProbeGraph {
+  'worklet'
+  const animations: ProbeActiveAnimation[] = []
+  let openActivities = 0
+  // The graph's frame clock (r19): raw frame time, mirroring uiLayoutGraph.
+  let nowMs = 0
+
+  function activeAnimationCount(): number {
+    'worklet'
+    let count = 0
+    for (const animation of animations) if (!animation.handle.done) count += 1
+    return count
+  }
+
+  const graph: ProbeGraph = {
+    motionValue<T = number>(initial: T): MotionValue<T> {
+      return createProbeMotionValue(initial as number, () => nowMs) as unknown as MotionValue<T>
+    },
+    derived() {
+      throw new Error(
+        'LayoutIdentityWorkletProbe: derived values are not used by the layout session crossing.',
+      )
+    },
+    animate(value: MotionValue<number>, factory: GeneratorFactory): Animation {
+      const motionValue = value as ProbeMotionValue
+      // Interruption ORDER (r19/r20, core-graph parity): the outgoing handle LATCHES first
+      // (core's markFinished-before-notify — a reentrant listener stop() hits the
+      // exactly-once latch, never a null dereference), the cancellation is notified while
+      // liveness is still observable (a valid listener may write the value), ownership
+      // clears, and only THEN does the successor seed read the CURRENT state
+      // (REQ-CORE-002/REQ-LAYOUT-018 continuity — including the listener write's clock
+      // velocity, which core's set() law now computes here too).
+      const outgoing = motionValue.__active
+      if (outgoing !== null && !outgoing.done) {
+        // Core's markFinished shape (r21): the reentrancy LATCH flips before the
+        // notification while the scan-visible `done` stays false — the listener observes a
+        // live count/liveness. done + ownership clear AFTER, in a finally (r22): a throwing
+        // listener must never leave a latched-but-never-done handle wedging the scan count.
+        outgoing.__latched = true
+        try {
+          motionValue.__emit('animationCancel')
+        } finally {
+          outgoing.done = true
+          if (motionValue.__active === outgoing) motionValue.__active = null
+        }
+      }
+      const generator = factory({ from: motionValue.get(), velocity: motionValue.getVelocity() })
+      const handle: ProbeAnimation = {
+        done: false,
+        __finish(runEndCleanup) {
+          if (handle.done || handle.__latched === true) return
+          handle.done = true
+          if (motionValue.__active === handle) {
+            motionValue.__active = null
+            if (runEndCleanup) motionValue.__endAnimation()
+          }
+        },
+        stop() {
+          handle.__finish(true)
+        },
+      }
+      motionValue.__active = handle
+      animations.push({ value: motionValue, generator, handle, elapsedMs: 0 })
+      // Core parity (graph.animate): the start event fires after the stopper is installed.
+      motionValue.__emit('animationStart')
+      return handle
+    },
+    activeAnimationCount,
+    registerActivity(): ActivityHandle {
+      openActivities += 1
+      let released = false
+      return {
+        release() {
+          if (released) return
+          released = true
+          openActivities -= 1
+        },
+      }
+    },
+    isSettled: () => activeAnimationCount() === 0 && openActivities === 0,
+    whenSettled() {
+      throw new Error(
+        'LayoutIdentityWorkletProbe: whenSettled is not used by the synchronous probe graph.',
+      )
+    },
+    frame(dtMs) {
+      nowMs += dtMs
+      const completed: ProbeActiveAnimation[] = []
+      for (const animation of animations) {
+        if (animation.handle.done) continue
+        animation.elapsedMs += dtMs
+        const sample = animation.generator.sample(animation.elapsedMs)
+        animation.value.__applyAnimationSample(sample.value, sample.velocity)
+        if (sample.done) completed.push(animation)
+      }
+      for (const animation of completed) {
+        animation.handle.done = true
+        if (animation.value.__active === animation.handle) {
+          animation.value.__active = null
+          animation.value.__endAnimation()
+          animation.value.__emit('animationComplete')
+        }
+      }
+    },
+  }
+  return graph
+}
+
+function readTrajectorySample(registry: LayoutIdentityRegistry): readonly number[] {
+  'worklet'
+  const from = registry.read(ID, FROM_TOKEN)
+  const to = registry.read(ID, TO_TOKEN)
+  return [
+    from.transform.translateX,
+    from.transform.translateY,
+    from.transform.scaleX,
+    from.transform.scaleY,
+    from.opacity,
+    to.transform.translateX,
+    to.transform.translateY,
+    to.transform.scaleX,
+    to.transform.scaleY,
+    to.opacity,
+    registry.zLifted(ID, FROM_TOKEN) ? 1 : 0,
+    registry.zLifted(ID, TO_TOKEN) ? 1 : 0,
+  ]
+}
+
+function beginProbeRegistry(): {
+  readonly graph: ProbeGraph
+  readonly registry: LayoutIdentityRegistry
+} {
+  'worklet'
+  const graph = createProbeGraph()
+  const registry = createLayoutIdentityRegistry({ graph, spring: SPRING })
+  registry.enter(ID, FROM_TOKEN, FROM_RECT)
+  registry.enter(ID, TO_TOKEN, TO_RECT)
+  return { graph, registry }
+}
+
+export function runLayoutIdentityTrajectory(): {
+  readonly values: readonly number[]
+  readonly enterSettled: boolean
+  readonly exitReleased: boolean
+  readonly activeAnimations: number
+} {
+  'worklet'
+  const { graph, registry } = beginProbeRegistry()
+  const values: number[] = []
+  for (let i = 0; i < STEPS_PER_LEG; i++) {
+    graph.frame(DT_MS)
+    values.push(...readTrajectorySample(registry))
+  }
+  const enterSettled = registry.isSettled(ID)
+  registry.leave(ID, TO_TOKEN)
+  const releasedBeforeExitSettles = registry.releasable(ID, TO_TOKEN)
+  for (let i = 0; i < STEPS_PER_LEG; i++) {
+    graph.frame(DT_MS)
+    values.push(...readTrajectorySample(registry))
+  }
+  return {
+    values,
+    enterSettled,
+    exitReleased: !releasedBeforeExitSettles && registry.releasable(ID, TO_TOKEN),
+    activeAnimations: graph.activeAnimationCount(),
+  }
+}
+
+interface LiveProbeState {
+  readonly graph: ProbeGraph
+  readonly registry: LayoutIdentityRegistry
+  frames: number
+  done: boolean
+}
+
+interface LiveProbeGlobal {
+  __nativeMotionLayoutIdentityProbe?: LiveProbeState
+}
+
+export function resetLiveProbe(): void {
+  'worklet'
+  const { graph, registry } = beginProbeRegistry()
+  ;(globalThis as LiveProbeGlobal).__nativeMotionLayoutIdentityProbe = {
+    graph,
+    registry,
+    frames: 0,
+    done: false,
+  }
+}
+
+export interface LiveProbeStepResult {
+  // True exactly when this frame carries the run's verdict; the caller schedules the RN-side
+  // report only on report=true frames.
+  readonly report: boolean
+  readonly pass: boolean
+  readonly detail: string
+}
+
+export function stepLiveProbe(dtMs: number): LiveProbeStepResult {
+  'worklet'
+  const state = (globalThis as LiveProbeGlobal).__nativeMotionLayoutIdentityProbe
+  if (state === undefined) {
+    return { report: true, pass: false, detail: 'live probe was not initialized on the UI runtime' }
+  }
+  if (state.done) {
+    // The verdict frame already reported; the callback stays active until the RN thread
+    // deactivates it, so frames keep arriving. Never re-report here — a pass:true "already
+    // settled" from this branch used to overwrite a real timeout verdict on the RN side
+    // (review-found fail-open, 2026-07-09).
+    return {
+      report: false,
+      pass: false,
+      detail: `verdict already reported after ${state.frames} frames`,
+    }
+  }
+  state.graph.frame(dtMs)
+  state.frames += 1
+  if (state.registry.isSettled(ID)) {
+    state.done = true
+    return {
+      report: true,
+      pass: true,
+      detail: `useFrameCallback reached layout-identity settle after ${state.frames} UI frames`,
+    }
+  }
+  if (state.frames >= LIVE_MAX_FRAMES) {
+    state.done = true
+    return {
+      report: true,
+      pass: false,
+      detail: `useFrameCallback did not settle within ${LIVE_MAX_FRAMES} UI frames`,
+    }
+  }
+  // pass is meaningful only on report=true frames; keep it false everywhere else so a caller
+  // that mistakenly reads it anyway fails closed.
+  return { report: false, pass: false, detail: `stepping frame ${state.frames}` }
+}

package/src/verification/screens/ArcPathChecksScreen.tsx

@@ -0,0 +1,273 @@
+// U8 arc() device checks: catalog transition-arc-playground + spring playground on the
+// public MotionView path. iOS has no tap injection, so the screen self-drives.
+// Discriminators (Decision 94 analog of 77/82/86/90): native is the parametric channel
+// (committed x/y/pathRotation via onUpdate), not host paint. Tween y uses peak-over-flight
+// like the web e2e data-peaky — a wall-clock mid sample races the 800ms linear tween.
+// Host paint is the web e2e. layout.path is not this unit.
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { arc } from '@unrulysystems/native-motion-core'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_TWEEN = 'tween arc: y deflects mid-chord then settles'
+const ROW_SPRING = 'spring arc: bounce overshoots the 400px target'
+const ROW_ROTATE = 'rotate: pathRotation is non-zero mid-flight'
+const ROW_CLEAN = 'clean run: zero unexpected reports'
+const ROWS = [ROW_TWEEN, ROW_SPRING, ROW_ROTATE, ROW_CLEAN] as const
+
+const T_TWEEN_END = 1100
+const T_SPRING_END = 2200
+const T_ROTATE_MID = 2450
+const T_CLEAN = 3200
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Sample {
+  x: number
+  y: number
+  pathRotation: number
+}
+
+export function ArcPathChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const tweenPath = useMemo(() => arc({ strength: 1, peak: 0.5 }), [])
+  const springPath = useMemo(() => arc({ strength: 1, peak: 0.5 }), [])
+  const rotatePath = useMemo(() => arc({ strength: 1, peak: 0.5, rotate: true }), [])
+  const [tweenTarget, setTweenTarget] = useState<'a' | 'b'>('a')
+  const [springTarget, setSpringTarget] = useState<'a' | 'b'>('a')
+  const [rotateTarget, setRotateTarget] = useState<'a' | 'b'>('a')
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const tweenRef = useRef<Sample>({ x: 0, y: 0, pathRotation: 0 })
+  const springRef = useRef<Sample>({ x: 0, y: 0, pathRotation: 0 })
+  const rotateRef = useRef<Sample>({ x: 0, y: 0, pathRotation: 0 })
+  const tweenPeakY = useRef(0)
+  const springMaxX = useRef(0)
+  const rotatePeak = useRef(0)
+  const reportsRef = useRef<string[]>([])
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|arc|path|InvalidTransition/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const onTween = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    const x = typeof latest.x === 'number' ? latest.x : tweenRef.current.x
+    const y = typeof latest.y === 'number' ? latest.y : tweenRef.current.y
+    tweenRef.current = { x, y, pathRotation: 0 }
+    if (Math.abs(y) > Math.abs(tweenPeakY.current)) tweenPeakY.current = y
+  }, [])
+  const onSpring = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    const x = typeof latest.x === 'number' ? latest.x : springRef.current.x
+    springRef.current = { ...springRef.current, x }
+    if (x > springMaxX.current) springMaxX.current = x
+  }, [])
+  const onRotate = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    const rot = typeof latest.pathRotation === 'number' ? latest.pathRotation : 0
+    rotateRef.current = { ...rotateRef.current, pathRotation: rot }
+    if (Math.abs(rot) > Math.abs(rotatePeak.current)) rotatePeak.current = rot
+  }, [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(80, () => {
+      setTweenTarget('b')
+      setStage('tween started')
+    })
+    at(T_TWEEN_END, () => {
+      // Peak y, not a wall-clock mid sample: Android at f1f6c601 captured t≈1.04
+      // (x=417.6 y=-36.8) when the 500ms timer fired after the 800ms linear tween
+      // had already passed the chord. Same discriminator as the web e2e data-peaky.
+      const end = tweenRef.current
+      const peakY = tweenPeakY.current
+      const peakPass = Math.abs(peakY) > 80
+      const endPass = end.x > 380 && Math.abs(end.y) < 25
+      const pass = peakPass && endPass
+      finalize(
+        ROW_TWEEN,
+        pass,
+        `peak y=${peakY.toFixed(0)}; end x=${end.x.toFixed(0)} y=${end.y.toFixed(0)}`,
+      )
+      setSpringTarget('b')
+      setStage(pass ? 'tween pass; spring started' : 'tween FAIL; spring started')
+    })
+    at(T_SPRING_END, () => {
+      const pass = springMaxX.current > 410
+      finalize(
+        ROW_SPRING,
+        pass,
+        pass
+          ? `maxX=${springMaxX.current.toFixed(0)}`
+          : `maxX=${springMaxX.current.toFixed(0)} — expected >410 overshoot`,
+      )
+      setRotateTarget('b')
+      setStage(pass ? 'spring pass; rotate started' : 'spring FAIL; rotate started')
+    })
+    at(T_ROTATE_MID, () => {
+      const pass = Math.abs(rotatePeak.current) > 5
+      finalize(
+        ROW_ROTATE,
+        pass,
+        pass
+          ? `peak pathRotation=${rotatePeak.current.toFixed(1)}`
+          : `peak pathRotation=${rotatePeak.current.toFixed(1)} — expected non-zero`,
+      )
+      setStage(pass ? 'rotate pass' : 'rotate 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}>U8 arc path checks</Text>
+          <Text style={styles.subtitle}>
+            catalog tween + spring playgrounds ({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={tweenTarget === 'a' ? { x: 0, y: 0 } : { x: 400, y: 0 }}
+            transition={{ duration: 0.8, ease: 'linear', path: tweenPath }}
+            onUpdate={onTween}
+            style={styles.box}
+            accessibilityLabel="u8-arc-tween-box"
+          />
+          <MotionView
+            animate={springTarget === 'a' ? { x: 0, y: 0 } : { x: 400, y: 0 }}
+            transition={{ type: 'spring', bounce: 0.6, visualDuration: 0.45, path: springPath }}
+            onUpdate={onSpring}
+            style={[styles.box, styles.boxSpring]}
+            accessibilityLabel="u8-arc-spring-box"
+          />
+          <MotionView
+            animate={rotateTarget === 'a' ? { x: 0, y: 0 } : { x: 400, y: 0 }}
+            transition={{ duration: 0.8, ease: 'linear', path: rotatePath }}
+            onUpdate={onRotate}
+            style={[styles.box, styles.boxRotate]}
+            accessibilityLabel="u8-arc-rotate-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,
+  },
+  boxSpring: { backgroundColor: '#f97316' },
+  boxRotate: { backgroundColor: '#eab308' },
+  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 },
+})