@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/DynamicDragConfigChecksScreen.tsx

@@ -0,0 +1,237 @@
+// U7f dynamic-drag-config device checks: catalog _conditionalDraggable +
+// _dragConstraintChanges on the public MotionView path. iOS has no tap injection, so
+// the screen self-drives. Discriminators are the freeze/refusal repeal (the catalog
+// blockers): toggling drag and rebuilding numeric constraints must not refuse, and
+// bare dragElastic without constraints must not refuse. Pan follow is unit-proven on
+// the MotionView host path (dynamicDragConfig.host.test.ts).
+
+import { useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { MotionView } from '../../native/motion/MotionView'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+
+const ROW_FALSE = 'drag={false} mounts without a typed refusal'
+const ROW_TOGGLE = 'toggling drag true/false does not freeze-refuse (catalog _conditionalDraggable)'
+const ROW_CONSTRAINTS = 'rebuilding numeric constraints does not freeze-refuse'
+const ROW_ELASTIC = 'bare dragElastic without constraints is a no-op (no refusal)'
+const ROW_CLEAN = 'clean run: zero refusal reports through the console tap'
+const ROWS = [ROW_FALSE, ROW_TOGGLE, ROW_CONSTRAINTS, ROW_ELASTIC, ROW_CLEAN] as const
+
+const T_FALSE = 400
+const T_TOGGLE_ON = 900
+const T_TOGGLE_OFF = 1400
+const T_CONSTRAINTS = 1900
+const T_CONSTRAINTS_SAMPLE = 2300
+const T_FINISH = 2800
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+export function DynamicDragConfigChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [dragOn, setDragOn] = useState(false)
+  const [bound, setBound] = useState(200)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const reportsRef = useRef<string[]>([])
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  useEffect(() => {
+    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|drag/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))
+    }
+
+    at(T_FALSE, () => {
+      const reports = reportsRef.current.length
+      finalize(
+        ROW_FALSE,
+        reports === 0,
+        reports === 0
+          ? 'drag={false} mounted with zero motion/drag reports'
+          : `${reports} report(s) at disabled mount`,
+      )
+      setStage('disabled mount sampled')
+    })
+    at(T_TOGGLE_ON, () => {
+      setDragOn(true)
+      setStage('toggled drag on')
+    })
+    at(T_TOGGLE_OFF, () => {
+      setDragOn(false)
+      const freeze = reportsRef.current.some((message) => /fixed at mount/i.test(message))
+      finalize(
+        ROW_TOGGLE,
+        !freeze,
+        freeze
+          ? 'freeze-refusal fired on toggle (the pre-U7f mount-frozen law)'
+          : 'toggle true→false with no fixed-at-mount refusal',
+      )
+      setStage('toggled drag off')
+    })
+    at(T_CONSTRAINTS, () => {
+      setBound(20)
+      setStage('constraints rebuilt')
+    })
+    at(T_CONSTRAINTS_SAMPLE, () => {
+      const freeze = reportsRef.current.some((message) => /fixed at mount/i.test(message))
+      const elastic = reportsRef.current.some((message) => /meaningless/i.test(message))
+      finalize(
+        ROW_CONSTRAINTS,
+        !freeze,
+        freeze
+          ? 'freeze-refusal fired on constraint rebuild'
+          : 'constraint bound 200→20 with no fixed-at-mount refusal',
+      )
+      finalize(
+        ROW_ELASTIC,
+        !elastic,
+        elastic
+          ? 'dragElastic-without-constraints still refused'
+          : 'bare dragElastic peer mounted with no meaningless-elastic refusal',
+      )
+      setStage('constraint rebuild sampled')
+    })
+    at(T_FINISH, () => {
+      const reports = reportsRef.current
+      finalize(
+        ROW_CLEAN,
+        reports.length === 0,
+        reports.length === 0
+          ? '0 refusal reports across disabled mount, toggle, constraint rebuild, elastic peer'
+          : `${reports.length} report(s): ${reports.map((message) => message.slice(0, 80)).join(' | ')}`,
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      console.error = originalError
+    }
+  }, [])
+
+  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}>U7f dynamic-drag-config checks</Text>
+        <Text style={styles.subtitle}>
+          catalog toggle + live constraints + elastic no-op ({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}>
+          drag={dragOn ? 'true' : 'false'} · bound={bound}
+        </Text>
+
+        {dragOn ? (
+          <MotionView drag style={[styles.box, { backgroundColor: '#16a34a' }]} />
+        ) : (
+          <MotionView drag={false} style={[styles.box, { backgroundColor: '#eab308' }]} />
+        )}
+        <MotionView
+          drag="x"
+          dragConstraints={{ left: 0, right: bound }}
+          dragElastic={0}
+          style={[styles.box, { backgroundColor: '#3b82f6' }]}
+        />
+        <MotionView drag="x" dragElastic style={[styles.box, { backgroundColor: '#f97316' }]} />
+
+        {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',
+  },
+  box: { width: 72, height: 72, marginTop: 12, alignSelf: 'center', borderRadius: 8 },
+  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 },
+})

package/src/verification/screens/FrameDataChecksScreen.tsx

@@ -0,0 +1,252 @@
+// U7j frameData device checks: catalog useVelocity.tsx on the public path. iOS has no
+// tap injection, so the screen self-drives. Discriminators (Decision 90 analog of 77/82/86):
+// frameData is the JS-thread clock (F1 — not the UI driver). Host paint of x is the web e2e.
+// Native stamps frameData.timestamp while a JS-channel animate() of a MotionValue runs, then
+// proves idle freeze. The `frame` scheduler is not this unit.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { animate } from '../../native/motion/imperativeAnimate'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { frameData } from '../../native/motion/frameData'
+import { useMotionValue, useMotionValueEvent, useVelocity } from '../../native/motion/valueHooks'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_SHAPE = 'frameData shape: delta, timestamp, isProcessing'
+const ROW_ADVANCE = 'timestamp advances while the JS channel is kicked'
+const ROW_FREEZE = 'idle freeze: two reads after settle are identical'
+const ROW_CLEAN = 'clean run: zero unexpected reports'
+const ROWS = [ROW_SHAPE, ROW_ADVANCE, ROW_FREEZE, ROW_CLEAN] as const
+
+const T_SHAPE = 200
+const T_START = 400
+const T_MID = 700
+const T_IDLE_A = 1400
+const T_IDLE_B = 1800
+const T_CLEAN = 2100
+const DURATION_S = 0.45
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+export function FrameDataChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const x = useMotionValue(0)
+  const xVelocity = useVelocity(x)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const [xNow, setXNow] = useState(0)
+  const [stampNow, setStampNow] = useState(() => frameData.timestamp)
+  const stampsRef = useRef<number[]>([])
+  const idleARef = useRef<number | null>(null)
+  const reportsRef = useRef<string[]>([])
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|frameData|animate|velocity/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const onX = useCallback((value: number): void => {
+    setXNow(value)
+    const stamp = frameData.timestamp
+    stampsRef.current.push(stamp)
+    setStampNow(stamp)
+  }, [])
+  useMotionValueEvent(x, 'change', onX)
+  useMotionValueEvent(xVelocity, 'change', () => {
+    setStampNow(frameData.timestamp)
+  })
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(T_SHAPE, () => {
+      const pass =
+        typeof frameData.delta === 'number' &&
+        typeof frameData.timestamp === 'number' &&
+        typeof frameData.isProcessing === 'boolean'
+      finalize(
+        ROW_SHAPE,
+        pass,
+        pass
+          ? `delta=${frameData.delta.toFixed(2)} ts=${frameData.timestamp.toFixed(1)} processing=${frameData.isProcessing}`
+          : 'shape missing',
+      )
+      setStage('shape sampled')
+    })
+
+    at(T_START, () => {
+      animate(x, 100, { duration: DURATION_S, ease: 'linear' })
+      setStage('js-channel animate started')
+    })
+
+    at(T_MID, () => {
+      const stamps = stampsRef.current
+      const pass = stamps.length >= 2 && stamps[stamps.length - 1]! > stamps[0]!
+      finalize(
+        ROW_ADVANCE,
+        pass,
+        pass
+          ? `stamps=${stamps.length} first=${stamps[0]!.toFixed(1)} last=${stamps[stamps.length - 1]!.toFixed(1)}`
+          : `stamps=${stamps.length} — expected advancing timestamps`,
+      )
+      setStage(pass ? 'advance row finalized' : 'advance row finalized (FAIL)')
+    })
+
+    at(T_IDLE_A, () => {
+      idleARef.current = frameData.timestamp
+      setStage(`idle-a ts=${frameData.timestamp.toFixed(1)}`)
+    })
+
+    at(T_IDLE_B, () => {
+      const a = idleARef.current
+      const b = frameData.timestamp
+      const pass = a !== null && a === b
+      finalize(
+        ROW_FREEZE,
+        pass,
+        pass
+          ? `idle ${a!.toFixed(1)} === ${b.toFixed(1)}`
+          : `idle-a=${a === null ? 'n/a' : a.toFixed(1)} idle-b=${b.toFixed(1)}`,
+      )
+      setStage(pass ? 'freeze row finalized' : 'freeze row finalized (FAIL)')
+    })
+
+    at(T_CLEAN, () => {
+      finalize(
+        ROW_CLEAN,
+        reportsRef.current.length === 0,
+        reportsRef.current.length === 0
+          ? '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
+    }
+  }, [x])
+
+  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}>U7j frameData checks</Text>
+          <Text style={styles.subtitle}>
+            catalog useVelocity timestamps + JS-channel kick ({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}>
+            x={xNow.toFixed(1)} · ts={stampNow.toFixed(1)} · {severity}
+          </Text>
+          <View style={styles.box} accessibilityLabel="u7j-frame-data-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' },
+  status: {
+    color: '#c9c9d8',
+    fontSize: 11,
+    marginTop: 8,
+    textAlign: 'center',
+    fontFamily: 'Menlo',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    marginTop: 14,
+    backgroundColor: '#ef4444',
+    borderRadius: 8,
+  },
+  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 },
+})