@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ViewportScrollAliasChecksScreen.tsx

@@ -0,0 +1,303 @@
+// U7i useViewportScroll device checks: catalog useTransform-with-useLayoutEffect on the
+// public path. iOS has no tap injection, so the screen self-drives. Discriminators (Decision
+// 86 analog of 77/82): the alias is exported and a container-less call refuses with the
+// named viewport message (F1 — shipping the name is not a viewport). The catalog observable
+// (scrollY → opacity) uses the standing named-container substitution (useScroll({ container })
+// + useTransform). Host window-scroll is the web e2e.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Animated, { scrollTo, useAnimatedRef } from 'react-native-reanimated'
+import { scheduleOnUI } from 'react-native-worklets'
+import { MotionRoot } from '../../native/motion/MotionRoot'
+import { MotionView } from '../../native/motion/MotionView'
+import { ambientNativeSeverity } from '../../native/motion/severity'
+import { useScroll } from '../../native/motion/useScroll'
+import { useViewportScroll } from '../../native/motion/useViewportScroll'
+import { useMotionValueEvent, useTransform } from '../../native/motion/valueHooks'
+import { armProofConsoleTap } from './proofConsoleTap'
+
+const ROW_ALIAS = 'container-less useViewportScroll refuses with the named viewport message'
+const ROW_TRACK = 'named-container useScroll + useTransform: opacity drops on scroll'
+const ROW_CLEAN = 'clean run: only the expected viewport refusal'
+const ROWS = [ROW_ALIAS, ROW_TRACK, ROW_CLEAN] as const
+
+const T_ALIAS = 400
+const T_SCROLL = 900
+const T_SAMPLE = 2200
+const T_CLEAN = 2600
+const SCROLL_Y = 180
+const OPACITY_RANGE = [0, 200] as const
+
+type ScrollHost = {
+  readonly scrollTo?: (args: { readonly y: number; readonly animated?: boolean }) => void
+}
+
+function driveNamedContainerScroll(
+  ref: ReturnType<typeof useAnimatedRef<Animated.ScrollView>>,
+  y: number,
+): void {
+  // Reanimated scrollTo(animated=false) and Android programmatic scrollTo without
+  // animation skip onScroll, so useScroll never sees the offset. Host
+  // scrollTo({ animated: true }) emits the native events the UI handler is bound
+  // to. iOS has no tap injection — this is the self-drive (Decision 86 analog).
+  const host = ref.current as ScrollHost | number | null | undefined
+  if (
+    host !== null &&
+    host !== undefined &&
+    typeof host === 'object' &&
+    typeof host.scrollTo === 'function'
+  ) {
+    host.scrollTo({ y, animated: true })
+    return
+  }
+  scheduleOnUI(() => {
+    'worklet'
+    scrollTo(ref, 0, y, true)
+  })
+}
+
+interface RowResult {
+  readonly pass: boolean
+  readonly detail: string
+}
+
+function isViewportRefusal(message: string): boolean {
+  return /no window viewport analog|requires a container ref to a scrollable source/i.test(message)
+}
+
+function AliasRefusalProbe(): null {
+  useViewportScroll()
+  return null
+}
+
+function ScrollOpacityStage(props: {
+  readonly onOpacity: (value: number) => void
+  readonly onScroll: (value: number) => void
+  readonly scrollRef: ReturnType<typeof useAnimatedRef<Animated.ScrollView>>
+}) {
+  const { scrollY } = useScroll({ container: props.scrollRef })
+  const opacity = useTransform(scrollY, [OPACITY_RANGE[0], OPACITY_RANGE[1]], [1, 0])
+  useMotionValueEvent(opacity, 'change', (value: number) => {
+    props.onOpacity(value)
+  })
+  useMotionValueEvent(scrollY, 'change', (value: number) => {
+    props.onScroll(value)
+  })
+  return (
+    <Animated.ScrollView
+      ref={props.scrollRef}
+      style={styles.scroller}
+      scrollEventThrottle={16}
+      accessibilityLabel="u7i-viewport-scroll-scroller"
+    >
+      <View style={styles.scrollContent}>
+        <MotionView
+          style={[styles.box, { opacity }]}
+          accessibilityLabel="u7i-viewport-scroll-box"
+        />
+      </View>
+    </Animated.ScrollView>
+  )
+}
+
+export function ViewportScrollAliasChecksScreen() {
+  const severity = ambientNativeSeverity()
+  const scrollRef = useAnimatedRef<Animated.ScrollView>()
+  const [stage, setStage] = useState('boot')
+  const [rows, setRows] = useState<Partial<Record<(typeof ROWS)[number], RowResult>>>({})
+  const [opacityNow, setOpacityNow] = useState(1)
+  const [scrollNow, setScrollNow] = useState(0)
+  const [probeOn, setProbeOn] = useState(true)
+
+  const reportsRef = useRef<string[]>([])
+  const opacityRef = useRef(1)
+  const scrollYRef = useRef(0)
+  const restoreTapRef = useRef<null | (() => void)>(null)
+  if (restoreTapRef.current === null) {
+    restoreTapRef.current = armProofConsoleTap(reportsRef.current, (message) =>
+      /motion|useScroll|viewport|container|animate/i.test(message),
+    )
+  }
+
+  const finalize = (id: (typeof ROWS)[number], pass: boolean, detail: string): void => {
+    setRows((previous) => ({ ...previous, [id]: { pass, detail } }))
+  }
+
+  const onOpacity = useCallback((value: number): void => {
+    opacityRef.current = value
+    setOpacityNow(value)
+  }, [])
+  const onScroll = useCallback((value: number): void => {
+    scrollYRef.current = value
+    setScrollNow(value)
+  }, [])
+
+  useEffect(() => {
+    const timers: ReturnType<typeof setTimeout>[] = []
+    const at = (ms: number, run: () => void): void => {
+      timers.push(setTimeout(run, ms))
+    }
+
+    at(T_ALIAS, () => {
+      const hit = reportsRef.current.some(isViewportRefusal)
+      finalize(
+        ROW_ALIAS,
+        hit,
+        hit
+          ? 'container-less alias reported the named viewport refusal'
+          : `no viewport refusal (reports=${reportsRef.current.length})`,
+      )
+      setProbeOn(false)
+      setStage('alias refusal sampled')
+    })
+
+    at(T_SCROLL, () => {
+      driveNamedContainerScroll(scrollRef, SCROLL_Y)
+      setStage(`scrolled to y=${SCROLL_Y}`)
+    })
+
+    at(T_SAMPLE, () => {
+      const opacity = opacityRef.current
+      const y = scrollYRef.current
+      const pass = y >= 80 && opacity < 0.75
+      finalize(
+        ROW_TRACK,
+        pass,
+        pass
+          ? `scrollY=${y.toFixed(1)} opacity=${opacity.toFixed(3)} (named container)`
+          : `scrollY=${y.toFixed(1)} opacity=${opacity.toFixed(3)} — expected scroll≥80 and opacity<0.75`,
+      )
+      setStage(pass ? 'track row finalized' : 'track row finalized (FAIL)')
+    })
+
+    at(T_CLEAN, () => {
+      const unexpected = reportsRef.current.filter((message) => !isViewportRefusal(message))
+      const expected = reportsRef.current.filter(isViewportRefusal)
+      finalize(
+        ROW_CLEAN,
+        unexpected.length === 0,
+        unexpected.length === 0
+          ? `0 unexpected; ${expected.length} expected viewport refusal(s)`
+          : `${unexpected.length} unexpected: ${unexpected.map((message) => message.slice(0, 80)).join(' | ')}`,
+      )
+      setStage('done')
+    })
+
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+      restoreTapRef.current?.()
+      restoreTapRef.current = null
+    }
+  }, [scrollRef])
+
+  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}>U7i viewport-scroll alias checks</Text>
+          <Text style={styles.subtitle}>
+            catalog scrollY→opacity + named-container substitution ({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}>
+            y={scrollNow.toFixed(1)} · opacity={opacityNow.toFixed(3)} · {severity}
+          </Text>
+
+          {probeOn ? <AliasRefusalProbe /> : null}
+          <ScrollOpacityStage scrollRef={scrollRef} onOpacity={onOpacity} onScroll={onScroll} />
+
+          {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',
+  },
+  scroller: { height: 160, marginTop: 14, backgroundColor: '#1a1a24', borderRadius: 12 },
+  scrollContent: { height: 520, padding: 12 },
+  box: {
+    width: 120,
+    height: 120,
+    backgroundColor: '#f9cb29',
+    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/conformanceBanner.ts

@@ -0,0 +1,21 @@
+// The device conformance banner's VERDICT law (REQ-CONFORM-011; M2 r5 major 6e730d4c1a82):
+// unassertable never counts as pass — any routed obligation makes the overall verdict FAIL,
+// UNCONDITIONALLY. This holds even when parity is owned at another altitude:
+// CMP-R7-cross-engine-parity is discharged by the web e2e + device proofs, but that parity does
+// not execute in this suite, so it stays routed and still fails the banner. Styling may
+// distinguish "failed assertion" from "routed obligation", but the VERDICT — what a proof
+// screenshot claims — admits no qualified pass.
+
+export type ConformanceBannerVerdict = 'PASS' | 'FAIL' | 'RUNNING'
+
+export function conformanceBannerVerdict(state: {
+  readonly allDone: boolean
+  readonly rowsPass: boolean
+  readonly suitesClean: boolean
+  readonly routed: number
+}): ConformanceBannerVerdict {
+  if (!state.allDone) return 'RUNNING'
+  if (!state.rowsPass || !state.suitesClean) return 'FAIL'
+  if (state.routed > 0) return 'FAIL'
+  return 'PASS'
+}

package/src/verification/screens/proofConsoleTap.ts

@@ -0,0 +1,18 @@
+// Proof-only console tap. Production MotionView reports typed refusals synchronously
+// during render (resolveAnimateProp → consoleReporter). A parent useEffect tap is too
+// late: children have already rendered. Arm during the parent's render body, before
+// returning children.
+
+export function armProofConsoleTap(sink: string[], keep: (message: string) => boolean): () => void {
+  const original = 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 && keep(message)) sink.push(message)
+    }
+    original.apply(console, args)
+  }
+  return () => {
+    console.error = original
+  }
+}

package/src/verification.ts

@@ -0,0 +1,47 @@
+// Engine-intrinsic verification surface (REQ-EXHARNESS-010,
+// specs/DOGFOOD-MIGRATION-BUILD-PACKET.md FLAG 1): the probes and deterministic check screens
+// that prove the engine ON DEVICE live with the engine — they are engine code, exempt from the
+// consumer-isolation ban only because they live here, never because an app path is allowlisted.
+// This entry exists for the proof-harness app shell to mount them; it is NOT the product surface
+// and nothing here may appear in a consumer example (that is the escape hatch the dogfood law
+// forbids). Native-only by design: verification drives the worklet runtime, so there is no web
+// route for this subpath.
+
+export { ChoreographyGalleryScreen } from './verification/screens/ChoreographyGalleryScreen'
+export { ColorBindingChecksScreen } from './verification/screens/ColorBindingChecksScreen'
+export { ConformanceScreen } from './verification/screens/ConformanceScreen'
+export { ContentionProbeScreen } from './verification/screens/ContentionProbeScreen'
+export { DriverSmokeScreen } from './verification/screens/DriverSmokeScreen'
+export { BooleanAnimateChecksScreen } from './verification/screens/BooleanAnimateChecksScreen'
+export { DynamicDragConfigChecksScreen } from './verification/screens/DynamicDragConfigChecksScreen'
+export { GestureChecksScreen } from './verification/screens/GestureChecksScreen'
+export { InstantTransitionChecksScreen } from './verification/screens/InstantTransitionChecksScreen'
+export { LayoutAnimationStartChecksScreen } from './verification/screens/LayoutAnimationStartChecksScreen'
+export { LayoutChecksScreen } from './verification/screens/LayoutChecksScreen'
+export { LayoutCommitSpikeScreen } from './verification/screens/LayoutCommitSpikeScreen'
+export { MotionViewChecksScreen } from './verification/screens/MotionViewChecksScreen'
+export { PresenceChecksScreen } from './verification/screens/PresenceChecksScreen'
+export { ReducedMotionChecksScreen } from './verification/screens/ReducedMotionChecksScreen'
+export { RestThresholdChecksScreen } from './verification/screens/RestThresholdChecksScreen'
+export { ScaleCorrectorChecksScreen } from './verification/screens/ScaleCorrectorChecksScreen'
+export { ViewportScrollAliasChecksScreen } from './verification/screens/ViewportScrollAliasChecksScreen'
+export { FrameDataChecksScreen } from './verification/screens/FrameDataChecksScreen'
+export { ArcPathChecksScreen } from './verification/screens/ArcPathChecksScreen'
+export { DurationOnlyTweenChecksScreen } from './verification/screens/DurationOnlyTweenChecksScreen'
+export { CompletionChecksScreen } from './verification/screens/CompletionChecksScreen'
+export { TransitionDefaultSelectionChecksScreen } from './verification/screens/TransitionDefaultSelectionChecksScreen'
+export { SharedLayoutContinuityChecksScreen } from './verification/screens/SharedLayoutContinuityChecksScreen'
+export { SharedLayoutCrossfadeChecksScreen } from './verification/screens/SharedLayoutCrossfadeChecksScreen'
+export { LayoutIdentityWorkletProbe } from './verification/probe/LayoutIdentityWorkletProbe'
+export { WorkletParityProbe } from './verification/probe/WorkletParityProbe'
+// Seal-r16 F2: proof-only settle/layout-callback witnesses — NOT on the consumer-facing package
+// root (BRIEF Motion-shaped public-API law). The dogfood purity ban still forbids this subpath
+// inside apps/mobile/src/**; the proof gallery reads JS-side last-pushed cells instead, and
+// isolation/verification screens may import these readers here.
+export {
+  armUiProofWitnesses,
+  lastPushedProofLayoutCallbackWitness,
+  lastPushedProofSettleEmissionCount,
+  uiProofLayoutCallbackWitness,
+  uiProofSettleEmissionCount,
+} from './native/driver/workletDriver'

package/src/web.ts

@@ -0,0 +1,98 @@
+'use client'
+// Web route of the single public import (REQ-UNIVERSAL-001/REQ-WEB-010): re-export the web
+// driver-peer. Web bundlers land here via the `browser`/`import`/`default` exports conditions;
+// the shim (not this file) owns normalization and the motion/react binding.
+//
+// Explicit Native Motion exports below exclude shim-only helpers such as `createView`. Web remains
+// a superset while the native namespace gate still requires every portable native name. Pinned
+// additions are re-exported explicitly by the web driver so each one remains census-classified.
+
+export type {
+  DragControlOptions,
+  DragControlsHandle,
+  DragInfo,
+  TapCallback,
+  TapInfo,
+  MotionTargetProps,
+  Target,
+  TransformProperties,
+  TransformTemplate,
+  Transition,
+  TransitionType,
+} from '@unrulysystems/native-motion-core'
+// Product dual-authority release helpers — key parity with the native entry.
+export { absoluteDragOrigin, selectReleaseTarget } from '@unrulysystems/native-motion-core'
+export {
+  AnimatePresence,
+  AnimateSharedLayout,
+  Image,
+  LazyMotion,
+  LayoutGroup,
+  LayoutScrollOffsetProvider,
+  createLayoutScrollOffsetRef,
+  recordLayoutScrollOffsetFromEvent,
+  MotionConfig,
+  MotionLengthLayoutProvider,
+  MotionRoot,
+  MotionValue,
+  Reorder,
+  disableInstantTransitions,
+  domAnimation,
+  domMax,
+  motion,
+  m,
+  mix,
+  addScaleCorrector,
+  useIsPresent,
+  useMotionValue,
+  useMotionValueEvent,
+  usePresence,
+  usePresenceData,
+  animate,
+  useAnimate,
+  useAnimateMini,
+  useAnimationControls,
+  useCycle,
+  type Cycle,
+  type CycleState,
+  type AnimateFn,
+  type AnimationPlaybackControls,
+  type AnimationScope,
+  useDragControls,
+  DragControls,
+  useInView,
+  useInstantTransition,
+  useMotionTemplate,
+  useReducedMotion,
+  useScroll,
+  useViewportScroll,
+  useSpring,
+  useTransform,
+  useTime,
+  useVelocity,
+  frameData,
+  arc,
+  stagger,
+  Text,
+  View,
+  wrap,
+  type ImageProps,
+  type LayoutGroupInherit,
+  type LayoutGroupProps,
+  type LayoutScrollOffset,
+  type LayoutScrollOffsetProviderProps,
+  type LayoutScrollOffsetRef,
+  type MotionConfigProps,
+  type MotionConfigTransition,
+  type MotionLengthLayoutProviderProps,
+  type MotionRootProps,
+  type ReducedMotionConfig,
+  type ScrollMotionValues,
+  type SpringValueOptions,
+  type TextProps,
+  type TransformOptions,
+  type UseScrollOptions,
+  type ViewProps,
+  type FrameData,
+  type ArcOptions,
+} from '@unrulysystems/native-motion-web'