@unrulysystems/native-motion 0.1.0-alpha.0

package/src/verification/screens/ChoreographyGalleryScreen.tsx

@@ -0,0 +1,1010 @@
+// The choreography gallery — ENGINE-VERIFICATION, not a consumer example
+// (specs/DOGFOOD-MIGRATION-BUILD-PACKET.md M3 split). This is the former native examples
+// gallery (M2.6b) kept wholesale as the engine's device-proof choreography vehicle: it carries
+// the L4 App Store card machine verdict (`L4PORT_APPSTORE` release-edge lines) and the
+// BRIEF-ratified lifecycle-soak leg (seven-swap navigation, bounded driverStates, empty crash
+// buffer). It hand-wires bindings and the substrate BY ROLE — engine verification is exempt
+// from the consumer-isolation ban only by living in this package (REQ-EXHARNESS-010). The
+// consumer documentation-by-example gallery lives in the app, authored on the public
+// native-motion surface only; examples the public surface cannot express yet are BLOCKED there
+// and tracked as packet FLAGs, never hand-rolled.
+//
+// Mirrors the web gallery (packages/native-motion-web/e2e/fixtures/examples.tsx)
+// example-for-example so cross-engine behavior is eyeballable side by side. ONE example renders
+// at a time (paged, not scrolled): iOS simulator screenshots are captured without UI
+// automation, so every screenshot must self-describe — the header names the example, the
+// status line carries the live evidence.
+//
+// AUTO-RUN drives each example's timeline programmatically then advances to the next card. iOS
+// starts it hands-free after 1.5 s (no CLI touch injection — the M2.4 precedent); Android is
+// driven by real adb taps/swipes, with AUTO-RUN available as a fallback.
+//
+// Known, ratified asymmetry surfaced here deliberately: the native MotionView spike maps exactly
+// x/y/scale/rotate/opacity (M2.2 §semantics 6), while the web PASS table also animates colors,
+// radii and layout props — so the native morph card uses scale + rotate and SAYS so on screen.
+import { useEffect, useRef, useState } from 'react'
+import { Platform, Pressable, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import {
+  ManualClock,
+  ManualScheduler,
+  correctRadius,
+  counterScale,
+  createMotionGraph,
+  type ElementHandle,
+} from '@unrulysystems/native-motion-core'
+import { uiDriverStateCount, useWorkletDriver } from '../../native/driver/workletDriver'
+import { AnimatePresence } from '../../native/motion/AnimatePresence'
+import {
+  createLayoutIdentityBinding,
+  type LayoutIdentityBinding,
+  type LayoutIdentityMeasureHandle,
+} from '../../native/motion/layoutIdBinding'
+import {
+  createGestureBinding,
+  routePanEnd,
+  routePanFinalize,
+  type GestureBinding,
+} from '../../native/motion/gestureBinding'
+import { createLayoutProjection, type LayoutProjection } from '../../native/motion/layoutProjection'
+import { MotionView } from '../../native/motion/MotionView'
+import { schedulerFrameDelta } from '../harnessMetrics'
+
+// The house spring of the proof suite — the same constants the web gallery and the Chromium
+// trajectory gate use, so cross-engine motion is directly comparable by eye.
+const SPRING = { type: 'spring', stiffness: 550, damping: 45 } as const
+// Softer demo springs where a ~1 s flight makes screenshots/video legible (M2.3/M2.5 precedent).
+const DEMO_SPRING = { type: 'spring', stiffness: 60, damping: 14 } as const
+
+const EXAMPLES = [
+  'spring-toggle',
+  'fade',
+  'style-morph',
+  'drag-snap',
+  'presence',
+  'flip-swap',
+  'interrupt',
+  'appstore-card',
+] as const
+type ExampleId = (typeof EXAMPLES)[number]
+
+interface ExampleProps {
+  // Auto-run: the example drives its own timeline once, then reports completion.
+  readonly auto: boolean
+  readonly onAutoDone: () => void
+}
+
+// Fire a timeline once when auto-run engages; the LAST step should call onAutoDone.
+function useAutoTimeline(
+  auto: boolean,
+  steps: readonly { readonly at: number; readonly run: () => void }[],
+): void {
+  const fired = useRef(false)
+  useEffect(() => {
+    if (!auto || fired.current) return
+    fired.current = true
+    const timers = steps.map((step) => setTimeout(step.run, step.at))
+    return () => {
+      for (const timer of timers) clearTimeout(timer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auto])
+}
+
+function requireLayoutIdentityMeasureHandle(
+  ref: { readonly current: LayoutIdentityMeasureHandle | null },
+  label: string,
+): LayoutIdentityMeasureHandle {
+  const handle = ref.current
+  if (handle === null) {
+    throw new Error(`layout identity '${label}': measureInWindow handle unavailable on layout.`)
+  }
+  return handle
+}
+
+// 1. Spring toggle — x 0 ↔ 240 through the worklet driver (tap TOGGLE, or auto).
+function SpringToggleExample({ auto, onAutoDone }: ExampleProps) {
+  const [on, setOn] = useState(false)
+  const [settles, setSettles] = useState(0)
+  useAutoTimeline(auto, [
+    { at: 200, run: () => setOn(true) },
+    { at: 1200, run: () => setOn(false) },
+    { at: 2400, run: onAutoDone },
+  ])
+  return (
+    <View style={styles.exampleBody}>
+      <Pressable
+        style={styles.button}
+        accessibilityLabel="spring-toggle-button"
+        onPress={() => setOn((v) => !v)}
+      >
+        <Text style={styles.buttonText}>TOGGLE → {on ? 0 : 240}</Text>
+      </Pressable>
+      <View style={styles.stage}>
+        <MotionView
+          animate={{ x: on ? 240 : 0 }}
+          transition={SPRING}
+          onAnimationComplete={() => setSettles((n) => n + 1)}
+          style={[styles.box, { backgroundColor: '#7c3aed' }]}
+        />
+      </View>
+      <Text style={styles.status}>
+        target: {on ? 240 : 0} · settles: {settles}
+      </Text>
+    </View>
+  )
+}
+
+// 2. Fade — opacity 1 ↔ 0.25 (same target shape as the web card; native runs the JS→worklet
+// value path, web runs WAAPI — the visual result must be indistinguishable).
+function FadeExample({ auto, onAutoDone }: ExampleProps) {
+  const [on, setOn] = useState(false)
+  const [settles, setSettles] = useState(0)
+  useAutoTimeline(auto, [
+    { at: 200, run: () => setOn(true) },
+    { at: 1200, run: () => setOn(false) },
+    { at: 2400, run: onAutoDone },
+  ])
+  return (
+    <View style={styles.exampleBody}>
+      <Pressable style={styles.button} onPress={() => setOn((v) => !v)}>
+        <Text style={styles.buttonText}>FADE → {on ? 1 : 0.25}</Text>
+      </Pressable>
+      <View style={styles.stage}>
+        <MotionView
+          animate={{ opacity: on ? 0.25 : 1 }}
+          transition={SPRING}
+          onAnimationComplete={() => setSettles((n) => n + 1)}
+          style={[styles.box, { backgroundColor: '#0ea5e9' }]}
+        />
+      </View>
+      <Text style={styles.status}>
+        target opacity: {on ? 0.25 : 1} · settles: {settles}
+      </Text>
+    </View>
+  )
+}
+
+// 3. Style morph — scale + rotate + borderRadius + backgroundColor through ONE target: L1
+// (specs/L1-BUILD-PACKET.md) closing the M2.6b cross-engine surface delta. THIS card is the
+// rung's RED anchor — it crashed the release app on borderRadius under the M2.2 spike guard
+// (bug-bash record) and now matches the web card's full morph.
+function StyleMorphExample({ auto, onAutoDone }: ExampleProps) {
+  const [on, setOn] = useState(false)
+  const [settles, setSettles] = useState(0)
+  useAutoTimeline(auto, [
+    { at: 200, run: () => setOn(true) },
+    { at: 1400, run: () => setOn(false) },
+    { at: 2800, run: onAutoDone },
+  ])
+  return (
+    <View style={styles.exampleBody}>
+      <Pressable style={styles.button} onPress={() => setOn((v) => !v)}>
+        <Text style={styles.buttonText}>MORPH</Text>
+      </Pressable>
+      <View style={styles.stage}>
+        <MotionView
+          animate={{
+            scale: on ? 1.2 : 1,
+            rotate: on ? 45 : 0,
+            borderRadius: on ? 40 : 8,
+            backgroundColor: on ? '#f59e0b' : '#7c3aed',
+          }}
+          transition={SPRING}
+          onAnimationComplete={() => setSettles((n) => n + 1)}
+          style={[styles.box, { backgroundColor: '#7c3aed' }]}
+        />
+      </View>
+      <Text style={styles.status}>
+        scale: {on ? 1.2 : 1} · rotate: {on ? 45 : 0} · radius: {on ? 40 : 8} · settles: {settles}
+      </Text>
+      <Text style={styles.note}>
+        full morph incl. radius + color — the L1 rung (was the M2.6b crash)
+      </Text>
+    </View>
+  )
+}
+
+// 4. Drag with snap — the M2.4 binding as an EXAMPLE: constraints 0..240 elastic 0.4, snap
+// [0, 240]. Android: real touch. Auto-run: the recorded stream replay (the M2.4 iOS leg).
+function DragSnapExample({ auto, onAutoDone }: ExampleProps) {
+  const [label, setLabel] = useState({ value: 0, state: 'idle' })
+  const shared = useSharedValue(0)
+
+  const rigRef = useRef<{ binding: GestureBinding; scheduler: ManualScheduler } | null>(null)
+  if (rigRef.current === null) {
+    const clock = new ManualClock()
+    const scheduler = new ManualScheduler(clock)
+    const graph = createMotionGraph({ clock, scheduler })
+    rigRef.current = {
+      binding: createGestureBinding({
+        graph,
+        clock,
+        initial: 0,
+        constraints: { min: 0, max: 240, elastic: 0.4 },
+        snap: { points: [0, 240] },
+      }),
+      scheduler,
+    }
+  }
+  const { binding, scheduler } = rigRef.current
+
+  const stepperRef = useRef<{ running: boolean; raf: number; last: number; frames: number }>({
+    running: false,
+    raf: 0,
+    last: 0,
+    frames: 0,
+  })
+  const refreshLabel = (): void => {
+    setLabel({ value: binding.session.value(), state: binding.session.state() })
+  }
+  const startStepper = (): void => {
+    const stepper = stepperRef.current
+    if (stepper.running) return
+    stepper.running = true
+    stepper.last = 0
+    const loop = (now: number): void => {
+      const dt = schedulerFrameDelta(stepper.last, now)
+      stepper.last = now
+      if (dt > 0) scheduler.frame(dt)
+      shared.value = binding.session.value()
+      stepper.frames += 1
+      if (stepper.frames % 6 === 0) refreshLabel()
+      if (binding.session.isSettled()) {
+        stepper.running = false
+        refreshLabel()
+        return
+      }
+      stepper.raf = requestAnimationFrame(loop)
+    }
+    stepper.raf = requestAnimationFrame(loop)
+  }
+  useEffect(() => {
+    return () => cancelAnimationFrame(stepperRef.current.raf)
+  }, [])
+
+  const pan = Gesture.Pan()
+    .runOnJS(true)
+    .onStart((event) => {
+      startStepper()
+      binding.onStart(event)
+    })
+    .onUpdate((event) => {
+      binding.onUpdate(event)
+      shared.value = binding.session.value()
+    })
+    .onEnd((event, success) => {
+      routePanEnd(binding, event, success)
+      startStepper()
+    })
+    .onFinalize((_event, success) => {
+      routePanFinalize(binding, success)
+      startStepper()
+    })
+
+  // Auto-run: the M2.4 recorded stream — sweep to 200 then release flung at +900 px/s → snap 240.
+  useAutoTimeline(auto, [
+    {
+      at: 300,
+      run: () => {
+        startStepper()
+        binding.onStart({ translationX: 0, velocityX: 0 })
+        let step = 0
+        const feed = setInterval(() => {
+          step += 1
+          binding.onUpdate({ translationX: (200 * step) / 24, velocityX: 600 })
+          shared.value = binding.session.value()
+          if (step >= 24) {
+            clearInterval(feed)
+            binding.onEnd({ translationX: 200, velocityX: 900 })
+            startStepper()
+          }
+        }, 24)
+      },
+    },
+    { at: 2600, run: onAutoDone },
+  ])
+
+  const boxStyle = useAnimatedStyle(() => ({ transform: [{ translateX: shared.value }] }))
+  return (
+    <View style={styles.exampleBody}>
+      <GestureDetector gesture={pan}>
+        <View style={styles.track} collapsable={false}>
+          <View style={[styles.snapMarker, { left: 0 }]} />
+          <View style={[styles.snapMarker, { left: 240 }]} />
+          <Animated.View style={[styles.box, { backgroundColor: '#f59e0b' }, boxStyle]} />
+        </View>
+      </GestureDetector>
+      <Text style={styles.status}>
+        value: {label.value.toFixed(1)} · state: {label.state}
+      </Text>
+      <Text style={styles.note}>
+        {auto ? 'auto: replayed stream (M2.4 iOS leg)' : 'drag the box — snap [0, 240]'}
+      </Text>
+    </View>
+  )
+}
+
+// 5. Presence — enter from initial, exit runs before unmount, removal exactly at settle.
+function PresenceExample({ auto, onAutoDone }: ExampleProps) {
+  const [nextId, setNextId] = useState(1)
+  const [items, setItems] = useState<readonly number[]>([])
+  const [exits, setExits] = useState(0)
+  const add = (): void => {
+    setItems((list) => (list.length >= 3 ? list : [...list, nextId]))
+    setNextId((n) => n + 1)
+  }
+  const remove = (): void => setItems((list) => list.slice(0, -1))
+  useAutoTimeline(auto, [
+    { at: 200, run: add },
+    { at: 900, run: add },
+    { at: 1800, run: remove },
+    { at: 3200, run: remove },
+    { at: 4800, run: onAutoDone },
+  ])
+  return (
+    <View style={styles.exampleBody}>
+      <View style={styles.buttonRow}>
+        <Pressable style={styles.button} onPress={add}>
+          <Text style={styles.buttonText}>ADD</Text>
+        </Pressable>
+        <Pressable style={styles.button} onPress={remove}>
+          <Text style={styles.buttonText}>REMOVE</Text>
+        </Pressable>
+      </View>
+      <View style={styles.presenceRow}>
+        <AnimatePresence onExitComplete={() => setExits((n) => n + 1)}>
+          {items.map((id) => (
+            <MotionView
+              key={String(id)}
+              initial={{ opacity: 0, y: -16, x: 0 }}
+              animate={{ opacity: 1, y: 0, x: 0 }}
+              exit={{ opacity: 0, x: 80 }}
+              transition={DEMO_SPRING}
+              style={[styles.itemBox, { backgroundColor: '#14b8a6' }]}
+            >
+              <Text style={styles.itemText}>#{id}</Text>
+            </MotionView>
+          ))}
+        </AnimatePresence>
+      </View>
+      <Text style={styles.status}>
+        items: {items.length} · exits completed: {exits}
+      </Text>
+      <Text style={styles.note}>demo spring 60/14 — exits visible, removal exactly at settle</Text>
+    </View>
+  )
+}
+
+// 6. FLIP swap — the M2.5 projection as an EXAMPLE: the box's LAYOUT alternates (alignSelf +
+// width) and the projection springs between layouts instead of teleporting.
+function FlipSwapExample({ auto, onAutoDone }: ExampleProps) {
+  const [flipped, setFlipped] = useState(false)
+  const [label, setLabel] = useState({ state: 'idle', settles: 0 })
+  const tx = useSharedValue(0)
+  const ty = useSharedValue(0)
+  const sx = useSharedValue(1)
+  const sy = useSharedValue(1)
+
+  const rigRef = useRef<{ projection: LayoutProjection; scheduler: ManualScheduler } | null>(null)
+  if (rigRef.current === null) {
+    const clock = new ManualClock()
+    const scheduler = new ManualScheduler(clock)
+    const graph = createMotionGraph({ clock, scheduler })
+    rigRef.current = {
+      projection: createLayoutProjection({
+        graph,
+        token: 'examples-flip',
+        spring: { stiffness: 120, damping: 16 },
+      }),
+      scheduler,
+    }
+  }
+  const { projection, scheduler } = rigRef.current
+  const settlesRef = useRef(0)
+
+  const stepperRef = useRef<{ running: boolean; raf: number; last: number; frames: number }>({
+    running: false,
+    raf: 0,
+    last: 0,
+    frames: 0,
+  })
+  const applyTransform = (): void => {
+    const t = projection.session.transform()
+    tx.value = t.translateX
+    ty.value = t.translateY
+    sx.value = t.scaleX
+    sy.value = t.scaleY
+  }
+  const refreshLabel = (): void => {
+    setLabel({ state: projection.session.state(), settles: settlesRef.current })
+  }
+  const startStepper = (): void => {
+    const stepper = stepperRef.current
+    if (stepper.running) return
+    stepper.running = true
+    stepper.last = 0
+    const loop = (now: number): void => {
+      const dt = schedulerFrameDelta(stepper.last, now)
+      stepper.last = now
+      if (dt > 0) scheduler.frame(dt)
+      applyTransform()
+      stepper.frames += 1
+      if (stepper.frames % 6 === 0) refreshLabel()
+      if (projection.session.isSettled()) {
+        stepper.running = false
+        settlesRef.current += 1
+        applyTransform()
+        refreshLabel()
+        return
+      }
+      stepper.raf = requestAnimationFrame(loop)
+    }
+    stepper.raf = requestAnimationFrame(loop)
+  }
+  useEffect(() => {
+    return () => cancelAnimationFrame(stepperRef.current.raf)
+  }, [])
+
+  const onBoxLayout = (event: LayoutChangeEvent): void => {
+    projection.onLayoutRect(event.nativeEvent.layout)
+    if (!projection.session.isSettled()) startStepper()
+  }
+  useAutoTimeline(auto, [
+    { at: 300, run: () => setFlipped(true) },
+    { at: 1800, run: () => setFlipped(false) },
+    { at: 3400, run: onAutoDone },
+  ])
+
+  const boxStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: tx.value },
+      { translateY: ty.value },
+      { scaleX: sx.value },
+      { scaleY: sy.value },
+    ],
+  }))
+  return (
+    <View style={styles.exampleBody}>
+      <Pressable style={styles.button} onPress={() => setFlipped((f) => !f)}>
+        <Text style={styles.buttonText}>SWAP LAYOUT</Text>
+      </Pressable>
+      <View style={styles.arena}>
+        <Animated.View
+          onLayout={onBoxLayout}
+          style={[
+            styles.box,
+            { backgroundColor: '#58c47a', transformOrigin: 'top left' },
+            flipped ? styles.flipEnd : styles.flipHome,
+            boxStyle,
+          ]}
+        />
+      </View>
+      <Text style={styles.status}>
+        layout: {flipped ? 'end/128w' : 'start/64w'} · state: {label.state} · settles:{' '}
+        {label.settles}
+      </Text>
+      <Text style={styles.note}>transformOrigin top-left — core Transform anchoring</Text>
+    </View>
+  )
+}
+
+// 7. Interrupt — every tap retargets, INCLUDING mid-flight: the spring seeds from its live
+// state (no jump). Auto-run taps at 140 ms — mid-flight for 550/45.
+function InterruptExample({ auto, onAutoDone }: ExampleProps) {
+  const [on, setOn] = useState(false)
+  const [settles, setSettles] = useState(0)
+  useAutoTimeline(auto, [
+    { at: 300, run: () => setOn(true) },
+    { at: 440, run: () => setOn(false) }, // 140 ms later — mid-flight retarget
+    { at: 2200, run: onAutoDone },
+  ])
+  return (
+    <View style={styles.exampleBody}>
+      <Pressable style={styles.button} onPress={() => setOn((v) => !v)}>
+        <Text style={styles.buttonText}>RETARGET → {on ? 0 : 240}</Text>
+      </Pressable>
+      <View style={styles.stage}>
+        <MotionView
+          animate={{ x: on ? 240 : 0 }}
+          transition={SPRING}
+          onAnimationComplete={() => setSettles((n) => n + 1)}
+          style={[styles.box, { backgroundColor: '#8b5cf6' }]}
+        />
+      </View>
+      <Text style={styles.status}>
+        target: {on ? 240 : 0} · settles: {settles}
+      </Text>
+      <Text style={styles.note}>tap twice fast — the second flight continues from the live x</Text>
+    </View>
+  )
+}
+
+const TITLES: Record<ExampleId, string> = {
+  'spring-toggle': 'Spring toggle — x: 0 ↔ 240',
+  fade: 'Fade — opacity 1 ↔ 0.25',
+  'style-morph': 'Style morph — scale + rotate + radius + color',
+  'drag-snap': 'Drag — snap [0, 240]',
+  presence: 'Presence — enter / exit',
+  'flip-swap': 'FLIP — layout swap',
+  interrupt: 'Interrupt — retarget mid-flight',
+  'appstore-card': 'App Store card — layoutId expand / collapse (L4)',
+}
+
+// 8. App Store card (L4, specs/SPEC-LAYOUT.md §native) — the golden-set choreography over
+// L1+L2+L3: the L2 identity registry crossfades the list card into a top-anchored hero overlay
+// in the SAME tree (no reparenting; the neighbor never moves); a stiffer core radius channel
+// (draft {900, 60}) completes ahead of the rect; the scrim/close-X/body copy ride the flight's
+// own crossfade scalar (X enters the second half, body the final 40% — draft thresholds);
+// children ride UNDISTORTED via core's counterScale — its first device exercise. Symmetric,
+// interruptible close through the registry's exit/resume reverse flight.
+// The L4 card's machine verdict (packet Acceptance item 4): one machine-readable line per RELEASE
+// edge — lifecycle-rate JS, never per-frame — cumulative counters plus the all-released predicate
+// (every open eventually delivered its releasable→safeToRemove edge). RN Release drops plain
+// console.log, so the verdict routes through globalThis.nativeLoggingHook (the M2 posture); the
+// logcat/syslog scrape reads the LAST line after a run.
+const L4PORT_LOG_PREFIX = 'L4PORT_APPSTORE '
+const L4PORT_INFO_LOG_LEVEL = 1
+
+interface L4PortLoggingGlobal {
+  nativeLoggingHook?: (message: string, level: number) => void
+}
+
+function logCardVerdict(counts: { readonly swaps: number; readonly releases: number }): void {
+  const message = `${L4PORT_LOG_PREFIX}${JSON.stringify({
+    swaps: counts.swaps,
+    releases: counts.releases,
+    allReleased: counts.swaps === counts.releases,
+    // The disposal observable (round 4 major 5): live UI-runtime driver records. The gallery
+    // mounts ONE example at a time and useWorkletDriver disposes at unmount, so this stays
+    // bounded (1 here) across page changes and auto-mode remounts — a leak grows it per remount.
+    driverStates: uiDriverStateCount(),
+  })}`
+  const nativeLoggingHook = (globalThis as L4PortLoggingGlobal).nativeLoggingHook
+  if (nativeLoggingHook !== undefined) {
+    nativeLoggingHook(message, L4PORT_INFO_LOG_LEVEL)
+    return
+  }
+  console.log(message)
+}
+
+function AppStoreCardExample({ auto, onAutoDone }: ExampleProps) {
+  const [phase, setPhase] = useState<'closed' | 'open' | 'closing'>('closed')
+  const [label, setLabel] = useState({ swaps: 0, releases: 0, radius: 24 })
+
+  const phaseRef = useRef<'closed' | 'open' | 'closing'>('closed')
+  const thumbMeasureRef = useRef<View | null>(null)
+  const heroMeasureRef = useRef<View | null>(null)
+  const thumbAttachedRef = useRef(false)
+  const countsRef = useRef({ swaps: 0, releases: 0 })
+
+  // The UI-thread engine (specs/LAYOUT-UITHREAD-PORT-BUILD-PACKET.md): the driver's frame loop
+  // steps the identity flight AND the radius element on the UI runtime; JS work is lifecycle-edge
+  // only (open/close/release + label refreshes). The house 550/45 — the golden flights run
+  // ≈200 ms, this profile's range (draft).
+  const driverBinding = useWorkletDriver({
+    layoutSpring: { stiffness: 550, damping: 45 },
+    onAllSettled: () => refreshLabel(),
+  })
+  const bindingRef = useRef<LayoutIdentityBinding | null>(null)
+  // The radius rides a driver ELEMENT (the M2.1 command path) instead of a JS graph value: the
+  // stiffer draft channel {900, 60} completes ahead of the rect (contract item 3), retargets
+  // carry live velocity on the interrupted close.
+  const radiusHandleRef = useRef<ElementHandle | null>(null)
+  if (bindingRef.current === null) {
+    bindingRef.current = createLayoutIdentityBinding(driverBinding)
+    radiusHandleRef.current = driverBinding.driver.register({ radius: 24 })
+  }
+  const binding = bindingRef.current
+  const radiusHandle = radiusHandleRef.current as ElementHandle
+  const radiusShared = driverBinding.sharedFor(radiusHandle, 'radius')
+
+  // Holder outputs, written by the UI frame loop; styles below derive children/scrim/body from
+  // them INSIDE the style worklets — zero per-frame JS.
+  const thumbShared = binding.sharedViewFor('appstore', 'thumb')
+  const heroShared = binding.sharedViewFor('appstore', 'hero')
+
+  const refreshLabel = (): void => {
+    setLabel({
+      swaps: countsRef.current.swaps,
+      releases: countsRef.current.releases,
+      radius: Math.round(radiusShared.value),
+    })
+  }
+
+  const retargetRadius = (to: number): void => {
+    driverBinding.driver.command(radiusHandle, {
+      kind: 'retarget',
+      targets: { radius: to },
+      transition: { type: 'spring', stiffness: 900, damping: 60 },
+    })
+  }
+
+  const openCard = (): void => {
+    if (phaseRef.current !== 'closed') return
+    phaseRef.current = 'open'
+    countsRef.current.swaps += 1
+    setPhase('open')
+    retargetRadius(0)
+    refreshLabel()
+    // The hero mounts and attaches on its first layout (the L2 pending-pairing path).
+  }
+  const closeCard = (): void => {
+    if (phaseRef.current !== 'open') return
+    phaseRef.current = 'closing'
+    setPhase('closing')
+    retargetRadius(24)
+    binding.detach('appstore', 'hero')
+    binding.coupleRelease('appstore', 'hero', () => {
+      binding.detach('appstore', 'hero')
+      phaseRef.current = 'closed'
+      countsRef.current.releases += 1
+      setPhase('closed')
+      refreshLabel()
+      logCardVerdict(countsRef.current)
+    })
+    refreshLabel()
+  }
+
+  useAutoTimeline(auto, [
+    { at: 300, run: openCard },
+    { at: 1500, run: closeCard },
+    // The interrupted close: reopen, then close mid-flight (~120 ms in — inside the ~200 ms
+    // open flight), the golden symmetric-interruptibility contract.
+    { at: 2700, run: openCard },
+    { at: 2820, run: closeCard },
+    { at: 4300, run: onAutoDone },
+  ])
+
+  const onThumbLayout = (_event: LayoutChangeEvent): void => {
+    const thumbMeasure = requireLayoutIdentityMeasureHandle(thumbMeasureRef, 'appstore/thumb')
+    if (!thumbAttachedRef.current) {
+      binding.attach('appstore', 'thumb', thumbMeasure)
+      thumbAttachedRef.current = true
+      return
+    }
+    binding.commitLayout('appstore', 'thumb', thumbMeasure)
+  }
+  const heroAttachedRef = useRef(false)
+  const onHeroLayout = (_event: LayoutChangeEvent): void => {
+    const heroMeasure = requireLayoutIdentityMeasureHandle(heroMeasureRef, 'appstore/hero')
+    if (!heroAttachedRef.current) {
+      // Mount → attach through the host handle; the binding enters unmeasured and commits the
+      // callback's window-space rect, so the flight departs from the thumb's comparable frame.
+      binding.attach('appstore', 'hero', heroMeasure)
+      heroAttachedRef.current = true
+      return
+    }
+    binding.commitLayout('appstore', 'hero', heroMeasure)
+  }
+  // The hero unmounts at release; its next mount is a fresh attach.
+  useEffect(() => {
+    if (phase === 'closed') heroAttachedRef.current = false
+  }, [phase])
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: thumbShared.translateX.value },
+      { translateY: thumbShared.translateY.value },
+      { scaleX: thumbShared.scaleX.value },
+      { scaleY: thumbShared.scaleY.value },
+    ],
+    opacity: thumbShared.opacity.value,
+  }))
+  // Children ride undistorted (REQ-LAYOUT-013) — core's counterScale, computed in the style
+  // worklet from the flight's live scales (the dist function is worklet-tagged for exactly this).
+  const thumbKidStyle = useAnimatedStyle(() => {
+    const kid = counterScale({
+      translateX: thumbShared.translateX.value,
+      translateY: thumbShared.translateY.value,
+      scaleX: thumbShared.scaleX.value,
+      scaleY: thumbShared.scaleY.value,
+    })
+    return { transform: [{ scaleX: kid.scaleX }, { scaleY: kid.scaleY }] }
+  })
+  const heroStyle = useAnimatedStyle(() => {
+    // The radius channel corrected per axis so the PAINTED radius matches the driven value under
+    // the flight's anisotropic scale (core correctRadius).
+    const corrected = correctRadius(
+      radiusShared.value,
+      heroShared.scaleX.value,
+      heroShared.scaleY.value,
+    )
+    return {
+      transform: [
+        { translateX: heroShared.translateX.value },
+        { translateY: heroShared.translateY.value },
+        { scaleX: heroShared.scaleX.value },
+        { scaleY: heroShared.scaleY.value },
+      ],
+      opacity: heroShared.opacity.value,
+      borderRadius: (corrected.x + corrected.y) / 2,
+    }
+  })
+  const heroKidStyle = useAnimatedStyle(() => {
+    const kid = counterScale({
+      translateX: heroShared.translateX.value,
+      translateY: heroShared.translateY.value,
+      scaleX: heroShared.scaleX.value,
+      scaleY: heroShared.scaleY.value,
+    })
+    return { transform: [{ scaleX: kid.scaleX }, { scaleY: kid.scaleY }] }
+  })
+  // Scrim / close-X / body ride the flight's own crossfade scalar via the hero's opacity (draft
+  // thresholds: scrim linear, X second half, body final 40%) — derived in the worklet.
+  const scrimStyle = useAnimatedStyle(() => ({ opacity: heroShared.opacity.value * 0.92 }))
+  const closeXStyle = useAnimatedStyle(() => ({
+    opacity: Math.max(0, (heroShared.opacity.value - 0.5) / 0.5),
+  }))
+  const bodyStyle = useAnimatedStyle(() => {
+    const bodyProgress = Math.max(0, (heroShared.opacity.value - 0.6) / 0.4)
+    // The drafted body pair: opacity 0 → 1 WITH translateY 12 → 0 over the final 40%.
+    return { opacity: bodyProgress, transform: [{ translateY: 12 * (1 - bodyProgress) }] }
+  })
+  return (
+    <View style={styles.exampleBody}>
+      <View style={appstore.stage}>
+        <View style={appstore.list}>
+          <View style={appstore.neighbor}>
+            <Text style={appstore.cardTitle}>Vikings</Text>
+            <Text style={appstore.cardSub}>GAME OF THE DAY — static neighbor</Text>
+          </View>
+          <Pressable accessibilityLabel="appstore-thumb" onPress={openCard}>
+            <Animated.View
+              ref={thumbMeasureRef}
+              onLayout={onThumbLayout}
+              style={[appstore.thumb, { transformOrigin: 'top left' }, thumbStyle]}
+            >
+              <Animated.View style={[{ transformOrigin: 'top left' }, thumbKidStyle]}>
+                <Text style={appstore.cardTitle}>Dragonic</Text>
+                <Text style={appstore.cardSub}>Legends return — tap to expand</Text>
+                <View style={appstore.footerRow}>
+                  <Text style={appstore.cardSub}>Dragonic Legends</Text>
+                  <View style={appstore.getPill}>
+                    <Text style={appstore.getPillText}>GET</Text>
+                  </View>
+                </View>
+              </Animated.View>
+            </Animated.View>
+          </Pressable>
+        </View>
+        {phase !== 'closed' && (
+          <Animated.View pointerEvents="none" style={[appstore.scrim, scrimStyle]} />
+        )}
+        {phase !== 'closed' && (
+          <Pressable
+            accessibilityLabel="appstore-hero"
+            onPress={closeCard}
+            style={appstore.heroSlot}
+          >
+            <Animated.View
+              ref={heroMeasureRef}
+              onLayout={onHeroLayout}
+              style={[appstore.hero, { transformOrigin: 'top left' }, heroStyle]}
+            >
+              <Animated.View style={[{ transformOrigin: 'top left' }, heroKidStyle]}>
+                <Text style={appstore.cardTitle}>Dragonic</Text>
+                <Animated.Text style={[appstore.closeX, closeXStyle]}>×</Animated.Text>
+                <Animated.View style={bodyStyle}>
+                  <Text style={appstore.cardSub}>
+                    Body copy staggers into the final 40% — the detail overlay lives in the same
+                    tree as the list. Tap to close.
+                  </Text>
+                </Animated.View>
+                <View style={appstore.footerRow}>
+                  <Text style={appstore.cardSub}>Dragonic Legends</Text>
+                  <View style={appstore.getPill}>
+                    <Text style={appstore.getPillText}>GET</Text>
+                  </View>
+                </View>
+              </Animated.View>
+            </Animated.View>
+          </Pressable>
+        )}
+      </View>
+      <Text style={styles.status}>
+        {phase} · radius {label.radius} · swaps {label.swaps} · releases {label.releases}
+      </Text>
+    </View>
+  )
+}
+
+const appstore = StyleSheet.create({
+  stage: {
+    alignSelf: 'stretch',
+    height: 330,
+    borderRadius: 12,
+    backgroundColor: '#16161f',
+    overflow: 'hidden',
+  },
+  list: { padding: 12, gap: 12 },
+  neighbor: { backgroundColor: '#3a4a5e', borderRadius: 24, padding: 12, height: 72 },
+  thumb: { backgroundColor: '#0ea5e9', borderRadius: 24, padding: 12, height: 120 },
+  heroSlot: { position: 'absolute', top: 0, left: 0, right: 0 },
+  hero: { backgroundColor: '#0ea5e9', padding: 12, height: 200 },
+  scrim: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#ffffff',
+  },
+  cardTitle: { color: '#fff', fontSize: 16, fontWeight: '800' },
+  cardSub: { color: '#e0f2fe', fontSize: 11, marginTop: 2 },
+  footerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  getPill: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 4,
+  },
+  getPillText: { color: '#0ea5e9', fontSize: 11, fontWeight: '800' },
+  closeX: { position: 'absolute', top: 0, right: 4, color: '#fff', fontSize: 20 },
+})
+
+export function ChoreographyGalleryScreen() {
+  const [index, setIndex] = useState(0)
+  const [auto, setAuto] = useState(false)
+  const [autoDone, setAutoDone] = useState(false)
+  const id = EXAMPLES[index] as ExampleId
+
+  const advance = (): void => {
+    setIndex((i) => {
+      if (i + 1 >= EXAMPLES.length) {
+        setAuto(false)
+        setAutoDone(true)
+        return i
+      }
+      return i + 1
+    })
+  }
+  // iOS: hands-free auto-run (the simulator has no CLI touch injection — M2.4 precedent).
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return
+    const timer = setTimeout(() => setAuto(true), 1500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const example =
+    id === 'spring-toggle' ? (
+      <SpringToggleExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'fade' ? (
+      <FadeExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'style-morph' ? (
+      <StyleMorphExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'drag-snap' ? (
+      <DragSnapExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'presence' ? (
+      <PresenceExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'flip-swap' ? (
+      <FlipSwapExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : id === 'interrupt' ? (
+      <InterruptExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    ) : (
+      <AppStoreCardExample key={`${id}-${auto}`} auto={auto} onAutoDone={advance} />
+    )
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Native Motion — examples</Text>
+        <Text style={styles.subtitle}>
+          {index + 1}/{EXAMPLES.length} · {TITLES[id]}
+        </Text>
+        <View style={styles.navRow}>
+          <Pressable
+            style={styles.navButton}
+            onPress={() => setIndex((i) => (i - 1 + EXAMPLES.length) % EXAMPLES.length)}
+          >
+            <Text style={styles.buttonText}>PREV</Text>
+          </Pressable>
+          <Pressable
+            style={styles.navButton}
+            onPress={() => {
+              setAutoDone(false)
+              setIndex(0)
+              setAuto(true)
+            }}
+          >
+            <Text style={styles.buttonText}>AUTO</Text>
+          </Pressable>
+          <Pressable
+            style={styles.navButton}
+            onPress={() => setIndex((i) => (i + 1) % EXAMPLES.length)}
+          >
+            <Text style={styles.buttonText}>NEXT</Text>
+          </Pressable>
+        </View>
+        {example}
+        <Text style={styles.mode}>
+          {autoDone
+            ? `AUTO-RUN COMPLETE ${EXAMPLES.length}/${EXAMPLES.length}`
+            : auto
+              ? 'mode: auto-run'
+              : Platform.OS === 'ios'
+                ? 'mode: manual (auto-run arms at boot)'
+                : 'mode: manual (real touch input)'}
+        </Text>
+      </View>
+    </GestureHandlerRootView>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  container: {
+    flex: 1,
+    backgroundColor: '#0b0b12',
+    alignItems: 'center',
+    paddingTop: 84,
+    paddingHorizontal: 24,
+  },
+  title: { color: '#fff', fontSize: 24, fontWeight: '700' },
+  subtitle: { color: '#8a8aa0', fontSize: 13, marginTop: 6, textAlign: 'center' },
+  navRow: { flexDirection: 'row', gap: 12, marginTop: 16 },
+  navButton: {
+    backgroundColor: '#1e1e2e',
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    borderWidth: 1,
+    borderColor: '#2c2c3d',
+  },
+  exampleBody: { alignSelf: 'stretch', alignItems: 'center', marginTop: 28 },
+  button: {
+    backgroundColor: '#1e1e2e',
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    borderWidth: 1,
+    borderColor: '#3d3d55',
+  },
+  buttonRow: { flexDirection: 'row', gap: 12 },
+  buttonText: { color: '#c9c9d8', fontSize: 13, fontWeight: '600' },
+  stage: { alignSelf: 'stretch', height: 96, justifyContent: 'center', marginTop: 20 },
+  track: {
+    width: 240 + 64,
+    height: 96,
+    justifyContent: 'center',
+    marginTop: 20,
+  },
+  snapMarker: {
+    position: 'absolute',
+    top: 16,
+    width: 64,
+    height: 64,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#2c2c3d',
+  },
+  box: { width: 64, height: 64, borderRadius: 16 },
+  presenceRow: {
+    flexDirection: 'row',
+    gap: 12,
+    minHeight: 72,
+    marginTop: 20,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+  },
+  itemBox: {
+    width: 64,
+    height: 64,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemText: { color: '#04302b', fontSize: 14, fontWeight: '700' },
+  arena: { alignSelf: 'stretch', height: 160, justifyContent: 'center', marginTop: 20 },
+  flipHome: { alignSelf: 'flex-start', width: 64 },
+  flipEnd: { alignSelf: 'flex-end', width: 128 },
+  status: { color: '#c9c9d8', fontSize: 13, marginTop: 24, fontFamily: 'Menlo' },
+  note: { color: '#6f6f85', fontSize: 11, marginTop: 8, textAlign: 'center' },
+  mode: { color: '#6f6f85', fontSize: 11, marginTop: 'auto', marginBottom: 24 },
+})