@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/PresenceChecksScreen.tsx

@@ -0,0 +1,614 @@
+// M2.3 presence-binding checks (specs/M2.3-BUILD-PACKET.md §pinned semantics). Rows 1–8 drive the
+// binding + a ManualClock/ManualScheduler graph — fully deterministic, no real time. Row 9 is LIVE
+// (review cycle 1 major 2): a real usePresence consumer inside a real AnimatePresence must get the
+// isPresent=false interval and control its own removal. A screenshot is the assertion; try/catch is
+// evidence capture, never suppression.
+
+import { useEffect, useRef, useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import {
+  InvalidTargetError,
+  ManualClock,
+  ManualScheduler,
+  createMotionGraph,
+  type MotionGraph,
+  type PresenceChild,
+  type PresenceMode,
+  type Target,
+} from '@unrulysystems/native-motion-core'
+import {
+  AnimatePresence,
+  decoratePresenceChild,
+  useIsPresent,
+  usePresence,
+} from '../../native/motion/AnimatePresence'
+import { createPresenceBinding } from '../../native/motion/presenceBinding'
+
+const DT = 16.67
+const TWEEN = { type: 'tween', duration: 0.3 } as const
+
+interface Row {
+  readonly id: string
+  readonly pass: boolean
+  readonly detail: string
+}
+
+interface Rig {
+  readonly graph: MotionGraph
+  readonly scheduler: ManualScheduler
+}
+
+function rig(): Rig {
+  const clock = new ManualClock()
+  const scheduler = new ManualScheduler(clock)
+  return { graph: createMotionGraph({ clock, scheduler }), scheduler }
+}
+
+const A: PresenceChild = { key: 'a', animate: { opacity: 1 } }
+const B: PresenceChild = {
+  key: 'b',
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 40 },
+  transition: TWEEN,
+}
+
+function checkDropRetainRemove(): Row {
+  const id = 'drop → retained exiting → removed at settle'
+  try {
+    const { graph, scheduler } = rig()
+    let exits = 0
+    const binding = createPresenceBinding({ graph, onExitComplete: () => (exits += 1) })
+    binding.sync([A, B])
+    if (!binding.mounted().includes('b'))
+      return { id, pass: false, detail: 'b not mounted after commit' }
+    binding.sync([A])
+    if (!binding.mounted().includes('b') || binding.stateOf('b') !== 'exiting') {
+      return {
+        id,
+        pass: false,
+        detail: `dropped b: mounted=${binding.mounted().join(',')} state=${binding.stateOf('b')}`,
+      }
+    }
+    const held = binding.resolvedExitTarget('b')
+    scheduler.frames(6, DT) // ~100ms of a 300ms tween
+    if (!binding.mounted().includes('b'))
+      return { id, pass: false, detail: 'removed before the exit settled' }
+    scheduler.frames(30, DT) // well past 300ms
+    if (binding.mounted().includes('b'))
+      return { id, pass: false, detail: 'still mounted after the exit settled' }
+    if (exits !== 1)
+      return { id, pass: false, detail: `onExitComplete fired ${exits}×, want exactly 1` }
+    if (held === undefined || held['opacity'] !== 0 || held['x'] !== 40) {
+      return { id, pass: false, detail: `exit target not held: ${JSON.stringify(held)}` }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'retained through the exit, removed at settle, onExitComplete once, target held',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkCancelContinuity(): Row {
+  const id = 're-entry mid-exit cancels with continuity'
+  try {
+    const { graph, scheduler } = rig()
+    const binding = createPresenceBinding({ graph })
+    binding.sync([A, B])
+    binding.sync([A])
+    scheduler.frames(6, DT)
+    const midProgress = binding.exitProgress('b')
+    if (midProgress === undefined || midProgress <= 0 || midProgress >= 1) {
+      return { id, pass: false, detail: `exit progress not in flight: ${String(midProgress)}` }
+    }
+    binding.sync([A, B]) // re-enter mid-exit
+    if (binding.stateOf('b') !== 'present' || !binding.isPresent('b')) {
+      return {
+        id,
+        pass: false,
+        detail: `re-entry state=${binding.stateOf('b')} isPresent=${String(binding.isPresent('b'))}`,
+      }
+    }
+    const atCancel = binding.exitProgress('b')
+    if (atCancel === undefined || Math.abs(atCancel - midProgress) > 1e-9) {
+      return {
+        id,
+        pass: false,
+        detail: `progress snapped on cancel: ${String(midProgress)} → ${String(atCancel)}`,
+      }
+    }
+    scheduler.frames(60, DT)
+    const settledBack = binding.exitProgress('b')
+    if (settledBack !== undefined && settledBack > 1e-6) {
+      return { id, pass: false, detail: `progress did not return to 0: ${String(settledBack)}` }
+    }
+    if (!binding.mounted().includes('b'))
+      return { id, pass: false, detail: 'cancelled child was removed' }
+    return {
+      id,
+      pass: true,
+      detail: `cancelled at progress ${midProgress.toFixed(3)} with no snap; returned present at 0`,
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkEnterSuppression(): Row {
+  const id = 'initial={false} suppresses first-commit enters only'
+  try {
+    const { graph } = rig()
+    const binding = createPresenceBinding({ graph, initial: false })
+    binding.sync([A, B])
+    if (!binding.enterSuppressed('a')) {
+      return { id, pass: false, detail: 'first-commit child a not enter-suppressed' }
+    }
+    const c: PresenceChild = { key: 'c', animate: { opacity: 1 } }
+    binding.sync([A, B, c])
+    if (binding.enterSuppressed('c')) {
+      return { id, pass: false, detail: 'second-commit child c wrongly suppressed' }
+    }
+    return { id, pass: true, detail: 'first commit suppressed; later enters animate' }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkWaitModeOrdering(): Row {
+  const id = "mode='wait': enters land strictly after onExitComplete"
+  try {
+    const { graph, scheduler } = rig()
+    const events: string[] = []
+    const binding = createPresenceBinding({
+      graph,
+      mode: 'wait',
+      onExitComplete: () => events.push('exit-complete'),
+    })
+    binding.sync([A, B])
+    binding.sync([A]) // b exits
+    const c: PresenceChild = { key: 'c', animate: { opacity: 1 } }
+    binding.sync([A, c]) // c enters WHILE b exits — wait mode must defer it
+    if (binding.mounted().includes('c')) {
+      return {
+        id,
+        pass: false,
+        detail: 'wait mode committed the enter while an exit was in flight',
+      }
+    }
+    for (let i = 0; i < 40; i++) {
+      scheduler.frame(DT)
+      if (binding.mounted().includes('c') && !events.includes('enter-c')) events.push('enter-c')
+    }
+    const order = events.join(' → ')
+    if (order !== 'exit-complete → enter-c') {
+      return { id, pass: false, detail: `order was [${order}], want [exit-complete → enter-c]` }
+    }
+    if (binding.mounted().includes('b'))
+      return { id, pass: false, detail: 'exited b still mounted' }
+    return { id, pass: true, detail: order }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkDeferredExit(): Row {
+  const id = 'usePresence deferred exit holds until safeToRemove'
+  try {
+    const { graph, scheduler } = rig()
+    const deferred: PresenceChild = { key: 'd', animate: { opacity: 1 }, deferred: true }
+    const binding = createPresenceBinding({ graph })
+    binding.sync([A, deferred])
+    binding.sync([A]) // drop d — deferred: no automatic exit animation completes it
+    if (!binding.mounted().includes('d') || binding.isPresent('d')) {
+      return {
+        id,
+        pass: false,
+        detail: `after drop: mounted=${binding.mounted().join(',')} isPresent=${String(binding.isPresent('d'))}`,
+      }
+    }
+    scheduler.frames(120, DT) // 2s of stepping must NOT remove a deferred exit
+    if (!binding.mounted().includes('d'))
+      return { id, pass: false, detail: 'deferred exit removed without safeToRemove' }
+    if (binding.idle())
+      return {
+        id,
+        pass: false,
+        detail: 'graph reports idle while a deferred exit is pending (must count as unsettled)',
+      }
+    binding.safeToRemove('d')
+    if (binding.mounted().includes('d'))
+      return { id, pass: false, detail: 'safeToRemove did not release the child' }
+    binding.safeToRemove('d') // idempotent — must not throw
+    return {
+      id,
+      pass: true,
+      detail:
+        'held through 2s of frames, unsettled while pending, released by safeToRemove (idempotent)',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkExitKeysGuard(): Row {
+  const id = 'exit keys guarded: validate first, subset second'
+  try {
+    const { graph } = rig()
+    const binding = createPresenceBinding({ graph })
+    let unknownError: unknown = null
+    try {
+      binding.sync([
+        { key: 'z', animate: { opacity: 1 }, exit: { warpField: 1 } as unknown as Target },
+      ])
+    } catch (e) {
+      unknownError = e
+    }
+    if (!(unknownError instanceof InvalidTargetError)) {
+      return {
+        id,
+        pass: false,
+        detail: `unknown exit key threw ${unknownError instanceof Error ? unknownError.name : typeof unknownError}, want InvalidTargetError (validation first)`,
+      }
+    }
+    let subsetError: unknown = null
+    try {
+      binding.sync([{ key: 'z', animate: { opacity: 1 }, exit: { x: 40 } }])
+    } catch (e) {
+      subsetError = e
+    }
+    const subsetOk =
+      subsetError instanceof Error &&
+      !(subsetError instanceof InvalidTargetError) &&
+      subsetError.message.includes("'x'") &&
+      subsetError.message.includes('z')
+    if (!subsetOk) {
+      return {
+        id,
+        pass: false,
+        detail: `valid-but-unmounted exit key: ${subsetError instanceof Error ? subsetError.message.slice(0, 90) : String(subsetError)}`,
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail:
+        'unknown → InvalidTargetError; valid-but-unmounted x → loud subset error naming key+child',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkPopLayoutLifecycle(): Row {
+  const id = "mode='popLayout' retains an exit through settlement"
+  try {
+    const { graph, scheduler } = rig()
+    const binding = createPresenceBinding({ graph, mode: 'popLayout' as PresenceMode })
+    binding.sync([{ key: 'pop', animate: { opacity: 1 }, exit: { opacity: 0 }, transition: TWEEN }])
+    binding.sync([])
+    if (!binding.mounted().includes('pop')) {
+      return { id, pass: false, detail: 'popLayout removed the child before its exit settled' }
+    }
+    scheduler.frames(30, DT)
+    if (binding.mounted().includes('pop')) {
+      return { id, pass: false, detail: 'popLayout retained the child after its exit settled' }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'popLayout retained the child through its exit and removed it at settle',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+function checkDecorateChild(): Row {
+  // Exit retarget still lands in decoratePresenceChild. First-render initial={false} is owned
+  // by the container render loop (REQ-PRESENCE-016 / r12 74c5d2fa91e8) — not this decorator.
+  const id = 'decorator: exit target reaches the element; present is untouched'
+  try {
+    const probe = <View collapsable={false} />
+    const rig2 = rig()
+    const exitBinding = createPresenceBinding({ graph: rig2.graph })
+    exitBinding.sync([A, B])
+    exitBinding.sync([A])
+    const exiting = decoratePresenceChild(exitBinding, 'b', probe)
+    const animate = (exiting.props as { animate?: Record<string, unknown> }).animate
+    if (animate?.['opacity'] !== 0 || animate?.['x'] !== 40) {
+      return {
+        id,
+        pass: false,
+        detail: `exiting child animate=${JSON.stringify(animate)}, want the held exit target`,
+      }
+    }
+    const rig3 = rig()
+    const plainBinding = createPresenceBinding({ graph: rig3.graph })
+    plainBinding.sync([A])
+    if (decoratePresenceChild(plainBinding, 'a', probe) !== probe) {
+      return { id, pass: false, detail: 'plain present child was needlessly cloned' }
+    }
+    // initial={false} is NOT applied by decorate (first-render container owns it).
+    const rig1 = rig()
+    const suppressedBinding = createPresenceBinding({ graph: rig1.graph, initial: false })
+    suppressedBinding.sync([{ key: 's', animate: { opacity: 1 } }])
+    const suppressed = decoratePresenceChild(suppressedBinding, 's', probe)
+    if ((suppressed.props as { initial?: Target | false }).initial === false) {
+      return {
+        id,
+        pass: false,
+        detail: 'decorate must not sticky-inject initial={false} (container first-render owns it)',
+      }
+    }
+    return {
+      id,
+      pass: true,
+      detail: 'exiting → held exit target; present → untouched; no sticky enter suppress',
+    }
+  } catch (e) {
+    return { id, pass: false, detail: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// Row 9, LIVE: a descendant calling usePresence IS the deferral (no static prop). The consumer must
+// see isPresent flip false at its drop, stay mounted, and control removal via safeToRemove. `id`
+// suffixes events so multiple probes share one journal; `trackIsPresent` also records the READ-ONLY
+// useIsPresent flip (which must never register a deferral of its own).
+function ConsumerProbe({
+  events,
+  id = '',
+  safeDelayMs = 500,
+  trackIsPresent = false,
+}: {
+  readonly events: string[]
+  readonly id?: string
+  readonly safeDelayMs?: number
+  readonly trackIsPresent?: boolean
+}) {
+  const [isPresent, safeToRemove] = usePresence()
+  const observed = useIsPresent()
+  const firedRef = useRef(false)
+  const flaggedRef = useRef(false)
+  useEffect(() => {
+    if (trackIsPresent && !observed && !flaggedRef.current) {
+      flaggedRef.current = true
+      events.push(`isPresent-false${id}`)
+    }
+  }, [observed, trackIsPresent, events, id])
+  useEffect(() => {
+    if (!isPresent && !firedRef.current) {
+      firedRef.current = true
+      events.push(`saw-absent${id}`)
+      setTimeout(() => {
+        events.push(`safe${id}`)
+        safeToRemove()
+      }, safeDelayMs)
+    }
+  }, [isPresent, safeToRemove, events, id, safeDelayMs])
+  useEffect(() => {
+    return () => {
+      events.push(`unmounted${id}`)
+    }
+  }, [events, id])
+  return <View style={{ width: 1, height: 1 }} />
+}
+
+function useConsumerDeferCheck(): { row: Row | null; probe: React.ReactElement } {
+  const [row, setRow] = useState<Row | null>(null)
+  const [keys, setKeys] = useState<readonly string[]>(['p'])
+  const eventsRef = useRef<string[]>([])
+  useEffect(() => {
+    const drop = setTimeout(() => setKeys([]), 400)
+    const verdict = setTimeout(() => {
+      const order = eventsRef.current.join(' → ')
+      setRow({
+        id: 'usePresence consumer defers removal (live)',
+        pass: order === 'saw-absent → safe → unmounted',
+        detail: order.length > 0 ? order : 'no events recorded',
+      })
+    }, 2400)
+    return () => {
+      clearTimeout(drop)
+      clearTimeout(verdict)
+    }
+  }, [])
+  const probe = (
+    <View style={styles.hiddenProbe}>
+      <AnimatePresence>
+        {keys.map((key) => (
+          <View key={key}>
+            <ConsumerProbe events={eventsRef.current} />
+          </View>
+        ))}
+      </AnimatePresence>
+    </View>
+  )
+  return { row, probe }
+}
+
+// Row 10, LIVE (review cycle 2 major 3): a consumer that unmounts while its child stays present
+// must NOT leak deferral — when the child is later dropped it exits normally instead of being
+// retained forever behind a manual exit nobody can release.
+function StaleConsumerChild({ events }: { readonly events: string[] }) {
+  useEffect(() => {
+    return () => {
+      events.push('child-unmounted')
+    }
+  }, [events])
+  return <View style={{ width: 1, height: 1 }} />
+}
+
+function useStaleConsumerCheck(): { row: Row | null; probe: React.ReactElement } {
+  const [row, setRow] = useState<Row | null>(null)
+  const [showConsumer, setShowConsumer] = useState(true)
+  const [keys, setKeys] = useState<readonly string[]>(['q'])
+  const eventsRef = useRef<string[]>([])
+  useEffect(() => {
+    const hide = setTimeout(() => setShowConsumer(false), 300) // consumer leaves, child stays
+    const drop = setTimeout(() => setKeys([]), 800) // then the child is dropped
+    const verdict = setTimeout(() => {
+      const sequence = eventsRef.current.join(' → ')
+      setRow({
+        id: 'stale consumer does not leak deferral (live)',
+        pass: eventsRef.current.includes('child-unmounted'),
+        detail: eventsRef.current.includes('child-unmounted')
+          ? `child exited normally after its consumer left (${sequence})`
+          : `child still retained 1.4s after the drop — stale deferral leak (${sequence})`,
+      })
+    }, 2200)
+    return () => {
+      clearTimeout(hide)
+      clearTimeout(drop)
+      clearTimeout(verdict)
+    }
+  }, [])
+  const probe = (
+    <View style={styles.hiddenProbe}>
+      <AnimatePresence>
+        {keys.map((key) => (
+          <View key={key}>
+            <StaleConsumerChild events={eventsRef.current} />
+            {showConsumer ? <ConsumerProbe events={eventsRef.current} /> : null}
+          </View>
+        ))}
+      </AnimatePresence>
+    </View>
+  )
+  return { row, probe }
+}
+
+// Row 11, LIVE (review cycle 3 majors 4+5): two deferred children dropped together must unmount
+// INDEPENDENTLY — the first safeToRemove unmounts its child while the other is still pending (no
+// batch-until-the-set-drains behavior) — and the read-only useIsPresent must observe the flip.
+function useIndependentDeferCheck(): { row: Row | null; probe: React.ReactElement } {
+  const [row, setRow] = useState<Row | null>(null)
+  const [keys, setKeys] = useState<readonly string[]>(['p1', 'p2'])
+  const eventsRef = useRef<string[]>([])
+  useEffect(() => {
+    const drop = setTimeout(() => setKeys([]), 300)
+    const verdict = setTimeout(() => {
+      const events = eventsRef.current
+      const sequence = events.join(' → ')
+      const sawFlip = events.includes('isPresent-false-p1')
+      const p1Unmounted = events.indexOf('unmounted-p1')
+      const p2Safe = events.indexOf('safe-p2')
+      const p2Unmounted = events.indexOf('unmounted-p2')
+      const independent = p1Unmounted !== -1 && p2Safe !== -1 && p1Unmounted < p2Safe
+      setRow({
+        id: 'independent deferred unmounts + useIsPresent (live)',
+        pass: sawFlip && independent && p2Unmounted !== -1,
+        detail: sequence.length > 0 ? sequence : 'no events recorded',
+      })
+    }, 3000)
+    return () => {
+      clearTimeout(drop)
+      clearTimeout(verdict)
+    }
+  }, [])
+  const probe = (
+    <View style={styles.hiddenProbe}>
+      <AnimatePresence>
+        {keys.map((key) => (
+          <View key={key}>
+            <ConsumerProbe
+              events={eventsRef.current}
+              id={`-${key}`}
+              safeDelayMs={key === 'p1' ? 400 : 1300}
+              trackIsPresent={key === 'p1'}
+            />
+          </View>
+        ))}
+      </AnimatePresence>
+    </View>
+  )
+  return { row, probe }
+}
+
+export function PresenceChecksScreen() {
+  const consumerCheck = useConsumerDeferCheck()
+  const staleCheck = useStaleConsumerCheck()
+  const independentCheck = useIndependentDeferCheck()
+  const rows: Row[] = [
+    checkDropRetainRemove(),
+    checkCancelContinuity(),
+    checkEnterSuppression(),
+    checkWaitModeOrdering(),
+    checkDeferredExit(),
+    checkExitKeysGuard(),
+    checkPopLayoutLifecycle(),
+    checkDecorateChild(),
+    ...(consumerCheck.row === null ? [] : [consumerCheck.row]),
+    ...(staleCheck.row === null ? [] : [staleCheck.row]),
+    ...(independentCheck.row === null ? [] : [independentCheck.row]),
+  ]
+  const allDone =
+    consumerCheck.row !== null && staleCheck.row !== null && independentCheck.row !== null
+  const allPass = allDone && rows.every((row) => row.pass)
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.container}>
+      <Text style={styles.title}>M2.3 presence checks</Text>
+      <Text style={styles.subtitle}>
+        binding semantics (deterministic) + live usePresence consumer
+      </Text>
+      <View style={[styles.banner, allPass ? styles.pass : allDone ? styles.fail : styles.pending]}>
+        <Text style={styles.bannerText}>{allDone ? (allPass ? 'PASS' : 'FAIL') : 'RUNNING'}</Text>
+      </View>
+      {consumerCheck.probe}
+      {staleCheck.probe}
+      {independentCheck.probe}
+      {allDone ? null : (
+        <View style={styles.row}>
+          <Text style={[styles.verdict, styles.dim]}>…</Text>
+          <View style={styles.rowBody}>
+            <Text style={styles.rowId}>live rows running…</Text>
+            <Text style={styles.rowDetail}>consumer-defer + stale-consumer probes in flight</Text>
+          </View>
+        </View>
+      )}
+      {rows.map((row) => (
+        <View key={row.id} style={styles.row}>
+          <Text style={[styles.verdict, row.pass ? styles.ok : styles.bad]}>
+            {row.pass ? 'PASS' : 'FAIL'}
+          </Text>
+          <View style={styles.rowBody}>
+            <Text style={styles.rowId}>{row.id}</Text>
+            <Text style={styles.rowDetail} numberOfLines={3}>
+              {row.detail}
+            </Text>
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: { flex: 1, backgroundColor: '#0b0b12' },
+  container: { paddingVertical: 72, paddingHorizontal: 20 },
+  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' },
+  pending: { backgroundColor: '#6b6b28' },
+  bannerText: { color: '#fff', fontSize: 22, fontWeight: '800', letterSpacing: 2 },
+  row: { flexDirection: 'row', marginTop: 10 },
+  verdict: { width: 52, fontSize: 12, fontWeight: '800', paddingTop: 1 },
+  ok: { color: '#4ade80' },
+  bad: { color: '#f87171' },
+  dim: { color: '#8a8aa0' },
+  rowBody: { flex: 1 },
+  rowId: { color: '#e6e6f0', fontSize: 13, fontWeight: '600' },
+  rowDetail: { color: '#6f6f85', fontSize: 11, marginTop: 2 },
+  hiddenProbe: { position: 'absolute', opacity: 0 },
+})