@livo-build/charts 0.2.1 → 0.2.3

package/dist/react/HyperliquidChart.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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 { formatValue, formatVolume } from "../core/format";
 import { DEFAULT_THEME } from "../core/theme";
+import { toolbarUi, typeButtons, drawButtons, loadingOverlay } from "./ui";
 const IVS = ["1m", "5m", "15m", "1h", "4h", "1d"];
 /**
  * A turnkey, REALTIME Hyperliquid trading chart. Streams live candles over WebSocket,
@@ -16,10 +17,15 @@ const IVS = ["1m", "5m", "15m", "1h", "4h", "1d"];
  * <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, }) {
+export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420, chartType = "candle", indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools = false, showVolume: showVolumeProp = true, volumeProfile: volumeProfileProp, pageSize = 500, theme, toolbar = true, fitContent = true, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, }) {
     const [iv, setIv] = useState(interval);
     const [type, setType] = useState(chartType);
+    const [log, setLog] = useState(false);
+    const [showVolume, setShowVolume] = useState(showVolumeProp);
+    const [vpOn, setVpOn] = useState(!!volumeProfileProp);
+    const [drawMode, setDrawMode] = useState("none");
     const [last, setLast] = useState(null);
+    const [legend, setLegend] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(true);
     const host = useRef(null);
@@ -29,7 +35,27 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
     useEffect(() => {
         if (!host.current)
             return;
-        const c = new Chart(host.current, { height, theme: th, indicators });
+        const c = new Chart(host.current, {
+            height,
+            theme: th,
+            emptyText: "Loading…",
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            volumeProfile: volumeProfileProp,
+            onCrosshair: setLegend,
+            fitContent,
+            maxBarWidth,
+            maxBodyWidth,
+            priceFormat,
+            timeFormat,
+            priceTicks,
+            timeTicks,
+            axisFont,
+        });
         chart.current = c;
         return () => {
             c.destroy();
@@ -41,6 +67,17 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
     useEffect(() => { chart.current?.setChartType(type); }, [type]);
     useEffect(() => { chart.current?.setTheme(th); }, [th]);
     useEffect(() => { chart.current?.setIndicators(indicators ?? []); }, [indicators]);
+    useEffect(() => { chart.current?.setOscillators(oscillators ?? []); }, [oscillators]);
+    useEffect(() => { chart.current?.setDrawMode(drawMode); }, [drawMode]);
+    useEffect(() => { chart.current?.setShowVolume(showVolume); }, [showVolume]);
+    useEffect(() => { chart.current?.setLogScale(log); }, [log]);
+    useEffect(() => { chart.current?.setEmptyText(loading ? "" : "no data"); }, [loading]); // overlay handles loading
+    useEffect(() => {
+        chart.current?.setVolumeProfile(vpOn ? (typeof volumeProfileProp === "object" ? volumeProfileProp : true) : false);
+    }, [vpOn, volumeProfileProp]);
+    useEffect(() => {
+        chart.current?.setAxis({ fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont });
+    }, [fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont]);
     // connect a realtime feed: latest page + WebSocket live + lazy older history.
     // Reconnects when coin/interval/testnet change (toolbar drives `iv`).
     useEffect(() => {
@@ -55,6 +92,7 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
             onCandles: (cs) => {
                 setLast(cs[cs.length - 1] ?? null);
                 setLoading(false);
+                setError(null); // a successful page clears a prior transient error
             },
             onError: (e) => {
                 setError(e instanceof Error ? e.message : String(e));
@@ -63,17 +101,9 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
         });
         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 })] })] }));
+    const info = legend ?? last;
+    const lc = info && info.c >= info.o ? th.up : th.down;
+    const { btn, sepStyle, barStyle, muted } = toolbarUi(th);
+    const sep = _jsx("span", { style: sepStyle });
+    return (_jsxs("div", { style: { position: "relative", userSelect: "none" }, children: [toolbar && (_jsxs("div", { style: barStyle, children: [IVS.map((l) => (_jsx("button", { style: btn(iv === l), onClick: () => setIv(l), children: l }, l))), sep, typeButtons(th, type, setType), sep, _jsx("button", { style: btn(showVolume), title: "Toggle volume panel", onClick: () => setShowVolume((v) => !v), children: "Vol" }), _jsx("button", { style: btn(vpOn), title: "Volume-by-price histogram", onClick: () => setVpOn((v) => !v), children: "VP" }), _jsx("button", { style: btn(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, drawButtons(th, drawMode, setDrawMode, () => chart.current?.clearDrawings())] })) : null] })), _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: muted }, children: [coin, " \u00B7 ", iv, testnet ? " · testnet" : ""] }), error ? (_jsx("div", { style: { color: th.down }, children: error })) : info ? (_jsxs("div", { style: { color: lc }, children: ["O ", formatValue(info.o), "  H ", formatValue(info.h), "  L ", formatValue(info.l), "  C ", formatValue(info.c), "  ", _jsxs("span", { style: { color: muted }, children: ["Vol ", formatVolume(info.vol)] })] })) : null] }), _jsx("div", { ref: host }), loading ? loadingOverlay(th) : null] })] }));
 }

package/dist/react/PolymarketChart.d.ts

@@ -0,0 +1,40 @@
+import type { ChartTheme, ChartType, Drawing, Indicator, Oscillator, VolumeProfileConfig } from "../core/types";
+export interface PolymarketChartProps {
+    /** The Polymarket CLOB token id (an outcome of a market) to chart. */
+    tokenId: string;
+    /** Initial candle bucket in seconds (default 3600 = 1h); the toolbar can switch it. */
+    bucketSeconds?: number;
+    /** Override the CLOB host. */
+    host?: string;
+    /** Live poll cadence in ms (default 30s; 0 = fetch once). */
+    refetchMs?: number;
+    /** Candles per history page; older pages load as you scroll left (default 500). */
+    pageSize?: number;
+    height?: number;
+    chartType?: ChartType;
+    indicators?: Indicator[];
+    oscillators?: Oscillator[];
+    drawings?: Drawing[];
+    onDrawingsChange?: (drawings: Drawing[]) => void;
+    hideDrawingTools?: boolean;
+    /** Show the (always-empty) volume panel — off by default since price-history has no volume. */
+    showVolume?: boolean;
+    volumeProfile?: VolumeProfileConfig;
+    theme?: Partial<ChartTheme>;
+    toolbar?: boolean;
+    fitContent?: boolean;
+    /** Outcome label shown in the legend (e.g. "Yes"). */
+    label?: string;
+    /** y-axis formatter (default a 0–100% probability). */
+    priceFormat?: (value: number) => string;
+}
+/**
+ * A turnkey, live chart for a Polymarket outcome. Bucketed OHLC from the public CLOB
+ * price-history endpoint (no key), polled for a building candle. Prices are probabilities,
+ * so the y-axis defaults to a percentage. Renders via the framework-agnostic {@link Chart}.
+ *
+ * ```tsx
+ * <PolymarketChart tokenId={yesTokenId} bucketSeconds={3600} label="Yes" />
+ * ```
+ */
+export declare function PolymarketChart({ tokenId, bucketSeconds, host, refetchMs, pageSize, height, chartType, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, volumeProfile: volumeProfileProp, theme, toolbar, fitContent, label, priceFormat, }: PolymarketChartProps): import("react").JSX.Element;

package/dist/react/PolymarketChart.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { polymarketFeed } from "../core/polymarket";
+import { DEFAULT_THEME } from "../core/theme";
+import { toolbarUi, typeButtons, drawButtons, loadingOverlay } from "./ui";
+const BUCKETS = [["5m", 300], ["1h", 3600], ["6h", 21600], ["1d", 86400]];
+const pct = (v) => `${(v * 100).toFixed(1)}%`;
+/**
+ * A turnkey, live chart for a Polymarket outcome. Bucketed OHLC from the public CLOB
+ * price-history endpoint (no key), polled for a building candle. Prices are probabilities,
+ * so the y-axis defaults to a percentage. Renders via the framework-agnostic {@link Chart}.
+ *
+ * ```tsx
+ * <PolymarketChart tokenId={yesTokenId} bucketSeconds={3600} label="Yes" />
+ * ```
+ */
+export function PolymarketChart({ tokenId, bucketSeconds = 3600, host, refetchMs, pageSize = 500, height = 420, chartType = "line", indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools = false, showVolume: showVolumeProp = false, volumeProfile: volumeProfileProp, theme, toolbar = true, fitContent = true, label, priceFormat = pct, }) {
+    const [secs, setSecs] = useState(bucketSeconds);
+    const [type, setType] = useState(chartType);
+    const [log, setLog] = useState(false);
+    const [vpOn, setVpOn] = useState(!!volumeProfileProp);
+    const [drawMode, setDrawMode] = useState("none");
+    const [last, setLast] = useState(null);
+    const [legend, setLegend] = 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]);
+    useEffect(() => {
+        if (!host_.current)
+            return;
+        const c = new Chart(host_.current, {
+            height,
+            theme: th,
+            emptyText: "Loading…",
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            volumeProfile: volumeProfileProp,
+            onCrosshair: setLegend,
+            fitContent,
+            priceFormat,
+        });
+        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]);
+    useEffect(() => { chart.current?.setOscillators(oscillators ?? []); }, [oscillators]);
+    useEffect(() => { chart.current?.setDrawMode(drawMode); }, [drawMode]);
+    useEffect(() => { chart.current?.setLogScale(log); }, [log]);
+    useEffect(() => { chart.current?.setEmptyText(loading ? "" : "no data"); }, [loading]); // overlay handles loading
+    useEffect(() => {
+        chart.current?.setVolumeProfile(vpOn ? (typeof volumeProfileProp === "object" ? volumeProfileProp : true) : false);
+    }, [vpOn, volumeProfileProp]);
+    useEffect(() => {
+        if (!chart.current)
+            return;
+        setLoading(true);
+        setError(null);
+        const feed = polymarketFeed({ tokenId, bucketSeconds: secs, host, refetchMs });
+        const conn = connectFeed(chart.current, feed, {
+            interval: secs,
+            pageSize,
+            onCandles: (cs) => {
+                setLast(cs[cs.length - 1] ?? null);
+                setLoading(false);
+                setError(null); // a successful page clears a prior transient error
+            },
+            onError: (e) => {
+                setError(e instanceof Error ? e.message : String(e));
+                setLoading(false);
+            },
+        });
+        return () => conn.disconnect();
+    }, [tokenId, secs, host, refetchMs, pageSize]);
+    const info = legend ?? last;
+    const lc = info && info.c >= info.o ? th.up : th.down;
+    const { btn, sepStyle, barStyle, muted } = toolbarUi(th);
+    const sep = _jsx("span", { style: sepStyle });
+    const ivLabel = BUCKETS.find(([, s]) => s === secs)?.[0] ?? `${secs}s`;
+    return (_jsxs("div", { style: { position: "relative", userSelect: "none" }, children: [toolbar && (_jsxs("div", { style: barStyle, children: [BUCKETS.map(([l, s]) => (_jsx("button", { style: btn(secs === s), onClick: () => setSecs(s), children: l }, s))), sep, typeButtons(th, type, setType), sep, _jsx("button", { style: btn(vpOn), title: "Volume-by-price histogram", onClick: () => setVpOn((v) => !v), children: "VP" }), _jsx("button", { style: btn(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, drawButtons(th, drawMode, setDrawMode, () => chart.current?.clearDrawings())] })) : null] })), _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: muted }, children: [label ? `${label} · ` : "", "prob \u00B7 ", ivLabel] }), error ? (_jsx("div", { style: { color: th.down }, children: error })) : info ? (_jsxs("div", { style: { color: lc }, children: ["O ", pct(info.o), "  H ", pct(info.h), "  L ", pct(info.l), "  C ", pct(info.c)] })) : null] }), _jsx("div", { ref: host_ }), loading ? loadingOverlay(th) : null] })] }));
+}

package/dist/react/PriceChart.d.ts

@@ -1,12 +1,16 @@
-import type { ChartOptions, ChartTheme, Indicator, Point } from "../core/types";
+import type { ChartOptions, ChartTheme, ChartType, Drawing, Indicator, Oscillator, Point, VolumeProfileConfig } 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()`). */
+    /** Circulating/total supply — enables the Market-cap toggle directly (MCap = price ×
+     *  supply). Use this when you already know the supply (no RPC call needed). */
+    supply?: number;
+    /** Token address — enables the Market-cap toggle by fetching `totalSupply()` over RPC
+     *  (only used when `supply` isn't provided). */
     tokenAddress?: string;
-    /** Token decimals (for the market-cap supply read). */
+    /** Token decimals (for the market-cap `totalSupply()` read). */
     decimals?: number;
     /** Base symbol shown in the legend. */
     symbol?: string;
@@ -20,6 +24,52 @@ export interface PriceChartProps {
     theme?: Partial<ChartTheme>;
     /** Moving-average overlays, e.g. [{ type: "ema", period: 21 }]. */
     indicators?: Indicator[];
+    /** Oscillator sub-panes (RSI / MACD), e.g. [{ type: "rsi", period: 14 }]. */
+    oscillators?: Oscillator[];
+    /** Initial drawings (trendlines / horizontal lines). The chart manages them after mount. */
+    drawings?: Drawing[];
+    /** Fired whenever the user adds, moves, or deletes a drawing. */
+    onDrawingsChange?: (drawings: Drawing[]) => void;
+    /** Hide the trendline / h-line / fib / rect / clear drawing-tool buttons (shown by default). */
+    hideDrawingTools?: boolean;
+    /** Show the volume panel (default true). */
+    showVolume?: boolean;
+    /** Volume-by-price histogram (default off); the toolbar adds a VP toggle when set. */
+    volumeProfile?: VolumeProfileConfig;
+    /** Reference price for the `baseline` chart type (default: the first visible close). */
+    baselinePrice?: number;
+    /** Initial series style (default "candle"); the toolbar can switch it after mount. */
+    defaultChartType?: ChartType;
+    /** Initial bucket interval in seconds (default 300 = 5m); the toolbar can switch it. */
+    defaultInterval?: number;
+    /** Toolbar interval presets as `[label, seconds]`. Default `1s…1d`. Scope this to the
+     *  intervals your data actually covers — a thin dataset bucketed at `1h` collapses into a
+     *  couple of fat candles. (`PriceChart` aggregates the `swaps` you pass; it doesn't fetch
+     *  more — supply a wider range via `onIntervalChange` if you want coarser buckets to fill.) */
+    intervals?: [string, number][];
+    /** Fired when the user picks a different interval (seconds) — load a wider range here. */
+    onIntervalChange?: (seconds: number) => void;
+    /** Fired when the user pans/zooms within ~one viewport of the oldest candle. Prepend
+     *  older trades to `swaps` here for infinite back-history (`PriceChart` re-aggregates and
+     *  the right-anchored view keeps the position stable). No-op if you pass a fixed array. */
+    onLoadOlder?: () => void;
+    /** Spread candles across the full width instead of right-anchoring a capped slot.
+     *  Default `true` — fills the container for sparse series. */
+    fitContent?: boolean;
+    /** Max candle slot width in px (spacing; default 18). */
+    maxBarWidth?: number;
+    /** Max candle body / volume-bar width in px (default 40). Raise for chunkier candles. */
+    maxBodyWidth?: number;
+    /** y-axis price label formatter (default adapts precision to the tick step). */
+    priceFormat?: (value: number) => string;
+    /** x-axis time label formatter. */
+    timeFormat?: (time: number, interval: number) => string;
+    /** number of horizontal price gridlines / labels (default 5). */
+    priceTicks?: number;
+    /** approximate number of time-axis labels (default 7). */
+    timeTicks?: number;
+    /** canvas font for axis labels (default "10px ui-monospace, monospace"); color is `theme.axis`. */
+    axisFont?: string;
     /** Advanced core options. */
     options?: ChartOptions;
 }
@@ -28,4 +78,4 @@ export interface PriceChartProps {
  * 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;
+export declare function PriceChart({ swaps, ethUsd, supply: supplyProp, tokenAddress, decimals, symbol, quote, height, rpcUrl, theme, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, volumeProfile: volumeProfileProp, baselinePrice, defaultChartType, defaultInterval, intervals, onIntervalChange, onLoadOlder, fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, options, }: PriceChartProps): import("react").JSX.Element;

package/dist/react/PriceChart.js

@@ -1,36 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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]];
+import { toolbarUi } from "./ui";
+import { typeButtons, drawButtons } from "./ui";
+const DEFAULT_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");
+export function PriceChart({ swaps, ethUsd = 0, supply: supplyProp = 0, tokenAddress, decimals = 18, symbol = "", quote = "WETH", height = 420, rpcUrl = "https://cloudflare-eth.com", theme, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools = false, showVolume: showVolumeProp = true, volumeProfile: volumeProfileProp, baselinePrice, defaultChartType = "candle", defaultInterval = 300, intervals = DEFAULT_IVS, onIntervalChange, onLoadOlder, fitContent = true, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, options, }) {
+    const [iv, setIv] = useState(defaultInterval);
+    const [type, setType] = useState(defaultChartType);
     const [denom, setDenom] = useState("USD");
     const [mcap, setMcap] = useState(false);
     const [flip, setFlip] = useState(false);
+    const [log, setLog] = useState(!!options?.logScale);
+    const [showVolume, setShowVolume] = useState(showVolumeProp);
+    const [vpOn, setVpOn] = useState(!!volumeProfileProp);
+    const [drawMode, setDrawMode] = useState("none");
     const [full, setFull] = useState(false);
-    const [supply, setSupply] = useState(0);
+    const [fetchedSupply, setFetchedSupply] = useState(0);
     const [legend, setLegend] = useState(null);
     const host = useRef(null);
     const chart = useRef(null);
+    // keep the latest onLoadOlder callable from the once-created chart without re-mounting it.
+    const onLoadOlderRef = useRef(onLoadOlder);
+    onLoadOlderRef.current = onLoadOlder;
     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.
+    // A direct `supply` prop wins; otherwise market cap needs circulating supply, read once
+    // from totalSupply() over JSON-RPC (cached). Market cap is only available when one of
+    // the two is present — see `canMcap` below (we hide the toggle otherwise).
+    const supply = supplyProp || fetchedSupply;
+    const canMcap = supplyProp > 0 || !!tokenAddress;
     useEffect(() => {
-        if (!mcap || !tokenAddress)
+        if (!mcap || supplyProp > 0 || !tokenAddress)
             return;
         const key = tokenAddress.toLowerCase();
         if (supplyCache.has(key)) {
-            setSupply(supplyCache.get(key));
+            setFetchedSupply(supplyCache.get(key));
             return;
         }
         fetch(rpcUrl, {
@@ -44,17 +57,41 @@ export function PriceChart({ swaps, ethUsd = 0, tokenAddress, decimals = 18, sym
             if (hx && hx !== "0x") {
                 const s = Number(BigInt(hx)) / Math.pow(10, decimals);
                 supplyCache.set(key, s);
-                setSupply(s);
+                setFetchedSupply(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]);
+    }, [mcap, supplyProp, tokenAddress, decimals, rpcUrl]);
+    // Market cap only renders when we actually have a supply; falls back to price otherwise.
+    const showMcap = mcap && supply > 0;
+    const candles = useMemo(() => buildOHLC(swaps, iv, { denom, ethUsd, flip: showMcap ? false : flip, supply: showMcap ? supply : 0 }), [swaps, iv, denom, ethUsd, flip, showMcap, 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 });
+        const c = new Chart(host.current, {
+            height: H,
+            theme: th,
+            onCrosshair: setLegend,
+            onNeedHistory: () => onLoadOlderRef.current?.(),
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            volumeProfile: volumeProfileProp,
+            baselinePrice,
+            fitContent,
+            maxBarWidth,
+            maxBodyWidth,
+            priceFormat,
+            timeFormat,
+            priceTicks,
+            timeTicks,
+            axisFont,
+            ...options,
+        });
         chart.current = c;
         return () => {
             c.destroy();
@@ -67,21 +104,23 @@ export function PriceChart({ swaps, ethUsd = 0, tokenAddress, decimals = 18, sym
     useEffect(() => { chart.current?.setChartType(type); }, [type]);
     useEffect(() => { chart.current?.setTheme(th); }, [th]);
     useEffect(() => { chart.current?.setIndicators(indicators ?? []); }, [indicators]);
+    useEffect(() => { chart.current?.setOscillators(oscillators ?? []); }, [oscillators]);
+    useEffect(() => { chart.current?.setDrawMode(drawMode); }, [drawMode]);
+    useEffect(() => { chart.current?.setShowVolume(showVolume); }, [showVolume]);
+    useEffect(() => { chart.current?.setLogScale(log); }, [log]);
+    useEffect(() => {
+        chart.current?.setVolumeProfile(vpOn ? (typeof volumeProfileProp === "object" ? volumeProfileProp : true) : false);
+    }, [vpOn, volumeProfileProp]);
+    useEffect(() => { chart.current?.setBaseline(baselinePrice); }, [baselinePrice]);
+    useEffect(() => {
+        chart.current?.setAxis({ fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont });
+    }, [fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont]);
     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 { btn, sepStyle, barStyle, muted } = toolbarUi(th);
+    const sep = _jsx("span", { style: sepStyle });
     const lc = legend && legend.c >= legend.o ? th.up : th.down;
-    const ivLabel = IVS.find(([, s]) => s === iv)?.[0] || "";
+    const ivLabel = intervals.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 })] })] }));
+            ? { position: "fixed", inset: 0, zIndex: 50, background: th.background ?? "#0a0a0a", padding: 8, userSelect: "none" }
+            : { position: "relative", userSelect: "none" }, children: [_jsxs("div", { style: barStyle, children: [intervals.map(([l, s]) => (_jsx("button", { style: btn(iv === s), onClick: () => { setIv(s); onIntervalChange?.(s); }, children: l }, s))), sep, typeButtons(th, type, setType), canMcap ? (_jsxs(_Fragment, { children: [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" })] })) : null, ethUsd > 0 ? (_jsxs(_Fragment, { children: [sep, _jsx("button", { style: btn(denom === "USD"), onClick: () => setDenom("USD"), children: "USD" }), _jsx("button", { style: btn(denom === "ETH"), title: "Denominate in ETH (price \u00F7 ETH/USD)", onClick: () => setDenom("ETH"), children: "ETH" })] })) : null, !showMcap ? (_jsxs(_Fragment, { children: [sep, _jsx("button", { style: btn(flip), title: "Invert pair", onClick: () => setFlip((f) => !f), children: "\u21C4" })] })) : null, sep, _jsx("button", { style: btn(showVolume), title: "Toggle volume panel", onClick: () => setShowVolume((v) => !v), children: "Vol" }), _jsx("button", { style: btn(vpOn), title: "Volume-by-price histogram", onClick: () => setVpOn((v) => !v), children: "VP" }), _jsx("button", { style: btn(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, drawButtons(th, drawMode, setDrawMode, () => chart.current?.clearDrawings())] })) : 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: muted }, children: [symbol || "—", showMcap ? " · 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: muted }, children: ["Vol ", formatVolume(legend.vol)] })] })) : null] }), _jsx("div", { ref: host })] })] }));
 }

package/dist/react/SignalsChart.d.ts

@@ -0,0 +1,37 @@
+import type { ChartTheme, ChartType, Drawing, Indicator, Oscillator, VolumeProfileConfig } from "../core/types";
+export interface SignalsChartProps {
+    /** Token to chart — pool address, base-token address, or pair symbol (e.g. "PEPE"). */
+    token: string;
+    /** Signal Radar engine base URL (default https://signals.livo.build). */
+    url?: string;
+    /** Initial candle bucket in seconds (default 300 = 5m); the toolbar can switch it. */
+    bucketSeconds?: number;
+    /** Live poll cadence in ms (default 15s; 0 = fetch once). */
+    refetchMs?: number;
+    height?: number;
+    chartType?: ChartType;
+    indicators?: Indicator[];
+    oscillators?: Oscillator[];
+    drawings?: Drawing[];
+    onDrawingsChange?: (drawings: Drawing[]) => void;
+    hideDrawingTools?: boolean;
+    /** Show the (always-empty) volume panel — off by default since the snapshot has no volume. */
+    showVolume?: boolean;
+    volumeProfile?: VolumeProfileConfig;
+    theme?: Partial<ChartTheme>;
+    toolbar?: boolean;
+    fitContent?: boolean;
+    /** y-axis price formatter (default a range-aware USD value). */
+    priceFormat?: (value: number) => string;
+}
+/**
+ * A turnkey, live chart for a token tracked by the Livo signals engine ("Signal Radar").
+ * Seeds from the engine snapshot's recent-closes sparkline and polls for a building candle
+ * (no key). History is shallow (the snapshot's `spark`) — for deep history use a chart
+ * backed by an indexer feed. Renders via the framework-agnostic {@link Chart}.
+ *
+ * ```tsx
+ * <SignalsChart token="PEPE" bucketSeconds={300} />
+ * ```
+ */
+export declare function SignalsChart({ token, url, bucketSeconds, refetchMs, height, chartType, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, volumeProfile: volumeProfileProp, theme, toolbar, fitContent, priceFormat, }: SignalsChartProps): import("react").JSX.Element;

package/dist/react/SignalsChart.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { signalsFeed } from "../core/signals";
+import { formatValue } from "../core/format";
+import { DEFAULT_THEME } from "../core/theme";
+import { toolbarUi, typeButtons, drawButtons, loadingOverlay } from "./ui";
+const BUCKETS = [["1m", 60], ["5m", 300], ["15m", 900], ["1h", 3600], ["4h", 14400], ["1d", 86400]];
+/**
+ * A turnkey, live chart for a token tracked by the Livo signals engine ("Signal Radar").
+ * Seeds from the engine snapshot's recent-closes sparkline and polls for a building candle
+ * (no key). History is shallow (the snapshot's `spark`) — for deep history use a chart
+ * backed by an indexer feed. Renders via the framework-agnostic {@link Chart}.
+ *
+ * ```tsx
+ * <SignalsChart token="PEPE" bucketSeconds={300} />
+ * ```
+ */
+export function SignalsChart({ token, url, bucketSeconds = 300, refetchMs, height = 420, chartType = "line", indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools = false, showVolume: showVolumeProp = false, volumeProfile: volumeProfileProp, theme, toolbar = true, fitContent = true, priceFormat, }) {
+    const [secs, setSecs] = useState(bucketSeconds);
+    const [type, setType] = useState(chartType);
+    const [log, setLog] = useState(false);
+    const [vpOn, setVpOn] = useState(!!volumeProfileProp);
+    const [drawMode, setDrawMode] = useState("none");
+    const [last, setLast] = useState(null);
+    const [legend, setLegend] = 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]);
+    useEffect(() => {
+        if (!host.current)
+            return;
+        const c = new Chart(host.current, {
+            height,
+            theme: th,
+            emptyText: "Loading…",
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            volumeProfile: volumeProfileProp,
+            onCrosshair: setLegend,
+            fitContent,
+            priceFormat,
+        });
+        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]);
+    useEffect(() => { chart.current?.setOscillators(oscillators ?? []); }, [oscillators]);
+    useEffect(() => { chart.current?.setDrawMode(drawMode); }, [drawMode]);
+    useEffect(() => { chart.current?.setLogScale(log); }, [log]);
+    useEffect(() => { chart.current?.setEmptyText(loading ? "" : "no data"); }, [loading]); // overlay handles loading
+    useEffect(() => {
+        chart.current?.setVolumeProfile(vpOn ? (typeof volumeProfileProp === "object" ? volumeProfileProp : true) : false);
+    }, [vpOn, volumeProfileProp]);
+    useEffect(() => {
+        if (!chart.current)
+            return;
+        setLoading(true);
+        setError(null);
+        const feed = signalsFeed({ token, url, bucketSeconds: secs, refetchMs });
+        const conn = connectFeed(chart.current, feed, {
+            interval: secs,
+            onCandles: (cs) => {
+                setLast(cs[cs.length - 1] ?? null);
+                setLoading(false);
+                setError(null); // a successful page clears a prior transient error
+            },
+            onError: (e) => {
+                setError(e instanceof Error ? e.message : String(e));
+                setLoading(false);
+            },
+        });
+        return () => conn.disconnect();
+    }, [token, url, secs, refetchMs]);
+    const info = legend ?? last;
+    const lc = info && info.c >= info.o ? th.up : th.down;
+    const { btn, sepStyle, barStyle, muted } = toolbarUi(th);
+    const sep = _jsx("span", { style: sepStyle });
+    const ivLabel = BUCKETS.find(([, s]) => s === secs)?.[0] ?? `${secs}s`;
+    return (_jsxs("div", { style: { position: "relative", userSelect: "none" }, children: [toolbar && (_jsxs("div", { style: barStyle, children: [BUCKETS.map(([l, s]) => (_jsx("button", { style: btn(secs === s), onClick: () => setSecs(s), children: l }, s))), sep, typeButtons(th, type, setType), sep, _jsx("button", { style: btn(vpOn), title: "Volume-by-price histogram", onClick: () => setVpOn((v) => !v), children: "VP" }), _jsx("button", { style: btn(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, drawButtons(th, drawMode, setDrawMode, () => chart.current?.clearDrawings())] })) : null] })), _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: muted }, children: [token.length > 14 ? `${token.slice(0, 6)}…${token.slice(-4)}` : token, " \u00B7 ", ivLabel, " \u00B7 radar"] }), error ? (_jsx("div", { style: { color: th.down }, children: error })) : info ? (_jsxs("div", { style: { color: lc }, children: ["O ", formatValue(info.o), "  H ", formatValue(info.h), "  L ", formatValue(info.l), "  C ", formatValue(info.c)] })) : null] }), _jsx("div", { ref: host }), loading ? loadingOverlay(th) : null] })] }));
+}