react-native-livechart 4.11.0 → 4.13.0

package/src/hooks/crosshairShared.ts

@@ -1,6 +1,6 @@
 import { type SkFont } from "@shopify/react-native-skia";
 import { type Gesture } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import type { DerivedValue, SharedValue } from "react-native-reanimated";
 import { measureFontTextWidth } from "../lib/measureFontTextWidth";
 import { type ChartPadding } from "../draw/line";
 import { interpolateAtTime } from "../math/interpolate";
@@ -12,13 +12,87 @@ const TOOLTIP_LINE_GAP = 4;
 const TOOLTIP_OFFSET_X = 12;
 const TOOLTIP_EDGE_GAP = 4;
 const TOOLTIP_TOP_MARGIN = 8;
-const FADE_ZONE = 4;
 
 /** Horizontal travel required before a plain scrub claims the touch. */
 export const SCRUB_ACTIVATE_X_PX = 20;
 /** Vertical travel that fails a plain scrub so a parent scroll gesture can win. */
 export const SCRUB_FAIL_Y_PX = 10;
 
+/** Clamp an X pixel to the plot's horizontal bounds. */
+export function clampPlotX(
+  x: number,
+  padLeft: number,
+  canvasWidth: number,
+  padRight: number,
+): number {
+  "worklet";
+  return Math.min(canvasWidth - padRight, Math.max(padLeft, x));
+}
+
+export interface ScrubHitSlop {
+  left?: number;
+  right?: number;
+  bottom?: number;
+}
+
+/** Build touch-down bounds for a scrub recognizer. */
+export function resolveScrubHitSlop(
+  padding: ChartPadding,
+  clampToPlot: boolean,
+  bottomExclude = 0,
+): ScrubHitSlop | undefined {
+  if (!clampToPlot && bottomExclude <= 0) return undefined;
+  return {
+    ...(clampToPlot
+      ? { left: -padding.left, right: -padding.right }
+      : {}),
+    ...(bottomExclude > 0 ? { bottom: -bottomExclude } : {}),
+  };
+}
+
+interface ScrubGestureValue<T> {
+  get(): T;
+  set(value: T): void;
+}
+
+/** Start plain scrubbing; the recognizer gates out-of-plot touch origins. */
+export function startPlainScrub(
+  x: number,
+  padding: ChartPadding,
+  canvasWidth: number,
+  clampToPlot: boolean,
+  scrubX: ScrubGestureValue<number>,
+  scrubActive: ScrubGestureValue<boolean>,
+  gestureStarted: ScrubGestureValue<boolean>,
+): void {
+  "worklet";
+  if (clampToPlot) {
+    scrubX.set(clampPlotX(x, padding.left, canvasWidth, padding.right));
+  } else {
+    scrubX.set(x);
+  }
+  scrubActive.set(true);
+  gestureStarted.set(true);
+}
+
+/** Track plain scrubbing, clamping gestures accepted by the recognizer. */
+export function updatePlainScrub(
+  x: number,
+  padding: ChartPadding,
+  canvasWidth: number,
+  clampToPlot: boolean,
+  scrubX: ScrubGestureValue<number>,
+  scrubActive: ScrubGestureValue<boolean>,
+): void {
+  "worklet";
+  if (clampToPlot) {
+    if (!scrubActive.get()) return;
+    scrubX.set(clampPlotX(x, padding.left, canvasWidth, padding.right));
+  } else {
+    scrubX.set(x);
+  }
+}
+
 /** Measure rendered text so the pill and its content share the same centre. */
 function measureTooltipTextWidth(
   font: SkFont,
@@ -48,6 +122,37 @@ export interface TooltipLayout {
     baselineY: number;
     dim: boolean;
   }[];
+  /** LiveChartSeries' opt-in Morfi-style time pill + per-series value pills. */
+  perSeries?: {
+    /** Idle endpoint mode: value pills only, with no guide or time pill. */
+    pinned: boolean;
+    timePill?: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      text: string;
+      textX: number;
+      baselineY: number;
+    };
+    pills: {
+      id: string;
+      color: string;
+      anchorX: number;
+      anchorY: number;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      dotX: number;
+      dotY: number;
+      label: string;
+      labelX: number;
+      value: string;
+      valueX: number;
+      baselineY: number;
+    }[];
+  };
 }
 
 export const HIDDEN_TOOLTIP: TooltipLayout = {
@@ -62,6 +167,7 @@ export const HIDDEN_TOOLTIP: TooltipLayout = {
   line1Y: 0,
   line2Y: 0,
   stackedLines: undefined,
+  perSeries: undefined,
 };
 
 export interface CrosshairState {
@@ -70,7 +176,9 @@ export interface CrosshairState {
   scrubTime: SharedValue<number>;
   scrubValue: SharedValue<number | null>;
   crosshairOpacity: SharedValue<number>;
-  tooltipLayout: SharedValue<TooltipLayout>;
+  tooltipLayout:
+    | SharedValue<TooltipLayout>
+    | DerivedValue<TooltipLayout>;
   /** Scrub intersection Y in canvas px; -1 when there's no dot to draw
    *  (inactive / no value / degenerate range). See {@link computeScrubDotY}. */
   scrubDotY: SharedValue<number>;
@@ -183,20 +291,23 @@ export function computeScrubTime(
 }
 
 /**
- * Crosshair opacity: fades 1→0 over FADE_ZONE px as the crosshair
- * approaches the live dot at the right chart edge.
+ * Crosshair opacity: fades 1→0 over `fadeDistance` px as the crosshair
+ * approaches the live dot at the right chart edge. A zero distance removes
+ * the ramp while keeping the crosshair hidden at and beyond the live edge.
  */
 export function computeCrosshairOpacity(
   scrubActive: boolean,
   scrubX: number,
   canvasWidth: number,
   paddingRight: number,
+  fadeDistance = 4,
 ): number {
   "worklet";
   if (!scrubActive) return 0;
   const dotX = canvasWidth - paddingRight;
   const dist = dotX - scrubX;
-  return Math.min(1, Math.max(0, dist / FADE_ZONE));
+  if (fadeDistance <= 0) return dist > 0 ? 1 : 0;
+  return Math.min(1, Math.max(0, dist / fadeDistance));
 }
 
 /**

package/src/hooks/delayedPanGuard.ts

@@ -1,22 +1,95 @@
 import type { SharedValue } from "react-native-reanimated";
 
 type BooleanSharedValue = Pick<SharedValue<boolean>, "get" | "set">;
+type NumberSharedValue = Pick<SharedValue<number>, "get" | "set">;
+
+type TouchPoint = { x: number; y: number };
 
 type TouchCountEvent = {
   numberOfTouches: number;
 };
 
+type TouchesEvent = TouchCountEvent & {
+  changedTouches: TouchPoint[];
+  allTouches: TouchPoint[];
+};
+
 type GestureStateManager = {
   fail: () => void;
 };
 
-/** Mark the first pointer of a delayed pan as down. Zero-delay pans are inert. */
+/**
+ * A pending hold-to-scrub pan must stay within this radius of its touch-down
+ * point to activate. Matches the platform long-press convention (RNGH
+ * LongPress `maxDist` / UIKit `allowableMovement` default 10) with a little
+ * slack for thumbs.
+ */
+export const HOLD_MAX_DRIFT_PX = 12;
+
+/**
+ * An activation earlier than `delayMs - slack` after the current touch went
+ * down cannot be a real hold — it is a stale `activateAfterLongPress` timer
+ * carried over from a previous touch (see `shouldStartDelayedPan`).
+ */
+export const HOLD_TIMER_SLACK_MS = 50;
+
+/** Record the first pointer of a delayed pan going down. Zero-delay pans are inert. */
 export function delayedPanTouchDown(
   delayMs: number,
+  event: TouchesEvent,
   fingerDown: BooleanSharedValue,
+  downX: NumberSharedValue,
+  downY: NumberSharedValue,
+  downAtMs: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
+): void {
+  "worklet";
+  if (delayMs <= 0) return;
+  fingerDown.set(true);
+  const t = event.changedTouches[0];
+  if (t) {
+    downX.set(t.x);
+    downY.set(t.y);
+  }
+  downAtMs.set(Date.now());
+  holdBroken.set(false);
+}
+
+/**
+ * Enforce the stationary hold: while the delayed pan is still pending, any
+ * drift beyond HOLD_MAX_DRIFT_PX fails it outright AND latches `holdBroken`.
+ *
+ * `manager.fail()` alone is not enough. It only lands if the recognizer is
+ * still in a state that can fail, and — on iOS — the native
+ * `activateAfterLongPress` timer fires `handleGesture:inState:Active`
+ * unconditionally (RNPanHandler.m), so a timer that survived the fail still
+ * emits ACTIVE. The latch makes "the finger moved before the hold elapsed" a
+ * decision `shouldStartDelayedPan` can re-check at activation time, instead of
+ * trusting the native recognizer to have stayed failed.
+ *
+ * The latch also covers movement that returns to its origin: a finger that
+ * wanders 40px away and comes back is within the slop when the timer fires, but
+ * it was never a stationary hold.
+ */
+export function delayedPanTouchMove(
+  delayMs: number,
+  event: TouchesEvent,
+  manager: GestureStateManager,
+  panActivated: BooleanSharedValue,
+  downX: NumberSharedValue,
+  downY: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
 ): void {
   "worklet";
-  if (delayMs > 0) fingerDown.set(true);
+  if (delayMs <= 0 || panActivated.get()) return;
+  const t = event.allTouches[0];
+  if (!t) return;
+  const dx = t.x - downX.get();
+  const dy = t.y - downY.get();
+  if (dx * dx + dy * dy > HOLD_MAX_DRIFT_PX * HOLD_MAX_DRIFT_PX) {
+    holdBroken.set(true);
+    manager.fail();
+  }
 }
 
 /**
@@ -49,15 +122,37 @@ export function delayedPanTouchCancelled(
 }
 
 /**
- * Record a real delayed-pan activation, or reject an activation whose timer
- * raced the final pointer-up. The rejected path deliberately keeps
- * `panActivated` false so a missing native FINALIZE cannot poison the next
- * interaction.
+ * Record a real delayed-pan activation, or reject a spurious one. Two spurious
+ * shapes exist, both from RNGH's long-press timer surviving where it shouldn't:
+ *
+ * 1. The timer fires after the final pointer already lifted (`fingerDown`
+ *    false) — the original touch-up race.
+ * 2. The timer fires DURING a later touch: fast successive taps can land a new
+ *    pointer before the failed recognizer's native reset completes, so the
+ *    previous tap's timer fires only `now - downAtMs < delayMs` into the new
+ *    touch. A real hold can never activate early, so reject anything faster
+ *    than `delayMs - HOLD_TIMER_SLACK_MS`.
+ *
+ * 3. The timer fires after the finger already moved off the touch-down point
+ *    (`holdBroken`) — it was a drag, not a hold. See `delayedPanTouchMove`.
+ *
+ * 4. The timer fires after the time-scroll pan already took the touch
+ *    (`scrollActive`) — the chart is mid-drag, so the hold lost the race. The
+ *    two pans are composed with `Gesture.Race`, which in RNGH declares NO
+ *    relation between them (`RaceGestureType = ComposedGestureType`), so
+ *    nothing native stops a losing recognizer from activating later. This latch
+ *    is the arbitration.
+ *
+ * All rejected paths deliberately keep `panActivated` false so a missing
+ * native FINALIZE cannot poison the next interaction.
  */
 export function shouldStartDelayedPan(
   delayMs: number,
   fingerDown: BooleanSharedValue,
   panActivated: BooleanSharedValue,
+  downAtMs: NumberSharedValue,
+  holdBroken: BooleanSharedValue,
+  scrollActive: BooleanSharedValue,
 ): boolean {
   "worklet";
   if (delayMs <= 0) return true;
@@ -65,6 +160,14 @@ export function shouldStartDelayedPan(
     panActivated.set(false);
     return false;
   }
+  if (Date.now() - downAtMs.get() < delayMs - HOLD_TIMER_SLACK_MS) {
+    panActivated.set(false);
+    return false;
+  }
+  if (holdBroken.get() || scrollActive.get()) {
+    panActivated.set(false);
+    return false;
+  }
   panActivated.set(true);
   return true;
 }
@@ -73,8 +176,10 @@ export function shouldStartDelayedPan(
 export function resetDelayedPanGuard(
   fingerDown: BooleanSharedValue,
   panActivated: BooleanSharedValue,
+  holdBroken: BooleanSharedValue,
 ): void {
   "worklet";
   fingerDown.set(false);
   panActivated.set(false);
+  holdBroken.set(false);
 }

package/src/hooks/useChartPaths.ts

@@ -1,13 +1,28 @@
 import { Skia, type SkPath } from "@shopify/react-native-skia";
 import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
-import type { SingleEngineState } from "../core/useLiveChartEngine";
+import type {
+  ChartEngineEdge,
+  ChartEngineScroll,
+  SingleEngineState,
+} from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
 import { drawSpline, makeSplineScratch } from "../math/spline";
 import { sampleThresholdYAt, thresholdSampleSpanX } from "../math/threshold";
 import { blendPtsY, squigglifyPts } from "../math/squiggly";
 import { usePathBuilder } from "./usePathBuilder";
 
+/** Selects the synthetic right-edge line tip without coupling chart geometry
+ * to badge or live-indicator presentation options. */
+export function resolveLineTipValue(
+  displayValue: number,
+  edgeValue: number,
+  viewEnd: number | null,
+): number {
+  "worklet";
+  return viewEnd == null ? displayValue : edgeValue;
+}
+
 /**
  * Builds the `linePath` / `fillPath` with `Skia.PathBuilder`s reused across
  * frames (one per curve, held in a SharedValue) and finalized with `detach()` —
@@ -20,7 +35,7 @@ import { usePathBuilder } from "./usePathBuilder";
  * fillPath.
  */
 export function useChartPaths(
-  engine: SingleEngineState,
+  engine: SingleEngineState & ChartEngineScroll & ChartEngineEdge,
   padding: ChartPadding,
   morphT?: SharedValue<number>,
   /** When set, also build `thresholdFillPath` — the band between the line and this
@@ -28,14 +43,6 @@ export function useChartPaths(
   thresholdY?: SharedValue<number>,
   /** Draw the line/fill as a straight polyline instead of the monotone cubic. */
   linear = false,
-  /**
-   * Value at the visible window's right edge (engine `edgeValue`). With
-   * `followViewEdge`, the line's right-edge tip uses this instead of the live
-   * `displayValue` — so while time-scrolled the line ends at the last visible
-   * price rather than dropping to the (off-screen) live value.
-   */
-  edgeValue?: SharedValue<number>,
-  followViewEdge = false,
   /** Loading squiggle wave amplitude (px) for the reveal morph. Default 14. */
   squiggleAmplitude = 14,
   /** Loading squiggle wave speed multiplier for the reveal morph. Default 1. */
@@ -79,11 +86,14 @@ export function useChartPaths(
     const cache = cacheRef.current!;
     cache.ptsTick = !cache.ptsTick;
     const buf = cache.ptsTick ? cache.ptsA : cache.ptsB;
-    // While scrolled back with `followViewEdge`, tip the line at the view-edge
-    // price (engine `edgeValue`) instead of the live value — otherwise the line
-    // drops from the last visible point to the off-screen live value at the edge.
-    const tipValue =
-      followViewEdge && edgeValue ? edgeValue.get() : engine.displayValue.get();
+    // A historical window must end at its own right-edge price. Badge and
+    // live-indicator options affect overlays only; they must not distort the
+    // plotted series by connecting history to the off-screen live value.
+    const tipValue = resolveLineTipValue(
+      engine.displayValue.get(),
+      engine.edgeValue.get(),
+      engine.viewEnd.get(),
+    );
     const realPts = buildLinePoints(
       engine.data.get(),
       tipValue,

package/src/hooks/useCrosshair.ts

@@ -20,6 +20,7 @@ import type {
   ScrubPoint,
 } from "../types";
 import {
+  clampPlotX,
   computeActionBadgeLayout,
   computeCandleTooltipLayout,
   computeCrosshairOpacity,
@@ -32,14 +33,18 @@ import {
   HIDDEN_TIME_BADGE,
   HIDDEN_TOOLTIP,
   pointInRect,
+  resolveScrubHitSlop,
   SCRUB_ACTIVATE_X_PX,
   SCRUB_FAIL_Y_PX,
   snapPrice,
+  startPlainScrub,
   type CrosshairState,
+  updatePlainScrub,
 } from "./crosshairShared";
 import {
   delayedPanTouchCancelled,
   delayedPanTouchDown,
+  delayedPanTouchMove,
   delayedPanTouchUp,
   resetDelayedPanGuard,
   shouldStartDelayedPan,
@@ -63,18 +68,6 @@ const SCRUB_ACTION_TAP_SLOP = 10;
  */
 const SCRUB_ACTION_PRESS_HOLD_MS = 200;
 
-/** Clamp an X pixel to the plot's horizontal bounds. */
-/* istanbul ignore next -- worklet, called only from UI-thread gesture handlers */
-function clampPlotX(
-  x: number,
-  padLeft: number,
-  canvasWidth: number,
-  padRight: number,
-): number {
-  "worklet";
-  return Math.min(canvasWidth - padRight, Math.max(padLeft, x));
-}
-
 /** Clamp a Y pixel to the plot's vertical bounds. */
 /* istanbul ignore next -- worklet, called only from UI-thread gesture handlers */
 function clampPlotY(
@@ -152,6 +145,18 @@ export function useCrosshair(
    * exclusion (the default; scrub covers the whole plot).
    */
   scrubBottomExclude = 0,
+  /**
+   * True while the time-scroll pan owns the touch. The hold-to-scrub pan refuses
+   * to activate while set, so a drag that already started scrolling can never
+   * mature into a scrub (see `delayedPanGuard.shouldStartDelayedPan`).
+   */
+  scrollActive?: SharedValue<boolean>,
+  /**
+   * Reject plain-scrub starts beyond either horizontal plot edge and clamp
+   * active drags to those bounds. Scrub-action behavior is unchanged.
+   * Default `false`.
+   */
+  clampToPlot = false,
 ): CrosshairState {
   const scrubX = useSharedValue(-1);
   const scrubActive = useSharedValue(false);
@@ -162,6 +167,18 @@ export function useCrosshair(
   // lifecycle helpers are also used by LiveChartSeries and unit-tested directly.
   const fingerDown = useSharedValue(false);
   const panActivated = useSharedValue(false);
+  // Where and when the current touch went down, for the stationary-hold and
+  // stale-timer guards (see delayedPanGuard).
+  const downX = useSharedValue(0);
+  const downY = useSharedValue(0);
+  const downAtMs = useSharedValue(0);
+  // Latched once the finger leaves the hold slop: this touch is a drag, so its
+  // long-press timer must not be honored even if it still fires.
+  const holdBroken = useSharedValue(false);
+  // Inert stand-in so the guard always has a latch to read when the controller
+  // wires no time-scroll (hooks must be created unconditionally).
+  const noScrollActive = useSharedValue(false);
+  const scrollActiveSV = scrollActive ?? noScrollActive;
   // Where the crosshair line should start (canvas Y) so it stops at a top-pinned
   // custom tooltip instead of running through it. -1 = no top tooltip → the line
   // starts at padding.top. Written by CustomTooltipOverlay, read by CrosshairOverlay.
@@ -176,6 +193,7 @@ export function useCrosshair(
   // tracks the price as the axis rescales instead of drifting under a fixed pixel.
   const lockPriceValue = useSharedValue<number | null>(null);
   const hasScrubAction = scrubAction != null;
+  const clampPlainScrubToPlot = clampToPlot && !hasScrubAction;
   const hasOnScrubAction = onScrubAction != null;
   const dismissOnTapOutside = scrubAction?.dismissOnTapOutside ?? false;
   const dismissOnAction = scrubAction?.dismissOnAction ?? false;
@@ -505,9 +523,33 @@ export function useCrosshair(
     .maxPointers(1)
     .shouldCancelWhenOutside(false)
     .onTouchesDown(
-      /* istanbul ignore next */ () => {
+      /* istanbul ignore next */ (e) => {
+        "worklet";
+        delayedPanTouchDown(
+          longPressMs,
+          e,
+          fingerDown,
+          downX,
+          downY,
+          downAtMs,
+          holdBroken,
+        );
+      },
+    )
+    // Stationary hold: drift beyond the slop while the long-press is still
+    // pending fails the pan, so a drag can never mature into a scrub.
+    .onTouchesMove(
+      /* istanbul ignore next */ (e, manager) => {
         "worklet";
-        delayedPanTouchDown(longPressMs, fingerDown);
+        delayedPanTouchMove(
+          longPressMs,
+          e,
+          manager,
+          panActivated,
+          downX,
+          downY,
+          holdBroken,
+        );
       },
     )
     .onTouchesUp(
@@ -535,7 +577,17 @@ export function useCrosshair(
     .onStart(
       /* istanbul ignore next */ (e) => {
         "worklet";
-        if (!shouldStartDelayedPan(longPressMs, fingerDown, panActivated)) return;
+        if (
+          !shouldStartDelayedPan(
+            longPressMs,
+            fingerDown,
+            panActivated,
+            downAtMs,
+            holdBroken,
+            scrollActiveSV,
+          )
+        )
+          return;
         if (!enabled) return;
         // Scrub-action: once a reticle is placed, drag adjusts it (2D — the Y is
         // the price). The ephemeral live-scrub never engages, so scrubActive
@@ -565,9 +617,15 @@ export function useCrosshair(
         // also keeps a follow-on drag from showing a crosshair — no `onUpdate`
         // guard needed. (Plain-scrub counterpart of the scrub-action tap defer.)
         if (deferTapHit !== undefined && deferTapHit(e.x, e.y)) return;
-        scrubX.set(e.x);
-        scrubActive.set(true);
-        gestureStarted.set(true);
+        startPlainScrub(
+          e.x,
+          padding,
+          engine.canvasWidth.get(),
+          clampPlainScrubToPlot,
+          scrubX,
+          scrubActive,
+          gestureStarted,
+        );
         if (hasOnGestureStart) scheduleOnRN(handleGestureStart);
       },
     )
@@ -594,13 +652,20 @@ export function useCrosshair(
           }
           return;
         }
-        scrubX.set(e.x);
+        updatePlainScrub(
+          e.x,
+          padding,
+          engine.canvasWidth.get(),
+          clampPlainScrubToPlot,
+          scrubX,
+          scrubActive,
+        );
       },
     )
     .onFinalize(
       /* istanbul ignore next */ () => {
         "worklet";
-        resetDelayedPanGuard(fingerDown, panActivated);
+        resetDelayedPanGuard(fingerDown, panActivated, holdBroken);
         // A lock-adjust drag leaves the reticle in place (scrubActive was never
         // set); a live-scrub clears its crosshair. Always clear scrubActive so a
         // stray scrub can never linger behind a placed reticle.
@@ -633,13 +698,15 @@ export function useCrosshair(
       .failOffsetY([-SCRUB_FAIL_Y_PX, SCRUB_FAIL_Y_PX]);
   }
 
-  // Axis-drag time-scroll: carve the bottom "time ruler" band out of the scrub's
-  // hit area so a drag starting there scrolls (the pan-scroll gesture owns it)
-  // and never trips the crosshair. `shouldCancelWhenOutside(false)` above keeps a
-  // scrub that *started* in the plot tracking on into the band.
-  if (scrubBottomExclude > 0) {
-    gesture = gesture.hitSlop({ bottom: -scrubBottomExclude });
-  }
+  // Restrict recognition by touch-down position. This rejects before ACTIVE,
+  // leaving outside starts to competing/parent gestures. Once accepted,
+  // `shouldCancelWhenOutside(false)` keeps tracking beyond these bounds.
+  const scrubHitSlop = resolveScrubHitSlop(
+    padding,
+    clampPlainScrubToPlot,
+    scrubBottomExclude,
+  );
+  if (scrubHitSlop) gesture = gesture.hitSlop(scrubHitSlop);
 
   // Tap: place/move the reticle, press the action badge, or dismiss the lock.
   // Composed ahead of the pan by the controller, so a tap is never swallowed.
@@ -714,11 +781,15 @@ export function useCrosshair(
         .maxDistance(SCRUB_ACTION_TAP_SLOP)
         .onEnd(handleActionTap)
     : undefined;
-  // Keep the axis-drag band scroll-only for taps too — a tap there shouldn't
-  // drop an order-ticket reticle.
-  if (tapGesture && scrubBottomExclude > 0) {
-    tapGesture = tapGesture.hitSlop({ bottom: -scrubBottomExclude });
-  }
+  // Keep the bottom axis scroll-only. Do not apply horizontal plot bounds here:
+  // the action badge is intentionally tappable in the right gutter.
+  const tapHitSlop = resolveScrubHitSlop(
+    padding,
+    false,
+    scrubBottomExclude,
+  );
+  if (tapGesture && tapHitSlop)
+    tapGesture = tapGesture.hitSlop(tapHitSlop);
 
   return {
     scrubX,