@livo-build/charts 0.2.1 → 0.2.2

package/dist/core/renderer.d.ts

@@ -1,4 +1,54 @@
-import type { Candle, ChartTheme, ChartType, Indicator } from "./types";
+import type { Candle, ChartTheme, ChartType, Drawing, Indicator, Oscillator } from "./types";
+/**
+ * Width of one candle slot (px). By default the slot is capped at `maxBarWidth` and the
+ * series is right-anchored — sparse data stays tight in the corner. With `fitContent`,
+ * the cap is dropped so `count` candles spread across the whole plot (fills the
+ * container). Dense series are identical either way (plotW/count < maxBarWidth).
+ */
+export declare function slotWidth(plotW: number, count: number, maxBarWidth: number, fitContent?: boolean): number;
+/** Convert a `#rrggbb` color to `rgba(...)` with the given alpha (passes other formats through). */
+export declare function withAlpha(color: string, alpha: number): string;
+/** The visible candle window (which slice is on screen and the per-candle slot width). */
+export declare function windowOf(candles: Candle[], view: Viewport, plotW: number, maxBarWidth: number, fitContent?: boolean): {
+    start: number;
+    end: number;
+    vis: Candle[];
+    n: number;
+    count: number;
+    cw: number;
+};
+/**
+ * Price ↔ pixel mapping for the price pane, shared by the renderer and the drawing-tool
+ * hit-testing so they never drift. Handles the log transform and the padded/zoomed range.
+ */
+export declare function priceScale(vis: Candle[], yZoom: number, logScale: boolean, top: number, priceH: number): {
+    yOfPrice: (v: number) => number;
+    priceOfY: (y: number) => number;
+    fwd: (v: number) => number;
+    inv: (s: number) => number;
+    sLo: number;
+    sRng: number;
+    lo: number;
+    hi: number;
+};
+/** Time ↔ pixel mapping for the visible window (candle index and arbitrary unix-second time). */
+export declare function timeScale(vis: Candle[], n: number, cw: number, plotW: number, interval: number): {
+    xOf: (j: number) => number;
+    xOfTime: (t: number) => number;
+    timeOfX: (x: number) => number;
+};
+/** Full pixel↔data projection for the current frame — built from the same input `draw` uses. */
+export interface Projection {
+    xOfTime: (t: number) => number;
+    timeOfX: (x: number) => number;
+    yOfPrice: (p: number) => number;
+    priceOfY: (y: number) => number;
+    plotW: number;
+    priceTop: number;
+    priceBottom: number;
+}
+/** Compute the {@link Projection} for interaction/hit-testing without rendering. */
+export declare function computeProjection(input: RenderInput): Projection | null;
 export interface Viewport {
     /** candles visible. */
     count: number;
@@ -26,6 +76,8 @@ export interface RenderInput {
     yZoom: number;
     /** max candle slot width in px. */
     maxBarWidth: number;
+    /** max candle body / volume-bar width in px (default 40). */
+    maxBodyWidth?: number;
     /** volume-panel height in px. */
     volH: number;
     theme: ChartTheme;
@@ -34,12 +86,40 @@ export interface RenderInput {
     indicators?: Indicator[];
     /** precomputed overlay value-series (aligned to `candles`); preferred over `indicators`. */
     overlays?: ResolvedOverlay[];
+    /** logarithmic price axis — equal vertical distance = equal % move. */
+    logScale?: boolean;
+    /** spread candles across the full plot width instead of right-anchoring at a capped slot. */
+    fitContent?: boolean;
+    /** y-axis price label formatter (default: range-aware {@link formatAxisValue}). */
+    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;
+    /** oscillators (RSI / MACD) drawn in stacked sub-panes below the volume panel. */
+    oscillators?: Oscillator[];
+    /** committed user drawings (trendlines / horizontal lines). */
+    drawings?: Drawing[];
+    /** in-progress drawing rendered as a live preview (not yet committed). */
+    drawPreview?: Drawing | null;
+    /** id of the selected drawing (rendered emphasized with anchor handles). */
+    selectedDrawing?: string | null;
 }
 /** A resolved indicator overlay: a color and a value-series aligned to the candles. */
 export interface ResolvedOverlay {
     color: string;
     values: (number | null)[];
 }
+/**
+ * Resolve indicator configs into drawable overlay lines. Moving averages / VWAP map 1:1;
+ * a `bollinger` indicator expands into three lines (upper / mid / lower), the bands faint.
+ * Shared by the Chart controller (precompute) and `draw` (standalone callers).
+ */
+export declare function resolveOverlays(candles: Candle[], indicators: Indicator[]): ResolvedOverlay[];
 /**
  * Pure draw pass: renders grid, axes, the price series (candles or line), a volume
  * panel, the last-price tag and the crosshair + axis labels. Returns the candle under

package/dist/core/renderer.js

@@ -1,5 +1,107 @@
-import { formatValue, formatTime } from "./format";
-import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
+import { formatAxisValue, formatTime } from "./format";
+import { computeIndicator, sourceValues, bollingerBands, INDICATOR_PALETTE, rsi, macd } from "./indicators";
+/**
+ * Width of one candle slot (px). By default the slot is capped at `maxBarWidth` and the
+ * series is right-anchored — sparse data stays tight in the corner. With `fitContent`,
+ * the cap is dropped so `count` candles spread across the whole plot (fills the
+ * container). Dense series are identical either way (plotW/count < maxBarWidth).
+ */
+export function slotWidth(plotW, count, maxBarWidth, fitContent = false) {
+    const raw = plotW / Math.max(count, 1);
+    return fitContent ? raw : Math.min(raw, maxBarWidth);
+}
+/** Convert a `#rrggbb` color to `rgba(...)` with the given alpha (passes other formats through). */
+export function withAlpha(color, alpha) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(color);
+    if (!m)
+        return color;
+    const n = parseInt(m[1], 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}
+/** The visible candle window (which slice is on screen and the per-candle slot width). */
+export function windowOf(candles, view, plotW, maxBarWidth, fitContent = false) {
+    const count = Math.min(view.count, candles.length);
+    const end = candles.length - view.offset;
+    const start = Math.max(0, end - count);
+    const vis = candles.slice(start, end);
+    return { start, end, vis, n: vis.length, count, cw: slotWidth(plotW, count, maxBarWidth, fitContent) };
+}
+/**
+ * Price ↔ pixel mapping for the price pane, shared by the renderer and the drawing-tool
+ * hit-testing so they never drift. Handles the log transform and the padded/zoomed range.
+ */
+export function priceScale(vis, yZoom, logScale, top, priceH) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const c of vis) {
+        lo = Math.min(lo, c.l);
+        hi = Math.max(hi, c.h);
+    }
+    const log = !!logScale && lo > 0;
+    const fwd = (v) => (log ? Math.log10(v) : v);
+    const inv = (s) => (log ? 10 ** s : s);
+    let sLo = fwd(lo);
+    let sHi = fwd(hi);
+    const sMid = (sLo + sHi) / 2;
+    const sHalf = (((sHi - sLo) / 2 || Math.abs(sHi) * 0.1 || 1) * 1.08) / yZoom;
+    sLo = sMid - sHalf;
+    sHi = sMid + sHalf;
+    const sRng = sHi - sLo || 1;
+    const yOfPrice = (v) => top + priceH * (1 - (fwd(v) - sLo) / sRng);
+    const priceOfY = (y) => inv(sLo + sRng * (1 - (y - top) / priceH));
+    return { yOfPrice, priceOfY, fwd, inv, sLo, sRng, lo, hi };
+}
+/** Time ↔ pixel mapping for the visible window (candle index and arbitrary unix-second time). */
+export function timeScale(vis, n, cw, plotW, interval) {
+    const xOf = (j) => plotW - (n - 1 - j) * cw - cw / 2;
+    const t0 = n ? vis[0].time : 0;
+    const iv = interval || 1;
+    const xOfTime = (t) => xOf((t - t0) / iv);
+    const timeOfX = (x) => t0 + ((x - xOf(0)) / cw) * iv;
+    return { xOf, xOfTime, timeOfX };
+}
+/** Compute the {@link Projection} for interaction/hit-testing without rendering. */
+export function computeProjection(input) {
+    const { candles, view, pads, width, maxBarWidth, volH, height, yZoom, interval } = input;
+    if (!candles.length)
+        return null;
+    const plotW = width - pads.right;
+    const panesH = (input.oscillators ?? []).map((o) => Math.max(24, o.height ?? 84)).reduce((a, b) => a + b, 0);
+    const priceH = height - pads.bottom - pads.top - volH - panesH;
+    const { vis, n, cw } = windowOf(candles, view, plotW, maxBarWidth, input.fitContent);
+    const ts = timeScale(vis, n, cw, plotW, interval);
+    const ps = priceScale(vis, yZoom, !!input.logScale, pads.top, priceH);
+    return {
+        xOfTime: ts.xOfTime,
+        timeOfX: ts.timeOfX,
+        yOfPrice: ps.yOfPrice,
+        priceOfY: ps.priceOfY,
+        plotW,
+        priceTop: pads.top,
+        priceBottom: pads.top + priceH,
+    };
+}
+/**
+ * Resolve indicator configs into drawable overlay lines. Moving averages / VWAP map 1:1;
+ * a `bollinger` indicator expands into three lines (upper / mid / lower), the bands faint.
+ * Shared by the Chart controller (precompute) and `draw` (standalone callers).
+ */
+export function resolveOverlays(candles, indicators) {
+    const out = [];
+    indicators.forEach((ind, i) => {
+        const color = ind.color || INDICATOR_PALETTE[i % INDICATOR_PALETTE.length];
+        if (ind.type === "bollinger") {
+            const { upper, mid, lower } = bollingerBands(sourceValues(candles, ind.source), ind.period, ind.mult ?? 2);
+            out.push({ color: withAlpha(color, 0.45), values: upper });
+            out.push({ color, values: mid });
+            out.push({ color: withAlpha(color, 0.45), values: lower });
+        }
+        else {
+            out.push({ color, values: computeIndicator(candles, ind) });
+        }
+    });
+    return out;
+}
 /**
  * Pure draw pass: renders grid, axes, the price series (candles or line), a volume
  * panel, the last-price tag and the crosshair + axis labels. Returns the candle under
@@ -9,7 +111,13 @@ import { computeIndicator, INDICATOR_PALETTE } from "./indicators";
 export function draw(input) {
     const { ctx, width: w, height: H, candles, view, hover, interval, type, yZoom, maxBarWidth, volH, theme, pads } = input;
     const plotW = w - pads.right;
-    const priceH = H - pads.bottom - pads.top - volH;
+    // Oscillator sub-panes stack below the volume panel; each eats into the price pane.
+    const oscs = input.oscillators ?? [];
+    const paneHs = oscs.map((o) => Math.max(24, o.height ?? 84));
+    const panesH = paneHs.reduce((a, b) => a + b, 0);
+    const priceH = H - pads.bottom - pads.top - volH - panesH;
+    // bottom of the plotting area (above the time-axis gutter) — vertical lines span to here.
+    const chartBot = pads.top + priceH + volH + panesH;
     if (theme.background) {
         ctx.fillStyle = theme.background;
         ctx.fillRect(0, 0, w, H);
@@ -17,79 +125,110 @@ export function draw(input) {
     else {
         ctx.clearRect(0, 0, w, H);
     }
-    ctx.font = "10px ui-monospace, monospace";
+    ctx.font = input.axisFont ?? "10px ui-monospace, monospace";
     ctx.textBaseline = "middle";
+    const fmtTime = input.timeFormat ?? formatTime;
+    // Snap 1px strokes to the pixel grid so gridlines/axes render crisp, not blurred across 2px.
+    const crisp = (v) => Math.round(v) + 0.5;
     if (!candles.length) {
         ctx.fillStyle = theme.axis;
         ctx.textAlign = "center";
         ctx.fillText("no priced trades yet", plotW / 2, H / 2);
         return null;
     }
-    const count = Math.min(view.count, candles.length);
-    const end = candles.length - view.offset;
-    const start = Math.max(0, end - count);
-    const vis = candles.slice(start, end);
-    const n = vis.length;
-    // Cap the slot width and right-anchor — a few candles cluster on the right with empty
-    // space on the left (TradingView-style) rather than stretching across the whole plot.
-    const cw = Math.min(plotW / Math.max(count, 1), maxBarWidth);
-    const xOf = (j) => plotW - (n - 1 - j) * cw - cw / 2;
-    let lo = Infinity;
-    let hi = -Infinity;
+    // Slot width fills the plot by default (`fitContent`, on by default in the wrappers and
+    // the core Chart) so sparse data spreads out instead of bunching on the right; the candle
+    // BODY is capped separately (`maxBodyWidth`) below. fitContent:false caps the slot at
+    // `maxBarWidth` and right-anchors (the tight, TradingView-style look).
+    const { start, vis, n, cw } = windowOf(candles, view, plotW, maxBarWidth, input.fitContent);
+    const { xOf, xOfTime } = timeScale(vis, n, cw, plotW, interval);
     let vmax = 0;
-    for (const c of vis) {
-        lo = Math.min(lo, c.l);
-        hi = Math.max(hi, c.h);
+    for (const c of vis)
         vmax = Math.max(vmax, c.vol);
-    }
-    const mid = (lo + hi) / 2;
-    const half = ((((hi - lo) / 2) || Math.abs(hi) * 0.1 || 1) * 1.08) / yZoom;
-    lo = mid - half;
-    hi = mid + half;
-    const rng = hi - lo || 1;
     vmax = vmax || 1;
-    const yOf = (v) => pads.top + priceH * (1 - (v - lo) / rng);
+    // Price↔pixel mapping (log-aware, padded, zoomed). Shared with drawing-tool hit-testing.
+    const { yOfPrice: yOf, priceOfY, inv, sLo, sRng } = priceScale(vis, yZoom, !!input.logScale, pads.top, priceH);
     const volBot = pads.top + priceH + volH;
     const vy = (vol) => volBot - (vol / vmax) * volH * 0.92;
-    // grid + price axis (right gutter)
+    // grid + price axis (right gutter). Labels are formatted with enough precision to stay
+    // distinct (the compact "K" formatter alone collapses a narrow high-value axis into dupes).
+    const pTicks = Math.max(1, Math.round(input.priceTicks ?? 5));
+    const tickVals = [];
+    for (let i = 0; i <= pTicks; i++)
+        tickVals.push(inv(sLo + (sRng * i) / pTicks));
+    const priceStep = Math.abs(tickVals[pTicks] - tickVals[0]) / pTicks;
+    const fmtPrice = input.priceFormat ?? ((v) => formatAxisValue(v, priceStep));
     ctx.strokeStyle = theme.grid;
     ctx.fillStyle = theme.axis;
     ctx.lineWidth = 1;
     ctx.textAlign = "left";
-    for (let i = 0; i <= 5; i++) {
-        const v = lo + (rng * i) / 5;
-        const y = yOf(v);
+    for (let i = 0; i <= pTicks; i++) {
+        const y = pads.top + priceH * (1 - i / pTicks);
         ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(plotW, y);
+        ctx.moveTo(0, crisp(y));
+        ctx.lineTo(plotW, crisp(y));
         ctx.stroke();
-        ctx.fillText(formatValue(v), plotW + 6, y);
+        // local gap (not the average) sets precision — log ticks bunch up at the low end,
+        // and the bottom labels need more decimals than the top ones to stay distinct.
+        const local = input.priceFormat ? 0 : Math.abs((tickVals[i + 1] ?? tickVals[i - 1]) - tickVals[i]) || priceStep;
+        ctx.fillText(input.priceFormat ? fmtPrice(tickVals[i]) : formatAxisValue(tickVals[i], local), plotW + 6, y);
     }
     // time axis (bottom gutter), anchored to the latest candle
     ctx.textAlign = "center";
-    const step = Math.max(1, Math.floor(n / 7));
+    const step = Math.max(1, Math.floor(n / Math.max(1, Math.round(input.timeTicks ?? 7))));
     for (let j = n - 1; j >= 0; j -= step) {
         const x = xOf(j);
         ctx.strokeStyle = theme.grid;
         ctx.beginPath();
-        ctx.moveTo(x, pads.top);
-        ctx.lineTo(x, volBot);
+        ctx.moveTo(crisp(x), pads.top);
+        ctx.lineTo(crisp(x), chartBot);
         ctx.stroke();
         ctx.fillStyle = theme.axis;
-        ctx.fillText(formatTime(vis[j].time, interval), x, H - pads.bottom / 2);
+        ctx.fillText(fmtTime(vis[j].time, interval), x, H - pads.bottom / 2);
     }
-    const bw = Math.max(1, Math.min(cw * 0.7, 14));
-    // volume panel
-    for (let j = 0; j < n; j++) {
-        const c = vis[j];
-        const x = xOf(j);
-        ctx.fillStyle = c.c >= c.o ? theme.volUp : theme.volDown;
-        ctx.fillRect(x - bw / 2, vy(c.vol), bw, volBot - vy(c.vol));
+    const bw = Math.max(1, Math.min(cw * 0.7, input.maxBodyWidth ?? 40));
+    // volume panel (muted bars on a baseline), only when there's a panel to draw
+    if (volH > 0) {
+        const volTop = pads.top + priceH;
+        for (let j = 0; j < n; j++) {
+            const c = vis[j];
+            const x = xOf(j);
+            ctx.fillStyle = c.c >= c.o ? theme.volUp : theme.volDown;
+            ctx.fillRect(x - bw / 2, vy(c.vol), bw, volBot - vy(c.vol));
+        }
+        // faint separator between the price pane and the volume panel
+        ctx.strokeStyle = theme.grid;
+        ctx.beginPath();
+        ctx.moveTo(0, crisp(volTop));
+        ctx.lineTo(plotW, crisp(volTop));
+        ctx.stroke();
+    }
+    // oscillator sub-panes (RSI / MACD), stacked below the volume panel
+    let paneTop = volBot;
+    for (let p = 0; p < oscs.length; p++) {
+        drawPane(ctx, oscs[p], paneHs[p], paneTop, { candles, start, n, xOf, bw, plotW, theme });
+        paneTop += paneHs[p];
     }
     // price series
     if (type === "line") {
+        const priceBot = pads.top + priceH;
+        // soft gradient area fill under the line — the "premium" line-chart look
+        if (n > 1 && ctx.createLinearGradient) {
+            const grad = ctx.createLinearGradient(0, pads.top, 0, priceBot);
+            grad.addColorStop(0, withAlpha(theme.line, 0.22));
+            grad.addColorStop(1, withAlpha(theme.line, 0));
+            ctx.fillStyle = grad;
+            ctx.beginPath();
+            ctx.moveTo(xOf(0), priceBot);
+            for (let j = 0; j < n; j++)
+                ctx.lineTo(xOf(j), yOf(vis[j].c));
+            ctx.lineTo(xOf(n - 1), priceBot);
+            ctx.closePath();
+            ctx.fill();
+        }
         ctx.strokeStyle = theme.line;
-        ctx.lineWidth = 1.5;
+        ctx.lineWidth = 2;
+        ctx.lineJoin = "round";
         ctx.beginPath();
         for (let j = 0; j < n; j++) {
             const x = xOf(j);
@@ -122,11 +261,7 @@ export function draw(input) {
     // supplied (the Chart controller precomputes them on data change), else computed
     // here from the indicator config for pure/standalone callers. Series align to the
     // FULL candle array, so the left edge of the view is correct.
-    const overlays = input.overlays ??
-        (input.indicators ?? []).map((ind, ii) => ({
-            color: ind.color || INDICATOR_PALETTE[ii % INDICATOR_PALETTE.length],
-            values: computeIndicator(candles, ind),
-        }));
+    const overlays = input.overlays ?? resolveOverlays(candles, input.indicators ?? []);
     if (overlays.length) {
         ctx.lineWidth = 1.3;
         for (const ov of overlays) {
@@ -152,22 +287,35 @@ export function draw(input) {
         }
         ctx.lineWidth = 1;
     }
+    // user drawings (trendlines / horizontal lines), clipped to the price pane
+    const drawings = input.drawings ?? [];
+    if (drawings.length || input.drawPreview) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, pads.top, plotW, priceH);
+        ctx.clip();
+        for (const d of drawings)
+            drawDrawing(ctx, d, xOfTime, yOf, plotW, theme, d.id === input.selectedDrawing);
+        if (input.drawPreview)
+            drawDrawing(ctx, input.drawPreview, xOfTime, yOf, plotW, theme, false);
+        ctx.restore();
+    }
     // last-price line + tag
     const last = vis[n - 1];
     const ly = yOf(last.c);
     const lc = last.c >= last.o ? theme.up : theme.down;
     ctx.strokeStyle = lc;
-    ctx.setLineDash([2, 2]);
+    ctx.setLineDash([3, 3]);
     ctx.beginPath();
-    ctx.moveTo(0, ly);
-    ctx.lineTo(plotW, ly);
+    ctx.moveTo(0, crisp(ly));
+    ctx.lineTo(plotW, crisp(ly));
     ctx.stroke();
     ctx.setLineDash([]);
     ctx.fillStyle = lc;
     ctx.fillRect(plotW, ly - 8, pads.right, 16);
     ctx.fillStyle = theme.tagText;
     ctx.textAlign = "left";
-    ctx.fillText(formatValue(last.c), plotW + 6, ly);
+    ctx.fillText(fmtPrice(last.c), plotW + 6, ly);
     // crosshair + axis labels
     let active = last;
     if (hover && hover.x < plotW && hover.y > 0 && hover.y < H - pads.bottom) {
@@ -178,20 +326,20 @@ export function draw(input) {
         ctx.setLineDash([3, 3]);
         ctx.beginPath();
         ctx.moveTo(cx, pads.top);
-        ctx.lineTo(cx, volBot);
+        ctx.lineTo(cx, chartBot);
         ctx.moveTo(0, hover.y);
         ctx.lineTo(plotW, hover.y);
         ctx.stroke();
         ctx.setLineDash([]);
         if (hover.y < pads.top + priceH) {
-            const pv = lo + rng * (1 - (hover.y - pads.top) / priceH);
+            const pv = priceOfY(hover.y);
             ctx.fillStyle = theme.axisTagBg;
             ctx.fillRect(plotW, hover.y - 8, pads.right, 16);
             ctx.fillStyle = theme.axisTagText;
             ctx.textAlign = "left";
-            ctx.fillText(formatValue(pv), plotW + 6, hover.y);
+            ctx.fillText(fmtPrice(pv), plotW + 6, hover.y);
         }
-        const tl = formatTime(active.time, interval);
+        const tl = fmtTime(active.time, interval);
         const tw = ctx.measureText(tl).width + 12;
         ctx.fillStyle = theme.axisTagBg;
         ctx.fillRect(cx - tw / 2, H - pads.bottom, tw, pads.bottom);
@@ -201,3 +349,142 @@ export function draw(input) {
     }
     return active;
 }
+/** Render one drawing (and its selection handles) using the current frame's projection. */
+function drawDrawing(ctx, d, xOfTime, yOfPrice, plotW, theme, selected) {
+    const color = d.color ?? theme.line;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = selected ? 2.5 : 1.5;
+    const pts = [];
+    ctx.beginPath();
+    if (d.type === "hline") {
+        const y = yOfPrice(d.a.price);
+        ctx.moveTo(0, y);
+        ctx.lineTo(plotW, y);
+        pts.push({ x: plotW / 2, y });
+    }
+    else if (d.b) {
+        const ax = xOfTime(d.a.time);
+        const ay = yOfPrice(d.a.price);
+        const bx = xOfTime(d.b.time);
+        const by = yOfPrice(d.b.price);
+        ctx.moveTo(ax, ay);
+        ctx.lineTo(bx, by);
+        pts.push({ x: ax, y: ay }, { x: bx, y: by });
+    }
+    ctx.stroke();
+    if (selected) {
+        ctx.fillStyle = color;
+        for (const p of pts)
+            ctx.fillRect(p.x - 3, p.y - 3, 6, 6);
+    }
+    ctx.lineWidth = 1;
+}
+/** Default oscillator colors. */
+const OSC_COLORS = { rsi: "#ab47bc", macdLine: "#2962ff", macdSignal: "#ff9800" };
+/** Last non-null value of a series (for the pane's inline readout). */
+function lastDefined(s) {
+    for (let i = s.length - 1; i >= 0; i--)
+        if (s[i] != null)
+            return s[i];
+    return null;
+}
+/** Stroke a value-series across the visible window, lifting the pen across null gaps. */
+function strokeSeries(ctx, series, env, yOf, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.3;
+    ctx.beginPath();
+    let pen = false;
+    for (let j = 0; j < env.n; j++) {
+        const v = series[env.start + j];
+        if (v == null) {
+            pen = false;
+            continue;
+        }
+        const x = env.xOf(j);
+        const y = yOf(v);
+        if (pen)
+            ctx.lineTo(x, y);
+        else {
+            ctx.moveTo(x, y);
+            pen = true;
+        }
+    }
+    ctx.stroke();
+    ctx.lineWidth = 1;
+}
+/**
+ * Render one oscillator sub-pane (RSI band or MACD) in the horizontal strip [top, top+paneH].
+ * Closes are read from the FULL candle array so values at the left edge of the view are correct.
+ */
+function drawPane(ctx, osc, paneH, top, env) {
+    const { candles, start, n, xOf, bw, plotW, theme } = env;
+    const closes = candles.map((c) => c.c);
+    const padY = 8;
+    const innerTop = top + padY;
+    const innerH = Math.max(1, paneH - padY * 2);
+    // separator rule at the pane's top edge
+    ctx.strokeStyle = theme.grid;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, top);
+    ctx.lineTo(plotW, top);
+    ctx.stroke();
+    ctx.textAlign = "left";
+    if (osc.type === "rsi") {
+        const period = osc.period ?? 14;
+        const series = rsi(closes, period);
+        const yOf = (v) => innerTop + innerH * (1 - v / 100);
+        // 70 / 30 guide rails
+        ctx.setLineDash([2, 3]);
+        for (const lvl of [70, 30]) {
+            const y = yOf(lvl);
+            ctx.strokeStyle = theme.grid;
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(plotW, y);
+            ctx.stroke();
+            ctx.fillStyle = theme.axis;
+            ctx.fillText(String(lvl), plotW + 6, y);
+        }
+        ctx.setLineDash([]);
+        strokeSeries(ctx, series, env, yOf, osc.color ?? OSC_COLORS.rsi);
+        const lv = lastDefined(series);
+        ctx.fillStyle = theme.axis;
+        ctx.fillText(`RSI ${period}${lv != null ? "  " + lv.toFixed(1) : ""}`, 6, top + padY);
+        return;
+    }
+    // MACD: histogram + macd line + signal line, symmetric around zero
+    const fast = osc.fast ?? 12;
+    const slow = osc.slow ?? 26;
+    const signal = osc.signal ?? 9;
+    const { macd: line, signal: sig, hist } = macd(closes, fast, slow, signal);
+    let absMax = 0;
+    for (let j = 0; j < n; j++) {
+        for (const s of [line, sig, hist]) {
+            const v = s[start + j];
+            if (v != null)
+                absMax = Math.max(absMax, Math.abs(v));
+        }
+    }
+    absMax = absMax || 1;
+    const yOf = (v) => innerTop + innerH * (1 - (v + absMax) / (2 * absMax));
+    const zy = yOf(0);
+    ctx.strokeStyle = theme.grid;
+    ctx.beginPath();
+    ctx.moveTo(0, zy);
+    ctx.lineTo(plotW, zy);
+    ctx.stroke();
+    for (let j = 0; j < n; j++) {
+        const v = hist[start + j];
+        if (v == null)
+            continue;
+        const x = xOf(j);
+        const y = yOf(v);
+        ctx.fillStyle = v >= 0 ? theme.volUp : theme.volDown;
+        ctx.fillRect(x - bw / 2, Math.min(y, zy), bw, Math.max(1, Math.abs(y - zy)));
+    }
+    strokeSeries(ctx, line, env, yOf, osc.color ?? OSC_COLORS.macdLine);
+    strokeSeries(ctx, sig, env, yOf, OSC_COLORS.macdSignal);
+    ctx.fillStyle = theme.axis;
+    ctx.fillText(`MACD ${fast} ${slow} ${signal}`, 6, top + padY);
+}

package/dist/core/theme.d.ts

@@ -1,3 +1,7 @@
 import type { ChartTheme } from "./types";
-/** Default dark theme (TradingView-ish palette). */
+/** Default dark theme — a refined, modern crypto-terminal palette. */
 export declare const DEFAULT_THEME: ChartTheme;
+/** Light theme preset (same hues on a clean white plot). Pass to `theme` / `setTheme`. */
+export declare const LIGHT_THEME: ChartTheme;
+/** Built-in theme presets, addressable by name. */
+export declare const THEME_PRESETS: Record<"dark" | "light", ChartTheme>;

package/dist/core/theme.js

@@ -1,14 +1,35 @@
-/** Default dark theme (TradingView-ish palette). */
+/** Default dark theme — a refined, modern crypto-terminal palette. */
 export const DEFAULT_THEME = {
-    up: "#26a69a",
-    down: "#ef5350",
-    line: "#2962ff",
-    grid: "#1c2030",
-    axis: "#787b86",
-    crosshair: "#9598a1",
-    volUp: "rgba(38,166,154,.5)",
-    volDown: "rgba(239,83,80,.5)",
-    tagText: "#0a0a0a",
-    axisTagBg: "#2a2e39",
-    axisTagText: "#d1d4dc",
+    up: "#2ebd85",
+    down: "#f6465d",
+    line: "#5b8def",
+    grid: "#1a2030",
+    axis: "#8b919e",
+    crosshair: "#b3b9c4",
+    volUp: "rgba(46,189,133,.28)",
+    volDown: "rgba(246,70,93,.28)",
+    tagText: "#06080c",
+    axisTagBg: "#2b3242",
+    axisTagText: "#eaedf2",
+    background: "#0b0e14",
+};
+/** Light theme preset (same hues on a clean white plot). Pass to `theme` / `setTheme`. */
+export const LIGHT_THEME = {
+    up: "#089981",
+    down: "#f23645",
+    line: "#3b6fe0",
+    grid: "#eceff4",
+    axis: "#6b7280",
+    crosshair: "#4b5563",
+    volUp: "rgba(8,153,129,.22)",
+    volDown: "rgba(242,54,69,.22)",
+    tagText: "#ffffff",
+    axisTagBg: "#1f2733",
+    axisTagText: "#ffffff",
+    background: "#ffffff",
+};
+/** Built-in theme presets, addressable by name. */
+export const THEME_PRESETS = {
+    dark: DEFAULT_THEME,
+    light: LIGHT_THEME,
 };