@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/SharedLayoutCrossfadeChecksScreen.tsx

@@ -0,0 +1,425 @@
+// U6 crossfade device checks (REQ-VALUETYPE-013(f) — the packet dissolved into it at the U6
+// terminal): the PUBLIC catalog Shared-layout-continuity-crossfade.tsx shape on device — the same
+// layoutId="u6-box" keyed cycle as the continuity card, but under AnimatePresence (crossfade
+// default), so the keyed remount keeps the outgoing shape mounted as the fading follower while
+// the incoming lead flies the pin's authored 3s transition. Four claims, self-driven:
+//
+//   1. FIRST MOUNT ON THE CALC SHAPE — identical to the continuity card: the host-measured window
+//      x is viewportWidth − 100 (±2), settles 0 (the pre-U6 Yoga-drop defect lays out at x≈0).
+//   2. DUAL MOUNT MID-FLIGHT — at a stamped ~0.7s into the flight BOTH boxes measure on the host:
+//      AnimatePresence holds the exiting shape-2 (the follower) and the layoutId identity holds
+//      TWO live holder records (the engine's opacity witness sees lead + follower, never ghosts).
+//      Counterfactuals: no presence wrapper or an instant safeToRemove unmounts the follower
+//      before the sample; crossfade:false-style hiding reads the follower gone from the identity.
+//   3. THE FOLLOWER FADES — two witness samples 400ms apart inside the fade half: the SAME two
+//      tokens, the follower (fading side) strictly decreasing and still mid-fade (> 0.02 — an
+//      instantly vanished follower reads 0, a never-fading one reads 1 twice), the lead strictly
+//      increasing, the pair conserved (native's crossfade law: lead = s, follower = 1 − s).
+//   4. THE LEAD SETTLES — at settle the lead measures left:100 exactly, the follower is released
+//      and unmounted, and the witness converges to the lead alone at opacity 1.
+//
+// Readback honesty: positions are measureInWindow against the host; opacities are the driver's
+// LIVE holder-output cells read through the root binding's opacityWitnessFor (what the holders
+// paint — verification-side instrumentation, never product code). The stage is full-bleed so the
+// viewport-resolved seed reads directly in window coordinates. A screenshot is the assertion.
+
+import { useEffect, useRef, useState, type ComponentRef } from 'react'
+import { Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { AnimatePresence } from '../../native/motion/AnimatePresence'
+import { MotionRoot, useLayoutIdentityRootBinding } 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-crossfade.tsx:71-91); the card cycles
+// 2 → 1 once (the pin's fade window lives inside one 3s flight).
+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 LAYOUT_ID = 'u6-box'
+
+const ROW_MOUNT = 'first mount ON the calc shape: host x = vw − 100 (±2), no flight'
+const ROW_DUAL = 'dual mount mid-flight: follower + lead BOTH measure, identity holds 2 holders'
+const ROW_FADE = 'follower opacity strictly decreasing across the fade half (lead rising, sum 1)'
+const ROW_SETTLE = 'lead settles at left:100; follower released + unmounted'
+const ROW_ORDER = [ROW_MOUNT, ROW_DUAL, ROW_FADE, ROW_SETTLE] as const
+
+// Timeline (ms). Dwells: boot frame 0–1600 (calc shape), dual-mount sample at ~2300, fade samples
+// at ~3200/3600 (mid-flight). The settle row is EVENT-DRIVEN (the onLayoutAnimationComplete
+// callback judges), never a wall-clock sample: native's flight clock starts at the first
+// commitRect, one host measure roundtrip after mount (F3-family host-commit granularity — the
+// pin measures synchronously in the commit), so a fixed settle sample races the engine on a
+// loaded emulator (device 2026-08-20: sampled x=127 mid-flight at 5100ms; the completed state —
+// lead x=100.1, follower unmounted — verified from the live hierarchy after). A watchdog fails
+// the row when no settle arrives (a true stall still fails loud).
+const T_MOUNT = 1200
+const T_CYCLE = 1600
+const T_DUAL = 2300
+const T_FADE_1 = 3200
+const T_FADE_2 = 3600
+const T_WATCHDOG = 9000
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface OpacitySample {
+  readonly at: number
+  readonly entries: readonly { readonly token: string; readonly opacity: number }[]
+}
+
+function formatWitness(sample: OpacitySample | null): string {
+  if (sample === null) return 'unavailable'
+  return (
+    sample.entries
+      .map((entry) => `${entry.token.slice(-8)}=${entry.opacity.toFixed(2)}`)
+      .join(' ') || '(none)'
+  )
+}
+
+function CrossfadeChecks() {
+  const severity = ambientNativeSeverity()
+  const binding = useLayoutIdentityRootBinding()
+  const [count, setCount] = useState(CALC_SHAPE)
+  const [stage, setStage] = useState('boot: first mount ON the calc shape (styles[2])')
+  const [liveX, setLiveX] = useState('—')
+  const [liveWitness, setLiveWitness] = useState('—')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROW_ORDER)[number], RowResult>>>({})
+
+  // Per-shape host refs: the exiting child keeps its own count closure, so the follower
+  // (shape-2) and the lead (shape-1) both stay measurable while AnimatePresence holds them.
+  const boxRefs = useRef(new Map<number, ComponentRef<typeof MotionView>>())
+  const vwRef = useRef(Dimensions.get('window').width)
+  const cycleStampRef = useRef(0)
+  const settleLatenciesRef = useRef<number[]>([])
+  const settleCheckedRef = useRef(false)
+  const settleChecksRef = useRef<(() => void) | null>(null)
+  const dualRef = useRef<{ followerX: number | null; leadX: number | null } | null>(null)
+  const witnessDualRef = useRef<OpacitySample | null>(null)
+  const fade1Ref = useRef<OpacitySample | null>(null)
+  const fade2Ref = useRef<OpacitySample | 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 measureShape = (shape: number, done: (x: number | null) => void): void => {
+      const node = boxRefs.current.get(shape) ?? null
+      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 sampleWitness = (): OpacitySample | null => {
+      if (binding === null) return null
+      return {
+        at: Date.now() - cycleStampRef.current,
+        entries: binding.opacityWitnessFor(LAYOUT_ID),
+      }
+    }
+
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    // 1. FIRST MOUNT — the static calc seed resolves before Yoga (same claim as continuity).
+    at(T_MOUNT, () => {
+      measureShape(CALC_SHAPE, (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}`,
+        )
+        setStage('first mount measured — cycling under AnimatePresence')
+      })
+    })
+
+    // 2. DUAL MOUNT — ~0.7s into the flight both boxes must measure, and the identity must hold
+    //    both holder records.
+    at(T_CYCLE, () => {
+      cycleStampRef.current = Date.now()
+      setCount(PX_SHAPE)
+      setStage('flight: calc shape → left:100 under AnimatePresence (crossfade default, 3s)')
+    })
+    at(T_DUAL, () => {
+      measureShape(CALC_SHAPE, (followerX) => {
+        measureShape(PX_SHAPE, (leadX) => {
+          const witness = sampleWitness()
+          witnessDualRef.current = witness
+          dualRef.current = { followerX, leadX }
+          setLiveX(fmt(leadX))
+          setLiveWitness(formatWitness(witness))
+          const holders = witness === null ? 0 : witness.entries.length
+          const pass = followerX !== null && leadX !== null && holders === 2
+          finalize(
+            ROW_DUAL,
+            pass,
+            `t+${((Date.now() - cycleStampRef.current) / 1000).toFixed(2)}s: follower shape-2 x=${fmt(followerX)}, ` +
+              `lead shape-1 x=${fmt(leadX)}, identity holders=${holders} (${formatWitness(witness)})` +
+              (pass ? '' : ' — the follower departed before the sample (presence did not hold it)'),
+          )
+          setStage('dual mount sampled — fade window next')
+        })
+      })
+    })
+
+    // 3. THE FOLLOWER FADES — two witness samples inside the fade half, strictly decreasing.
+    at(T_FADE_1, () => {
+      const sample = sampleWitness()
+      fade1Ref.current = sample
+      setLiveWitness(formatWitness(sample))
+      setStage('fade window — first opacity sample')
+    })
+    at(T_FADE_2, () => {
+      const sample = sampleWitness()
+      fade2Ref.current = sample
+      setLiveWitness(formatWitness(sample))
+      const first = fade1Ref.current
+      let bad: string | null = null
+      if (first === null || sample === null) {
+        bad = 'the opacity witness is unavailable (no root binding)'
+      } else if (first.entries.length !== 2 || sample.entries.length !== 2) {
+        bad =
+          `want 2 live holders at both samples; got ${first.entries.length} then ` +
+          `${sample.entries.length} (${formatWitness(first)} → ${formatWitness(sample)})`
+      } else {
+        const firstMin = Math.min(...first.entries.map((entry) => entry.opacity))
+        const firstMax = Math.max(...first.entries.map((entry) => entry.opacity))
+        const secondMin = Math.min(...sample.entries.map((entry) => entry.opacity))
+        const secondMax = Math.max(...sample.entries.map((entry) => entry.opacity))
+        if (!(secondMin < firstMin - 0.02)) {
+          bad = `the fading side did not decrease: ${firstMin.toFixed(3)} → ${secondMin.toFixed(3)} (a never-fading follower reads ~1 twice)`
+        } else if (secondMin <= 0.02) {
+          bad = `the follower is already gone at the second sample (${secondMin.toFixed(3)}) — an instant vanish, not a fade`
+        } else if (!(secondMax > firstMax + 0.02)) {
+          bad = `the lead did not rise: ${firstMax.toFixed(3)} → ${secondMax.toFixed(3)}`
+        } else if (
+          Math.abs(firstMin + firstMax - 1) > 0.05 ||
+          Math.abs(secondMin + secondMax - 1) > 0.05
+        ) {
+          bad = `the crossfade sum is not conserved: ${(firstMin + firstMax).toFixed(3)} then ${(secondMin + secondMax).toFixed(3)}`
+        }
+      }
+      finalize(
+        ROW_FADE,
+        bad === null,
+        bad ??
+          `follower ${formatWitness(first)} → ${formatWitness(sample)}: strictly decreasing, ` +
+            'mid-fade, lead rising, sum conserved',
+      )
+      setStage('fade sampled — awaiting the settle')
+    })
+
+    // 4. THE LEAD SETTLES — judged on the settle callback (event-driven, see the timeline
+    //    note): at left:100 exactly, the follower released and unmounted. The watchdog fails
+    //    the row loud when the engine never settles.
+    const runSettleChecks = (): void => {
+      if (settleCheckedRef.current) return
+      settleCheckedRef.current = true
+      measureShape(PX_SHAPE, (leadX) => {
+        measureShape(CALC_SHAPE, (followerX) => {
+          const witness = sampleWitness()
+          setLiveX(fmt(leadX))
+          setLiveWitness(formatWitness(witness))
+          const latency = settleLatenciesRef.current[0]
+          let bad: string | null = null
+          if (leadX === null || Math.abs(leadX - PX_TARGET_X) > 2) {
+            bad = `lead settled x=${fmt(leadX)}, want ${PX_TARGET_X}±2`
+          } else if (followerX !== null) {
+            bad = `the follower still measures at settle (x=${followerX.toFixed(1)}) — the release never unmounted it`
+          }
+          finalize(
+            ROW_SETTLE,
+            bad === null,
+            bad ??
+              `lead x=${fmt(leadX)} (want ${PX_TARGET_X}±2); follower unmounted; witness ` +
+                `${formatWitness(witness)}` +
+                (latency === undefined
+                  ? ''
+                  : `; settle callback at +${(latency / 1000).toFixed(2)}s (3s class)`),
+          )
+          setStage('done')
+        })
+      })
+    }
+    settleChecksRef.current = runSettleChecks
+    at(T_WATCHDOG, () => {
+      if (settleCheckedRef.current) return
+      const latency = settleLatenciesRef.current[0]
+      finalize(
+        ROW_SETTLE,
+        false,
+        latency === undefined
+          ? `no settle callback within ${((T_WATCHDOG - T_CYCLE) / 1000).toFixed(1)}s of the cycle — the flight stalled`
+          : 'settle callback fired but the checks never ran',
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+    }
+    // All captured values are refs, the stable root binding, or stable setters; 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 crossfade checks</Text>
+        <Text style={styles.subtitle}>
+          layoutId=&quot;u6-box&quot; keyed remount under AnimatePresence ({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} · lead x={liveX} · vw={vwRef.current.toFixed(0)}
+        </Text>
+        <Text style={styles.status}>witness: {liveWitness}</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-crossfade-stage">
+        <AnimatePresence>
+          <MotionView
+            key={`shape-${count}`}
+            layoutId={LAYOUT_ID}
+            ref={(node) => {
+              if (node === null) boxRefs.current.delete(count)
+              else boxRefs.current.set(count, node)
+            }}
+            transition={{ duration: 3 }}
+            onLayoutAnimationComplete={() => {
+              settleLatenciesRef.current.push(Date.now() - cycleStampRef.current)
+              // The follower's settle-edge detach → safeToRemove → Presence unmount is a React
+              // render behind this callback; judge two frames out so the unmount has committed
+              // (the repo's double-rAF idiom for a post-commit read).
+              requestAnimationFrame(() => requestAnimationFrame(() => settleChecksRef.current?.()))
+            }}
+            style={[styles.box, SHAPE_STYLES[count], { backgroundColor: SHAPE_COLORS[count]! }]}
+            accessibilityLabel={`u6-crossfade-shape-${count}`}
+          />
+        </AnimatePresence>
+      </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 SharedLayoutCrossfadeChecksScreen() {
+  // layoutId requires a MotionRoot above it (REQ-LAYOUT-003); the root binding is also the
+  // card's opacity witness source (useLayoutIdentityRootBinding inside).
+  return (
+    <MotionRoot>
+      <CrossfadeChecks />
+    </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 },
+})