react-native-livechart 4.10.0 → 4.12.0

package/src/components/thresholdSplitShaderSource.ts

@@ -0,0 +1,70 @@
+/**
+ * Build a balanced constant-index lookup for the threshold sample array.
+ *
+ * SkSL does not allow a runtime value to index a uniform array. A linear loop
+ * works around that restriction, but makes every covered fragment visit every
+ * segment. This tree keeps every array index constant while selecting the same
+ * segment in at most `ceil(log2(sampleCount - 1))` comparisons (six for the
+ * production 64-sample shader).
+ */
+export function buildThresholdLookupTree(sampleCount: number): string {
+  if (!Number.isInteger(sampleCount) || sampleCount < 2) {
+    throw new Error("Threshold shader needs at least two samples");
+  }
+
+  const build = (first: number, end: number, indent: string): string => {
+    if (end - first === 1) {
+      return `${indent}return mix(samples[${first}], samples[${first + 1}], clamp(u - float(${first}), 0.0, 1.0));`;
+    }
+
+    const middle = Math.floor((first + end) / 2);
+    const childIndent = `${indent}  `;
+    return `${indent}if (u < float(${middle})) {
+${build(first, middle, childIndent)}
+${indent}} else {
+${build(middle, end, childIndent)}
+${indent}}`;
+  };
+
+  return build(0, sampleCount - 1, "  ");
+}
+
+/** Build the complete time-varying threshold split shader. */
+export function buildThresholdSplitShaderSource(sampleCount: number): string {
+  const lookup = buildThresholdLookupTree(sampleCount);
+  return `
+// Pixel-X span of the sample grid (thresholdSampleSpanX) — overhangs the plot
+// and glides with the window so features move fluidly, frame to frame.
+uniform float sampleLeft;
+uniform float sampleRight;
+// X where the threshold ends (extendToNow: false → the last point's pixel-X,
+// else a huge sentinel). Fragments right of it paint restColor: the plain line
+// color for the stroke, transparent for the band.
+uniform float clipRight;
+uniform vec4 aboveColor; // straight-alpha rgba, 0..1
+uniform vec4 belowColor; // straight-alpha rgba, 0..1
+uniform vec4 restColor;  // straight-alpha rgba, 0..1
+uniform float samples[${sampleCount}];
+
+float thresholdAt(float u) {
+${lookup}
+}
+
+half4 main(vec2 xy) {
+  if (xy.x > clipRight) {
+    return half4(half3(restColor.rgb) * restColor.a, restColor.a);
+  }
+  float span = sampleRight - sampleLeft;
+  float u = span > 0.0 ? (xy.x - sampleLeft) / span : 0.0;
+  u = clamp(u, 0.0, 1.0) * float(${sampleCount - 1});
+  // Uniform-array indices must stay compile-time constants in SkSL. The
+  // generated branch tree selects the same segment as floor(u), including the
+  // clamped final endpoint, in logarithmic comparisons instead of walking every
+  // segment for every fragment.
+  float thrY = thresholdAt(u);
+  // 1 above the boundary, 0 below, with ~1px antialiasing across it.
+  float above = clamp(thrY - xy.y + 0.5, 0.0, 1.0);
+  vec4 c = mix(belowColor, aboveColor, above);
+  return half4(half3(c.rgb) * c.a, c.a);
+}`;
+}

package/src/core/liveIndicatorVisibility.ts

@@ -0,0 +1,25 @@
+import type { TimeScrollConfig } from "../types";
+
+/**
+ * Resolve whether historical time-scroll views should suppress indicators that
+ * still point at the live price.
+ */
+export function resolveHideLiveOnScrollBack(
+  timeScroll: boolean | TimeScrollConfig | undefined,
+  followViewEdge: boolean,
+): boolean {
+  const hide =
+    typeof timeScroll === "object"
+      ? (timeScroll.hideLiveOnScrollBack ?? true)
+      : true;
+  return hide && !followViewEdge;
+}
+
+/** Worklet-safe opacity gate shared by the live badge, dot, and dashed value line. */
+export function liveIndicatorScrollOpacity(
+  hideLiveOnScrollBack: boolean,
+  viewEnd: number | null,
+): 0 | 1 {
+  "worklet";
+  return hideLiveOnScrollBack && viewEnd != null ? 0 : 1;
+}

package/src/core/resolveConfig.ts

@@ -24,6 +24,7 @@ import type {
   ReferenceLine,
   ScrubActionConfig,
   ScrubConfig,
+  PerSeriesTooltipConfig,
   SelectionDotConfig,
   SelectionDotProps,
   SelectionDotRingConfig,
@@ -144,6 +145,8 @@ export interface ResolvedXAxisConfig {
 
 export interface ResolvedScrubConfig {
   tooltip: boolean;
+  /** Opt-in per-series pill tooltip for LiveChartSeries; null keeps guide-only behavior. */
+  seriesTooltip: ResolvedPerSeriesTooltipConfig | null;
   /** Opacity of content right of the crosshair while scrubbing (dstOut fade). */
   dimOpacity: number;
   /** undefined → palette.crosshairLine */
@@ -174,6 +177,36 @@ export interface ResolvedScrubConfig {
   hideOverlaysOnScrub: boolean;
 }
 
+export interface ResolvedPerSeriesTooltipConfig {
+  alwaysShow: boolean;
+  bucketSeconds: number | undefined;
+  formatSeriesValue:
+    | ((value: number, seriesId: string) => string)
+    | undefined;
+  formatTimeRange: ((from: number, to: number) => string) | undefined;
+  maxLabelChars: number;
+  guideColor: string | undefined;
+  guideWidth: number;
+  guideDashPattern: number[] | undefined;
+  timePillBackground: string | undefined;
+  timePillColor: string | undefined;
+  timePillBorderColor: string | undefined;
+  timePillRadius: number;
+  timePillPaddingX: number;
+  timePillPaddingY: number;
+  seriesPillBackground: string | undefined;
+  seriesPillLabelColor: string | undefined;
+  seriesPillValueColor: string | undefined;
+  seriesPillBorderColor: string | undefined;
+  seriesPillRadius: number;
+  seriesPillPaddingX: number;
+  seriesPillPaddingY: number;
+  seriesPillDotSize: number;
+  seriesPillDotGap: number;
+  seriesPillLabelValueGap: number;
+  intersectionDotSize: number;
+}
+
 export interface ResolvedScrubActionConfig {
   /** Glyph drawn in the action badge. */
   icon: string;
@@ -628,6 +661,7 @@ export function resolveXAxis(
 
 const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltip: true,
+  seriesTooltip: null,
   dimOpacity: 0.3,
   crosshairLineColor: undefined,
   crosshairDash: undefined,
@@ -644,6 +678,55 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   hideOverlaysOnScrub: false,
 };
 
+const PER_SERIES_TOOLTIP_DEFAULTS: ResolvedPerSeriesTooltipConfig = {
+  alwaysShow: false,
+  bucketSeconds: undefined,
+  formatSeriesValue: undefined,
+  formatTimeRange: undefined,
+  maxLabelChars: 14,
+  guideColor: undefined,
+  guideWidth: 1,
+  guideDashPattern: [3, 3],
+  timePillBackground: undefined,
+  timePillColor: undefined,
+  timePillBorderColor: undefined,
+  timePillRadius: 6,
+  timePillPaddingX: 8,
+  timePillPaddingY: 4,
+  seriesPillBackground: undefined,
+  seriesPillLabelColor: undefined,
+  seriesPillValueColor: undefined,
+  seriesPillBorderColor: undefined,
+  seriesPillRadius: 6,
+  seriesPillPaddingX: 8,
+  seriesPillPaddingY: 4,
+  seriesPillDotSize: 8,
+  seriesPillDotGap: 6,
+  seriesPillLabelValueGap: 6,
+  intersectionDotSize: 8,
+};
+
+function resolvePerSeriesTooltip(
+  prop: boolean | PerSeriesTooltipConfig | undefined,
+): ResolvedPerSeriesTooltipConfig | null {
+  const resolved = resolveToggle(
+    prop,
+    PER_SERIES_TOOLTIP_DEFAULTS,
+    false,
+  );
+  if (!resolved) return null;
+  const dash = typeof prop === "object" ? prop.guideDashPattern : undefined;
+  if (dash !== undefined) {
+    resolved.guideDashPattern = dash === true ? [3, 3] : dash || undefined;
+  }
+  resolved.maxLabelChars = Math.max(1, Math.floor(resolved.maxLabelChars));
+  resolved.bucketSeconds =
+    resolved.bucketSeconds !== undefined && resolved.bucketSeconds > 0
+      ? resolved.bucketSeconds
+      : undefined;
+  return resolved;
+}
+
 /**
  * Resolves `scrub` prop to a fully-typed config or null (disabled).
  * `true` → defaults, object → merged with defaults, falsy → null.
@@ -657,6 +740,9 @@ export function resolveScrub(
     // through, anything falsy → solid (undefined).
     const dash = typeof prop === "object" ? prop.crosshairDash : undefined;
     resolved.crosshairDash = dash === true ? [4, 4] : dash || undefined;
+    const seriesTooltip =
+      typeof prop === "object" ? prop.seriesTooltip : undefined;
+    resolved.seriesTooltip = resolvePerSeriesTooltip(seriesTooltip);
   }
   return resolved;
 }

package/src/core/useLiveChartEngine.ts

@@ -18,7 +18,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { CandlePoint, LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartEngineFrame } from "./liveChartEngineTick";
+import {
+  tickLiveChartEngineFrame,
+  type EngineTickInput,
+  type EngineTickMutable,
+} from "./liveChartEngineTick";
 
 export interface EngineConfig {
   data: SharedValue<LiveChartPoint[]>;
@@ -229,6 +233,42 @@ export interface EngineFrameRefs {
   extremaMaxTime: SharedValue<number>;
 }
 
+/** Stable state/input containers reused by the UI-thread frame callback. */
+export interface EngineFrameScratch {
+  state: EngineTickMutable;
+  input: EngineTickInput;
+}
+
+/** Allocate one single-series frame scratch. Call once per engine instance. */
+export function makeEngineFrameScratch(): EngineFrameScratch {
+  return {
+    state: {
+      displayValue: 0,
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      edgeValue: 0,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      targetValue: 0,
+      points: [],
+    },
+  };
+}
+
 /**
  * Shared between the `useFrameCallback` worklet and unit tests.
  * Mutates shared values from a snapshot tick (`tickLiveChartEngineFrame`).
@@ -236,54 +276,77 @@ export interface EngineFrameRefs {
 export function applyLiveChartEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
   sv: EngineFrameRefs,
+  scratch?: EngineFrameScratch,
 ): void {
   "worklet";
   const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
   // One-shot settle: a `snapKey` change set this flag; consume it for this tick
   // and clear it below so only this frame snaps (live ticks stay smoothed).
   const snap = sv.snapSV?.value ?? false;
-  const state = {
-    displayValue: sv.displayValue.value,
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
-    edgeValue: sv.edgeValueSV?.value ?? 0,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+  const state: EngineTickMutable = scratch?.state ?? {
+    displayValue: 0,
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
+    edgeValue: 0,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartEngineFrame(state, {
+  state.displayValue = sv.displayValue.value;
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.edgeValue = sv.edgeValueSV?.value ?? 0;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: EngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    thresholdRangePoints: sv.thresholdRangePoints?.value,
-    thresholdRangeExtendToNow: sv.thresholdRangeExtendToNow?.value ?? true,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
-    targetValue: sv.value.value,
-    points: sv.data.value,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-    mode: sv.modeSV.value,
-    candles: sv.candles?.value,
-    liveCandle: sv.liveCandle?.value,
-  });
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
+    targetValue: 0,
+    points: [],
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.thresholdRangePoints = sv.thresholdRangePoints?.value;
+  input.thresholdRangeExtendToNow = sv.thresholdRangeExtendToNow?.value ?? true;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.targetValue = sv.value.value;
+  input.points = sv.data.value;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  input.mode = sv.modeSV.value;
+  input.candles = sv.candles?.value;
+  input.liveCandle = sv.liveCandle?.value;
+  tickLiveChartEngineFrame(state, input);
   sv.displayValue.value = state.displayValue;
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
@@ -467,12 +530,16 @@ export function useLiveChartEngine(
     extremaMinTime,
     extremaMaxTime,
   };
+  const frameScratchRef = useRef<EngineFrameScratch | null>(null);
+  if (frameScratchRef.current === null) {
+    frameScratchRef.current = makeEngineFrameScratch();
+  }
 
   // `autostart=false` registers the frame callback without running it — the live
   // loop is fully inert in static mode (the invariant that makes this worth it).
   useFrameCallback((frameInfo) => {
     "worklet";
-    applyLiveChartEngineFrame(frameInfo, frameRefs);
+    applyLiveChartEngineFrame(frameInfo, frameRefs, frameScratchRef.current!);
   }, !config.static);
 
   // When time-scroll is disabled while scrolled back, return the window to the
@@ -532,6 +599,7 @@ export function useLiveChartEngine(
       applyLiveChartEngineFrame(
         { timeSincePreviousFrame: MS_PER_FRAME_60FPS },
         frameRefs,
+        frameScratchRef.current!,
       );
     },
   );

package/src/core/useLiveChartSeriesEngine.ts

@@ -11,7 +11,11 @@ import {
 } from "react-native-reanimated";
 import { MS_PER_FRAME_60FPS, RETURN_TO_LIVE_MS } from "../constants";
 import type { LiveChartPoint, SeriesConfig } from "../types";
-import { tickLiveChartSeriesEngineFrame } from "./liveChartSeriesEngineTick";
+import {
+  tickLiveChartSeriesEngineFrame,
+  type MultiEngineTickInput,
+  type MultiEngineTickMutable,
+} from "./liveChartSeriesEngineTick";
 import type { ChartEngineScroll, MultiEngineState } from "./useLiveChartEngine";
 
 export interface MultiSeriesEngineConfig {
@@ -94,10 +98,10 @@ export interface MultiEngineFrameRefs {
 }
 
 /**
- * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The two
+ * Reusable per-frame scratch for {@link applyLiveChartSeriesEngineFrame}. The
  * output arrays ping-pong so the assigned reference still changes each frame
- * (Reanimated propagates on reference change) without allocating a fresh array
- * per frame. Create one per engine (the React Compiler keeps it stable).
+ * (Reanimated propagates on reference change), while the state/input containers
+ * are mutated in place. Create one per engine.
  */
 export interface MultiSeriesEngineScratch {
   dvA: number[];
@@ -105,6 +109,46 @@ export interface MultiSeriesEngineScratch {
   opA: number[];
   opB: number[];
   tick: boolean;
+  state: MultiEngineTickMutable;
+  input: MultiEngineTickInput;
+}
+
+/** Allocate one multi-series frame scratch. Call once per engine instance. */
+export function makeMultiSeriesEngineScratch(): MultiSeriesEngineScratch {
+  const dvA: number[] = [];
+  const dvB: number[] = [];
+  const opA: number[] = [];
+  const opB: number[] = [];
+  return {
+    dvA,
+    dvB,
+    opA,
+    opB,
+    tick: false,
+    state: {
+      displayMin: 0,
+      displayMax: 1,
+      displayWindow: 0,
+      timestamp: 0,
+      liveEdge: 0,
+      displayValues: dvA,
+      opacities: opA,
+      extremaMinValue: NaN,
+      extremaMaxValue: NaN,
+      extremaMinTime: NaN,
+      extremaMaxTime: NaN,
+    },
+    input: {
+      dt: MS_PER_FRAME_60FPS,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      timeWindow: 0,
+      smoothing: 0,
+      exaggerate: false,
+      referenceValue: undefined,
+      series: [],
+    },
+  };
 }
 
 /**
@@ -113,8 +157,8 @@ export interface MultiSeriesEngineScratch {
  * to lerp per-series display values and opacities. Extracted as a
  * pure function so it can be called from both `useFrameCallback` and tests.
  *
- * Pass `scratch` to reuse the output arrays across frames instead of allocating
- * two via `.slice()` each frame; omit it (tests) to fall back to allocation.
+ * Pass `scratch` to reuse the output arrays plus state/input containers across
+ * frames; omit it (tests) to retain the standalone allocation fallback.
  */
 export function applyLiveChartSeriesEngineFrame(
   frameInfo: { timeSincePreviousFrame?: number | null },
@@ -143,42 +187,63 @@ export function applyLiveChartSeriesEngineFrame(
     displayValues = curDv.slice();
     opacities = curOp.slice();
   }
-  const state = {
-    displayMin: sv.displayMin.value,
-    displayMax: sv.displayMax.value,
-    displayWindow: sv.displayWindow.value,
-    timestamp: sv.timestamp.value,
-    liveEdge: sv.liveEdgeSV?.value ?? 0,
+  const state: MultiEngineTickMutable = scratch?.state ?? {
+    displayMin: 0,
+    displayMax: 1,
+    displayWindow: 0,
+    timestamp: 0,
+    liveEdge: 0,
     displayValues,
     opacities,
-    extremaMinValue: sv.extremaMinValue.value,
-    extremaMaxValue: sv.extremaMaxValue.value,
-    extremaMinTime: sv.extremaMinTime.value,
-    extremaMaxTime: sv.extremaMaxTime.value,
+    extremaMinValue: NaN,
+    extremaMaxValue: NaN,
+    extremaMinTime: NaN,
+    extremaMaxTime: NaN,
   };
-  tickLiveChartSeriesEngineFrame(state, {
+  state.displayMin = sv.displayMin.value;
+  state.displayMax = sv.displayMax.value;
+  state.displayWindow = sv.displayWindow.value;
+  state.timestamp = sv.timestamp.value;
+  state.liveEdge = sv.liveEdgeSV?.value ?? 0;
+  state.displayValues = displayValues;
+  state.opacities = opacities;
+  state.extremaMinValue = sv.extremaMinValue.value;
+  state.extremaMaxValue = sv.extremaMaxValue.value;
+  state.extremaMinTime = sv.extremaMinTime.value;
+  state.extremaMaxTime = sv.extremaMaxTime.value;
+
+  const input: MultiEngineTickInput = scratch?.input ?? {
     dt,
-    canvasWidth: sv.canvasWidth.value,
-    canvasHeight: sv.canvasHeight.value,
-    timeWindow: sv.timeWindow.value,
-    smoothing: sv.smoothing.value,
-    adaptiveSpeedBoost: sv.adaptiveSpeedBoostSV?.value,
-    exaggerate: sv.exaggerateSV.value,
-    referenceValue: sv.referenceValue.value,
-    referenceValues: sv.referenceValues?.value,
-    nonNegative: sv.nonNegativeSV?.value ?? false,
-    maxValue: sv.maxValueSV?.value,
-    nowOverride: sv.nowOverrideSV?.value,
-    windowBuffer: sv.windowBufferSV?.value ?? 0,
+    canvasWidth: 0,
+    canvasHeight: 0,
+    timeWindow: 0,
+    smoothing: 0,
+    exaggerate: false,
+    referenceValue: undefined,
     series: seriesSnap,
-    nowSeconds: Date.now() / 1000,
-    paused: sv.pausedSV.value,
-    snap,
-    viewEnd: sv.viewEndSV?.value,
-    returnT: sv.returnTSV?.value,
-    returnFrom: sv.returnFromSV?.value,
-    viewWindow: sv.viewWindowSV?.value,
-  });
+  };
+  input.dt = dt;
+  input.canvasWidth = sv.canvasWidth.value;
+  input.canvasHeight = sv.canvasHeight.value;
+  input.timeWindow = sv.timeWindow.value;
+  input.smoothing = sv.smoothing.value;
+  input.adaptiveSpeedBoost = sv.adaptiveSpeedBoostSV?.value;
+  input.exaggerate = sv.exaggerateSV.value;
+  input.referenceValue = sv.referenceValue.value;
+  input.referenceValues = sv.referenceValues?.value;
+  input.nonNegative = sv.nonNegativeSV?.value ?? false;
+  input.maxValue = sv.maxValueSV?.value;
+  input.nowOverride = sv.nowOverrideSV?.value;
+  input.windowBuffer = sv.windowBufferSV?.value ?? 0;
+  input.series = seriesSnap;
+  input.nowSeconds = Date.now() / 1000;
+  input.paused = sv.pausedSV.value;
+  input.snap = snap;
+  input.viewEnd = sv.viewEndSV?.value;
+  input.returnT = sv.returnTSV?.value;
+  input.returnFrom = sv.returnFromSV?.value;
+  input.viewWindow = sv.viewWindowSV?.value;
+  tickLiveChartSeriesEngineFrame(state, input);
   sv.displayMin.value = state.displayMin;
   sv.displayMax.value = state.displayMax;
   sv.displayWindow.value = state.displayWindow;
@@ -272,46 +337,48 @@ export function useLiveChartSeriesEngine(
   // Reused per-frame output buffers (ping-ponged) — see applyLiveChartSeriesEngineFrame.
   const scratchRef = useRef<MultiSeriesEngineScratch | null>(null);
   if (scratchRef.current === null) {
-    scratchRef.current = { dvA: [], dvB: [], opA: [], opB: [], tick: false };
+    scratchRef.current = makeMultiSeriesEngineScratch();
   }
 
+  const frameRefs: MultiEngineFrameRefs = {
+    series,
+    displaySeriesValues,
+    seriesOpacities,
+    displayMin,
+    displayMax,
+    displayWindow,
+    timestamp,
+    canvasWidth,
+    canvasHeight,
+    timeWindow,
+    smoothing,
+    adaptiveSpeedBoostSV,
+    exaggerateSV,
+    referenceValue,
+    referenceValues,
+    nonNegativeSV,
+    maxValueSV,
+    nowOverrideSV,
+    windowBufferSV,
+    pausedSV,
+    viewEndSV: viewEnd,
+    returnTSV: returnT,
+    returnFromSV: returnFrom,
+    viewWindowSV: viewWindow,
+    liveEdgeSV: liveEdge,
+    snapSV,
+    extremaMinValue,
+    extremaMaxValue,
+    extremaMinTime,
+    extremaMaxTime,
+  };
+
   useFrameCallback((frameInfo) => {
     "worklet";
     const scratch = scratchRef.current!;
     applyLiveChartSeriesEngineFrame(
       frameInfo,
-      {
-        series,
-        displaySeriesValues,
-        seriesOpacities,
-        displayMin,
-        displayMax,
-        displayWindow,
-        timestamp,
-        canvasWidth,
-        canvasHeight,
-        timeWindow,
-        smoothing,
-        adaptiveSpeedBoostSV,
-        exaggerateSV,
-        referenceValue,
-        referenceValues,
-        nonNegativeSV,
-        maxValueSV,
-        nowOverrideSV,
-        windowBufferSV,
-        pausedSV,
-        viewEndSV: viewEnd,
-        returnTSV: returnT,
-        returnFromSV: returnFrom,
-        viewWindowSV: viewWindow,
-        liveEdgeSV: liveEdge,
-        snapSV,
-        extremaMinValue,
-        extremaMaxValue,
-        extremaMinTime,
-        extremaMaxTime,
-      },
+      frameRefs,
       scratch,
     );
   });