@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ScaleCorrectorChecksScreen.tsx

@@ -0,0 +1,425 @@
+// U7g addScaleCorrector device checks: catalog Layout-Projection-custom-values ("Framer
+// border") on the public MotionView path. iOS has no tap injection, so the screen self-drives.
+// Discriminators are the channel (Decision 82 analog of 77): worklet registration accepted,
+// CSS-variable / boxShadow / non-worklet refuse loud, catalog layout flight starts then
+// completes. Visual constancy (computed × scale ≈ authored) is the web e2e witness; the math
+// is unit-proven (applyInstalledScaleCorrector). Native cannot read
+// host paint.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { addScaleCorrector } from '../../native/motion/addScaleCorrector'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+
+const ROW_REGISTER = 'worklet catalog registration accepted (four border-width correctors)'
+const ROW_CSS_VAR = 'CSS-variable key refuses loud'
+const ROW_BOX_SHADOW = 'boxShadow refuses loud (F3: no silent native built-in)'
+const ROW_WORKLET = 'non-worklet corrector refuses loud (F1)'
+const ROW_FLIGHT = 'catalog layout flight: start then complete'
+const ROW_CLEAN = 'clean run: only the three expected refusal reports'
+const ROWS = [
+  ROW_REGISTER,
+  ROW_CSS_VAR,
+  ROW_BOX_SHADOW,
+  ROW_WORKLET,
+  ROW_FLIGHT,
+  ROW_CLEAN,
+] as const
+
+const TRANSITION = { duration: 0.8, ease: 'circIn' } as const
+const T_REGISTER = 250
+const T_REFUSALS = 500
+const T_FLIGHT = 800
+const START_DEADLINE_MS = 4000
+const SETTLE_DEADLINE_MS = 6000
+const STABILITY_MS = 400
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+function correctBorderX(
+  latest: number | string,
+  context: {
+    targetDelta: { x: { scale: number }; y: { scale: number } }
+    treeScale: { x: number; y: number }
+  },
+): number {
+  'worklet'
+  const value = typeof latest === 'string' ? Number.parseFloat(String(latest)) : latest
+  return value / context.targetDelta.x.scale / context.treeScale.x
+}
+
+function correctBorderY(
+  latest: number | string,
+  context: {
+    targetDelta: { x: { scale: number }; y: { scale: number } }
+    treeScale: { x: number; y: number }
+  },
+): number {
+  'worklet'
+  const value = typeof latest === 'string' ? Number.parseFloat(String(latest)) : latest
+  return value / context.targetDelta.y.scale / context.treeScale.y
+}
+
+const catalogCorrectors = {
+  borderTopWidth: { correct: correctBorderY },
+  borderLeftWidth: { correct: correctBorderX },
+  borderRightWidth: { correct: correctBorderX },
+  borderBottomWidth: { correct: correctBorderY },
+}
+
+export function ScaleCorrectorChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [isOn, setOn] = useState(false)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const [starts, setStarts] = useState(0)
+  const [completes, setCompletes] = useState(0)
+
+  const reportsRef = useRef<string[]>([])
+  const startsRef = useRef(0)
+  const completesRef = useRef(0)
+  const rafsRef = useRef<ReturnType<typeof requestAnimationFrame>[]>([])
+  const mountStampRef = useRef(Date.now())
+
+  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 onStart = useCallback((): void => {
+    startsRef.current += 1
+    setStarts(startsRef.current)
+  }, [])
+
+  const onComplete = useCallback((): void => {
+    completesRef.current += 1
+    setCompletes(completesRef.current)
+  }, [])
+
+  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|addScaleCorrector|worklet|boxShadow|CSS variable/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))
+    }
+    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))
+    }
+
+    const captureRefusal = (run: () => void, pattern: RegExp): { hit: boolean; detail: string } => {
+      const before = reportsRef.current.length
+      let thrown: string | null = null
+      try {
+        run()
+      } catch (error) {
+        thrown = error instanceof Error ? error.message : String(error)
+      }
+      const reported = reportsRef.current.slice(before)
+      const text = thrown ?? reported.join(' | ')
+      const hit =
+        (thrown !== null && pattern.test(thrown)) ||
+        reported.some((message) => pattern.test(message))
+      return {
+        hit,
+        detail: hit
+          ? `${thrown !== null ? 'threw' : 'reported'}: ${text.slice(0, 120)}`
+          : `no matching refusal (thrown=${thrown ?? 'none'}; new reports=${reported.length})`,
+      }
+    }
+
+    at(T_REGISTER, () => {
+      let thrown: string | null = null
+      try {
+        addScaleCorrector(catalogCorrectors)
+      } catch (error) {
+        thrown = error instanceof Error ? error.message : String(error)
+      }
+      finalize(
+        ROW_REGISTER,
+        thrown === null,
+        thrown === null
+          ? 'four catalog border-width worklet correctors registered'
+          : `registration threw: ${thrown.slice(0, 120)}`,
+      )
+      setStage('registered')
+    })
+
+    at(T_REFUSALS, () => {
+      const cssVar = captureRefusal(
+        () => addScaleCorrector({ '--frame-border': { correct: correctBorderX } }),
+        /CSS variable|--frame-border/,
+      )
+      finalize(ROW_CSS_VAR, cssVar.hit, cssVar.detail)
+      const boxShadow = captureRefusal(
+        () => addScaleCorrector({ boxShadow: { correct: correctBorderX } }),
+        /boxShadow/,
+      )
+      finalize(ROW_BOX_SHADOW, boxShadow.hit, boxShadow.detail)
+      const plain = captureRefusal(
+        () =>
+          addScaleCorrector({
+            paddingTop: {
+              correct: (latest) => latest,
+            },
+          }),
+        /worklet/,
+      )
+      finalize(ROW_WORKLET, plain.hit, plain.detail)
+      setStage('refusals sampled')
+    })
+
+    at(T_FLIGHT, () => {
+      setOn(true)
+      setStage('layout flight pressed (100×100 → 280×160)')
+      pollUntil(
+        () => startsRef.current >= 1,
+        now() + START_DEADLINE_MS,
+        (okStart) => {
+          if (!okStart) {
+            finalize(
+              ROW_FLIGHT,
+              false,
+              `layout start never fired within ${START_DEADLINE_MS}ms (starts ${startsRef.current})`,
+            )
+            setStage('flight row finalized (FAIL)')
+            at(STABILITY_MS, () => finishClean())
+            return
+          }
+          pollUntil(
+            () => completesRef.current >= 1,
+            now() + SETTLE_DEADLINE_MS,
+            (okSettle) => {
+              finalize(
+                ROW_FLIGHT,
+                okSettle && startsRef.current >= 1,
+                okSettle
+                  ? `start ${startsRef.current} then complete ${completesRef.current} on the catalog outer`
+                  : `layout complete never fired within ${SETTLE_DEADLINE_MS}ms (starts ${startsRef.current}, completes ${completesRef.current})`,
+              )
+              setStage(okSettle ? 'flight row finalized' : 'flight row finalized (FAIL)')
+              at(STABILITY_MS, () => finishClean())
+            },
+          )
+        },
+      )
+    })
+
+    const finishClean = (): void => {
+      const expected = reportsRef.current.filter(
+        (message) =>
+          /CSS variable|--frame-border/.test(message) ||
+          /boxShadow/.test(message) ||
+          /worklet/.test(message),
+      )
+      const unexpected = reportsRef.current.filter(
+        (message) =>
+          !/CSS variable|--frame-border/.test(message) &&
+          !/boxShadow/.test(message) &&
+          !/worklet/.test(message),
+      )
+      finalize(
+        ROW_CLEAN,
+        unexpected.length === 0,
+        unexpected.length === 0
+          ? `0 unexpected reports; ${expected.length} expected refusal(s) (css-var/boxShadow/worklet)`
+          : `${unexpected.length} unexpected: ${unexpected.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)
+      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 (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>U7g scale-corrector checks</Text>
+      <Text style={styles.subtitle}>
+        catalog Framer-border channel + F1/F3 refusals ({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} · starts={starts} · completes={completes} · {severity}
+      </Text>
+
+      <View style={styles.stage} accessibilityLabel="u7g-scale-corrector-stage">
+        <MotionView
+          layout
+          transition={TRANSITION}
+          onLayoutAnimationStart={onStart}
+          onLayoutAnimationComplete={onComplete}
+          style={[styles.outer, isOn ? styles.outerOn : styles.outerOff]}
+          accessibilityLabel="u7g-scale-corrector-outer"
+        >
+          <MotionView
+            layout
+            initial={false}
+            animate={
+              isOn
+                ? {
+                    borderTopWidth: 5,
+                    borderRightWidth: 5,
+                    borderLeftWidth: 5,
+                    borderBottomWidth: 30,
+                    borderColor: '#000000',
+                  }
+                : {
+                    borderTopWidth: 50,
+                    borderRightWidth: 50,
+                    borderLeftWidth: 50,
+                    borderBottomWidth: 50,
+                    borderColor: '#9900ff',
+                  }
+            }
+            transition={TRANSITION}
+            style={styles.inner}
+            accessibilityLabel="u7g-scale-corrector-inner"
+          />
+        </MotionView>
+      </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>
+  )
+}
+
+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: 180, marginTop: 14 },
+  outer: {
+    position: 'absolute',
+    top: 0,
+    left: 8,
+    backgroundColor: '#e6e6f0',
+  },
+  outerOff: { width: 100, height: 100 },
+  outerOn: { width: 280, height: 160 },
+  inner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderStyle: 'solid',
+    borderColor: '#9900ff',
+    borderTopWidth: 50,
+    borderRightWidth: 50,
+    borderLeftWidth: 50,
+    borderBottomWidth: 50,
+  },
+  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 },
+})