@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/SharedLayoutContinuityChecksScreen.tsx

@@ -0,0 +1,338 @@
+// U6 continuity device checks (REQ-VALUETYPE-013(f) — the packet dissolved into it at the U6
+// terminal): the PUBLIC catalog Shared-layout-continuity.tsx shape on device — a layoutId="u6-box"
+// box keyed `shape-${count}` cycling the pin's styles table, where styles[2] is the pin-verbatim
+// calc seed `{ width: 100, height: 100, left: 'calc(100vw - 100px)' }` and styles[1] is a plain
+// px position, flying on the pin's authored 3s transition. Three claims, self-driven:
+//
+//   1. FIRST MOUNT ON THE CALC SHAPE — the box boots on styles[2]; its host-measured window x is
+//      viewportWidth − 100 (±2). The pre-U6 defect: Yoga silently dropped the calc string and the
+//      box laid out at x≈0/auto — half a viewport away from the asserted band. settles must be 0:
+//      the seed is a static-style layout, not an animation.
+//   2. KEYED REMOUNT FLIGHT — cycling 2 → 1 remounts the box (no AnimatePresence on this card:
+//      the old key unmounts instantly, the exclusive-handoff flies the successor). Sampled at a
+//      stamped ~1.4s into the 3s flight the measured x sits STRICTLY between origin and target (a
+//      snap fails betweenness); a second sample 400ms later has moved (an unstarted flight fails);
+//      the settle lands at left:100 exactly (a wrong duration class never arrives in time).
+//   3. THE CALC TARGET LEG — cycling 1 → 2 makes the calc shape the flight DESTINATION: the
+//      projection measures the resolved rect exactly as the pin measures browser-resolved px, and
+//      the settle lands at viewportWidth − 100 measured on the host.
+//
+// Readback honesty: every position is measureInWindow against the host (the value the substrate
+// actually paints, flight transform included). The stage is full-bleed (stage left = window x 0,
+// width = vw) so the viewport-resolved seed reads directly in window coordinates. A screenshot is
+// the assertion; try/catch is evidence capture, never suppression.
+
+import { useEffect, useRef, useState, type ComponentRef } from 'react'
+import { Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView, type MotionViewStyle } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+
+// The pin's styles table verbatim (Shared-layout-continuity.tsx:69-89); the card cycles 2 → 1 → 2.
+// The pin's animate-table background colors ride as statics so the swap reads on the capture.
+const SHAPE_STYLES: readonly MotionViewStyle[] = [
+  { width: 100, height: 100, top: 100 },
+  { width: 200, height: 200, left: 100 },
+  { width: 100, height: 100, left: 'calc(100vw - 100px)' },
+  { width: 200, height: 200 },
+]
+const SHAPE_COLORS = ['#09f', '#90f', '#f09', '#9f0'] as const
+const CALC_SHAPE = 2
+const PX_SHAPE = 1
+const PX_TARGET_X = 100
+
+const ROW_MOUNT = 'first mount ON the calc shape: host x = vw − 100 (±2), no flight'
+const ROW_FLIGHT = 'keyed remount flight: mid-flight between + moving, settles at left:100'
+const ROW_CALC_TARGET = 'calc TARGET leg: remount onto the calc shape settles at vw − 100'
+const ROW_ORDER = [ROW_MOUNT, ROW_FLIGHT, ROW_CALC_TARGET] as const
+
+// Timeline (ms). Dwells make every staged state capturable: the boot frame holds the calc shape
+// (0–1600), the mid-flight window is ~3000–3400, the settled px shape dwells 5100–5700, and the
+// final verdict holds from ~9500 on.
+const T_MOUNT = 1200
+const T_CYCLE_1 = 1600
+const T_MID_1 = 3000
+const T_MID_2 = 3400
+const T_SETTLE_1 = 5100
+const T_CYCLE_2 = 5700
+const T_SETTLE_2 = 9200
+const T_DONE = 9500
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+function ContinuityChecks() {
+  const severity = ambientNativeSeverity()
+  const [count, setCount] = useState(CALC_SHAPE)
+  const [stage, setStage] = useState('boot: first mount ON the calc shape (styles[2])')
+  const [liveX, setLiveX] = useState('—')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROW_ORDER)[number], RowResult>>>({})
+
+  const boxRef = useRef<ComponentRef<typeof MotionView> | null>(null)
+  const vwRef = useRef(Dimensions.get('window').width)
+  const cycleStampRef = useRef(0)
+  const settleLatenciesRef = useRef<number[]>([])
+  const mid1Ref = useRef<{ x: number; at: number } | null>(null)
+  const mid2Ref = useRef<{ x: number; at: number } | null>(null)
+
+  const finalize = (id: (typeof ROW_ORDER)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    const vw = vwRef.current
+    const calcX = vw - 100
+    const measureBox = (done: (x: number | null) => void): void => {
+      const node = boxRef.current
+      if (node === null) {
+        done(null)
+        return
+      }
+      node.measureInWindow((x, _y, width) => done(width > 0 ? x : null))
+    }
+    const fmt = (x: number | null): string => (x === null ? 'unavailable' : x.toFixed(1))
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // 1. FIRST MOUNT — the calc seed must be resolved to px BEFORE Yoga ever sees the style.
+    at(T_MOUNT, () => {
+      measureBox((x) => {
+        setLiveX(fmt(x))
+        const settles = settleLatenciesRef.current.length
+        const pass = x !== null && Math.abs(x - calcX) <= 2 && settles === 0
+        finalize(
+          ROW_MOUNT,
+          pass,
+          `measured x=${fmt(x)}, vw=${vw.toFixed(0)} (want ${calcX.toFixed(0)}±2); settles=${settles} ` +
+            '(a silent Yoga drop lays out at x≈0; an entrance animation fires a settle)',
+        )
+        setStage('first mount measured — cycling to the plain px shape')
+      })
+    })
+
+    // 2. KEYED REMOUNT FLIGHT — calc shape → styles[1] (left:100, 200×200) on the authored 3s.
+    at(T_CYCLE_1, () => {
+      cycleStampRef.current = Date.now()
+      setCount(PX_SHAPE)
+      setStage('flight 1: calc shape → left:100 (keyed remount, 3s tween)')
+    })
+    at(T_MID_1, () => {
+      measureBox((x) => {
+        if (x !== null) mid1Ref.current = { x, at: Date.now() - cycleStampRef.current }
+        setLiveX(fmt(x))
+        setStage('flight 1 mid-flight — first sample stamped')
+      })
+    })
+    at(T_MID_2, () => {
+      measureBox((x) => {
+        if (x !== null) mid2Ref.current = { x, at: Date.now() - cycleStampRef.current }
+        setLiveX(fmt(x))
+        setStage('flight 1 mid-flight — second sample stamped')
+      })
+    })
+    at(T_SETTLE_1, () => {
+      measureBox((settled) => {
+        setLiveX(fmt(settled))
+        const mid1 = mid1Ref.current
+        const mid2 = mid2Ref.current
+        let bad: string | null = null
+        if (mid1 === null || mid2 === null) {
+          bad = 'a mid-flight sample never measured (the box was not mounted mid-flight)'
+        } else {
+          // The flight runs origin (vw − 100) → target (100): strictly between with 15px
+          // floors, then still moving 400ms later, then exactly on the target at settle.
+          if (!(mid1.x < calcX - 15 && mid1.x > PX_TARGET_X + 15)) {
+            bad = `mid-flight sample x=${mid1.x.toFixed(1)} not strictly between ${PX_TARGET_X} and ${calcX.toFixed(0)} (a snap fails one side)`
+          } else if (!(mid2.x < mid1.x - 2)) {
+            bad = `the box did not move between the samples (${mid1.x.toFixed(1)} → ${mid2.x.toFixed(1)}) — the flight never started`
+          } else if (settled === null || Math.abs(settled - PX_TARGET_X) > 2) {
+            bad = `settled x=${fmt(settled)}, want ${PX_TARGET_X}±2`
+          }
+        }
+        const latency = settleLatenciesRef.current[0]
+        finalize(
+          ROW_FLIGHT,
+          bad === null,
+          bad ??
+            `mid1 x=${mid1!.x.toFixed(1)} @+${(mid1!.at / 1000).toFixed(2)}s, mid2 x=${mid2!.x.toFixed(1)} ` +
+              `@+${(mid2!.at / 1000).toFixed(2)}s (moved ${(mid1!.x - mid2!.x).toFixed(1)}), settled x=${fmt(settled)}` +
+              (latency === undefined
+                ? ''
+                : `; settle callback at +${(latency / 1000).toFixed(2)}s (3s class)`),
+        )
+        setStage('flight 1 settled at left:100 — dwelling for the capture')
+      })
+    })
+
+    // 3. THE CALC TARGET LEG — the flight destination is the calc shape itself.
+    at(T_CYCLE_2, () => {
+      cycleStampRef.current = Date.now()
+      setCount(CALC_SHAPE)
+      setStage('flight 2: left:100 → calc(100vw - 100px) TARGET (keyed remount, 3s tween)')
+    })
+    at(T_SETTLE_2, () => {
+      measureBox((x) => {
+        setLiveX(fmt(x))
+        const pass = x !== null && Math.abs(x - calcX) <= 2
+        const latency = settleLatenciesRef.current[1]
+        finalize(
+          ROW_CALC_TARGET,
+          pass,
+          (pass
+            ? `settled x=${fmt(x)}, vw=${vw.toFixed(0)} (want ${calcX.toFixed(0)}±2) — the projection measured the resolved calc rect`
+            : `settled x=${fmt(x)}, want ${calcX.toFixed(0)}±2 (a dropped calc seed at the target lays out at x≈0)`) +
+            (latency === undefined ? '' : `; settle callback at +${(latency / 1000).toFixed(2)}s`),
+        )
+        setStage('flight 2 settled on the calc shape')
+      })
+    })
+    at(T_DONE, () => setStage('done'))
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+    }
+    // All captured values are refs or stable setters; the timeline runs once per mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const done = ROW_ORDER.every((id) => rows[id] !== undefined)
+  const failing = ROW_ORDER.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}>
+      <View style={styles.padded}>
+        <Text style={styles.title}>U6 shared-layout continuity checks</Text>
+        <Text style={styles.subtitle}>
+          layoutId=&quot;u6-box&quot; keyed remount, calc-seeded static style ({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 ${ROW_ORDER.length} rows`
+            : `${Object.keys(rows).length}/${ROW_ORDER.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}>
+          stage: {stage} · count={count} · measured x={liveX} · vw={vwRef.current.toFixed(0)}
+        </Text>
+      </View>
+
+      {/* The full-bleed stage: stage left = window x 0 and width = vw, so the viewport-resolved
+          calc seed reads directly in window coordinates. */}
+      <View style={styles.stage} accessibilityLabel="u6-continuity-stage">
+        <MotionRoot>
+          <MotionView
+            key={`shape-${count}`}
+            layoutId="u6-box"
+            ref={boxRef}
+            transition={{ duration: 3 }}
+            onLayoutAnimationComplete={() => {
+              settleLatenciesRef.current.push(Date.now() - cycleStampRef.current)
+            }}
+            style={[styles.box, SHAPE_STYLES[count], { backgroundColor: SHAPE_COLORS[count]! }]}
+            accessibilityLabel={`u6-continuity-shape-${count}`}
+          />
+        </MotionRoot>
+      </View>
+
+      <View style={styles.padded}>
+        {ROW_ORDER.map((id) => {
+          const row = rows[id]
+          return (
+            <View key={id} style={styles.row}>
+              <Text
+                style={[
+                  styles.verdict,
+                  row === undefined ? styles.pending : row.pass ? styles.ok : styles.bad,
+                ]}
+              >
+                {row === undefined ? '…' : row.pass ? 'PASS' : 'FAIL'}
+              </Text>
+              <View style={styles.rowBody}>
+                <Text style={styles.rowId}>{id}</Text>
+                <Text style={styles.rowDetail} numberOfLines={3}>
+                  {row === undefined ? 'pending' : row.detail}
+                </Text>
+              </View>
+            </View>
+          )
+        })}
+      </View>
+    </ScrollView>
+  )
+}
+
+export function SharedLayoutContinuityChecksScreen() {
+  // layoutId requires a MotionRoot above it (REQ-LAYOUT-003): the root owns the shared
+  // layout-identity registry the keyed remount exchanges through.
+  return (
+    <MotionRoot>
+      <ContinuityChecks />
+    </MotionRoot>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72 },
+  padded: { paddingHorizontal: 12 },
+  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',
+  },
+  stage: {
+    height: 230,
+    marginTop: 14,
+    backgroundColor: '#14141d',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  box: { position: 'absolute', borderRadius: 10 },
+  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 },
+})