liveline 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,17 +1,23 @@
 // src/Liveline.tsx
-import { useRef as useRef2, useState, useLayoutEffect } from "react";
+import { useRef as useRef2, useState, useLayoutEffect, useMemo } from "react";
 
 // src/theme.ts
-function hexToRgb(hex) {
-  const h = hex.replace("#", "");
-  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
-  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+function parseColorRgb(color) {
+  const hex = color.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+  const rgb = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgb) return [+rgb[1], +rgb[2], +rgb[3]];
+  return [128, 128, 128];
 }
 function rgba(r, g, b, a) {
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 }
 function resolveTheme(color, mode) {
-  const [r, g, b] = hexToRgb(color);
+  const [r, g, b] = parseColorRgb(color);
   const isDark = mode === "dark";
   return {
     // Line
@@ -97,18 +103,19 @@ function computeRange(visible, currentValue, referenceValue, exaggerate) {
 // src/math/momentum.ts
 function detectMomentum(points, lookback = 20) {
   if (points.length < 5) return "flat";
-  const recent = points.slice(-lookback);
+  const start = Math.max(0, points.length - lookback);
   let min = Infinity;
   let max = -Infinity;
-  for (const p of recent) {
-    if (p.value < min) min = p.value;
-    if (p.value > max) max = p.value;
+  for (let i = start; i < points.length; i++) {
+    const v = points[i].value;
+    if (v < min) min = v;
+    if (v > max) max = v;
   }
   const range = max - min;
   if (range === 0) return "flat";
-  const tail = recent.slice(-5);
-  const first = tail[0].value;
-  const last = tail[tail.length - 1].value;
+  const tailStart = Math.max(start, points.length - 5);
+  const first = points[tailStart].value;
+  const last = points[points.length - 1].value;
   const delta = last - first;
   const threshold = range * 0.12;
   if (delta > threshold) return "up";
@@ -130,7 +137,9 @@ function interpolateAtTime(points, time) {
   }
   const p1 = points[lo];
   const p2 = points[hi];
-  const t = (time - p1.time) / (p2.time - p1.time);
+  const dt = p2.time - p1.time;
+  if (dt === 0) return p1.value;
+  const t = (time - p1.time) / dt;
   return p1.value + (p2.value - p1.value) * t;
 }
 
@@ -212,6 +221,7 @@ function drawGrid(ctx, layout, palette, formatValue, state, dt) {
       state.labels.set(key, target * FADE_IN);
     }
   }
+  const baseAlpha = ctx.globalAlpha;
   ctx.setLineDash([1, 3]);
   ctx.lineWidth = 1;
   ctx.font = palette.labelFont;
@@ -222,7 +232,7 @@ function drawGrid(ctx, layout, palette, formatValue, state, dt) {
     const y = toY(val);
     if (y < pad.top - 10 || y > h - pad.bottom + 10) continue;
     ctx.save();
-    ctx.globalAlpha = alpha;
+    ctx.globalAlpha = baseAlpha * alpha;
     ctx.strokeStyle = palette.gridLine;
     ctx.beginPath();
     ctx.moveTo(pad.left, y);
@@ -287,10 +297,47 @@ function drawSpline(ctx, pts) {
   }
 }
 
+// src/draw/loadingShape.ts
+var LOADING_AMPLITUDE_RATIO = 0.07;
+var LOADING_SCROLL_SPEED = 1e-3;
+function loadingY(t, centerY, amplitude, scroll) {
+  return centerY + amplitude * (Math.sin(t * 9.4 + scroll) * 0.55 + Math.sin(t * 15.7 + scroll * 1.3) * 0.3 + Math.sin(t * 4.2 + scroll * 0.7) * 0.15);
+}
+function loadingBreath(now_ms) {
+  return 0.22 + 0.08 * Math.sin(now_ms / 1200 * Math.PI);
+}
+
 // src/draw/line.ts
-function renderCurve(ctx, layout, palette, pts, showFill) {
+function parseRgba(color) {
+  const hex = color.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16), 1];
+  }
+  const rgba2 = color.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)/);
+  if (rgba2) return [+rgba2[1], +rgba2[2], +rgba2[3], +rgba2[4]];
+  const rgb = color.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgb) return [+rgb[1], +rgb[2], +rgb[3], 1];
+  return [128, 128, 128, 1];
+}
+function blendColor(c1, c2, t) {
+  if (t <= 0) return c1;
+  if (t >= 1) return c2;
+  const [r1, g1, b1, a1] = parseRgba(c1);
+  const [r2, g2, b2, a2] = parseRgba(c2);
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const b = Math.round(b1 + (b2 - b1) * t);
+  const a = a1 + (a2 - a1) * t;
+  if (a >= 0.995) return `rgb(${r},${g},${b})`;
+  return `rgba(${r},${g},${b},${a.toFixed(3)})`;
+}
+function renderCurve(ctx, layout, palette, pts, showFill, lineAlpha = 1, fillAlpha = 1, strokeColor) {
   const { h, pad } = layout;
-  if (showFill) {
+  const baseAlpha = ctx.globalAlpha;
+  if (showFill && fillAlpha > 0.01) {
+    ctx.globalAlpha = baseAlpha * fillAlpha;
     const grad = ctx.createLinearGradient(0, pad.top, 0, h - pad.bottom);
     grad.addColorStop(0, palette.fillTop);
     grad.addColorStop(1, palette.fillBottom);
@@ -303,25 +350,52 @@ function renderCurve(ctx, layout, palette, pts, showFill) {
     ctx.fillStyle = grad;
     ctx.fill();
   }
+  ctx.globalAlpha = baseAlpha * lineAlpha;
   ctx.beginPath();
   ctx.moveTo(pts[0][0], pts[0][1]);
   drawSpline(ctx, pts);
-  ctx.strokeStyle = palette.line;
+  ctx.strokeStyle = strokeColor ?? palette.line;
   ctx.lineWidth = palette.lineWidth;
   ctx.lineJoin = "round";
   ctx.lineCap = "round";
   ctx.stroke();
+  ctx.globalAlpha = baseAlpha;
 }
-function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scrubX, scrubAmount = 0) {
-  const { w, h, pad, toX, toY, chartW, chartH } = layout;
+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));
-  const pts = visible.map(
-    (p, i) => i === visible.length - 1 ? [toX(p.time), clampY(toY(smoothValue))] : [toX(p.time), clampY(toY(p.value))]
-  );
-  pts.push([toX(now), clampY(toY(smoothValue))]);
+  const centerY = pad.top + chartH / 2;
+  const amplitude = chartH * LOADING_AMPLITUDE_RATIO;
+  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) * localReveal;
+  } : (rawY, _x) => rawY;
+  const pts = visible.map((p, i) => {
+    const x = toX(p.time);
+    const y = i === visible.length - 1 ? morphY(clampY(toY(smoothValue)), x) : morphY(clampY(toY(p.value)), x);
+    return [x, y];
+  });
+  const liveTipX = toX(now);
+  const fullRightX = pad.left + chartW;
+  const tipX = chartReveal < 1 ? liveTipX + (fullRightX - liveTipX) * (1 - chartReveal) : liveTipX;
+  pts.push([tipX, morphY(clampY(toY(smoothValue)), tipX)]);
   if (pts.length < 2) return;
+  let lineAlpha = 1;
+  let fillAlpha = fillScale;
+  if (chartReveal < 1) {
+    const breath = loadingBreath(now_ms);
+    lineAlpha = breath + (1 - breath) * chartReveal;
+    fillAlpha = chartReveal * fillScale;
+  }
+  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();
@@ -332,30 +406,34 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
     ctx.beginPath();
     ctx.rect(0, 0, scrubX, h);
     ctx.clip();
-    renderCurve(ctx, layout, palette, pts, showFill);
+    renderCurve(ctx, layout, palette, pts, showFill, lineAlpha, fillAlpha, strokeColor);
     ctx.restore();
     ctx.save();
     ctx.beginPath();
     ctx.rect(scrubX, 0, layout.w - scrubX, h);
     ctx.clip();
-    ctx.globalAlpha = 1 - scrubAmount * 0.6;
-    renderCurve(ctx, layout, palette, pts, showFill);
+    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);
+    renderCurve(ctx, layout, palette, pts, showFill, lineAlpha, fillAlpha, strokeColor);
   }
   ctx.restore();
-  const currentY = Math.max(pad.top, Math.min(h - pad.bottom, toY(smoothValue)));
-  ctx.setLineDash([4, 4]);
-  ctx.strokeStyle = palette.dashLine;
-  ctx.lineWidth = 1;
-  if (isScrubbing) ctx.globalAlpha = 1 - scrubAmount * 0.2;
-  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;
@@ -364,27 +442,17 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
 // src/draw/dot.ts
 var PULSE_INTERVAL = 1500;
 var PULSE_DURATION = 900;
-function parseColor(color) {
-  const hex = color.match(/^#([0-9a-f]{3,8})$/i);
-  if (hex) {
-    let h = hex[1];
-    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
-    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
-  }
-  const rgb = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-  if (rgb) return [+rgb[1], +rgb[2], +rgb[3]];
-  return null;
-}
 function lerpColor(a, b, t) {
   const r = Math.round(a[0] + (b[0] - a[0]) * t);
   const g = Math.round(a[1] + (b[1] - a[1]) * t);
   const bl = Math.round(a[2] + (b[2] - a[2]) * t);
   return `rgb(${r},${g},${bl})`;
 }
-function drawDot(ctx, x, y, palette, pulse = true, scrubAmount = 0) {
+function drawDot(ctx, x, y, palette, pulse = true, scrubAmount = 0, now_ms = performance.now()) {
+  const baseAlpha = ctx.globalAlpha;
   const dim = scrubAmount * 0.7;
   if (pulse && dim < 0.3) {
-    const t = Date.now() % PULSE_INTERVAL / PULSE_DURATION;
+    const t = now_ms % PULSE_INTERVAL / PULSE_DURATION;
     if (t < 1) {
       const radius = 9 + t * 12;
       const pulseAlpha = 0.35 * (1 - t) * (1 - dim * 3);
@@ -392,13 +460,13 @@ function drawDot(ctx, x, y, palette, pulse = true, scrubAmount = 0) {
       ctx.arc(x, y, radius, 0, Math.PI * 2);
       ctx.strokeStyle = palette.line;
       ctx.lineWidth = 1.5;
-      ctx.globalAlpha = pulseAlpha;
+      ctx.globalAlpha = baseAlpha * pulseAlpha;
       ctx.stroke();
     }
   }
-  const outerRgb = parseColor(palette.badgeOuterBg) ?? [255, 255, 255];
+  const outerRgb = parseColorRgb(palette.badgeOuterBg);
   ctx.save();
-  ctx.globalAlpha = 1;
+  ctx.globalAlpha = baseAlpha;
   ctx.shadowColor = palette.badgeOuterShadow;
   ctx.shadowBlur = 6 * (1 - dim);
   ctx.shadowOffsetY = 1;
@@ -407,18 +475,19 @@ function drawDot(ctx, x, y, palette, pulse = true, scrubAmount = 0) {
   ctx.fillStyle = palette.badgeOuterBg;
   ctx.fill();
   ctx.restore();
-  ctx.globalAlpha = 1;
+  ctx.globalAlpha = baseAlpha;
   ctx.beginPath();
   ctx.arc(x, y, 3.5, 0, Math.PI * 2);
   if (dim > 0.01) {
-    const lineRgb = parseColor(palette.line) ?? [100, 100, 255];
+    const lineRgb = parseColorRgb(palette.line);
     ctx.fillStyle = lerpColor(lineRgb, outerRgb, dim);
   } else {
     ctx.fillStyle = palette.line;
   }
   ctx.fill();
 }
-function drawArrows(ctx, x, y, momentum, palette, arrows, dt) {
+function drawArrows(ctx, x, y, momentum, palette, arrows, dt, now_ms = performance.now()) {
+  const baseAlpha = ctx.globalAlpha;
   const upTarget = momentum === "up" ? 1 : 0;
   const downTarget = momentum === "down" ? 1 : 0;
   const canFadeInUp = arrows.down < 0.02;
@@ -429,7 +498,7 @@ function drawArrows(ctx, x, y, momentum, palette, arrows, dt) {
   if (arrows.down < 0.01) arrows.down = 0;
   if (arrows.up > 0.99) arrows.up = 1;
   if (arrows.down > 0.99) arrows.down = 1;
-  const cycle = Date.now() % 1400 / 1400;
+  const cycle = now_ms % 1400 / 1400;
   const drawChevrons = (dir, opacity) => {
     if (opacity < 0.01) return;
     const baseX = x + 19;
@@ -445,7 +514,7 @@ function drawArrows(ctx, x, y, momentum, palette, arrows, dt) {
       const localT = cycle - start;
       const wave = localT >= 0 && localT < dur ? Math.sin(localT / dur * Math.PI) : 0;
       const pulse = 0.3 + 0.7 * wave;
-      ctx.globalAlpha = opacity * pulse;
+      ctx.globalAlpha = baseAlpha * opacity * pulse;
       const nudge = dir === -1 ? -3 : 3;
       const cy = baseY + dir * (i * 8 - 4) + nudge;
       ctx.beginPath();
@@ -458,13 +527,13 @@ function drawArrows(ctx, x, y, momentum, palette, arrows, dt) {
   };
   drawChevrons(-1, arrows.up);
   drawChevrons(1, arrows.down);
-  ctx.globalAlpha = 1;
+  ctx.globalAlpha = baseAlpha;
 }
 
 // src/draw/crosshair.ts
 function drawCrosshair(ctx, layout, palette, hoverX, hoverValue, hoverTime, formatValue, formatTime, scrubOpacity, tooltipY, liveDotX, tooltipOutline) {
   if (scrubOpacity < 0.01) return;
-  const { w, h, pad, toY } = layout;
+  const { h, pad, toY } = layout;
   const y = toY(hoverValue);
   ctx.save();
   ctx.globalAlpha = scrubOpacity * 0.5;
@@ -496,7 +565,7 @@ function drawCrosshair(ctx, layout, palette, hoverX, hoverValue, hoverTime, form
   const totalW = valueW + sepW + timeW;
   let tx = hoverX - totalW / 2;
   const minX = pad.left + 4;
-  const dotRightEdge = liveDotX != null ? liveDotX + 7 : w - pad.right;
+  const dotRightEdge = liveDotX != null ? liveDotX + 7 : layout.w - pad.right;
   const maxX = dotRightEdge - totalW;
   if (tx < minX) tx = minX;
   if (tx > maxX) tx = maxX;
@@ -571,7 +640,7 @@ function niceTimeInterval(windowSecs) {
 
 // src/draw/timeAxis.ts
 var FADE = 0.08;
-function drawTimeAxis(ctx, layout, palette, windowSecs, _targetWindowSecs, formatTime, state, dt) {
+function drawTimeAxis(ctx, layout, palette, windowSecs, targetWindowSecs, formatTime, state, dt) {
   const { h, pad, leftEdge, rightEdge, toX } = layout;
   const chartLeft = pad.left;
   const chartRight = layout.w - pad.right;
@@ -586,9 +655,9 @@ function drawTimeAxis(ctx, layout, palette, windowSecs, _targetWindowSecs, forma
     return fromEdge / fadeZone;
   };
   ctx.font = palette.labelFont;
-  const targetPxPerSec = chartW / _targetWindowSecs;
-  let interval = niceTimeInterval(_targetWindowSecs);
-  while (interval * targetPxPerSec < 60 && interval < _targetWindowSecs) {
+  const targetPxPerSec = chartW / targetWindowSecs;
+  let interval = niceTimeInterval(targetWindowSecs);
+  while (interval * targetPxPerSec < 60 && interval < targetWindowSecs) {
     interval *= 2;
   }
   const useLocalDays = interval >= 86400;
@@ -625,6 +694,7 @@ function drawTimeAxis(ctx, layout, palette, windowSecs, _targetWindowSecs, forma
       label.alpha = next;
     }
   }
+  const baseAlpha = ctx.globalAlpha;
   const lineY = h - pad.bottom;
   const tickLen = 5;
   ctx.strokeStyle = palette.gridLine;
@@ -660,7 +730,7 @@ function drawTimeAxis(ctx, layout, palette, windowSecs, _targetWindowSecs, forma
   }
   for (const label of drawn) {
     ctx.save();
-    ctx.globalAlpha = label.alpha;
+    ctx.globalAlpha = baseAlpha * label.alpha;
     ctx.strokeStyle = palette.gridLine;
     ctx.lineWidth = 1;
     ctx.beginPath();
@@ -781,11 +851,12 @@ function drawOrderbook(ctx, layout, palette, orderbook, dt, state, swingMagnitud
     state.labels[writeIdx++] = l;
   }
   state.labels.length = writeIdx;
+  const baseAlpha = ctx.globalAlpha;
   ctx.save();
   ctx.font = '600 13px "SF Mono", Menlo, monospace';
   ctx.textAlign = "left";
   ctx.textBaseline = "middle";
-  ctx.globalAlpha = 1;
+  ctx.globalAlpha = baseAlpha;
   const outlineColor = `rgb(${bg[0]},${bg[1]},${bg[2]})`;
   for (let i = 0; i < state.labels.length; i++) {
     const l = state.labels[i];
@@ -879,6 +950,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;
@@ -902,18 +1304,44 @@ function drawFrame(ctx, layout, palette, opts) {
     shake.amplitude *= decayRate;
     if (shake.amplitude < SHAKE_MIN_AMPLITUDE) shake.amplitude = 0;
   }
-  if (opts.referenceLine) {
+  const reveal = opts.chartReveal;
+  const pause = opts.pauseProgress;
+  const revealRamp = (start, end) => {
+    const t = Math.max(0, Math.min(1, (reveal - start) / (end - start)));
+    return t * t * (3 - 2 * t);
+  };
+  if (opts.referenceLine && reveal > 0.01) {
+    ctx.save();
+    if (reveal < 1) ctx.globalAlpha = reveal;
     drawReferenceLine(ctx, layout, palette, opts.referenceLine);
+    ctx.restore();
   }
   if (opts.showGrid) {
-    drawGrid(ctx, layout, palette, opts.formatValue, opts.gridState, opts.dt);
+    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();
+    }
   }
-  if (opts.orderbookData && opts.orderbookState) {
+  if (opts.orderbookData && opts.orderbookState && reveal > 0.01) {
+    ctx.save();
+    if (reveal < 1) ctx.globalAlpha = reveal;
     drawOrderbook(ctx, layout, palette, opts.orderbookData, opts.dt, opts.orderbookState, opts.swingMagnitude);
+    ctx.restore();
   }
   const scrubX = opts.scrubAmount > 0.05 ? opts.hoverX : null;
-  const pts = drawLine(ctx, layout, palette, opts.visible, opts.smoothValue, opts.now, opts.showFill, scrubX, opts.scrubAmount);
-  drawTimeAxis(ctx, layout, palette, opts.windowSecs, opts.targetWindowSecs, opts.formatTime, opts.timeAxisState, opts.dt);
+  const pts = drawLine(ctx, layout, palette, opts.visible, opts.smoothValue, opts.now, opts.showFill, scrubX, opts.scrubAmount, reveal, opts.now_ms);
+  {
+    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 (pts && pts.length > 0) {
     const lastPt = pts[pts.length - 1];
     let dotScrub = opts.scrubAmount;
@@ -922,19 +1350,34 @@ function drawFrame(ctx, layout, palette, opts) {
       const fadeStart = Math.min(80, layout.chartW * 0.3);
       dotScrub = distToLive < CROSSHAIR_FADE_MIN_PX ? 0 : distToLive >= fadeStart ? opts.scrubAmount : (distToLive - CROSSHAIR_FADE_MIN_PX) / (fadeStart - CROSSHAIR_FADE_MIN_PX) * opts.scrubAmount;
     }
-    drawDot(ctx, lastPt[0], lastPt[1], palette, opts.showPulse, dotScrub);
+    const dotAlpha = reveal < 0.3 ? 0 : (reveal - 0.3) / 0.7;
+    const showPulse = opts.showPulse && reveal > 0.6 && pause < 0.5;
+    if (dotAlpha > 0.01) {
+      ctx.save();
+      if (dotAlpha < 1) ctx.globalAlpha = dotAlpha;
+      drawDot(ctx, lastPt[0], lastPt[1], palette, showPulse, dotScrub, opts.now_ms);
+      ctx.restore();
+    }
     if (opts.showMomentum) {
-      drawArrows(
-        ctx,
-        lastPt[0],
-        lastPt[1],
-        opts.momentum,
-        palette,
-        opts.arrowState,
-        opts.dt
-      );
+      const arrowReveal = reveal < 1 ? revealRamp(0.6, 1) : 1;
+      const arrowAlpha = arrowReveal * (1 - pause);
+      if (arrowAlpha > 0.01) {
+        ctx.save();
+        if (arrowAlpha < 1) ctx.globalAlpha = arrowAlpha;
+        drawArrows(
+          ctx,
+          lastPt[0],
+          lastPt[1],
+          opts.momentum,
+          palette,
+          opts.arrowState,
+          opts.dt,
+          opts.now_ms
+        );
+        ctx.restore();
+      }
     }
-    if (opts.particleState) {
+    if (opts.particleState && reveal > 0.9) {
       const burstIntensity = spawnOnSwing(
         opts.particleState,
         opts.momentum,
@@ -987,6 +1430,235 @@ function drawFrame(ctx, layout, palette, opts) {
     ctx.restore();
   }
 }
+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 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]);
+  }
+  ctx.save();
+  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();
+}
 
 // src/draw/badge.ts
 function badgeSvgPath(pillW, pillH, tailLen, tailSpread) {
@@ -1034,6 +1706,23 @@ var VALUE_SNAP_THRESHOLD = 1e-3;
 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 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;
@@ -1165,12 +1854,14 @@ function updateHoverState(hoverPixelX, pad, w, layout, now, visible, scrubAmount
     lastHover
   };
 }
-function updateBadgeDOM(badge, cfg, smoothValue, layout, momentum, badgeY, badgeColor, isWindowTransitioning, noMotion, ctx, dt) {
-  if (!cfg.showBadge) {
+function updateBadgeDOM(badge, cfg, smoothValue, layout, momentum, badgeY, badgeColor, isWindowTransitioning, noMotion, ctx, dt, chartReveal = 1) {
+  if (!cfg.showBadge || chartReveal < 0.25) {
     badge.container.style.display = "none";
     return badgeY;
   }
   badge.container.style.display = "";
+  const badgeOpacity = chartReveal < 0.5 ? (chartReveal - 0.25) / 0.25 : 1;
+  badge.container.style.opacity = badgeOpacity < 1 ? String(badgeOpacity) : "";
   const { w, h, pad } = layout;
   const text = cfg.formatValue(smoothValue);
   badge.text.textContent = text;
@@ -1193,7 +1884,9 @@ function updateBadgeDOM(badge, cfg, smoothValue, layout, momentum, badgeY, badge
   badge.svg.setAttribute("height", String(pillH));
   badge.svg.setAttribute("viewBox", `0 0 ${totalW} ${pillH}`);
   badge.path.setAttribute("d", cfg.badgeTail ? badgeSvgPath(pillW, pillH, BADGE_TAIL_LEN, BADGE_TAIL_SPREAD) : badgePillOnly(pillW, pillH));
-  const targetBadgeY = Math.max(pad.top, Math.min(h - pad.bottom, layout.toY(smoothValue)));
+  const centerY = pad.top + layout.chartH / 2;
+  const realTargetY = Math.max(pad.top, Math.min(h - pad.bottom, layout.toY(smoothValue)));
+  const targetBadgeY = chartReveal < 1 ? centerY + (realTargetY - centerY) * chartReveal : realTargetY;
   if (badgeY === null || noMotion) {
     badgeY = targetBadgeY;
   } else {
@@ -1229,6 +1922,115 @@ 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;
@@ -1258,12 +2060,53 @@ function useLivelineEngine(canvasRef, containerRef, config) {
   const badgeYRef = useRef(null);
   const reducedMotionRef = useRef(false);
   const sizeRef = useRef({ w: 0, h: 0 });
+  const ctxRef = useRef(null);
   const rafRef = useRef(0);
   const lastFrameRef = useRef(0);
   const badgeRef = useRef(null);
   const hoverXRef = useRef(null);
   const scrubAmountRef = useRef(0);
   const lastHoverRef = useRef(null);
+  const chartRevealRef = useRef(0);
+  const pauseProgressRef = useRef(0);
+  const timeDebtRef = useRef(0);
+  const lastDataRef = useRef([]);
+  const frozenNowRef = useRef(0);
+  const pausedDataRef = 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;
@@ -1384,183 +2227,713 @@ function useLivelineEngine(canvasRef, containerRef, config) {
       canvas.style.width = `${w}px`;
       canvas.style.height = `${h}px`;
     }
-    const ctx = canvas.getContext("2d");
+    let ctx = ctxRef.current;
+    if (!ctx || ctx.canvas !== canvas) {
+      ctx = canvas.getContext("2d");
+      ctxRef.current = ctx;
+    }
     if (!ctx) {
       rafRef.current = requestAnimationFrame(draw);
       return;
     }
     applyDpr(ctx, dpr, w, h);
     const noMotion = reducedMotionRef.current;
-    const points = cfg.data;
-    if (points.length < 2) {
-      if (badgeRef.current) badgeRef.current.container.style.display = "none";
-      rafRef.current = requestAnimationFrame(draw);
-      return;
-    }
-    const adaptiveSpeed = computeAdaptiveSpeed(
-      cfg.value,
-      displayValueRef.current,
-      displayMinRef.current,
-      displayMaxRef.current,
-      cfg.lerpSpeed,
-      noMotion
-    );
-    displayValueRef.current = lerp(displayValueRef.current, cfg.value, adaptiveSpeed, dt);
-    const prevRange = displayMaxRef.current - displayMinRef.current || 1;
-    if (Math.abs(displayValueRef.current - cfg.value) < prevRange * VALUE_SNAP_THRESHOLD) {
-      displayValueRef.current = cfg.value;
+    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.paused && pausedDataRef.current === null && cfg.data.length >= 2) {
+        pausedDataRef.current = cfg.data.slice();
+      }
+      if (!cfg.paused) {
+        pausedDataRef.current = null;
+      }
     }
-    const smoothValue = displayValueRef.current;
+    const points = isCandle ? [] : pausedDataRef.current ?? cfg.data;
+    const effectiveCandles = isCandle ? pausedCandlesRef.current ?? (cfg.candles ?? []) : [];
+    const hasData = isCandle ? effectiveCandles.length >= 2 : points.length >= 2;
     const pad = cfg.padding;
-    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;
-    const now = Date.now() / 1e3;
-    const windowResult = updateWindowTransition(
-      cfg,
-      transition,
-      displayWindowRef.current,
-      displayMinRef.current,
-      displayMaxRef.current,
-      noMotion,
-      now_ms,
-      now,
-      points,
-      smoothValue,
-      buffer
+    const chartH = h - pad.top - pad.bottom;
+    const pauseTarget = cfg.paused ? 1 : 0;
+    pauseProgressRef.current = noMotion ? pauseTarget : lerp(pauseProgressRef.current, pauseTarget, PAUSE_PROGRESS_SPEED, dt);
+    if (pauseProgressRef.current < 5e-3) pauseProgressRef.current = 0;
+    if (pauseProgressRef.current > 0.995) pauseProgressRef.current = 1;
+    const pauseProgress = pauseProgressRef.current;
+    const pausedDt = dt * (1 - pauseProgress);
+    const realDtSec = dt / 1e3;
+    timeDebtRef.current += realDtSec * pauseProgress;
+    if (!cfg.paused && timeDebtRef.current > 1e-3) {
+      const catchUpSpeed = timeDebtRef.current > 10 ? PAUSE_CATCHUP_SPEED_FAST : PAUSE_CATCHUP_SPEED;
+      timeDebtRef.current = lerp(timeDebtRef.current, 0, catchUpSpeed, dt);
+      if (timeDebtRef.current < 0.01) timeDebtRef.current = 0;
+    }
+    const loadingTarget = cfg.loading ? 1 : 0;
+    loadingAlphaRef.current = noMotion ? loadingTarget : lerp(loadingAlphaRef.current, loadingTarget, LOADING_ALPHA_SPEED, dt);
+    if (loadingAlphaRef.current < 0.01) loadingAlphaRef.current = 0;
+    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,
+      revealTarget === 1 ? CHART_REVEAL_SPEED_FWD : CHART_REVEAL_SPEED,
+      dt
     );
-    displayWindowRef.current = windowResult.windowSecs;
-    const windowSecs = windowResult.windowSecs;
-    const windowTransProgress = windowResult.windowTransProgress;
-    const rightEdge = now + windowSecs * buffer;
-    const leftEdge = rightEdge - windowSecs;
-    const visible = [];
-    for (const p of points) {
-      if (p.time >= leftEdge - 2 && p.time <= rightEdge) {
-        visible.push(p);
+    if (Math.abs(chartRevealRef.current - revealTarget) < 5e-3) {
+      chartRevealRef.current = revealTarget;
+    }
+    const chartReveal = chartRevealRef.current;
+    if (chartReveal < 0.01) {
+      rangeInitedRef.current = false;
+    }
+    let useStash;
+    if (isCandle) {
+      useStash = !hasData && chartReveal > 5e-3 && lastCandlesRef.current.length > 0;
+    } else {
+      useStash = !hasData && chartReveal > 5e-3 && lastDataRef.current.length >= 2;
+      if (hasData) lastDataRef.current = points;
+    }
+    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 (visible.length < 2) {
+    if (!hasData && !useStash) {
+      const loadingColor = isCandle ? cfg.palette.gridLabel : void 0;
+      if (loadingAlpha > 0.01) {
+        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);
+      }
+      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 chartH = h - pad.top - pad.bottom;
-    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,
-      dt
-    );
-    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
-    });
-    const badge = badgeRef.current;
-    if (badge) {
-      badgeYRef.current = updateBadgeDOM(
-        badge,
+    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 {
+      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 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,
+        leftEdge,
+        rightEdge,
+        chartW,
         dt
       );
-    }
-    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");
+      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 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);
@@ -1592,6 +2965,9 @@ function Liveline({
   momentum = true,
   fill = true,
   scrub = true,
+  loading = false,
+  paused = false,
+  emptyText,
   exaggerate = false,
   degen: degenProp,
   badgeTail = true,
@@ -1612,6 +2988,14 @@ function Liveline({
   onHover,
   cursor = "crosshair",
   pulse = true,
+  mode = "line",
+  candles,
+  candleWidth,
+  liveCandle,
+  lineMode,
+  lineData,
+  lineValue,
+  onModeChange,
   className,
   style
 }) {
@@ -1621,7 +3005,10 @@ function Liveline({
   const windowBarRef = useRef2(null);
   const windowBtnRefs = useRef2(/* @__PURE__ */ new Map());
   const [indicatorStyle, setIndicatorStyle] = useState(null);
-  const palette = resolveTheme(color, theme);
+  const modeBarRef = useRef2(null);
+  const modeBtnRefs = useRef2(/* @__PURE__ */ new Map());
+  const [modeIndicatorStyle, setModeIndicatorStyle] = useState(null);
+  const palette = useMemo(() => resolveTheme(color, theme), [color, theme]);
   const isDark = theme === "dark";
   const showMomentum = momentum !== false;
   const momentumOverride = typeof momentum === "string" ? momentum : void 0;
@@ -1650,6 +3037,20 @@ 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 ws = windowStyle ?? "default";
   useLivelineEngine(canvasRef, containerRef, {
     data,
@@ -1677,9 +3078,21 @@ function Liveline({
     tooltipOutline,
     valueMomentumColor,
     valueDisplayRef: showValue ? valueDisplayRef : void 0,
-    orderbookData: orderbook
+    orderbookData: orderbook,
+    loading,
+    paused,
+    emptyText,
+    mode,
+    candles,
+    candleWidth,
+    liveCandle,
+    lineMode,
+    lineData,
+    lineValue
   });
   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",
@@ -1699,68 +3112,193 @@ 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) && /* @__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: 2,
+            background: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.02)",
+            borderRadius: 6,
+            padding: 2
+          },
+          children: [
+            modeIndicatorStyle && /* @__PURE__ */ jsx("div", { style: {
+              position: "absolute",
+              top: 2,
+              left: modeIndicatorStyle.left,
+              width: modeIndicatorStyle.width,
+              height: "calc(100% - 4px)",
+              background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.035)",
+              borderRadius: 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: () => onModeChange("line"),
+                style: {
+                  position: "relative",
+                  zIndex: 1,
+                  padding: "5px 7px",
+                  borderRadius: 4,
+                  border: "none",
+                  cursor: "pointer",
+                  background: "transparent",
+                  display: "flex",
+                  alignItems: "center"
                 },
-                onClick: () => {
-                  setActiveWindowSecs(w.secs);
-                  onWindowChange?.(w.secs);
+                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",
-                  borderRadius: ws === "rounded" ? 999 : 4,
+                  padding: "5px 7px",
+                  borderRadius: 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
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -1783,6 +3321,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
 };