react-native-vroom-chart 0.7.0 → 0.9.0

package/cpp/_core_src/tip_pulse.h

@@ -0,0 +1,74 @@
+// The pulsing ring at the line chart's tip — a phase in, a radius and two
+// alphas out (VROOM_FLOAT_LINE_TIP_PULSE).
+//
+// Shape and timing follow TradingView's last-price animation, whose numbers are
+// well-tuned: expand while the fill washes out and the edge sharpens, keep
+// expanding while the edge fades, then rest. That rest is nearly half the period
+// and it is what makes the ring read as a heartbeat instead of a strobe.
+//
+// Radii come out as multiples of the ring's start radius rather than pixels,
+// because the tip dot scales with the line width and the ring has to scale with
+// it (see draw_close_tip in ma_overlay.cpp).
+//
+// Skia-free and header-only so the unit tests can cover it; see
+// tests/test_tip_pulse.cpp.
+
+#pragma once
+
+#include <cmath>
+
+namespace vroom::tip_pulse {
+
+// One full expand-and-rest cycle.
+constexpr float kPeriodSeconds = 2.6f;
+
+// The ring at one instant. Alphas already account for the rest stage, so a
+// caller can paint unconditionally and simply draw nothing visible.
+struct Frame {
+    float radius_mul;    // multiple of the ring's start radius
+    float fill_alpha;
+    float stroke_alpha;
+};
+
+namespace detail {
+
+struct Stage {
+    float end;  // phase this stage runs until
+    float start_radius, end_radius;
+    float start_fill, end_fill;
+    float start_stroke, end_stroke;
+};
+
+// The fill fades as the ring grows, while the edge first *gains* alpha — that
+// crossover is what gives the bloom its snap — before fading out in stage two.
+constexpr Stage kStages[] = {
+    {0.25f,  1.0f, 2.5f, 0.25f, 0.f, 0.40f, 0.80f},
+    {0.525f, 2.5f, 3.5f, 0.f,   0.f, 0.80f, 0.f},
+    {1.0f,   3.5f, 3.5f, 0.f,   0.f, 0.f,   0.f},
+};
+
+inline float lerp(float a, float b, float t) { return a + (b - a) * t; }
+
+}  // namespace detail
+
+// Ring state at `phase`, in cycles. Values outside [0,1) wrap, so a caller can
+// hand over raw elapsed time divided by the period without normalizing.
+inline Frame at(float phase) {
+    const float p = phase - std::floor(phase);
+    float start = 0.f;
+    for (const detail::Stage& s : detail::kStages) {
+        // The last stage takes anything left over, which also catches a `p` that
+        // rounded up to 1 on the way in.
+        if (p < s.end || s.end >= 1.f) {
+            const float span = s.end - start;
+            const float t = span > 0.f ? (p - start) / span : 0.f;
+            return Frame{detail::lerp(s.start_radius, s.end_radius, t),
+                         detail::lerp(s.start_fill, s.end_fill, t),
+                         detail::lerp(s.start_stroke, s.end_stroke, t)};
+        }
+        start = s.end;
+    }
+    return Frame{1.f, 0.f, 0.f};  // unreachable: the table ends at 1
+}
+
+}  // namespace vroom::tip_pulse

package/lib/index.d.mts

@@ -107,6 +107,33 @@ type VroomTheme = {
      * the bottom of the price pane. Defaults to 0.28; set to 0 to disable the fill.
      */
     lineGradientOpacity?: number;
+    /**
+     * How much to round the line chart's corners, from 0 (straight segments
+     * between closes) to 1 (fully smooth). Defaults to 0.
+     *
+     * The curve is monotone-limited, so smoothing can never overshoot into a price
+     * that didn't trade: every peak and trough stays on an actual close, and the
+     * curve never leaves the range of the two closes it connects. Applies to the
+     * gradient fill beneath the line as well, so the two stay flush.
+     */
+    lineTension?: number;
+    /**
+     * Mark the line chart's newest end with a dot. Defaults to `true`.
+     *
+     * Takes its color from `line` and its radius from `lineWidth`, wrapped in a 2px
+     * ring of `background` that separates it from the line itself. Only drawn in
+     * line mode, and it crossfades along with the line during a candle↔line
+     * transition.
+     */
+    lineTipDot?: boolean;
+    /**
+     * Pulse a ring outward from the tip dot, once every 2.6s. Defaults to `false`.
+     *
+     * Ignored when `lineTipDot` is off, and suppressed when the OS asks for reduced
+     * motion. Because the ring never stops, enabling it keeps the chart repainting
+     * continuously — leave it off for charts that should be able to go idle.
+     */
+    lineTipPulse?: boolean;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {
@@ -134,7 +161,7 @@ type ChartType = 'candles' | 'line';
  */
 type TransitionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
 /** Active drawing tool while in `draw` mode. `null` draws nothing. */
-type DrawTool = null | 'line' | 'box' | 'pencil';
+type DrawTool = null | 'line' | 'box' | 'pencil' | 'path';
 /** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
 type DrawPoint = {
     /** Anchor time as Unix epoch milliseconds (not snapped to a candle slot). */
@@ -176,16 +203,27 @@ type PencilDrawing = DrawingBase & {
     /** The path's points in draw order (at least 2), in data space. */
     points: DrawPoint[];
 };
+/**
+ * A multi-segment path: straight segments through `points`, in order, ending in
+ * an arrowhead on the last vertex. Like a pencil stroke it holds a variable
+ * number of points, but every one was placed deliberately (one click each), so
+ * each is an individually draggable handle once the path is committed.
+ */
+type PathDrawing = DrawingBase & {
+    type: 'path';
+    /** The path's vertices in draw order (at least 2), in data space. */
+    points: DrawPoint[];
+};
 /**
  * A committed drawing. Pass an array of these via the `drawings` prop to render
  * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
  * each time the user finishes drawing.
  *
  * This is a discriminated union on `type` — narrow on it before reading
- * `points[1]`, since a `'pencil'` stroke has a variable-length array while
+ * `points[1]`, since `'pencil'` and `'path'` have variable-length arrays while
  * `'line'` and `'box'` are always exactly two points.
  */
-type Drawing = LineDrawing | BoxDrawing | PencilDrawing;
+type Drawing = LineDrawing | BoxDrawing | PencilDrawing | PathDrawing;
 /**
  * Storage adapter for **managed** drawing persistence. Provide it via the
  * `drawingStore` prop and the chart owns the drawings array itself — loading and
@@ -783,4 +821,35 @@ declare global {
  */
 declare function VroomChart(props: VroomChartProps): React.JSX.Element;
 
-export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };
+/**
+ * How a new `candles` array relates to the one the chart already holds:
+ * `'initial'` is the first data, `'stream'` a live update to the same series,
+ * `'timeframe'` the same asset re-bucketed into a different interval, and
+ * `'reset'` a different series entirely.
+ */
+type DataTransition = 'initial' | 'stream' | 'timeframe' | 'reset';
+/**
+ * The candle period in ms, inferred as the median of the first few intervals
+ * (robust to a single gap). Null when there are fewer than two candles.
+ */
+declare function inferStepMs(candles: Candle[]): number | null;
+/**
+ * Classify a candles-prop change. `prev` is the previously rendered array
+ * (null on first render); `seriesKeyChanged` forces `reset` regardless of the
+ * data (the explicit escape hatch).
+ *
+ * Constraint: detection compares two immutable snapshots. An array mutated in
+ * place (same reference) never reaches this code — React props must change
+ * identity to re-render.
+ */
+declare function classifyTransition(prev: Candle[] | null, next: Candle[], seriesKeyChanged: boolean): DataTransition;
+/**
+ * The visible window to apply after a timeframe switch so each candle keeps
+ * the exact pixel width it had before: the visible slot count is preserved and
+ * the right edge re-anchors on the newest candle (any future-gap overshoot is
+ * carried over in slots, clamped to the core's 3/4-window cap). The new start
+ * may precede the first candle — that gap is intentional, width wins.
+ */
+declare function timeframeWindow(oldWindow: VisibleRange, oldStepMs: number, oldLastMs: number, newStepMs: number, newLastMs: number): VisibleRange;
+
+export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type DataTransition, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme, classifyTransition, inferStepMs, timeframeWindow };

package/lib/index.d.ts

@@ -107,6 +107,33 @@ type VroomTheme = {
      * the bottom of the price pane. Defaults to 0.28; set to 0 to disable the fill.
      */
     lineGradientOpacity?: number;
+    /**
+     * How much to round the line chart's corners, from 0 (straight segments
+     * between closes) to 1 (fully smooth). Defaults to 0.
+     *
+     * The curve is monotone-limited, so smoothing can never overshoot into a price
+     * that didn't trade: every peak and trough stays on an actual close, and the
+     * curve never leaves the range of the two closes it connects. Applies to the
+     * gradient fill beneath the line as well, so the two stay flush.
+     */
+    lineTension?: number;
+    /**
+     * Mark the line chart's newest end with a dot. Defaults to `true`.
+     *
+     * Takes its color from `line` and its radius from `lineWidth`, wrapped in a 2px
+     * ring of `background` that separates it from the line itself. Only drawn in
+     * line mode, and it crossfades along with the line during a candle↔line
+     * transition.
+     */
+    lineTipDot?: boolean;
+    /**
+     * Pulse a ring outward from the tip dot, once every 2.6s. Defaults to `false`.
+     *
+     * Ignored when `lineTipDot` is off, and suppressed when the OS asks for reduced
+     * motion. Because the ring never stops, enabling it keeps the chart repainting
+     * continuously — leave it off for charts that should be able to go idle.
+     */
+    lineTipPulse?: boolean;
 };
 /** A time window over the candle data, as Unix epoch milliseconds. */
 type VisibleRange = {
@@ -134,7 +161,7 @@ type ChartType = 'candles' | 'line';
  */
 type TransitionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
 /** Active drawing tool while in `draw` mode. `null` draws nothing. */
-type DrawTool = null | 'line' | 'box' | 'pencil';
+type DrawTool = null | 'line' | 'box' | 'pencil' | 'path';
 /** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
 type DrawPoint = {
     /** Anchor time as Unix epoch milliseconds (not snapped to a candle slot). */
@@ -176,16 +203,27 @@ type PencilDrawing = DrawingBase & {
     /** The path's points in draw order (at least 2), in data space. */
     points: DrawPoint[];
 };
+/**
+ * A multi-segment path: straight segments through `points`, in order, ending in
+ * an arrowhead on the last vertex. Like a pencil stroke it holds a variable
+ * number of points, but every one was placed deliberately (one click each), so
+ * each is an individually draggable handle once the path is committed.
+ */
+type PathDrawing = DrawingBase & {
+    type: 'path';
+    /** The path's vertices in draw order (at least 2), in data space. */
+    points: DrawPoint[];
+};
 /**
  * A committed drawing. Pass an array of these via the `drawings` prop to render
  * persisted annotations; the chart appends a new one (via `onDrawingComplete`)
  * each time the user finishes drawing.
  *
  * This is a discriminated union on `type` — narrow on it before reading
- * `points[1]`, since a `'pencil'` stroke has a variable-length array while
+ * `points[1]`, since `'pencil'` and `'path'` have variable-length arrays while
  * `'line'` and `'box'` are always exactly two points.
  */
-type Drawing = LineDrawing | BoxDrawing | PencilDrawing;
+type Drawing = LineDrawing | BoxDrawing | PencilDrawing | PathDrawing;
 /**
  * Storage adapter for **managed** drawing persistence. Provide it via the
  * `drawingStore` prop and the chart owns the drawings array itself — loading and
@@ -783,4 +821,35 @@ declare global {
  */
 declare function VroomChart(props: VroomChartProps): React.JSX.Element;
 
-export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };
+/**
+ * How a new `candles` array relates to the one the chart already holds:
+ * `'initial'` is the first data, `'stream'` a live update to the same series,
+ * `'timeframe'` the same asset re-bucketed into a different interval, and
+ * `'reset'` a different series entirely.
+ */
+type DataTransition = 'initial' | 'stream' | 'timeframe' | 'reset';
+/**
+ * The candle period in ms, inferred as the median of the first few intervals
+ * (robust to a single gap). Null when there are fewer than two candles.
+ */
+declare function inferStepMs(candles: Candle[]): number | null;
+/**
+ * Classify a candles-prop change. `prev` is the previously rendered array
+ * (null on first render); `seriesKeyChanged` forces `reset` regardless of the
+ * data (the explicit escape hatch).
+ *
+ * Constraint: detection compares two immutable snapshots. An array mutated in
+ * place (same reference) never reaches this code — React props must change
+ * identity to re-render.
+ */
+declare function classifyTransition(prev: Candle[] | null, next: Candle[], seriesKeyChanged: boolean): DataTransition;
+/**
+ * The visible window to apply after a timeframe switch so each candle keeps
+ * the exact pixel width it had before: the visible slot count is preserved and
+ * the right edge re-anchors on the newest candle (any future-gap overshoot is
+ * carried over in slots, clamped to the core's 3/4-window cap). The new start
+ * may precede the first candle — that gap is intentional, width wins.
+ */
+declare function timeframeWindow(oldWindow: VisibleRange, oldStepMs: number, oldLastMs: number, newStepMs: number, newLastMs: number): VisibleRange;
+
+export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type DataTransition, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme, classifyTransition, inferStepMs, timeframeWindow };

package/lib/index.js

@@ -30,7 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  VroomChart: () => VroomChart
+  VroomChart: () => VroomChart,
+  classifyTransition: () => classifyTransition,
+  inferStepMs: () => inferStepMs,
+  timeframeWindow: () => timeframeWindow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -48,6 +51,86 @@ var import_react = require("react");
 var import_react_native = require("react-native");
 var NativeVroomChart_default = import_react_native.TurboModuleRegistry.getEnforcing("VroomChartModule");
 
+// src/dataTransitions.ts
+var STEP_TOLERANCE = 0.01;
+var MAX_SAME_ASSET_CLOSE_RATIO = 1.25;
+var MAX_END_DRIFT_STEPS = 3;
+var MAX_STREAM_ADVANCE_STEPS = 5;
+function inferStepMs(candles) {
+  if (candles.length < 2) return null;
+  const k = Math.min(candles.length - 1, 8);
+  const diffs = [];
+  for (let i = 0; i < k; i++) diffs.push(candles[i + 1].timeMs - candles[i].timeMs);
+  diffs.sort((a, b) => a - b);
+  const median = diffs[Math.floor(diffs.length / 2)];
+  return median > 0 ? median : null;
+}
+function indexByTime(candles, t) {
+  let lo = 0;
+  let hi = candles.length - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >>> 1;
+    const v = candles[mid].timeMs;
+    if (v === t) return mid;
+    if (v < t) lo = mid + 1;
+    else hi = mid - 1;
+  }
+  return -1;
+}
+function classifyTransition(prev, next, seriesKeyChanged) {
+  if (!prev || prev.length === 0) return "initial";
+  if (next.length === 0) return "stream";
+  if (seriesKeyChanged) return "reset";
+  const prevStep = inferStepMs(prev);
+  const nextStep = inferStepMs(next);
+  if (prevStep == null || nextStep == null) return "reset";
+  const prevLast = prev[prev.length - 1];
+  const nextLast = next[next.length - 1];
+  if (Math.abs(nextStep - prevStep) <= prevStep * STEP_TOLERANCE) {
+    const idx = indexByTime(next, prevLast.timeMs);
+    const aligned = idx >= 0;
+    const sharedBarRatio = aligned && next[idx].close > 0 && prevLast.close > 0 ? Math.max(next[idx].close / prevLast.close, prevLast.close / next[idx].close) : Infinity;
+    const advanced = nextLast.timeMs >= prevLast.timeMs && nextLast.timeMs - prevLast.timeMs <= MAX_STREAM_ADVANCE_STEPS * nextStep;
+    return sharedBarRatio <= MAX_SAME_ASSET_CLOSE_RATIO && advanced ? "stream" : "reset";
+  }
+  const closeRatio = prevLast.close > 0 && nextLast.close > 0 ? Math.max(nextLast.close / prevLast.close, prevLast.close / nextLast.close) : Infinity;
+  const prevEnd = prevLast.timeMs + prevStep;
+  const nextEnd = nextLast.timeMs + nextStep;
+  const endsTogether = Math.abs(nextEnd - prevEnd) <= MAX_END_DRIFT_STEPS * Math.max(prevStep, nextStep);
+  return closeRatio <= MAX_SAME_ASSET_CLOSE_RATIO && endsTogether ? "timeframe" : "reset";
+}
+function timeframeWindow(oldWindow, oldStepMs, oldLastMs, newStepMs, newLastMs) {
+  const slots = (oldWindow.endMs - oldWindow.startMs) / oldStepMs;
+  const offsetRaw = (oldWindow.endMs - oldLastMs) / oldStepMs;
+  const offsetSlots = Math.min(Math.max(offsetRaw, 0), slots * 0.75);
+  const endMs = Math.round(newLastMs + offsetSlots * newStepMs);
+  return { startMs: Math.round(endMs - slots * newStepMs), endMs };
+}
+
+// src/easing.ts
+function ease(kind, p) {
+  switch (kind) {
+    case "linear":
+      return p;
+    case "ease-in":
+      return p * p;
+    case "ease-out":
+      return p * (2 - p);
+    default:
+      return p * p * (3 - 2 * p);
+  }
+}
+var EASINGS = [
+  "linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out"
+];
+function easingIndex(kind) {
+  const i = kind ? EASINGS.indexOf(kind) : -1;
+  return i < 0 ? EASINGS.indexOf("ease-in-out") : i;
+}
+
 // src/packCandles.ts
 var BYTES_PER_CANDLE = 48;
 function packCandles(candles) {
@@ -106,12 +189,18 @@ var FLOAT_KEYS = {
   // VROOM_FLOAT_VOLUME_RADIUS_PX
   lineWidth: 11,
   // VROOM_FLOAT_LINE_WIDTH_PX
-  lineGradientOpacity: 12
+  lineGradientOpacity: 12,
   // VROOM_FLOAT_LINE_GRADIENT_OPACITY
+  lineTension: 13
+  // VROOM_FLOAT_LINE_TENSION
 };
+var FLOAT_LINE_TIP_PULSE = 15;
 var BOOL_KEYS = {
-  wickRoundCap: 9
+  wickRoundCap: 9,
   // VROOM_FLOAT_WICK_ROUND_CAP
+  lineTipDot: 14,
+  // VROOM_FLOAT_LINE_TIP_DOT
+  lineTipPulse: FLOAT_LINE_TIP_PULSE
 };
 function parseColor(value) {
   if (typeof value === "number") {
@@ -282,15 +371,53 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, movingAverages, vwap, bollingerBands, volume, priceLines, transition) {
   const handleRef = (0, import_react.useRef)(null);
   const defaultWidthAppliedRef = (0, import_react.useRef)(false);
   const volumeCollapseRef = (0, import_react.useRef)(null);
+  const prevDataRef = (0, import_react.useRef)(null);
+  const intervalMorphRaf = (0, import_react.useRef)(null);
   const [picture, setPicture] = (0, import_react.useState)(null);
   if (!handleRef.current && size.width > 0 && size.height > 0) {
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
+  const animRef = (0, import_react.useRef)({ ms: 300, easing: void 0, reduceMotion: false });
+  animRef.current = {
+    ms: Math.max(0, transition?.transitionMs ?? 300),
+    easing: transition?.transitionEasing,
+    reduceMotion: transition?.reduceMotion ?? false
+  };
+  const onFrameRef = (0, import_react.useRef)(transition?.onFrame);
+  onFrameRef.current = transition?.onFrame;
+  const seriesKey = transition?.seriesKey;
+  const endIntervalMorph = (0, import_react.useCallback)(() => {
+    if (intervalMorphRaf.current != null) {
+      cancelAnimationFrame(intervalMorphRaf.current);
+      intervalMorphRaf.current = null;
+    }
+    handleRef.current?.setIntervalMorph(1);
+  }, []);
+  const startIntervalMorph = (0, import_react.useCallback)((h) => {
+    const { ms, easing } = animRef.current;
+    const start = performance.now();
+    const step = (now) => {
+      const p = Math.min(1, (now - start) / ms);
+      h.setIntervalMorph(p < 1 ? ease(easing, p) : 1);
+      const pic = h.render();
+      if (pic) onFrameRef.current?.(pic);
+      intervalMorphRaf.current = p < 1 ? requestAnimationFrame(step) : null;
+    };
+    intervalMorphRaf.current = requestAnimationFrame(step);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (intervalMorphRaf.current != null) {
+        cancelAnimationFrame(intervalMorphRaf.current);
+        intervalMorphRaf.current = null;
+      }
+    };
+  }, []);
   const explicit = visibleRange != null;
   const startMs = visibleRange?.startMs ?? 0;
   const endMs = visibleRange?.endMs ?? 0;
@@ -310,8 +437,54 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       h.setDefaultCandleWidth(defaultCandleWidth);
       defaultWidthAppliedRef.current = true;
     }
+    let morphing = false;
     if (candles.length > 0) {
-      h.setCandles(packCandles(candles));
+      const prev = prevDataRef.current;
+      const freshHandle = prev == null || prev.handle !== h;
+      if (freshHandle || prev.candles !== candles || prev.seriesKey !== seriesKey) {
+        const transitionKind = freshHandle ? "initial" : explicit ? "stream" : classifyTransition(prev.candles, candles, seriesKey !== prev.seriesKey);
+        let tfArgs = null;
+        let prevEnvelope = null;
+        if (transitionKind === "timeframe" && prev != null) {
+          const oldWindow = h.getVisibleRange();
+          const oldStepMs = inferStepMs(prev.candles);
+          if (oldWindow.endMs > oldWindow.startMs && oldStepMs != null) {
+            tfArgs = {
+              oldWindow,
+              oldStepMs,
+              oldLastMs: prev.candles[prev.candles.length - 1].timeMs
+            };
+          }
+          prevEnvelope = h.getVisiblePriceEnvelope();
+          morphing = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
+          if (morphing) {
+            endIntervalMorph();
+            h.beginIntervalMorph();
+          }
+        } else if (transitionKind === "initial" || transitionKind === "reset") {
+          endIntervalMorph();
+        }
+        h.setCandles(packCandles(candles));
+        if (transitionKind === "timeframe") {
+          const newStepMs = inferStepMs(candles);
+          if (tfArgs && newStepMs != null) {
+            const w = timeframeWindow(
+              tfArgs.oldWindow,
+              tfArgs.oldStepMs,
+              tfArgs.oldLastMs,
+              newStepMs,
+              candles[candles.length - 1].timeMs
+            );
+            h.setVisibleRange(w.startMs, w.endMs);
+          }
+          if (prevEnvelope) h.preservePriceEnvelope(prevEnvelope.low, prevEnvelope.high);
+          else h.resetPriceScale();
+          if (morphing) startIntervalMorph(h);
+        } else if (transitionKind === "reset") {
+          h.resetView();
+        }
+        prevDataRef.current = { handle: h, candles, seriesKey };
+      }
     }
     if (explicit) {
       h.setVisibleRange(startMs, endMs);
@@ -319,6 +492,9 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     if (theme) {
       applyTheme(h, theme);
     }
+    if (animRef.current.reduceMotion) {
+      h.setFloat(FLOAT_LINE_TIP_PULSE, 0);
+    }
     h.setRSI(rsiToSpec(rsi));
     h.setMACD(macdToSpec(macd));
     h.setOverlays((movingAverages ?? []).map(overlayToNumeric));
@@ -330,39 +506,16 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     h.setPriceLines(
       priceLines?.lines.length ? priceLinesToSpec(priceLines) : EMPTY_PRICE_LINES
     );
-    setPicture(h.render());
-  }, [candles, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey]);
+    if (!morphing) setPicture(h.render());
+  }, [candles, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, maKey, vwapKey, bollingerKey, volumeKey, priceLinesKey, startIntervalMorph, endIntervalMorph]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
-// src/easing.ts
-function ease(kind, p) {
-  switch (kind) {
-    case "linear":
-      return p;
-    case "ease-in":
-      return p * p;
-    case "ease-out":
-      return p * (2 - p);
-    default:
-      return p * p * (3 - 2 * p);
-  }
-}
-var EASINGS = [
-  "linear",
-  "ease-in",
-  "ease-out",
-  "ease-in-out"
-];
-function easingIndex(kind) {
-  const i = kind ? EASINGS.indexOf(kind) : -1;
-  return i < 0 ? EASINGS.indexOf("ease-in-out") : i;
-}
-
 // src/VroomChart.tsx
 function VroomChart(props) {
   const {
     candles,
+    seriesKey,
     width: widthProp,
     height: heightProp,
     style,
@@ -405,6 +558,19 @@ function VroomChart(props) {
     } : void 0,
     [priceLines, priceLinesStyle, onPriceLineClose]
   );
+  const emptyPicture = (0, import_react2.useMemo)(() => {
+    const rec = import_react_native_skia.Skia.PictureRecorder();
+    rec.beginRecording(import_react_native_skia.Skia.XYWHRect(0, 0, 1, 1));
+    return rec.finishRecordingAsPicture();
+  }, []);
+  const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
+  const reduceMotion = (0, import_react_native_reanimated.useReducedMotion)();
+  const onFrame = (0, import_react2.useCallback)(
+    (p) => {
+      pictureSV.value = p;
+    },
+    [pictureSV]
+  );
   const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
     { width, height },
@@ -418,19 +584,11 @@ function VroomChart(props) {
     vwap,
     bollingerBands,
     volume,
-    priceLinesProp
+    priceLinesProp,
+    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
   );
-  const emptyPicture = (0, import_react2.useMemo)(() => {
-    const rec = import_react_native_skia.Skia.PictureRecorder();
-    rec.beginRecording(import_react_native_skia.Skia.XYWHRect(0, 0, 1, 1));
-    return rec.finishRecordingAsPicture();
-  }, []);
-  const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
   const crosshairActive = (0, import_react2.useRef)(false);
   const lastCrosshairTime = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    if (picture) pictureSV.value = picture;
-  }, [picture, pictureSV]);
   const decayRaf = (0, import_react2.useRef)(null);
   const cancelDecay = (0, import_react2.useCallback)(() => {
     if (decayRaf.current != null) {
@@ -462,6 +620,10 @@ function VroomChart(props) {
       }
     };
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (picture) pictureSV.value = picture;
+    maybeStartAnim();
+  }, [picture, pictureSV, maybeStartAnim]);
   const morphRaf = (0, import_react2.useRef)(null);
   const morphFade = (0, import_react2.useRef)(null);
   const morphHandle = (0, import_react2.useRef)(null);
@@ -498,7 +660,7 @@ function VroomChart(props) {
       const prog = Math.min(1, (now - startTs) / dur);
       const fade = from + (target - from) * ease(easingRef.current, prog);
       morphFade.current = fade;
-      handle.setMorph(fade, fade);
+      handle.setMorph(reduceMotion ? 0 : fade, fade);
       const p = handle.render();
       if (p) pictureSV.value = p;
       if (prog < 1) {
@@ -518,7 +680,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, pictureSV]);
+  }, [handle, chartType, transitionMs, reduceMotion, pictureSV]);
   const volumeRaf = (0, import_react2.useRef)(null);
   const volumeHandle = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -536,7 +698,7 @@ function VroomChart(props) {
       volumeRaf.current = null;
     }
     const dur = Math.max(0, transitionMs ?? 300);
-    if (dur === 0) {
+    if (dur === 0 || reduceMotion) {
       volumeCollapseRef.current = { t: target, easing };
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
@@ -563,7 +725,7 @@ function VroomChart(props) {
         volumeRaf.current = null;
       }
     };
-  }, [handle, volume?.enabled, transitionMs, pictureSV, volumeCollapseRef]);
+  }, [handle, volume?.enabled, transitionMs, reduceMotion, pictureSV, volumeCollapseRef]);
   const hitAxis = (0, import_react2.useCallback)(
     (x, y) => {
       if (!handle) return "chart";
@@ -775,6 +937,9 @@ function VroomChart(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  VroomChart
+  VroomChart,
+  classifyTransition,
+  inferStepMs,
+  timeframeWindow
 });
 //# sourceMappingURL=index.js.map