@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/TransitionDefaultSelectionChecksScreen.tsx

@@ -0,0 +1,514 @@
+// transition-default-selection device checks (findings F1/F5/F6) — how an under-specified flat
+// property-lane transition bag resolves to a generator, proven on the committed-sample channel
+// (onUpdate), not host paint. iOS has no tap injection, so the screen self-drives.
+//
+// The three arms, all against `motion@12.42.2`:
+//   F1 — a TYPED `{ type: 'tween', duration }` with no authored ease runs the pin's easeOut base
+//        `[0, 0, 0.58, 1]` (`animateMotionValue`'s options base, motion-value.ts:45-49), NOT the
+//        generator default `[0.25, 0.1, 0.35, 1]`. The sibling DurationOnlyTweenChecksScreen
+//        covers the UNTYPED arm; this is the typed one.
+//   F5 — `{ duration: 0 }` is INSTANT: the final value commits with no constructed trajectory
+//        (`makeAnimationInstant`, motion-value.ts:89-98). An authored `delay` is still honored.
+//   F6 — a flat ease-only bag is a 300ms keyframes tween carrying the authored ease; a flat
+//        orchestration-only bag merges the PER-KEY default, never the generic REQ-SPRING-003
+//        spring 100/10/1.
+//
+// THE F6 LEGS MUST MOUNT, NEVER RETARGET. F6's flat-arm merge lives in
+// `motionViewController.perPropTransition`, which the controller consults only on START-shaped
+// seams (mount entrance, array/color starts, paired/deferred flushes). The scalar UPDATE retarget
+// lane does not consult it TODAY — and that gap is not a design law but finding F6-a, a DEFECT
+// this unit's packet DECLARES DEFERRED. The distinction is load-bearing for whoever reads this
+// next: the merge is unreachable at the retarget seam only until F6-a closes, at which point the
+// lane does consult it and an F6 retarget row becomes valid (and owed). Until then, driving an F6
+// leg as a retarget would exercise deferred behavior and fail legitimately, so each F6 leg is
+// mounted on demand and its MOUNT is its start. Measured at the seam, a flat `{ delay: 0.2 }`
+// resolves `{type:'spring', stiffness:500, damping:25, restSpeed:10, delay:0.2}` on the transform
+// key `x`, and `{type:'keyframes', ease:[0.25,0.1,0.35,1], duration:0.3, delay:0.2}` on the
+// non-transform key `opacity`.
+//
+// The per-key TRANSFORM spring is deliberately NOT a row: it settles in ~100ms, so under a 40ms dt
+// clamp the whole flight is 2-3 frames and its 12.0% overshoot peak can be missed entirely — a
+// band over it would flake on a loaded host instead of measuring the engine. The non-transform leg
+// carries the same F6 per-key law over a 300ms flight that stays well sampled at every clamp, and
+// discriminates just as sharply: the generic spring overshoots 16.3% (measured stable across
+// dt 16.67/25/40) while a keyframes tween never exceeds its target at all.
+//
+// LOAD INDEPENDENCE is load-bearing here. The driver's dt CEILING (40ms; owner REQ-CLOCK-003,
+// consumer REQ-DRIVER-012) stretches a
+// flight under host load — the charter's floor cites a 1s flight reaching ~1.9s — so a mid-flight
+// band keyed to a WALL-CLOCK offset reads a different PROGRESS on a busy host than on an idle one,
+// and flakes. Every curve-shape band below is sampled at a fraction of the flight's OWN observed
+// span (`atSpanFraction`), and every band was measured across a dt 16.67/25/40 sweep against the
+// reference driver before being written down.
+
+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_F1_EASEOUT = 'F1: typed { type: "tween", duration } with no ease rides the easeOut base'
+const ROW_F1_AUTHORED = 'F1 control: an authored ease spelling suppresses the easeOut base'
+const ROW_F5_INSTANT = 'F5: { duration: 0 } commits the target with NO trajectory'
+const ROW_F5_DELAY = 'F5: { duration: 0, delay } holds, then commits instantly'
+const ROW_F6_FLAT_EASE = 'F6: a flat ease-only bag is a 300ms keyframes tween, not a spring'
+const ROW_F6_FLAT_DELAY = 'F6: a flat delay-only bag merges the per-key default at MOUNT'
+const ROW_CLEAN = 'clean run: zero unexpected reports'
+const ROWS = [
+  ROW_F1_EASEOUT,
+  ROW_F1_AUTHORED,
+  ROW_F5_INSTANT,
+  ROW_F5_DELAY,
+  ROW_F6_FLAT_EASE,
+  ROW_F6_FLAT_DELAY,
+  ROW_CLEAN,
+] as const
+
+// Stage boundaries. Each leg is given far more than its nominal length so a dt-clamp stretch under
+// host load lands inside its own window rather than being cut mid-flight (a truncated leg reads as
+// a FAIL, which would be the harness lying about the engine).
+const T_F1_START = 80
+const T_F1_END = 2600
+const T_F5_MOUNT = 2650
+const T_F5_END = 4000
+const T_F5_DELAY_MOUNT = 4050
+const T_F5_DELAY_END = 5800
+const T_F6_EASE_MOUNT = 5850
+const T_F6_EASE_END = 7200
+const T_F6_DELAY_MOUNT = 7250
+const T_F6_DELAY_END = 8800
+const T_CLEAN = 9000
+
+const X_TARGET = 100
+const OPACITY_TARGET = 1
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Sample {
+  readonly value: number
+  readonly at: number
+}
+
+/**
+ * The sample nearest `fraction` of the way through the flight's OWN observed span.
+ *
+ * t0 is the first sample off the origin — never the mount/command-edge sample, because on device
+ * the first onUpdate can carry the pre-flight value one crossing before the tween clock starts.
+ * tEnd is the first sample that has effectively arrived. Normalizing by the observed span is what
+ * makes the curve-shape bands immune to a dt-clamp stretch: a flight that takes 1.9s instead of
+ * 1.0s under load is still sampled at the same PROGRESS, because the stretch scales the flight.
+ */
+function atSpanFraction(
+  samples: readonly Sample[],
+  target: number,
+  fraction: number,
+): Sample | null {
+  const first = samples.find((s) => s.value > target * 0.005)
+  if (first === undefined) return null
+  const arrived = samples.find((s) => s.value >= target * 0.995)
+  if (arrived === undefined) return null
+  const at = first.at + (arrived.at - first.at) * fraction
+  let best: Sample | null = null
+  for (const sample of samples) {
+    if (sample.at < first.at || sample.at > arrived.at) continue
+    if (best === null || Math.abs(sample.at - at) < Math.abs(best.at - at)) best = sample
+  }
+  return best
+}
+
+/** Samples strictly between the origin and the target — the evidence that a trajectory was built. */
+function interiorSamples(samples: readonly Sample[], target: number): readonly Sample[] {
+  return samples.filter((s) => s.value > target * 0.02 && s.value < target * 0.98)
+}
+
+function peakOf(samples: readonly Sample[]): number {
+  return samples.reduce((max, s) => Math.max(max, s.value), 0)
+}
+
+export function TransitionDefaultSelectionChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const [targetF1, setTargetF1] = useState<'a' | 'b'>('a')
+  const [targetF1Control, setTargetF1Control] = useState<'a' | 'b'>('a')
+  // The F5/F6 legs mount on demand: their MOUNT is the start seam F6's per-key merge requires
+  // (see the F6-a note in the header). A boolean per leg, never a retarget.
+  const [mountF5, setMountF5] = useState(false)
+  const [mountF5Delay, setMountF5Delay] = useState(false)
+  const [mountF6Ease, setMountF6Ease] = useState(false)
+  const [mountF6Delay, setMountF6Delay] = useState(false)
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+
+  const samplesF1 = useRef<Sample[]>([])
+  const samplesF1Control = useRef<Sample[]>([])
+  const samplesF5 = useRef<Sample[]>([])
+  const samplesF5Delay = useRef<Sample[]>([])
+  const samplesF6Ease = useRef<Sample[]>([])
+  const samplesF6Delay = useRef<Sample[]>([])
+  // The mount edge each on-demand leg is measured against — an instant commit and an honored
+  // delay are both only meaningful relative to when the leg actually mounted.
+  const mountedAtF5Delay = useRef(0)
+  const mountedAtF6Delay = useRef(0)
+
+  const reportsRef = useRef<string[]>([])
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|transition|spring|tween/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const pushX =
+    (sink: { current: Sample[] }) =>
+    (latest: Readonly<Record<string, string | number>>): void => {
+      if (typeof latest.x === 'number') sink.current.push({ value: latest.x, at: Date.now() })
+    }
+  const pushOpacity =
+    (sink: { current: Sample[] }) =>
+    (latest: Readonly<Record<string, string | number>>): void => {
+      if (typeof latest.opacity === 'number') {
+        sink.current.push({ value: latest.opacity, at: Date.now() })
+      }
+    }
+  const onF1 = useCallback(pushX(samplesF1), [])
+  const onF1Control = useCallback(pushX(samplesF1Control), [])
+  const onF5 = useCallback(pushX(samplesF5), [])
+  const onF5Delay = useCallback(pushX(samplesF5Delay), [])
+  const onF6Ease = useCallback(pushX(samplesF6Ease), [])
+  const onF6Delay = useCallback(pushOpacity(samplesF6Delay), [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(T_F1_START, () => {
+      setTargetF1('b')
+      setTargetF1Control('b')
+      setStage('F1 typed-tween legs started (no ease / authored linear)')
+    })
+
+    at(T_F1_END, () => {
+      // Sampled at ONE FIFTH of the span, not the half. The easeOut and retired-default curves
+      // CROSS near f=0.35, so at the half they are only ~4.7 apart and a band admitting easeOut
+      // would also admit the regression. Measured across dt 16.67/25/40: easeOut 30.85..36.42,
+      // the retired [0.25,0.1,0.35,1] default 25.33..25.45, linear 21.67..24.00. The band admits
+      // easeOut at every clamp and excludes both alternatives.
+      const mid = atSpanFraction(samplesF1.current, X_TARGET, 0.2)
+      const pass = mid !== null && mid.value >= 28 && mid.value <= 40
+      finalize(
+        ROW_F1_EASEOUT,
+        pass,
+        mid === null
+          ? `no arrival within the window (${samplesF1.current.length} samples)`
+          : `fifth-span sample reads ${mid.value.toFixed(1)} — easeOut 30.9..36.4, ` +
+              `the retired default 25.4, linear 21.7..24.0`,
+      )
+
+      // The control reads cleanest at the HALF, where linear (50.0) is far from easeOut (66.7);
+      // its question is only whether an authored ease suppresses the base, so it does not need
+      // to separate linear from the retired default.
+      const control = atSpanFraction(samplesF1Control.current, X_TARGET, 0.5)
+      const controlPass = control !== null && control.value >= 44 && control.value <= 56
+      finalize(
+        ROW_F1_AUTHORED,
+        controlPass,
+        control === null
+          ? `no arrival within the window (${samplesF1Control.current.length} samples)`
+          : `half-span sample reads ${control.value.toFixed(1)} — authored linear 50.0 ` +
+              `(the easeOut base is suppressed, never merged; easeOut would read 66.7)`,
+      )
+
+      setStage(pass && controlPass ? 'F1 pass; F5 instant leg mounts' : 'F1 FAIL; F5 leg mounts')
+    })
+
+    at(T_F5_MOUNT, () => {
+      setMountF5(true)
+    })
+
+    at(T_F5_END, () => {
+      const samples = samplesF5.current
+      const interior = interiorSamples(samples, X_TARGET)
+      const arrived = samples.some((s) => s.value >= X_TARGET * 0.995)
+      // An instant builds NO trajectory: the final value commits and nothing lands between the
+      // origin and the target. Interior samples would mean a constructed animation.
+      const pass = arrived && interior.length === 0
+      finalize(
+        ROW_F5_INSTANT,
+        pass,
+        `${interior.length} interior samples (an instant builds none), arrived=${String(arrived)}, ` +
+          `${samples.length} samples total`,
+      )
+      setStage(pass ? 'F5 instant pass; delayed-instant mounts' : 'F5 FAIL; delay leg mounts')
+    })
+
+    at(T_F5_DELAY_MOUNT, () => {
+      mountedAtF5Delay.current = Date.now()
+      setMountF5Delay(true)
+    })
+
+    at(T_F5_DELAY_END, () => {
+      const samples = samplesF5Delay.current
+      const interior = interiorSamples(samples, X_TARGET)
+      const arrival = samples.find((s) => s.value >= X_TARGET * 0.995)
+      const heldMs = arrival === undefined ? 0 : arrival.at - mountedAtF5Delay.current
+      // The authored 500ms delay is honored, then the commit is still instant. Measured 500..525ms
+      // across the dt sweep; the floor is generous below because a stretch only ever makes the
+      // hold LONGER, and the mount edge adds host latency on top.
+      const pass = arrival !== undefined && interior.length === 0 && heldMs >= 350
+      finalize(
+        ROW_F5_DELAY,
+        pass,
+        arrival === undefined
+          ? `never committed (${samples.length} samples)`
+          : `held ${heldMs}ms from mount before committing (authored delay 500ms), ` +
+              `${interior.length} interior samples`,
+      )
+      setStage(pass ? 'F5 delay pass; F6 flat-ease mounts' : 'F5 delay FAIL; F6 ease mounts')
+    })
+
+    at(T_F6_EASE_MOUNT, () => {
+      setMountF6Ease(true)
+    })
+
+    at(T_F6_EASE_END, () => {
+      // A flat `{ ease: 'linear' }` bag is DEFINED-but-typeless: the keyframes generator at its
+      // 300ms default, carrying the authored ease. Measured peak exactly 1.0000x target and span
+      // 275..283ms across the dt sweep. The generic spring would overshoot; linear never does.
+      const samples = samplesF6Ease.current
+      const mid = atSpanFraction(samples, X_TARGET, 0.5)
+      const peak = peakOf(samples)
+      const pass = mid !== null && mid.value >= 42 && mid.value <= 58 && peak <= X_TARGET * 1.005
+      finalize(
+        ROW_F6_FLAT_EASE,
+        pass,
+        mid === null
+          ? `no arrival within the window (${samples.length} samples)`
+          : `half-span sample reads ${mid.value.toFixed(1)} (linear 50), peak ` +
+              `${peak.toFixed(2)} — a spring would overshoot the target`,
+      )
+      setStage(pass ? 'F6 ease pass; F6 flat-delay mounts' : 'F6 ease FAIL; delay leg mounts')
+    })
+
+    at(T_F6_DELAY_MOUNT, () => {
+      mountedAtF6Delay.current = Date.now()
+      setMountF6Delay(true)
+    })
+
+    at(T_F6_DELAY_END, () => {
+      // A flat `{ delay: 0.2 }` bag on the NON-TRANSFORM key `opacity` merges the per-key default
+      // `{type:'keyframes', ease:[0.25,0.1,0.35,1], duration:0.3, delay:0.2}` at the mount seam.
+      // The discriminator is binary and clock-free: a keyframes tween never exceeds its target,
+      // while the generic REQ-SPRING-003 spring the pre-F6 backstop resolved overshoots 16.3%
+      // (measured stable at dt 16.67/25/40). The delay must also survive the merge.
+      const samples = samplesF6Delay.current
+      const peak = peakOf(samples)
+      const arrival = samples.find((s) => s.value > OPACITY_TARGET * 0.02)
+      const delayedMs = arrival === undefined ? 0 : arrival.at - mountedAtF6Delay.current
+      const arrived = samples.some((s) => s.value >= OPACITY_TARGET * 0.995)
+      const pass = arrived && peak <= OPACITY_TARGET * 1.005 && delayedMs >= 120
+      finalize(
+        ROW_F6_FLAT_DELAY,
+        pass,
+        `peak ${peak.toFixed(4)} — the per-key 0.3s tween never exceeds ${OPACITY_TARGET}, ` +
+          `the generic spring peaks 1.163; flight began ${delayedMs}ms after mount ` +
+          `(authored delay 200ms), arrived=${String(arrived)}`,
+      )
+      setStage(pass ? 'F6 delay pass' : 'F6 delay FAIL')
+    })
+
+    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
+    }
+  }, [])
+
+  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}>transition-default-selection checks</Text>
+          <Text style={styles.subtitle}>
+            F1 easeOut base · F5 duration-zero instant · F6 flat sparse-bag ({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>
+
+          <View style={styles.track}>
+            <MotionView
+              animate={targetF1 === 'a' ? { x: 0 } : { x: X_TARGET }}
+              transition={{ type: 'tween', duration: 1 }}
+              onUpdate={onF1}
+              style={styles.box}
+              accessibilityLabel="tds-f1-easeout-box"
+            />
+            <MotionView
+              animate={targetF1Control === 'a' ? { x: 0 } : { x: X_TARGET }}
+              transition={{ type: 'tween', duration: 1, ease: 'linear' }}
+              onUpdate={onF1Control}
+              style={[styles.box, styles.boxControl]}
+              accessibilityLabel="tds-f1-authored-box"
+            />
+            {mountF5 ? (
+              <MotionView
+                initial={{ x: 0 }}
+                animate={{ x: X_TARGET }}
+                transition={{ duration: 0 }}
+                onUpdate={onF5}
+                style={[styles.box, styles.boxInstant]}
+                accessibilityLabel="tds-f5-instant-box"
+              />
+            ) : (
+              <View style={[styles.box, styles.boxIdle]} />
+            )}
+            {mountF5Delay ? (
+              <MotionView
+                initial={{ x: 0 }}
+                animate={{ x: X_TARGET }}
+                transition={{ duration: 0, delay: 0.5 }}
+                onUpdate={onF5Delay}
+                style={[styles.box, styles.boxInstant]}
+                accessibilityLabel="tds-f5-delay-box"
+              />
+            ) : (
+              <View style={[styles.box, styles.boxIdle]} />
+            )}
+            {mountF6Ease ? (
+              <MotionView
+                initial={{ x: 0 }}
+                animate={{ x: X_TARGET }}
+                transition={{ ease: 'linear' }}
+                onUpdate={onF6Ease}
+                style={[styles.box, styles.boxFlat]}
+                accessibilityLabel="tds-f6-flatease-box"
+              />
+            ) : (
+              <View style={[styles.box, styles.boxIdle]} />
+            )}
+            {mountF6Delay ? (
+              <MotionView
+                initial={{ opacity: 0 }}
+                animate={{ opacity: OPACITY_TARGET }}
+                transition={{ delay: 0.2 }}
+                onUpdate={onF6Delay}
+                style={[styles.box, styles.boxFlat]}
+                accessibilityLabel="tds-f6-flatdelay-box"
+              />
+            ) : (
+              <View style={[styles.box, styles.boxIdle]} />
+            )}
+          </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>
+            )
+          })}
+        </View>
+      </View>
+    </MotionRoot>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 52, paddingHorizontal: 8 },
+  title: { color: '#fff', fontSize: 20, fontWeight: '700', textAlign: 'center' },
+  subtitle: { color: '#8a8aa0', fontSize: 11, marginTop: 6, textAlign: 'center' },
+  banner: {
+    alignSelf: 'center',
+    paddingHorizontal: 36,
+    paddingVertical: 8,
+    borderRadius: 10,
+    marginTop: 14,
+    marginBottom: 8,
+  },
+  pass: { backgroundColor: '#1d7a3e' },
+  fail: { backgroundColor: '#a32633' },
+  running: { backgroundColor: '#7a641d' },
+  bannerText: { color: '#fff', fontSize: 20, fontWeight: '800', letterSpacing: 2 },
+  tally: { color: '#e6e6f0', fontSize: 13, fontWeight: '700', textAlign: 'center' },
+  tallyDetail: { color: '#f87171', fontSize: 10, marginTop: 3, textAlign: 'center' },
+  track: { marginTop: 8, marginBottom: 4 },
+  box: {
+    width: 24,
+    height: 24,
+    marginTop: 5,
+    backgroundColor: '#ef4444',
+    borderRadius: 6,
+  },
+  boxControl: { backgroundColor: '#38bdf8' },
+  boxInstant: { backgroundColor: '#a78bfa' },
+  boxFlat: { backgroundColor: '#f97316' },
+  boxIdle: { backgroundColor: '#23233a' },
+  row: { flexDirection: 'row', marginTop: 8 },
+  verdict: { width: 46, fontSize: 11, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  pending: { color: '#8a8aa0' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 12, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 10, marginTop: 2 },
+})