@livo-build/charts 0.2.1

package/dist/core/renderer.js

@@ -0,0 +1,203 @@
+import { formatValue, formatTime } from "./format";
+import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
+/**
+ * Pure draw pass: renders grid, axes, the price series (candles or line), a volume
+ * panel, the last-price tag and the crosshair + axis labels. Returns the candle under
+ * the crosshair (or the last candle when idle, or null when empty) so the host can
+ * drive an OHLCV legend. No state is retained between calls.
+ */
+export function draw(input) {
+    const { ctx, width: w, height: H, candles, view, hover, interval, type, yZoom, maxBarWidth, volH, theme, pads } = input;
+    const plotW = w - pads.right;
+    const priceH = H - pads.bottom - pads.top - volH;
+    if (theme.background) {
+        ctx.fillStyle = theme.background;
+        ctx.fillRect(0, 0, w, H);
+    }
+    else {
+        ctx.clearRect(0, 0, w, H);
+    }
+    ctx.font = "10px ui-monospace, monospace";
+    ctx.textBaseline = "middle";
+    if (!candles.length) {
+        ctx.fillStyle = theme.axis;
+        ctx.textAlign = "center";
+        ctx.fillText("no priced trades yet", plotW / 2, H / 2);
+        return null;
+    }
+    const count = Math.min(view.count, candles.length);
+    const end = candles.length - view.offset;
+    const start = Math.max(0, end - count);
+    const vis = candles.slice(start, end);
+    const n = vis.length;
+    // Cap the slot width and right-anchor — a few candles cluster on the right with empty
+    // space on the left (TradingView-style) rather than stretching across the whole plot.
+    const cw = Math.min(plotW / Math.max(count, 1), maxBarWidth);
+    const xOf = (j) => plotW - (n - 1 - j) * cw - cw / 2;
+    let lo = Infinity;
+    let hi = -Infinity;
+    let vmax = 0;
+    for (const c of vis) {
+        lo = Math.min(lo, c.l);
+        hi = Math.max(hi, c.h);
+        vmax = Math.max(vmax, c.vol);
+    }
+    const mid = (lo + hi) / 2;
+    const half = ((((hi - lo) / 2) || Math.abs(hi) * 0.1 || 1) * 1.08) / yZoom;
+    lo = mid - half;
+    hi = mid + half;
+    const rng = hi - lo || 1;
+    vmax = vmax || 1;
+    const yOf = (v) => pads.top + priceH * (1 - (v - lo) / rng);
+    const volBot = pads.top + priceH + volH;
+    const vy = (vol) => volBot - (vol / vmax) * volH * 0.92;
+    // grid + price axis (right gutter)
+    ctx.strokeStyle = theme.grid;
+    ctx.fillStyle = theme.axis;
+    ctx.lineWidth = 1;
+    ctx.textAlign = "left";
+    for (let i = 0; i <= 5; i++) {
+        const v = lo + (rng * i) / 5;
+        const y = yOf(v);
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(plotW, y);
+        ctx.stroke();
+        ctx.fillText(formatValue(v), plotW + 6, y);
+    }
+    // time axis (bottom gutter), anchored to the latest candle
+    ctx.textAlign = "center";
+    const step = Math.max(1, Math.floor(n / 7));
+    for (let j = n - 1; j >= 0; j -= step) {
+        const x = xOf(j);
+        ctx.strokeStyle = theme.grid;
+        ctx.beginPath();
+        ctx.moveTo(x, pads.top);
+        ctx.lineTo(x, volBot);
+        ctx.stroke();
+        ctx.fillStyle = theme.axis;
+        ctx.fillText(formatTime(vis[j].time, interval), x, H - pads.bottom / 2);
+    }
+    const bw = Math.max(1, Math.min(cw * 0.7, 14));
+    // volume panel
+    for (let j = 0; j < n; j++) {
+        const c = vis[j];
+        const x = xOf(j);
+        ctx.fillStyle = c.c >= c.o ? theme.volUp : theme.volDown;
+        ctx.fillRect(x - bw / 2, vy(c.vol), bw, volBot - vy(c.vol));
+    }
+    // price series
+    if (type === "line") {
+        ctx.strokeStyle = theme.line;
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        for (let j = 0; j < n; j++) {
+            const x = xOf(j);
+            const y = yOf(vis[j].c);
+            if (j)
+                ctx.lineTo(x, y);
+            else
+                ctx.moveTo(x, y);
+        }
+        ctx.stroke();
+        ctx.lineWidth = 1;
+    }
+    else {
+        for (let j = 0; j < n; j++) {
+            const c = vis[j];
+            const x = xOf(j);
+            const col = c.c >= c.o ? theme.up : theme.down;
+            ctx.strokeStyle = col;
+            ctx.fillStyle = col;
+            ctx.beginPath();
+            ctx.moveTo(x, yOf(c.h));
+            ctx.lineTo(x, yOf(c.l));
+            ctx.stroke();
+            const yo = yOf(c.o);
+            const yc = yOf(c.c);
+            ctx.fillRect(x - bw / 2, Math.min(yo, yc), bw, Math.max(1, Math.abs(yc - yo)));
+        }
+    }
+    // indicator overlays (moving averages) — drawn from precomputed value-series when
+    // supplied (the Chart controller precomputes them on data change), else computed
+    // here from the indicator config for pure/standalone callers. Series align to the
+    // FULL candle array, so the left edge of the view is correct.
+    const overlays = input.overlays ??
+        (input.indicators ?? []).map((ind, ii) => ({
+            color: ind.color || INDICATOR_PALETTE[ii % INDICATOR_PALETTE.length],
+            values: computeIndicator(candles, ind),
+        }));
+    if (overlays.length) {
+        ctx.lineWidth = 1.3;
+        for (const ov of overlays) {
+            ctx.strokeStyle = ov.color;
+            ctx.beginPath();
+            let pen = false;
+            for (let j = 0; j < n; j++) {
+                const v = ov.values[start + j];
+                if (v == null) {
+                    pen = false;
+                    continue;
+                }
+                const x = xOf(j);
+                const y = yOf(v);
+                if (pen)
+                    ctx.lineTo(x, y);
+                else {
+                    ctx.moveTo(x, y);
+                    pen = true;
+                }
+            }
+            ctx.stroke();
+        }
+        ctx.lineWidth = 1;
+    }
+    // last-price line + tag
+    const last = vis[n - 1];
+    const ly = yOf(last.c);
+    const lc = last.c >= last.o ? theme.up : theme.down;
+    ctx.strokeStyle = lc;
+    ctx.setLineDash([2, 2]);
+    ctx.beginPath();
+    ctx.moveTo(0, ly);
+    ctx.lineTo(plotW, ly);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = lc;
+    ctx.fillRect(plotW, ly - 8, pads.right, 16);
+    ctx.fillStyle = theme.tagText;
+    ctx.textAlign = "left";
+    ctx.fillText(formatValue(last.c), plotW + 6, ly);
+    // crosshair + axis labels
+    let active = last;
+    if (hover && hover.x < plotW && hover.y > 0 && hover.y < H - pads.bottom) {
+        const idx = Math.max(0, Math.min(n - 1, Math.round((hover.x - (plotW - (n - 1) * cw - cw / 2)) / cw)));
+        active = vis[idx];
+        const cx = xOf(idx);
+        ctx.strokeStyle = theme.crosshair;
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.moveTo(cx, pads.top);
+        ctx.lineTo(cx, volBot);
+        ctx.moveTo(0, hover.y);
+        ctx.lineTo(plotW, hover.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        if (hover.y < pads.top + priceH) {
+            const pv = lo + rng * (1 - (hover.y - pads.top) / priceH);
+            ctx.fillStyle = theme.axisTagBg;
+            ctx.fillRect(plotW, hover.y - 8, pads.right, 16);
+            ctx.fillStyle = theme.axisTagText;
+            ctx.textAlign = "left";
+            ctx.fillText(formatValue(pv), plotW + 6, hover.y);
+        }
+        const tl = formatTime(active.time, interval);
+        const tw = ctx.measureText(tl).width + 12;
+        ctx.fillStyle = theme.axisTagBg;
+        ctx.fillRect(cx - tw / 2, H - pads.bottom, tw, pads.bottom);
+        ctx.fillStyle = theme.axisTagText;
+        ctx.textAlign = "center";
+        ctx.fillText(tl, cx, H - pads.bottom / 2);
+    }
+    return active;
+}

package/dist/core/theme.d.ts

@@ -0,0 +1,3 @@
+import type { ChartTheme } from "./types";
+/** Default dark theme (TradingView-ish palette). */
+export declare const DEFAULT_THEME: ChartTheme;

package/dist/core/theme.js

@@ -0,0 +1,14 @@
+/** Default dark theme (TradingView-ish palette). */
+export const DEFAULT_THEME = {
+    up: "#26a69a",
+    down: "#ef5350",
+    line: "#2962ff",
+    grid: "#1c2030",
+    axis: "#787b86",
+    crosshair: "#9598a1",
+    volUp: "rgba(38,166,154,.5)",
+    volDown: "rgba(239,83,80,.5)",
+    tagText: "#0a0a0a",
+    axisTagBg: "#2a2e39",
+    axisTagText: "#d1d4dc",
+};

package/dist/core/types.d.ts

@@ -0,0 +1,80 @@
+/** A single OHLC candle with aggregated volume. `time` is the unix-seconds bucket start. */
+export interface Candle {
+    time: number;
+    o: number;
+    h: number;
+    l: number;
+    c: number;
+    /** summed quote/USD volume in the bucket. */
+    vol: number;
+}
+/** A priced trade: timestamp (unix seconds), price, and optional volume (quote/USD). */
+export interface Point {
+    t: number;
+    p: number;
+    v?: number;
+}
+export type Denom = "USD" | "ETH";
+export type ChartType = "candle" | "line";
+export type IndicatorType = "sma" | "ema" | "wma" | "vwap";
+export type PriceSource = "open" | "high" | "low" | "close";
+/** An overlay indicator drawn on the price pane (a moving average for now). */
+export interface Indicator {
+    type: IndicatorType;
+    /** Lookback in candles. */
+    period: number;
+    /** Stroke color; defaults to a built-in palette slot by position. */
+    color?: string;
+    /** Which price to average. Default "close". */
+    source?: PriceSource;
+}
+/** Transform applied to raw prices before aggregation. */
+export interface PriceTransform {
+    /** "USD" leaves prices as-is; "ETH" divides by `ethUsd`. */
+    denom?: Denom;
+    /** USD price of 1 ETH — required when `denom === "ETH"`. */
+    ethUsd?: number;
+    /** Invert the price (TOKEN/QUOTE → QUOTE/TOKEN). Ignored when `supply` is set. */
+    flip?: boolean;
+    /** Circulating supply — when > 0 the series becomes market cap (price × supply). */
+    supply?: number;
+}
+export interface ChartTheme {
+    up: string;
+    down: string;
+    /** line-mode stroke. */
+    line: string;
+    grid: string;
+    axis: string;
+    crosshair: string;
+    volUp: string;
+    volDown: string;
+    /** text on the last-price tag. */
+    tagText: string;
+    /** crosshair axis-label pill. */
+    axisTagBg: string;
+    axisTagText: string;
+    background?: string;
+}
+export interface ChartOptions {
+    /** canvas height in CSS px (default 420). */
+    height?: number;
+    theme?: Partial<ChartTheme>;
+    /** candles visible on first render (default 120). */
+    initialBars?: number;
+    /** minimum candles when fully zoomed in (default 20). */
+    minBars?: number;
+    /** cap on a candle's slot width in px — keeps sparse series tight, right-anchored (default 18). */
+    maxBarWidth?: number;
+    /** fraction of the plot used by the volume panel (default 0.18). */
+    volumeRatio?: number;
+    rightPad?: number;
+    bottomPad?: number;
+    topPad?: number;
+    /** called with the candle under the crosshair (or the last candle when idle / null when empty). */
+    onCrosshair?: (candle: Candle | null) => void;
+    /** moving-average overlays drawn on the price pane. */
+    indicators?: Indicator[];
+    /** fired when the user pans/zooms near the start of loaded data (lazy history). */
+    onNeedHistory?: () => void;
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { Chart } from "./core/chart";
+export { buildOHLC, transformPrice } from "./core/ohlc";
+export { draw } from "./core/renderer";
+export type { RenderInput, Viewport, Pads, ResolvedOverlay } from "./core/renderer";
+export { connectFeed } from "./core/feed";
+export type { ChartFeed, ConnectFeedOptions, FeedConnection, LoadHistoryParams } from "./core/feed";
+export { DEFAULT_THEME } from "./core/theme";
+export { formatValue, formatVolume, formatTime } from "./core/format";
+export { sma, ema, wma, vwap, bollingerBands, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+export { fetchHyperliquidCandles, fetchHlCandleWindow, hyperliquidFeed, mapHlCandles, HL_INTERVAL_SECONDS } from "./core/live";
+export type { HlRawCandle, FetchHlCandlesOptions, HyperliquidFeedOptions } from "./core/live";
+export type { Candle, Point, Denom, ChartType, PriceTransform, ChartTheme, ChartOptions, Indicator, IndicatorType, PriceSource, } from "./core/types";

package/dist/index.js

@@ -0,0 +1,11 @@
+// livo-charts — framework-agnostic core.
+// React bindings live in the `@livo-build/charts/react` subpath so non-React
+// consumers never pull React into their bundle.
+export { Chart } from "./core/chart";
+export { buildOHLC, transformPrice } from "./core/ohlc";
+export { draw } from "./core/renderer";
+export { connectFeed } from "./core/feed";
+export { DEFAULT_THEME } from "./core/theme";
+export { formatValue, formatVolume, formatTime } from "./core/format";
+export { sma, ema, wma, vwap, bollingerBands, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+export { fetchHyperliquidCandles, fetchHlCandleWindow, hyperliquidFeed, mapHlCandles, HL_INTERVAL_SECONDS } from "./core/live";

package/dist/react/HyperliquidChart.d.ts

@@ -0,0 +1,28 @@
+import type { ChartTheme, ChartType, Indicator } from "../core/types";
+export interface HyperliquidChartProps {
+    /** Hyperliquid coin symbol, e.g. "BTC", "ETH", or a builder-dex name like "xyz:TSLA". */
+    coin: string;
+    /** Initial interval (default "1h"). */
+    interval?: string;
+    testnet?: boolean;
+    height?: number;
+    chartType?: ChartType;
+    /** Moving-average overlays, e.g. [{ type: "ema", period: 21 }]. */
+    indicators?: Indicator[];
+    /** Candles per history page; older pages load as you scroll left (default 500). */
+    pageSize?: number;
+    theme?: Partial<ChartTheme>;
+    /** Show the interval / candle-line toolbar. Default true. */
+    toolbar?: boolean;
+}
+/**
+ * A turnkey, REALTIME Hyperliquid trading chart. Streams live candles over WebSocket,
+ * lazily loads older history as the user scrolls left (infinite back-scroll), and
+ * supports moving-average overlays — all with no API key. Renders via the
+ * framework-agnostic {@link Chart} (zoom/pan preserved across updates). Styled inline.
+ *
+ * ```tsx
+ * <HyperliquidChart coin="BTC" interval="15m" indicators={[{ type: "ema", period: 21 }]} />
+ * ```
+ */
+export declare function HyperliquidChart({ coin, interval, testnet, height, chartType, indicators, pageSize, theme, toolbar, }: HyperliquidChartProps): import("react").JSX.Element;

package/dist/react/HyperliquidChart.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Chart } from "../core/chart";
+import { connectFeed } from "../core/feed";
+import { hyperliquidFeed, HL_INTERVAL_SECONDS } from "../core/live";
+import { formatValue } from "../core/format";
+import { DEFAULT_THEME } from "../core/theme";
+const IVS = ["1m", "5m", "15m", "1h", "4h", "1d"];
+/**
+ * A turnkey, REALTIME Hyperliquid trading chart. Streams live candles over WebSocket,
+ * lazily loads older history as the user scrolls left (infinite back-scroll), and
+ * supports moving-average overlays — all with no API key. Renders via the
+ * framework-agnostic {@link Chart} (zoom/pan preserved across updates). Styled inline.
+ *
+ * ```tsx
+ * <HyperliquidChart coin="BTC" interval="15m" indicators={[{ type: "ema", period: 21 }]} />
+ * ```
+ */
+export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420, chartType = "candle", indicators, pageSize = 500, theme, toolbar = true, }) {
+    const [iv, setIv] = useState(interval);
+    const [type, setType] = useState(chartType);
+    const [last, setLast] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const host = useRef(null);
+    const chart = useRef(null);
+    const th = useMemo(() => ({ ...DEFAULT_THEME, ...(theme || {}) }), [theme]);
+    // create the core chart once
+    useEffect(() => {
+        if (!host.current)
+            return;
+        const c = new Chart(host.current, { height, theme: th, indicators });
+        chart.current = c;
+        return () => {
+            c.destroy();
+            chart.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => { chart.current?.setHeight(height); }, [height]);
+    useEffect(() => { chart.current?.setChartType(type); }, [type]);
+    useEffect(() => { chart.current?.setTheme(th); }, [th]);
+    useEffect(() => { chart.current?.setIndicators(indicators ?? []); }, [indicators]);
+    // connect a realtime feed: latest page + WebSocket live + lazy older history.
+    // Reconnects when coin/interval/testnet change (toolbar drives `iv`).
+    useEffect(() => {
+        if (!chart.current)
+            return;
+        setLoading(true);
+        setError(null);
+        const feed = hyperliquidFeed({ coin, interval: iv, testnet });
+        const conn = connectFeed(chart.current, feed, {
+            interval: HL_INTERVAL_SECONDS[iv] ?? 3600,
+            pageSize,
+            onCandles: (cs) => {
+                setLast(cs[cs.length - 1] ?? null);
+                setLoading(false);
+            },
+            onError: (e) => {
+                setError(e instanceof Error ? e.message : String(e));
+                setLoading(false);
+            },
+        });
+        return () => conn.disconnect();
+    }, [coin, iv, testnet, pageSize]);
+    const lc = last && last.c >= last.o ? th.up : th.down;
+    const btn = (on) => ({
+        padding: "4px 8px",
+        fontSize: 12,
+        fontWeight: 500,
+        border: "none",
+        borderRadius: 4,
+        cursor: "pointer",
+        background: on ? "#3f4453" : "transparent",
+        color: on ? "#e4e7ec" : "#9aa0ad",
+    });
+    const sep = _jsx("span", { style: { width: 1, height: 16, margin: "0 4px", background: "#2a2e39" } });
+    return (_jsxs("div", { style: { position: "relative", userSelect: "none" }, children: [toolbar && (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 2, borderBottom: "1px solid #1f232e", paddingBottom: 4, marginBottom: 4 }, children: [IVS.map((l) => (_jsx("button", { style: btn(iv === l), onClick: () => setIv(l), children: l }, l))), sep, _jsx("button", { style: btn(type === "candle"), title: "Candles", onClick: () => setType("candle"), children: "\u25AE\u25AF" }), _jsx("button", { style: btn(type === "line"), title: "Line", onClick: () => setType("line"), children: "\u2571" })] })), _jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: { position: "absolute", left: 8, top: 4, zIndex: 10, pointerEvents: "none", fontSize: 11, fontFamily: "ui-monospace, monospace" }, children: [_jsxs("div", { style: { color: "#b4b9c4" }, children: [coin, " \u00B7 ", iv, testnet ? " · testnet" : ""] }), last ? (_jsx("div", { style: { color: lc }, children: formatValue(last.c) })) : error ? (_jsx("div", { style: { color: th.down }, children: error })) : loading ? (_jsx("div", { style: { color: "#787b86" }, children: "loading\u2026" })) : null] }), _jsx("div", { ref: host })] })] }));
+}

package/dist/react/PriceChart.d.ts

@@ -0,0 +1,31 @@
+import type { ChartOptions, ChartTheme, Indicator, Point } from "../core/types";
+export interface PriceChartProps {
+    /** Priced trades — aggregated into candles client-side. `v` is per-trade volume (quote/USD). */
+    swaps: Point[];
+    /** USD price of 1 ETH, required for the ETH denomination toggle. */
+    ethUsd?: number;
+    /** Token address — enables the Market-cap toggle (fetches `totalSupply()`). */
+    tokenAddress?: string;
+    /** Token decimals (for the market-cap supply read). */
+    decimals?: number;
+    /** Base symbol shown in the legend. */
+    symbol?: string;
+    /** Quote symbol shown in the legend. */
+    quote?: string;
+    /** Canvas height in px (default 420). */
+    height?: number;
+    /** JSON-RPC endpoint for the market-cap `totalSupply()` read (default cloudflare-eth). */
+    rpcUrl?: string;
+    /** Theme overrides. */
+    theme?: Partial<ChartTheme>;
+    /** Moving-average overlays, e.g. [{ type: "ema", period: 21 }]. */
+    indicators?: Indicator[];
+    /** Advanced core options. */
+    options?: ChartOptions;
+}
+/**
+ * A self-contained trading chart: candles/line, volume panel, crosshair + axis labels,
+ * OHLCV legend, X/Y zoom + pan, interval / USD-ETH / price-mcap / fullscreen toolbar.
+ * Wraps the framework-agnostic {@link Chart}; styled inline (no CSS framework needed).
+ */
+export declare function PriceChart({ swaps, ethUsd, tokenAddress, decimals, symbol, quote, height, rpcUrl, theme, indicators, options, }: PriceChartProps): import("react").JSX.Element;

package/dist/react/PriceChart.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Chart } from "../core/chart";
+import { buildOHLC } from "../core/ohlc";
+import { formatValue, formatVolume } from "../core/format";
+import { DEFAULT_THEME } from "../core/theme";
+const IVS = [["1s", 1], ["1m", 60], ["5m", 300], ["15m", 900], ["1h", 3600], ["4h", 14400], ["1d", 86400]];
+const supplyCache = new Map();
+/**
+ * A self-contained trading chart: candles/line, volume panel, crosshair + axis labels,
+ * OHLCV legend, X/Y zoom + pan, interval / USD-ETH / price-mcap / fullscreen toolbar.
+ * Wraps the framework-agnostic {@link Chart}; styled inline (no CSS framework needed).
+ */
+export function PriceChart({ swaps, ethUsd = 0, tokenAddress, decimals = 18, symbol = "", quote = "WETH", height = 420, rpcUrl = "https://cloudflare-eth.com", theme, indicators, options, }) {
+    const [iv, setIv] = useState(300);
+    const [type, setType] = useState("candle");
+    const [denom, setDenom] = useState("USD");
+    const [mcap, setMcap] = useState(false);
+    const [flip, setFlip] = useState(false);
+    const [full, setFull] = useState(false);
+    const [supply, setSupply] = useState(0);
+    const [legend, setLegend] = useState(null);
+    const host = useRef(null);
+    const chart = useRef(null);
+    const th = useMemo(() => ({ ...DEFAULT_THEME, ...(theme || {}) }), [theme]);
+    const H = full && typeof window !== "undefined" ? window.innerHeight - 46 : height;
+    // Market cap needs circulating supply — totalSupply() via JSON-RPC, cached.
+    useEffect(() => {
+        if (!mcap || !tokenAddress)
+            return;
+        const key = tokenAddress.toLowerCase();
+        if (supplyCache.has(key)) {
+            setSupply(supplyCache.get(key));
+            return;
+        }
+        fetch(rpcUrl, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ jsonrpc: "2.0", id: 1, method: "eth_call", params: [{ to: tokenAddress, data: "0x18160ddd" }, "latest"] }),
+        })
+            .then((r) => r.json())
+            .then((j) => {
+            const hx = j.result;
+            if (hx && hx !== "0x") {
+                const s = Number(BigInt(hx)) / Math.pow(10, decimals);
+                supplyCache.set(key, s);
+                setSupply(s);
+            }
+        })
+            .catch(() => { });
+    }, [mcap, tokenAddress, decimals, rpcUrl]);
+    const candles = useMemo(() => buildOHLC(swaps, iv, { denom, ethUsd, flip: mcap ? false : flip, supply: mcap ? supply : 0 }), [swaps, iv, denom, ethUsd, flip, mcap, supply]);
+    // create the core chart once
+    useEffect(() => {
+        if (!host.current)
+            return;
+        const c = new Chart(host.current, { height: H, theme: th, onCrosshair: setLegend, indicators, ...options });
+        chart.current = c;
+        return () => {
+            c.destroy();
+            chart.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => { chart.current?.setHeight(H); }, [H]);
+    useEffect(() => { chart.current?.setInterval(iv); }, [iv]);
+    useEffect(() => { chart.current?.setChartType(type); }, [type]);
+    useEffect(() => { chart.current?.setTheme(th); }, [th]);
+    useEffect(() => { chart.current?.setIndicators(indicators ?? []); }, [indicators]);
+    useEffect(() => { chart.current?.setCandles(candles); }, [candles]);
+    const btn = (on) => ({
+        padding: "4px 8px",
+        fontSize: 12,
+        fontWeight: 500,
+        border: "none",
+        borderRadius: 4,
+        cursor: "pointer",
+        background: on ? "#3f4453" : "transparent",
+        color: on ? "#e4e7ec" : "#9aa0ad",
+    });
+    const sep = _jsx("span", { style: { width: 1, height: 16, margin: "0 4px", background: "#2a2e39" } });
+    const lc = legend && legend.c >= legend.o ? th.up : th.down;
+    const ivLabel = IVS.find(([, s]) => s === iv)?.[0] || "";
+    return (_jsxs("div", { style: full
+            ? { position: "fixed", inset: 0, zIndex: 50, background: "#0a0a0a", padding: 8, userSelect: "none" }
+            : { position: "relative", userSelect: "none" }, children: [_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 2, borderBottom: "1px solid #1f232e", paddingBottom: 4, marginBottom: 4 }, children: [IVS.map(([l, s]) => (_jsx("button", { style: btn(iv === s), onClick: () => setIv(s), children: l }, s))), sep, _jsx("button", { style: btn(type === "candle"), title: "Candles", onClick: () => setType("candle"), children: "\u25AE\u25AF" }), _jsx("button", { style: btn(type === "line"), title: "Line", onClick: () => setType("line"), children: "\u2571" }), sep, _jsx("button", { style: btn(!mcap), onClick: () => setMcap(false), children: "Price" }), _jsx("button", { style: btn(mcap), title: "Market cap (price \u00D7 supply)", onClick: () => setMcap(true), children: "MCap" }), sep, _jsx("button", { style: btn(denom === "USD"), onClick: () => setDenom("USD"), children: "USD" }), _jsx("button", { style: btn(denom === "ETH"), onClick: () => setDenom("ETH"), children: "ETH" }), !mcap ? _jsx("button", { style: btn(flip), title: "Invert pair", onClick: () => setFlip((f) => !f), children: "\u21C4" }) : null, _jsx("button", { style: { ...btn(full), marginLeft: "auto" }, title: "Fullscreen", onClick: () => setFull((f) => !f), children: "\u26F6" })] }), _jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: { position: "absolute", left: 8, top: 4, zIndex: 10, pointerEvents: "none", fontSize: 11, fontFamily: "ui-monospace, monospace" }, children: [_jsxs("div", { style: { color: "#b4b9c4" }, children: [symbol || "—", mcap ? " · mcap" : flip ? ` ${quote}/${symbol}` : ` /${quote}`, " \u00B7 ", ivLabel] }), legend ? (_jsxs("div", { style: { color: lc }, children: ["O ", formatValue(legend.o), "  H ", formatValue(legend.h), "  L ", formatValue(legend.l), "  C ", formatValue(legend.c), "  ", _jsxs("span", { style: { color: "#787b86" }, children: ["Vol ", formatVolume(legend.vol)] })] })) : null] }), _jsx("div", { ref: host })] })] }));
+}

package/dist/react.d.ts

@@ -0,0 +1,4 @@
+export { PriceChart } from "./react/PriceChart";
+export type { PriceChartProps } from "./react/PriceChart";
+export { HyperliquidChart } from "./react/HyperliquidChart";
+export type { HyperliquidChartProps } from "./react/HyperliquidChart";

package/dist/react.js

@@ -0,0 +1,3 @@
+// livo-charts — React bindings. Import from `@livo-build/charts/react`.
+export { PriceChart } from "./react/PriceChart";
+export { HyperliquidChart } from "./react/HyperliquidChart";

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@livo-build/charts",
+  "version": "0.2.1",
+  "description": "livo-charts — a lightweight, dependency-free canvas charting library (candlesticks, zoom/pan, crosshair, moving-average indicators, live Hyperliquid feed) with a framework-agnostic core and a React wrapper.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "livo",
+    "charts",
+    "candlestick",
+    "canvas",
+    "trading",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livo-projects/livo-mcp.git",
+    "directory": "packages/charts"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
+  }
+}