@pictor-sdk/ui 0.1.0

package/src/gestures/StoryMediaGestureSurface.tsx

@@ -0,0 +1,517 @@
+import {
+  doubleTapMediaTransform,
+  isBaseImageLayer,
+  isSameTransform,
+  mediaConfigFromProfile,
+  useEditor,
+  type ImageLayerData,
+  type Layer,
+  type Transform,
+} from '@pictor-sdk/core'
+import { preferResolvedSize, useCanvasMetrics, useResolvedImageSize } from '@pictor-sdk/skia'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, {
+  cancelAnimation,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import {
+  composeMediaGestureUI,
+  onRecognizerBegin,
+  onRecognizerEnd,
+} from './mediaGestureWorklet'
+import { createSettleCoordinator, type SettleCoordinator } from './settleCoordinator'
+import {
+  beginOwnership,
+  commitOwnership,
+  documentChanged,
+  IDLE_OWNERSHIP,
+  type OwnershipState,
+} from './transformOwnership'
+import { useInteractionState } from './interactionState'
+
+/** Overrides for base-media gestures, defaulting to the profile's settings. */
+export interface StoryMediaGestureSurfaceProps {
+  /** Fired when a media gesture starts and ends — for host haptics/chrome. */
+  onInteractionChange?: (active: boolean) => void
+}
+
+/** Find the document's base media — the bottom-most layer, if it is an image. */
+export function useBaseMediaLayer(): Layer | undefined {
+  const { document } = useEditor()
+  const base = document.layers[0]
+  return base && isBaseImageLayer(document.layers, base.id) ? base : undefined
+}
+
+/**
+ * Direct manipulation of the Story base photo: one-finger reposition, focal
+ * pinch and rotation, held inside rotation-aware pan bounds with rubber-band
+ * resistance and a bounded settle.
+ *
+ * Mounted only while the `media` tool is active, so it cannot compete with
+ * overlay or drawing gestures. The transform is written to the document once
+ * per settled gesture; because the tool session already opened a history batch
+ * (see `ToolPanelHost`), a whole session of adjustments collapses into one undo
+ * entry, and a session that changed nothing records none.
+ */
+export function StoryMediaGestureSurface({
+  onInteractionChange,
+}: StoryMediaGestureSurfaceProps) {
+  const { document, dispatch, profile } = useEditor()
+  const metrics = useCanvasMetrics()
+  const { setPreview } = useInteractionState()
+  const layer = useBaseMediaLayer()
+
+  const config = useMemo(
+    () => mediaConfigFromProfile(profile.interaction?.media),
+    [profile],
+  )
+  // The renderer sizes the layer from the DECODED image, so geometry must use
+  // the same number. A declared intrinsic of 0x0 is normal for a remote URL.
+  const declared = (layer?.data as ImageLayerData | undefined)?.intrinsic
+  const resolved = useResolvedImageSize((layer?.data as ImageLayerData | undefined)?.source)
+  const intrinsic = useMemo(
+    () => preferResolvedSize(resolved, declared),
+    [resolved, declared],
+  )
+  const canvas = document.size
+
+  // ── live transform (UI thread) ──
+  const liveX = useSharedValue(0.5)
+  const liveY = useSharedValue(0.5)
+  const liveScale = useSharedValue(1)
+  const liveRotation = useSharedValue(0)
+  // ── frame base, re-captured on every pointer-count change ──
+  const baseX = useSharedValue(0.5)
+  const baseY = useSharedValue(0.5)
+  const baseScale = useSharedValue(1)
+  const baseRotation = useSharedValue(0)
+  // ── recognizer origins, subtracted so each frame starts from zero ──
+  const originPanX = useSharedValue(0)
+  const originPanY = useSharedValue(0)
+  const originPinch = useSharedValue(1)
+  const originRotate = useSharedValue(0)
+  const rawPanX = useSharedValue(0)
+  const rawPanY = useSharedValue(0)
+  const rawPinch = useSharedValue(1)
+  const rawRotate = useSharedValue(0)
+  const focalX = useSharedValue(0.5)
+  const focalY = useSharedValue(0.5)
+  const active = useSharedValue(false)
+  /** How many of pan/pinch/rotation are still live. */
+  const recognizers = useSharedValue(0)
+  /**
+   * Whether each recognizer actually activated.
+   *
+   * `onBegin` fires on touch-down for every recognizer, including the taps of a
+   * double-tap that `Gesture.Exclusive` will go on to win. Ownership has to key
+   * off activation instead, or a plain tap opens and closes a whole interaction
+   * -- registering a preview, settling and committing -- underneath the
+   * double-tap animation it is racing.
+   */
+  const startedPan = useSharedValue(false)
+  const startedPinch = useSharedValue(false)
+  const startedRotate = useSharedValue(false)
+  /**
+   * Drives the settle's timing, and nothing else.
+   *
+   * The commit has to happen when the settle *finishes*, which means some
+   * animation has to report completion. Using one of the four transform
+   * animations for that is a trap: a gesture clamped in position but not scale
+   * ends with `liveScale` already at its target, and `withTiming` from a value
+   * to itself completes in a single frame. That committed 6ms into a 180ms
+   * settle and cut the x/y animations off before they had moved. This value
+   * always travels 0 -> 1, so it always takes the full duration.
+   */
+  const settleProgress = useSharedValue(0)
+
+  const committed = layer?.transform
+
+  /**
+   * Ownership of the transform, as a plain ref.
+   *
+   * Deliberately not a shared value: this is read during render on the JS
+   * thread, and a shared value written on the UI thread reaches the JS side
+   * only asynchronously, so the guard could read stale and skip the reseed.
+   * Every writer here runs on the JS thread.
+   */
+  const ownership = useRef<OwnershipState>(IDLE_OWNERSHIP)
+
+  // Re-seed from the document whenever the committed transform changes from
+  // outside the gesture (undo, Cancel, a fresh photo) and whenever a gesture
+  // commits — the preview is a delta from these, so they must track the
+  // document exactly.
+  useEffect(() => {
+    const next = documentChanged(ownership.current, committed)
+    ownership.current = next.state
+    if (!next.reseed || !committed) return
+    liveX.value = committed.x
+    liveY.value = committed.y
+    liveScale.value = committed.scale
+    liveRotation.value = committed.rotation
+    // shared values are stable refs; only committed scalars resync them
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [committed?.x, committed?.y, committed?.scale, committed?.rotation])
+
+  /**
+   * The transform the canvas already drew the layer at, captured when the
+   * interaction begins.
+   *
+   * The preview is a *delta* from it, so the two must never disagree. Deriving
+   * it from the document each render sounds safer but is worse: the preview is
+   * registered from an effect, so on the render that commits, the canvas holds
+   * the new document transform and still the previous preview — one frame of
+   * the delta applied to the wrong baseline. Capturing it at grab sidesteps the
+   * question entirely, because the document cannot change during an
+   * interaction, and the preview is cleared in the same call that dispatches.
+   */
+  const baseCommittedX = useSharedValue(0.5)
+  const baseCommittedY = useSharedValue(0.5)
+  const baseCommittedScale = useSharedValue(1)
+  const baseCommittedRotation = useSharedValue(0)
+
+  const previewTransform = useDerivedValue(() => {
+    const ratio = liveScale.value / Math.max(baseCommittedScale.value, 1e-9)
+    return [
+      { translateX: liveX.value * canvas.width },
+      { translateY: liveY.value * canvas.height },
+      { rotate: liveRotation.value - baseCommittedRotation.value },
+      { scale: ratio },
+      { translateX: -baseCommittedX.value * canvas.width },
+      { translateY: -baseCommittedY.value * canvas.height },
+    ]
+  }, [canvas.width, canvas.height])
+
+  useEffect(() => () => setPreview(null), [setPreview])
+
+  const latest = useRef({ layer, dispatch, onInteractionChange, previewTransform })
+  latest.current = { layer, dispatch, onInteractionChange, previewTransform }
+  const settleCoordinatorRef = useRef<SettleCoordinator<Transform> | null>(null)
+
+  /** Hand the transform to the gesture: stop any settle, start previewing. */
+  const beginInteraction = useCallback(() => {
+    // A touch that lands during a settle takes ownership of the transform, so
+    // the settle in flight must never commit its stale target. This runs in the
+    // same `runOnJS` hop `begin()` already makes, and the interrupted
+    // animation's own completion callback is queued ahead of it, so there is no
+    // window in which the old settle can still write.
+    settleCoordinatorRef.current?.cancel()
+    ownership.current = beginOwnership()
+    const current = latest.current.layer
+    if (current) {
+      // snapshot the baseline the canvas is drawing at, then start previewing
+      baseCommittedX.value = current.transform.x
+      baseCommittedY.value = current.transform.y
+      baseCommittedScale.value = current.transform.scale
+      baseCommittedRotation.value = current.transform.rotation
+      setPreview({ layerId: current.id, transform: latest.current.previewTransform })
+    }
+    latest.current.onInteractionChange?.(true)
+    // shared values are stable refs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setPreview])
+
+  /**
+   * Write the settled transform. One document write per gesture — and none at
+   * all when the gesture settled exactly where it started, so a tap or a
+   * there-and-back drag leaves the session clean.
+   */
+  const commitNow = useCallback((next: Transform) => {
+    const current = latest.current.layer
+    // Cleared in the same call that dispatches, so React batches them into one
+    // render: the delta goes away exactly as the document takes the transform.
+    setPreview(null)
+    latest.current.onInteractionChange?.(false)
+    // A no-op commit means no document update is coming, so ownership ends
+    // here. Otherwise it lasts until the document reports `next` back — until
+    // then `live` already holds it, and reseeding would flash the old value.
+    const dispatched = current !== undefined && !isSameTransform(current.transform, next)
+    ownership.current = commitOwnership(next, dispatched, current?.transform)
+    if (!dispatched || !current) return
+    latest.current.dispatch({
+      type: 'layer/transform',
+      id: current.id,
+      patch: { x: next.x, y: next.y, scale: next.scale, rotation: next.rotation },
+    })
+  }, [setPreview])
+
+  const settleCoordinator = useMemo(
+    () => createSettleCoordinator<Transform>((target) => commitNow(target)),
+    // commitNow reads through `latest`, so it is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  )
+  // `beginInteraction` is created before the coordinator exists, so it reaches it here.
+  settleCoordinatorRef.current = settleCoordinator
+
+  /**
+   * Animate to `target`, then write it. The write happens in the animation's
+   * completion callback — writing first would change `committed` and cancel the
+   * very animation heading there.
+   */
+  const settleTo = useCallback(
+    (target: Transform, duration: number) => {
+      settleCoordinator.settle(target, (done) => {
+        liveX.value = withTiming(target.x, { duration })
+        liveY.value = withTiming(target.y, { duration })
+        liveRotation.value = withTiming(target.rotation, { duration })
+        liveScale.value = withTiming(target.scale, { duration })
+        // the timekeeper: never degenerate, so it always runs the full duration
+        settleProgress.value = 0
+        settleProgress.value = withTiming(1, { duration }, (finished) => {
+          'worklet'
+          runOnJS(done)(finished === true)
+        })
+      })
+    },
+    // shared values are stable refs, so they are deliberately not dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator],
+  )
+
+  // Abandon a settle in flight if the tool closes or the surface unmounts, so
+  // no stale transform is written after the session has gone.
+  useEffect(
+    () => () => {
+      settleCoordinator.cancel()
+      ownership.current = IDLE_OWNERSHIP
+      cancelAnimation(liveX)
+      cancelAnimation(liveY)
+      cancelAnimation(liveScale)
+      cancelAnimation(liveRotation)
+      cancelAnimation(settleProgress)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator],
+  )
+
+  const runDoubleTap = useCallback(
+    (xDp: number, yDp: number) => {
+      const current = latest.current.layer
+      if (!current || !metrics) return
+      const target = doubleTapMediaTransform(current.transform, canvas, intrinsic, config, {
+        x: xDp / metrics.width,
+        y: yDp / metrics.height,
+      })
+      // the animation drives the live values, so it needs the preview too
+      beginInteraction()
+      settleTo(target, config.settleMs)
+    },
+    [metrics, canvas, intrinsic, config, settleTo, beginInteraction],
+  )
+
+  const gesture = useMemo(() => {
+    const width = metrics?.width ?? 0
+    const height = metrics?.height ?? 0
+    const settleMs = config.settleMs
+
+    const recompute = () => {
+      'worklet'
+      if (!active.value || width === 0 || height === 0) return
+      const out = composeMediaGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value,
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / width,
+          panY: (rawPanY.value - originPanY.value) / height,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value,
+        },
+        canvas,
+        intrinsic,
+        config,
+        false,
+      )
+      liveX.value = out.x
+      liveY.value = out.y
+      liveScale.value = out.scale
+      liveRotation.value = out.rotation
+    }
+
+    const begin = () => {
+      'worklet'
+      const started = onRecognizerBegin(recognizers.value)
+      recognizers.value = started.count
+      // A recognizer joining an interaction already in flight seeds its own
+      // raw/origin pair in its onStart and needs nothing else: each one's
+      // contribution is measured from its own activation, so they compose
+      // without re-anchoring the frame.
+      if (!started.isFirst) return
+      // Take the transform away from any settle in flight. The animations are
+      // stopped first so `live*` holds what is actually on screen, and that is
+      // what the new gesture bases itself on — grabbing a photo mid-settle
+      // continues from where the finger sees it, with no jump.
+      cancelAnimation(liveX)
+      cancelAnimation(liveY)
+      cancelAnimation(liveScale)
+      cancelAnimation(liveRotation)
+      cancelAnimation(settleProgress)
+      active.value = true
+      // each recognizer seeds its own raw/origin pair in its onStart; anything
+      // that has not activated contributes a neutral value
+      rawPanX.value = 0
+      rawPanY.value = 0
+      rawPinch.value = 1
+      rawRotate.value = 0
+      originPanX.value = 0
+      originPanY.value = 0
+      originPinch.value = 1
+      originRotate.value = 0
+      baseX.value = liveX.value
+      baseY.value = liveY.value
+      baseScale.value = liveScale.value
+      baseRotation.value = liveRotation.value
+      focalX.value = liveX.value
+      focalY.value = liveY.value
+      runOnJS(beginInteraction)()
+    }
+
+    const finish = () => {
+      'worklet'
+      const ended = onRecognizerEnd(recognizers.value)
+      recognizers.value = ended.count
+      // Pinch and rotation finalise as soon as a finger lifts while the pan
+      // recognizer keeps running with the remaining one. Ending here would cut
+      // the interaction short, so wait for the last recognizer.
+      if (!ended.isLast || !active.value) return
+      active.value = false
+      // settle: hard-clamp back inside the bounds, then animate there
+      const settled = composeMediaGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value,
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / width,
+          panY: (rawPanY.value - originPanY.value) / height,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value,
+        },
+        canvas,
+        intrinsic,
+        config,
+        true,
+      )
+      runOnJS(settleTo)(settled, settleMs)
+    }
+
+    const pan = Gesture.Pan()
+      .minPointers(1)
+      .maxPointers(2)
+      // A recognizer only activates once the finger has travelled past the
+      // touch slop, and by then its cumulative value already includes that
+      // travel. Taking the origin at activation is what keeps the photo still
+      // under the finger; taking it at touch-down makes it leap by the slop.
+      .onStart((e) => {
+        'worklet'
+        startedPan.value = true
+        begin()
+        rawPanX.value = e.translationX
+        rawPanY.value = e.translationY
+        originPanX.value = e.translationX
+        originPanY.value = e.translationY
+      })
+      .onUpdate((e) => {
+        'worklet'
+        rawPanX.value = e.translationX
+        rawPanY.value = e.translationY
+        recompute()
+      })
+      .onFinalize(() => {
+        'worklet'
+        if (!startedPan.value) return
+        startedPan.value = false
+        finish()
+      })
+
+    const pinch = Gesture.Pinch()
+      .onStart((e) => {
+        'worklet'
+        startedPinch.value = true
+        begin()
+        rawPinch.value = e.scale
+        originPinch.value = e.scale
+        focalX.value = e.focalX / width
+        focalY.value = e.focalY / height
+      })
+      .onUpdate((e) => {
+        'worklet'
+        rawPinch.value = e.scale
+        focalX.value = e.focalX / width
+        focalY.value = e.focalY / height
+        recompute()
+      })
+      .onFinalize(() => {
+        'worklet'
+        if (!startedPinch.value) return
+        startedPinch.value = false
+        finish()
+      })
+
+    const rotate = Gesture.Rotation()
+      .enabled(config.rotationEnabled)
+      .onStart((e) => {
+        'worklet'
+        startedRotate.value = true
+        begin()
+        rawRotate.value = e.rotation
+        originRotate.value = e.rotation
+      })
+      .onUpdate((e) => {
+        'worklet'
+        // Only the pinch owns the focal point. Gesture Handler's rotation
+        // anchor and pinch focal are computed separately and disagree by a
+        // pixel or two, so letting both write it made the focal — and with it
+        // the whole composed transform — oscillate every frame.
+        rawRotate.value = e.rotation
+        recompute()
+      })
+      .onFinalize(() => {
+        'worklet'
+        if (!startedRotate.value) return
+        startedRotate.value = false
+        finish()
+      })
+
+    const doubleTap = Gesture.Tap()
+      .numberOfTaps(2)
+      .onEnd((e) => {
+        'worklet'
+        runOnJS(runDoubleTap)(e.x, e.y)
+      })
+
+    // `Exclusive(doubleTap, ...)` would make the pan wait for the double-tap to
+    // *fail* before it may activate — and a two-tap gesture only fails once the
+    // finger has moved past its delta threshold or its timing windows expire,
+    // up to half a second. That gated the start of every drag, which is felt as
+    // lag however fast the rest of the pipeline is.
+    //
+    // Racing them instead lets the pan activate the moment it passes touch
+    // slop, while a stationary double-tap still wins because a tap never moves
+    // far enough to activate the pan. This is the composition the overlay
+    // surface uses, which is the one that feels immediate.
+    return Gesture.Simultaneous(Gesture.Race(pan, doubleTap), pinch, rotate)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [metrics, canvas, intrinsic, config, settleTo, beginInteraction, runDoubleTap])
+
+  if (!layer) return null
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={StyleSheet.absoluteFill} />
+    </GestureDetector>
+  )
+}

package/src/gestures/TiltShiftGestureSurface.tsx

@@ -0,0 +1,189 @@
+import {
+  moveTiltCenter,
+  needsTiltShift,
+  rotateTiltBand,
+  scaleTiltRadius,
+  tiltShiftPatch,
+  useEditor,
+  type ImageLayerData,
+  type TiltShift,
+} from '@pictor-sdk/core'
+import { useCanvasMetrics } from '@pictor-sdk/skia'
+import React, { useMemo, useRef } from 'react'
+import { StyleSheet } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import { useTargetImageLayer } from '../panels/useTargetImageLayer'
+
+/**
+ * Placing the focus region: drag to move it, pinch to size it, twist to turn a
+ * band.
+ *
+ * **Why the blur does not follow the finger.** The focus geometry lives in the
+ * document and the shader reads it from there, so updating it per frame would
+ * mean dispatching per frame — exactly the React-state-per-frame rule this
+ * codebase forbids. Instead the gesture drives a **transient indicator**
+ * computed entirely on the UI thread, and commits one normalized value on
+ * release inside the tool's batch. That is also what the research pass measured
+ * on the reference implementation: no focus ring is drawn persistently, and the
+ * indicator appears only during interaction.
+ *
+ * Composition follows the media surface's rules: `Simultaneous(pan, pinch,
+ * rotate)`, never `Exclusive` against a tap — an `Exclusive` gate makes every
+ * drag wait for a tap to fail first, which is what made the story surface feel
+ * laggy. The origin is captured once when the first recogniser activates, so a
+ * second finger landing mid-gesture cannot re-base the interaction on a value
+ * it is itself changing.
+ */
+export function TiltShiftGestureSurface() {
+  const { dispatch } = useEditor()
+  const layer = useTargetImageLayer()
+  const metrics = useCanvasMetrics()
+  const tilt = (layer?.data as ImageLayerData | undefined)?.tiltShift
+  const active = needsTiltShift(tilt)
+
+  // The value the whole interaction is measured from. A ref, not state: it is
+  // read by the commit on the JS thread and never rendered.
+  const origin = useRef<TiltShift | null>(null)
+  const live = useRef<TiltShift | null>(null)
+  live.current = active ? tilt! : null
+
+  const width = metrics?.width ?? 0
+  const height = metrics?.height ?? 0
+
+  // Origin geometry in canvas dp, mirrored so the indicator needs no JS.
+  const oX = useSharedValue(0)
+  const oY = useSharedValue(0)
+  const oR = useSharedValue(0)
+  const oRot = useSharedValue(0)
+  const oLinear = useSharedValue(0)
+  const visible = useSharedValue(0)
+  // Live totals from each recogniser. Every one reports its own running total
+  // against the origin, so they combine without accumulating.
+  const dx = useSharedValue(0)
+  const dy = useSharedValue(0)
+  const pinch = useSharedValue(1)
+  const twist = useSharedValue(0)
+  const activeCount = useSharedValue(0)
+
+  const capture = useMemo(
+    () => () => {
+      const from = live.current
+      if (!from || origin.current) return
+      origin.current = from
+      oX.value = from.x * width
+      oY.value = from.y * height
+      oR.value = from.radius * width
+      oRot.value = from.rotation
+      oLinear.value = from.mode === 'linear' ? 1 : 0
+    },
+    [width, height, oX, oY, oR, oRot, oLinear],
+  )
+
+  const commit = useMemo(
+    () => (tx: number, ty: number, scale: number, rotation: number) => {
+      const from = origin.current
+      origin.current = null
+      if (!from || !layer || width <= 0 || height <= 0) return
+      // Each transform applied once, from the captured origin.
+      let next = moveTiltCenter(from, tx / width, ty / height)
+      next = scaleTiltRadius({ ...next, radius: from.radius, feather: from.feather }, scale)
+      next = rotateTiltBand({ ...next, rotation: from.rotation }, rotation)
+      dispatch({
+        type: 'layer/patchData',
+        id: layer.id,
+        patch: tiltShiftPatch(next) as unknown as Record<string, unknown>,
+      })
+    },
+    [dispatch, layer, width, height],
+  )
+
+  const gesture = useMemo(() => {
+    const begin = () => {
+      'worklet'
+      activeCount.value += 1
+      visible.value = 1
+      runOnJS(capture)()
+    }
+    /** Commit once, when the last recogniser lets go. */
+    const end = () => {
+      'worklet'
+      activeCount.value = Math.max(0, activeCount.value - 1)
+      if (activeCount.value > 0) return
+      visible.value = 0
+      runOnJS(commit)(dx.value, dy.value, pinch.value, twist.value)
+      dx.value = 0
+      dy.value = 0
+      pinch.value = 1
+      twist.value = 0
+    }
+
+    const pan = Gesture.Pan()
+      .enabled(active)
+      .onStart(begin)
+      .onUpdate((e) => {
+        'worklet'
+        dx.value = e.translationX
+        dy.value = e.translationY
+      })
+      .onFinalize(end)
+
+    const pinchGesture = Gesture.Pinch()
+      .enabled(active)
+      .onStart(begin)
+      .onUpdate((e) => {
+        'worklet'
+        pinch.value = e.scale
+      })
+      .onFinalize(end)
+
+    const rotation = Gesture.Rotation()
+      .enabled(active)
+      .onStart(begin)
+      .onUpdate((e) => {
+        'worklet'
+        twist.value = e.rotation
+      })
+      .onFinalize(end)
+
+    return Gesture.Simultaneous(pan, pinchGesture, rotation)
+  }, [active, capture, commit, activeCount, visible, dx, dy, pinch, twist])
+
+  // The indicator, entirely on the UI thread — no dispatch, no re-render, and
+  // no JS hop per frame.
+  const ringStyle = useAnimatedStyle(() => {
+    const r = Math.max(1, oR.value * pinch.value)
+    const cx = oX.value + dx.value
+    const cy = oY.value + dy.value
+    const band = oLinear.value > 0.5
+    return {
+      opacity: visible.value,
+      left: band ? -width : cx - r,
+      top: cy - r,
+      width: band ? width * 3 : r * 2,
+      height: r * 2,
+      borderRadius: band ? 0 : r,
+      transform: [{ rotate: `${oRot.value + twist.value}rad` }],
+    }
+  })
+
+  if (!active) return null
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={StyleSheet.absoluteFill}>
+        {/* Drawn here, in React Native, never inside renderDocument — so no
+            editing chrome can reach an export. */}
+        <Animated.View pointerEvents="none" style={[styles.ring, ringStyle]} />
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+const styles = StyleSheet.create({
+  ring: {
+    position: 'absolute',
+    borderWidth: 1.5,
+    borderColor: 'rgba(255,255,255,0.9)',
+  },
+})