@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/LayoutCommitSpikeScreen.tsx

@@ -0,0 +1,142 @@
+// L3 spike probe 1 (specs/L3-BUILD-PACKET.md §A): does a UI-thread frame callback observe the
+// COMMITTED layout in the same frame that paints it? The toggling box is the M2.5 smoke's (same
+// layout change, NO correction applied — this probe only observes). A worklet-driven MAGENTA
+// indicator bar encodes what `measure()` returned THIS frame into the painted frame itself
+// (translateX = measured pageX), so the frame-stepped scan can compare, per rendered frame, the
+// box's painted position against the measurement the frame callback saw while producing that
+// frame. Same-frame ordering holds iff the indicator jumps in the SAME rendered frame as the
+// box — that is the entire empirical question of spike A; a correction applied at that point in
+// the callback would land before paint. No core code crosses here; the probe is pure Reanimated
+// (measure + useFrameCallback + shared values).
+
+import { useEffect, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { createNoFlashLayoutTransition } from '../../native/motion/layoutTransition'
+import Animated, {
+  Easing,
+  measure,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useFrameCallback,
+  useSharedValue,
+  withTiming,
+  type LayoutAnimationFunction,
+} from 'react-native-reanimated'
+
+const TOGGLE_MS = 2200
+
+// Which probe this build runs (compile-time, like App.tsx SCREEN):
+// 1 = same-frame measure ordering (no correction; DISPROVEN — packet Findings 2026-07-07).
+// 2 = commit-time initialValues via a CUSTOM layout transition (path B): if the first painted
+//     frame after a layout change shows the box at its OLD rect, the commit hook applies
+//     initialValues BEFORE paint — zero wrong frames by construction. Linear 800 ms timing makes
+//     the trace unambiguous (a smooth ramp, never a >1-frame jump). Distinct from the forbidden
+//     sharedTransitionTag machinery; probe-level Reanimated animators only. PROVEN.
+// 3 = the REAL L3 path: `createNoFlashLayoutTransition` — core springs stepping every channel
+//     (the rung's shipping mechanism). The zero-flash re-verification runs against THIS probe.
+const PROBE: 1 | 2 | 3 = 3
+
+const realNoFlashTransition = createNoFlashLayoutTransition()!
+
+const flipProbeTransition: LayoutAnimationFunction = (values) => {
+  'worklet'
+  return {
+    initialValues: {
+      originX: values.currentOriginX,
+      originY: values.currentOriginY,
+      width: values.currentWidth,
+      height: values.currentHeight,
+    },
+    animations: {
+      originX: withTiming(values.targetOriginX, { duration: 800, easing: Easing.linear }),
+      originY: withTiming(values.targetOriginY, { duration: 800, easing: Easing.linear }),
+      width: withTiming(values.targetWidth, { duration: 800, easing: Easing.linear }),
+      height: withTiming(values.targetHeight, { duration: 800, easing: Easing.linear }),
+    },
+  }
+}
+
+export function LayoutCommitSpikeScreen() {
+  const [flipped, setFlipped] = useState(false)
+  const boxRef = useAnimatedRef<Animated.View>()
+  // What measure() saw this frame, painted INTO the frame via the indicator bar.
+  const measuredX = useSharedValue(0)
+  const measuredW = useSharedValue(0)
+
+  useFrameCallback(() => {
+    'worklet'
+    const m = measure(boxRef)
+    if (m === null) return // unmeasured this frame — fail-closed, indicator holds
+    measuredX.value = m.pageX
+    measuredW.value = m.width
+  }, true)
+
+  useEffect(() => {
+    const timer = setInterval(() => setFlipped((f) => !f), TOGGLE_MS)
+    return () => clearInterval(timer)
+  }, [])
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: measuredX.value }],
+    width: measuredW.value,
+  }))
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Native Motion</Text>
+      <Text style={styles.subtitle}>
+        L3 spike probe {PROBE}:{' '}
+        {PROBE === 1 ? 'same-frame measure ordering' : 'commit-time initialValues (path B)'} —
+        alignSelf {flipped ? 'end' : 'start'} + width {flipped ? 128 : 64}
+      </Text>
+      <View style={styles.arena}>
+        <Animated.View
+          ref={boxRef}
+          {...(PROBE === 2
+            ? { layout: flipProbeTransition }
+            : PROBE === 3
+              ? { layout: realNoFlashTransition }
+              : {})}
+          style={[styles.box, flipped ? styles.boxFlipped : styles.boxHome]}
+        />
+      </View>
+      {/* The measurement indicator: absolute at screen left, translated by measured pageX and
+          sized to measured width — the frame callback's view of the layout, painted into the
+          same frame. Magenta for the scan (the box is green). */}
+      <Animated.View style={[styles.indicator, indicatorStyle]} />
+      <Text style={styles.mode}>
+        magenta bar = measure() seen by THIS frame's callback ·{' '}
+        {PROBE === 1
+          ? 'no correction applied · probe only'
+          : PROBE === 2
+            ? 'linear initialValues transition · probe only'
+            : 'REAL no-flash transition (core springs) · the shipping path'}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0b0b12',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  title: { color: '#fff', fontSize: 28, fontWeight: '700' },
+  subtitle: { color: '#8a8aa0', fontSize: 13, marginTop: 6, marginBottom: 40, textAlign: 'center' },
+  arena: { alignSelf: 'stretch', height: 160, justifyContent: 'center' },
+  box: { height: 64, borderRadius: 16, backgroundColor: '#58c47a' },
+  boxHome: { alignSelf: 'flex-start', width: 64 },
+  boxFlipped: { alignSelf: 'flex-end', width: 128 },
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    bottom: 120,
+    height: 10,
+    borderRadius: 3,
+    backgroundColor: '#e040fb',
+  },
+  mode: { color: '#6f6f85', fontSize: 11, marginTop: 24, textAlign: 'center' },
+})