liveline 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Liveline.tsx
-import { useRef as useRef2, useState, useLayoutEffect, useMemo } from "react";
+import { useRef as useRef2, useState, useLayoutEffect, useMemo, useCallback as useCallback2 } from "react";
 
 // src/theme.ts
 function parseColorRgb(color) {
@@ -61,6 +61,33 @@ function resolveTheme(color, mode) {
     badgeFont: '500 11px "SF Mono", Menlo, monospace'
   };
 }
+var SERIES_COLORS = [
+  "#3b82f6",
+  // blue
+  "#ef4444",
+  // red
+  "#22c55e",
+  // green
+  "#f59e0b",
+  // amber
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#06b6d4",
+  // cyan
+  "#f97316"
+  // orange
+];
+function resolveSeriesPalettes(series, mode) {
+  const map = /* @__PURE__ */ new Map();
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    const color = s.color || SERIES_COLORS[i % SERIES_COLORS.length];
+    map.set(s.id, resolveTheme(color, mode));
+  }
+  return map;
+}
 
 // src/useLivelineEngine.ts
 import { useRef, useEffect, useCallback } from "react";
@@ -486,6 +513,33 @@ function drawDot(ctx, x, y, palette, pulse = true, scrubAmount = 0, now_ms = per
   }
   ctx.fill();
 }
+function drawMultiDot(ctx, x, y, color, pulse = true, now_ms = performance.now(), radius = 3) {
+  const baseAlpha = ctx.globalAlpha;
+  if (pulse) {
+    const t = now_ms % PULSE_INTERVAL / PULSE_DURATION;
+    if (t < 1) {
+      const ringRadius = 9 + t * 10;
+      const pulseAlpha = 0.3 * (1 - t);
+      ctx.beginPath();
+      ctx.arc(x, y, ringRadius, 0, Math.PI * 2);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1.5;
+      ctx.globalAlpha = baseAlpha * pulseAlpha;
+      ctx.stroke();
+    }
+  }
+  ctx.globalAlpha = baseAlpha;
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+function drawSimpleDot(ctx, x, y, color, radius = 3) {
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
 function drawArrows(ctx, x, y, momentum, palette, arrows, dt, now_ms = performance.now()) {
   const baseAlpha = ctx.globalAlpha;
   const upTarget = momentum === "up" ? 1 : 0;
@@ -584,6 +638,90 @@ function drawCrosshair(ctx, layout, palette, hoverX, hoverValue, hoverTime, form
   ctx.fillText(separator + timeText, tx + valueW, ty);
   ctx.restore();
 }
+function drawMultiCrosshair(ctx, layout, palette, hoverX, hoverTime, entries, formatValue, formatTime, scrubOpacity, tooltipY, tooltipOutline, liveDotX) {
+  if (scrubOpacity < 0.01 || entries.length === 0) return;
+  const { h, pad, toY } = layout;
+  ctx.save();
+  ctx.globalAlpha = scrubOpacity * 0.5;
+  ctx.strokeStyle = palette.crosshairLine;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(hoverX, pad.top);
+  ctx.lineTo(hoverX, h - pad.bottom);
+  ctx.stroke();
+  ctx.restore();
+  const dotRadius = 4 * Math.min(scrubOpacity * 3, 1);
+  if (dotRadius > 0.5) {
+    ctx.globalAlpha = 1;
+    for (const entry of entries) {
+      const y = toY(entry.value);
+      ctx.beginPath();
+      ctx.arc(hoverX, y, dotRadius, 0, Math.PI * 2);
+      ctx.fillStyle = entry.color;
+      ctx.fill();
+    }
+  }
+  if (scrubOpacity < 0.1 || layout.w < 300) return;
+  ctx.save();
+  ctx.globalAlpha = scrubOpacity;
+  ctx.font = '400 13px "SF Mono", Menlo, monospace';
+  ctx.textAlign = "left";
+  const timeText = formatTime(hoverTime);
+  const sep = "  \xB7  ";
+  const dotInline = " ";
+  const segments = [
+    { text: timeText, color: palette.gridLabel }
+  ];
+  for (const e of entries) {
+    segments.push({ text: sep, color: palette.gridLabel });
+    segments.push({ text: dotInline, color: e.color, isDot: true });
+    const label = e.label ? `${e.label} ` : "";
+    if (label) segments.push({ text: label, color: palette.gridLabel });
+    segments.push({ text: formatValue(e.value), color: palette.tooltipText });
+  }
+  let totalW = 0;
+  const segWidths = [];
+  for (const seg of segments) {
+    const w = seg.isDot ? 12 : ctx.measureText(seg.text).width;
+    segWidths.push(w);
+    totalW += w;
+  }
+  let tx = hoverX - totalW / 2;
+  const minX = pad.left + 4;
+  const dotRightEdge = liveDotX != null ? liveDotX + 7 : layout.w - pad.right;
+  const maxX = dotRightEdge - totalW;
+  if (tx < minX) tx = minX;
+  if (tx > maxX) tx = maxX;
+  const ty = pad.top + (tooltipY ?? 14) + 10;
+  if (tooltipOutline !== false) {
+    ctx.strokeStyle = palette.tooltipBg;
+    ctx.lineWidth = 3;
+    ctx.lineJoin = "round";
+    let ox2 = tx;
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      if (!seg.isDot) {
+        ctx.strokeText(seg.text, ox2, ty);
+      }
+      ox2 += segWidths[i];
+    }
+  }
+  let ox = tx;
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    if (seg.isDot) {
+      ctx.beginPath();
+      ctx.arc(ox + 4, ty - 4, 3.5, 0, Math.PI * 2);
+      ctx.fillStyle = seg.color;
+      ctx.fill();
+    } else {
+      ctx.fillStyle = seg.color;
+      ctx.fillText(seg.text, ox, ty);
+    }
+    ox += segWidths[i];
+  }
+  ctx.restore();
+}
 
 // src/draw/referenceLine.ts
 function drawReferenceLine(ctx, layout, palette, ref) {
@@ -1430,6 +1568,124 @@ function drawFrame(ctx, layout, palette, opts) {
     ctx.restore();
   }
 }
+function drawMultiFrame(ctx, layout, opts) {
+  const palette = opts.primaryPalette;
+  const reveal = opts.chartReveal;
+  const revealRamp = (start, end) => {
+    const t = Math.max(0, Math.min(1, (reveal - start) / (end - start)));
+    return t * t * (3 - 2 * t);
+  };
+  if (opts.referenceLine && reveal > 0.01) {
+    ctx.save();
+    if (reveal < 1) ctx.globalAlpha = reveal;
+    drawReferenceLine(ctx, layout, palette, opts.referenceLine);
+    ctx.restore();
+  }
+  if (opts.showGrid) {
+    const gridAlpha = reveal < 1 ? revealRamp(0.15, 0.7) : 1;
+    if (gridAlpha > 0.01) {
+      ctx.save();
+      if (gridAlpha < 1) ctx.globalAlpha = gridAlpha;
+      drawGrid(ctx, layout, palette, opts.formatValue, opts.gridState, opts.dt);
+      ctx.restore();
+    }
+  }
+  const scrubX = opts.scrubAmount > 0.05 ? opts.hoverX : null;
+  const allPts = [];
+  for (let si = 0; si < opts.series.length; si++) {
+    const s = opts.series[si];
+    const seriesAlpha = s.alpha ?? 1;
+    const secondaryFade = si > 0 && reveal < 1 ? Math.min(1, reveal * 2) : 1;
+    const combinedAlpha = secondaryFade * seriesAlpha;
+    if (combinedAlpha < 0.01) continue;
+    ctx.save();
+    if (combinedAlpha < 1) ctx.globalAlpha = combinedAlpha;
+    const pts = drawLine(
+      ctx,
+      layout,
+      s.palette,
+      s.visible,
+      s.smoothValue,
+      opts.now,
+      false,
+      // no fill
+      scrubX,
+      opts.scrubAmount,
+      reveal,
+      opts.now_ms
+    );
+    ctx.restore();
+    if (pts && pts.length > 0) {
+      allPts.push({ pts, palette: s.palette, label: s.label, alpha: seriesAlpha });
+    }
+  }
+  {
+    const timeAlpha = reveal < 1 ? revealRamp(0.15, 0.7) : 1;
+    if (timeAlpha > 0.01) {
+      ctx.save();
+      if (timeAlpha < 1) ctx.globalAlpha = timeAlpha;
+      drawTimeAxis(ctx, layout, palette, opts.windowSecs, opts.targetWindowSecs, opts.formatTime, opts.timeAxisState, opts.dt);
+      ctx.restore();
+    }
+  }
+  if (reveal > 0.3 && allPts.length > 0) {
+    const dotAlpha = (reveal - 0.3) / 0.7;
+    const showPulse = opts.showPulse && reveal > 0.6 && opts.pauseProgress < 0.5;
+    for (const entry of allPts) {
+      if (entry.alpha < 0.01) continue;
+      const lastPt = entry.pts[entry.pts.length - 1];
+      ctx.save();
+      ctx.globalAlpha = dotAlpha * entry.alpha;
+      if (showPulse && entry.alpha > 0.5) {
+        drawMultiDot(ctx, lastPt[0], lastPt[1], entry.palette.line, true, opts.now_ms, 3);
+      } else {
+        drawSimpleDot(ctx, lastPt[0], lastPt[1], entry.palette.line, 3);
+      }
+      if (entry.label) {
+        ctx.font = '600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
+        ctx.textAlign = "left";
+        ctx.fillStyle = entry.palette.line;
+        ctx.fillText(entry.label, lastPt[0] + 6, lastPt[1] + 3.5);
+      }
+      ctx.restore();
+    }
+  }
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-out";
+  const fadeGrad = ctx.createLinearGradient(layout.pad.left, 0, layout.pad.left + FADE_EDGE_WIDTH, 0);
+  fadeGrad.addColorStop(0, "rgba(0, 0, 0, 1)");
+  fadeGrad.addColorStop(1, "rgba(0, 0, 0, 0)");
+  ctx.fillStyle = fadeGrad;
+  ctx.fillRect(0, 0, layout.pad.left + FADE_EDGE_WIDTH, layout.h);
+  ctx.restore();
+  if (opts.hoverX !== null && opts.hoverTime !== null && opts.hoverEntries.length > 0 && allPts.length > 0 && opts.scrubAmount > 0.01) {
+    let maxLiveDotX = 0;
+    for (const entry of allPts) {
+      if (entry.alpha < 0.01) continue;
+      const lastX = entry.pts[entry.pts.length - 1][0];
+      if (lastX > maxLiveDotX) maxLiveDotX = lastX;
+    }
+    const distToLive = maxLiveDotX - opts.hoverX;
+    const fadeStart = Math.min(80, layout.chartW * 0.3);
+    const scrubOpacity = distToLive < CROSSHAIR_FADE_MIN_PX ? 0 : distToLive >= fadeStart ? opts.scrubAmount : (distToLive - CROSSHAIR_FADE_MIN_PX) / (fadeStart - CROSSHAIR_FADE_MIN_PX) * opts.scrubAmount;
+    if (scrubOpacity > 0.01) {
+      drawMultiCrosshair(
+        ctx,
+        layout,
+        palette,
+        opts.hoverX,
+        opts.hoverTime,
+        opts.hoverEntries,
+        opts.formatValue,
+        opts.formatTime,
+        scrubOpacity,
+        opts.tooltipY,
+        opts.tooltipOutline,
+        maxLiveDotX
+      );
+    }
+  }
+}
 function drawCandleFrame(ctx, layout, palette, opts) {
   const { w, h, pad, chartW, chartH } = layout;
   const reveal = opts.chartReveal;
@@ -1702,6 +1958,7 @@ var BADGE_Y_LERP_TRANSITIONING = 0.5;
 var MOMENTUM_COLOR_LERP = 0.12;
 var WINDOW_TRANSITION_MS = 750;
 var WINDOW_BUFFER = 0.05;
+var WINDOW_BUFFER_NO_BADGE = 0.015;
 var VALUE_SNAP_THRESHOLD = 1e-3;
 var ADAPTIVE_SPEED_BOOST = 0.2;
 var MOMENTUM_GREEN = [34, 197, 94];
@@ -1712,6 +1969,7 @@ var PAUSE_PROGRESS_SPEED = 0.12;
 var PAUSE_CATCHUP_SPEED = 0.08;
 var PAUSE_CATCHUP_SPEED_FAST = 0.22;
 var LOADING_ALPHA_SPEED = 0.14;
+var SERIES_TOGGLE_SPEED = 0.1;
 var CANDLE_LERP_SPEED = 0.25;
 var CANDLE_WIDTH_TRANS_MS = 300;
 var LINE_MORPH_MS = 500;
@@ -1722,7 +1980,7 @@ var LINE_ADAPTIVE_BOOST = 0.2;
 var LINE_SNAP_THRESHOLD = 1e-3;
 var RANGE_LERP_SPEED = 0.15;
 var RANGE_ADAPTIVE_BOOST = 0.2;
-var CANDLE_BUFFER = 0.05;
+var CANDLE_BUFFER_NO_BADGE = 0.015;
 function computeAdaptiveSpeed(value, displayValue, displayMin, displayMax, lerpSpeed, noMotion) {
   const valGap = Math.abs(value - displayValue);
   const prevRange = displayMax - displayMin || 1;
@@ -2035,6 +2293,8 @@ function useLivelineEngine(canvasRef, containerRef, config) {
   const configRef = useRef(config);
   configRef.current = config;
   const displayValueRef = useRef(config.value);
+  const displayValuesRef = useRef(/* @__PURE__ */ new Map());
+  const seriesAlphaRef = useRef(/* @__PURE__ */ new Map());
   const displayMinRef = useRef(0);
   const displayMaxRef = useRef(0);
   const targetMinRef = useRef(0);
@@ -2067,12 +2327,15 @@ function useLivelineEngine(canvasRef, containerRef, config) {
   const hoverXRef = useRef(null);
   const scrubAmountRef = useRef(0);
   const lastHoverRef = useRef(null);
+  const lastHoverEntriesRef = useRef([]);
   const chartRevealRef = useRef(0);
   const pauseProgressRef = useRef(0);
   const timeDebtRef = useRef(0);
   const lastDataRef = useRef([]);
+  const lastMultiSeriesRef = useRef([]);
   const frozenNowRef = useRef(0);
   const pausedDataRef = useRef(null);
+  const pausedMultiDataRef = useRef(null);
   const loadingAlphaRef = useRef(config.loading ? 1 : 0);
   const displayCandleRef = useRef(null);
   const liveBirthAlphaRef = useRef(1);
@@ -2252,6 +2515,17 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         pausedLineDataRef.current = null;
         pausedLineValueRef.current = null;
       }
+    } else if (cfg.isMultiSeries && cfg.multiSeries) {
+      if (cfg.paused && pausedMultiDataRef.current === null) {
+        const snap = /* @__PURE__ */ new Map();
+        for (const s of cfg.multiSeries) {
+          if (s.data.length >= 2) snap.set(s.id, { data: s.data.slice(), value: s.value });
+        }
+        if (snap.size > 0) pausedMultiDataRef.current = snap;
+      }
+      if (!cfg.paused) {
+        pausedMultiDataRef.current = null;
+      }
     } else {
       if (cfg.paused && pausedDataRef.current === null && cfg.data.length >= 2) {
         pausedDataRef.current = cfg.data.slice();
@@ -2262,7 +2536,8 @@ function useLivelineEngine(canvasRef, containerRef, config) {
     }
     const points = isCandle ? [] : pausedDataRef.current ?? cfg.data;
     const effectiveCandles = isCandle ? pausedCandlesRef.current ?? (cfg.candles ?? []) : [];
-    const hasData = isCandle ? effectiveCandles.length >= 2 : points.length >= 2;
+    const hasMultiData = cfg.isMultiSeries && cfg.multiSeries ? cfg.multiSeries.some((s) => s.data.length >= 2) : false;
+    const hasData = isCandle ? effectiveCandles.length >= 2 : hasMultiData || points.length >= 2;
     const pad = cfg.padding;
     const chartH = h - pad.top - pad.bottom;
     const pauseTarget = cfg.paused ? 1 : 0;
@@ -2298,11 +2573,23 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       rangeInitedRef.current = false;
     }
     let useStash;
+    let useMultiStash = false;
     if (isCandle) {
       useStash = !hasData && chartReveal > 5e-3 && lastCandlesRef.current.length > 0;
     } else {
-      useStash = !hasData && chartReveal > 5e-3 && lastDataRef.current.length >= 2;
-      if (hasData) lastDataRef.current = points;
+      useMultiStash = !hasData && chartReveal > 5e-3 && lastMultiSeriesRef.current.length > 0;
+      if (hasMultiData && cfg.multiSeries) {
+        lastMultiSeriesRef.current = cfg.multiSeries.map((s) => ({
+          id: s.id,
+          data: s.data.slice(),
+          value: s.value,
+          palette: s.palette,
+          label: s.label
+        }));
+      }
+      if (hasData && !cfg.isMultiSeries) lastMultiSeriesRef.current = [];
+      useStash = !useMultiStash && !hasData && chartReveal > 5e-3 && lastDataRef.current.length >= 2;
+      if (hasData && !cfg.isMultiSeries) lastDataRef.current = points;
     }
     if (isCandle) {
       const lmt = lineModeTransRef.current;
@@ -2324,8 +2611,8 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         lineModeProgRef.current = lmt.to;
       }
     }
-    if (!hasData && !useStash) {
-      const loadingColor = isCandle ? cfg.palette.gridLabel : void 0;
+    if (!hasData && !useStash && !useMultiStash) {
+      const loadingColor = isCandle || cfg.isMultiSeries || lastMultiSeriesRef.current.length > 0 ? cfg.palette.gridLabel : void 0;
       if (loadingAlpha > 0.01) {
         drawLoading(ctx, w, h, pad, cfg.palette, now_ms, loadingAlpha, loadingColor);
       }
@@ -2345,6 +2632,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       return;
     }
     if (isCandle) {
+      const candleBuffer = CANDLE_BUFFER_NO_BADGE;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = hasData || chartReveal < 5e-3 ? Date.now() / 1e3 - timeDebtRef.current : frozenNowRef.current;
       const rawLive = pausedCandlesRef.current ? pausedLiveRef.current ?? void 0 : cfg.liveCandle;
@@ -2387,7 +2675,7 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         cwt.rangeFromMin = displayMinRef.current;
         cwt.rangeFromMax = displayMaxRef.current;
         const curWindow = displayWindowRef.current;
-        const re = now + curWindow * CANDLE_BUFFER;
+        const re = now + curWindow * candleBuffer;
         const le = re - curWindow;
         const targetVis = [];
         for (const c of effectiveCandles) {
@@ -2438,13 +2726,13 @@ function useLivelineEngine(canvasRef, containerRef, config) {
         effectiveCandles,
         rawLive,
         candleWidthSecs,
-        CANDLE_BUFFER
+        candleBuffer
       );
       displayWindowRef.current = windowResult.windowSecs;
       const windowSecs = windowResult.windowSecs;
       const windowTransProgress = windowResult.windowTransProgress;
       const isWindowTransitioning = transition.startMs > 0;
-      const rightEdge = now + windowSecs * CANDLE_BUFFER;
+      const rightEdge = now + windowSecs * candleBuffer;
       const leftEdge = rightEdge - windowSecs;
       let smoothLive;
       if (rawLive) {
@@ -2748,6 +3036,250 @@ function useLivelineEngine(canvasRef, containerRef, config) {
           badgeRef.current.container.style.display = "none";
         }
       }
+    } else if (cfg.isMultiSeries && cfg.multiSeries && cfg.multiSeries.length > 0 || useMultiStash) {
+      const effectiveMultiSeries = useMultiStash ? lastMultiSeriesRef.current : cfg.multiSeries;
+      let labelReserve = 0;
+      if (effectiveMultiSeries.some((s) => s.label)) {
+        ctx.font = '600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
+        let maxLabelW = 0;
+        for (const s of effectiveMultiSeries) {
+          if (s.label) {
+            const lw = ctx.measureText(s.label).width;
+            if (lw > maxLabelW) maxLabelW = lw;
+          }
+        }
+        labelReserve = Math.max(0, maxLabelW - 2) * chartReveal;
+      }
+      const chartW = w - pad.left - pad.right - labelReserve;
+      const buffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
+      if (!useMultiStash) {
+        const currentIds = new Set(effectiveMultiSeries.map((s) => s.id));
+        for (const key of displayValuesRef.current.keys()) {
+          if (!currentIds.has(key)) displayValuesRef.current.delete(key);
+        }
+      }
+      const firstSeries = effectiveMultiSeries[0];
+      const transition = windowTransitionRef.current;
+      if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
+      const now = useMultiStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
+      const smoothValues = /* @__PURE__ */ new Map();
+      for (const s of effectiveMultiSeries) {
+        let dv = displayValuesRef.current.get(s.id);
+        if (dv === void 0) dv = s.value;
+        if (!useMultiStash) {
+          const adaptiveSpeed2 = computeAdaptiveSpeed(
+            s.value,
+            dv,
+            displayMinRef.current,
+            displayMaxRef.current,
+            cfg.lerpSpeed,
+            noMotion
+          );
+          dv = lerp(dv, s.value, adaptiveSpeed2, pausedDt);
+          const prevRange = displayMaxRef.current - displayMinRef.current || 1;
+          if (Math.abs(dv - s.value) < prevRange * VALUE_SNAP_THRESHOLD) dv = s.value;
+          displayValuesRef.current.set(s.id, dv);
+        }
+        smoothValues.set(s.id, dv);
+      }
+      const hiddenIds = cfg.hiddenSeriesIds;
+      const seriesAlphas = seriesAlphaRef.current;
+      for (const s of effectiveMultiSeries) {
+        let alpha = seriesAlphas.get(s.id) ?? 1;
+        const target = hiddenIds?.has(s.id) ? 0 : 1;
+        alpha = noMotion ? target : lerp(alpha, target, SERIES_TOGGLE_SPEED, pausedDt);
+        if (alpha < 0.01) alpha = 0;
+        if (alpha > 0.99) alpha = 1;
+        seriesAlphas.set(s.id, alpha);
+      }
+      const firstData = pausedMultiDataRef.current?.get(firstSeries.id)?.data ?? firstSeries.data;
+      const windowResult = updateWindowTransition(
+        cfg,
+        transition,
+        displayWindowRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        noMotion,
+        now_ms,
+        now,
+        firstData,
+        smoothValues.get(firstSeries.id) ?? firstSeries.value,
+        buffer
+      );
+      if (transition.startMs > 0 && effectiveMultiSeries.length > 1) {
+        const targetRightEdge = now + cfg.windowSecs * buffer;
+        const targetLeftEdge = targetRightEdge - cfg.windowSecs;
+        let unionMin = Infinity;
+        let unionMax = -Infinity;
+        for (const s of effectiveMultiSeries) {
+          const sData = pausedMultiDataRef.current?.get(s.id)?.data ?? s.data;
+          const sv = smoothValues.get(s.id) ?? s.value;
+          const targetVisible = [];
+          for (const p of sData) {
+            if (p.time >= targetLeftEdge - 2 && p.time <= targetRightEdge) targetVisible.push(p);
+          }
+          if (targetVisible.length > 0) {
+            const range = computeRange(targetVisible, sv, cfg.referenceLine?.value, cfg.exaggerate);
+            if (range.min < unionMin) unionMin = range.min;
+            if (range.max > unionMax) unionMax = range.max;
+          }
+        }
+        if (isFinite(unionMin) && isFinite(unionMax)) {
+          transition.rangeToMin = unionMin;
+          transition.rangeToMax = unionMax;
+        }
+      }
+      displayWindowRef.current = windowResult.windowSecs;
+      const windowSecs = windowResult.windowSecs;
+      const windowTransProgress = windowResult.windowTransProgress;
+      const isWindowTransitioning = transition.startMs > 0;
+      const rightEdge = now + windowSecs * buffer;
+      const leftEdge = rightEdge - windowSecs;
+      const filterRight = rightEdge - (rightEdge - now) * pauseProgress;
+      const seriesEntries = [];
+      let globalMin = Infinity;
+      let globalMax = -Infinity;
+      for (const s of effectiveMultiSeries) {
+        const snap = pausedMultiDataRef.current?.get(s.id);
+        const seriesData = snap?.data ?? s.data;
+        const visible = [];
+        for (const p of seriesData) {
+          if (p.time >= leftEdge - 2 && p.time <= filterRight) visible.push(p);
+        }
+        const sv = smoothValues.get(s.id) ?? s.value;
+        const alpha = seriesAlphas.get(s.id) ?? 1;
+        if (visible.length >= 2) {
+          if (alpha > 0.01) {
+            const range = computeRange(visible, sv, cfg.referenceLine?.value, cfg.exaggerate);
+            if (range.min < globalMin) globalMin = range.min;
+            if (range.max > globalMax) globalMax = range.max;
+          }
+          seriesEntries.push({ visible, smoothValue: sv, palette: s.palette, label: s.label, alpha });
+        }
+      }
+      if (seriesEntries.length === 0) {
+        if (loadingAlpha > 0.01) {
+          drawLoading(ctx, w, h, pad, cfg.palette, now_ms, loadingAlpha, cfg.palette.gridLabel);
+        }
+        if (1 - loadingAlpha > 0.01) {
+          drawEmpty(ctx, w, h, pad, cfg.palette, 1 - loadingAlpha, now_ms, false, cfg.emptyText);
+        }
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-out";
+        const fadeGrad = ctx.createLinearGradient(pad.left, 0, pad.left + FADE_EDGE_WIDTH, 0);
+        fadeGrad.addColorStop(0, "rgba(0, 0, 0, 1)");
+        fadeGrad.addColorStop(1, "rgba(0, 0, 0, 0)");
+        ctx.fillStyle = fadeGrad;
+        ctx.fillRect(0, 0, pad.left + FADE_EDGE_WIDTH, h);
+        ctx.restore();
+        if (badgeRef.current) badgeRef.current.container.style.display = "none";
+        rafRef.current = requestAnimationFrame(draw);
+        return;
+      }
+      const computedRange = { min: isFinite(globalMin) ? globalMin : 0, max: isFinite(globalMax) ? globalMax : 1 };
+      const adaptiveSpeed = cfg.lerpSpeed + ADAPTIVE_SPEED_BOOST * 0.5;
+      const rangeResult = updateRange(
+        computedRange,
+        rangeInitedRef.current,
+        targetMinRef.current,
+        targetMaxRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        isWindowTransitioning,
+        windowTransProgress,
+        transition,
+        adaptiveSpeed,
+        chartH,
+        pausedDt
+      );
+      rangeInitedRef.current = rangeResult.rangeInited;
+      targetMinRef.current = rangeResult.targetMin;
+      targetMaxRef.current = rangeResult.targetMax;
+      displayMinRef.current = rangeResult.displayMin;
+      displayMaxRef.current = rangeResult.displayMax;
+      const { minVal, maxVal, valRange } = rangeResult;
+      const layout = {
+        w,
+        h,
+        pad,
+        chartW,
+        chartH,
+        leftEdge,
+        rightEdge,
+        minVal,
+        maxVal,
+        valRange,
+        toX: (t) => pad.left + (t - leftEdge) / (rightEdge - leftEdge) * chartW,
+        toY: (v) => pad.top + (1 - (v - minVal) / valRange) * chartH
+      };
+      const hoverPx = hoverXRef.current;
+      let drawHoverX = null;
+      let drawHoverTime = null;
+      let isActiveHover = false;
+      let hoverEntries = [];
+      if (hoverPx !== null && hoverPx >= pad.left && hoverPx <= w - pad.right) {
+        const maxHoverX = layout.toX(now);
+        const clampedX = Math.min(hoverPx, maxHoverX);
+        const t = leftEdge + (clampedX - pad.left) / chartW * (rightEdge - leftEdge);
+        drawHoverX = clampedX;
+        drawHoverTime = t;
+        isActiveHover = true;
+        for (const entry of seriesEntries) {
+          if ((entry.alpha ?? 1) < 0.5) continue;
+          const v = interpolateAtTime(entry.visible, t);
+          if (v !== null) {
+            hoverEntries.push({ color: entry.palette.line, label: entry.label ?? "", value: v });
+          }
+        }
+        lastHoverRef.current = { x: clampedX, value: hoverEntries[0]?.value ?? 0, time: t };
+        lastHoverEntriesRef.current = hoverEntries;
+        cfg.onHover?.({ time: t, value: hoverEntries[0]?.value ?? 0, x: clampedX, y: layout.toY(hoverEntries[0]?.value ?? 0) });
+      }
+      const scrubTarget = isActiveHover ? 1 : 0;
+      if (noMotion) {
+        scrubAmountRef.current = scrubTarget;
+      } else {
+        scrubAmountRef.current += (scrubTarget - scrubAmountRef.current) * SCRUB_LERP_SPEED;
+        if (scrubAmountRef.current < 0.01) scrubAmountRef.current = 0;
+        if (scrubAmountRef.current > 0.99) scrubAmountRef.current = 1;
+      }
+      if (!isActiveHover && scrubAmountRef.current > 0 && lastHoverRef.current) {
+        drawHoverX = lastHoverRef.current.x;
+        drawHoverTime = lastHoverRef.current.time;
+        hoverEntries = lastHoverEntriesRef.current;
+      }
+      drawMultiFrame(ctx, layout, {
+        series: seriesEntries,
+        now,
+        showGrid: cfg.showGrid,
+        showPulse: cfg.showPulse,
+        referenceLine: cfg.referenceLine,
+        hoverX: drawHoverX,
+        hoverTime: drawHoverTime,
+        hoverEntries,
+        scrubAmount: scrubAmountRef.current,
+        windowSecs,
+        formatValue: cfg.formatValue,
+        formatTime: cfg.formatTime,
+        gridState: gridStateRef.current,
+        timeAxisState: timeAxisStateRef.current,
+        dt,
+        targetWindowSecs: cfg.windowSecs,
+        tooltipY: cfg.tooltipY,
+        tooltipOutline: cfg.tooltipOutline,
+        chartReveal,
+        pauseProgress,
+        now_ms,
+        primaryPalette: cfg.palette
+      });
+      const bgAlpha = 1 - chartReveal;
+      if (bgAlpha > 0.01 && revealTarget === 0 && !cfg.loading) {
+        const bgEmptyAlpha = (1 - loadingAlpha) * bgAlpha;
+        if (bgEmptyAlpha > 0.01) {
+          drawEmpty(ctx, w, h, pad, cfg.palette, bgEmptyAlpha, now_ms, true, cfg.emptyText);
+        }
+      }
+      if (badgeRef.current) badgeRef.current.container.style.display = "none";
     } else {
       const effectivePoints = useStash ? lastDataRef.current : points;
       const adaptiveSpeed = computeAdaptiveSpeed(
@@ -2769,8 +3301,9 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       }
       const smoothValue = displayValueRef.current;
       const chartW = w - pad.left - pad.right;
-      const needsArrowRoom = cfg.showMomentum;
-      const buffer = needsArrowRoom ? Math.max(WINDOW_BUFFER, 37 / Math.max(chartW, 1)) : WINDOW_BUFFER;
+      const baseBuffer = cfg.showBadge ? WINDOW_BUFFER : WINDOW_BUFFER_NO_BADGE;
+      const needsArrowRoom = cfg.showMomentum && cfg.showBadge;
+      const buffer = needsArrowRoom ? Math.max(baseBuffer, 37 / Math.max(chartW, 1)) : baseBuffer;
       const transition = windowTransitionRef.current;
       if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
       const now = useStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
@@ -2957,6 +3490,7 @@ var defaultFormatTime = (t) => {
 function Liveline({
   data,
   value,
+  series: seriesProp,
   theme = "dark",
   color = "#3b82f6",
   window: windowSecs = 30,
@@ -2996,6 +3530,9 @@ function Liveline({
   lineData,
   lineValue,
   onModeChange,
+  onSeriesToggle,
+  seriesToggleCompact = false,
+  lineWidth,
   className,
   style
 }) {
@@ -3008,13 +3545,37 @@ function Liveline({
   const modeBarRef = useRef2(null);
   const modeBtnRefs = useRef2(/* @__PURE__ */ new Map());
   const [modeIndicatorStyle, setModeIndicatorStyle] = useState(null);
-  const palette = useMemo(() => resolveTheme(color, theme), [color, theme]);
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const lastSeriesPropRef = useRef2(seriesProp);
+  if (seriesProp && seriesProp.length > 0) lastSeriesPropRef.current = seriesProp;
+  const palette = useMemo(() => {
+    const p = resolveTheme(color, theme);
+    if (lineWidth != null) p.lineWidth = lineWidth;
+    return p;
+  }, [color, theme, lineWidth]);
   const isDark = theme === "dark";
+  const isMultiSeries = seriesProp != null && seriesProp.length > 0;
+  const showSeriesToggle = (lastSeriesPropRef.current?.length ?? 0) > 1;
+  const seriesPalettes = useMemo(() => {
+    if (!seriesProp || seriesProp.length === 0) return null;
+    return resolveSeriesPalettes(seriesProp, theme);
+  }, [seriesProp, theme]);
+  const multiSeries = useMemo(() => {
+    if (!seriesProp || !seriesPalettes) return void 0;
+    return seriesProp.map((s, i) => ({
+      id: s.id,
+      data: s.data,
+      value: s.value,
+      palette: seriesPalettes.get(s.id) ?? resolveTheme(s.color || SERIES_COLORS[i % SERIES_COLORS.length], theme),
+      label: s.label
+    }));
+  }, [seriesProp, seriesPalettes, theme]);
   const showMomentum = momentum !== false;
   const momentumOverride = typeof momentum === "string" ? momentum : void 0;
+  const defaultRight = badge ? 80 : grid ? 54 : 12;
   const pad = {
     top: paddingOverride?.top ?? 12,
-    right: paddingOverride?.right ?? 80,
+    right: paddingOverride?.right ?? defaultRight,
     bottom: paddingOverride?.bottom ?? 28,
     left: paddingOverride?.left ?? 12
   };
@@ -3051,6 +3612,22 @@ function Liveline({
       });
     }
   }, [activeMode, onModeChange]);
+  const handleSeriesToggle = useCallback2((id) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+        onSeriesToggle?.(id, true);
+      } else {
+        const totalSeries = seriesProp?.length ?? 0;
+        const visibleCount = totalSeries - next.size;
+        if (visibleCount <= 1) return prev;
+        next.add(id);
+        onSeriesToggle?.(id, false);
+      }
+      return next;
+    });
+  }, [seriesProp?.length, onSeriesToggle]);
   const ws = windowStyle ?? "default";
   useLivelineEngine(canvasRef, containerRef, {
     data,
@@ -3059,10 +3636,10 @@ function Liveline({
     windowSecs: effectiveWindowSecs,
     lerpSpeed,
     showGrid: grid,
-    showBadge: badge,
-    showMomentum,
+    showBadge: isMultiSeries ? false : badge,
+    showMomentum: isMultiSeries ? false : showMomentum,
     momentumOverride,
-    showFill: fill,
+    showFill: isMultiSeries ? false : fill,
     referenceLine,
     formatValue,
     formatTime,
@@ -3071,7 +3648,7 @@ function Liveline({
     showPulse: pulse,
     scrub,
     exaggerate,
-    degenOptions,
+    degenOptions: isMultiSeries ? void 0 : degenOptions,
     badgeTail,
     badgeVariant,
     tooltipY,
@@ -3088,7 +3665,10 @@ function Liveline({
     liveCandle,
     lineMode,
     lineData,
-    lineValue
+    lineValue,
+    multiSeries,
+    isMultiSeries,
+    hiddenSeriesIds: hiddenSeries
   });
   const cursorStyle = scrub ? cursor : "default";
   const activeColor = isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.55)";
@@ -3112,7 +3692,7 @@ function Liveline({
         }
       }
     ),
-    (windows && windows.length > 0 || onModeChange) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6, marginLeft: pad.left }, children: [
+    (windows && windows.length > 0 || onModeChange || showSeriesToggle) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6, marginLeft: pad.left }, children: [
       windows && windows.length > 0 && /* @__PURE__ */ jsxs(
         "div",
         {
@@ -3180,20 +3760,20 @@ function Liveline({
           style: {
             position: "relative",
             display: "inline-flex",
-            gap: 2,
-            background: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
-            borderRadius: 6,
-            padding: 2
+            gap: ws === "text" ? 4 : 2,
+            background: ws === "text" ? "transparent" : isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
+            borderRadius: ws === "rounded" ? 999 : 6,
+            padding: ws === "text" ? 0 : ws === "rounded" ? 3 : 2
           },
           children: [
-            modeIndicatorStyle && /* @__PURE__ */ jsx("div", { style: {
+            ws !== "text" && modeIndicatorStyle && /* @__PURE__ */ jsx("div", { style: {
               position: "absolute",
-              top: 2,
+              top: ws === "rounded" ? 3 : 2,
               left: modeIndicatorStyle.left,
               width: modeIndicatorStyle.width,
-              height: "calc(100% - 4px)",
+              height: ws === "rounded" ? "calc(100% - 6px)" : "calc(100% - 4px)",
               background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
-              borderRadius: 4,
+              borderRadius: ws === "rounded" ? 999 : 4,
               transition: "left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
               pointerEvents: "none"
             } }),
@@ -3209,7 +3789,7 @@ function Liveline({
                   position: "relative",
                   zIndex: 1,
                   padding: "5px 7px",
-                  borderRadius: 4,
+                  borderRadius: ws === "rounded" ? 999 : 4,
                   border: "none",
                   cursor: "pointer",
                   background: "transparent",
@@ -3240,7 +3820,7 @@ function Liveline({
                   position: "relative",
                   zIndex: 1,
                   padding: "5px 7px",
-                  borderRadius: 4,
+                  borderRadius: ws === "rounded" ? 999 : 4,
                   border: "none",
                   cursor: "pointer",
                   background: "transparent",
@@ -3297,7 +3877,58 @@ function Liveline({
             )
           ]
         }
-      )
+      ),
+      showSeriesToggle && /* @__PURE__ */ jsx("div", { style: {
+        display: "inline-flex",
+        gap: ws === "text" ? 4 : 2,
+        background: ws === "text" ? "transparent" : isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
+        borderRadius: ws === "rounded" ? 999 : 6,
+        padding: ws === "text" ? 0 : ws === "rounded" ? 3 : 2,
+        opacity: isMultiSeries ? 1 : 0,
+        transition: "opacity 0.4s",
+        pointerEvents: isMultiSeries ? "auto" : "none"
+      }, children: (lastSeriesPropRef.current ?? []).map((s, si) => {
+        const isHidden = hiddenSeries.has(s.id);
+        const seriesColor = s.color || SERIES_COLORS[si % SERIES_COLORS.length];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleSeriesToggle(s.id),
+            style: {
+              position: "relative",
+              zIndex: 1,
+              fontSize: 11,
+              padding: seriesToggleCompact ? ws === "text" ? "2px 4px" : "5px 7px" : ws === "text" ? "2px 6px" : "3px 8px",
+              borderRadius: ws === "rounded" ? 999 : 4,
+              border: "none",
+              cursor: "pointer",
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              fontWeight: 500,
+              background: isHidden ? "transparent" : ws === "text" ? "transparent" : isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
+              color: isHidden ? inactiveColor : activeColor,
+              opacity: isHidden ? 0.4 : 1,
+              transition: "opacity 0.2s, background 0.15s, color 0.2s",
+              lineHeight: "16px",
+              display: "flex",
+              alignItems: "center",
+              gap: seriesToggleCompact ? 0 : 4
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: {
+                width: seriesToggleCompact ? 8 : 6,
+                height: seriesToggleCompact ? 8 : 6,
+                borderRadius: "50%",
+                background: seriesColor,
+                flexShrink: 0,
+                opacity: isHidden ? 0.4 : 1,
+                transition: "opacity 0.2s"
+              } }),
+              !seriesToggleCompact && (s.label ?? s.id)
+            ]
+          },
+          s.id
+        );
+      }) })
     ] }),
     /* @__PURE__ */ jsx(
       "div",