@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/LayoutChecksScreen.tsx

@@ -0,0 +1,822 @@
+// Layout-binding checks. M2.5 rows (specs/M2.5-BUILD-PACKET.md §pinned semantics) drive the
+// projection binding; L2 rows (specs/L2-BUILD-PACKET.md §semantics) drive the layoutId identity
+// binding. All rows use FAKE rect events + a ManualClock/ManualScheduler graph — fully
+// deterministic (the live legs are the FLIP and identity-swap smokes). A screenshot is the
+// assertion; try/catch is evidence capture.
+
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import {
+  EPSILON_POS,
+  EPSILON_SCALE,
+  ManualClock,
+  ManualScheduler,
+  createMotionGraph,
+  createProjectionSession,
+  toWindowSpaceRect,
+  type MotionGraph,
+  type Rect,
+  type Transform,
+} from '@unrulysystems/native-motion-core'
+import { createLayoutProjection, type LayoutProjection } from '../../native/motion/layoutProjection'
+import {
+  createLayoutIdentityBinding,
+  type LayoutIdentityBinding,
+} from '../../native/motion/layoutIdBinding'
+import { createWorkletDriver, type WorkletDriverBinding } from '../../native/driver/workletDriver'
+import {
+  buildCoreSpringChannel,
+  createNoFlashLayoutTransition,
+} from '../../native/motion/layoutTransition'
+import { resolveSpringGenerator } from '@unrulysystems/native-motion-core'
+
+const DT = 16.67
+
+interface Row {
+  readonly id: string
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Rig {
+  readonly graph: MotionGraph
+  readonly scheduler: ManualScheduler
+}
+
+function rig(): Rig {
+  const clock = new ManualClock()
+  const scheduler = new ManualScheduler(clock)
+  return { graph: createMotionGraph({ clock, scheduler }), scheduler }
+}
+
+function projection(r: Rig): LayoutProjection {
+  return createLayoutProjection({ graph: r.graph, token: 'box' })
+}
+
+const R = (x: number, y: number, width: number, height: number) => ({ x, y, width, height })
+
+function identityish(p: LayoutProjection): boolean {
+  const t = p.session.transform()
+  return (
+    Math.abs(t.translateX) <= EPSILON_POS &&
+    Math.abs(t.translateY) <= EPSILON_POS &&
+    Math.abs(t.scaleX - 1) <= EPSILON_SCALE &&
+    Math.abs(t.scaleY - 1) <= EPSILON_SCALE
+  )
+}
+
+function checkFlipInversion(): Row {
+  const id = 'FLIP inversion: old rect at t=0, identity at settle'
+  try {
+    const r = rig()
+    const p = projection(r)
+    p.onLayoutRect(R(0, 0, 64, 64)) // initial measure — no projection
+    p.onLayoutRect(R(200, 0, 64, 64)) // layout moved right 200
+    const t0 = p.session.transform()
+    if (Math.abs(t0.translateX + 200) > EPSILON_POS || Math.abs(t0.translateY) > EPSILON_POS) {
+      return {
+        id,
+        pass: false,
+        detail: `t0 translate (${t0.translateX.toFixed(1)}, ${t0.translateY.toFixed(1)}), want (−200, 0)`,
+      }
+    }
+    r.scheduler.frames(300, DT)
+    if (!p.session.isSettled() || !identityish(p)) {
+      return {
+        id,
+        pass: false,
+        detail: `settle: settled=${String(p.session.isSettled())} transform=${JSON.stringify(p.session.transform())}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'began at translateX −200 (the old spot), settled to identity',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkScaleLegs(): Row {
+  const id = 'size change projects scaleX/scaleY to identity'
+  try {
+    const r = rig()
+    const p = projection(r)
+    p.onLayoutRect(R(0, 0, 64, 64))
+    p.onLayoutRect(R(0, 0, 128, 128)) // doubled — visual starts at half scale
+    const t0 = p.session.transform()
+    if (Math.abs(t0.scaleX - 0.5) > EPSILON_SCALE || Math.abs(t0.scaleY - 0.5) > EPSILON_SCALE) {
+      return {
+        id,
+        pass: false,
+        detail: `t0 scale (${t0.scaleX.toFixed(3)}, ${t0.scaleY.toFixed(3)}), want (0.5, 0.5)`,
+      }
+    }
+    r.scheduler.frames(300, DT)
+    if (!identityish(p)) {
+      return {
+        id,
+        pass: false,
+        detail: `settled transform ${JSON.stringify(p.session.transform())}`,
+      }
+    }
+    return { id, pass: true, detail: '64→128 began at scale 0.5, settled to identity' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkRetargetC1(): Row {
+  const id = 'mid-flight layout change retargets from the live rect'
+  try {
+    const r = rig()
+    const p = projection(r)
+    p.onLayoutRect(R(0, 0, 64, 64))
+    p.onLayoutRect(R(200, 0, 64, 64))
+    r.scheduler.frames(6, DT) // in flight
+    const liveBefore = p.session.visualRect()
+    if (liveBefore === null) return { id, pass: false, detail: 'no visual rect mid-flight' }
+    p.onLayoutRect(R(100, 40, 64, 64)) // second layout change mid-flight
+    const liveAfter = p.session.visualRect()
+    if (liveAfter === null) return { id, pass: false, detail: 'visual rect lost at retarget' }
+    if (
+      Math.abs(liveAfter.x - liveBefore.x) > EPSILON_POS ||
+      Math.abs(liveAfter.y - liveBefore.y) > EPSILON_POS
+    ) {
+      return {
+        id,
+        pass: false,
+        detail: `visual rect snapped (${liveBefore.x.toFixed(1)},${liveBefore.y.toFixed(1)}) → (${liveAfter.x.toFixed(1)},${liveAfter.y.toFixed(1)})`,
+      }
+    }
+    r.scheduler.frames(300, DT)
+    if (!p.session.isSettled() || !identityish(p)) {
+      return { id, pass: false, detail: 'did not settle to identity at the new layout' }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `retargeted at live x=${liveBefore.x.toFixed(1)} with no snap, settled at the new layout`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkFailClosed(): Row {
+  const id = 'unmeasured fails closed: identity, unsettled'
+  try {
+    const r = rig()
+    const p = projection(r)
+    p.onLayoutRect(R(0, 0, 64, 64)) // ONLY the initial measure — no projection may start
+    if (!identityish(p)) {
+      return {
+        id,
+        pass: false,
+        detail: `transform not identity after a single measure: ${JSON.stringify(p.session.transform())}`,
+      }
+    }
+    // Direct session discipline: a null before/after begin is unmeasured — identity + unsettled.
+    const r2 = rig()
+    const s2 = createProjectionSession({ graph: r2.graph })
+    s2.begin('t2', null, R(10, 10, 64, 64))
+    const t2 = s2.transform()
+    const nullIdentity =
+      Math.abs(t2.translateX) <= EPSILON_POS && Math.abs(t2.scaleX - 1) <= EPSILON_SCALE
+    if (!nullIdentity || s2.measured() || s2.isSettled()) {
+      return {
+        id,
+        pass: false,
+        detail: `null-before begin: measured=${String(s2.measured())} settled=${String(s2.isSettled())} transform=${JSON.stringify(t2)}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'single measure → no projection; null-before begin → identity, unmeasured, unsettled',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkSettleDiscipline(): Row {
+  const id = 'settles within the ratified epsilons'
+  try {
+    const r = rig()
+    const p = projection(r)
+    p.onLayoutRect(R(0, 0, 64, 64))
+    p.onLayoutRect(R(200, 80, 64, 64))
+    let frames = 0
+    while (!p.session.isSettled() && frames < 1200) {
+      r.scheduler.frame(DT)
+      frames += 1
+    }
+    if (!p.session.isSettled()) return { id, pass: false, detail: 'never settled in 1200 frames' }
+    const rect = p.session.visualRect()
+    if (
+      rect === null ||
+      Math.abs(rect.x - 200) > EPSILON_POS ||
+      Math.abs(rect.y - 80) > EPSILON_POS
+    ) {
+      return {
+        id,
+        pass: false,
+        detail: `settled rect ${JSON.stringify(rect)}, want (200, 80) ± ${EPSILON_POS}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `settled in ${frames} frames at (200, 80) within ε=${EPSILON_POS}px, identity transform`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkMalformedRectGuard(): Row {
+  const id = 'malformed onLayout rects fail loud at the binding'
+  try {
+    const r = rig()
+    const p = projection(r)
+    let missingError: unknown = null
+    try {
+      p.onLayoutRect({ x: 0, y: 0, width: 64 }) // height missing
+    } catch (e) {
+      missingError = e
+    }
+    const missingOk = missingError instanceof Error && missingError.message.includes('height')
+    let badTypeError: unknown = null
+    try {
+      p.onLayoutRect({ x: 'zero', y: 0, width: 64, height: 64 })
+    } catch (e) {
+      badTypeError = e
+    }
+    const badTypeOk = badTypeError instanceof Error && badTypeError.message.includes("'x'")
+    if (!missingOk || !badTypeOk) {
+      return {
+        id,
+        pass: false,
+        detail: `missing→${missingError instanceof Error ? missingError.message.slice(0, 40) : 'no throw'}; badType→${badTypeError instanceof Error ? badTypeError.message.slice(0, 40) : 'no throw'}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'missing height and non-numeric x both throw naming the field',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// ————— L2 rows (specs/L2-BUILD-PACKET.md §semantics): the layoutId identity binding —————
+
+// The demo-visible geometry: A is a small card top-left, B a larger card elsewhere — the flight
+// covers translation AND scale, so coincidence is a real two-axis assertion.
+const RECT_A = toWindowSpaceRect({ x: 0, y: 0, width: 64, height: 64 })
+const RECT_B = toWindowSpaceRect({ x: 200, y: 120, width: 128, height: 128 })
+
+// L2 rows run over the DETERMINISTIC worklet driver (manual stepping — the same UI-side engine
+// the live loop steps, REQ-DRIVER-011 discipline): the binding no longer owns a JS graph
+// (specs/LAYOUT-UITHREAD-PORT-BUILD-PACKET.md §The binding after the port).
+interface IdentityRig {
+  readonly driver: WorkletDriverBinding
+  readonly b: LayoutIdentityBinding
+}
+
+// Every rig created during a check run, disposed together after the rows are computed — the rows
+// rebuild per render, and an undisposed manual driver strands its UI-runtime state per run
+// (quiesce-before-unmount, review round 4 major 5).
+const liveRigDrivers: WorkletDriverBinding[] = []
+
+function identityRig(): IdentityRig {
+  const driver = createWorkletDriver({ manualStepping: true })
+  liveRigDrivers.push(driver)
+  return { driver, b: createLayoutIdentityBinding(driver) }
+}
+
+function disposeIdentityRigs(): void {
+  for (const driver of liveRigDrivers) driver.dispose()
+  liveRigDrivers.length = 0
+}
+
+function identityFrames(driver: WorkletDriverBinding, count: number): void {
+  for (let i = 0; i < count; i++) driver.driver.step(DT)
+}
+
+// A holder's current outputs, read back from the shared values the engine writes — the JS-read
+// equivalent of the deleted per-frame view() (deterministic rows only; live screens bind styles).
+interface HolderView {
+  readonly transform: Transform
+  readonly opacity: number
+  readonly zLifted: boolean
+}
+
+function viewOf(b: LayoutIdentityBinding, id: string, token: string): HolderView {
+  const s = b.sharedViewFor(id, token)
+  return {
+    transform: {
+      translateX: s.translateX.value,
+      translateY: s.translateY.value,
+      scaleX: s.scaleX.value,
+      scaleY: s.scaleY.value,
+    },
+    opacity: s.opacity.value,
+    zLifted: s.zLifted.value === 1,
+  }
+}
+
+// Compose a holder's transform over its own layout rect — the visual rect the substrate paints
+// (top-left anchored, matching core's Transform law).
+function applyTo(t: Transform, rect: Rect): Rect {
+  return {
+    x: rect.x + t.translateX,
+    y: rect.y + t.translateY,
+    width: rect.width * t.scaleX,
+    height: rect.height * t.scaleY,
+  }
+}
+
+function rectsCoincide(a: Rect, b: Rect): boolean {
+  return (
+    Math.abs(a.x - b.x) <= EPSILON_POS &&
+    Math.abs(a.y - b.y) <= EPSILON_POS &&
+    Math.abs(a.width - b.width) <= EPSILON_POS &&
+    Math.abs(a.height - b.height) <= EPSILON_POS
+  )
+}
+
+// A paired binding mid-flight: A sole → B lead, six frames in. The shared setup for L2 rows.
+function pairedMidFlight(): IdentityRig {
+  const rig = identityRig()
+  rig.b.attach('card', 'A', RECT_A)
+  rig.b.attach('card', 'B', RECT_B)
+  identityFrames(rig.driver, 6)
+  return rig
+}
+
+function checkIdentityRolesAndCoincidence(): Row {
+  const id = 'L2 roles: sole → lead flight; both holders coincide mid-flight'
+  try {
+    const { driver, b } = identityRig()
+    const roleA = b.attach('card', 'A', RECT_A)
+    if (roleA !== 'sole')
+      return { id, pass: false, detail: `first attach role '${roleA}', want 'sole'` }
+    const soleView = viewOf(b, 'card', 'A')
+    const soleIdentity =
+      Math.abs(soleView.transform.translateX) <= EPSILON_POS &&
+      Math.abs(soleView.transform.scaleX - 1) <= EPSILON_SCALE &&
+      soleView.opacity === 1
+    if (!soleIdentity) {
+      return {
+        id,
+        pass: false,
+        detail: `sole holder not at identity/opacity 1: ${JSON.stringify(soleView)}`,
+      }
+    }
+    const roleB = b.attach('card', 'B', RECT_B)
+    if (roleB !== 'lead')
+      return { id, pass: false, detail: `second attach role '${roleB}', want 'lead'` }
+    identityFrames(driver, 6)
+    if (b.isSettled('card'))
+      return { id, pass: false, detail: 'flight settled in 6 frames — no flight began' }
+    const visualA = applyTo(viewOf(b, 'card', 'A').transform, RECT_A)
+    const visualB = applyTo(viewOf(b, 'card', 'B').transform, RECT_B)
+    if (!rectsCoincide(visualA, visualB)) {
+      return {
+        id,
+        pass: false,
+        detail: `mid-flight visuals diverge: A ${JSON.stringify(visualA)} vs B ${JSON.stringify(visualB)}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `sole/lead roles assigned; mid-flight both project onto one visual rect (x≈${visualA.x.toFixed(1)})`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkIdentityCrossfade(): Row {
+  const id = 'L2 crossfade: conserved mid-flight, exact endpoints at settle'
+  try {
+    const { driver, b } = pairedMidFlight()
+    const midA = viewOf(b, 'card', 'A').opacity
+    const midB = viewOf(b, 'card', 'B').opacity
+    if (midB <= 0 || midB >= 1 || Math.abs(midA + midB - 1) > 0.001) {
+      return {
+        id,
+        pass: false,
+        detail: `mid-flight opacities A=${midA.toFixed(3)} B=${midB.toFixed(3)}, want conserved sum 1 with B in (0,1)`,
+      }
+    }
+    identityFrames(driver, 600)
+    const endA = viewOf(b, 'card', 'A').opacity
+    const endB = viewOf(b, 'card', 'B').opacity
+    if (!b.isSettled('card') || endB !== 1 || endA !== 0) {
+      return {
+        id,
+        pass: false,
+        detail: `settle: settled=${String(b.isSettled('card'))} A=${endA} B=${endB}, want exact 0/1`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `mid-flight A=${midA.toFixed(2)}+B=${midB.toFixed(2)}=1; settled to exact A=0, B=1`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkIdentityZLift(): Row {
+  const id = 'L2 z-lift: lead lifted during flight only'
+  try {
+    const { driver, b } = pairedMidFlight()
+    const midA = viewOf(b, 'card', 'A').zLifted
+    const midB = viewOf(b, 'card', 'B').zLifted
+    if (!midB || midA) {
+      return {
+        id,
+        pass: false,
+        detail: `mid-flight zLifted A=${String(midA)} B=${String(midB)}, want lead-only lift`,
+      }
+    }
+    identityFrames(driver, 600)
+    if (viewOf(b, 'card', 'A').zLifted || viewOf(b, 'card', 'B').zLifted) {
+      return { id, pass: false, detail: 'still z-lifted after settle — natural order must return' }
+    }
+    return { id, pass: true, detail: 'lead z-lifted mid-flight, everyone natural at settle' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkIdentityExitResume(): Row {
+  const id = 'L2 exit/resume: lead detach reverses the flight; releasable at settle'
+  try {
+    const { driver, b } = pairedMidFlight()
+    identityFrames(driver, 600) // settle the A→B flight first
+    b.detach('card', 'B') // the lead leaves — reverse flight to A begins; B rides exiting
+    identityFrames(driver, 6)
+    if (b.releasable('card', 'B')) {
+      return {
+        id,
+        pass: false,
+        detail: 'exiting holder releasable mid-flight — must wait for settle',
+      }
+    }
+    const midB = viewOf(b, 'card', 'B').opacity
+    if (midB <= 0 || midB >= 1) {
+      return {
+        id,
+        pass: false,
+        detail: `exiting holder opacity ${midB.toFixed(3)} mid-flight, want fading in (0,1)`,
+      }
+    }
+    if (!viewOf(b, 'card', 'A').zLifted) {
+      return { id, pass: false, detail: 'resumed lead not z-lifted during the reverse flight' }
+    }
+    identityFrames(driver, 600)
+    const endA = viewOf(b, 'card', 'A')
+    const resumedIdentity =
+      Math.abs(endA.transform.translateX) <= EPSILON_POS &&
+      Math.abs(endA.transform.scaleX - 1) <= EPSILON_SCALE
+    if (!b.releasable('card', 'B') || endA.opacity !== 1 || !resumedIdentity) {
+      return {
+        id,
+        pass: false,
+        detail: `settle: releasable=${String(b.releasable('card', 'B'))} A=${JSON.stringify(endA)}, want releasable + A identity/opacity 1`,
+      }
+    }
+    b.detach('card', 'B') // final removal of the exiting holder — must be accepted
+    return {
+      id,
+      pass: true,
+      detail:
+        'reverse flight ran (B fading, A lifted), B releasable at settle, final detach accepted',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkIdentityFailLoud(): Row {
+  const id = 'L2 fail-loud: malformed rects and non-holder ops throw typed errors'
+  try {
+    const { b } = identityRig()
+    b.attach('card', 'A', RECT_A)
+    let missing: unknown = null
+    try {
+      toWindowSpaceRect({ x: 0, y: 0, width: 64 } as Rect) // height missing
+    } catch (e) {
+      missing = e
+    }
+    const missingOk = missing instanceof Error && missing.message.includes('height')
+    // A non-holder lifecycle op must throw naming id + token — the registry error crosses back
+    // synchronously through the one-lane lifecycle crossing.
+    let nonHolder: unknown = null
+    try {
+      b.commitLayout('card', 'GHOST', RECT_B)
+    } catch (e) {
+      nonHolder = e
+    }
+    const nonHolderOk =
+      nonHolder instanceof Error &&
+      nonHolder.message.includes('card') &&
+      nonHolder.message.includes('GHOST')
+    let doubleAttach: unknown = null
+    try {
+      b.attach('card', 'A', RECT_A)
+    } catch (e) {
+      doubleAttach = e
+    }
+    const doubleOk = doubleAttach instanceof Error && doubleAttach.message.includes('already holds')
+    if (!missingOk || !nonHolderOk || !doubleOk) {
+      return {
+        id,
+        pass: false,
+        detail: `missing→${missing instanceof Error ? 'named' : 'no throw'}; nonHolder→${nonHolderOk ? 'named' : 'weak'}; double→${doubleOk ? 'named' : 'weak'}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail:
+        'missing height, non-holder commit, and double attach all throw naming id + operation',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkIdentityReleaseCoupling(): Row {
+  const id =
+    'L2 presence coupling: releasable gates the exit; already-releasable coupling fires once at registration'
+  try {
+    // The frame-carried safeToRemove delivery is asynchronous by design (the UI frame loop posts
+    // it via scheduleOnRN), so this synchronous row asserts the gate it rides — releasable stays
+    // false mid-flight and flips at settle — plus the two SYNCHRONOUS coupling legs below. The
+    // exactly-once delivery across trailing frames is pinned off-device by
+    // uiLayoutEngine.test.ts and live on-device by the identity-swap smoke's release counter.
+    const { driver, b } = pairedMidFlight()
+    identityFrames(driver, 600)
+    b.detach('card', 'B') // exit flight begins
+    const firings: true[] = []
+    const firedCount = (): number => firings.length
+    const uncouple = b.coupleRelease('card', 'B', () => {
+      firings.push(true)
+    })
+    identityFrames(driver, 6)
+    if (firedCount() !== 0 || b.releasable('card', 'B')) {
+      return {
+        id,
+        pass: false,
+        detail: `mid-flight: fired=${firedCount()} releasable=${String(b.releasable('card', 'B'))} — must wait for settle`,
+      }
+    }
+    uncouple() // unmount-before-settle path: an uncoupled callback must never fire
+    identityFrames(driver, 600)
+    if (!b.releasable('card', 'B')) {
+      return { id, pass: false, detail: 'exit flight settled but releasable stayed false' }
+    }
+    if (firedCount() !== 0) {
+      return {
+        id,
+        pass: false,
+        detail: `uncoupled callback fired ${firedCount()}× — uncouple must remove it`,
+      }
+    }
+    // Immediate-release frontier (review cycle 3 major 7): a coupling registered on an
+    // ALREADY-releasable holder must fire synchronously at registration — a stored coupling
+    // strands the callback when nothing schedules another frame.
+    const rig2 = identityRig()
+    rig2.b.attach('card', 'A', RECT_A)
+    rig2.b.attach('card', 'B', null) // mounting path — B never measures
+    rig2.b.detach('card', 'B') // reverted pairing: B is immediately releasable
+    const immediate: true[] = []
+    rig2.b.coupleRelease('card', 'B', () => {
+      immediate.push(true)
+    })
+    if (immediate.length !== 1) {
+      return {
+        id,
+        pass: false,
+        detail: `coupling on an already-releasable holder fired ${immediate.length}× at registration, want exactly 1`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail:
+        'releasable false mid-flight, true at settle; uncoupled callback silent; already-releasable coupling fires once at registration',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// ————— L3 rows (specs/L3-BUILD-PACKET.md §impl): the no-flash layout transition —————
+
+// The demo geometry for the transition rows (Reanimated LayoutAnimationValues shape).
+const L3_VALUES = {
+  currentOriginX: 8,
+  currentOriginY: 8,
+  currentWidth: 64,
+  currentHeight: 64,
+  targetOriginX: 208,
+  targetOriginY: 128,
+  targetWidth: 128,
+  targetHeight: 128,
+  windowWidth: 390,
+  windowHeight: 844,
+  currentGlobalOriginX: 8,
+  currentGlobalOriginY: 8,
+  targetGlobalOriginX: 208,
+  targetGlobalOriginY: 128,
+  currentBorderRadius: 0,
+  targetBorderRadius: 0,
+  boundsToWindow: 0,
+} as never
+
+function checkNoFlashInitialValues(): Row {
+  const id = 'L3 initialValues: first post-commit frame paints the OLD rect'
+  try {
+    const transition = createNoFlashLayoutTransition()
+    const result = transition!(L3_VALUES)
+    const iv = result.initialValues as Record<string, number>
+    const ok = iv.originX === 8 && iv.originY === 8 && iv.width === 64 && iv.height === 64
+    if (!ok) {
+      return {
+        id,
+        pass: false,
+        detail: `initialValues ${JSON.stringify(result.initialValues)}, want the CURRENT rect (8,8,64,64)`,
+      }
+    }
+    const anims = result.animations as Record<string, unknown>
+    const keys = ['originX', 'originY', 'width', 'height'].filter((k) => anims[k] !== undefined)
+    if (keys.length !== 4) {
+      return { id, pass: false, detail: `animations cover ${keys.length}/4 layout channels` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'initialValues = current rect exactly; all 4 channels animated',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkCoreTrajectoryParity(): Row {
+  const id = 'L3 trajectory: channel animation reproduces the core spring exactly'
+  try {
+    const spring = { stiffness: 550, damping: 45 }
+    const channel = buildCoreSpringChannel(208, spring)
+    // The host passes UNDEFINED (not null) when no previous animation exists — the first commit
+    // on-device crashed on a null-only guard (packet Findings); this row pins the real shape.
+    channel.onStart(channel, 8, 0, undefined)
+    // The reference: core's generator sampled at the same accumulated elapsed times.
+    const reference = resolveSpringGenerator(208, spring)({ from: 8, velocity: 0 })
+    let now = 0
+    for (let i = 1; i <= 60; i += 1) {
+      now += 16.67
+      channel.onFrame(channel, now)
+      const expected = reference.sample(now).value
+      if (channel.current !== expected) {
+        return {
+          id,
+          pass: false,
+          detail: `step ${i}: channel ${channel.current} vs core ${expected} — trajectories must be byte-equal (M2.1 parity law)`,
+        }
+      }
+    }
+    const finished = channel.onFrame(channel, (now += 16.67))
+    if (!finished && !reference.sample(now).done) {
+      return {
+        id,
+        pass: true,
+        detail: 'byte-equal through 60 frames (both still settling at this profile)',
+      }
+    }
+    return { id, pass: true, detail: 'byte-equal trajectory through 60 frames; done flags agree' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkRetargetCarry(): Row {
+  const id = 'L3 re-layout mid-flight: C1 velocity carries through retargetSpring'
+  try {
+    const spring = { stiffness: 550, damping: 45 }
+    const first = buildCoreSpringChannel(208, spring)
+    first.onStart(first, 8, 0, null)
+    let now = 0
+    for (let i = 1; i <= 6; i += 1) {
+      now += 16.67
+      first.onFrame(first, now)
+    }
+    const liveValue = first.current
+    // A new layout commit mid-flight: the next channel receives the live previous animation.
+    const second = buildCoreSpringChannel(120, spring)
+    second.onStart(second, liveValue, now, first)
+    now += 16.67
+    second.onFrame(second, now)
+    // C1: the first post-retarget step continues the motion (a rest-seeded spring from the same
+    // value would move a DIFFERENT amount in one frame than the velocity-carrying one).
+    const restSeeded = resolveSpringGenerator(120, spring)({ from: liveValue, velocity: 0 })
+    const restStep = restSeeded.sample(16.67).value
+    if (second.current === restStep) {
+      return {
+        id,
+        pass: false,
+        detail: `post-retarget step equals the rest-seeded spring (${restStep.toFixed(4)}) — velocity was zeroed, C1 broken`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: `velocity carried: post-retarget ${second.current.toFixed(2)} ≠ rest-seeded ${restStep.toFixed(2)}`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+export function LayoutChecksScreen() {
+  const rows: Row[] = [
+    checkFlipInversion(),
+    checkScaleLegs(),
+    checkRetargetC1(),
+    checkFailClosed(),
+    checkSettleDiscipline(),
+    checkMalformedRectGuard(),
+    checkIdentityRolesAndCoincidence(),
+    checkIdentityCrossfade(),
+    checkIdentityZLift(),
+    checkIdentityExitResume(),
+    checkIdentityFailLoud(),
+    checkIdentityReleaseCoupling(),
+    checkNoFlashInitialValues(),
+    checkCoreTrajectoryParity(),
+    checkRetargetCarry(),
+  ]
+  // The L2 rows' rigs are done reading shared values — free their UI-runtime records.
+  disposeIdentityRigs()
+  const allPass = rows.every((row) => row.pass)
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Layout checks — M2.5 + L2 + L3</Text>
+      <Text style={styles.subtitle}>
+        projection + layoutId identity + no-flash transition vs fake rects + a manual graph
+      </Text>
+      <View style={[styles.banner, allPass ? styles.pass : styles.fail]}>
+        <Text style={styles.bannerText}>{allPass ? 'PASS' : 'FAIL'}</Text>
+      </View>
+      {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 },
+  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 },
+})