@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/CompletionChecksScreen.tsx

@@ -0,0 +1,294 @@
+// REQ-API-060 device checks (finding-B resolution): the property-lane onAnimationComplete
+// delivery chain end to end on device. Leg A: an un-raced single flight completes. Leg B: a
+// deliberately RACED label retarget — the superseded outgoing flight NEVER completes (pin
+// MotionValue.start stops it) and the incoming flight completes with the BARE label string
+// (the inherited-lane array fix, F5). Leg C: a typed-spring settle completes. iOS has no tap
+// injection, so the screen self-drives. The completion ledger is the discriminator (Decision 94
+// analog): every row judges the callback-sourced ledger — a missing or mis-shaped completion
+// fails the row, so a late-but-healthy landing fails CLOSED rather than passing vacated.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_A = 'leg A: un-raced single tween flight completes'
+const ROW_B = 'leg B: raced retarget — only the incoming flight completes, with the bare label'
+const ROW_C = 'leg C: typed-spring settle completes'
+const ROW_CLEAN = 'clean run: zero unexpected reports'
+const ROWS = [ROW_A, ROW_B, ROW_C, ROW_CLEAN] as const
+
+const T_A_START = 80
+const T_A_JUDGE = 1400
+const T_B_HIDDEN = 1900
+const T_B_JUDGE = 3200
+const T_C_JUDGE = 4800
+const T_CLEAN = 4900
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Completion {
+  readonly at: number
+  readonly definition: string
+}
+
+function describe(definition: unknown): string {
+  if (typeof definition === 'string') return definition
+  if (Array.isArray(definition)) return `array(${definition.map(String).join(',')})`
+  return typeof definition
+}
+
+const VARIANTS = {
+  visible: { opacity: 1, transition: { duration: 0.8 } },
+  hidden: { opacity: 0, transition: { duration: 0.8 } },
+} as const
+
+export function CompletionChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [targetA, setTargetA] = useState(0)
+  const [labelB, setLabelB] = useState<'hidden' | 'visible'>('hidden')
+  const [targetC, setTargetC] = useState(0)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const completionsA = useRef<Completion[]>([])
+  const completionsB = useRef<Completion[]>([])
+  const completionsC = useRef<Completion[]>([])
+  const interiorA = useRef(0)
+  const interiorB = useRef(0)
+  const t0 = useRef(Date.now())
+  const reportsRef = useRef<string[]>([])
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|transition|settle|complete/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+  const stamp = (): number => Date.now() - t0.current
+
+  const onCompleteA = useCallback((definition: unknown): void => {
+    completionsA.current.push({ at: stamp(), definition: describe(definition) })
+  }, [])
+  const onCompleteB = useCallback((definition: unknown): void => {
+    completionsB.current.push({ at: stamp(), definition: describe(definition) })
+  }, [])
+  const onCompleteC = useCallback((definition: unknown): void => {
+    completionsC.current.push({ at: stamp(), definition: describe(definition) })
+  }, [])
+  const onUpdateA = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    const value = latest.opacity
+    if (typeof value === 'number' && value > 0.02 && value < 0.98) interiorA.current += 1
+  }, [])
+  const onUpdateB = useCallback((latest: Readonly<Record<string, string | number>>): void => {
+    const value = latest.opacity
+    if (typeof value === 'number' && value > 0.02 && value < 0.98) interiorB.current += 1
+  }, [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(T_A_START, () => {
+      setTargetA(1)
+      setStage('leg A: single tween flight')
+    })
+    at(T_A_JUDGE, () => {
+      const completions = completionsA.current
+      const pass = completions.length === 1 && interiorA.current > 3
+      finalize(
+        ROW_A,
+        pass,
+        `completions=${completions.length} (${
+          completions.map((c) => `+${c.at}ms ${c.definition}`).join(' | ') || 'none'
+        }), ${interiorA.current} interior samples (the flight ran)`,
+      )
+      setLabelB('visible')
+      setStage('leg B: label flight started — retarget races it at +400ms')
+    })
+    at(T_B_HIDDEN, () => {
+      setLabelB('hidden')
+    })
+    at(T_B_JUDGE, () => {
+      const completions = completionsB.current
+      const pass =
+        completions.length === 1 && completions[0]!.definition === 'hidden' && interiorB.current > 0
+      finalize(
+        ROW_B,
+        pass,
+        `completions=${completions.length} (${
+          completions.map((c) => `+${c.at}ms ${c.definition}`).join(' | ') || 'none'
+        }) — the pin fires only the incoming flight, with the bare ` +
+          'label string; the outgoing (superseded) flight never completes',
+      )
+      setTargetC(100)
+      setStage('leg C: typed-spring settle')
+    })
+    at(T_C_JUDGE, () => {
+      const completions = completionsC.current
+      const pass = completions.length === 1
+      finalize(
+        ROW_C,
+        pass,
+        `completions=${completions.length} (${
+          completions.map((c) => `+${c.at}ms ${c.definition}`).join(' | ') || 'none'
+        })`,
+      )
+      setStage('legs judged')
+    })
+    at(T_CLEAN, () => {
+      const pass = reportsRef.current.length === 0
+      finalize(
+        ROW_CLEAN,
+        pass,
+        pass
+          ? '0 unexpected reports'
+          : `${reportsRef.current.length} unexpected: ${reportsRef.current
+              .map((message) => message.slice(0, 80))
+              .join(' | ')}`,
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      restoreTapRef.current?.()
+      restoreTapRef.current = null
+    }
+    // The timeline runs once per mount; all captured values are refs or stable setters.
+    // 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 (
+    <MotionRoot>
+      <View style={styles.scroll}>
+        <View style={styles.container}>
+          <Text style={styles.title}>onAnimationComplete checks</Text>
+          <Text style={styles.subtitle}>delivery + supersession law ({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>
+
+          <MotionView
+            animate={{ opacity: targetA }}
+            initial={false}
+            transition={{ duration: 0.8 }}
+            onUpdate={onUpdateA}
+            onAnimationComplete={onCompleteA}
+            style={styles.box}
+            accessibilityLabel="completion-legA-box"
+          />
+          <MotionView animate={labelB} initial={false}>
+            <MotionView
+              variants={VARIANTS}
+              onUpdate={onUpdateB}
+              onAnimationComplete={onCompleteB}
+              style={[styles.box, styles.boxB]}
+              accessibilityLabel="completion-legB-box"
+            />
+          </MotionView>
+          <MotionView
+            animate={{ x: targetC }}
+            initial={false}
+            transition={{ type: 'spring', duration: 1 }}
+            onAnimationComplete={onCompleteC}
+            style={[styles.box, styles.boxC]}
+            accessibilityLabel="completion-legC-box"
+          />
+
+          {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={3}>
+                    {row === undefined ? 'pending' : row.detail}
+                  </Text>
+                </View>
+              </View>
+            )
+          })}
+        </View>
+      </View>
+    </MotionRoot>
+  )
+}
+
+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' },
+  box: {
+    width: 40,
+    height: 40,
+    marginTop: 12,
+    backgroundColor: '#ef4444',
+    borderRadius: 8,
+    opacity: 0,
+  },
+  boxB: { backgroundColor: '#38bdf8' },
+  boxC: { backgroundColor: '#f97316', opacity: 1 },
+  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 },
+})