@vroomchart/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Darion Welch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { WasmConfig } from '@vroomchart/core-wasm';
+export { WasmConfig } from '@vroomchart/core-wasm';
+
+/** A single OHLCV bar. `candles` is an array of these. */
+type Candle = {
+    /** Bar open time as Unix epoch milliseconds. */
+    timeMs: number;
+    /** Opening price. */
+    open: number;
+    /** Highest price during the bar. */
+    high: number;
+    /** Lowest price during the bar. */
+    low: number;
+    /** Closing price. */
+    close: number;
+    /** Traded volume during the bar. */
+    volume: number;
+};
+/** Payload passed to `onCrosshair` as the crosshair shows, moves, or hides. */
+type CrosshairEvent = {
+    /** True while the crosshair is showing; false when it's dismissed. */
+    active: boolean;
+    /** OHLCV of the candle under the crosshair, or null when inactive. */
+    candle: Candle | null;
+    /**
+     * Why this event fired — lets the host react differently (e.g. haptics):
+     *   'show' — long-press activated the crosshair
+     *   'move' — the crosshair snapped to a *different* candle (one per candle
+     *            crossed; not per drag frame)
+     *   'hide' — the crosshair was dismissed
+     * The library never plays haptics itself; the host decides.
+     */
+    reason: 'show' | 'move' | 'hide';
+};
+/**
+ * A color value: a hex string (`'#0d1117'`, or 8-digit `'#aarrggbb'`) or a
+ * packed ARGB number. In `VroomTheme` every field is optional — omitted colors
+ * keep the library default.
+ */
+type VroomColor = string | number;
+/** Color overrides for the chart, passed via the `theme` prop. */
+type VroomTheme = {
+    /** Chart + axis-strip background. */
+    background?: VroomColor;
+    /** Up candles (also bull wicks, bull volume bars, rising price indicator). */
+    bull?: VroomColor;
+    /** Down candles (also bear wicks, bear volume bars, falling price indicator). */
+    bear?: VroomColor;
+    /** Gridlines. */
+    grid?: VroomColor;
+    /** Axis label text (price + time). */
+    axisText?: VroomColor;
+    /** Crosshair dashed lines. */
+    crosshair?: VroomColor;
+    /** Crosshair target — the hollow ring/dot at the intersection. */
+    crosshairTarget?: VroomColor;
+};
+/** A time window over the candle data, as Unix epoch milliseconds. */
+type VisibleRange = {
+    /** Window start (inclusive), Unix epoch milliseconds. */
+    startMs: number;
+    /** Window end (inclusive), Unix epoch milliseconds. */
+    endMs: number;
+};
+/** RSI indicator config. Rendered in a pane below the candles when enabled. */
+type RSIConfig = {
+    enabled?: boolean;
+    /** Lookback period in candle counts. Default 14, clamped to >= 2. */
+    period?: number;
+    /** Overbought band level (0..100). Default 70. */
+    upperBand?: number;
+    /** Oversold band level (0..100). Default 30. */
+    lowerBand?: number;
+    /** Show the RSI-based moving-average trendline. Default true. */
+    maEnabled?: boolean;
+    /** Trendline (MA of RSI) length. Default 14, clamped to >= 1. */
+    maPeriod?: number;
+};
+/** Price source for a moving average. */
+type MASource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4';
+/**
+ * A moving-average overlay line drawn on the price pane. Provide an array of
+ * these via `movingAverages` to render a ribbon of SMA/EMA lines.
+ */
+type MovingAverageOverlay = {
+    /** 'sma' (simple) or 'ema' (exponential). */
+    kind: 'sma' | 'ema';
+    /** Lookback in candles. */
+    length: number;
+    /** Price source. Default 'close'. */
+    source?: MASource;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/**
+ * VWAP overlay config (session anchor). Drawn as a single line on the price
+ * pane, resetting each session.
+ */
+type VWAPConfig = {
+    enabled?: boolean;
+    /** Session reset offset from UTC midnight, in minutes (default 0). */
+    resetMinutes?: number;
+    /** Line color (hex string or packed ARGB number). */
+    color?: string | number;
+    /** Stroke width in px. Default 1.5. */
+    width?: number;
+};
+/** MACD indicator config. Rendered in its own pane below the candles. */
+type MACDConfig = {
+    enabled?: boolean;
+    /** Fast EMA length. Default 12. */
+    fast?: number;
+    /** Slow EMA length (forced > fast). Default 26. */
+    slow?: number;
+    /** Signal-line EMA length. Default 9. */
+    signal?: number;
+};
+/**
+ * Platform-agnostic props shared by every vroom chart component. Each platform
+ * extends this with its own `style` typing (and any platform-only props) to
+ * form its public `VroomChartProps`.
+ */
+type VroomChartCoreProps = {
+    /** OHLCV bars to render. The only required prop. */
+    candles: Candle[];
+    /**
+     * Explicit size overrides in logical px. When omitted, the chart fills its
+     * parent (measured at runtime). Prefer layout-driven sizing via the
+     * platform's `style` (flex / aspect-ratio / absolute fill) over hard-coding.
+     */
+    width?: number;
+    height?: number;
+    /** Time window to render. Omit (or both 0) to show every candle. */
+    visibleRange?: VisibleRange;
+    theme?: VroomTheme;
+    /** RSI indicator (pane below the candles). Omit/disable to hide it. */
+    rsi?: RSIConfig;
+    /** MACD indicator (its own pane below the candles). Omit/disable to hide it. */
+    macd?: MACDConfig;
+    /** Moving-average overlay lines (SMA/EMA) drawn on the price pane. */
+    movingAverages?: MovingAverageOverlay[];
+    /** VWAP overlay (session anchor, configurable reset). */
+    vwap?: VWAPConfig;
+    /**
+     * Pixels the crosshair dot / horizontal line sit *above* the touch point so
+     * they aren't hidden under the thumb. The vertical line stays centered on the
+     * touch x. Default 40.
+     */
+    crosshairOffset?: number;
+    onCrosshair?: (e: CrosshairEvent) => void;
+    onViewportChange?: (startMs: number, endMs: number) => void;
+};
+
+type VroomChartProps = VroomChartCoreProps & {
+    /** Class applied to the chart's root element. */
+    className?: string;
+    /** Inline style for the chart's root element. Defaults to filling its parent. */
+    style?: CSSProperties;
+    /**
+     * Use the real Skia-WASM core instead of the Canvas2D stub by pointing at the
+     * built module/font assets. Omit to use the stub. Read once when the chart
+     * first mounts; the core is shared across all charts on the page.
+     */
+    wasm?: WasmConfig;
+    /** Force the Canvas2D stub even when `wasm` is provided (tests / SSR). */
+    forceStub?: boolean;
+};
+
+/**
+ * Skia-quality candlestick chart for the web. Pass OHLCV `candles` and size it
+ * via `style`/`width`/`height` (it fills its parent by default). Drag to pan,
+ * pinch or wheel to zoom, drag the price/time axes to rescale, hover (mouse) or
+ * long-press (touch) for the crosshair. Optional indicators (`rsi`, `macd`,
+ * `movingAverages`, `vwap`), colors (`theme`), and events (`onCrosshair`,
+ * `onViewportChange`) are configured through props.
+ *
+ * @see {@link VroomChartProps} for the full prop reference.
+ */
+declare function VroomChart(props: VroomChartProps): react_jsx_runtime.JSX.Element;
+
+export { type Candle, type CrosshairEvent, type MACDConfig, type MASource, type MovingAverageOverlay, type RSIConfig, type VWAPConfig, type VisibleRange, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme };

package/dist/index.js

@@ -0,0 +1,365 @@
+// src/useChartCore.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  loadVroom,
+  packCandles,
+  applyTheme,
+  parseColor
+} from "@vroomchart/core-wasm";
+var MA_SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4"];
+function overlayToNumeric(o) {
+  const srcIdx = o.source ? MA_SOURCES.indexOf(o.source) : 0;
+  return {
+    kind: o.kind === "ema" ? 1 : 0,
+    period: o.length,
+    source: srcIdx < 0 ? 0 : srcIdx,
+    color: (o.color != null ? parseColor(o.color) : null) ?? 4280902399,
+    width: o.width ?? 1.5
+  };
+}
+function useChartCore(props, loadOpts) {
+  const {
+    candles,
+    width: widthProp,
+    height: heightProp,
+    visibleRange,
+    theme,
+    rsi,
+    macd,
+    movingAverages,
+    vwap
+  } = props;
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const handleRef = useRef(null);
+  const rafRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [measured, setMeasured] = useState({ width: 0, height: 0 });
+  const loadOptsRef = useRef(loadOpts);
+  loadOptsRef.current = loadOpts;
+  const width = widthProp ?? measured.width;
+  const height = heightProp ?? measured.height;
+  const scheduleRender = useCallback(() => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      const h = handleRef.current;
+      if (!h) return;
+      h.present();
+      if (h.isAnimating()) scheduleRender();
+    });
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    let disposed = false;
+    loadVroom(loadOptsRef.current).then((mod) => {
+      if (disposed) return;
+      handleRef.current = mod.create(canvas);
+      setReady(true);
+    });
+    return () => {
+      disposed = true;
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      handleRef.current?.destroy();
+      handleRef.current = null;
+      setReady(false);
+    };
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || widthProp != null && heightProp != null) return;
+    const ro = new ResizeObserver((entries) => {
+      const r = entries[0]?.contentRect;
+      if (!r) return;
+      const w = Math.round(r.width);
+      const h = Math.round(r.height);
+      setMeasured((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [widthProp, heightProp]);
+  const themeKey = theme ? JSON.stringify(theme) : "";
+  const rsiKey = rsi ? JSON.stringify(rsi) : "";
+  const macdKey = macd ? JSON.stringify(macd) : "";
+  const maKey = movingAverages ? JSON.stringify(movingAverages) : "";
+  const vwapKey = vwap ? JSON.stringify(vwap) : "";
+  const explicit = visibleRange != null;
+  const startMs = visibleRange?.startMs ?? 0;
+  const endMs = visibleRange?.endMs ?? 0;
+  useEffect(() => {
+    const h = handleRef.current;
+    if (!h || width <= 0 || height <= 0) return;
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    h.setSize(width, height, dpr);
+    if (candles.length > 0) h.setCandles(packCandles(candles));
+    if (explicit) h.setVisibleRange(startMs, endMs);
+    if (theme) applyTheme(h, theme);
+    h.setRSI(
+      rsi?.enabled ?? false,
+      rsi?.period ?? 14,
+      rsi?.upperBand ?? 70,
+      rsi?.lowerBand ?? 30,
+      rsi?.maEnabled ?? true,
+      rsi?.maPeriod ?? 14
+    );
+    h.setMACD(macd?.enabled ?? false, macd?.fast ?? 12, macd?.slow ?? 26, macd?.signal ?? 9);
+    h.setOverlays((movingAverages ?? []).map(overlayToNumeric));
+    h.setVWAP(
+      vwap?.enabled ?? false,
+      vwap?.resetMinutes ?? 0,
+      (vwap?.color != null ? parseColor(vwap.color) : null) ?? 4278238420,
+      vwap?.width ?? 1.5
+    );
+    scheduleRender();
+  }, [ready, width, height, candles, explicit, startMs, endMs, themeKey, rsiKey, macdKey, maKey, vwapKey, scheduleRender]);
+  return { containerRef, canvasRef, handleRef, scheduleRender, size: { width, height } };
+}
+
+// src/useGestures.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+var MIN_SPAN = 24;
+var AXIS_RATIO = 0.5;
+var LONG_PRESS_MS = 350;
+var MOVE_THRESH = 6;
+var WHEEL_K = 15e-4;
+function useGestures(containerRef, handleRef, scheduleRender, opts) {
+  const optsRef = useRef2(opts);
+  optsRef.current = opts;
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const pointers = /* @__PURE__ */ new Map();
+    let panMode = "chart";
+    let crosshairActive = false;
+    let crosshairSource = null;
+    let lastCrosshairTime = null;
+    let longPressTimer = null;
+    let downX = 0;
+    let downY = 0;
+    let moved = false;
+    const pinch = { spanX: 1, spanY: 1, ratioX: 1, ratioY: 1, enableX: false, enableY: false, active: false };
+    const rel = (e) => {
+      const r = el.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    };
+    const regionAt = (x, y) => {
+      const h = handleRef.current;
+      const r = el.getBoundingClientRect();
+      if (!h) return "chart";
+      const { yAxisWidth, xAxisHeight, indicatorHeight } = h.getAxisMetrics();
+      if (x > r.width - yAxisWidth) return "price-axis";
+      if (y > r.height - xAxisHeight) return "time-axis";
+      if (indicatorHeight > 0 && y > r.height - xAxisHeight - indicatorHeight) return "indicator";
+      return "chart";
+    };
+    const reportCrosshair = (reason) => {
+      const h = handleRef.current;
+      if (!h) return;
+      const c = h.getCrosshairCandle();
+      const t = c?.timeMs ?? null;
+      if (reason === "move" && t === lastCrosshairTime) return;
+      lastCrosshairTime = t;
+      optsRef.current.onCrosshair?.({ active: reason !== "hide", candle: c, reason });
+    };
+    const clearLongPress = () => {
+      if (longPressTimer != null) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    };
+    const showCrosshair = (x, y, source, reason) => {
+      const h = handleRef.current;
+      if (!h) return;
+      crosshairActive = true;
+      crosshairSource = source;
+      const lift = source === "press" ? optsRef.current.crosshairOffset : 0;
+      h.setCrosshair(x, y - lift);
+      scheduleRender();
+      reportCrosshair(reason);
+    };
+    const hideCrosshair = () => {
+      const h = handleRef.current;
+      if (!h || !crosshairActive) return;
+      crosshairActive = false;
+      crosshairSource = null;
+      h.clearCrosshair();
+      scheduleRender();
+      reportCrosshair("hide");
+    };
+    const onPointerDown = (e) => {
+      const h = handleRef.current;
+      if (!h) return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      const { x, y } = rel(e);
+      el.setPointerCapture(e.pointerId);
+      pointers.set(e.pointerId, { x, y });
+      if (pointers.size === 2) {
+        clearLongPress();
+        hideCrosshair();
+        const pts = [...pointers.values()];
+        const sx = Math.abs(pts[0].x - pts[1].x);
+        const sy = Math.abs(pts[0].y - pts[1].y);
+        pinch.spanX = sx;
+        pinch.spanY = sy;
+        pinch.ratioX = 1;
+        pinch.ratioY = 1;
+        pinch.enableX = sx >= MIN_SPAN && sx >= sy * AXIS_RATIO;
+        pinch.enableY = sy >= MIN_SPAN && sy >= sx * AXIS_RATIO;
+        pinch.active = true;
+        return;
+      }
+      downX = x;
+      downY = y;
+      moved = false;
+      panMode = regionAt(x, y);
+      if (e.pointerType !== "mouse" && panMode === "chart") {
+        longPressTimer = setTimeout(() => {
+          longPressTimer = null;
+          if (!moved) showCrosshair(downX, downY, "press", "show");
+        }, LONG_PRESS_MS);
+      }
+    };
+    const onPointerMove = (e) => {
+      const h = handleRef.current;
+      if (!h) return;
+      const { x, y } = rel(e);
+      if (!pointers.has(e.pointerId)) {
+        if (e.pointerType === "mouse" && pointers.size === 0) {
+          if (regionAt(x, y) === "chart") {
+            showCrosshair(x, y, "hover", crosshairActive ? "move" : "show");
+          } else {
+            hideCrosshair();
+          }
+        }
+        return;
+      }
+      const prev = pointers.get(e.pointerId);
+      const dx = x - prev.x;
+      const dy = y - prev.y;
+      pointers.set(e.pointerId, { x, y });
+      if (pointers.size >= 2 && pinch.active) {
+        const pts = [...pointers.values()];
+        const focalX = (pts[0].x + pts[1].x) / 2;
+        const focalY = (pts[0].y + pts[1].y) / 2;
+        let frameX = 1;
+        if (pinch.enableX) {
+          const r = Math.max(Math.abs(pts[0].x - pts[1].x), MIN_SPAN) / pinch.spanX;
+          frameX = r / pinch.ratioX;
+          pinch.ratioX = r;
+        }
+        let frameY = 1;
+        if (pinch.enableY) {
+          const r = Math.max(Math.abs(pts[0].y - pts[1].y), MIN_SPAN) / pinch.spanY;
+          frameY = r / pinch.ratioY;
+          pinch.ratioY = r;
+        }
+        if (frameX !== 1 || frameY !== 1) {
+          h.zoom(frameX, frameY, focalX, focalY);
+          scheduleRender();
+        }
+        return;
+      }
+      if (!moved && Math.hypot(x - downX, y - downY) > MOVE_THRESH) {
+        moved = true;
+        clearLongPress();
+      }
+      if (!moved) return;
+      if (crosshairActive && crosshairSource === "press" && panMode === "chart") {
+        showCrosshair(x, y, "press", "move");
+        return;
+      }
+      if (panMode === "price-axis") h.scalePriceAxis(dy);
+      else if (panMode === "time-axis") h.scaleTimeAxis(dx);
+      else if (panMode === "indicator") h.pan(dx, 0);
+      else h.translate(dx, dy);
+      if (crosshairActive && crosshairSource === "hover") {
+        h.setCrosshair(x, y);
+        reportCrosshair("move");
+      }
+      scheduleRender();
+    };
+    const endPointer = (e) => {
+      const had = pointers.delete(e.pointerId);
+      clearLongPress();
+      if (pointers.size < 2) pinch.active = false;
+      if (!had) return;
+      if (crosshairSource === "press" && pointers.size === 0) {
+        hideCrosshair();
+      } else if (moved && (panMode === "chart" || panMode === "indicator")) {
+        optsRef.current.onViewportChange?.(0, 0);
+      }
+    };
+    const onPointerLeave = () => {
+      if (crosshairSource === "hover") hideCrosshair();
+    };
+    const onWheel = (e) => {
+      const h = handleRef.current;
+      if (!h) return;
+      e.preventDefault();
+      const { x, y } = rel(e);
+      if (e.ctrlKey || e.metaKey) {
+        const f = Math.exp(-e.deltaY * WHEEL_K);
+        h.zoom(f, f, x, y);
+      } else if (e.shiftKey) {
+        h.pan(-(e.deltaX || e.deltaY), 0);
+      } else if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+        h.pan(-e.deltaX, 0);
+      } else {
+        const f = Math.exp(-e.deltaY * WHEEL_K);
+        h.zoom(f, 1, x, y);
+      }
+      scheduleRender();
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", endPointer);
+    el.addEventListener("pointercancel", endPointer);
+    el.addEventListener("pointerleave", onPointerLeave);
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      clearLongPress();
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", endPointer);
+      el.removeEventListener("pointercancel", endPointer);
+      el.removeEventListener("pointerleave", onPointerLeave);
+      el.removeEventListener("wheel", onWheel);
+    };
+  }, [containerRef, handleRef, scheduleRender]);
+}
+
+// src/VroomChart.tsx
+import { jsx } from "react/jsx-runtime";
+var FILL = { position: "relative", width: "100%", height: "100%" };
+var CANVAS_STYLE = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  touchAction: "none"
+  // we own pan/zoom; don't let the browser scroll/zoom
+};
+function VroomChart(props) {
+  const { className, style, wasm, forceStub, crosshairOffset = 40, onCrosshair, onViewportChange } = props;
+  const { containerRef, canvasRef, handleRef, scheduleRender } = useChartCore(
+    props,
+    wasm || forceStub ? { wasm, forceStub } : void 0
+  );
+  useGestures(containerRef, handleRef, scheduleRender, {
+    crosshairOffset,
+    onCrosshair,
+    onViewportChange
+  });
+  const rootStyle = {
+    ...FILL,
+    ...props.width != null ? { width: props.width } : null,
+    ...props.height != null ? { height: props.height } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style: rootStyle, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: CANVAS_STYLE }) });
+}
+export {
+  VroomChart
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useChartCore.ts","../src/useGestures.ts","../src/VroomChart.tsx"],"sourcesContent":["// Owns one VroomChartHandle bound to a <canvas>: loads the core, measures the\n// container (ResizeObserver), pushes data/size/theme/indicators on change, and\n// drives a rAF-batched present() loop. The web analogue of\n// packages/react-native/src/useChartCore.ts — but it paints the canvas via\n// handle.present() instead of producing an SkPicture.\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  loadVroom,\n  packCandles,\n  applyTheme,\n  parseColor,\n  type LoadVroomOptions,\n  type OverlaySpec,\n  type VroomChartHandle,\n} from '@vroomchart/core-wasm';\nimport type { VroomChartCoreProps } from '@vroomchart/types';\n\n// Mirrors vroom::ma::Source order (packages/core/src/ma.h).\nconst MA_SOURCES = ['close', 'open', 'high', 'low', 'hl2', 'hlc3', 'ohlc4'] as const;\n\nfunction overlayToNumeric(\n  o: NonNullable<VroomChartCoreProps['movingAverages']>[number],\n): OverlaySpec {\n  const srcIdx = o.source ? MA_SOURCES.indexOf(o.source) : 0;\n  return {\n    kind: o.kind === 'ema' ? 1 : 0,\n    period: o.length,\n    source: srcIdx < 0 ? 0 : srcIdx,\n    color: (o.color != null ? parseColor(o.color) : null) ?? 0xff2962ff,\n    width: o.width ?? 1.5,\n  };\n}\n\nexport type UseChartCore = {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  handleRef: React.RefObject<VroomChartHandle | null>;\n  /** Schedules a rAF-batched repaint (and keeps ticking while animating). */\n  scheduleRender: () => void;\n  /** Measured CSS size of the container (0 until first layout). */\n  size: { width: number; height: number };\n};\n\nexport function useChartCore(\n  props: VroomChartCoreProps,\n  loadOpts?: LoadVroomOptions,\n): UseChartCore {\n  const {\n    candles,\n    width: widthProp,\n    height: heightProp,\n    visibleRange,\n    theme,\n    rsi,\n    macd,\n    movingAverages,\n    vwap,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const handleRef = useRef<VroomChartHandle | null>(null);\n  const rafRef = useRef<number | null>(null);\n  const [ready, setReady] = useState(false);\n  const [measured, setMeasured] = useState({ width: 0, height: 0 });\n\n  // Captured at mount: which core to load (stub vs Skia-WASM). Changing it after\n  // mount has no effect — the core is created once and shared process-wide.\n  const loadOptsRef = useRef(loadOpts);\n  loadOptsRef.current = loadOpts;\n\n  const width = widthProp ?? measured.width;\n  const height = heightProp ?? measured.height;\n\n  const scheduleRender = useCallback(() => {\n    if (rafRef.current != null) return;\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      const h = handleRef.current;\n      if (!h) return;\n      h.present();\n      if (h.isAnimating()) scheduleRender();\n    });\n  }, []);\n\n  // Create the handle once the canvas exists; destroy on unmount.\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    let disposed = false;\n    loadVroom(loadOptsRef.current).then((mod) => {\n      if (disposed) return;\n      handleRef.current = mod.create(canvas);\n      setReady(true);\n    });\n    return () => {\n      disposed = true;\n      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n      handleRef.current?.destroy();\n      handleRef.current = null;\n      setReady(false);\n    };\n  }, []);\n\n  // Measure the container (unless both dims are pinned via props).\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el || (widthProp != null && heightProp != null)) return;\n    const ro = new ResizeObserver((entries) => {\n      const r = entries[0]?.contentRect;\n      if (!r) return;\n      const w = Math.round(r.width);\n      const h = Math.round(r.height);\n      setMeasured((prev) => (prev.width === w && prev.height === h ? prev : { width: w, height: h }));\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [widthProp, heightProp]);\n\n  // Stable deps so inline object/array literals don't re-run every render.\n  const themeKey = theme ? JSON.stringify(theme) : '';\n  const rsiKey = rsi ? JSON.stringify(rsi) : '';\n  const macdKey = macd ? JSON.stringify(macd) : '';\n  const maKey = movingAverages ? JSON.stringify(movingAverages) : '';\n  const vwapKey = vwap ? JSON.stringify(vwap) : '';\n  const explicit = visibleRange != null;\n  const startMs = visibleRange?.startMs ?? 0;\n  const endMs = visibleRange?.endMs ?? 0;\n\n  // Push everything into the core whenever data/size/config changes, then paint.\n  useEffect(() => {\n    const h = handleRef.current;\n    if (!h || width <= 0 || height <= 0) return;\n    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    h.setSize(width, height, dpr);\n    if (candles.length > 0) h.setCandles(packCandles(candles));\n    if (explicit) h.setVisibleRange(startMs, endMs);\n    if (theme) applyTheme(h, theme);\n    h.setRSI(\n      rsi?.enabled ?? false,\n      rsi?.period ?? 14,\n      rsi?.upperBand ?? 70,\n      rsi?.lowerBand ?? 30,\n      rsi?.maEnabled ?? true,\n      rsi?.maPeriod ?? 14,\n    );\n    h.setMACD(macd?.enabled ?? false, macd?.fast ?? 12, macd?.slow ?? 26, macd?.signal ?? 9);\n    h.setOverlays((movingAverages ?? []).map(overlayToNumeric));\n    h.setVWAP(\n      vwap?.enabled ?? false,\n      vwap?.resetMinutes ?? 0,\n      (vwap?.color != null ? parseColor(vwap.color) : null) ?? 0xff00bcd4,\n      vwap?.width ?? 1.5,\n    );\n    scheduleRender();\n    // theme/rsi/macd/movingAverages/vwap tracked via their *Key deps.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ready, width, height, candles, explicit, startMs, endMs, themeKey, rsiKey, macdKey, maKey, vwapKey, scheduleRender]);\n\n  return { containerRef, canvasRef, handleRef, scheduleRender, size: { width, height } };\n}\n","// Pointer/wheel gesture controller for the web chart. Maps input to the same\n// VroomChartHandle mutators the React Native gestures use (see\n// packages/react-native/src/VroomChart.tsx), so behavior matches across\n// platforms. Listeners are attached natively (not via React props) so wheel can\n// be non-passive and call preventDefault.\n\nimport { useEffect, useRef } from 'react';\nimport type { CrosshairEvent } from '@vroomchart/types';\nimport type { VroomChartHandle } from '@vroomchart/core-wasm';\n\ntype Region = 'chart' | 'price-axis' | 'time-axis' | 'indicator';\n\nexport type GestureOptions = {\n  crosshairOffset: number;\n  onCrosshair?: (e: CrosshairEvent) => void;\n  onViewportChange?: (startMs: number, endMs: number) => void;\n};\n\nconst MIN_SPAN = 24; // px — minimum two-finger span for an axis to scale\nconst AXIS_RATIO = 0.5; // an axis scales only if its span ≥ this × the other's\nconst LONG_PRESS_MS = 350;\nconst MOVE_THRESH = 6; // px before a press becomes a drag\nconst WHEEL_K = 0.0015; // wheel delta → zoom factor exponent\n\nexport function useGestures(\n  containerRef: React.RefObject<HTMLElement | null>,\n  handleRef: React.RefObject<VroomChartHandle | null>,\n  scheduleRender: () => void,\n  opts: GestureOptions,\n): void {\n  // Keep latest opts in a ref so the effect's listeners stay stable.\n  const optsRef = useRef(opts);\n  optsRef.current = opts;\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const pointers = new Map<number, { x: number; y: number }>();\n    let panMode: Region = 'chart';\n    let crosshairActive = false;\n    let crosshairSource: 'press' | 'hover' | null = null;\n    let lastCrosshairTime: number | null = null;\n    let longPressTimer: ReturnType<typeof setTimeout> | null = null;\n    let downX = 0;\n    let downY = 0;\n    let moved = false;\n    const pinch = { spanX: 1, spanY: 1, ratioX: 1, ratioY: 1, enableX: false, enableY: false, active: false };\n\n    const rel = (e: PointerEvent | WheelEvent) => {\n      const r = el.getBoundingClientRect();\n      return { x: e.clientX - r.left, y: e.clientY - r.top };\n    };\n\n    const regionAt = (x: number, y: number): Region => {\n      const h = handleRef.current;\n      const r = el.getBoundingClientRect();\n      if (!h) return 'chart';\n      const { yAxisWidth, xAxisHeight, indicatorHeight } = h.getAxisMetrics();\n      if (x > r.width - yAxisWidth) return 'price-axis';\n      if (y > r.height - xAxisHeight) return 'time-axis';\n      if (indicatorHeight > 0 && y > r.height - xAxisHeight - indicatorHeight) return 'indicator';\n      return 'chart';\n    };\n\n    const reportCrosshair = (reason: CrosshairEvent['reason']) => {\n      const h = handleRef.current;\n      if (!h) return;\n      const c = h.getCrosshairCandle();\n      const t = c?.timeMs ?? null;\n      if (reason === 'move' && t === lastCrosshairTime) return;\n      lastCrosshairTime = t;\n      optsRef.current.onCrosshair?.({ active: reason !== 'hide', candle: c, reason });\n    };\n\n    const clearLongPress = () => {\n      if (longPressTimer != null) {\n        clearTimeout(longPressTimer);\n        longPressTimer = null;\n      }\n    };\n\n    const showCrosshair = (x: number, y: number, source: 'press' | 'hover', reason: 'show' | 'move') => {\n      const h = handleRef.current;\n      if (!h) return;\n      crosshairActive = true;\n      crosshairSource = source;\n      const lift = source === 'press' ? optsRef.current.crosshairOffset : 0;\n      h.setCrosshair(x, y - lift);\n      scheduleRender();\n      reportCrosshair(reason);\n    };\n\n    const hideCrosshair = () => {\n      const h = handleRef.current;\n      if (!h || !crosshairActive) return;\n      crosshairActive = false;\n      crosshairSource = null;\n      h.clearCrosshair();\n      scheduleRender();\n      reportCrosshair('hide');\n    };\n\n    const onPointerDown = (e: PointerEvent) => {\n      const h = handleRef.current;\n      if (!h) return;\n      if (e.pointerType === 'mouse' && e.button !== 0) return; // left button only\n      const { x, y } = rel(e);\n      el.setPointerCapture(e.pointerId);\n      pointers.set(e.pointerId, { x, y });\n\n      if (pointers.size === 2) {\n        clearLongPress();\n        hideCrosshair();\n        const pts = [...pointers.values()];\n        const sx = Math.abs(pts[0]!.x - pts[1]!.x);\n        const sy = Math.abs(pts[0]!.y - pts[1]!.y);\n        pinch.spanX = sx;\n        pinch.spanY = sy;\n        pinch.ratioX = 1;\n        pinch.ratioY = 1;\n        pinch.enableX = sx >= MIN_SPAN && sx >= sy * AXIS_RATIO;\n        pinch.enableY = sy >= MIN_SPAN && sy >= sx * AXIS_RATIO;\n        pinch.active = true;\n        return;\n      }\n\n      // Single pointer: classify region; arm long-press → crosshair (touch/pen).\n      downX = x;\n      downY = y;\n      moved = false;\n      panMode = regionAt(x, y);\n      if (e.pointerType !== 'mouse' && panMode === 'chart') {\n        longPressTimer = setTimeout(() => {\n          longPressTimer = null;\n          if (!moved) showCrosshair(downX, downY, 'press', 'show');\n        }, LONG_PRESS_MS);\n      }\n    };\n\n    const onPointerMove = (e: PointerEvent) => {\n      const h = handleRef.current;\n      if (!h) return;\n      const { x, y } = rel(e);\n\n      // Hover (mouse, no button) → crosshair follows the cursor on the chart.\n      if (!pointers.has(e.pointerId)) {\n        if (e.pointerType === 'mouse' && pointers.size === 0) {\n          if (regionAt(x, y) === 'chart') {\n            showCrosshair(x, y, 'hover', crosshairActive ? 'move' : 'show');\n          } else {\n            hideCrosshair();\n          }\n        }\n        return;\n      }\n\n      const prev = pointers.get(e.pointerId)!;\n      const dx = x - prev.x;\n      const dy = y - prev.y;\n      pointers.set(e.pointerId, { x, y });\n\n      // Two-finger directional pinch.\n      if (pointers.size >= 2 && pinch.active) {\n        const pts = [...pointers.values()];\n        const focalX = (pts[0]!.x + pts[1]!.x) / 2;\n        const focalY = (pts[0]!.y + pts[1]!.y) / 2;\n        let frameX = 1;\n        if (pinch.enableX) {\n          const r = Math.max(Math.abs(pts[0]!.x - pts[1]!.x), MIN_SPAN) / pinch.spanX;\n          frameX = r / pinch.ratioX;\n          pinch.ratioX = r;\n        }\n        let frameY = 1;\n        if (pinch.enableY) {\n          const r = Math.max(Math.abs(pts[0]!.y - pts[1]!.y), MIN_SPAN) / pinch.spanY;\n          frameY = r / pinch.ratioY;\n          pinch.ratioY = r;\n        }\n        if (frameX !== 1 || frameY !== 1) {\n          h.zoom(frameX, frameY, focalX, focalY);\n          scheduleRender();\n        }\n        return;\n      }\n\n      if (!moved && Math.hypot(x - downX, y - downY) > MOVE_THRESH) {\n        moved = true;\n        clearLongPress();\n      }\n      if (!moved) return;\n\n      // Chart-area drag with the (press) crosshair up moves the crosshair.\n      if (crosshairActive && crosshairSource === 'press' && panMode === 'chart') {\n        showCrosshair(x, y, 'press', 'move');\n        return;\n      }\n\n      if (panMode === 'price-axis') h.scalePriceAxis(dy);\n      else if (panMode === 'time-axis') h.scaleTimeAxis(dx);\n      else if (panMode === 'indicator') h.pan(dx, 0);\n      else h.translate(dx, dy);\n\n      // Keep a hover crosshair glued to the cursor while dragging — the chart\n      // pans under it, so re-snap to whatever candle is now beneath the cursor.\n      if (crosshairActive && crosshairSource === 'hover') {\n        h.setCrosshair(x, y);\n        reportCrosshair('move');\n      }\n      scheduleRender();\n    };\n\n    const endPointer = (e: PointerEvent) => {\n      const had = pointers.delete(e.pointerId);\n      clearLongPress();\n      if (pointers.size < 2) pinch.active = false;\n      if (!had) return;\n\n      // Press crosshair is active only while held — release dismisses it.\n      if (crosshairSource === 'press' && pointers.size === 0) {\n        hideCrosshair();\n      } else if (moved && (panMode === 'chart' || panMode === 'indicator')) {\n        optsRef.current.onViewportChange?.(0, 0);\n      }\n    };\n\n    const onPointerLeave = () => {\n      if (crosshairSource === 'hover') hideCrosshair();\n    };\n\n    const onWheel = (e: WheelEvent) => {\n      const h = handleRef.current;\n      if (!h) return;\n      e.preventDefault();\n      const { x, y } = rel(e);\n      if (e.ctrlKey || e.metaKey) {\n        // Trackpad pinch (sent as ctrl+wheel) / ctrl+wheel → zoom both axes.\n        const f = Math.exp(-e.deltaY * WHEEL_K);\n        h.zoom(f, f, x, y);\n      } else if (e.shiftKey) {\n        // Shift+wheel → horizontal pan (mouse-wheel-only users).\n        h.pan(-(e.deltaX || e.deltaY), 0);\n      } else if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {\n        // Horizontal scroll → pan the time axis (scroll right = forward in time).\n        h.pan(-e.deltaX, 0);\n      } else {\n        // Vertical scroll → zoom the time window around the cursor.\n        const f = Math.exp(-e.deltaY * WHEEL_K);\n        h.zoom(f, 1, x, y);\n      }\n      scheduleRender();\n    };\n\n    el.addEventListener('pointerdown', onPointerDown);\n    el.addEventListener('pointermove', onPointerMove);\n    el.addEventListener('pointerup', endPointer);\n    el.addEventListener('pointercancel', endPointer);\n    el.addEventListener('pointerleave', onPointerLeave);\n    el.addEventListener('wheel', onWheel, { passive: false });\n\n    return () => {\n      clearLongPress();\n      el.removeEventListener('pointerdown', onPointerDown);\n      el.removeEventListener('pointermove', onPointerMove);\n      el.removeEventListener('pointerup', endPointer);\n      el.removeEventListener('pointercancel', endPointer);\n      el.removeEventListener('pointerleave', onPointerLeave);\n      el.removeEventListener('wheel', onWheel);\n    };\n  }, [containerRef, handleRef, scheduleRender]);\n}\n","// VroomChart (web) — DOM React component that renders the candlestick chart to\n// a <canvas> via @vroomchart/core-wasm and wires pointer/wheel gestures. API-matched\n// to the React Native component (same props from @vroomchart/types).\n\nimport React from 'react';\nimport type { CSSProperties } from 'react';\n\nimport { useChartCore } from './useChartCore';\nimport { useGestures } from './useGestures';\nimport type { VroomChartProps } from './types';\n\nconst FILL: CSSProperties = { position: 'relative', width: '100%', height: '100%' };\nconst CANVAS_STYLE: CSSProperties = {\n  display: 'block',\n  width: '100%',\n  height: '100%',\n  touchAction: 'none', // we own pan/zoom; don't let the browser scroll/zoom\n};\n\n/**\n * Skia-quality candlestick chart for the web. Pass OHLCV `candles` and size it\n * via `style`/`width`/`height` (it fills its parent by default). Drag to pan,\n * pinch or wheel to zoom, drag the price/time axes to rescale, hover (mouse) or\n * long-press (touch) for the crosshair. Optional indicators (`rsi`, `macd`,\n * `movingAverages`, `vwap`), colors (`theme`), and events (`onCrosshair`,\n * `onViewportChange`) are configured through props.\n *\n * @see {@link VroomChartProps} for the full prop reference.\n */\nexport function VroomChart(props: VroomChartProps) {\n  const { className, style, wasm, forceStub, crosshairOffset = 40, onCrosshair, onViewportChange } =\n    props;\n  const { containerRef, canvasRef, handleRef, scheduleRender } = useChartCore(\n    props,\n    wasm || forceStub ? { wasm, forceStub } : undefined,\n  );\n\n  useGestures(containerRef, handleRef, scheduleRender, {\n    crosshairOffset,\n    onCrosshair,\n    onViewportChange,\n  });\n\n  const rootStyle: CSSProperties = {\n    ...FILL,\n    ...(props.width != null ? { width: props.width } : null),\n    ...(props.height != null ? { height: props.height } : null),\n    ...style,\n  };\n\n  return (\n    <div ref={containerRef} className={className} style={rootStyle}>\n      <canvas ref={canvasRef} style={CANVAS_STYLE} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["useEffect","useRef"]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@vroomchart/react",
+  "version": "0.1.0",
+  "description": "Skia-quality candlestick chart for the web (React DOM).",
+  "license": "MIT",
+  "author": "Darion Welch",
+  "homepage": "https://github.com/darionwelch/vroom#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darionwelch/vroom.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "chart",
+    "candlestick",
+    "react",
+    "skia",
+    "wasm",
+    "finance",
+    "trading",
+    "charting"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vroomchart/core-wasm": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@types/react-dom": "~19.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.2",
+    "@vroomchart/types": "0.0.1"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsup"
+  }
+}