@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/LayoutAnimationStartChecksScreen.tsx

@@ -0,0 +1,648 @@
+// U7e layout-animation-start device checks (the U7e packet's device floor): a NATIVE nested
+// layout card with the start/complete readouts on screen, witnessing live on device the
+// per-flight callback law the W2 web leg pinned against the raw pin (u7e-layout-animation-
+// start.e2e.ts — startAnimation's onPlay/onComplete, create-projection-node.ts:567-574):
+//
+//   - start fires ONCE per LOGICAL flight at flight creation (the host-layout worklet's UI
+//     commit edge; the public crossing is qualified per React layout-signature generation —
+//     the pin's didUpdate analogue — while the internal beginCombinedLayoutFlight reset still
+//     runs at every commit, F1), STRICTLY BEFORE that flight's
+//     complete (the JS-thread FIFO read: both callbacks land via the same scheduleOnRN
+//     crossing, so JS receipt order is the law);
+//   - a mid-flight retarget fires start AGAIN for the new flight and the interrupted flight
+//     NEVER completes (the pin stops the in-flight animation first — stop never fires
+//     complete), so start count > complete count across the interruption and complete catches
+//     up only for the final settled flight;
+//   - a mount with no layout change fires neither callback.
+//
+// The subject mirrors the pinned catalog Animation-layout-nested-position.tsx (read-only
+// reference, ../motion/dev/react/src/examples/): the three-deep `layout` tree (parent → child
+// → grandchild animating on parent size-delta propagation) on the verbatim 3s circIn tween,
+// useCycle(true, false) toggling open/closed, callbacks on the PARENT. Recorded adaptations
+// (the U7d/U7e-W2 pattern): geometry halved (400/200/150 → 200/100/75, left 400 → 200) to fit
+// the screen, the catalog's onClick-on-parent becomes an explicit toggle button (the on-screen
+// control; a mid-flight press IS the retarget trigger), and the console.log callbacks become
+// count + mount-relative-stamp latches — the same signal a screenshot reads.
+//
+// The screen SELF-DRIVES (the iOS simulator has no tap injection): after a mount-quiet dwell
+// the timeline presses once (flight A), awaits its settle with a fail-closed poll, then fires
+// the retarget pair (flight B, then flight C 150ms after B's start is observed — waiting for
+// the start first avoids the pendingAnimation frame race, the W2 discipline). Four rows:
+//
+//   1. MOUNT QUIET — zero starts and zero completes across the boot dwell (a mount-snap
+//      miswire treating the initial measure as a qualifying commit fails here).
+//   2. ONE FLIGHT — exactly one start and one complete for flight A; the start stamp follows
+//      the press stamp inside a bounded window (start fires at flight CREATION, not at the
+//      first frame or the settle) and strictly precedes the complete; the complete lands a
+//      full 3s-tween class after the start (a settle-deferred start reads complete − start ≈
+//      0 and fails the floor; a per-frame start miswire fails starts === 1).
+//   3. RETARGET — across flights B and C: starts reaches 3 while completes holds at 1 (the
+//      latched gap: B interrupted + C in flight), then C's settle brings completes to exactly
+//      2 = starts − 1 (B's complete NEVER arrives, verified across a post-settle stability
+//      dwell), with C's complete strictly after C's start and a full 3s class after it (a
+//      retarget continuing B's clock completes early and fails the floor).
+//   4. CLEAN RUN — zero refusal reports through the console tap (the U5/U7c pattern:
+//      console.error is the severity law's production error channel) across the whole
+//      timeline.
+//
+// A screenshot is the assertion; every stamp is mount-relative Date.now() at JS receipt, and
+// every wait is a fail-closed poll with a loud deadline — a dropped callback is a timeout,
+// never a silent skip. The console tap is evidence capture, never suppression.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { useCycle } from '../../native/motion/useCycle'
+
+const ROW_MOUNT = 'mount quiet: no layout change fires neither start nor complete'
+const ROW_FLIGHT = 'one flight: start fires exactly once, strictly before its complete (3s class)'
+const ROW_RETARGET = 'mid-flight retarget: start re-fires, the stopped flight never completes'
+const ROW_CLEAN = 'clean run: zero refusal reports through the console tap'
+const ROWS = [ROW_MOUNT, ROW_FLIGHT, ROW_RETARGET, ROW_CLEAN] as const
+
+// The catalog's transition verbatim (Animation-layout-nested-position.tsx:6).
+const TRANSITION = { duration: 3, ease: 'circIn' } as const
+
+// Row 2 bounds (ms): the start stamp must follow its press stamp (JS FIFO) inside a bounded
+// window — the pin's web witness reads 3–5ms against a ~50ms Cypress witness; the native
+// start crosses UI → JS at the commit edge, so the bound carries generous delivery slack
+// while still failing a settle-deferred start (~3000ms late) loud. The flight floor is the
+// W2 leg's verbatim: the 3s tween must run its course (> 2000); a settle-deferred start reads
+// complete − start ≈ 0.
+const START_LATENCY_BOUND_MS = 1000
+const FLIGHT_FLOOR_MS = 2000
+// Row 3's retarget spacing: flight C's press lands 150ms after flight B's START is observed
+// (waiting for the start first avoids the pendingAnimation frame race — a retarget inside it
+// would replace the pending flight and fire start only once, a fixture race, not the law).
+const RETARGET_DELAY_MS = 150
+// Post-settle stability dwell: a miswired late complete (a stop-fires-complete for the
+// interrupted flight) flushes well inside this absence window.
+const STABILITY_MS = 600
+
+// Fail-closed deadlines (ms post-arm): a callback that never fires is a loud timeout, never
+// a silent skip. The settle deadline comfortably covers the 3s tween plus delivery.
+const START_DEADLINE_MS = 6000
+const SETTLE_DEADLINE_MS = 12000
+
+// Timeline: the mount-quiet dwell doubles as row 1's absence window (2000ms is many times
+// every observed start latency); flight A's press fires at its end. Every later step is
+// chained off fail-closed polls, never fixed sleeps.
+const T_TRIGGER_A = 2000
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+// The latched readouts (the W2 fixture's data attributes, mirrored at native altitude):
+// counts plus mount-relative stamps (-1 = not yet). JS receipt order is the ordering law.
+interface Latches {
+  presses: number
+  starts: number
+  completes: number
+  firstPressAt: number
+  lastPressAt: number
+  firstStartAt: number
+  lastStartAt: number
+  lastCompleteAt: number
+  startAts: number[]
+}
+
+const freshLatches = (): Latches => ({
+  presses: 0,
+  starts: 0,
+  completes: 0,
+  firstPressAt: -1,
+  lastPressAt: -1,
+  firstStartAt: -1,
+  lastStartAt: -1,
+  lastCompleteAt: -1,
+  startAts: [],
+})
+
+// Latch rendering: mount-relative stamp, — while unfired.
+const stamp = (at: number): string => (at === -1 ? '—' : `+${at.toFixed(0)}ms`)
+
+export function LayoutAnimationStartChecksScreen() {
+  const severity = ambientNativeSeverity()
+
+  const [isOpen, toggleIsOpen] = useCycle(true, false)
+  const [stage, setStage] = useState('boot: mount-quiet dwell (open tree, no layout change)')
+  const [live, setLive] = useState<Latches>(freshLatches())
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+
+  const mountStampRef = useRef(Date.now())
+  const latchesRef = useRef<Latches | null>(null)
+  if (latchesRef.current === null) latchesRef.current = freshLatches()
+
+  // Row 3's evidence: starts − completes latched at flight C's start (expect 2 — flight B
+  // interrupted + flight C in flight).
+  const retargetGapRef = useRef(-1)
+
+  const rafsRef = useRef<ReturnType<typeof requestAnimationFrame>[]>([])
+  const reportsRef = useRef<string[]>([])
+
+  const trackRaf = (id: ReturnType<typeof requestAnimationFrame>): void => {
+    rafsRef.current.push(id)
+  }
+
+  const now = useCallback((): number => Date.now() - mountStampRef.current, [])
+
+  const publish = useCallback((): void => {
+    setLive({ ...latchesRef.current! })
+  }, [])
+
+  // The toggle IS the retarget trigger: the on-screen control and the auto timeline share it.
+  const press = useCallback((): void => {
+    const latches = latchesRef.current!
+    const at = now()
+    latches.presses += 1
+    if (latches.firstPressAt === -1) latches.firstPressAt = at
+    latches.lastPressAt = at
+    publish()
+    toggleIsOpen()
+  }, [now, publish, toggleIsOpen])
+
+  const onStart = useCallback((): void => {
+    const latches = latchesRef.current!
+    const at = now()
+    latches.starts += 1
+    if (latches.firstStartAt === -1) latches.firstStartAt = at
+    latches.lastStartAt = at
+    latches.startAts = [...latches.startAts, at]
+    publish()
+  }, [now, publish])
+
+  const onComplete = useCallback((): void => {
+    const latches = latchesRef.current!
+    latches.completes += 1
+    latches.lastCompleteAt = now()
+    publish()
+  }, [now, publish])
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    const latches = latchesRef.current!
+
+    // The production error channel tap (the U5/U7c pattern): refusal reports ride
+    // consoleReporter → console.error. Installed for this screen's lifetime only; everything
+    // passes through.
+    const originalError = console.error
+    console.error = (...args: unknown[]) => {
+      for (const arg of args) {
+        const message = arg instanceof Error ? arg.message : typeof arg === 'string' ? arg : null
+        if (message !== null && /motion/i.test(message)) reportsRef.current.push(message)
+      }
+      originalError(...args)
+    }
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // Fail-closed observation primitive: poll per rAF until the condition holds or the
+    // deadline passes. `onResolve` fires exactly once with ok=false on the deadline.
+    const pollUntil = (
+      condition: () => boolean,
+      deadlineAt: number,
+      onResolve: (ok: boolean) => void,
+    ): void => {
+      const step = (): void => {
+        if (condition()) {
+          onResolve(true)
+          return
+        }
+        if (now() >= deadlineAt) {
+          onResolve(false)
+          return
+        }
+        trackRaf(requestAnimationFrame(step))
+      }
+      trackRaf(requestAnimationFrame(step))
+    }
+
+    // 4. CLEAN RUN + terminal stage, scheduled by whichever chain end lands last.
+    const finish = (): void => {
+      at(STABILITY_MS, () => {
+        const reports = reportsRef.current
+        finalize(
+          ROW_CLEAN,
+          reports.length === 0,
+          reports.length === 0
+            ? `0 refusal reports through the console tap across ${now().toFixed(0)}ms of ` +
+                'the mount dwell, flight A, and the B/C retarget pair'
+            : `${reports.length} report(s): ${reports
+                .map((message) => `"${message.slice(0, 80)}…"`)
+                .join(' | ')}`,
+        )
+        setStage('done')
+      })
+    }
+
+    const countsLine = (): string =>
+      `presses ${latches.presses} · starts ${latches.starts} · completes ${latches.completes}`
+
+    // 3. RETARGET — flight B, then flight C RETARGET_DELAY_MS after B's start is observed.
+    //    Finalizes after C's settle plus the stability dwell: starts 3, completes EXACTLY 2
+    //    (B's complete never arrives), the latched gap 2, C's complete strictly after C's
+    //    start and a full 3s class after it.
+    const runRetargetPhase = (): void => {
+      setStage('flight A settled — pressing flight B (the retarget source)')
+      press()
+      pollUntil(
+        () => latches.starts >= 2,
+        now() + START_DEADLINE_MS,
+        (okB) => {
+          if (!okB) {
+            finalize(
+              ROW_RETARGET,
+              false,
+              `flight B's start never fired within the ${START_DEADLINE_MS}ms deadline ` +
+                `(${countsLine()}) — the per-flight law is unwitnessable (a start-once-per-` +
+                'component miswire leaves starts at 1)',
+            )
+            setStage('retarget row finalized (FAIL)')
+            finish()
+            return
+          }
+          at(RETARGET_DELAY_MS, () => {
+            setStage('flight B in flight — pressing flight C (the mid-flight retarget)')
+            press()
+            pollUntil(
+              () => latches.starts >= 3,
+              now() + START_DEADLINE_MS,
+              (okC) => {
+                if (!okC) {
+                  finalize(
+                    ROW_RETARGET,
+                    false,
+                    `flight C's start never fired within the ${START_DEADLINE_MS}ms deadline ` +
+                      `(${countsLine()}) — the retarget did not start a new flight`,
+                  )
+                  setStage('retarget row finalized (FAIL)')
+                  finish()
+                  return
+                }
+                retargetGapRef.current = latches.starts - latches.completes
+                setStage(
+                  `flight C in flight (starts − completes = ${retargetGapRef.current}: ` +
+                    'B interrupted + C in flight) — awaiting its settle',
+                )
+                pollUntil(
+                  () => latches.completes >= 2,
+                  now() + SETTLE_DEADLINE_MS,
+                  (okSettle) => {
+                    if (!okSettle) {
+                      finalize(
+                        ROW_RETARGET,
+                        false,
+                        `flight C never completed within the ${SETTLE_DEADLINE_MS}ms deadline ` +
+                          `(${countsLine()}) — the retargeted flight never settled`,
+                      )
+                      setStage('retarget row finalized (FAIL)')
+                      finish()
+                      return
+                    }
+                    // The stability dwell: a stop-fires-complete miswire for the interrupted
+                    // flight B flushes a THIRD complete inside this window.
+                    at(STABILITY_MS, () => {
+                      const gap = retargetGapRef.current
+                      const flightC = latches.lastCompleteAt - latches.lastStartAt
+                      let bad: string | null = null
+                      if (latches.starts !== 3 || latches.completes !== 2) {
+                        bad =
+                          `post-settle counts read ${countsLine()}, want starts 3 / completes ` +
+                          '2 — ' +
+                          (latches.completes > 2
+                            ? "the interrupted flight B's complete FIRED (a stop()-fires-" +
+                              'complete miswire; the pin stops the in-flight animation first ' +
+                              'and stop never fires complete)'
+                            : 'a flight fired start without ever completing or a start was ' +
+                              'dropped')
+                      } else if (gap !== 2) {
+                        bad =
+                          `the interruption gap latched ${gap}, want 2 (B interrupted + C in ` +
+                          'flight while completes held at 1) — start count never led complete ' +
+                          'count across the retarget'
+                      } else if (latches.lastCompleteAt <= latches.lastStartAt) {
+                        bad =
+                          `flight C's complete (${latches.lastCompleteAt.toFixed(0)}ms) did ` +
+                          `not strictly follow its start (${latches.lastStartAt.toFixed(0)}ms)`
+                      } else if (flightC <= FLIGHT_FLOOR_MS) {
+                        bad =
+                          `flight C ran ${flightC.toFixed(0)}ms (floor ${FLIGHT_FLOOR_MS}ms) — ` +
+                          "the retarget continued flight B's clock instead of starting a " +
+                          'fresh 3s tween'
+                      }
+                      finalize(
+                        ROW_RETARGET,
+                        bad === null,
+                        bad ??
+                          `two flights, two fresh starts: starts 3 / completes 2 = starts − 1 ` +
+                            `(the interrupted flight B never completed, stable across a ` +
+                            `${STABILITY_MS}ms post-settle dwell); the gap latched 2 at C's ` +
+                            `start; C's start +${latches.lastStartAt.toFixed(0)}ms strictly ` +
+                            `precedes its complete +${latches.lastCompleteAt.toFixed(0)}ms, a ` +
+                            `${flightC.toFixed(0)}ms flight (floor ${FLIGHT_FLOOR_MS}ms — a ` +
+                            'FRESH 3s tween, not B’s clock)',
+                      )
+                      setStage('retarget row finalized')
+                      finish()
+                    })
+                  },
+                )
+              },
+            )
+          })
+        },
+      )
+    }
+
+    // THE TRIGGER — row 1 finalizes on the dwell's evidence, then flight A's press fires and
+    // row 2 awaits its settle with a fail-closed poll.
+    at(T_TRIGGER_A, () => {
+      finalize(
+        ROW_MOUNT,
+        latches.starts === 0 && latches.completes === 0,
+        latches.starts === 0 && latches.completes === 0
+          ? `0 starts, 0 completes across the ${T_TRIGGER_A}ms boot dwell with the open tree ` +
+              'mounted — the initial measure never qualified as a layout flight'
+          : `mount fired ${latches.starts} start(s) / ${latches.completes} complete(s) with ` +
+              'no layout change — the initial measure was treated as a qualifying commit ' +
+              '(the mount-snap miswire)',
+      )
+      setStage('mount-quiet row finalized — pressing flight A (open → closed)')
+      const pressAAt = now()
+      press()
+      // A failed flight A leaves the retarget sequence unwitnessable — fail the row loud,
+      // never leave it pending (a pending row holds the banner at RUNNING forever).
+      const failRetargetUnwitnessable = (why: string): void => {
+        finalize(ROW_RETARGET, false, `unwitnessable — ${why}`)
+      }
+      pollUntil(
+        () => latches.starts >= 1,
+        now() + START_DEADLINE_MS,
+        (okStart) => {
+          if (!okStart) {
+            const why =
+              `flight A's start never fired within the ${START_DEADLINE_MS}ms deadline ` +
+              `(${countsLine()}) — the pre-W1 class (the prop leaking to the host, never ` +
+              'composed at the commit edge)'
+            finalize(ROW_FLIGHT, false, why)
+            failRetargetUnwitnessable(why)
+            setStage('flight row finalized (FAIL)')
+            finish()
+            return
+          }
+          pollUntil(
+            () => latches.completes >= 1,
+            now() + SETTLE_DEADLINE_MS,
+            (okSettle) => {
+              if (!okSettle) {
+                const why =
+                  `flight A never completed within the ${SETTLE_DEADLINE_MS}ms deadline ` +
+                  `(${countsLine()}) — the flight never settled`
+                finalize(ROW_FLIGHT, false, why)
+                failRetargetUnwitnessable(why)
+                setStage('flight row finalized (FAIL)')
+                finish()
+                return
+              }
+              const startAt = latches.firstStartAt
+              const completeAt = latches.lastCompleteAt
+              const startLatency = startAt - pressAAt
+              const flightMs = completeAt - startAt
+              let bad: string | null = null
+              if (latches.starts !== 1 || latches.completes !== 1) {
+                bad =
+                  `one flight latched ${countsLine()}, want starts 1 / completes 1 — a ` +
+                  'per-frame or re-fire-at-settle start miswire inflates starts'
+              } else if (startLatency < 0) {
+                bad =
+                  `the start stamp (${startAt.toFixed(0)}ms) PRECEDES its press stamp ` +
+                  `(${pressAAt.toFixed(0)}ms) — impossible on the JS thread's FIFO`
+              } else if (startLatency >= START_LATENCY_BOUND_MS) {
+                bad =
+                  `start fired ${startLatency.toFixed(0)}ms after the press (bound ` +
+                  `${START_LATENCY_BOUND_MS}ms) — start must fire at flight CREATION (the ` +
+                  'commit edge), not at the first frame or the settle (~3000ms late)'
+              } else if (completeAt <= startAt) {
+                bad =
+                  `complete (${completeAt.toFixed(0)}ms) did not strictly follow start ` +
+                  `(${startAt.toFixed(0)}ms) — start must precede its own flight's complete`
+              } else if (flightMs <= FLIGHT_FLOOR_MS) {
+                bad =
+                  `the flight ran ${flightMs.toFixed(0)}ms (floor ${FLIGHT_FLOOR_MS}ms) — the ` +
+                  '3s circIn tween did not run its course (a settle-deferred start reads ' +
+                  'complete − start ≈ 0)'
+              }
+              finalize(
+                ROW_FLIGHT,
+                bad === null,
+                bad ??
+                  `flight A: exactly one start (+${startAt.toFixed(0)}ms, ` +
+                    `${startLatency.toFixed(0)}ms after the press — flight creation, bound ` +
+                    `${START_LATENCY_BOUND_MS}ms) STRICTLY BEFORE its one complete (` +
+                    `+${completeAt.toFixed(0)}ms), a ${flightMs.toFixed(0)}ms flight (floor ` +
+                    `${FLIGHT_FLOOR_MS}ms — the 3s circIn tween ran its course)`,
+              )
+              setStage('flight row finalized')
+              runRetargetPhase()
+            },
+          )
+        },
+      )
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      for (const raf of rafsRef.current) cancelAnimationFrame(raf)
+      console.error = originalError
+    }
+    // All captured values are refs or stable callbacks; the timeline runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  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 (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>U7e layout-animation-start checks</Text>
+      <Text style={styles.subtitle}>
+        the catalog nested-position tree witnesses per-flight start/complete ({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>
+      <Text style={styles.status}>
+        u7e stage: {stage} · presses={live.presses} starts={live.starts} completes=
+        {live.completes}
+      </Text>
+      <Text style={styles.status}>
+        press {stamp(live.firstPressAt)}/{stamp(live.lastPressAt)} · start{' '}
+        {stamp(live.firstStartAt)}/{stamp(live.lastStartAt)} · complete {stamp(live.lastCompleteAt)}
+      </Text>
+      <Text style={styles.status} accessibilityLabel="u7e-layout-start-stamps">
+        starts@[{live.startAts.map((at) => `+${at.toFixed(0)}`).join(',')}]
+      </Text>
+
+      {/* The on-screen control (the catalog's onClick-on-parent, made explicit): a mid-flight
+          press IS the retarget trigger. The auto timeline drives the same press for the
+          hands-free proof. */}
+      <Pressable style={styles.button} accessibilityLabel="u7e-layout-start-toggle" onPress={press}>
+        <Text style={styles.buttonText}>TOGGLE LAYOUT (a mid-flight press retargets)</Text>
+      </Pressable>
+
+      {/* The catalog's three-deep `layout` tree, geometry halved (the W2 card's adaptation):
+          parent 200↔100 at left 200↔0, child 75, grandchild 30% tall at 50%↔100% wide — the
+          grandchildren animate on parent size-delta propagation. Callbacks on the PARENT,
+          verbatim. The parent is white-on-dark (the catalog reads white-on-white; the screen
+          is dark), the blue child and red/yellow grandchild carry the visual. */}
+      <View style={styles.stage} accessibilityLabel="u7e-layout-start-stage">
+        <MotionView
+          layout
+          transition={TRANSITION}
+          onLayoutAnimationStart={onStart}
+          onLayoutAnimationComplete={onComplete}
+          style={[styles.parent, isOpen ? styles.parentOpen : styles.parentClosed]}
+          accessibilityLabel="u7e-layout-start-parent"
+        >
+          <MotionView
+            layout
+            transition={TRANSITION}
+            style={[styles.child, isOpen ? styles.childOpen : styles.childClosed]}
+            accessibilityLabel="u7e-layout-start-child"
+          >
+            <MotionView
+              layout
+              transition={TRANSITION}
+              style={[styles.grandchild, isOpen ? styles.grandchildOpen : styles.grandchildClosed]}
+              accessibilityLabel="u7e-layout-start-grandchild"
+            />
+          </MotionView>
+        </MotionView>
+      </View>
+
+      {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={4}>
+                {row === undefined ? 'pending' : row.detail}
+              </Text>
+            </View>
+          </View>
+        )
+      })}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 8 },
+  title: { color: '#fff', fontSize: 22, fontWeight: '700', textAlign: 'center' },
+  subtitle: { color: '#8a8aa0', fontSize: 12, marginTop: 6, textAlign: 'center' },
+  banner: {
+    alignSelf: 'center',
+    paddingHorizontal: 36,
+    paddingVertical: 10,
+    borderRadius: 10,
+    marginTop: 18,
+    marginBottom: 10,
+  },
+  pass: { backgroundColor: '#1d7a3e' },
+  fail: { backgroundColor: '#a32633' },
+  running: { backgroundColor: '#7a641d' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  tally: { color: '#e6e6f0', fontSize: 14, fontWeight: '700', textAlign: 'center' },
+  tallyDetail: { color: '#f87171', fontSize: 11, marginTop: 3, textAlign: 'center' },
+  status: {
+    color: '#c9c9d8',
+    fontSize: 11,
+    marginTop: 8,
+    textAlign: 'center',
+    fontFamily: 'Menlo',
+  },
+  button: {
+    alignSelf: 'center',
+    marginTop: 14,
+    backgroundColor: '#1f2a44',
+    borderRadius: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  buttonText: { color: '#e6e6f0', fontSize: 12, fontWeight: '700', letterSpacing: 0.5 },
+  // The stage holds the open parent (200px at left 200 within the ~360px column) with room
+  // to spare; the parent is absolutely positioned inside it like the catalog's fixed stage.
+  stage: { height: 220, marginTop: 14 },
+  parent: {
+    position: 'absolute',
+    top: 0,
+    backgroundColor: '#e6e6f0',
+    display: 'flex',
+  },
+  parentOpen: {
+    width: 200,
+    height: 200,
+    left: 200,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+  },
+  parentClosed: {
+    width: 100,
+    height: 100,
+    left: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  child: { width: 75, height: 75, backgroundColor: '#3b82f6', display: 'flex' },
+  childOpen: { alignItems: 'center', justifyContent: 'center' },
+  childClosed: { alignItems: 'flex-start', justifyContent: 'flex-start' },
+  grandchild: { height: '30%' },
+  grandchildOpen: { width: '50%', backgroundColor: '#eab308' },
+  grandchildClosed: { width: '100%', backgroundColor: '#dc2626' },
+  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 },
+})