liveline 0.0.4 → 0.0.6

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";
@@ -361,8 +388,9 @@ function renderCurve(ctx, layout, palette, pts, showFill, lineAlpha = 1, fillAlp
   ctx.stroke();
   ctx.globalAlpha = baseAlpha;
 }
-function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scrubX, scrubAmount = 0, chartReveal = 1, now_ms = 0) {
+function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scrubX, scrubAmount = 0, chartReveal = 1, now_ms = 0, colorBlend = 1, skipDashLine = false, fillScale = 1) {
   const { h, pad, toX, toY, chartW, chartH } = layout;
+  const incomingAlpha = ctx.globalAlpha;
   const yMin = pad.top;
   const yMax = h - pad.bottom;
   const clampY = (y) => Math.max(yMin, Math.min(yMax, y));
@@ -371,8 +399,10 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
   const scroll = now_ms * LOADING_SCROLL_SPEED;
   const morphY = chartReveal < 1 ? (rawY, x) => {
     const t = Math.max(0, Math.min(1, (x - pad.left) / chartW));
+    const centerDist = Math.abs(t - 0.5) * 2;
+    const localReveal = Math.max(0, Math.min(1, (chartReveal - centerDist * 0.4) / 0.6));
     const baseY = loadingY(t, centerY, amplitude, scroll);
-    return baseY + (rawY - baseY) * chartReveal;
+    return baseY + (rawY - baseY) * localReveal;
   } : (rawY, _x) => rawY;
   const pts = visible.map((p, i) => {
     const x = toX(p.time);
@@ -385,13 +415,14 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
   pts.push([tipX, morphY(clampY(toY(smoothValue)), tipX)]);
   if (pts.length < 2) return;
   let lineAlpha = 1;
-  let fillAlpha = 1;
+  let fillAlpha = fillScale;
   if (chartReveal < 1) {
     const breath = loadingBreath(now_ms);
     lineAlpha = breath + (1 - breath) * chartReveal;
-    fillAlpha = chartReveal;
+    fillAlpha = chartReveal * fillScale;
   }
-  const strokeColor = chartReveal < 1 ? blendColor(palette.gridLabel, palette.line, Math.min(1, chartReveal * 3)) : void 0;
+  const colorT = Math.min(1, chartReveal * 3) * colorBlend;
+  const strokeColor = chartReveal < 1 || colorBlend < 1 ? blendColor(palette.gridLabel, palette.line, colorT) : void 0;
   const isScrubbing = scrubX !== null;
   ctx.save();
   ctx.beginPath();
@@ -408,26 +439,28 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
     ctx.beginPath();
     ctx.rect(scrubX, 0, layout.w - scrubX, h);
     ctx.clip();
-    ctx.globalAlpha = 1 - scrubAmount * 0.6;
+    ctx.globalAlpha = incomingAlpha * (1 - scrubAmount * 0.6);
     renderCurve(ctx, layout, palette, pts, showFill, lineAlpha, fillAlpha, strokeColor);
     ctx.restore();
   } else {
     renderCurve(ctx, layout, palette, pts, showFill, lineAlpha, fillAlpha, strokeColor);
   }
   ctx.restore();
-  const realCurrentY = Math.max(pad.top, Math.min(h - pad.bottom, toY(smoothValue)));
-  const currentY = chartReveal < 1 ? centerY + (realCurrentY - centerY) * chartReveal : realCurrentY;
-  ctx.setLineDash([4, 4]);
-  ctx.strokeStyle = palette.dashLine;
-  ctx.lineWidth = 1;
-  const dashBase = isScrubbing ? 1 - scrubAmount * 0.2 : 1;
-  ctx.globalAlpha = chartReveal < 1 ? dashBase * chartReveal : dashBase;
-  ctx.beginPath();
-  ctx.moveTo(pad.left, currentY);
-  ctx.lineTo(layout.w - pad.right, currentY);
-  ctx.stroke();
-  ctx.setLineDash([]);
-  ctx.globalAlpha = 1;
+  if (!skipDashLine) {
+    const realCurrentY = Math.max(pad.top, Math.min(h - pad.bottom, toY(smoothValue)));
+    const currentY = chartReveal < 1 ? centerY + (realCurrentY - centerY) * chartReveal : realCurrentY;
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = palette.dashLine;
+    ctx.lineWidth = 1;
+    const dashBase = isScrubbing ? 1 - scrubAmount * 0.2 : 1;
+    ctx.globalAlpha = incomingAlpha * (chartReveal < 1 ? dashBase * chartReveal : dashBase);
+    ctx.beginPath();
+    ctx.moveTo(pad.left, currentY);
+    ctx.lineTo(layout.w - pad.right, currentY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+  }
+  ctx.globalAlpha = incomingAlpha;
   const last = pts[pts.length - 1];
   last[1] = Math.max(10, Math.min(h - 10, last[1]));
   return pts;
@@ -480,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;
@@ -578,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) {
@@ -944,6 +1088,337 @@ function drawParticles(ctx, state, dt) {
   ctx.restore();
 }
 
+// src/draw/candlestick.ts
+var BULL = "#22c55e";
+var BEAR = "#ef4444";
+var BULL_RGB = [34, 197, 94];
+var BEAR_RGB = [239, 68, 68];
+function blendColor2(t) {
+  const r = Math.round(BEAR_RGB[0] + (BULL_RGB[0] - BEAR_RGB[0]) * t);
+  const g = Math.round(BEAR_RGB[1] + (BULL_RGB[1] - BEAR_RGB[1]) * t);
+  const b = Math.round(BEAR_RGB[2] + (BULL_RGB[2] - BEAR_RGB[2]) * t);
+  return `rgb(${r},${g},${b})`;
+}
+function parseRgb(color) {
+  const hex = color.match(/^#([0-9a-f]{6})$/i);
+  if (hex) {
+    const h = hex[1];
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+  const rgb = color.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgb) return [+rgb[1], +rgb[2], +rgb[3]];
+  return [128, 128, 128];
+}
+function blendToAccent(candleColor, accentColor, t) {
+  if (t <= 0) return candleColor;
+  if (t >= 1) return accentColor;
+  const [r1, g1, b1] = parseRgb(candleColor);
+  const [r2, g2, b2] = parseRgb(accentColor);
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const b = Math.round(b1 + (b2 - b1) * t);
+  return `rgb(${r},${g},${b})`;
+}
+function candleDims(layout, candleWidthSecs) {
+  const pxPerSec = layout.chartW / (layout.rightEdge - layout.leftEdge);
+  const candlePxW = candleWidthSecs * pxPerSec;
+  const bodyW = Math.max(1, candlePxW * 0.7);
+  const wickW = Math.max(0.8, Math.min(2, bodyW * 0.15));
+  const radius = bodyW > 6 ? 1.5 : 0;
+  return { bodyW, wickW, radius };
+}
+function roundedRect(ctx, x, y, w, h, r) {
+  if (r <= 0 || h < r * 2) {
+    ctx.rect(x, y, w, h);
+    return;
+  }
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+}
+function drawCandlesticks(ctx, layout, candles, candleWidthSecs, liveTime, now_ms, scrubX, scrubDim, liveAlpha = 1, liveBullBlend = -1, accentColor, accentBlend = 0) {
+  if (candles.length === 0) return;
+  const { toX, toY } = layout;
+  const { bodyW, wickW, radius } = candleDims(layout, candleWidthSecs);
+  const halfBody = bodyW / 2;
+  const padL = layout.pad.left;
+  const padR = layout.pad.left + layout.chartW;
+  const livePulse = 0.12 + Math.sin(now_ms * 4e-3) * 0.08;
+  for (const c of candles) {
+    const cx = toX(c.time + candleWidthSecs / 2);
+    if (cx + halfBody < padL || cx - halfBody > padR) continue;
+    const isBull = c.close >= c.open;
+    const isLive = c.time === liveTime;
+    let color = isLive && liveBullBlend >= 0 ? blendColor2(liveBullBlend) : isBull ? BULL : BEAR;
+    if (accentColor && accentBlend > 0.01) {
+      color = blendToAccent(color, accentColor, accentBlend);
+    }
+    let candleAlpha = isLive ? liveAlpha : 1;
+    if (scrubDim > 0.01 && scrubX > 0) {
+      const dist = cx - scrubX;
+      if (dist > 0) {
+        const fadeZone = bodyW * 1.5;
+        const dimT = Math.min(dist / fadeZone, 1);
+        candleAlpha *= 1 - scrubDim * 0.5 * dimT;
+      }
+    }
+    const baseAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = baseAlpha * candleAlpha;
+    const bodyTop = toY(Math.max(c.open, c.close));
+    const bodyBottom = toY(Math.min(c.open, c.close));
+    const bodyH = Math.max(1, bodyBottom - bodyTop);
+    const wickTop = toY(c.high);
+    const wickBottom = toY(c.low);
+    ctx.lineCap = "round";
+    ctx.strokeStyle = color;
+    if (bodyTop - wickTop > 0.5) {
+      ctx.beginPath();
+      ctx.moveTo(cx, bodyTop);
+      ctx.lineTo(cx, wickTop);
+      ctx.lineWidth = wickW;
+      ctx.stroke();
+    }
+    if (wickBottom - bodyBottom > 0.5) {
+      ctx.beginPath();
+      ctx.moveTo(cx, bodyBottom);
+      ctx.lineTo(cx, wickBottom);
+      ctx.lineWidth = wickW;
+      ctx.stroke();
+    }
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    roundedRect(ctx, cx - halfBody, bodyTop, bodyW, bodyH, radius);
+    ctx.fill();
+    if (isLive) {
+      ctx.save();
+      ctx.globalAlpha = baseAlpha * candleAlpha * livePulse;
+      ctx.shadowColor = color;
+      ctx.shadowBlur = 8;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      roundedRect(ctx, cx - halfBody, bodyTop, bodyW, bodyH, radius);
+      ctx.fill();
+      ctx.restore();
+    }
+    ctx.globalAlpha = baseAlpha;
+  }
+}
+function drawClosePrice(ctx, layout, palette, liveCandle, scrubDim, bullBlend = -1) {
+  const y = layout.toY(liveCandle.close);
+  if (y < layout.pad.top || y > layout.h - layout.pad.bottom) return;
+  const isBull = liveCandle.close >= liveCandle.open;
+  const color = bullBlend >= 0 ? blendColor2(bullBlend) : isBull ? BULL : BEAR;
+  const baseAlpha = ctx.globalAlpha;
+  ctx.save();
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1;
+  ctx.globalAlpha = baseAlpha * (1 - scrubDim * 0.3) * 0.4;
+  ctx.beginPath();
+  ctx.moveTo(layout.pad.left, y);
+  ctx.lineTo(layout.w - layout.pad.right, y);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.restore();
+}
+function drawCandleCrosshair(ctx, layout, palette, hoverX, candle, hoverTime, formatValue, formatTime, opacity) {
+  if (opacity < 0.01) return;
+  const { h, pad } = layout;
+  ctx.save();
+  ctx.globalAlpha = opacity * 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();
+  if (opacity < 0.1 || layout.w < 200) return;
+  const isBull = candle.close >= candle.open;
+  const valueColor = isBull ? BULL : BEAR;
+  const cl = formatValue(candle.close);
+  const time = formatTime(hoverTime);
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.font = '400 13px "SF Mono", Menlo, monospace';
+  ctx.textAlign = "left";
+  let parts;
+  if (layout.w >= 400) {
+    const o = formatValue(candle.open);
+    const hi = formatValue(candle.high);
+    const lo = formatValue(candle.low);
+    parts = [
+      { text: "O ", color: palette.gridLabel },
+      { text: o, color: valueColor },
+      { text: "   H ", color: palette.gridLabel },
+      { text: hi, color: valueColor },
+      { text: "   L ", color: palette.gridLabel },
+      { text: lo, color: valueColor },
+      { text: "   C ", color: palette.gridLabel },
+      { text: cl, color: valueColor },
+      { text: "  \xB7  ", color: palette.gridLabel },
+      { text: time, color: palette.gridLabel }
+    ];
+  } else {
+    parts = [
+      { text: "C ", color: palette.gridLabel },
+      { text: cl, color: valueColor },
+      { text: "  \xB7  ", color: palette.gridLabel },
+      { text: time, color: palette.gridLabel }
+    ];
+  }
+  let totalW = 0;
+  const widths = [];
+  for (const p of parts) {
+    const w = ctx.measureText(p.text).width;
+    widths.push(w);
+    totalW += w;
+  }
+  let tx = hoverX - totalW / 2;
+  const minX = pad.left + 4;
+  const maxX = layout.w - pad.right - totalW;
+  if (tx < minX) tx = minX;
+  if (tx > maxX) tx = maxX;
+  const ty = pad.top + 24;
+  ctx.strokeStyle = palette.tooltipBg;
+  ctx.lineWidth = 3;
+  ctx.lineJoin = "round";
+  let cx = tx;
+  for (let i = 0; i < parts.length; i++) {
+    ctx.strokeText(parts[i].text, cx, ty);
+    cx += widths[i];
+  }
+  cx = tx;
+  for (let i = 0; i < parts.length; i++) {
+    ctx.fillStyle = parts[i].color;
+    ctx.fillText(parts[i].text, cx, ty);
+    cx += widths[i];
+  }
+  ctx.restore();
+}
+function drawLineModeCrosshair(ctx, layout, palette, hoverX, value, hoverTime, formatValue, formatTime, opacity) {
+  if (opacity < 0.01) return;
+  const { h, pad } = layout;
+  const y = layout.toY(value);
+  ctx.save();
+  ctx.globalAlpha = opacity * 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.globalAlpha = opacity * 0.3;
+  ctx.beginPath();
+  ctx.moveTo(pad.left, y);
+  ctx.lineTo(layout.w - pad.right, y);
+  ctx.stroke();
+  ctx.restore();
+  if (opacity < 0.1 || layout.w < 200) return;
+  const val = formatValue(value);
+  const time = formatTime(hoverTime);
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.font = '400 13px "SF Mono", Menlo, monospace';
+  ctx.textAlign = "left";
+  const parts = [
+    { text: val, color: palette.line },
+    { text: "  \xB7  ", color: palette.gridLabel },
+    { text: time, color: palette.gridLabel }
+  ];
+  let totalW = 0;
+  const widths = [];
+  for (const p of parts) {
+    const w = ctx.measureText(p.text).width;
+    widths.push(w);
+    totalW += w;
+  }
+  let tx = hoverX - totalW / 2;
+  const minX = pad.left + 4;
+  const maxX = layout.w - pad.right - totalW;
+  if (tx < minX) tx = minX;
+  if (tx > maxX) tx = maxX;
+  const ty = pad.top + 24;
+  ctx.strokeStyle = palette.tooltipBg;
+  ctx.lineWidth = 3;
+  ctx.lineJoin = "round";
+  let lx = tx;
+  for (let i = 0; i < parts.length; i++) {
+    ctx.strokeText(parts[i].text, lx, ty);
+    lx += widths[i];
+  }
+  lx = tx;
+  for (let i = 0; i < parts.length; i++) {
+    ctx.fillStyle = parts[i].color;
+    ctx.fillText(parts[i].text, lx, ty);
+    lx += widths[i];
+  }
+  ctx.restore();
+}
+
+// src/draw/empty.ts
+function drawEmpty(ctx, w, h, pad, palette, alpha = 1, now_ms = 0, skipLine = false, emptyText) {
+  const chartW = w - pad.left - pad.right;
+  const chartH = h - pad.top - pad.bottom;
+  const centerY = pad.top + chartH / 2;
+  const cx = pad.left + chartW / 2;
+  const text = emptyText ?? "No data to display";
+  const amplitude = chartH * LOADING_AMPLITUDE_RATIO;
+  ctx.save();
+  ctx.font = "400 12px system-ui, -apple-system, sans-serif";
+  const textW = ctx.measureText(text).width;
+  const gapHalf = textW / 2 + 20;
+  const fadeW = 30;
+  if (!skipLine) {
+    const scroll = now_ms * LOADING_SCROLL_SPEED;
+    const breath = loadingBreath(now_ms);
+    const numPts = 32;
+    const pts = [];
+    for (let i = 0; i <= numPts; i++) {
+      const t = i / numPts;
+      const x = pad.left + t * chartW;
+      const y = loadingY(t, centerY, amplitude, scroll);
+      pts.push([x, y]);
+    }
+    ctx.beginPath();
+    ctx.moveTo(pts[0][0], pts[0][1]);
+    drawSpline(ctx, pts);
+    ctx.strokeStyle = palette.gridLabel;
+    ctx.lineWidth = palette.lineWidth;
+    ctx.globalAlpha = breath * alpha;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.stroke();
+  }
+  ctx.save();
+  ctx.globalCompositeOperation = "destination-out";
+  const gapLeft = cx - gapHalf - fadeW;
+  const gapRight = cx + gapHalf + fadeW;
+  const eraseGrad = ctx.createLinearGradient(gapLeft, 0, gapRight, 0);
+  eraseGrad.addColorStop(0, "rgba(0,0,0,0)");
+  eraseGrad.addColorStop(fadeW / (gapRight - gapLeft), "rgba(0,0,0,1)");
+  eraseGrad.addColorStop(1 - fadeW / (gapRight - gapLeft), "rgba(0,0,0,1)");
+  eraseGrad.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.fillStyle = eraseGrad;
+  ctx.globalAlpha = alpha;
+  const eraseH = amplitude * 2 + palette.lineWidth + 6;
+  ctx.fillRect(gapLeft, centerY - eraseH / 2, gapRight - gapLeft, eraseH);
+  ctx.restore();
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.globalAlpha = 0.35 * alpha;
+  ctx.fillStyle = palette.gridLabel;
+  ctx.fillText(text, cx, centerY);
+  ctx.restore();
+}
+
 // src/draw/index.ts
 var SHAKE_DECAY_RATE = 2e-3;
 var SHAKE_MIN_AMPLITUDE = 0.2;
@@ -1093,91 +1568,352 @@ function drawFrame(ctx, layout, palette, opts) {
     ctx.restore();
   }
 }
-
-// src/draw/loading.ts
-function drawLoading(ctx, w, h, pad, palette, now_ms, alpha = 1) {
-  const chartW = w - pad.left - pad.right;
-  const chartH = h - pad.top - pad.bottom;
-  const centerY = pad.top + chartH / 2;
-  const leftX = pad.left;
-  const amplitude = chartH * LOADING_AMPLITUDE_RATIO;
-  const scroll = now_ms * LOADING_SCROLL_SPEED;
-  const breath = loadingBreath(now_ms);
-  const numPts = 32;
-  const pts = [];
-  for (let i = 0; i <= numPts; i++) {
-    const t = i / numPts;
-    const x = leftX + t * chartW;
-    const y = loadingY(t, centerY, amplitude, scroll);
-    pts.push([x, y]);
+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();
   }
-  ctx.beginPath();
-  ctx.moveTo(pts[0][0], pts[0][1]);
-  drawSpline(ctx, pts);
-  ctx.strokeStyle = palette.line;
-  ctx.lineWidth = palette.lineWidth;
-  ctx.globalAlpha = breath * alpha;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.stroke();
-  ctx.globalAlpha = 1;
-}
-
-// src/draw/empty.ts
-function drawEmpty(ctx, w, h, pad, palette, alpha = 1, now_ms = 0, skipLine = false, emptyText) {
+  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;
+  const fullLineMode = opts.lineModeProg >= 0.99;
+  const revealLine = fullLineMode ? 1 - reveal : (1 - reveal) * (1 - reveal) * (1 - reveal);
+  const lp = Math.max(opts.lineModeProg, revealLine);
+  const colorBlend = lp > 1e-3 ? opts.lineModeProg / lp : 1;
+  const revealRamp = (start, end) => {
+    const t = Math.max(0, Math.min(1, (reveal - start) / (end - start)));
+    return t * t * (3 - 2 * t);
+  };
+  const gridAlpha = revealRamp(0.25, 0.6);
+  if (opts.showGrid && gridAlpha > 0.01) {
+    ctx.save();
+    if (gridAlpha < 1) ctx.globalAlpha = gridAlpha;
+    drawGrid(ctx, layout, palette, opts.formatValue, opts.gridState, opts.dt);
+    ctx.restore();
+  }
+  let linePts;
+  if (lp > 0.01 && opts.lineVisible.length >= 2) {
+    const scrubX = opts.scrubAmount > 0.05 ? opts.hoverX : null;
+    ctx.save();
+    ctx.globalAlpha = lp;
+    linePts = drawLine(
+      ctx,
+      layout,
+      palette,
+      opts.lineVisible,
+      opts.lineSmoothValue,
+      opts.now,
+      opts.lineModeProg > 0.01,
+      scrubX,
+      opts.scrubAmount,
+      opts.chartReveal,
+      opts.now_ms,
+      colorBlend,
+      !fullLineMode,
+      opts.lineModeProg
+      // fillScale — fill fades smoothly with line mode transition
+    );
+    ctx.restore();
+  }
+  const closeAlpha = revealRamp(0.4, 0.8);
+  const closeSource = opts.closePriceCandle ?? opts.liveCandle;
+  if (closeSource && closeAlpha > 0.01) {
+    if (lp < 0.99) {
+      ctx.save();
+      ctx.globalAlpha = closeAlpha * (1 - lp);
+      drawClosePrice(ctx, layout, palette, closeSource, opts.scrubAmount, opts.liveBullBlend);
+      ctx.restore();
+    }
+    if (lp > 0.01 && !fullLineMode) {
+      const dashY = layout.toY(closeSource.close);
+      if (dashY >= pad.top && dashY <= h - pad.bottom) {
+        ctx.save();
+        ctx.setLineDash([4, 4]);
+        ctx.strokeStyle = palette.dashLine;
+        ctx.lineWidth = 1;
+        ctx.globalAlpha = closeAlpha * lp * (1 - opts.scrubAmount * 0.2);
+        ctx.beginPath();
+        ctx.moveTo(pad.left, dashY);
+        ctx.lineTo(w - pad.right, dashY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
+    }
+  }
+  const candleAlpha = opts.chartReveal * (1 - lp);
+  if (candleAlpha > 0.01) {
+    const ohlcScale = reveal * reveal * (3 - 2 * reveal);
+    const collapseC = (c) => ohlcScale >= 0.99 ? c : {
+      time: c.time,
+      open: c.close + (c.open - c.close) * ohlcScale,
+      high: c.close + (c.high - c.close) * ohlcScale,
+      low: c.close + (c.low - c.close) * ohlcScale,
+      close: c.close
+    };
+    const revealCandles = ohlcScale < 0.99 ? opts.candles.map(collapseC) : opts.candles;
+    const revealOld = ohlcScale < 0.99 && opts.oldCandles.length > 0 ? opts.oldCandles.map(collapseC) : opts.oldCandles;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(pad.left - 1, pad.top, chartW + 2, chartH);
+    ctx.clip();
+    const accentCol = lp > 0.01 ? palette.line : void 0;
+    if (opts.morphT >= 0 && revealOld.length > 0) {
+      ctx.globalAlpha = (1 - opts.morphT) * candleAlpha;
+      drawCandlesticks(
+        ctx,
+        layout,
+        revealOld,
+        opts.oldWidth,
+        -1,
+        opts.now_ms,
+        opts.hoverX ?? 0,
+        opts.scrubAmount,
+        1,
+        -1,
+        accentCol,
+        lp
+      );
+      ctx.globalAlpha = opts.morphT * candleAlpha;
+      drawCandlesticks(
+        ctx,
+        layout,
+        revealCandles,
+        opts.displayCandleWidth,
+        opts.liveCandle?.time ?? -1,
+        opts.now_ms,
+        opts.hoverX ?? 0,
+        opts.scrubAmount,
+        opts.liveBirthAlpha,
+        opts.liveBullBlend,
+        accentCol,
+        lp
+      );
+      ctx.globalAlpha = 1;
+    } else {
+      if (candleAlpha < 1) ctx.globalAlpha = candleAlpha;
+      drawCandlesticks(
+        ctx,
+        layout,
+        revealCandles,
+        opts.displayCandleWidth,
+        opts.liveCandle?.time ?? -1,
+        opts.now_ms,
+        opts.hoverX ?? 0,
+        opts.scrubAmount,
+        opts.liveBirthAlpha,
+        opts.liveBullBlend,
+        accentCol,
+        lp
+      );
+    }
+    ctx.restore();
+  }
+  if (lp > 0.5 && linePts && linePts.length > 0 && reveal > 0.3) {
+    const lastPt = linePts[linePts.length - 1];
+    const dotAlpha = (lp - 0.5) * 2 * ((reveal - 0.3) / 0.7);
+    const showPulse = lp > 0.8 && reveal > 0.6;
+    if (dotAlpha > 0.01) {
+      ctx.save();
+      ctx.globalAlpha = dotAlpha;
+      drawDot(ctx, lastPt[0], lastPt[1], palette, showPulse, opts.scrubAmount, opts.now_ms);
+      ctx.restore();
+    }
+  }
+  const timeAlpha = revealRamp(0.25, 0.6);
+  if (timeAlpha > 0.01) {
+    ctx.save();
+    if (timeAlpha < 1) ctx.globalAlpha = timeAlpha;
+    drawTimeAxis(ctx, layout, palette, opts.targetWindowSecs, opts.targetWindowSecs, opts.formatTime, opts.timeAxisState, opts.dt);
+    ctx.restore();
+  }
+  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 (opts.showEmptyOverlay) {
+    const bgAlpha = 1 - opts.chartReveal;
+    if (bgAlpha > 0.01) {
+      const bgEmptyAlpha = (1 - opts.loadingAlpha) * bgAlpha;
+      if (bgEmptyAlpha > 0.01) {
+        drawEmpty(ctx, w, h, pad, palette, bgEmptyAlpha, opts.now_ms, true, opts.emptyText);
+      }
+    }
+  }
+  if (opts.chartReveal > 0.7 && opts.hoveredCandle && opts.hoverX !== null && opts.scrubAmount > 0.01) {
+    if (opts.lineModeProg > 0.5) {
+      drawLineModeCrosshair(
+        ctx,
+        layout,
+        palette,
+        opts.hoverX,
+        opts.hoveredCandle.close,
+        opts.hoverTime ?? 0,
+        opts.formatValue,
+        opts.formatTime,
+        opts.scrubAmount
+      );
+    } else {
+      drawCandleCrosshair(
+        ctx,
+        layout,
+        palette,
+        opts.hoverX,
+        opts.hoveredCandle,
+        opts.hoverTime ?? 0,
+        opts.formatValue,
+        opts.formatTime,
+        opts.scrubAmount
+      );
+    }
+  }
+}
+
+// src/draw/loading.ts
+function drawLoading(ctx, w, h, pad, palette, now_ms, alpha = 1, strokeColor) {
   const chartW = w - pad.left - pad.right;
   const chartH = h - pad.top - pad.bottom;
   const centerY = pad.top + chartH / 2;
-  const cx = pad.left + chartW / 2;
-  const text = emptyText ?? "No data to display";
-  ctx.font = "400 12px system-ui, -apple-system, sans-serif";
+  const leftX = pad.left;
   const amplitude = chartH * LOADING_AMPLITUDE_RATIO;
-  const textW = ctx.measureText(text).width;
-  const gapHalf = textW / 2 + 20;
-  const fadeW = 30;
-  if (!skipLine) {
-    const scroll = now_ms * LOADING_SCROLL_SPEED;
-    const breath = loadingBreath(now_ms);
-    const numPts = 32;
-    const pts = [];
-    for (let i = 0; i <= numPts; i++) {
-      const t = i / numPts;
-      const x = pad.left + t * chartW;
-      const y = loadingY(t, centerY, amplitude, scroll);
-      pts.push([x, y]);
-    }
-    ctx.beginPath();
-    ctx.moveTo(pts[0][0], pts[0][1]);
-    drawSpline(ctx, pts);
-    ctx.strokeStyle = palette.gridLabel;
-    ctx.lineWidth = palette.lineWidth;
-    ctx.globalAlpha = breath * alpha;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.stroke();
+  const scroll = now_ms * LOADING_SCROLL_SPEED;
+  const breath = loadingBreath(now_ms);
+  const numPts = 32;
+  const pts = [];
+  for (let i = 0; i <= numPts; i++) {
+    const t = i / numPts;
+    const x = leftX + t * chartW;
+    const y = loadingY(t, centerY, amplitude, scroll);
+    pts.push([x, y]);
   }
   ctx.save();
-  ctx.globalCompositeOperation = "destination-out";
-  const gapLeft = cx - gapHalf - fadeW;
-  const gapRight = cx + gapHalf + fadeW;
-  const eraseGrad = ctx.createLinearGradient(gapLeft, 0, gapRight, 0);
-  eraseGrad.addColorStop(0, "rgba(0,0,0,0)");
-  eraseGrad.addColorStop(fadeW / (gapRight - gapLeft), "rgba(0,0,0,1)");
-  eraseGrad.addColorStop(1 - fadeW / (gapRight - gapLeft), "rgba(0,0,0,1)");
-  eraseGrad.addColorStop(1, "rgba(0,0,0,0)");
-  ctx.fillStyle = eraseGrad;
-  ctx.globalAlpha = alpha;
-  const eraseH = amplitude * 2 + palette.lineWidth + 6;
-  ctx.fillRect(gapLeft, centerY - eraseH / 2, gapRight - gapLeft, eraseH);
+  ctx.beginPath();
+  ctx.moveTo(pts[0][0], pts[0][1]);
+  drawSpline(ctx, pts);
+  ctx.strokeStyle = strokeColor ?? palette.line;
+  ctx.lineWidth = palette.lineWidth;
+  ctx.globalAlpha = breath * alpha;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.stroke();
   ctx.restore();
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  ctx.globalAlpha = 0.35 * alpha;
-  ctx.fillStyle = palette.gridLabel;
-  ctx.fillText(text, cx, centerY);
-  ctx.globalAlpha = 1;
-  ctx.textAlign = "start";
-  ctx.textBaseline = "alphabetic";
 }
 
 // src/draw/badge.ts
@@ -1227,10 +1963,23 @@ var ADAPTIVE_SPEED_BOOST = 0.2;
 var MOMENTUM_GREEN = [34, 197, 94];
 var MOMENTUM_RED = [239, 68, 68];
 var CHART_REVEAL_SPEED = 0.14;
+var CHART_REVEAL_SPEED_FWD = 0.09;
 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;
+var CLOSE_LINE_LERP_SPEED = 0.25;
+var LINE_DENSITY_MS = 350;
+var LINE_LERP_BASE = 0.08;
+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;
 function computeAdaptiveSpeed(value, displayValue, displayMin, displayMax, lerpSpeed, noMotion) {
   const valGap = Math.abs(value - displayValue);
   const prevRange = displayMax - displayMin || 1;
@@ -1430,10 +2179,121 @@ function updateBadgeDOM(badge, cfg, smoothValue, layout, momentum, badgeY, badge
   }
   return badgeY;
 }
+function computeCandleRange(candles) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const c of candles) {
+    if (c.low < min) min = c.low;
+    if (c.high > max) max = c.high;
+  }
+  if (!isFinite(min) || !isFinite(max)) return { min: 99, max: 101 };
+  const range = max - min;
+  const margin = range * 0.12;
+  const minRange = range * 0.1 || 0.4;
+  if (range < minRange) {
+    const mid = (min + max) / 2;
+    return { min: mid - minRange / 2, max: mid + minRange / 2 };
+  }
+  return { min: min - margin, max: max + margin };
+}
+function candleAtX(candles, hoverX, candleWidth, layout) {
+  const time = layout.leftEdge + (hoverX - layout.pad.left) / layout.chartW * (layout.rightEdge - layout.leftEdge);
+  let lo = 0;
+  let hi = candles.length - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    const c = candles[mid];
+    if (time < c.time) hi = mid - 1;
+    else if (time >= c.time + candleWidth) lo = mid + 1;
+    else return c;
+  }
+  return null;
+}
+function updateCandleRange(computedRange, rangeInited, displayMin, displayMax, isTransitioning, windowTransProgress, wt, chartH, dt) {
+  if (!rangeInited) {
+    return {
+      minVal: computedRange.min,
+      maxVal: computedRange.max,
+      valRange: computedRange.max - computedRange.min || 1e-3,
+      displayMin: computedRange.min,
+      displayMax: computedRange.max,
+      rangeInited: true
+    };
+  }
+  if (isTransitioning) {
+    displayMin = wt.rangeFromMin + (wt.rangeToMin - wt.rangeFromMin) * windowTransProgress;
+    displayMax = wt.rangeFromMax + (wt.rangeToMax - wt.rangeFromMax) * windowTransProgress;
+  } else {
+    const curRange = displayMax - displayMin || 1;
+    const gapMin = Math.abs(displayMin - computedRange.min);
+    const gapMax = Math.abs(displayMax - computedRange.max);
+    const gapRatio = Math.min((gapMin + gapMax) / curRange, 1);
+    const speed = RANGE_LERP_SPEED + (1 - gapRatio) * RANGE_ADAPTIVE_BOOST;
+    displayMin = lerp(displayMin, computedRange.min, speed, dt);
+    displayMax = lerp(displayMax, computedRange.max, speed, dt);
+    const pxThreshold = 0.5 * curRange / chartH || 1e-3;
+    if (Math.abs(displayMin - computedRange.min) < pxThreshold) displayMin = computedRange.min;
+    if (Math.abs(displayMax - computedRange.max) < pxThreshold) displayMax = computedRange.max;
+  }
+  return {
+    minVal: displayMin,
+    maxVal: displayMax,
+    valRange: displayMax - displayMin || 1e-3,
+    displayMin,
+    displayMax,
+    rangeInited: true
+  };
+}
+function updateCandleWindowTransition(targetWindowSecs, wt, displayWindow, displayMin, displayMax, now_ms, now, candles, liveCandle, candleWidth, buffer) {
+  if (wt.to !== targetWindowSecs) {
+    wt.from = displayWindow;
+    wt.to = targetWindowSecs;
+    wt.startMs = now_ms;
+    wt.rangeFromMin = displayMin;
+    wt.rangeFromMax = displayMax;
+    const targetRightEdge = now + targetWindowSecs * buffer;
+    const targetLeftEdge = targetRightEdge - targetWindowSecs;
+    const targetVisible = [];
+    for (const c of candles) {
+      if (c.time + candleWidth >= targetLeftEdge && c.time <= targetRightEdge) {
+        targetVisible.push(c);
+      }
+    }
+    if (liveCandle && liveCandle.time + candleWidth >= targetLeftEdge && liveCandle.time <= targetRightEdge) {
+      targetVisible.push(liveCandle);
+    }
+    if (targetVisible.length > 0) {
+      const tr = computeCandleRange(targetVisible);
+      wt.rangeToMin = tr.min;
+      wt.rangeToMax = tr.max;
+    }
+  }
+  let windowTransProgress = 0;
+  let resultWindow;
+  if (wt.startMs === 0) {
+    resultWindow = targetWindowSecs;
+  } else {
+    const elapsed = now_ms - wt.startMs;
+    const t = Math.min(elapsed / WINDOW_TRANSITION_MS, 1);
+    const eased = (1 - Math.cos(t * Math.PI)) / 2;
+    windowTransProgress = eased;
+    const logFrom = Math.log(wt.from);
+    const logTo = Math.log(wt.to);
+    resultWindow = Math.exp(logFrom + (logTo - logFrom) * eased);
+    if (t >= 1) {
+      resultWindow = targetWindowSecs;
+      wt.startMs = 0;
+      windowTransProgress = 0;
+    }
+  }
+  return { windowSecs: resultWindow, windowTransProgress };
+}
 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);
@@ -1466,13 +2326,49 @@ 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);
+  const liveBullRef = useRef(0.5);
+  const lineSmoothCloseRef = useRef(0);
+  const lineSmoothInitedRef = useRef(false);
+  const closeLineSmoothRef = useRef(0);
+  const closeLineSmoothInitedRef = useRef(false);
+  const lineModeProgRef = useRef(0);
+  const lineModeTransRef = useRef({ startMs: 0, from: 0, to: 0 });
+  const lineDensityProgRef = useRef(0);
+  const lineDensityTransRef = useRef({ startMs: 0, from: 0, to: 0 });
+  const lineTickSmoothRef = useRef(0);
+  const lineTickSmoothInitedRef = useRef(false);
+  const candleWidthTransRef = useRef({
+    fromWidth: config.candleWidth ?? 1,
+    toWidth: config.candleWidth ?? 1,
+    startMs: 0,
+    rangeFromMin: 0,
+    rangeFromMax: 0,
+    rangeToMin: 0,
+    rangeToMax: 0,
+    oldCandles: [],
+    oldWidth: config.candleWidth ?? 1
+  });
+  const prevCandleDataRef = useRef({ candles: [], width: config.candleWidth ?? 1 });
+  const pausedCandlesRef = useRef(null);
+  const pausedLiveRef = useRef(null);
+  const pausedLineDataRef = useRef(null);
+  const pausedLineValueRef = useRef(null);
+  const lastCandlesRef = useRef([]);
+  const lastLiveRef = useRef(null);
+  const lastLineDataStashRef = useRef([]);
+  const lastLineValueStashRef = useRef(void 0);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -1604,14 +2500,43 @@ function useLivelineEngine(canvasRef, containerRef, config) {
     }
     applyDpr(ctx, dpr, w, h);
     const noMotion = reducedMotionRef.current;
-    if (cfg.paused && pausedDataRef.current === null && cfg.data.length >= 2) {
-      pausedDataRef.current = cfg.data.slice();
-    }
-    if (!cfg.paused) {
-      pausedDataRef.current = null;
+    const isCandle = cfg.mode === "candle";
+    if (isCandle) {
+      if (cfg.paused && pausedCandlesRef.current === null && (cfg.candles?.length ?? 0) > 0) {
+        pausedCandlesRef.current = cfg.candles.slice();
+        pausedLiveRef.current = cfg.liveCandle ?? null;
+        pausedLineDataRef.current = cfg.lineData?.slice() ?? null;
+        pausedLineValueRef.current = cfg.lineValue ?? null;
+      }
+      if (!cfg.paused) {
+        pausedCandlesRef.current = null;
+        pausedLiveRef.current = null;
+        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();
+      }
+      if (!cfg.paused) {
+        pausedDataRef.current = null;
+      }
     }
-    const points = pausedDataRef.current ?? cfg.data;
-    const hasData = points.length >= 2;
+    const points = isCandle ? [] : pausedDataRef.current ?? cfg.data;
+    const effectiveCandles = isCandle ? pausedCandlesRef.current ?? (cfg.candles ?? []) : [];
+    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;
@@ -1633,18 +2558,62 @@ function useLivelineEngine(canvasRef, containerRef, config) {
     if (loadingAlphaRef.current > 0.99) loadingAlphaRef.current = 1;
     const loadingAlpha = loadingAlphaRef.current;
     const revealTarget = !cfg.loading && hasData ? 1 : 0;
-    chartRevealRef.current = noMotion ? revealTarget : lerp(chartRevealRef.current, revealTarget, CHART_REVEAL_SPEED, dt);
+    chartRevealRef.current = noMotion ? revealTarget : lerp(
+      chartRevealRef.current,
+      revealTarget,
+      revealTarget === 1 ? CHART_REVEAL_SPEED_FWD : CHART_REVEAL_SPEED,
+      dt
+    );
     if (Math.abs(chartRevealRef.current - revealTarget) < 5e-3) {
       chartRevealRef.current = revealTarget;
     }
     const chartReveal = chartRevealRef.current;
-    const useStash = !hasData && chartReveal > 5e-3 && lastDataRef.current.length >= 2;
-    if (hasData) {
-      lastDataRef.current = points;
+    if (chartReveal < 0.01) {
+      rangeInitedRef.current = false;
+    }
+    let useStash;
+    let useMultiStash = false;
+    if (isCandle) {
+      useStash = !hasData && chartReveal > 5e-3 && lastCandlesRef.current.length > 0;
+    } else {
+      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 (!hasData && !useStash) {
+    if (isCandle) {
+      const lmt = lineModeTransRef.current;
+      const lineModeTarget = cfg.lineMode ? 1 : 0;
+      if (lmt.to !== lineModeTarget) {
+        lmt.from = lineModeProgRef.current;
+        lmt.to = lineModeTarget;
+        lmt.startMs = now_ms;
+      }
+      if (lmt.startMs > 0) {
+        const elapsed = now_ms - lmt.startMs;
+        const t = Math.min(elapsed / LINE_MORPH_MS, 1);
+        lineModeProgRef.current = lmt.from + (lmt.to - lmt.from) * ((1 - Math.cos(t * Math.PI)) / 2);
+        if (t >= 1) {
+          lineModeProgRef.current = lmt.to;
+          lmt.startMs = 0;
+        }
+      } else {
+        lineModeProgRef.current = lmt.to;
+      }
+    }
+    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);
+        drawLoading(ctx, w, h, pad, cfg.palette, now_ms, loadingAlpha, loadingColor);
       }
       if (1 - loadingAlpha > 0.01) {
         drawEmpty(ctx, w, h, pad, cfg.palette, 1 - loadingAlpha, now_ms, false, cfg.emptyText);
@@ -1661,190 +2630,840 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       rafRef.current = requestAnimationFrame(draw);
       return;
     }
-    const effectivePoints = useStash ? lastDataRef.current : points;
-    const adaptiveSpeed = computeAdaptiveSpeed(
-      cfg.value,
-      displayValueRef.current,
-      displayMinRef.current,
-      displayMaxRef.current,
-      cfg.lerpSpeed,
-      noMotion
-    );
-    if (!useStash) {
-      displayValueRef.current = lerp(displayValueRef.current, cfg.value, adaptiveSpeed, pausedDt);
-      if (pauseProgress < 0.5) {
-        const prevRange = displayMaxRef.current - displayMinRef.current || 1;
-        if (Math.abs(displayValueRef.current - cfg.value) < prevRange * VALUE_SNAP_THRESHOLD) {
-          displayValueRef.current = cfg.value;
+    if (isCandle) {
+      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;
+      let effectiveLineData = pausedLineDataRef.current ?? cfg.lineData;
+      let effectiveLineValue = pausedLineValueRef.current ?? cfg.lineValue;
+      if (hasData && effectiveLineData && effectiveLineData.length > 0) {
+        lastLineDataStashRef.current = effectiveLineData;
+        lastLineValueStashRef.current = effectiveLineValue;
+      }
+      if (useStash && lastLineDataStashRef.current.length > 0) {
+        effectiveLineData = lastLineDataStashRef.current;
+        effectiveLineValue = lastLineValueStashRef.current;
+      }
+      const candleWidthSecs = cfg.candleWidth ?? 1;
+      const cwt = candleWidthTransRef.current;
+      let morphT = -1;
+      let displayCandleWidth;
+      if (cwt.startMs > 0) {
+        const elapsed = now_ms - cwt.startMs;
+        const t = Math.min(elapsed / CANDLE_WIDTH_TRANS_MS, 1);
+        morphT = (1 - Math.cos(t * Math.PI)) / 2;
+        displayCandleWidth = Math.exp(
+          Math.log(cwt.fromWidth) + (Math.log(cwt.toWidth) - Math.log(cwt.fromWidth)) * morphT
+        );
+        if (t >= 1) {
+          displayCandleWidth = cwt.toWidth;
+          cwt.startMs = 0;
+          morphT = -1;
+        }
+      } else {
+        displayCandleWidth = cwt.toWidth;
+      }
+      if (candleWidthSecs !== cwt.toWidth) {
+        cwt.oldCandles = prevCandleDataRef.current.candles;
+        cwt.oldWidth = prevCandleDataRef.current.width;
+        cwt.fromWidth = displayCandleWidth;
+        cwt.toWidth = candleWidthSecs;
+        cwt.startMs = now_ms;
+        morphT = 0;
+        cwt.rangeFromMin = displayMinRef.current;
+        cwt.rangeFromMax = displayMaxRef.current;
+        const curWindow = displayWindowRef.current;
+        const re = now + curWindow * CANDLE_BUFFER;
+        const le = re - curWindow;
+        const targetVis = [];
+        for (const c of effectiveCandles) {
+          if (c.time + candleWidthSecs >= le && c.time <= re) targetVis.push(c);
+        }
+        if (rawLive) targetVis.push(rawLive);
+        if (targetVis.length > 0) {
+          const tr = computeCandleRange(targetVis);
+          cwt.rangeToMin = tr.min;
+          cwt.rangeToMax = tr.max;
+        } else {
+          cwt.rangeToMin = displayMinRef.current;
+          cwt.rangeToMax = displayMaxRef.current;
+        }
+      }
+      prevCandleDataRef.current = { candles: cfg.candles ?? [], width: candleWidthSecs };
+      const lineModeProg = lineModeProgRef.current;
+      const ldt = lineDensityTransRef.current;
+      const hasTickData = effectiveLineData && effectiveLineData.length > 0;
+      const densityTarget = cfg.lineMode && lineModeProg >= 0.3 && hasTickData ? 1 : 0;
+      if (ldt.to !== densityTarget) {
+        ldt.from = lineDensityProgRef.current;
+        ldt.to = densityTarget;
+        ldt.startMs = now_ms;
+      }
+      let lineDensityProg;
+      if (ldt.startMs > 0) {
+        const elapsed = now_ms - ldt.startMs;
+        const t = Math.min(elapsed / LINE_DENSITY_MS, 1);
+        lineDensityProg = ldt.from + (ldt.to - ldt.from) * (1 - (1 - t) * (1 - t));
+        if (t >= 1) {
+          lineDensityProg = ldt.to;
+          ldt.startMs = 0;
+        }
+      } else {
+        lineDensityProg = ldt.to;
+      }
+      lineDensityProgRef.current = lineDensityProg;
+      const transition = windowTransitionRef.current;
+      const windowResult = updateCandleWindowTransition(
+        cfg.windowSecs,
+        transition,
+        displayWindowRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        now_ms,
+        now,
+        effectiveCandles,
+        rawLive,
+        candleWidthSecs,
+        CANDLE_BUFFER
+      );
+      displayWindowRef.current = windowResult.windowSecs;
+      const windowSecs = windowResult.windowSecs;
+      const windowTransProgress = windowResult.windowTransProgress;
+      const isWindowTransitioning = transition.startMs > 0;
+      const rightEdge = now + windowSecs * CANDLE_BUFFER;
+      const leftEdge = rightEdge - windowSecs;
+      let smoothLive;
+      if (rawLive) {
+        const prev = displayCandleRef.current;
+        if (!prev || prev.time !== rawLive.time) {
+          displayCandleRef.current = {
+            time: rawLive.time,
+            open: rawLive.open,
+            high: rawLive.open,
+            low: rawLive.open,
+            close: rawLive.open
+          };
+          liveBirthAlphaRef.current = 0;
+        } else {
+          const dc2 = displayCandleRef.current;
+          dc2.open = lerp(dc2.open, rawLive.open, CANDLE_LERP_SPEED, pausedDt);
+          dc2.high = lerp(dc2.high, rawLive.high, CANDLE_LERP_SPEED, pausedDt);
+          dc2.low = lerp(dc2.low, rawLive.low, CANDLE_LERP_SPEED, pausedDt);
+          dc2.close = lerp(dc2.close, rawLive.close, CANDLE_LERP_SPEED, pausedDt);
+        }
+        liveBirthAlphaRef.current = lerp(liveBirthAlphaRef.current, 1, 0.2, pausedDt);
+        if (liveBirthAlphaRef.current > 0.99) liveBirthAlphaRef.current = 1;
+        const dc = displayCandleRef.current;
+        const bullTarget = dc.close >= dc.open ? 1 : 0;
+        liveBullRef.current = lerp(liveBullRef.current, bullTarget, 0.12, pausedDt);
+        if (liveBullRef.current > 0.99) liveBullRef.current = 1;
+        if (liveBullRef.current < 0.01) liveBullRef.current = 0;
+        smoothLive = dc;
+      } else {
+        displayCandleRef.current = null;
+        liveBirthAlphaRef.current = 1;
+        liveBullRef.current = 0.5;
+      }
+      if (rawLive) {
+        if (!closeLineSmoothInitedRef.current) {
+          closeLineSmoothRef.current = rawLive.close;
+          closeLineSmoothInitedRef.current = true;
+        } else {
+          closeLineSmoothRef.current = lerp(closeLineSmoothRef.current, rawLive.close, CLOSE_LINE_LERP_SPEED, pausedDt);
+          const gap = Math.abs(closeLineSmoothRef.current - rawLive.close);
+          const range = displayMaxRef.current - displayMinRef.current || 1;
+          if (gap < range * 5e-4) closeLineSmoothRef.current = rawLive.close;
+        }
+      } else if (!useStash) {
+        closeLineSmoothInitedRef.current = false;
+      }
+      if (rawLive) {
+        if (!lineSmoothInitedRef.current) {
+          lineSmoothCloseRef.current = rawLive.close;
+          lineSmoothInitedRef.current = true;
+        } else {
+          const valGap = Math.abs(rawLive.close - lineSmoothCloseRef.current);
+          const prevRange = displayMaxRef.current - displayMinRef.current || 1;
+          const gapRatio = Math.min(valGap / prevRange, 1);
+          const adaptiveSpeed = LINE_LERP_BASE + (1 - gapRatio) * LINE_ADAPTIVE_BOOST;
+          lineSmoothCloseRef.current = lerp(lineSmoothCloseRef.current, rawLive.close, adaptiveSpeed, pausedDt);
+          if (valGap < prevRange * LINE_SNAP_THRESHOLD) lineSmoothCloseRef.current = rawLive.close;
+        }
+      } else if (!useStash) {
+        lineSmoothInitedRef.current = false;
+      }
+      if (effectiveLineValue !== void 0 && hasTickData) {
+        if (!lineTickSmoothInitedRef.current) {
+          lineTickSmoothRef.current = effectiveLineValue;
+          lineTickSmoothInitedRef.current = true;
+        } else {
+          const valGap = Math.abs(effectiveLineValue - lineTickSmoothRef.current);
+          const prevRange = displayMaxRef.current - displayMinRef.current || 1;
+          const gapRatio = Math.min(valGap / prevRange, 1);
+          const adaptiveSpeed = LINE_LERP_BASE + (1 - gapRatio) * LINE_ADAPTIVE_BOOST;
+          lineTickSmoothRef.current = lerp(lineTickSmoothRef.current, effectiveLineValue, adaptiveSpeed, pausedDt);
+          if (valGap < prevRange * LINE_SNAP_THRESHOLD) lineTickSmoothRef.current = effectiveLineValue;
+        }
+      } else if (!useStash) {
+        lineTickSmoothInitedRef.current = false;
+      }
+      const visible = [];
+      for (const c of effectiveCandles) {
+        if (c.time + candleWidthSecs >= leftEdge && c.time <= rightEdge) visible.push(c);
+      }
+      if (smoothLive && smoothLive.time + displayCandleWidth >= leftEdge && smoothLive.time <= rightEdge) {
+        visible.push(smoothLive);
+      }
+      let oldVisible = [];
+      if (morphT >= 0 && cwt.oldCandles.length > 0) {
+        for (const c of cwt.oldCandles) {
+          if (c.time + cwt.oldWidth >= leftEdge && c.time <= rightEdge) oldVisible.push(c);
+        }
+      }
+      if (hasData) {
+        lastCandlesRef.current = visible;
+        lastLiveRef.current = smoothLive ?? null;
+      }
+      const effectiveVisible = useStash ? lastCandlesRef.current : visible;
+      const effectiveLive = useStash ? lastLiveRef.current ?? void 0 : smoothLive;
+      const chartW = w - pad.left - pad.right;
+      const computed = effectiveVisible.length > 0 ? computeCandleRange(effectiveVisible) : { min: displayMinRef.current, max: displayMaxRef.current };
+      const rangeResult = updateCandleRange(
+        computed,
+        rangeInitedRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        isWindowTransitioning,
+        windowTransProgress,
+        transition,
+        chartH,
+        pausedDt
+      );
+      if (morphT >= 0) {
+        rangeResult.displayMin = cwt.rangeFromMin + (cwt.rangeToMin - cwt.rangeFromMin) * morphT;
+        rangeResult.displayMax = cwt.rangeFromMax + (cwt.rangeToMax - cwt.rangeFromMax) * morphT;
+        rangeResult.minVal = rangeResult.displayMin;
+        rangeResult.maxVal = rangeResult.displayMax;
+        rangeResult.valRange = rangeResult.displayMax - rangeResult.displayMin || 1e-3;
+      }
+      rangeInitedRef.current = rangeResult.rangeInited;
+      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 hoveredCandle = null;
+      let isActiveHover = false;
+      if (hoverPx !== null && hoverPx >= pad.left && hoverPx <= w - pad.right) {
+        hoveredCandle = candleAtX(effectiveVisible, hoverPx, displayCandleWidth, layout);
+        if (hoveredCandle) isActiveHover = true;
+      }
+      const scrubTarget = isActiveHover ? 1 : 0;
+      scrubAmountRef.current = lerp(scrubAmountRef.current, scrubTarget, 0.12, dt);
+      if (scrubAmountRef.current < 0.01) scrubAmountRef.current = 0;
+      if (scrubAmountRef.current > 0.99) scrubAmountRef.current = 1;
+      const scrubAmount = scrubAmountRef.current;
+      let drawHoverX = hoverPx;
+      let drawHoverTime = 0;
+      let drawHoverCandle = hoveredCandle;
+      if (!isActiveHover && scrubAmount > 0 && lastHoverRef.current) {
+        drawHoverX = lastHoverRef.current.x;
+        drawHoverTime = lastHoverRef.current.time;
+        drawHoverCandle = candleAtX(effectiveVisible, lastHoverRef.current.x, displayCandleWidth, layout);
+      } else if (isActiveHover && hoverPx !== null) {
+        drawHoverTime = layout.leftEdge + (hoverPx - pad.left) / chartW * (layout.rightEdge - layout.leftEdge);
+        lastHoverRef.current = { x: hoverPx, value: hoveredCandle?.close ?? 0, time: drawHoverTime };
+      }
+      let drawCandles = effectiveVisible;
+      let drawOldCandles = oldVisible;
+      let drawLive = effectiveLive;
+      if (lineModeProg > 0.01 && drawLive && lineSmoothInitedRef.current) {
+        const blended = drawLive.close + (lineSmoothCloseRef.current - drawLive.close) * lineModeProg;
+        drawLive = { ...drawLive, close: blended };
+        const li = drawCandles.length - 1;
+        if (li >= 0 && drawCandles[li].time === drawLive.time) {
+          drawCandles = drawCandles.slice();
+          drawCandles[li] = { ...drawCandles[li], close: blended };
+        }
+      }
+      if (lineModeProg > 0.01 && lineModeProg < 0.99) {
+        const collapseOHLC = (c) => {
+          const inv = 1 - lineModeProg;
+          return {
+            time: c.time,
+            open: c.close + (c.open - c.close) * inv,
+            high: c.close + (c.high - c.close) * inv,
+            low: c.close + (c.low - c.close) * inv,
+            close: c.close
+          };
+        };
+        drawCandles = drawCandles.map(collapseOHLC);
+        if (drawOldCandles.length > 0) drawOldCandles = drawOldCandles.map(collapseOHLC);
+        if (drawLive) drawLive = collapseOHLC(drawLive);
+      }
+      let lineVisible;
+      let lineSmoothValue;
+      if (effectiveLineData && effectiveLineData.length > 0 && (lineDensityProg > 0.01 || lineModeProg > 0.05)) {
+        const closeRefs = [];
+        for (const c of drawCandles) {
+          closeRefs.push({ t: c.time + displayCandleWidth / 2, v: c.close });
+        }
+        if (drawLive) closeRefs.push({ t: now, v: drawLive.close });
+        lineVisible = [];
+        let refIdx = 0;
+        for (const pt of effectiveLineData) {
+          if (pt.time < leftEdge || pt.time > rightEdge) continue;
+          while (refIdx < closeRefs.length - 2 && closeRefs[refIdx + 1].t < pt.time) refIdx++;
+          let interpClose;
+          if (closeRefs.length === 0) {
+            interpClose = pt.value;
+          } else if (closeRefs.length === 1 || pt.time <= closeRefs[0].t) {
+            interpClose = closeRefs[0].v;
+          } else if (refIdx >= closeRefs.length - 1) {
+            interpClose = closeRefs[closeRefs.length - 1].v;
+          } else {
+            const a = closeRefs[refIdx];
+            const b = closeRefs[refIdx + 1];
+            const span = b.t - a.t;
+            const frac = span > 0 ? Math.max(0, Math.min(1, (pt.time - a.t) / span)) : 0;
+            interpClose = a.v + (b.v - a.v) * frac;
+          }
+          const blended = interpClose + (pt.value - interpClose) * lineDensityProg;
+          lineVisible.push({ time: pt.time, value: blended });
+        }
+        const smoothTick = lineTickSmoothInitedRef.current ? lineTickSmoothRef.current : effectiveLineValue ?? effectiveLineData[effectiveLineData.length - 1].value;
+        lineSmoothValue = lineSmoothCloseRef.current + (smoothTick - lineSmoothCloseRef.current) * lineDensityProg;
+      } else {
+        lineVisible = drawCandles.map((c) => ({
+          time: c.time + displayCandleWidth / 2,
+          value: c.close
+        }));
+        lineSmoothValue = lineSmoothInitedRef.current ? lineSmoothCloseRef.current : drawLive?.close ?? drawCandles[drawCandles.length - 1]?.close ?? 0;
+      }
+      if (chartReveal < 1 && lineVisible.length >= 2) {
+        const firstTime = lineVisible[0].time;
+        const windowSpan = rightEdge - leftEdge;
+        if (firstTime - leftEdge > windowSpan * 0.05) {
+          const firstVal = lineVisible[0].value;
+          const step = windowSpan / 32;
+          const padded = [];
+          for (let t = leftEdge; t < firstTime - step * 0.5; t += step) {
+            padded.push({ time: t, value: firstVal });
+          }
+          lineVisible = [...padded, ...lineVisible];
+        }
+      }
+      drawCandleFrame(ctx, layout, cfg.palette, {
+        candles: drawCandles,
+        displayCandleWidth,
+        oldCandles: drawOldCandles,
+        oldWidth: cwt.oldWidth,
+        morphT,
+        liveCandle: drawLive,
+        closePriceCandle: closeLineSmoothInitedRef.current && rawLive ? { ...rawLive, close: closeLineSmoothRef.current } : rawLive,
+        liveTime: effectiveLive?.time ?? -1,
+        liveBirthAlpha: liveBirthAlphaRef.current,
+        liveBullBlend: liveBullRef.current,
+        lineModeProg,
+        chartReveal,
+        now_ms,
+        now,
+        pauseProgress,
+        showGrid: cfg.showGrid,
+        scrubAmount,
+        hoverX: drawHoverX,
+        hoverValue: drawHoverCandle?.close ?? null,
+        hoverTime: drawHoverTime,
+        hoveredCandle: drawHoverCandle,
+        formatValue: cfg.formatValue,
+        formatTime: cfg.formatTime,
+        gridState: gridStateRef.current,
+        timeAxisState: timeAxisStateRef.current,
+        dt: pausedDt,
+        targetWindowSecs: cfg.windowSecs,
+        tooltipY: cfg.tooltipY,
+        tooltipOutline: cfg.tooltipOutline,
+        lineVisible,
+        lineSmoothValue,
+        emptyText: cfg.emptyText,
+        loadingAlpha,
+        // Show empty overlay when not loading AND loadingAlpha has fully
+        // decayed. This prevents the gradient gap from flashing during
+        // loading→live (where loadingAlpha starts at ~1), while still
+        // allowing smooth fade-out during empty→live (loadingAlpha is 0).
+        showEmptyOverlay: !(cfg.loading ?? false) && loadingAlpha < 0.01
+      });
+      if (badgeRef.current) {
+        if (lineModeProg > 0.5 && cfg.showBadge) {
+          const momentum = detectMomentum(lineVisible);
+          badgeYRef.current = updateBadgeDOM(
+            badgeRef.current,
+            cfg,
+            lineSmoothValue,
+            layout,
+            momentum,
+            badgeYRef.current,
+            badgeColorRef.current,
+            isWindowTransitioning,
+            noMotion,
+            ctx,
+            pausedDt,
+            chartReveal
+          );
+          const badgeFade = (lineModeProg - 0.5) * 2;
+          if (badgeRef.current.container.style.display !== "none") {
+            const base = badgeRef.current.container.style.opacity ? parseFloat(badgeRef.current.container.style.opacity) : 1;
+            badgeRef.current.container.style.opacity = String(
+              base * badgeFade * (1 - pauseProgress)
+            );
+          }
+        } else {
+          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 = WINDOW_BUFFER;
+      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);
         }
       }
-    }
-    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 transition = windowTransitionRef.current;
-    if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
-    const now = useStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
-    const windowResult = updateWindowTransition(
-      cfg,
-      transition,
-      displayWindowRef.current,
-      displayMinRef.current,
-      displayMaxRef.current,
-      noMotion,
-      now_ms,
-      now,
-      effectivePoints,
-      smoothValue,
-      buffer
-    );
-    displayWindowRef.current = windowResult.windowSecs;
-    const windowSecs = windowResult.windowSecs;
-    const windowTransProgress = windowResult.windowTransProgress;
-    const rightEdge = now + windowSecs * buffer;
-    const leftEdge = rightEdge - windowSecs;
-    const filterRight = rightEdge - (rightEdge - now) * pauseProgress;
-    const visible = [];
-    for (const p of effectivePoints) {
-      if (p.time >= leftEdge - 2 && p.time <= filterRight) {
-        visible.push(p);
-      }
-    }
-    if (visible.length < 2) {
       if (badgeRef.current) badgeRef.current.container.style.display = "none";
-      rafRef.current = requestAnimationFrame(draw);
-      return;
-    }
-    const computedRange = computeRange(visible, smoothValue, cfg.referenceLine?.value, cfg.exaggerate);
-    const isWindowTransitioning = transition.startMs > 0;
-    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 momentum = cfg.momentumOverride ?? detectMomentum(visible);
-    const hoverResult = updateHoverState(
-      hoverXRef.current,
-      pad,
-      w,
-      layout,
-      now,
-      visible,
-      scrubAmountRef.current,
-      lastHoverRef.current,
-      cfg,
-      noMotion,
-      leftEdge,
-      rightEdge,
-      chartW,
-      dt
-    );
-    scrubAmountRef.current = hoverResult.scrubAmount;
-    lastHoverRef.current = hoverResult.lastHover;
-    const { hoverX: drawHoverX, hoverValue: drawHoverValue, hoverTime: drawHoverTime } = hoverResult;
-    const lookback = Math.min(5, visible.length - 1);
-    const recentDelta = lookback > 0 ? Math.abs(visible[visible.length - 1].value - visible[visible.length - 1 - lookback].value) : 0;
-    const swingMagnitude = valRange > 0 ? Math.min(recentDelta / valRange, 1) : 0;
-    drawFrame(ctx, layout, cfg.palette, {
-      visible,
-      smoothValue,
-      now,
-      momentum,
-      arrowState: arrowStateRef.current,
-      showGrid: cfg.showGrid,
-      showMomentum: cfg.showMomentum,
-      showPulse: cfg.showPulse,
-      showFill: cfg.showFill,
-      referenceLine: cfg.referenceLine,
-      hoverX: drawHoverX,
-      hoverValue: drawHoverValue,
-      hoverTime: drawHoverTime,
-      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,
-      orderbookData: cfg.orderbookData,
-      orderbookState: cfg.orderbookData ? orderbookStateRef.current : void 0,
-      particleState: cfg.degenOptions ? particleStateRef.current : void 0,
-      particleOptions: cfg.degenOptions,
-      swingMagnitude,
-      shakeState: cfg.degenOptions ? shakeStateRef.current : void 0,
-      chartReveal,
-      pauseProgress,
-      now_ms
-    });
-    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);
+    } else {
+      const effectivePoints = useStash ? lastDataRef.current : points;
+      const adaptiveSpeed = computeAdaptiveSpeed(
+        cfg.value,
+        displayValueRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        cfg.lerpSpeed,
+        noMotion
+      );
+      if (!useStash) {
+        displayValueRef.current = lerp(displayValueRef.current, cfg.value, adaptiveSpeed, pausedDt);
+        if (pauseProgress < 0.5) {
+          const prevRange = displayMaxRef.current - displayMinRef.current || 1;
+          if (Math.abs(displayValueRef.current - cfg.value) < prevRange * VALUE_SNAP_THRESHOLD) {
+            displayValueRef.current = cfg.value;
+          }
+        }
       }
-    }
-    const badge = badgeRef.current;
-    if (badge) {
-      badgeYRef.current = updateBadgeDOM(
-        badge,
+      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 transition = windowTransitionRef.current;
+      if (hasData) frozenNowRef.current = Date.now() / 1e3 - timeDebtRef.current;
+      const now = useStash ? frozenNowRef.current : Date.now() / 1e3 - timeDebtRef.current;
+      const windowResult = updateWindowTransition(
         cfg,
+        transition,
+        displayWindowRef.current,
+        displayMinRef.current,
+        displayMaxRef.current,
+        noMotion,
+        now_ms,
+        now,
+        effectivePoints,
         smoothValue,
-        layout,
-        momentum,
-        badgeYRef.current,
-        badgeColorRef.current,
+        buffer
+      );
+      displayWindowRef.current = windowResult.windowSecs;
+      const windowSecs = windowResult.windowSecs;
+      const windowTransProgress = windowResult.windowTransProgress;
+      const rightEdge = now + windowSecs * buffer;
+      const leftEdge = rightEdge - windowSecs;
+      const filterRight = rightEdge - (rightEdge - now) * pauseProgress;
+      const visible = [];
+      for (const p of effectivePoints) {
+        if (p.time >= leftEdge - 2 && p.time <= filterRight) {
+          visible.push(p);
+        }
+      }
+      if (visible.length < 2) {
+        if (badgeRef.current) badgeRef.current.container.style.display = "none";
+        rafRef.current = requestAnimationFrame(draw);
+        return;
+      }
+      const computedRange = computeRange(visible, smoothValue, cfg.referenceLine?.value, cfg.exaggerate);
+      const isWindowTransitioning = transition.startMs > 0;
+      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 momentum = cfg.momentumOverride ?? detectMomentum(visible);
+      const hoverResult = updateHoverState(
+        hoverXRef.current,
+        pad,
+        w,
+        layout,
+        now,
+        visible,
+        scrubAmountRef.current,
+        lastHoverRef.current,
+        cfg,
         noMotion,
-        ctx,
-        pausedDt,
-        chartReveal
+        leftEdge,
+        rightEdge,
+        chartW,
+        dt
       );
-      if (pauseProgress > 0.01 && badge.container.style.display !== "none") {
-        const base = badge.container.style.opacity ? parseFloat(badge.container.style.opacity) : 1;
-        badge.container.style.opacity = String(base * (1 - pauseProgress));
+      scrubAmountRef.current = hoverResult.scrubAmount;
+      lastHoverRef.current = hoverResult.lastHover;
+      const { hoverX: drawHoverX, hoverValue: drawHoverValue, hoverTime: drawHoverTime } = hoverResult;
+      const lookback = Math.min(5, visible.length - 1);
+      const recentDelta = lookback > 0 ? Math.abs(visible[visible.length - 1].value - visible[visible.length - 1 - lookback].value) : 0;
+      const swingMagnitude = valRange > 0 ? Math.min(recentDelta / valRange, 1) : 0;
+      drawFrame(ctx, layout, cfg.palette, {
+        visible,
+        smoothValue,
+        now,
+        momentum,
+        arrowState: arrowStateRef.current,
+        showGrid: cfg.showGrid,
+        showMomentum: cfg.showMomentum,
+        showPulse: cfg.showPulse,
+        showFill: cfg.showFill,
+        referenceLine: cfg.referenceLine,
+        hoverX: drawHoverX,
+        hoverValue: drawHoverValue,
+        hoverTime: drawHoverTime,
+        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,
+        orderbookData: cfg.orderbookData,
+        orderbookState: cfg.orderbookData ? orderbookStateRef.current : void 0,
+        particleState: cfg.degenOptions ? particleStateRef.current : void 0,
+        particleOptions: cfg.degenOptions,
+        swingMagnitude,
+        shakeState: cfg.degenOptions ? shakeStateRef.current : void 0,
+        chartReveal,
+        pauseProgress,
+        now_ms
+      });
+      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);
+        }
       }
-    }
-    const valEl = cfg.valueDisplayRef?.current;
-    if (valEl) {
-      const displayVal = cfg.valueMomentumColor ? Math.abs(smoothValue) : smoothValue;
-      valEl.textContent = cfg.formatValue(displayVal);
-      if (cfg.valueMomentumColor) {
-        const mc = momentum === "up" ? "#22c55e" : momentum === "down" ? "#ef4444" : "";
-        if (mc) valEl.style.color = mc;
-        else valEl.style.removeProperty("color");
+      const badge = badgeRef.current;
+      if (badge) {
+        badgeYRef.current = updateBadgeDOM(
+          badge,
+          cfg,
+          smoothValue,
+          layout,
+          momentum,
+          badgeYRef.current,
+          badgeColorRef.current,
+          isWindowTransitioning,
+          noMotion,
+          ctx,
+          pausedDt,
+          chartReveal
+        );
+        if (pauseProgress > 0.01 && badge.container.style.display !== "none") {
+          const base = badge.container.style.opacity ? parseFloat(badge.container.style.opacity) : 1;
+          badge.container.style.opacity = String(base * (1 - pauseProgress));
+        }
+      }
+      const valEl = cfg.valueDisplayRef?.current;
+      if (valEl) {
+        const displayVal = cfg.valueMomentumColor ? Math.abs(smoothValue) : smoothValue;
+        valEl.textContent = cfg.formatValue(displayVal);
+        if (cfg.valueMomentumColor) {
+          const mc = momentum === "up" ? "#22c55e" : momentum === "down" ? "#ef4444" : "";
+          if (mc) valEl.style.color = mc;
+          else valEl.style.removeProperty("color");
+        }
       }
     }
     rafRef.current = requestAnimationFrame(draw);
@@ -1868,6 +3487,7 @@ var defaultFormatTime = (t) => {
 function Liveline({
   data,
   value,
+  series: seriesProp,
   theme = "dark",
   color = "#3b82f6",
   window: windowSecs = 30,
@@ -1899,6 +3519,16 @@ function Liveline({
   onHover,
   cursor = "crosshair",
   pulse = true,
+  mode = "line",
+  candles,
+  candleWidth,
+  liveCandle,
+  lineMode,
+  lineData,
+  lineValue,
+  onModeChange,
+  onSeriesToggle,
+  seriesToggleCompact = false,
   className,
   style
 }) {
@@ -1908,8 +3538,30 @@ function Liveline({
   const windowBarRef = useRef2(null);
   const windowBtnRefs = useRef2(/* @__PURE__ */ new Map());
   const [indicatorStyle, setIndicatorStyle] = useState(null);
+  const modeBarRef = useRef2(null);
+  const modeBtnRefs = useRef2(/* @__PURE__ */ new Map());
+  const [modeIndicatorStyle, setModeIndicatorStyle] = useState(null);
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const lastSeriesPropRef = useRef2(seriesProp);
+  if (seriesProp && seriesProp.length > 0) lastSeriesPropRef.current = seriesProp;
   const palette = useMemo(() => resolveTheme(color, theme), [color, theme]);
   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 pad = {
@@ -1937,6 +3589,36 @@ function Liveline({
       });
     }
   }, [activeWindowSecs, windows]);
+  const activeMode = lineMode ? "line" : "candle";
+  useLayoutEffect(() => {
+    if (!onModeChange) return;
+    const btn = modeBtnRefs.current.get(activeMode);
+    const bar = modeBarRef.current;
+    if (btn && bar) {
+      const barRect = bar.getBoundingClientRect();
+      const btnRect = btn.getBoundingClientRect();
+      setModeIndicatorStyle({
+        left: btnRect.left - barRect.left,
+        width: btnRect.width
+      });
+    }
+  }, [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,
@@ -1945,10 +3627,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,
@@ -1957,7 +3639,7 @@ function Liveline({
     showPulse: pulse,
     scrub,
     exaggerate,
-    degenOptions,
+    degenOptions: isMultiSeries ? void 0 : degenOptions,
     badgeTail,
     badgeVariant,
     tooltipY,
@@ -1967,9 +3649,21 @@ function Liveline({
     orderbookData: orderbook,
     loading,
     paused,
-    emptyText
+    emptyText,
+    mode,
+    candles,
+    candleWidth,
+    liveCandle,
+    lineMode,
+    lineData,
+    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)";
+  const inactiveColor = isDark ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.22)";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showValue && /* @__PURE__ */ jsx(
       "span",
@@ -1989,68 +3683,244 @@ function Liveline({
         }
       }
     ),
-    windows && windows.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: windowBarRef,
-        style: {
-          position: "relative",
-          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,
-          marginBottom: 6,
-          marginLeft: pad.left
-        },
-        children: [
-          ws !== "text" && indicatorStyle && /* @__PURE__ */ jsx("div", { style: {
-            position: "absolute",
-            top: ws === "rounded" ? 3 : 2,
-            left: indicatorStyle.left,
-            width: indicatorStyle.width,
-            height: ws === "rounded" ? "calc(100% - 6px)" : "calc(100% - 4px)",
-            background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
-            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"
-          } }),
-          windows.map((w) => {
-            const isActive = w.secs === activeWindowSecs;
-            return /* @__PURE__ */ jsx(
+    (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",
+        {
+          ref: windowBarRef,
+          style: {
+            position: "relative",
+            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
+          },
+          children: [
+            ws !== "text" && indicatorStyle && /* @__PURE__ */ jsx("div", { style: {
+              position: "absolute",
+              top: ws === "rounded" ? 3 : 2,
+              left: indicatorStyle.left,
+              width: indicatorStyle.width,
+              height: ws === "rounded" ? "calc(100% - 6px)" : "calc(100% - 4px)",
+              background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
+              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"
+            } }),
+            windows.map((w) => {
+              const isActive = w.secs === activeWindowSecs;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (el) => {
+                    if (el) windowBtnRefs.current.set(w.secs, el);
+                    else windowBtnRefs.current.delete(w.secs);
+                  },
+                  onClick: () => {
+                    setActiveWindowSecs(w.secs);
+                    onWindowChange?.(w.secs);
+                  },
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    fontSize: 11,
+                    padding: ws === "text" ? "2px 6px" : "3px 10px",
+                    borderRadius: ws === "rounded" ? 999 : 4,
+                    border: "none",
+                    cursor: "pointer",
+                    fontFamily: "system-ui, -apple-system, sans-serif",
+                    fontWeight: isActive ? 600 : 400,
+                    background: "transparent",
+                    color: isActive ? activeColor : inactiveColor,
+                    transition: "color 0.2s, background 0.15s",
+                    lineHeight: "16px"
+                  },
+                  children: w.label
+                },
+                w.secs
+              );
+            })
+          ]
+        }
+      ),
+      onModeChange && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: modeBarRef,
+          style: {
+            position: "relative",
+            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
+          },
+          children: [
+            ws !== "text" && modeIndicatorStyle && /* @__PURE__ */ jsx("div", { style: {
+              position: "absolute",
+              top: ws === "rounded" ? 3 : 2,
+              left: modeIndicatorStyle.left,
+              width: modeIndicatorStyle.width,
+              height: ws === "rounded" ? "calc(100% - 6px)" : "calc(100% - 4px)",
+              background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
+              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"
+            } }),
+            /* @__PURE__ */ jsx(
               "button",
               {
                 ref: (el) => {
-                  if (el) windowBtnRefs.current.set(w.secs, el);
-                  else windowBtnRefs.current.delete(w.secs);
+                  if (el) modeBtnRefs.current.set("line", el);
+                  else modeBtnRefs.current.delete("line");
                 },
-                onClick: () => {
-                  setActiveWindowSecs(w.secs);
-                  onWindowChange?.(w.secs);
+                onClick: () => onModeChange("line"),
+                style: {
+                  position: "relative",
+                  zIndex: 1,
+                  padding: "5px 7px",
+                  borderRadius: ws === "rounded" ? 999 : 4,
+                  border: "none",
+                  cursor: "pointer",
+                  background: "transparent",
+                  display: "flex",
+                  alignItems: "center"
                 },
+                children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M1 8.5C2.5 8.5 3 4 5.5 4S7.5 7 8.5 7C9.5 7 10 3.5 11 3.5",
+                    stroke: activeMode === "line" ? activeColor : inactiveColor,
+                    strokeWidth: activeMode === "line" ? 1.5 : 1.2,
+                    strokeLinecap: "round",
+                    fill: "none"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (el) => {
+                  if (el) modeBtnRefs.current.set("candle", el);
+                  else modeBtnRefs.current.delete("candle");
+                },
+                onClick: () => onModeChange("candle"),
                 style: {
                   position: "relative",
                   zIndex: 1,
-                  fontSize: 11,
-                  padding: ws === "text" ? "2px 6px" : "3px 10px",
+                  padding: "5px 7px",
                   borderRadius: ws === "rounded" ? 999 : 4,
                   border: "none",
                   cursor: "pointer",
-                  fontFamily: "system-ui, -apple-system, sans-serif",
-                  fontWeight: isActive ? 600 : 400,
                   background: "transparent",
-                  color: isActive ? isDark ? "rgba(255,255,255,0.7)" : "rgba(0,0,0,0.55)" : isDark ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.22)",
-                  transition: "color 0.2s, background 0.15s",
-                  lineHeight: "16px"
+                  display: "flex",
+                  alignItems: "center"
                 },
-                children: w.label
-              },
-              w.secs
-            );
-          })
-        ]
-      }
-    ),
+                children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: "3.5",
+                      y1: "1",
+                      x2: "3.5",
+                      y2: "11",
+                      stroke: activeMode === "candle" ? activeColor : inactiveColor,
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: "2",
+                      y: "3",
+                      width: "3",
+                      height: "5",
+                      rx: "0.5",
+                      fill: activeMode === "candle" ? activeColor : inactiveColor
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: "8.5",
+                      y1: "2",
+                      x2: "8.5",
+                      y2: "10",
+                      stroke: activeMode === "candle" ? activeColor : inactiveColor,
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: "7",
+                      y: "4",
+                      width: "3",
+                      height: "4",
+                      rx: "0.5",
+                      fill: activeMode === "candle" ? activeColor : inactiveColor
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      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",
       {
@@ -2073,6 +3943,63 @@ function Liveline({
     )
   ] });
 }
+
+// src/LivelineTransition.tsx
+import { useState as useState2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function LivelineTransition({
+  active,
+  children,
+  duration = 300,
+  className,
+  style
+}) {
+  const childArray = Array.isArray(children) ? children : [children];
+  const [mounted, setMounted] = useState2(() => /* @__PURE__ */ new Set([active]));
+  const [visible, setVisible] = useState2(active);
+  const prevRef = useRef3(active);
+  useEffect2(() => {
+    if (active === prevRef.current) return () => {
+    };
+    const oldKey = prevRef.current;
+    prevRef.current = active;
+    setMounted((prev) => /* @__PURE__ */ new Set([...prev, active]));
+    let raf1 = requestAnimationFrame(() => {
+      raf1 = requestAnimationFrame(() => setVisible(active));
+    });
+    const timer = setTimeout(() => {
+      setMounted((prev) => {
+        const next = new Set(prev);
+        next.delete(oldKey);
+        return next;
+      });
+    }, duration + 50);
+    return () => {
+      cancelAnimationFrame(raf1);
+      clearTimeout(timer);
+    };
+  }, [active, duration]);
+  return /* @__PURE__ */ jsx2("div", { className, style: { position: "relative", width: "100%", height: "100%", ...style }, children: childArray.map((child) => {
+    const key = String(child.key ?? "");
+    if (!mounted.has(key)) return null;
+    const isActive = key === visible;
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          opacity: isActive ? 1 : 0,
+          transition: `opacity ${duration}ms ease`,
+          pointerEvents: isActive ? "auto" : "none"
+        },
+        children: child
+      },
+      key
+    );
+  }) });
+}
 export {
-  Liveline
+  Liveline,
+  LivelineTransition
 };