@livo-build/charts 0.2.2 → 0.2.4

package/dist/core/types.d.ts

@@ -15,20 +15,24 @@ export interface Point {
     v?: number;
 }
 export type Denom = "USD" | "ETH";
-export type ChartType = "candle" | "line";
+/** Price-series style: candlesticks, a line, a two-tone baseline area, or Heikin-Ashi candles. */
+export type ChartType = "candle" | "line" | "baseline" | "heikin";
 export type IndicatorType = "sma" | "ema" | "wma" | "vwap" | "bollinger";
 export type PriceSource = "open" | "high" | "low" | "close";
 /** Oscillators render in their own stacked sub-pane below the volume panel. */
-export type OscillatorType = "rsi" | "macd";
-/** An oscillator drawn in a dedicated sub-pane (RSI band 0–100, or MACD line+signal+histogram). */
+export type OscillatorType = "rsi" | "macd" | "stoch" | "atr";
+/** An oscillator drawn in a dedicated sub-pane (RSI/Stochastic 0–100 band, MACD, or ATR). */
 export interface Oscillator {
     type: OscillatorType;
-    /** RSI lookback (default 14). Ignored by MACD. */
+    /** Lookback — RSI/ATR period, or the Stochastic %K period (defaults 14). Ignored by MACD. */
     period?: number;
-    /** MACD fast / slow / signal EMA lengths (defaults 12 / 26 / 9). Ignored by RSI. */
+    /** MACD fast / slow / signal EMA lengths (defaults 12 / 26 / 9). Ignored by the others. */
     fast?: number;
     slow?: number;
     signal?: number;
+    /** Stochastic %D period (default 3) and %K smoothing (default 1 = fast). Ignored by others. */
+    dPeriod?: number;
+    smooth?: number;
     /** Pane height in px (default 84). */
     height?: number;
     /** Primary line color; defaults to a built-in palette slot. */
@@ -52,8 +56,11 @@ export interface DrawingPoint {
     time: number;
     price: number;
 }
-export type DrawingType = "trendline" | "hline";
-/** A user-drawn annotation on the price pane. `hline` uses `a.price`; `trendline` uses `a`+`b`. */
+export type DrawingType = "trendline" | "hline" | "fib" | "rect";
+/**
+ * A user-drawn annotation on the price pane. `hline` uses `a.price`; `trendline`, `fib`
+ * (retracement levels between the two prices) and `rect` (box) use both `a` and `b`.
+ */
 export interface Drawing {
     id: string;
     type: DrawingType;
@@ -62,7 +69,7 @@ export interface Drawing {
     color?: string;
 }
 /** Drawing interaction mode. `none` = pan/zoom + select/move; the others arm a one-shot draw. */
-export type DrawMode = "none" | "trendline" | "hline";
+export type DrawMode = "none" | "trendline" | "hline" | "fib" | "rect";
 /** Transform applied to raw prices before aggregation. */
 export interface PriceTransform {
     /** "USD" leaves prices as-is; "ETH" divides by `ethUsd`. */
@@ -91,6 +98,15 @@ export interface ChartTheme {
     axisTagText: string;
     background?: string;
 }
+/** Volume-by-price overlay config. `true` uses defaults; an object tunes it. */
+export type VolumeProfileConfig = boolean | {
+    /** number of price bands (default 24). */
+    buckets?: number;
+    /** fraction of the plot width the widest bar occupies (default 0.16). */
+    width?: number;
+    /** bar fill color (default a translucent `theme.axis`). */
+    color?: string;
+};
 export interface ChartOptions {
     /** canvas height in CSS px (default 420). */
     height?: number;
@@ -125,6 +141,13 @@ export interface ChartOptions {
     onDrawModeChange?: (mode: DrawMode) => void;
     /** logarithmic price axis — equal vertical distance = equal % move (default false). */
     logScale?: boolean;
+    /** centered text shown when there are no candles (default "no priced trades yet"). Feeds
+     *  set this to "Loading…" while the first page is in flight. Pass "" to draw nothing. */
+    emptyText?: string;
+    /** reference price for the `baseline` chart type (default: the first visible candle's close). */
+    baselinePrice?: number;
+    /** volume-by-price histogram drawn on the price pane (default off). */
+    volumeProfile?: VolumeProfileConfig;
     /** spread candles across the full plot width instead of right-anchoring a capped slot
      *  (default false in the core `Chart`; the React wrappers default it on). */
     fitContent?: boolean;

package/dist/index.d.ts

@@ -1,12 +1,17 @@
-export { Chart } from "./core/chart";
-export { buildOHLC, transformPrice } from "./core/ohlc";
+export { Chart, needsHistory, maxPanOffset } from "./core/chart";
+export { buildOHLC, transformPrice, heikinAshi } from "./core/ohlc";
 export { draw, slotWidth, windowOf, priceScale, timeScale, computeProjection, withAlpha, resolveOverlays } from "./core/renderer";
 export type { RenderInput, Viewport, Pads, ResolvedOverlay, Projection } from "./core/renderer";
 export { connectFeed } from "./core/feed";
 export type { ChartFeed, ConnectFeedOptions, FeedConnection, LoadHistoryParams } from "./core/feed";
 export { DEFAULT_THEME, LIGHT_THEME, THEME_PRESETS } from "./core/theme";
 export { formatValue, formatAxisValue, formatVolume, formatTime } from "./core/format";
-export { sma, ema, wma, vwap, bollingerBands, rsi, macd, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+export { sma, ema, wma, vwap, bollingerBands, rsi, macd, stochastic, atr, volumeProfile, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+export type { VolumeBucket, VolumeProfileResult } 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, Oscillator, OscillatorType, Drawing, DrawingType, DrawingPoint, DrawMode, AxisOptions, } from "./core/types";
+export { fetchPolymarketPriceHistory, polymarketFeed, POLYMARKET_CLOB } from "./core/polymarket";
+export type { PolyHistoryPoint, FetchPolyHistoryOptions, PolymarketFeedOptions } from "./core/polymarket";
+export { fetchSignalsMarket, fetchSignalsSwaps, signalsFeed, sparkCandles, rejectPriceOutliers, DEFAULT_SIGNALS_URL } from "./core/signals";
+export type { SignalsMarket, SignalsFeedOptions } from "./core/signals";
+export type { Candle, Point, Denom, ChartType, PriceTransform, ChartTheme, ChartOptions, Indicator, IndicatorType, PriceSource, Oscillator, OscillatorType, Drawing, DrawingType, DrawingPoint, DrawMode, AxisOptions, VolumeProfileConfig, } from "./core/types";

package/dist/index.js

@@ -1,11 +1,13 @@
 // 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 { Chart, needsHistory, maxPanOffset } from "./core/chart";
+export { buildOHLC, transformPrice, heikinAshi } from "./core/ohlc";
 export { draw, slotWidth, windowOf, priceScale, timeScale, computeProjection, withAlpha, resolveOverlays } from "./core/renderer";
 export { connectFeed } from "./core/feed";
 export { DEFAULT_THEME, LIGHT_THEME, THEME_PRESETS } from "./core/theme";
 export { formatValue, formatAxisValue, formatVolume, formatTime } from "./core/format";
-export { sma, ema, wma, vwap, bollingerBands, rsi, macd, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+export { sma, ema, wma, vwap, bollingerBands, rsi, macd, stochastic, atr, volumeProfile, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
 export { fetchHyperliquidCandles, fetchHlCandleWindow, hyperliquidFeed, mapHlCandles, HL_INTERVAL_SECONDS } from "./core/live";
+export { fetchPolymarketPriceHistory, polymarketFeed, POLYMARKET_CLOB } from "./core/polymarket";
+export { fetchSignalsMarket, fetchSignalsSwaps, signalsFeed, sparkCandles, rejectPriceOutliers, DEFAULT_SIGNALS_URL } from "./core/signals";

package/dist/react/HyperliquidChart.d.ts

@@ -1,4 +1,4 @@
-import type { ChartTheme, ChartType, Drawing, Indicator, Oscillator } from "../core/types";
+import type { ChartTheme, ChartType, Drawing, Indicator, Oscillator, VolumeProfileConfig } from "../core/types";
 export interface HyperliquidChartProps {
     /** Hyperliquid coin symbol, e.g. "BTC", "ETH", or a builder-dex name like "xyz:TSLA". */
     coin: string;
@@ -19,6 +19,8 @@ export interface HyperliquidChartProps {
     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;
     /** Candles per history page; older pages load as you scroll left (default 500). */
     pageSize?: number;
     theme?: Partial<ChartTheme>;
@@ -51,4 +53,4 @@ export interface HyperliquidChartProps {
  * <HyperliquidChart coin="BTC" interval="15m" indicators={[{ type: "ema", period: 21 }]} />
  * ```
  */
-export declare function HyperliquidChart({ coin, interval, testnet, height, chartType, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, pageSize, theme, toolbar, fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, }: HyperliquidChartProps): import("react").JSX.Element;
+export declare function HyperliquidChart({ coin, interval, testnet, height, chartType, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, volumeProfile: volumeProfileProp, pageSize, theme, toolbar, fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, }: HyperliquidChartProps): import("react").JSX.Element;

package/dist/react/HyperliquidChart.js

@@ -5,7 +5,7 @@ import { connectFeed } from "../core/feed";
 import { hyperliquidFeed, HL_INTERVAL_SECONDS } from "../core/live";
 import { formatValue, formatVolume } from "../core/format";
 import { DEFAULT_THEME } from "../core/theme";
-import { toolbarUi } from "./ui";
+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,
@@ -17,11 +17,12 @@ 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, oscillators, drawings, onDrawingsChange, hideDrawingTools = false, showVolume: showVolumeProp = true, pageSize = 500, theme, toolbar = true, fitContent = true, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, }) {
+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);
@@ -37,12 +38,14 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
         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,
@@ -68,6 +71,10 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
     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]);
@@ -85,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));
@@ -97,5 +105,5 @@ export function HyperliquidChart({ coin, interval = "1h", testnet, height = 420,
     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, _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(showVolume), title: "Toggle volume panel", onClick: () => setShowVolume((v) => !v), children: "Vol" }), _jsx("button", { style: btn(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, _jsx("button", { style: btn(drawMode === "trendline"), title: "Draw trendline (drag)", onClick: () => setDrawMode((m) => (m === "trendline" ? "none" : "trendline")), children: "\u2197" }), _jsx("button", { style: btn(drawMode === "hline"), title: "Draw horizontal line (click)", onClick: () => setDrawMode((m) => (m === "hline" ? "none" : "hline")), children: "\u2014" }), _jsx("button", { style: btn(false), title: "Clear drawings (double-click a line to delete one)", onClick: () => chart.current?.clearDrawings(), children: "\u232B" })] })) : 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" : ""] }), 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)] })] })) : error ? (_jsx("div", { style: { color: th.down }, children: error })) : loading ? (_jsx("div", { style: { color: muted }, children: "loading\u2026" })) : null] }), _jsx("div", { ref: host })] })] }));
+    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,45 @@
+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). Ignored when `liveUrl` is set. */
+    refetchMs?: number;
+    /**
+     * Optional Livo indexer base (e.g. "https://polymarket.livo.build") — upgrades the live
+     * candle from the 30s poll to INSTANT SSE updates. History still loads from the CLOB.
+     */
+    liveUrl?: string;
+    /** 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, liveUrl, 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, liveUrl, 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, liveUrl });
+        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, liveUrl, 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,4 +1,4 @@
-import type { ChartOptions, ChartTheme, ChartType, Drawing, Indicator, Oscillator, 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[];
@@ -30,14 +30,29 @@ export interface PriceChartProps {
     drawings?: Drawing[];
     /** Fired whenever the user adds, moves, or deletes a drawing. */
     onDrawingsChange?: (drawings: Drawing[]) => void;
-    /** Hide the trendline / h-line / clear drawing-tool buttons (shown by default). */
+    /** 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;
@@ -63,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, supply: supplyProp, tokenAddress, decimals, symbol, quote, height, rpcUrl, theme, indicators, oscillators, drawings, onDrawingsChange, hideDrawingTools, showVolume: showVolumeProp, defaultChartType, defaultInterval, fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, 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

@@ -5,14 +5,15 @@ import { buildOHLC } from "../core/ohlc";
 import { formatValue, formatVolume } from "../core/format";
 import { DEFAULT_THEME } from "../core/theme";
 import { toolbarUi } from "./ui";
-const IVS = [["1s", 1], ["1m", 60], ["5m", 300], ["15m", 900], ["1h", 3600], ["4h", 14400], ["1d", 86400]];
+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, 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, defaultChartType = "candle", defaultInterval = 300, fitContent = true, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, options, }) {
+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");
@@ -20,12 +21,16 @@ export function PriceChart({ swaps, ethUsd = 0, supply: supplyProp = 0, tokenAdd
     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 [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;
     // A direct `supply` prop wins; otherwise market cap needs circulating supply, read once
@@ -68,12 +73,15 @@ export function PriceChart({ swaps, ethUsd = 0, supply: supplyProp = 0, tokenAdd
             height: H,
             theme: th,
             onCrosshair: setLegend,
+            onNeedHistory: () => onLoadOlderRef.current?.(),
             indicators,
             oscillators,
             drawings,
             onDrawingsChange,
             onDrawModeChange: setDrawMode,
             showVolume: showVolumeProp,
+            volumeProfile: volumeProfileProp,
+            baselinePrice,
             fitContent,
             maxBarWidth,
             maxBodyWidth,
@@ -100,6 +108,10 @@ export function PriceChart({ swaps, ethUsd = 0, supply: supplyProp = 0, tokenAdd
     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]);
@@ -107,8 +119,8 @@ export function PriceChart({ swaps, ethUsd = 0, supply: supplyProp = 0, tokenAdd
     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: th.background ?? "#0a0a0a", padding: 8, userSelect: "none" }
-            : { position: "relative", userSelect: "none" }, children: [_jsxs("div", { style: barStyle, 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" }), 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, sep, _jsx("button", { style: btn(denom === "USD"), onClick: () => setDenom("USD"), children: "USD" }), _jsx("button", { style: btn(denom === "ETH"), onClick: () => setDenom("ETH"), children: "ETH" }), !showMcap ? _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(log), title: "Logarithmic price axis", onClick: () => setLog((v) => !v), children: "Log" }), !hideDrawingTools ? (_jsxs(_Fragment, { children: [sep, _jsx("button", { style: btn(drawMode === "trendline"), title: "Draw trendline (drag)", onClick: () => setDrawMode((m) => (m === "trendline" ? "none" : "trendline")), children: "\u2197" }), _jsx("button", { style: btn(drawMode === "hline"), title: "Draw horizontal line (click)", onClick: () => setDrawMode((m) => (m === "hline" ? "none" : "hline")), children: "\u2014" }), _jsx("button", { style: btn(false), title: "Clear drawings (double-click a line to delete one)", onClick: () => chart.current?.clearDrawings(), children: "\u232B" })] })) : 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 })] })] }));
+            : { 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] })] }));
+}