@livo-build/charts 0.2.1 → 0.2.2

package/dist/core/types.d.ts

@@ -16,9 +16,25 @@ export interface Point {
 }
 export type Denom = "USD" | "ETH";
 export type ChartType = "candle" | "line";
-export type IndicatorType = "sma" | "ema" | "wma" | "vwap";
+export type IndicatorType = "sma" | "ema" | "wma" | "vwap" | "bollinger";
 export type PriceSource = "open" | "high" | "low" | "close";
-/** An overlay indicator drawn on the price pane (a moving average for now). */
+/** 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 interface Oscillator {
+    type: OscillatorType;
+    /** RSI lookback (default 14). Ignored by MACD. */
+    period?: number;
+    /** MACD fast / slow / signal EMA lengths (defaults 12 / 26 / 9). Ignored by RSI. */
+    fast?: number;
+    slow?: number;
+    signal?: number;
+    /** Pane height in px (default 84). */
+    height?: number;
+    /** Primary line color; defaults to a built-in palette slot. */
+    color?: string;
+}
+/** An overlay indicator drawn on the price pane (a moving average, VWAP, or Bollinger band). */
 export interface Indicator {
     type: IndicatorType;
     /** Lookback in candles. */
@@ -27,7 +43,26 @@ export interface Indicator {
     color?: string;
     /** Which price to average. Default "close". */
     source?: PriceSource;
+    /** Bollinger band width in standard deviations (default 2). Ignored by other types. */
+    mult?: number;
+}
+/** A point anchored in data space (so drawings stay attached across pan/zoom). */
+export interface DrawingPoint {
+    /** unix seconds. */
+    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 interface Drawing {
+    id: string;
+    type: DrawingType;
+    a: DrawingPoint;
+    b?: DrawingPoint;
+    color?: string;
+}
+/** Drawing interaction mode. `none` = pan/zoom + select/move; the others arm a one-shot draw. */
+export type DrawMode = "none" | "trendline" | "hline";
 /** Transform applied to raw prices before aggregation. */
 export interface PriceTransform {
     /** "USD" leaves prices as-is; "ETH" divides by `ethUsd`. */
@@ -66,6 +101,11 @@ export interface ChartOptions {
     minBars?: number;
     /** cap on a candle's slot width in px — keeps sparse series tight, right-anchored (default 18). */
     maxBarWidth?: number;
+    /** cap on a candle's BODY (and volume bar) width in px (default 40). The body is 70% of
+     *  the slot up to this cap; raise it for chunkier candles on sparse / `fitContent` series. */
+    maxBodyWidth?: number;
+    /** show the volume panel (default true). */
+    showVolume?: boolean;
     /** fraction of the plot used by the volume panel (default 0.18). */
     volumeRatio?: number;
     rightPad?: number;
@@ -75,6 +115,42 @@ export interface ChartOptions {
     onCrosshair?: (candle: Candle | null) => void;
     /** moving-average overlays drawn on the price pane. */
     indicators?: Indicator[];
+    /** oscillators (RSI / MACD) drawn in stacked sub-panes below the volume panel. */
+    oscillators?: Oscillator[];
+    /** user drawings (trendlines / horizontal price lines) to render on the price pane. */
+    drawings?: Drawing[];
+    /** fired whenever the user adds, moves, or deletes a drawing. */
+    onDrawingsChange?: (drawings: Drawing[]) => void;
+    /** fired when the active draw mode changes (e.g. auto-reset to "none" after one draw). */
+    onDrawModeChange?: (mode: DrawMode) => void;
+    /** logarithmic price axis — equal vertical distance = equal % move (default false). */
+    logScale?: boolean;
+    /** 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;
+    /** y-axis price label formatter. Default adapts precision to the tick step. */
+    priceFormat?: (value: number) => string;
+    /** x-axis time label formatter. Default {@link formatTime}. */
+    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;
     /** fired when the user pans/zooms near the start of loaded data (lazy history). */
     onNeedHistory?: () => void;
 }
+/** Axis label/format/layout overrides — the subset of {@link ChartOptions} that styles the ticks. */
+export interface AxisOptions {
+    fitContent?: boolean;
+    priceFormat?: (value: number) => string;
+    timeFormat?: (time: number, interval: number) => string;
+    priceTicks?: number;
+    timeTicks?: number;
+    axisFont?: string;
+    /** max candle slot width in px (spacing). */
+    maxBarWidth?: number;
+    /** max candle body / volume-bar width in px. */
+    maxBodyWidth?: number;
+}

package/dist/index.d.ts

@@ -1,12 +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 { 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 } from "./core/theme";
-export { formatValue, formatVolume, formatTime } from "./core/format";
-export { sma, ema, wma, vwap, bollingerBands, sourceValues, computeIndicator, INDICATOR_PALETTE } from "./core/indicators";
+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 { 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";
+export type { Candle, Point, Denom, ChartType, PriceTransform, ChartTheme, ChartOptions, Indicator, IndicatorType, PriceSource, Oscillator, OscillatorType, Drawing, DrawingType, DrawingPoint, DrawMode, AxisOptions, } from "./core/types";

package/dist/index.js

@@ -3,9 +3,9 @@
 // consumers never pull React into their bundle.
 export { Chart } from "./core/chart";
 export { buildOHLC, transformPrice } from "./core/ohlc";
-export { draw } from "./core/renderer";
+export { draw, slotWidth, windowOf, priceScale, timeScale, computeProjection, withAlpha, resolveOverlays } 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 { 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 { fetchHyperliquidCandles, fetchHlCandleWindow, hyperliquidFeed, mapHlCandles, HL_INTERVAL_SECONDS } from "./core/live";

package/dist/react/HyperliquidChart.d.ts

@@ -1,4 +1,4 @@
-import type { ChartTheme, ChartType, Indicator } from "../core/types";
+import type { ChartTheme, ChartType, Drawing, Indicator, Oscillator } from "../core/types";
 export interface HyperliquidChartProps {
     /** Hyperliquid coin symbol, e.g. "BTC", "ETH", or a builder-dex name like "xyz:TSLA". */
     coin: string;
@@ -9,11 +9,37 @@ export interface HyperliquidChartProps {
     chartType?: ChartType;
     /** Moving-average overlays, e.g. [{ type: "ema", period: 21 }]. */
     indicators?: Indicator[];
+    /** Oscillator sub-panes (RSI / MACD), e.g. [{ type: "macd" }]. */
+    oscillators?: Oscillator[];
+    /** Initial drawings (trendlines / horizontal lines). */
+    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). */
+    hideDrawingTools?: boolean;
+    /** Show the volume panel (default true). */
+    showVolume?: boolean;
     /** 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;
+    /** Spread candles across the full width instead of right-anchoring (default true). */
+    fitContent?: boolean;
+    /** Max candle slot width in px (spacing; default 18). */
+    maxBarWidth?: number;
+    /** Max candle body / volume-bar width in px (default 40). */
+    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; color is `theme.axis`. */
+    axisFont?: string;
 }
 /**
  * A turnkey, REALTIME Hyperliquid trading chart. Streams live candles over WebSocket,
@@ -25,4 +51,4 @@ export interface HyperliquidChartProps {
  * <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;
+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;

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 } from "./ui";
 const IVS = ["1m", "5m", "15m", "1h", "4h", "1d"];
 /**
  * A turnkey, REALTIME Hyperliquid trading chart. Streams live candles over WebSocket,
@@ -16,10 +17,14 @@ 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, 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 [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 +34,25 @@ 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,
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            onCrosshair: setLegend,
+            fitContent,
+            maxBarWidth,
+            maxBodyWidth,
+            priceFormat,
+            timeFormat,
+            priceTicks,
+            timeTicks,
+            axisFont,
+        });
         chart.current = c;
         return () => {
             c.destroy();
@@ -41,6 +64,13 @@ 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?.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(() => {
@@ -63,17 +93,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, _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 })] })] }));
 }

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 } 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,37 @@ 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 / clear drawing-tool buttons (shown by default). */
+    hideDrawingTools?: boolean;
+    /** Show the volume panel (default true). */
+    showVolume?: boolean;
+    /** 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;
+    /** 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 +63,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, defaultChartType, defaultInterval, fitContent, maxBarWidth, maxBodyWidth, priceFormat, timeFormat, priceTicks, timeTicks, axisFont, options, }: PriceChartProps): import("react").JSX.Element;

package/dist/react/PriceChart.js

@@ -1,9 +1,10 @@
-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";
+import { toolbarUi } from "./ui";
 const IVS = [["1s", 1], ["1m", 60], ["5m", 300], ["15m", 900], ["1h", 3600], ["4h", 14400], ["1d", 86400]];
 const supplyCache = new Map();
 /**
@@ -11,26 +12,33 @@ const supplyCache = new Map();
  * 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, defaultChartType = "candle", defaultInterval = 300, 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 [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);
     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 +52,38 @@ 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,
+            indicators,
+            oscillators,
+            drawings,
+            onDrawingsChange,
+            onDrawModeChange: setDrawMode,
+            showVolume: showVolumeProp,
+            fitContent,
+            maxBarWidth,
+            maxBodyWidth,
+            priceFormat,
+            timeFormat,
+            priceTicks,
+            timeTicks,
+            axisFont,
+            ...options,
+        });
         chart.current = c;
         return () => {
             c.destroy();
@@ -67,21 +96,19 @@ 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?.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] || "";
     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: [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 })] })] }));
 }

package/dist/react/ui.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from "react";
+import type { ChartTheme } from "../core/types";
+/**
+ * Toolbar/legend styling derived from the chart {@link ChartTheme}, so the chrome tracks
+ * the chart instead of being hardcoded dark. Active buttons reuse the crosshair-pill
+ * colors (`axisTagBg`/`axisTagText`); muted text is `axis`; rules use `grid`.
+ */
+export declare function toolbarUi(theme: ChartTheme): {
+    btn: (on: boolean) => CSSProperties;
+    sepStyle: CSSProperties;
+    barStyle: CSSProperties;
+    muted: string;
+};

package/dist/react/ui.js

@@ -0,0 +1,29 @@
+/**
+ * Toolbar/legend styling derived from the chart {@link ChartTheme}, so the chrome tracks
+ * the chart instead of being hardcoded dark. Active buttons reuse the crosshair-pill
+ * colors (`axisTagBg`/`axisTagText`); muted text is `axis`; rules use `grid`.
+ */
+export function toolbarUi(theme) {
+    const btn = (on) => ({
+        padding: "4px 8px",
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: 1.2,
+        border: "none",
+        borderRadius: 4,
+        cursor: "pointer",
+        background: on ? theme.axisTagBg : "transparent",
+        color: on ? theme.axisTagText : theme.axis,
+    });
+    const sepStyle = { width: 1, height: 16, margin: "0 4px", background: theme.grid };
+    const barStyle = {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 2,
+        borderBottom: `1px solid ${theme.grid}`,
+        paddingBottom: 4,
+        marginBottom: 4,
+    };
+    return { btn, sepStyle, barStyle, muted: theme.axis };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livo-build/charts",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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",