@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/BooleanAnimateChecksScreen.tsx

@@ -0,0 +1,358 @@
+// U7h boolean-animate device checks: catalog Shared-layout-sibling-to-child on the public
+// MotionView path. iOS has no tap injection, so the screen self-drives. Discriminators are
+// acceptance (Decision 82 analog of 77): bare / true / false `animate` mount without a typed
+// InvalidTargetError, and the sibling→child layoutId exclusive remount still completes
+// (inert — boolean is not a disable switch). Distinct Child/Sibling types (R13: inlining
+// the ternary reuses the first MotionView fiber and leaves settles at 0). Host paint of
+// the crossfade is the web e2e.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { LayoutGroup } from '../../native/motion/LayoutGroup'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_BARE = 'bare animate mounts without InvalidTargetError'
+const ROW_TRUE = 'animate={true} mounts without InvalidTargetError'
+const ROW_FALSE = 'animate={false} mounts without InvalidTargetError'
+const ROW_FLIGHT = 'sibling→child layoutId flight: exclusive remount completes'
+const ROW_CLEAN = 'clean run: zero InvalidTargetError reports'
+const ROWS = [ROW_BARE, ROW_TRUE, ROW_FALSE, ROW_FLIGHT, ROW_CLEAN] as const
+
+// Family-3 / REQ-LAYOUT-023: layoutId identity flights use duration/ease, not a spring.
+const TRANSITION = { duration: 0.4, ease: 'easeOut' } as const
+const T_ACCEPT = 400
+const T_FLIGHT = 1200
+const SETTLE_DEADLINE_MS = 4000
+const STABILITY_MS = 400
+
+function isKnownProjectionRadiusDebt(message: string): boolean {
+  return /borderRadius correction is anisotropic/i.test(message)
+}
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+function isAnimateRefusal(message: string): boolean {
+  return /InvalidTargetError|malformed animate target|animate-target/i.test(message)
+}
+
+function U7hChild(props: { onComplete: () => void }) {
+  return (
+    <MotionView
+      animate
+      layoutId="u7h-big"
+      transition={TRANSITION}
+      onLayoutAnimationComplete={props.onComplete}
+      style={styles.childBig}
+      accessibilityLabel="u7h-boolean-animate-big"
+    >
+      <MotionView
+        animate
+        layoutId="u7h-small"
+        transition={TRANSITION}
+        style={styles.childSmall}
+        accessibilityLabel="u7h-boolean-animate-small"
+      />
+    </MotionView>
+  )
+}
+
+function U7hSibling(props: { onComplete: () => void }) {
+  return (
+    <>
+      <MotionView
+        animate
+        layoutId="u7h-big"
+        transition={TRANSITION}
+        onLayoutAnimationComplete={props.onComplete}
+        style={styles.siblingBig}
+        accessibilityLabel="u7h-boolean-animate-big"
+      />
+      <MotionView
+        animate
+        layoutId="u7h-small"
+        transition={TRANSITION}
+        style={styles.siblingSmall}
+        accessibilityLabel="u7h-boolean-animate-small"
+      />
+    </>
+  )
+}
+
+export function BooleanAnimateChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [isOn, setOn] = useState(false)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const [completes, setCompletes] = useState(0)
+
+  const reportsRef = useRef<string[]>([])
+  const completesRef = useRef(0)
+  const rafsRef = useRef<ReturnType<typeof requestAnimationFrame>[]>([])
+  const mountStampRef = useRef(Date.now())
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  // Arm BEFORE children render. Production resolveAnimateProp reports via console.error
+  // on the child's render (review r1 major, agent-2026-08-20-304390). A parent useEffect
+  // tap would miss the first-mount InvalidTargetError and 5/5 the pre-fix tree.
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|InvalidTargetError|animate/i.test(message),
+    )
+  }
+
+  const now = (): number => Date.now() - mountStampRef.current
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const onComplete = useCallback((): void => {
+    completesRef.current += 1
+    setCompletes(completesRef.current)
+  }, [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+    const trackRaf = (id: ReturnType<typeof requestAnimationFrame>): void => {
+      rafsRef.current.push(id)
+    }
+    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))
+    }
+
+    at(T_ACCEPT, () => {
+      const refusals = reportsRef.current.filter(isAnimateRefusal)
+      const pass = refusals.length === 0
+      const detail = pass
+        ? 'bare/true/false mounted with zero animate-target refusals'
+        : `${refusals.length} animate refusal(s): ${refusals.map((message) => message.slice(0, 80)).join(' | ')}`
+      finalize(ROW_BARE, pass, pass ? 'catalog sibling tree mounted with bare animate' : detail)
+      finalize(ROW_TRUE, pass, pass ? 'true-peer mounted beside the catalog tree' : detail)
+      finalize(ROW_FALSE, pass, pass ? 'false-peer mounted beside the catalog tree' : detail)
+      setStage('boolean mounts sampled')
+    })
+
+    at(T_FLIGHT, () => {
+      setOn(true)
+      setStage('layoutId flight pressed (sibling → child)')
+      pollUntil(
+        () => completesRef.current >= 1,
+        now() + SETTLE_DEADLINE_MS,
+        (okSettle) => {
+          finalize(
+            ROW_FLIGHT,
+            okSettle,
+            okSettle
+              ? `exclusive remount complete ${completesRef.current} on layoutId big`
+              : `layoutId complete never fired within ${SETTLE_DEADLINE_MS}ms (completes ${completesRef.current})`,
+          )
+          setStage(okSettle ? 'flight row finalized' : 'flight row finalized (FAIL)')
+          at(STABILITY_MS, () => finishClean())
+        },
+      )
+    })
+
+    const finishClean = (): void => {
+      const refusals = reportsRef.current.filter(isAnimateRefusal)
+      const known = reportsRef.current.filter(isKnownProjectionRadiusDebt)
+      const unexpected = reportsRef.current.filter(
+        (message) => !isAnimateRefusal(message) && !isKnownProjectionRadiusDebt(message),
+      )
+      finalize(
+        ROW_CLEAN,
+        refusals.length === 0 && unexpected.length === 0,
+        refusals.length === 0 && unexpected.length === 0
+          ? `0 InvalidTargetError reports; ${known.length} T19 anisotropic radius disclosure(s)`
+          : `${refusals.length} animate + ${unexpected.length} other: ${reportsRef.current
+              .map((message) => message.slice(0, 80))
+              .join(' | ')}`,
+      )
+      setStage('done')
+    }
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      for (const raf of rafsRef.current) cancelAnimationFrame(raf)
+      restoreTapRef.current?.()
+      restoreTapRef.current = null
+    }
+  }, [])
+
+  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>
+      <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+        <Text style={styles.title}>U7h boolean-animate checks</Text>
+        <Text style={styles.subtitle}>
+          catalog sibling↔child + true/false peers ({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}>
+          on={isOn ? 1 : 0} · completes={completes} · {severity}
+        </Text>
+
+        <LayoutGroup>
+          <View style={styles.stage} accessibilityLabel="u7h-boolean-animate-stage">
+            {isOn ? <U7hChild onComplete={onComplete} /> : <U7hSibling onComplete={onComplete} />}
+          </View>
+        </LayoutGroup>
+
+        <View style={styles.peers}>
+          <MotionView animate={true} style={[styles.peer, styles.peerTrue]} />
+          <MotionView animate={false} style={[styles.peer, styles.peerFalse]} />
+        </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={3}>
+                  {row === undefined ? 'pending' : row.detail}
+                </Text>
+              </View>
+            </View>
+          )
+        })}
+      </ScrollView>
+    </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' },
+  status: {
+    color: '#c9c9d8',
+    fontSize: 11,
+    marginTop: 8,
+    textAlign: 'center',
+    fontFamily: 'Menlo',
+  },
+  stage: {
+    height: 280,
+    marginTop: 14,
+    backgroundColor: '#f3f3f3',
+    borderRadius: 16,
+    overflow: 'visible',
+  },
+  childBig: {
+    position: 'absolute',
+    top: 97,
+    left: 26,
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: 'rgba(136, 85, 255, 0.3)',
+  },
+  childSmall: {
+    position: 'absolute',
+    top: 30,
+    left: 30,
+    width: 60,
+    height: 60,
+    borderRadius: 10,
+    backgroundColor: '#8855ff',
+  },
+  siblingBig: {
+    position: 'absolute',
+    top: 70,
+    left: 40,
+    width: 60,
+    height: 60,
+    borderRadius: 10,
+    backgroundColor: 'rgba(0, 153, 255, 0.3)',
+  },
+  siblingSmall: {
+    position: 'absolute',
+    top: 132,
+    left: 102,
+    width: 60,
+    height: 60,
+    borderRadius: 10,
+    backgroundColor: '#0099ff',
+  },
+  peers: { flexDirection: 'row', justifyContent: 'center', marginTop: 12 },
+  peer: { width: 32, height: 32, borderRadius: 6 },
+  peerTrue: { backgroundColor: '#16a34a', marginRight: 12 },
+  peerFalse: { backgroundColor: '#eab308' },
+  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 },
+})