@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/MotionViewChecksScreen.tsx

@@ -0,0 +1,930 @@
+// M2.2 Motion.View behavioral checks (specs/M2.2-BUILD-PACKET.md §pinned semantics). Every check
+// drives the controller + the manual-stepping driver (synchronous crossings — deterministic, no
+// React timing) and renders PASS/FAIL on screen: the screenshot is the assertion (M2.1 pattern).
+// try/catch here is evidence capture — a failed check renders its exact error, never disappears.
+
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import {
+  EPS_COLOR_CHANNEL,
+  InvalidTargetError,
+  parseColor,
+  transformColor,
+  type Driver,
+  type DriverCommand,
+  type ElementHandle,
+  type Target,
+} from '@unrulysystems/native-motion-core'
+import { createWorkletDriver, type WorkletDriverBinding } from '../../native/driver/workletDriver'
+import { projectColor } from '../../native/motion/colorProjection'
+import { prepareMotionViewMount, prepareMotionViewUpdate } from '../../native/motion/MotionView'
+import { createMotionViewController } from '../../native/motion/motionViewController'
+
+const SPRING = { type: 'spring', stiffness: 100, damping: 10 } as const
+const DT_MS = 16.67
+
+interface Row {
+  readonly id: string
+  readonly pass: boolean
+  readonly detail: string
+}
+
+// Every manual driver created during a check run, disposed together after the rows are computed —
+// the rows rebuild per render, and an undisposed driver strands its UI-runtime record per run
+// (quiesce-before-unmount, review round 4 major 5).
+const liveCheckDrivers: WorkletDriverBinding[] = []
+
+function checkDriver(): WorkletDriverBinding {
+  const binding = createWorkletDriver({ manualStepping: true })
+  liveCheckDrivers.push(binding)
+  return binding
+}
+
+function disposeCheckDrivers(): void {
+  for (const binding of liveCheckDrivers) binding.dispose()
+  liveCheckDrivers.length = 0
+}
+
+// Wrap a binding so checks can count commands and observe setActive calls without touching the
+// driver itself (verification-side instrumentation, not product code).
+interface InstrumentedBinding {
+  readonly binding: WorkletDriverBinding
+  commandCount(): number
+  lastSetActive(): { handle: number; active: boolean } | null
+}
+
+function instrument(inner: WorkletDriverBinding): InstrumentedBinding {
+  let commands = 0
+  let lastSetActive: { handle: number; active: boolean } | null = null
+  const driver: Driver = {
+    register: (initial) => inner.driver.register(initial),
+    command: (handle: ElementHandle, command: DriverCommand) => {
+      commands += 1
+      inner.driver.command(handle, command)
+    },
+    step: (elapsedMs) => inner.driver.step(elapsedMs),
+    committed: (handle) => inner.driver.committed(handle),
+    setActive: (handle, active) => {
+      lastSetActive = { handle: handle as number, active }
+      inner.driver.setActive(handle, active)
+    },
+    isActive: (handle) => inner.driver.isActive(handle),
+    // FLAG 5a gesture lane: pass-through forwarding (no check instruments these yet). Forward the
+    // gesture-phase velocity so the C1 seam holds through the wrapper (r4 c14e15).
+    write: (handle, values, velocities) => inner.driver.write(handle, values, velocities),
+    liveFor: (handle, key) => inner.driver.liveFor(handle, key),
+  }
+  return {
+    binding: {
+      driver,
+      sharedFor: (handle, key) => inner.sharedFor(handle, key),
+      writeBoundValue: (handle, values) => inner.writeBoundValue(handle, values),
+      onBoundValueWriteRefusal: (listener) => inner.onBoundValueWriteRefusal(listener),
+      setFrameValuesListener: (handle, listener) => inner.setFrameValuesListener(handle, listener),
+      layout: inner.layout,
+      dispose: () => inner.dispose(),
+      isDisposed: () => inner.isDisposed(),
+    },
+    commandCount: () => commands,
+    lastSetActive: () => lastSetActive,
+  }
+}
+
+function checkMountAnimates(): Row {
+  const id = 'mount animates initial→animate'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { x: 220 },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    const start = binding.driver.committed(handle)['x']
+    for (let i = 0; i < 30; i++) binding.driver.step(DT_MS)
+    const mid = binding.driver.committed(handle)['x']
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)['x']
+    const quiesced = !binding.driver.isActive(handle)
+    if (start !== 0) return { id, pass: false, detail: `start ${String(start)}, want host base 0` }
+    if (!(typeof mid === 'number' && mid > 0)) {
+      return { id, pass: false, detail: `no motion by step 30 (mid=${String(mid)})` }
+    }
+    if (end !== 220 || !quiesced) {
+      return {
+        id,
+        pass: false,
+        detail: `end=${String(end)} quiesced=${String(quiesced)}, want 220/true`,
+      }
+    }
+    return { id, pass: true, detail: `0 → ${mid.toFixed(1)} (step 30) → 220 settled, quiesced` }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// H2 (REQ-API-049 / REQ-TIMING-003) — a FRACTIONAL repeat executes on the UI runtime and commits
+// the pin's final keyframe. Discriminating in both directions: before H2 the fractional transition
+// was REFUSED at validation, so this check could not even construct; and the snap lives in
+// `repeatGenerator`'s `finalValue`, applied by `stepProp`, both inside workletized core — so a
+// device PASS is evidence the new frame-path code crossed to the UI runtime intact, not merely that
+// the host-side unit tests pass.
+function checkFractionalRepeatSnaps(): Row {
+  const id = 'fractional repeat commits the final keyframe'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { x: 220 },
+      // 0.5 additional plays, REVERSE: the last leg is DESCENDING toward the origin when the clock
+      // runs out, and the pin still commits the TARGET. Mid-play would be ~110.
+      transition: {
+        type: 'tween',
+        duration: 0.1,
+        ease: 'linear',
+        repeat: 0.5,
+        repeatType: 'reverse',
+      },
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)['x']
+    const quiesced = !binding.driver.isActive(handle)
+    if (typeof end !== 'number')
+      return { id, pass: false, detail: `no committed x (${String(end)})` }
+    if (Math.abs(end - 220) > 0.5 || !quiesced) {
+      return {
+        id,
+        pass: false,
+        detail: `end=${end.toFixed(2)} quiesced=${String(quiesced)}, want 220/true (mid-play ≈110)`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `descending reverse leg → committed ${end.toFixed(1)}, quiesced`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// H2 round-1 review MAJOR 1 — the COMPOSED case. `delayGenerator` rebuilds the generator object, so
+// it silently dropped the fold's finish commit and a delayed fractional repeat landed mid-play on
+// both drivers. `delay.ts` is worklet-tagged frame-path core, so this row is what proves the forward
+// crossed to the UI runtime rather than only passing on the host. A dropped forward reads 110.0.
+function checkDelayedFractionalRepeatSnaps(): Row {
+  const id = 'delay + fractional repeat still commits the final keyframe'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { x: 220 },
+      transition: {
+        type: 'tween',
+        duration: 0.1,
+        ease: 'linear',
+        delay: 0.2,
+        repeat: 0.5,
+        repeatType: 'reverse',
+      },
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)['x']
+    const quiesced = !binding.driver.isActive(handle)
+    if (typeof end !== 'number')
+      return { id, pass: false, detail: `no committed x (${String(end)})` }
+    if (Math.abs(end - 220) > 0.5 || !quiesced) {
+      return {
+        id,
+        pass: false,
+        detail: `end=${end.toFixed(2)} quiesced=${String(quiesced)}, want 220/true (dropped forward reads 110)`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `delayed 200ms, descending leg → committed ${end.toFixed(1)}, quiesced`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// H3 (REQ-VALUETYPE-015) — a BOTH-VISIBLE discrete pair publishes the pin's TARGET constant, and it
+// does so at progress ZERO. `projectDiscreteStep` is a worklet on the frame path, so a device PASS
+// is evidence the new arm crossed to the UI runtime; before H3 this pair was refused at the
+// controller boundary and the check could not even mount.
+//
+// The reading at p=0 is the whole discriminator. A step law reads the ORIGIN there, the pin's
+// immediate arm reads the ORIGIN there, and native's pre-H3 worklet fallback read the ORIGIN there.
+// Only the pin's zero-slot constant reads the TARGET.
+function checkVisibleDiscretePairPublishesTarget(): Row {
+  const id = 'both-visible discrete pair publishes the target at p=0'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      initial: { display: 'flex' },
+      animate: { display: 'contents' },
+      transition: { type: 'tween', duration: 0.2, ease: 'linear' },
+    })
+    controller.mount()
+    // Read BEFORE stepping: the lane is registered at progress 0.
+    const atZero = controller.currentDiscrete('display')
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const atEnd = controller.currentDiscrete('display')
+    if (atZero !== 'contents' || atEnd !== 'contents') {
+      return {
+        id,
+        pass: false,
+        detail: `p=0 → ${atZero}, settled → ${atEnd}; want contents/contents ('flex' at p=0 is the old step)`,
+      }
+    }
+    return { id, pass: true, detail: `flex → contents: p=0 → ${atZero}, settled → ${atEnd}` }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// The control H3 owes: the invisible-endpoint STEP law must survive intact. An implementation that
+// simply returned the target everywhere would pass the row above and fail this one — `flex → none`
+// holds the ORIGIN until the very end, so p=0 must still read 'flex'.
+function checkInvisibleTargetStepUnmoved(): Row {
+  const id = 'invisible-target discrete pair still steps at the end'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      initial: { display: 'flex' },
+      animate: { display: 'none' },
+      transition: { type: 'tween', duration: 0.2, ease: 'linear' },
+    })
+    controller.mount()
+    const atZero = controller.currentDiscrete('display')
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const atEnd = controller.currentDiscrete('display')
+    if (atZero !== 'flex' || atEnd !== 'none') {
+      return {
+        id,
+        pass: false,
+        detail: `p=0 → ${atZero}, settled → ${atEnd}; want flex/none (the pin's mixVisibility step)`,
+      }
+    }
+    return { id, pass: true, detail: `flex → none: p=0 → ${atZero}, settled → ${atEnd}` }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// The control: an INTEGER repeat already ends on the pin's keyframe by construction, and H2 must not
+// have moved it. `repeat: 1` + `reverse` commits the FIRST keyframe — the origin, not the target.
+function checkIntegerRepeatUnmoved(): Row {
+  const id = 'integer repeat still lands on the origin'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { x: 220 },
+      transition: {
+        type: 'tween',
+        duration: 0.1,
+        ease: 'linear',
+        repeat: 1,
+        repeatType: 'reverse',
+      },
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 600; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)['x']
+    const quiesced = !binding.driver.isActive(handle)
+    if (typeof end !== 'number')
+      return { id, pass: false, detail: `no committed x (${String(end)})` }
+    if (Math.abs(end) > 0.5 || !quiesced) {
+      return {
+        id,
+        pass: false,
+        detail: `end=${end.toFixed(2)} quiesced=${String(quiesced)}, want 0/true`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `odd reverse leg → committed ${end.toFixed(1)} (origin), quiesced`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkInitialFalse(): Row {
+  const id = 'initial={false} mounts settled at animate'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      initial: false,
+      animate: { x: 220, opacity: 0.5 },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    const committed = binding.driver.committed(handle)
+    const active = binding.driver.isActive(handle)
+    binding.driver.step(DT_MS)
+    const after = binding.driver.committed(handle)
+    if (committed['x'] !== 220 || committed['opacity'] !== 0.5) {
+      return {
+        id,
+        pass: false,
+        detail: `mounted at ${JSON.stringify(committed)}, want animate values`,
+      }
+    }
+    if (active) return { id, pass: false, detail: 'element is animating; want no entrance motion' }
+    if (after['x'] !== 220 || after['opacity'] !== 0.5) {
+      return { id, pass: false, detail: 'values moved after a step; want settled hold' }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'first frame at animate values, no motion, holds under stepping',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkRetargetContinuity(): Row {
+  const id = 'animate change → one continuous retarget'
+  try {
+    const instrumented = instrument(checkDriver())
+    const controller = createMotionViewController(instrumented.binding, {
+      animate: { x: 220 },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 30; i++) instrumented.binding.driver.step(DT_MS)
+    const before = instrumented.binding.driver.committed(handle)['x']!
+    const commandsBefore = instrumented.commandCount()
+    controller.update({ animate: { x: 0 }, transition: SPRING })
+    const seeded = instrumented.binding.driver.committed(handle)['x']!
+    const issued = instrumented.commandCount() - commandsBefore
+    for (let i = 0; i < 900; i++) instrumented.binding.driver.step(DT_MS)
+    const end = instrumented.binding.driver.committed(handle)['x']
+    if (issued !== 1)
+      return { id, pass: false, detail: `${issued} commands issued, want exactly 1` }
+    if (seeded !== before) {
+      return { id, pass: false, detail: `seed jumped ${before} → ${seeded}; want C0 continuity` }
+    }
+    if (end !== 0) return { id, pass: false, detail: `settled at ${String(end)}, want 0` }
+    return {
+      id,
+      pass: true,
+      detail: `seeded from live ${before.toFixed(1)}, one retarget, settled at 0`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkUnlistedHoldAndNoOpUpdate(): Row {
+  const id = 'unlisted props hold; unchanged update issues no command'
+  try {
+    const instrumented = instrument(checkDriver())
+    const controller = createMotionViewController(instrumented.binding, {
+      animate: { x: 220, opacity: 0.25 },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 900; i++) instrumented.binding.driver.step(DT_MS)
+    const settledOpacity = instrumented.binding.driver.committed(handle)['opacity']
+    // Unrelated re-render: same resolved values → NO command (REQ discipline from the packet).
+    const commandsBefore = instrumented.commandCount()
+    controller.update({ animate: { x: 220, opacity: 0.25 }, transition: SPRING })
+    const noOpIssued = instrumented.commandCount() - commandsBefore
+    // Retarget mentioning only x: opacity must hold at 0.25, never reset (REQ-API-002/012).
+    controller.update({ animate: { x: 50, opacity: 0.25 }, transition: SPRING })
+    const rightAfter = instrumented.binding.driver.committed(handle)['opacity']
+    for (let i = 0; i < 900; i++) instrumented.binding.driver.step(DT_MS)
+    const finalCommitted = instrumented.binding.driver.committed(handle)
+    if (settledOpacity !== 0.25) {
+      return { id, pass: false, detail: `opacity settled at ${String(settledOpacity)}, want 0.25` }
+    }
+    if (noOpIssued !== 0) {
+      return { id, pass: false, detail: `unchanged update issued ${noOpIssued} command(s), want 0` }
+    }
+    if (rightAfter !== 0.25 || finalCommitted['opacity'] !== 0.25) {
+      return {
+        id,
+        pass: false,
+        detail: `opacity ${String(rightAfter)} → ${String(finalCommitted['opacity'])}; a retarget reset an unlisted prop`,
+      }
+    }
+    if (finalCommitted['x'] !== 50) {
+      return { id, pass: false, detail: `x ${String(finalCommitted['x'])}, want 50` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'no-op update silent; opacity held 0.25 across the retarget; x → 50',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkValidateFailLoud(): Row {
+  const id = 'invalid target fails loud at mount'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { definitelyNotAProperty: 1 } as unknown as Target,
+      transition: SPRING,
+    })
+    try {
+      controller.mount()
+      return { id, pass: false, detail: 'mount did not throw on an unknown target key' }
+    } catch (thrown) {
+      if (!(thrown instanceof InvalidTargetError)) {
+        return {
+          id,
+          pass: false,
+          detail: `threw ${thrown instanceof Error ? thrown.name : typeof thrown}, want InvalidTargetError`,
+        }
+      }
+      if (!thrown.message.includes('definitelyNotAProperty')) {
+        return {
+          id,
+          pass: false,
+          detail: `error does not name the offending key: ${thrown.message}`,
+        }
+      }
+      return {
+        id,
+        pass: true,
+        detail: `InvalidTargetError names the key: ${thrown.message.slice(0, 80)}…`,
+      }
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkStyleSeedsStart(): Row {
+  // Review-cycle-1 major 1 (specs/M2.2-BUILD-PACKET.md Findings): a style-declared value must seed
+  // the entrance start (REQ-API-011 — style wins over host base). style opacity 0.3, animate to 1:
+  // the first committed frame is 0.3 (NOT the host base 1), then the spring settles at 1.
+  const id = 'style value seeds the entrance start'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { opacity: 1 },
+      transition: SPRING,
+      style: { opacity: 0.3 },
+    })
+    const handle = controller.mount()
+    const start = binding.driver.committed(handle)['opacity']
+    for (let i = 0; i < 900; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)['opacity']
+    if (start !== 0.3) {
+      return { id, pass: false, detail: `seeded from ${String(start)}, want the style value 0.3` }
+    }
+    if (end !== 1) return { id, pass: false, detail: `settled at ${String(end)}, want 1` }
+    return {
+      id,
+      pass: true,
+      detail: 'entrance seeded from style 0.3 (not host base 1), settled at 1',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkWrapperValidationOrder(): Row {
+  // Review-cycle-2 major 3: the WRAPPER's mount prep must run core validation FIRST — an unknown key
+  // throws InvalidTargetError from the pipeline (never the spike's scope Error), while a VALID key
+  // this spike cannot render (e.g. width) hits the scope guard AFTER validation passes. This drives
+  // prepareMotionViewMount — the exact function the component calls at mount.
+  const id = 'wrapper validates before its scope guard'
+  try {
+    let unknownKeyError: unknown = null
+    try {
+      prepareMotionViewMount({ animate: { definitelyNotAProperty: 1 } as unknown as Target })
+    } catch (e) {
+      unknownKeyError = e
+    }
+    if (!(unknownKeyError instanceof InvalidTargetError)) {
+      return {
+        id,
+        pass: false,
+        detail: `unknown key threw ${unknownKeyError instanceof Error ? unknownKeyError.name : typeof unknownKeyError}, want InvalidTargetError (validation must run first)`,
+      }
+    }
+    // R4 zero-delta (REQ-DRIVER-027): the mapped set equals the registry's full shipped key
+    // set, so the 'valid-but-unmapped' class is RETIRED — width now mounts clean (r12 major
+    // 7b8e1f34c2ad; this row asserted the pre-R4 scope error and reported false failures).
+    try {
+      prepareMotionViewMount({ animate: { width: 100 } })
+    } catch (e) {
+      return {
+        id,
+        pass: false,
+        detail: `width (R4-mapped) threw ${e instanceof Error ? e.message.slice(0, 80) : String(e)}, want a clean mount`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'unknown key → InvalidTargetError first; width (R4-mapped) mounts clean',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkWrapperUpdateGuard(): Row {
+  // Review-cycle-3 major 4: UPDATE-time keys must hit the same wrapper boundary as mount — an
+  // unknown key throws the pipeline's InvalidTargetError; a valid key that was NOT mounted throws
+  // the fixed-at-mount scope error (it has no shared value and no registered driver prop — letting
+  // it through dies late inside the driver, the wrong altitude).
+  const id = 'wrapper guards update-time keys'
+  try {
+    let newKeyError: unknown = null
+    try {
+      prepareMotionViewUpdate(['x'], { x: 0, width: 100 })
+    } catch (e) {
+      newKeyError = e
+    }
+    const newKeyOk =
+      newKeyError instanceof Error &&
+      !(newKeyError instanceof InvalidTargetError) &&
+      newKeyError.message.includes('fixed at mount') &&
+      newKeyError.message.includes('width')
+    if (!newKeyOk) {
+      return {
+        id,
+        pass: false,
+        detail: `un-mounted valid key: ${newKeyError instanceof Error ? newKeyError.message.slice(0, 80) : String(newKeyError)}, want the fixed-at-mount scope error`,
+      }
+    }
+    let unknownKeyError: unknown = null
+    try {
+      prepareMotionViewUpdate(['x'], { definitelyNotAProperty: 1 } as unknown as Target)
+    } catch (e) {
+      unknownKeyError = e
+    }
+    if (!(unknownKeyError instanceof InvalidTargetError)) {
+      return {
+        id,
+        pass: false,
+        detail: `unknown key threw ${unknownKeyError instanceof Error ? unknownKeyError.name : typeof unknownKeyError}, want InvalidTargetError (validation still first)`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail:
+        "update with un-mounted 'width' → fixed-at-mount scope error; unknown key → InvalidTargetError",
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkTeardownDeactivates(): Row {
+  const id = 'unmount deactivates before release'
+  try {
+    const instrumented = instrument(checkDriver())
+    const controller = createMotionViewController(instrumented.binding, {
+      animate: { x: 220 },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    for (let i = 0; i < 10; i++) instrumented.binding.driver.step(DT_MS)
+    controller.unmount()
+    const last = instrumented.lastSetActive()
+    if (last === null || last.handle !== (handle as number) || last.active !== false) {
+      return {
+        id,
+        pass: false,
+        detail: `no setActive(handle,false) observed at unmount (${JSON.stringify(last)})`,
+      }
+    }
+    return { id, pass: true, detail: 'setActive(false) observed before release' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// --- L1 rows (specs/L1-BUILD-PACKET.md) --------------------------------------------------------
+// Authored RED-FIRST: each drives the L1 contract through the REAL wrapper/controller path and
+// fails against the pre-L1 tree (the M2.2 spike guards / the currentColor stub). The packet cites
+// the observed red run before the implementation lands (TDD gate).
+
+function checkL1RadiusKeysMapped(): Row {
+  const id = 'L1: wrapper maps radius keys'
+  try {
+    const { keys } = prepareMotionViewMount({
+      animate: { borderRadius: 0, borderTopLeftRadius: 12 },
+    })
+    if (!keys.includes('borderRadius') || !keys.includes('borderTopLeftRadius')) {
+      return { id, pass: false, detail: `mount prep returned keys [${keys.join(', ')}]` }
+    }
+    return { id, pass: true, detail: 'borderRadius + borderTopLeftRadius accepted by mount prep' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkL1RadiusAnimates(): Row {
+  // Style seeds 24 (REQ-API-011), animate to 0, settle EXACT at 0 — the demo's radius morph in
+  // deterministic form. Independence: the corner key animates to its own target alongside.
+  const id = 'L1: borderRadius animates 24→0, corner independent'
+  try {
+    prepareMotionViewMount({ animate: { borderRadius: 0 } }) // the wrapper gate (RED pre-L1)
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      animate: { borderRadius: 0, borderTopLeftRadius: 24 },
+      transition: SPRING,
+      style: { borderRadius: 24, borderTopLeftRadius: 4 },
+    })
+    const handle = controller.mount()
+    const start = binding.driver.committed(handle)
+    for (let i = 0; i < 900; i++) binding.driver.step(DT_MS)
+    const end = binding.driver.committed(handle)
+    if (start['borderRadius'] !== 24 || start['borderTopLeftRadius'] !== 4) {
+      return { id, pass: false, detail: `seeded ${JSON.stringify(start)}, want style values 24/4` }
+    }
+    if (end['borderRadius'] !== 0 || end['borderTopLeftRadius'] !== 24) {
+      return { id, pass: false, detail: `settled ${JSON.stringify(end)}, want 0/24` }
+    }
+    return { id, pass: true, detail: 'borderRadius 24→0 exact; corner 4→24 independently' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkL1ColorProjects(): Row {
+  // The pinned seam (packet §semantics 3): ONE driver progress prop on [0,100]; the projected
+  // rgba() string is projectColor(from, to, progress) — start byte-exact at the initial color,
+  // mid-flight self-consistent with the driver's live progress, settled byte-exact at the target.
+  const id = 'L1: backgroundColor projects by progress seam'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      initial: { backgroundColor: '#ff0000' },
+      animate: { backgroundColor: '#0000ff' },
+      transition: SPRING,
+    })
+    const handle = controller.mount()
+    const red = parseColor('#ff0000')
+    const blue = parseColor('#0000ff')
+    const atMount = controller.currentColor('backgroundColor')
+    if (atMount !== transformColor(red)) {
+      return { id, pass: false, detail: `mounted at ${atMount}, want ${transformColor(red)}` }
+    }
+    // Sample EARLY (step 5): the underdamped spring overshoots past 100 later in the flight
+    // (observed 107.45 at step 30 on device — packet Findings), which is legitimate seam behavior
+    // (mix-space extrapolation, output clamped); the mid-flight range assertion belongs BEFORE the
+    // first overshoot.
+    for (let i = 0; i < 5; i++) binding.driver.step(DT_MS)
+    const progress = binding.driver.committed(handle)['backgroundColor']
+    const mid = controller.currentColor('backgroundColor')
+    if (typeof progress !== 'number' || !(progress > 0 && progress < 100)) {
+      return { id, pass: false, detail: `progress ${String(progress)} at step 5, want (0,100)` }
+    }
+    if (mid !== projectColor(red, blue, progress)) {
+      return {
+        id,
+        pass: false,
+        detail: `mid ${mid} != projectColor at progress ${progress.toFixed(2)}`,
+      }
+    }
+    if (mid === transformColor(red) || mid === transformColor(blue)) {
+      return { id, pass: false, detail: `mid-flight color ${mid} sits at an endpoint` }
+    }
+    for (let i = 0; i < 900; i++) binding.driver.step(DT_MS)
+    const settled = controller.currentColor('backgroundColor')
+    if (settled !== transformColor(blue)) {
+      return { id, pass: false, detail: `settled at ${settled}, want ${transformColor(blue)}` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `red → ${mid} (progress ${progress.toFixed(1)}) → blue, seam-consistent`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkL1ColorRetargetContinuity(): Row {
+  // Packet §semantics 5: a mid-flight retarget re-seeds from the CURRENT projected color (C0 — no
+  // snap at the handoff frame, per-channel within EPS_COLOR_CHANNEL) and converges to the new target.
+  const id = 'L1: color retarget continuity (C0)'
+  try {
+    const binding = checkDriver()
+    const controller = createMotionViewController(binding, {
+      initial: { backgroundColor: '#ff0000' },
+      animate: { backgroundColor: '#0000ff' },
+      transition: SPRING,
+    })
+    controller.mount()
+    for (let i = 0; i < 30; i++) binding.driver.step(DT_MS)
+    const before = parseColor(controller.currentColor('backgroundColor'))
+    controller.update({ animate: { backgroundColor: '#00ff00' } })
+    const after = parseColor(controller.currentColor('backgroundColor'))
+    const maxDelta = Math.max(
+      Math.abs(after.red - before.red),
+      Math.abs(after.green - before.green),
+      Math.abs(after.blue - before.blue),
+      Math.abs(after.alpha - before.alpha) * 255,
+    )
+    if (maxDelta > EPS_COLOR_CHANNEL) {
+      return {
+        id,
+        pass: false,
+        detail: `handoff snapped: max channel delta ${maxDelta.toFixed(3)}`,
+      }
+    }
+    for (let i = 0; i < 900; i++) binding.driver.step(DT_MS)
+    const settled = controller.currentColor('backgroundColor')
+    if (settled !== transformColor(parseColor('#00ff00'))) {
+      return { id, pass: false, detail: `settled at ${settled}, want rgba(0, 255, 0, 1)` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `handoff delta ${maxDelta.toFixed(3)} ≤ ${EPS_COLOR_CHANNEL}, settled at green`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkL1TypedFailures(): Row {
+  // Packet §semantics 6: malformed AND incompatible-but-valid inputs hit TYPED failures at the
+  // component boundary — never raw TypeErrors, never a stale M2.2 scope message.
+  const id = 'L1: typed failures at the boundary'
+  const probes: string[] = []
+  function probe(name: string, run: () => void, want: (e: Error) => boolean): void {
+    try {
+      run()
+      probes.push(`${name}: did not throw`)
+    } catch (e) {
+      if (!(e instanceof Error)) probes.push(`${name}: threw non-Error ${typeof e}`)
+      else if (!want(e)) probes.push(`${name}: ${e.message.slice(0, 90)}`)
+    }
+  }
+  try {
+    const binding = checkDriver()
+    // A number for an rgba-typed key → CORE validation's typed rejection (observed in the RED run:
+    // the wrong-primitive gate already lives at InvalidTargetError altitude — packet Findings).
+    probe(
+      'backgroundColor:42',
+      () =>
+        createMotionViewController(binding, {
+          animate: { backgroundColor: 42 } as unknown as Target,
+          transition: SPRING,
+        }).mount(),
+      (e) => e instanceof InvalidTargetError && e.message.includes('backgroundColor'),
+    )
+    // An unparseable color string → typed parse error naming the key, from the L1 path.
+    probe(
+      "backgroundColor:'#zzz'",
+      () =>
+        createMotionViewController(binding, {
+          animate: { backgroundColor: '#zzz' },
+          transition: SPRING,
+        }).mount(),
+      (e) => e.message.includes('backgroundColor') && !e.message.includes('M2.2'),
+    )
+    // A string for a length key → the numeric gate's typed error, now owned by L1.
+    probe(
+      "borderRadius:'24px'",
+      () =>
+        createMotionViewController(binding, {
+          animate: { borderRadius: '24px' },
+          transition: SPRING,
+        }).mount(),
+      (e) => e.message.includes('borderRadius') && e.message.includes('L1'),
+    )
+    // R4 zero-delta retired the valid-but-unmapped class: width is registry-mapped and MUST
+    // mount clean (r12 major 7b8e1f34c2ad).
+    try {
+      prepareMotionViewMount({ animate: { width: 100 } })
+    } catch (e) {
+      probes.push(
+        `width:100 (R4-mapped): threw ${e instanceof Error ? e.message.slice(0, 80) : String(e)}`,
+      )
+    }
+    // Regression pin: validation ordering unchanged — unknown key still InvalidTargetError first.
+    probe(
+      'unknown key ordering',
+      () => prepareMotionViewMount({ animate: { definitelyNotAProperty: 1 } as unknown as Target }),
+      (e) => e instanceof InvalidTargetError,
+    )
+    if (probes.length > 0) return { id, pass: false, detail: probes.join(' | ') }
+    return {
+      id,
+      pass: true,
+      detail: 'four boundary probes hit typed failures; R4-mapped width mounts clean',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+export function MotionViewChecksScreen() {
+  const rows: Row[] = [
+    // H2 first, deliberately: the iOS simulator has no CLI touch injection (PROOF.md), so a claim
+    // that needs scrolling to reach can never appear in a captured frame. The newest claim under
+    // proof leads; the ordering carries no semantics.
+    checkVisibleDiscretePairPublishesTarget(),
+    checkInvisibleTargetStepUnmoved(),
+    checkFractionalRepeatSnaps(),
+    checkDelayedFractionalRepeatSnaps(),
+    checkIntegerRepeatUnmoved(),
+    checkMountAnimates(),
+    checkInitialFalse(),
+    checkStyleSeedsStart(),
+    checkRetargetContinuity(),
+    checkUnlistedHoldAndNoOpUpdate(),
+    checkValidateFailLoud(),
+    checkWrapperValidationOrder(),
+    checkWrapperUpdateGuard(),
+    checkTeardownDeactivates(),
+    checkL1RadiusKeysMapped(),
+    checkL1RadiusAnimates(),
+    checkL1ColorProjects(),
+    checkL1ColorRetargetContinuity(),
+    checkL1TypedFailures(),
+  ]
+  // The checks are done reading committed values — free their UI-runtime records.
+  disposeCheckDrivers()
+  const failing = rows.filter((row) => !row.pass)
+  const allPass = failing.length === 0
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Motion.View checks — M2.2 + L1 + H2 + H3</Text>
+      <Text style={styles.subtitle}>
+        controller semantics vs the manual-stepping worklet driver
+      </Text>
+      <View style={[styles.banner, allPass ? styles.pass : styles.fail]}>
+        <Text style={styles.bannerText}>{allPass ? 'PASS' : 'FAIL'}</Text>
+      </View>
+      {/*
+        The tally and the failing SET, stated by the screen itself. The banner is binary and the
+        row list runs past the fold, so an aggregate claim ("N pass, and the failures are X and Y")
+        used to be readable only from a SCROLLED capture — which the iOS simulator can never produce,
+        having no CLI touch injection (PROOF.md). A capture that cannot evidence the claim made about
+        it is the defect the H2 round-3 review found; the screen answers it in the first frame
+        instead, on both platforms.
+      */}
+      <Text style={styles.tally}>
+        {rows.length - failing.length} PASS / {failing.length} FAIL of {rows.length} rows
+      </Text>
+      {/*
+        Deliberately UNCLIPPED — no `numberOfLines`. A cap here would silently truncate the failing
+        list once the failure count grew, which is the same under-reporting the tally exists to
+        prevent (H2 round-4 review MINOR 3). The list is allowed to push the rows down instead.
+      */}
+      <Text style={styles.tallyDetail}>
+        {allPass ? 'no failing rows' : `FAILING: ${failing.map((row) => row.id).join('  |  ')}`}
+      </Text>
+      {rows.map((row) => (
+        <View key={row.id} style={styles.row}>
+          <Text style={[styles.verdict, row.pass ? styles.ok : styles.bad]}>
+            {row.pass ? 'PASS' : 'FAIL'}
+          </Text>
+          <View style={styles.rowBody}>
+            <Text style={styles.rowId}>{row.id}</Text>
+            <Text style={styles.rowDetail} numberOfLines={3}>
+              {row.detail}
+            </Text>
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 20 },
+  title: { color: '#fff', fontSize: 22, fontWeight: '700', textAlign: 'center' },
+  subtitle: { color: '#8a8aa0', fontSize: 12, marginTop: 6, textAlign: 'center' },
+  banner: {
+    alignSelf: 'center',
+    paddingHorizontal: 36,
+    paddingVertical: 10,
+    borderRadius: 10,
+    marginTop: 18,
+    marginBottom: 10,
+  },
+  pass: { backgroundColor: '#1d7a3e' },
+  fail: { backgroundColor: '#a32633' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  tally: { color: '#e6e6f0', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  tallyDetail: { color: '#f87171', fontSize: 11, marginTop: 3, textAlign: 'center' },
+  row: { flexDirection: 'row', marginTop: 10 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+})