@funnest/charts 0.5.2 → 0.6.1

package/dist/index.js

@@ -12,6 +12,9 @@ var Emitter = class {
     if (!set) return;
     for (const listener of set) listener(payload);
   }
+  has(event) {
+    return (this.listeners.get(event)?.size ?? 0) > 0;
+  }
   clear() {
     this.listeners.clear();
   }
@@ -102,6 +105,9 @@ var Interaction = class {
       case "timeAxis":
         this.mode = "timeScale";
         break;
+      case "paneBorder":
+        this.mode = "paneResize";
+        break;
       case "plot": {
         if (this.host.toolActive()) {
           this.mode = "draw";
@@ -173,6 +179,9 @@ var Interaction = class {
       case "timeScale":
         this.host.zoomTime(this.host.plotWidth(), Math.exp((p.x - this.last.x) * AXIS_DRAG_SPEED));
         break;
+      case "paneResize":
+        if (this.region.border) this.host.resizePane(this.region.border, p.y - this.last.y);
+        break;
     }
     this.last = p;
   }
@@ -187,7 +196,7 @@ var Interaction = class {
     }
     if (this.mode === "draw") this.host.drawRelease(p.x, p.y, this.moved);
     if (this.mode === "object") this.host.objectUp(this.moved);
-    const tapModes = ["pending", "priceScale", "timeScale"];
+    const tapModes = ["pending", "priceScale", "timeScale", "paneResize"];
     if (this.touch && !this.moved && tapModes.includes(this.mode)) this.handleTap(p);
     if (this.mode === "pan") this.startKinetic();
     if (this.mode === "crosshair") this.host.clearCrosshair();
@@ -213,7 +222,7 @@ var Interaction = class {
   }
   hover(p) {
     const region = this.host.hitTest(p.x, p.y);
-    let cursor = region.area === "priceAxis" ? "ns-resize" : region.area === "timeAxis" ? "ew-resize" : "crosshair";
+    let cursor = region.area === "priceAxis" ? "ns-resize" : region.area === "timeAxis" ? "ew-resize" : region.area === "paneBorder" ? "row-resize" : "crosshair";
     let hovered = null;
     if (region.area === "plot") {
       if (this.host.toolActive()) {
@@ -244,6 +253,7 @@ var Interaction = class {
     if (isDouble) {
       this.lastTap.t = 0;
       if (this.region.area === "priceAxis" && this.region.pane) this.host.resetPriceScale(this.region.pane);
+      else if (this.region.area === "paneBorder") this.host.resetPaneSizes();
       else this.host.resetView();
     } else {
       this.lastTap = { t, x: p.x, y: p.y };
@@ -331,13 +341,19 @@ var Interaction = class {
     const p = this.local(e);
     const region = this.host.hitTest(p.x, p.y);
     if (region.area === "priceAxis" && region.pane) this.host.resetPriceScale(region.pane);
+    else if (region.area === "paneBorder") this.host.resetPaneSizes();
     else if (region.area !== "none") this.host.resetView();
   }
   onTouchMove(e) {
     if (this.mode !== "idle" && this.mode !== "pending") e.preventDefault();
   }
   onContextMenu(e) {
-    if (this.touch) e.preventDefault();
+    if (this.touch) {
+      e.preventDefault();
+      return;
+    }
+    const p = this.local(e);
+    if (this.host.contextMenu(p.x, p.y)) e.preventDefault();
   }
 };
 
@@ -536,6 +552,7 @@ var PriceScale = class {
   }
   margins;
   height = 0;
+  mode = "normal";
   /** Pixels reserved at the top for overlays (e.g. a legend); margins apply below it. */
   insetTop = 0;
   autoScale = true;
@@ -550,6 +567,7 @@ var PriceScale = class {
   setRange(min, max) {
     if (!Number.isFinite(min) || !Number.isFinite(max)) return;
     if (max < min) [min, max] = [max, min];
+    if (this.mode === "log" && min <= 0) min = max > 0 ? max / 1e3 : LOG_FLOOR;
     if (max - min < 1e-12) {
       const pad = Math.abs(max) * 0.01 || 1;
       min -= pad;
@@ -568,27 +586,63 @@ var PriceScale = class {
   get innerHeight() {
     return Math.max(1, this.available * (1 - this.margins.top - this.margins.bottom));
   }
+  /** Price → the space the axis is linear in (log prices in log mode). */
+  toAxis(price) {
+    return this.mode === "log" ? Math.log(Math.max(price, LOG_FLOOR)) : price;
+  }
+  fromAxis(v) {
+    return this.mode === "log" ? Math.exp(v) : v;
+  }
   priceToY(price) {
-    return this.innerTop + (this.hi - price) / (this.hi - this.lo) * this.innerHeight;
+    const lo = this.toAxis(this.lo);
+    const hi = this.toAxis(this.hi);
+    return this.innerTop + (hi - this.toAxis(price)) / (hi - lo) * this.innerHeight;
   }
   yToPrice(y) {
-    return this.hi - (y - this.innerTop) / this.innerHeight * (this.hi - this.lo);
+    const lo = this.toAxis(this.lo);
+    const hi = this.toAxis(this.hi);
+    return this.fromAxis(hi - (y - this.innerTop) / this.innerHeight * (hi - lo));
+  }
+  /** Sets the range in axis space (log prices in log mode). */
+  setAxisRange(lo, hi) {
+    this.setRange(this.fromAxis(lo), this.fromAxis(hi));
   }
   /** Scales around the center. factor > 1 shows a wider price range. Disables auto-scale. */
   zoom(factor) {
-    const center = (this.lo + this.hi) / 2;
-    const half = (this.hi - this.lo) / 2 * factor;
-    this.setRange(center - half, center + half);
+    const lo = this.toAxis(this.lo);
+    const hi = this.toAxis(this.hi);
+    const center = (lo + hi) / 2;
+    const half = (hi - lo) / 2 * factor;
+    this.setAxisRange(center - half, center + half);
     this.autoScale = false;
   }
   /** Moves the content by `dy` pixels (positive = content moves down). Disables auto-scale. */
   pan(dy) {
-    const delta = dy / this.innerHeight * (this.hi - this.lo);
-    this.setRange(this.lo + delta, this.hi + delta);
+    const lo = this.toAxis(this.lo);
+    const hi = this.toAxis(this.hi);
+    const delta = dy / this.innerHeight * (hi - lo);
+    this.setAxisRange(lo + delta, hi + delta);
     this.autoScale = false;
   }
 };
+var LOG_FLOOR = 1e-12;
 var NICE_MULTIPLIERS = [1, 2, 2.5, 5, 10];
+function logTicks(scale, spacing, minStep = 0) {
+  const ticks = [];
+  for (let y = scale.height - spacing / 2; y > 0; y -= spacing) {
+    const raw = scale.yToPrice(y);
+    if (!(raw > 0)) continue;
+    const local = scale.yToPrice(y - spacing) - raw;
+    const mag = 10 ** Math.floor(Math.log10(local));
+    let step = NICE_MULTIPLIERS.map((m) => m * mag).find((s) => s >= local * 0.75) ?? 10 * mag;
+    if (minStep > 0) step = Math.max(minStep, Math.round(step / minStep) * minStep);
+    const best = Number((Math.round(raw / step) * step).toPrecision(12));
+    if (!(best > 0)) continue;
+    const prev = ticks[ticks.length - 1];
+    if (prev === void 0 || Math.abs(scale.priceToY(best) - scale.priceToY(prev)) >= spacing * 0.6) ticks.push(best);
+  }
+  return ticks;
+}
 function niceTicks(min, max, maxCount, minStep = 0) {
   if (!(max > min) || maxCount < 1) return [];
   const rough = (max - min) / maxCount;
@@ -831,6 +885,10 @@ var TimeScale = class {
   }
 };
 
+// src/objects/types.ts
+var counter = 0;
+var newId = (prefix) => `${prefix}_${Date.now().toString(36)}${(counter++).toString(36)}`;
+
 // src/indicators/math.ts
 function sma(src2, period) {
   const out = new Float64Array(src2.length).fill(Number.NaN);
@@ -1078,27 +1136,36 @@ var INDICATORS = {
   }
 };
 
-// src/objects/types.ts
-var counter = 0;
-var newId = (prefix) => `${prefix}_${Date.now().toString(36)}${(counter++).toString(36)}`;
-
 // src/indicators/manager.ts
 var clone = (c) => JSON.parse(JSON.stringify(c));
-function normalize2(c) {
-  const def = INDICATORS[c.type];
-  const params = { ...def.defaults, ...c.params };
-  if ((c.type === "ma" || c.type === "ema") && !Array.isArray(c.params.lines) && Array.isArray(c.params.periods)) {
-    params.lines = maLines({ periods: c.params.periods });
-  }
-  delete params.periods;
-  return { id: c.id || newId(c.type), type: c.type, params, visible: c.visible ?? true, styles: c.styles ?? {} };
+function indicatorRegistry(extra = []) {
+  const registry = new Map(Object.entries(INDICATORS));
+  for (const def of extra) registry.set(def.type, def);
+  return registry;
 }
 var IndicatorManager = class {
+  constructor(registry = indicatorRegistry()) {
+    this.registry = registry;
+  }
+  registry;
   list = [];
   cache = /* @__PURE__ */ new Map();
+  def(type) {
+    const def = this.registry.get(type);
+    if (!def) throw new Error(`funnest-charts: unknown indicator "${type}"`);
+    return def;
+  }
+  normalize(c) {
+    const def = this.def(c.type);
+    const params = { ...def.defaults, ...c.params };
+    if ((c.type === "ma" || c.type === "ema") && !Array.isArray(c.params.lines) && Array.isArray(c.params.periods)) {
+      params.lines = maLines({ periods: c.params.periods });
+    }
+    delete params.periods;
+    return { id: c.id || newId(c.type), type: c.type, params, visible: c.visible ?? true, styles: c.styles ?? {} };
+  }
   add(type, params) {
-    if (!INDICATORS[type]) throw new Error(`funnest-charts: unknown indicator "${type}"`);
-    const config = normalize2({ id: newId(type), type, params: params ?? {} });
+    const config = this.normalize({ id: newId(type), type, params: params ?? {} });
     this.list.push(config);
     return config.id;
   }
@@ -1116,25 +1183,26 @@ var IndicatorManager = class {
     if (patch.visible !== void 0) cfg.visible = patch.visible;
     return true;
   }
+  /** Unknown types (e.g. a plugin this chart wasn't given) are dropped. */
   set(configs) {
-    this.list = configs.filter((c) => INDICATORS[c.type]).map((c) => normalize2(clone(c)));
+    this.list = configs.filter((c) => this.registry.has(c.type)).map((c) => this.normalize(clone(c)));
     this.cache.clear();
   }
   snapshot() {
     return this.list.map(clone);
   }
   get overlays() {
-    return this.list.filter((c) => INDICATORS[c.type].overlay);
+    return this.list.filter((c) => this.def(c.type).overlay);
   }
   get panes() {
-    return this.list.filter((c) => !INDICATORS[c.type].overlay);
+    return this.list.filter((c) => !this.def(c.type).overlay);
   }
   /** Computed series with user styles applied; recomputed only when data or settings change. */
   output(cfg, bars, dataVersion) {
     const key = `${dataVersion}|${JSON.stringify(cfg.params)}|${JSON.stringify(cfg.styles)}`;
     const hit = this.cache.get(cfg.id);
     if (hit?.key === key) return hit.output;
-    const raw = INDICATORS[cfg.type].compute(bars, cfg.params);
+    const raw = this.def(cfg.type).compute(bars, cfg.params);
     const output = {
       ...raw,
       series: raw.series.map((s) => {
@@ -1153,7 +1221,6 @@ var IndicatorManager = class {
 };
 
 // src/objects/drawings.ts
-var DRAWING_POINTS = { trendline: 2, horizontal: 1, fibonacci: 2 };
 var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
 var FIB_COLORS = ["#8B95A1", "#F04452", "#FF9F0A", "#12B886", "#3182F6", "#7048E8", "#8B95A1"];
 var HANDLE_RADIUS = 5;
@@ -1164,11 +1231,84 @@ function distToSegment(px, py, x1, y1, x2, y2) {
   const t = len2 === 0 ? 0 : Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / len2));
   return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
 }
+var p0 = (g) => g.points[0];
+var p1 = (g) => g.points[1] ?? g.points[0];
+var BUILTIN_DRAWINGS = [
+  {
+    type: "trendline",
+    name: { ko: "\uCD94\uC138\uC120", en: "Trend line" },
+    group: "line",
+    clicks: 2,
+    distance: (g, x, y) => distToSegment(x, y, ...p0(g), ...p1(g)),
+    render: (_d, { painter, color, ...g }) => painter.line(...p0(g), ...p1(g), color, 2)
+  },
+  {
+    type: "horizontal",
+    name: { ko: "\uC218\uD3C9\uC120", en: "Horizontal line" },
+    group: "level",
+    clicks: 1,
+    // The anchor's time doesn't matter; keep the handle inside the plot.
+    handles: (g) => [[Math.min(g.coords.plotWidth - 24, Math.max(24, p0(g)[0])), p0(g)[1]]],
+    distance: (g, _x, y) => Math.abs(y - p0(g)[1]),
+    render: (d, { painter, color, coords, badge, ...g }) => {
+      const y = p0(g)[1];
+      painter.hLine(y, 0, coords.plotWidth, color);
+      badge(y, coords.formatPrice(d.points[0].price), color);
+    }
+  },
+  {
+    type: "fibonacci",
+    name: { ko: "\uD53C\uBCF4\uB098\uCE58 \uB418\uB3CC\uB9BC", en: "Fib retracement" },
+    group: "fib",
+    clicks: 2,
+    distance: (g, x, y) => {
+      const [x1, y1] = p0(g);
+      const [x2, y2] = p1(g);
+      let best = distToSegment(x, y, x1, y1, x2, y2);
+      if (x >= Math.min(x1, x2) && x <= Math.max(x1, x2)) {
+        for (const level of FIB_LEVELS) best = Math.min(best, Math.abs(y - (y2 + (y1 - y2) * level)));
+      }
+      return best;
+    },
+    render: (d, { painter: p, coords: c, palette, ...g }) => {
+      const [x1, y1] = p0(g);
+      const [x2, y2] = p1(g);
+      const left = Math.min(x1, x2);
+      const right = Math.max(x1, x2, left + 1);
+      const a = d.points[0].price;
+      const b = d.points[1].price;
+      const { ctx } = p;
+      FIB_LEVELS.forEach((level, i) => {
+        const price = b + (a - b) * level;
+        const y = c.priceToY(price);
+        const levelColor = d.color ?? FIB_COLORS[i];
+        if (i > 0) {
+          const prevY = c.priceToY(b + (a - b) * FIB_LEVELS[i - 1]);
+          ctx.save();
+          ctx.globalAlpha = 0.07;
+          ctx.fillStyle = levelColor;
+          ctx.fillRect(left, Math.min(y, prevY), right - left, Math.abs(y - prevY));
+          ctx.restore();
+        }
+        p.hLine(y, left, right, levelColor);
+        p.text(`${level} (${c.formatPrice(price)})`, left + 4, y - 7, levelColor, "left", "middle");
+      });
+      p.line(x1, y1, x2, y2, palette.textSecondary, 1, [4, 4]);
+    }
+  }
+];
+function drawingRegistry(extra = []) {
+  const registry = new Map(BUILTIN_DRAWINGS.map((d) => [d.type, d]));
+  for (const def of extra) registry.set(def.type, def);
+  return registry;
+}
 var DrawingManager = class {
-  constructor(onChange) {
+  constructor(onChange, registry = drawingRegistry()) {
     this.onChange = onChange;
+    this.registry = registry;
   }
   onChange;
+  registry;
   drawings = [];
   tool = null;
   selectedId = null;
@@ -1178,6 +1318,7 @@ var DrawingManager = class {
     return this.drawings.find((d) => d.id === this.selectedId) ?? null;
   }
   setTool(tool) {
+    if (tool && !this.registry.has(tool)) throw new Error(`funnest-charts: unknown drawing tool "${tool}"`);
     this.tool = tool;
     this.draft = null;
     if (tool) this.selectedId = null;
@@ -1188,6 +1329,7 @@ var DrawingManager = class {
     this.selectedId = id;
     this.onChange("selection");
   }
+  /** Drawings of unknown types are kept (and saved) but not shown. */
   set(drawings) {
     this.drawings = drawings.map((d) => ({ ...d, points: d.points.map((p) => ({ ...p })) }));
     if (!this.selected) this.selectedId = null;
@@ -1217,26 +1359,31 @@ var DrawingManager = class {
     else this.select(null);
   }
   // ── Creation ──────────────────────────────────────────────────────
+  expand(def, placed, c) {
+    const full = Array.from({ length: def.clicks }, (_, i) => ({ ...placed[i] ?? placed[placed.length - 1] }));
+    return def.create ? def.create(full, c) : full;
+  }
   createAt(c, x, y) {
-    if (!this.tool) return;
+    const def = this.tool ? this.registry.get(this.tool) : void 0;
+    if (!def) return;
     const point = c.pointAt(x, y);
     if (!this.draft) {
-      const count = DRAWING_POINTS[this.tool];
-      const drawing = { id: newId("d"), type: this.tool, points: Array.from({ length: count }, () => ({ ...point })) };
-      this.draft = { drawing, placed: 1 };
-      if (count === 1) this.finish();
+      const placed = [point];
+      this.draft = { drawing: { id: newId("d"), type: def.type, points: this.expand(def, placed, c) }, placed };
+      if (def.clicks <= 1) this.finish();
       else this.onChange("preview");
       return;
     }
-    this.draft.drawing.points[this.draft.placed] = point;
-    this.draft.placed++;
-    if (this.draft.placed >= this.draft.drawing.points.length) this.finish();
+    this.draft.placed.push(point);
+    this.draft.drawing.points = this.expand(def, this.draft.placed, c);
+    if (this.draft.placed.length >= def.clicks) this.finish();
   }
   /** Moves the not-yet-placed points (live preview while hovering or dragging). */
   previewAt(c, x, y) {
-    if (!this.draft) return;
-    const point = c.pointAt(x, y);
-    for (let i = this.draft.placed; i < this.draft.drawing.points.length; i++) this.draft.drawing.points[i] = { ...point };
+    const draft = this.draft;
+    const def = draft && this.registry.get(draft.drawing.type);
+    if (!draft || !def) return;
+    draft.drawing.points = this.expand(def, [...draft.placed, c.pointAt(x, y)], c);
     this.onChange("preview");
   }
   /** Pointer released: a drag since the first point places the next one (drag-to-draw). */
@@ -1253,17 +1400,24 @@ var DrawingManager = class {
     this.onChange("commit");
   }
   // ── Editing ───────────────────────────────────────────────────────
+  geometry(c, d) {
+    return { coords: c, points: d.points.map((p) => [c.timeToX(p.time), c.priceToY(p.price)]) };
+  }
+  handles(c, d) {
+    const def = this.registry.get(d.type);
+    const g = this.geometry(c, d);
+    return def?.handles ? def.handles(g) : g.points;
+  }
   hitTest(c, x, y, tolerance) {
     const selected = this.selected;
-    if (selected) {
-      const handle = this.screenPoints(c, selected).findIndex(
-        ([px, py]) => Math.hypot(px - x, py - y) <= HANDLE_RADIUS + tolerance
-      );
+    if (selected && this.registry.has(selected.type)) {
+      const handle = this.handles(c, selected).findIndex(([px, py]) => Math.hypot(px - x, py - y) <= HANDLE_RADIUS + tolerance);
       if (handle >= 0) return { kind: "drawing", id: selected.id, part: handle };
     }
     for (let i = this.drawings.length - 1; i >= 0; i--) {
       const d = this.drawings[i];
-      if (this.distance(c, d, x, y) <= tolerance) return { kind: "drawing", id: d.id, part: "body" };
+      const def = this.registry.get(d.type);
+      if (def && def.distance(this.geometry(c, d), x, y) <= tolerance) return { kind: "drawing", id: d.id, part: "body" };
     }
     return null;
   }
@@ -1271,7 +1425,7 @@ var DrawingManager = class {
     const d = this.drawings.find((x2) => x2.id === id);
     if (!d) return;
     this.select(id);
-    this.drag = { id, part, x, y, origin: this.screenPoints(c, d) };
+    this.drag = { id, part, x, y, origin: this.geometry(c, d).points };
   }
   dragTo(c, x, y) {
     const drag = this.drag;
@@ -1279,6 +1433,8 @@ var DrawingManager = class {
     if (!drag || !d) return;
     if (typeof drag.part === "number") {
       d.points[drag.part] = c.pointAt(x, y);
+      const def = this.registry.get(d.type);
+      if (def?.constrain) d.points = def.constrain(d.points, drag.part);
     } else {
       const dx = x - drag.x;
       const dy = y - drag.y;
@@ -1290,71 +1446,26 @@ var DrawingManager = class {
     if (this.drag && moved) this.onChange("commit");
     this.drag = null;
   }
-  screenPoints(c, d) {
-    return d.points.map((p) => [d.type === "horizontal" ? Math.min(c.plotWidth - 24, Math.max(24, c.timeToX(p.time))) : c.timeToX(p.time), c.priceToY(p.price)]);
-  }
-  distance(c, d, x, y) {
-    const pts = this.screenPoints(c, d);
-    const [x1, y1] = pts[0];
-    if (d.type === "horizontal") return Math.abs(y - y1);
-    const [x2, y2] = pts[1];
-    if (d.type === "trendline") return distToSegment(x, y, x1, y1, x2, y2);
-    const left = Math.min(x1, x2);
-    const right = Math.max(x1, x2);
-    let best = distToSegment(x, y, x1, y1, x2, y2);
-    if (x >= left && x <= right) {
-      for (const level of FIB_LEVELS) best = Math.min(best, Math.abs(y - (y2 + (y1 - y2) * level)));
-    }
-    return best;
-  }
   // ── Rendering ─────────────────────────────────────────────────────
   render(rc, badges) {
     const all = this.draft ? [...this.drawings, this.draft.drawing] : this.drawings;
+    const c = rc.coords;
     for (const d of all) {
-      const isDraft = d === this.draft?.drawing;
-      this.renderOne(rc, d, badges);
-      if (d.id === this.selectedId || isDraft) {
-        const color = d.color ?? rc.palette.accent;
-        for (const [px, py] of this.screenPoints(rc.coords, d)) rc.painter.circle(px, py, HANDLE_RADIUS, rc.palette.background, color);
+      const def = this.registry.get(d.type);
+      if (!def) continue;
+      const color = d.color ?? rc.palette.accent;
+      def.render(d, {
+        ...this.geometry(c, d),
+        painter: rc.painter,
+        palette: rc.palette,
+        color,
+        badge: (y, text, bg, fg = "#FFFFFF") => badges.push({ y, text, bg, fg })
+      });
+      if (d.id === this.selectedId || d === this.draft?.drawing) {
+        for (const [px, py] of this.handles(c, d)) rc.painter.circle(px, py, HANDLE_RADIUS, rc.palette.background, color);
       }
     }
   }
-  renderOne({ painter: p, coords: c, palette }, d, badges) {
-    const color = d.color ?? palette.accent;
-    const pts = this.screenPoints(c, d);
-    const [x1, y1] = pts[0];
-    if (d.type === "horizontal") {
-      p.hLine(y1, 0, c.plotWidth, color);
-      badges.push({ y: y1, text: c.formatPrice(d.points[0].price), bg: color, fg: "#FFFFFF" });
-      return;
-    }
-    const [x2, y2] = pts[1];
-    if (d.type === "trendline") {
-      p.line(x1, y1, x2, y2, color, 2);
-      return;
-    }
-    const left = Math.min(x1, x2);
-    const right = Math.max(x1, x2, left + 1);
-    const p0 = d.points[0].price;
-    const p1 = d.points[1].price;
-    const { ctx } = p;
-    FIB_LEVELS.forEach((level, i) => {
-      const price = p1 + (p0 - p1) * level;
-      const y = c.priceToY(price);
-      const levelColor = d.color ?? FIB_COLORS[i];
-      if (i > 0) {
-        const prevY = c.priceToY(p1 + (p0 - p1) * FIB_LEVELS[i - 1]);
-        ctx.save();
-        ctx.globalAlpha = 0.07;
-        ctx.fillStyle = levelColor;
-        ctx.fillRect(left, Math.min(y, prevY), right - left, Math.abs(y - prevY));
-        ctx.restore();
-      }
-      p.hLine(y, left, right, levelColor);
-      p.text(`${level} (${c.formatPrice(price)})`, left + 4, y - 7, levelColor, "left", "middle");
-    });
-    p.line(x1, y1, x2, y2, palette.textSecondary, 1, [4, 4]);
-  }
 };
 
 // src/render/painter.ts
@@ -1471,12 +1582,14 @@ var inRect = (r, x, y, pad = 0) => x >= r.x - pad && x <= r.x + r.w + pad && y >
 var LABEL_X = 12;
 var LABEL_HEIGHT = 20;
 var ORDER_DASH = [6, 4];
+var ALERT_DASH = [2, 3];
 var TradingLayer = class {
   constructor(onChange) {
     this.onChange = onChange;
   }
   onChange;
   positions = /* @__PURE__ */ new Map();
+  /** Order lines and alert lines (same dragging and × behavior). */
   orders = /* @__PURE__ */ new Map();
   executions = [];
   labelRects = /* @__PURE__ */ new Map();
@@ -1494,6 +1607,12 @@ var TradingLayer = class {
     this.onChange();
     return this.handle(id, this.orders);
   }
+  addAlert(options) {
+    const id = newId("alert");
+    this.orders.set(id, { ...options, quantity: 0, side: "buy", alert: true });
+    this.onChange();
+    return this.handle(id, this.orders);
+  }
   setExecutions(markers) {
     this.executions = markers.slice();
     this.onChange();
@@ -1642,12 +1761,11 @@ var TradingLayer = class {
     for (const [id, order] of this.orders) {
       const price = this.drag?.id === id ? this.drag.price : order.price;
       const y = c.priceToY(price);
-      const color = order.side === "buy" ? palette.up : palette.down;
+      const color = order.alert ? palette.textSecondary : order.side === "buy" ? palette.up : palette.down;
       badges.push({ y, text: c.formatPrice(price), bg: color, fg: "#FFFFFF" });
       if (!visible(y)) continue;
-      p.hLine(y, 0, c.plotWidth, color, ORDER_DASH);
-      const side = order.side === "buy" ? labels.buy : labels.sell;
-      const main = [side, order.label, String(order.quantity)].filter(Boolean).join(" ");
+      p.hLine(y, 0, c.plotWidth, color, order.alert ? ALERT_DASH : ORDER_DASH);
+      const main = order.alert ? order.label ?? labels.alert : [order.side === "buy" ? labels.buy : labels.sell, order.label, String(order.quantity)].filter(Boolean).join(" ");
       const segments = [{ text: main, bg: color, fg: "#FFFFFF" }];
       if (order.onCancel) segments.push({ text: "\xD7", bg: color, fg: "#FFFFFF", padding: 7 });
       const rects = p.pill(segments, LABEL_X, y, LABEL_HEIGHT);
@@ -1682,6 +1800,8 @@ var DEFAULT_CHART_SETTINGS = {
   gridVertical: true,
   volume: true,
   navigationButtons: true,
+  priceScale: "normal",
+  countdown: true,
   upColor: null,
   downColor: null
 };
@@ -1697,6 +1817,8 @@ function parseChartState(input) {
     settings: { ...DEFAULT_CHART_SETTINGS, ...s.settings ?? {} },
     indicators: Array.isArray(s.indicators) ? s.indicators : [],
     drawings: s.drawings && typeof s.drawings === "object" ? s.drawings : {},
+    paneWeights: s.paneWeights && typeof s.paneWeights === "object" ? Object.fromEntries(Object.entries(s.paneWeights).filter(([, w]) => typeof w === "number" && w > 0)) : {},
+    compares: Array.isArray(s.compares) ? s.compares.filter((x) => typeof x === "string") : [],
     view: {
       barSpacing: Number(s.view?.barSpacing) || 8,
       rightOffset: Number.isFinite(Number(s.view?.rightOffset)) ? Number(s.view?.rightOffset) : 5
@@ -1985,28 +2107,40 @@ function drawLineSeries(ctx, m, pane, area) {
 function drawIndicator(ctx, p, m, pane, output) {
   const { timeScale, frame } = m;
   const pal = frame.palette;
-  const from = Math.max(0, frame.range.from - 1);
-  const to = Math.min(m.bars.length - 1, frame.range.to + 1);
-  if (to < from) return;
+  const n = m.bars.length;
+  if (frame.range.to < frame.range.from) return;
+  const span = (shift) => {
+    const lastX = Math.ceil(timeScale.xToIndexFloat(frame.plotWidth)) + 1;
+    return [Math.max(0, frame.range.from - 1 - shift), Math.min(n - 1, (shift > 0 ? lastX : frame.range.to + 1) - shift)];
+  };
+  const [from, to] = span(0);
   const yOf = (v) => pane.top + pane.scale.priceToY(v);
-  const byKey = (key) => output.series.find((s) => s.key === key)?.values;
+  const byKey = (key) => output.series.find((s) => s.key === key);
   for (const level of output.levels ?? []) p.hLine(yOf(level), 0, frame.plotWidth, pal.textSecondary, [3, 4]);
   if (output.fill) {
-    const upper = byKey(output.fill.upper);
-    const lower = byKey(output.fill.lower);
-    if (upper && lower) {
+    const upperSeries = byKey(output.fill.upper);
+    const lower = byKey(output.fill.lower)?.values;
+    if (upperSeries && lower) {
+      const upper = upperSeries.values;
+      const shift = upperSeries.shift ?? 0;
+      const [f0, f1] = span(shift);
+      const { color, downColor } = output.fill;
+      const sideOf = (j) => downColor && lower[j] > upper[j] ? 1 : 0;
+      const valid = (j) => !Number.isNaN(upper[j]) && !Number.isNaN(lower[j]);
       ctx.save();
       ctx.globalAlpha = 0.07;
-      ctx.fillStyle = output.fill.color;
-      let i = from;
-      while (i <= to) {
-        while (i <= to && (Number.isNaN(upper[i]) || Number.isNaN(lower[i]))) i++;
+      let i = f0;
+      while (i <= f1) {
+        while (i <= f1 && !valid(i)) i++;
         const start = i;
-        while (i <= to && !Number.isNaN(upper[i]) && !Number.isNaN(lower[i])) i++;
-        if (i - start < 2) continue;
+        const side = valid(i) ? sideOf(i) : 0;
+        while (i <= f1 && valid(i) && sideOf(i) === side) i++;
+        const end = i <= f1 && valid(i) ? i + 1 : i;
+        if (end - start < 2) continue;
+        ctx.fillStyle = side ? downColor : color;
         ctx.beginPath();
-        for (let j = start; j < i; j++) ctx.lineTo(timeScale.indexToX(j), yOf(upper[j]));
-        for (let j = i - 1; j >= start; j--) ctx.lineTo(timeScale.indexToX(j), yOf(lower[j]));
+        for (let j = start; j < end; j++) ctx.lineTo(timeScale.indexToX(j + shift), yOf(upper[j]));
+        for (let j = end - 1; j >= start; j--) ctx.lineTo(timeScale.indexToX(j + shift), yOf(lower[j]));
         ctx.closePath();
         ctx.fill();
       }
@@ -2042,13 +2176,15 @@ function drawIndicator(ctx, p, m, pane, output) {
     ctx.lineWidth = series.width;
     ctx.beginPath();
     let pen = false;
-    for (let i = from; i <= to; i++) {
+    const shift = series.shift ?? 0;
+    const [s0, s1] = span(shift);
+    for (let i = s0; i <= s1; i++) {
       const v = series.values[i];
       if (Number.isNaN(v)) {
         pen = false;
         continue;
       }
-      const x = timeScale.indexToX(i);
+      const x = timeScale.indexToX(i + shift);
       if (pen) ctx.lineTo(x, yOf(v));
       else ctx.moveTo(x, yOf(v));
       pen = true;
@@ -2181,8 +2317,8 @@ function drawMain(layer, m) {
   for (const price of f.priceTicks) {
     const y = main.scale.priceToY(price);
     if (y < 8 || y > main.height - 8) continue;
-    if (last && Math.abs(y - lastY) < BADGE_HEIGHT) continue;
-    p.text(m.formatPrice(price), labelX, y, pal.textSecondary);
+    if (last && y > lastY - BADGE_HEIGHT && y < lastY + (f.countdown ? BADGE_HEIGHT * 2 - 4 : BADGE_HEIGHT)) continue;
+    p.text((main.tickFormat ?? m.formatPrice)(price), labelX, y, pal.textSecondary);
   }
   for (const pane of f.panes) {
     if (pane.kind !== "indicator") continue;
@@ -2198,9 +2334,16 @@ function drawMain(layer, m) {
     p.text(badge.text, labelX, y, badge.fg);
   }
   if (last && lastY >= 0 && lastY <= main.height) {
-    const y = Math.min(main.height - BADGE_HEIGHT / 2, Math.max(BADGE_HEIGHT / 2, lastY));
-    p.roundRect(f.plotWidth + 2, y - BADGE_HEIGHT / 2, f.width - f.plotWidth - 4, BADGE_HEIGHT, 4, lastColor);
-    p.text(m.formatPrice(last.close), labelX, y, "#FFFFFF");
+    const h = f.countdown ? BADGE_HEIGHT * 2 - 4 : BADGE_HEIGHT;
+    const y = Math.min(main.height - h + BADGE_HEIGHT / 2, Math.max(BADGE_HEIGHT / 2, lastY));
+    p.roundRect(f.plotWidth + 2, y - BADGE_HEIGHT / 2, f.width - f.plotWidth - 4, h, 4, lastColor);
+    p.text(main.format(last.close), labelX, y, "#FFFFFF");
+    if (f.countdown) {
+      p.ctx.save();
+      p.ctx.globalAlpha = 0.85;
+      p.text(f.countdown, labelX, y + BADGE_HEIGHT - 4, "#FFFFFF");
+      p.ctx.restore();
+    }
   }
   const timeY = f.panesHeight + f.timeAxisHeight / 2;
   for (const tick of f.timeTicks) {
@@ -2239,6 +2382,13 @@ function drawOverlay(layer, m, ch, tooltip = null) {
   ctx.font = f.font;
   if (tooltip) drawTooltip(p, f, tooltip);
   if (!ch) return;
+  if (m.replaySelecting) {
+    ctx.save();
+    ctx.globalAlpha = 0.12;
+    ctx.fillStyle = pal.text;
+    ctx.fillRect(ch.x, 0, f.plotWidth - ch.x, f.panesHeight);
+    ctx.restore();
+  }
   p.vLine(ch.x, 0, f.panesHeight, pal.crosshair, DASH);
   if (ch.source !== "sync") drawCrosshairValue(p, m, ch);
   const timeLabel = m.formatCrosshairTime(ch.time);
@@ -2293,6 +2443,103 @@ function isIntradayResolution(resolution) {
   return resolutionToMs(resolution) < DAY_MS;
 }
 
+// src/realtime.ts
+var offsetFormatters = /* @__PURE__ */ new Map();
+function timeZoneOffset(time, timeZone) {
+  if (timeZone === "UTC") return 0;
+  let dtf = offsetFormatters.get(timeZone);
+  if (!dtf) {
+    dtf = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric"
+    });
+    offsetFormatters.set(timeZone, dtf);
+  }
+  const p = {};
+  for (const { type, value } of dtf.formatToParts(time)) p[type] = Number(value);
+  const asUtc = Date.UTC(p.year, p.month - 1, p.day, p.hour % 24, p.minute, p.second);
+  return Math.round((asUtc - Math.floor(time / 1e3) * 1e3) / 6e4) * 6e4;
+}
+function bucketStart(time, resolution, timeZone = "UTC") {
+  const offset = timeZoneOffset(time, timeZone);
+  const local = time + offset;
+  const unit = resolution.trim().slice(-1).toUpperCase();
+  if (unit === "M") {
+    const n = Number(resolution.slice(0, -1)) || 1;
+    const d = new Date(local);
+    const months = d.getUTCFullYear() * 12 + d.getUTCMonth();
+    const start = months - months % n;
+    return Date.UTC(Math.floor(start / 12), start % 12, 1) - offset;
+  }
+  if (unit === "W") {
+    const days = Math.floor(local / DAY_MS);
+    const sinceMonday = ((days + 3) % 7 + 7) % 7;
+    return (days - sinceMonday) * DAY_MS - offset;
+  }
+  const size = resolutionToMs(resolution);
+  return Math.floor(local / size) * size - offset;
+}
+var TickAggregator = class {
+  constructor(resolution, timeZone = "UTC") {
+    this.resolution = resolution;
+    this.timeZone = timeZone;
+  }
+  resolution;
+  timeZone;
+  current = null;
+  /** Start from the latest historical bar so the first tick updates it instead of opening a new one. */
+  seed(bar) {
+    this.current = bar ? { ...bar, volume: bar.volume ?? 0 } : null;
+  }
+  /** Returns the updated bar, or null for a tick belonging to an already-closed bar. */
+  push(tick) {
+    const start = bucketStart(tick.time, this.resolution, this.timeZone);
+    const bar = this.current;
+    const volume = tick.volume ?? 0;
+    if (!bar || start > bar.time) {
+      this.current = { time: start, open: tick.price, high: tick.price, low: tick.price, close: tick.price, volume };
+    } else if (start === bar.time) {
+      bar.high = Math.max(bar.high, tick.price);
+      bar.low = Math.min(bar.low, tick.price);
+      bar.close = tick.price;
+      bar.volume = (bar.volume ?? 0) + volume;
+    } else {
+      return null;
+    }
+    return { ...this.current };
+  }
+};
+
+// src/session.ts
+var DAY = 864e5;
+var MINUTE2 = 6e4;
+function sessionStatus(session, timeZone, now = Date.now()) {
+  if (session.trim().toLowerCase() === "24x7") return { open: true, nextChange: null };
+  const match = /^(\d{2})(\d{2})-(\d{2})(\d{2})(?::([1-7]+))?$/.exec(session.trim());
+  if (!match) return { open: true, nextChange: null };
+  const openMin = Number(match[1]) * 60 + Number(match[2]);
+  const closeMin = Number(match[3]) * 60 + Number(match[4]);
+  const days = new Set((match[5] ?? "12345").split("").map(Number));
+  const offset = timeZoneOffset(now, timeZone);
+  const localMidnight = Math.floor((now + offset) / DAY) * DAY;
+  for (let d = -1; d <= 8; d++) {
+    const dayStart = localMidnight + d * DAY;
+    const isoWeekday = (new Date(dayStart).getUTCDay() + 6) % 7 + 1;
+    if (!days.has(isoWeekday)) continue;
+    const open = dayStart + openMin * MINUTE2 - offset;
+    const close = dayStart + closeMin * MINUTE2 - offset;
+    if (now < open) return { open: false, nextChange: open };
+    if (now < close) return { open: true, nextChange: close };
+  }
+  return { open: false, nextChange: null };
+}
+
 // src/theme.ts
 var FONT_STACK = "Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif";
 var DIRECTION_COLORS = {
@@ -2331,6 +2578,8 @@ function createTheme(base, overrides = {}, direction) {
 var TIME_AXIS_HEIGHT = 28;
 var MIN_PRICE_AXIS_WIDTH = 56;
 var PANE_WEIGHT = { main: 4, volume: 1, indicator: 1.3 };
+var MIN_PANE_HEIGHT = 32;
+var PANE_BORDER_GRAB = 4;
 var HISTORY_TRIGGER_BARS = 20;
 var TIME_LABEL_MIN_GAP = 72;
 var PRICE_TICK_SPACING = 48;
@@ -2339,10 +2588,31 @@ var LABELS = {
   en: { high: "High", low: "Low" }
 };
 var TRADING_LABELS = {
-  ko: { buy: "\uB9E4\uC218", sell: "\uB9E4\uB3C4", position: "\uD3C9\uADE0\uB2E8\uAC00" },
-  en: { buy: "Buy", sell: "Sell", position: "Avg" }
+  ko: { buy: "\uB9E4\uC218", sell: "\uB9E4\uB3C4", position: "\uD3C9\uADE0\uB2E8\uAC00", alert: "\uC54C\uB9BC" },
+  en: { buy: "Buy", sell: "Sell", position: "Avg", alert: "Alert" }
 };
 var HIT_TOLERANCE = { mouse: 5, touch: 14 };
+var COMPARE_COLORS = ["#F06595", "#15AABF", "#FF9F0A", "#7048E8", "#12B886"];
+var MAX_COMPARES = COMPARE_COLORS.length;
+var HISTORY_LIMIT = 100;
+function formatCountdown(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const d = Math.floor(total / 86400);
+  const h = Math.floor(total % 86400 / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const two = (n) => String(n).padStart(2, "0");
+  if (d > 0) return `${d}d ${two(h)}:${two(m)}`;
+  return h > 0 ? `${h}:${two(m)}:${two(s)}` : `${two(m)}:${two(s)}`;
+}
+function formatPercent(v, decimals) {
+  const rounded = Number(v.toFixed(decimals));
+  return `${rounded > 0 ? "+" : ""}${rounded.toFixed(decimals)}%`;
+}
+function firstFinite(values, from) {
+  for (let i = Math.max(0, from); i < values.length; i++) if (!Number.isNaN(values[i])) return values[i];
+  return Number.NaN;
+}
 var TOOLTIP_LABELS = {
   ko: { buy: "\uB9E4\uC218", sell: "\uB9E4\uB3C4", fills: (n) => `${n}\uAC74`, price: "\uCCB4\uACB0\uAC00", avg: "\uD3C9\uADE0\uAC00", qty: "\uC218\uB7C9" },
   en: { buy: "Buy", sell: "Sell", fills: (n) => `${n} fills`, price: "Price", avg: "Avg", qty: "Qty" }
@@ -2364,7 +2634,7 @@ var Chart = class {
   store = new BarStore();
   mainScale = new PriceScale({ top: 0.08, bottom: 0.08 });
   volumeScale = new PriceScale({ top: 0.2, bottom: 0 });
-  indicators = new IndicatorManager();
+  indicators;
   indicatorScales = /* @__PURE__ */ new Map();
   emitter = new Emitter();
   colors;
@@ -2416,6 +2686,18 @@ var Chart = class {
   loadingHistory = false;
   noMoreHistory = false;
   historyRequestedFor = Number.NaN;
+  countdownLabel = null;
+  /** Undo/redo of drawings + indicators, as JSON snapshots. */
+  history = { undo: [], redo: [], current: "", applying: false };
+  compares = /* @__PURE__ */ new Map();
+  compareVersion = 0;
+  /** Base bar index of the % axis and compare lines (the first visible bar). */
+  percentBaseIndex = 0;
+  replayState = null;
+  replaySelecting = false;
+  /** Pane height weights the user set by dragging borders (unset panes use PANE_WEIGHT). */
+  paneWeights = /* @__PURE__ */ new Map();
+  paneWeightTotal = 1;
   constructor(container, options = {}) {
     this.theme = { ...lightTheme, ...options.theme };
     this.locale = options.locale ?? "ko";
@@ -2446,18 +2728,21 @@ var Chart = class {
     this.root.appendChild(probe);
     container.appendChild(this.root);
     this.colors = new ColorResolver(probe);
+    this.indicators = new IndicatorManager(indicatorRegistry(options.indicatorDefinitions));
     this.drawings = new DrawingManager((change) => {
       this.invalidate();
       if (change === "commit") {
         this.emitter.emit("drawingsChange", this.getDrawings());
         this.stateChanged();
+        this.recordHistory();
       }
       if (change === "tool") this.emitter.emit("drawingToolChange", this.drawings.tool);
       if (change !== "preview") {
         const d = this.drawings.selected;
         this.emitter.emit("selectionChange", d ? { ...d, points: d.points.map((p) => ({ ...p })) } : null);
       }
-    });
+    }, drawingRegistry(options.drawingDefinitions));
+    this.history.current = this.historySnapshot();
     this.trading = new TradingLayer(() => this.invalidate());
     this.tradingSync = new TradingSync(this.trading, (error) => this.emitter.emit("error", error));
     this.tradingSync.adapter = options.trading ?? null;
@@ -2467,10 +2752,12 @@ var Chart = class {
     this.observeSize();
     this.observeThemeVariables();
     this.observeKeyboard();
+    this.observeCountdown();
   }
   // ── Public API ──────────────────────────────────────────────────────
   /** Replaces all bars and scrolls to the latest. */
   setData(bars) {
+    this.endReplay(false);
     this.store.set(bars);
     this.timeScale.barCount = this.store.length;
     this.timeScale.rightOffset = this.timeScale.options.rightOffset;
@@ -2483,6 +2770,13 @@ var Chart = class {
   }
   /** Realtime tick: same time as the last bar updates it, a newer time appends a bar. */
   update(bar) {
+    const replay = this.replayState;
+    if (replay && (replay.future.length > 0 || bar.time > (this.store.last()?.time ?? -Infinity))) {
+      const tail = replay.future[replay.future.length - 1];
+      if (tail && tail.time === bar.time) replay.future[replay.future.length - 1] = bar;
+      else if (!tail || bar.time > tail.time) replay.future.push(bar);
+      return;
+    }
     const result = this.store.upsert(bar);
     if (result === "ignored") return;
     if (result === "append") {
@@ -2511,6 +2805,7 @@ var Chart = class {
     const feed = this.datafeed;
     if (!feed) throw new Error("funnest-charts: setSymbol() requires the `datafeed` option");
     const token = ++this.loadToken;
+    this.endReplay(false);
     this.unsubscribeBars?.();
     this.unsubscribeBars = null;
     const keepQuotes = this.unsubscribeQuotes !== null && this.quoteSymbol === symbol;
@@ -2576,6 +2871,7 @@ var Chart = class {
         this.emitter.emit("quoteChange", this.latestQuote);
       }) ?? null;
     }
+    for (const entry of this.compares.values()) void this.reloadCompare(entry);
     this.emitter.emit("symbolChange", info);
     this.stateChanged();
   }
@@ -2704,7 +3000,7 @@ var Chart = class {
    */
   async resync(token) {
     const feed = this.datafeed;
-    if (!feed || !this.symbol || !this.resolution) return;
+    if (!feed || !this.symbol || !this.resolution || this.replayState) return;
     try {
       const to = Date.now();
       const result = await feed.getBars(this.symbol, this.resolution, {
@@ -2760,7 +3056,9 @@ var Chart = class {
       settings: this.settings,
       indicators: this.getIndicators(),
       drawings: JSON.parse(JSON.stringify(drawings)),
-      view: { barSpacing: this.timeScale.barSpacing, rightOffset: this.timeScale.rightOffset }
+      view: { barSpacing: this.timeScale.barSpacing, rightOffset: this.timeScale.rightOffset },
+      compares: [...this.compares.keys()],
+      paneWeights: Object.fromEntries(this.paneWeights)
     };
   }
   /**
@@ -2783,6 +3081,12 @@ var Chart = class {
     this.timeScale.barSpacing = state.view.barSpacing;
     this.timeScale.rightOffset = state.view.rightOffset;
     this.timeScale.clamp();
+    this.paneWeights.clear();
+    for (const [id, w] of Object.entries(state.paneWeights ?? {})) if (w > 0) this.paneWeights.set(id, w);
+    const compares = state.compares ?? [];
+    for (const symbol of [...this.compares.keys()]) if (!compares.includes(symbol)) this.removeCompare(symbol);
+    if (this.datafeed) for (const symbol of compares) void this.addCompare(symbol);
+    this.resetHistory();
     this.invalidate();
     this.stateChanged();
   }
@@ -2791,6 +3095,7 @@ var Chart = class {
     const list = this.drawingsBySymbol.get(symbol) ?? [];
     this.drawingsBySymbol.delete(symbol);
     this.drawings.set(list);
+    this.resetHistory();
   }
   stateChanged() {
     if (this.stateQueued) return;
@@ -2827,6 +3132,13 @@ var Chart = class {
   updateDrawing(id, patch) {
     this.drawings.update(id, patch);
   }
+  /** Adds a drawing (e.g. a horizontal line at a price) and selects it. Returns its id. */
+  addDrawing(drawing) {
+    const id = `d_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+    this.drawings.set([...this.drawings.drawings, { ...drawing, id, points: drawing.points.map((p) => ({ ...p })) }]);
+    this.drawings.select(id);
+    return id;
+  }
   removeDrawing(id) {
     this.drawings.remove(id);
   }
@@ -2849,6 +3161,7 @@ var Chart = class {
   removeIndicator(id) {
     if (!this.indicators.remove(id)) return;
     this.indicatorScales.delete(id);
+    this.paneWeights.delete(id);
     this.indicatorsChanged();
   }
   /** Changes params, per-series styles (color/width/visible) and/or overall visibility. */
@@ -2870,7 +3183,7 @@ var Chart = class {
   /** Formatted indicator values at a bar index (default: the last bar), for legends. */
   indicatorLegend(index = this.store.length - 1) {
     return this.indicators.list.map((cfg) => {
-      const def = INDICATORS[cfg.type];
+      const def = this.indicators.def(cfg.type);
       const output = this.indicators.output(cfg, this.store.bars, this.dataVersion);
       const precision = output.precision ?? this.pricePrecision;
       return {
@@ -2880,7 +3193,7 @@ var Chart = class {
         overlay: def.overlay,
         visible: cfg.visible !== false,
         values: output.series.filter((series) => series.visible).map((series) => {
-          const v = series.values[index];
+          const v = series.values[index - (series.shift ?? 0)];
           return {
             key: series.key,
             label: series.label,
@@ -2895,6 +3208,373 @@ var Chart = class {
     this.invalidate();
     this.emitter.emit("indicatorsChange", this.getIndicators());
     this.stateChanged();
+    this.recordHistory();
+  }
+  /** Built-in and custom indicators this chart can add. */
+  indicatorDefinitions() {
+    return [...this.indicators.registry.values()];
+  }
+  indicatorDefinition(type) {
+    return this.indicators.registry.get(type);
+  }
+  /** Built-in and custom drawing tools, in drawing-bar order. */
+  drawingDefinitions() {
+    return [...this.drawings.registry.values()];
+  }
+  // ── Pane sizes ─────────────────────────────────────────────────────
+  /**
+   * Moves the border above pane `index` (1 = between the price pane and the next one) by `dy` px.
+   * The two neighbouring panes trade height; the rest keep theirs. Users do this by dragging.
+   */
+  resizePane(index, dy) {
+    const panes = this.frame?.panes;
+    const above = panes?.[index - 1];
+    const below = panes?.[index];
+    if (!panes || !above || !below || !this.frame) return;
+    const pair = above.height + below.height;
+    const top = Math.min(pair - MIN_PANE_HEIGHT, Math.max(MIN_PANE_HEIGHT, above.height + dy));
+    const unit = this.paneWeightTotal / Math.max(1, this.frame.panesHeight);
+    for (const p of panes) this.paneWeights.set(p.id, p.height * unit);
+    this.paneWeights.set(above.id, top * unit);
+    this.paneWeights.set(below.id, (pair - top) * unit);
+    this.invalidate();
+    this.stateChanged();
+  }
+  /** Back to the default pane heights. */
+  resetPaneSizes() {
+    if (this.paneWeights.size === 0) return;
+    this.paneWeights.clear();
+    this.invalidate();
+    this.stateChanged();
+  }
+  // ── Undo / redo ────────────────────────────────────────────────────
+  get canUndo() {
+    return this.history.undo.length > 0;
+  }
+  get canRedo() {
+    return this.history.redo.length > 0;
+  }
+  /** Reverts the last drawing or indicator change. */
+  undo() {
+    const previous = this.history.undo.pop();
+    if (previous === void 0) return;
+    this.history.redo.push(this.history.current);
+    this.applyHistory(previous);
+  }
+  redo() {
+    const next = this.history.redo.pop();
+    if (next === void 0) return;
+    this.history.undo.push(this.history.current);
+    this.applyHistory(next);
+  }
+  historySnapshot() {
+    return JSON.stringify([this.drawings.drawings, this.indicators.list]);
+  }
+  recordHistory() {
+    const h = this.history;
+    if (h.applying) return;
+    const next = this.historySnapshot();
+    if (next === h.current) return;
+    h.undo.push(h.current);
+    if (h.undo.length > HISTORY_LIMIT) h.undo.shift();
+    h.redo = [];
+    h.current = next;
+    this.emitHistory();
+  }
+  resetHistory() {
+    this.history.undo = [];
+    this.history.redo = [];
+    this.history.current = this.historySnapshot();
+    this.emitHistory();
+  }
+  applyHistory(snapshot) {
+    const [drawings, indicators] = JSON.parse(snapshot);
+    this.history.applying = true;
+    try {
+      this.drawings.set(drawings);
+      this.setIndicators(indicators);
+    } finally {
+      this.history.applying = false;
+    }
+    this.history.current = snapshot;
+    this.emitHistory();
+  }
+  emitHistory() {
+    this.emitter.emit("historyChange", { canUndo: this.canUndo, canRedo: this.canRedo });
+  }
+  // ── Compare ────────────────────────────────────────────────────────
+  /**
+   * Overlays another symbol's closes as a line, rebased to the first visible bar. The price
+   * axis switches to % while any symbol is compared. Needs the `datafeed` option.
+   */
+  async addCompare(symbol) {
+    if (!this.datafeed) throw new Error("funnest-charts: addCompare() requires the `datafeed` option");
+    if (this.compares.has(symbol) || this.compares.size >= MAX_COMPARES || symbol === this.symbol?.symbol) return;
+    const used = new Set([...this.compares.values()].map((e) => e.color));
+    const entry = {
+      symbol,
+      info: null,
+      store: new BarStore(),
+      color: COMPARE_COLORS.find((c) => !used.has(c)) ?? COMPARE_COLORS[0],
+      unsubscribe: null,
+      loadingOlder: false,
+      noMoreOlder: false,
+      aligned: null
+    };
+    this.compares.set(symbol, entry);
+    this.comparesChanged();
+    await this.reloadCompare(entry);
+  }
+  removeCompare(symbol) {
+    const entry = this.compares.get(symbol);
+    if (!entry) return;
+    entry.unsubscribe?.();
+    this.compares.delete(symbol);
+    this.comparesChanged();
+  }
+  getCompares() {
+    return [...this.compares.values()].map((e) => ({
+      symbol: e.symbol,
+      name: e.info?.name ?? e.symbol,
+      color: e.color,
+      ready: e.store.length > 0
+    }));
+  }
+  /** Each compared symbol's % change from the first visible bar, at `index` (default: the last bar). */
+  compareLegend(index = this.store.length - 1) {
+    return this.getCompares().map((info) => {
+      const values = this.alignedCompare(this.compares.get(info.symbol));
+      const base = firstFinite(values, this.percentBaseIndex);
+      const v = values[index];
+      return { ...info, value: v === void 0 || Number.isNaN(v) || !base ? "\u2014" : formatPercent((v / base - 1) * 100, 2) };
+    });
+  }
+  comparesChanged() {
+    this.compareVersion++;
+    this.invalidate();
+    this.emitter.emit("comparesChange", this.getCompares());
+    this.stateChanged();
+  }
+  /** (Re)loads a compared symbol's bars at the current resolution, back to the main series' first bar. */
+  async reloadCompare(entry) {
+    const feed = this.datafeed;
+    const resolution = this.resolution;
+    if (!feed || !resolution) return;
+    const token = this.loadToken;
+    const current = () => this.compares.get(entry.symbol) === entry && token === this.loadToken;
+    entry.unsubscribe?.();
+    entry.unsubscribe = null;
+    try {
+      const info = entry.info ?? await feed.resolveSymbol(entry.symbol);
+      if (!current()) return;
+      entry.info = info;
+      const to = Date.now();
+      const from = this.store.first()?.time ?? to - resolutionToMs(resolution) * this.historyBatchSize;
+      const result = await feed.getBars(info, resolution, {
+        from,
+        to,
+        countBack: Math.max(this.historyBatchSize, this.store.length + 1)
+      });
+      if (!current()) return;
+      entry.store.set(result.bars);
+      entry.noMoreOlder = result.noMoreData;
+      entry.unsubscribe = feed.subscribeBars(
+        info,
+        resolution,
+        (bar) => {
+          if (!current()) return;
+          entry.store.upsert(bar);
+          this.compareVersion++;
+          this.invalidate();
+        },
+        () => {
+        }
+      );
+      this.comparesChanged();
+      void this.loadOlderCompare(entry);
+    } catch (error) {
+      if (!current()) return;
+      this.removeCompare(entry.symbol);
+      this.emitter.emit("error", error);
+    }
+  }
+  /** Pages a compared symbol's history back until it covers the main series' first bar. */
+  async loadOlderCompare(entry) {
+    const feed = this.datafeed;
+    const first = entry.store.first();
+    const mainFirst = this.store.first();
+    if (!feed || !entry.info || !this.resolution || !first || !mainFirst) return;
+    if (entry.loadingOlder || entry.noMoreOlder || first.time <= mainFirst.time) return;
+    const token = this.loadToken;
+    entry.loadingOlder = true;
+    try {
+      const to = first.time - 1;
+      const result = await feed.getBars(entry.info, this.resolution, { from: mainFirst.time, to, countBack: this.historyBatchSize });
+      if (this.compares.get(entry.symbol) !== entry || token !== this.loadToken) return;
+      entry.store.prepend(result.bars);
+      entry.noMoreOlder = result.noMoreData || result.bars.length === 0;
+      this.compareVersion++;
+      this.invalidate();
+    } catch (error) {
+      this.emitter.emit("error", error);
+    } finally {
+      entry.loadingOlder = false;
+    }
+  }
+  /** Compare closes at each main bar (the compare bar at or before its time). */
+  alignedCompare(entry) {
+    const key = `${this.dataVersion}:${this.compareVersion}`;
+    if (entry.aligned?.key === key) return entry.aligned.values;
+    const bars = this.store.bars;
+    const other = entry.store.bars;
+    const values = new Float64Array(bars.length).fill(Number.NaN);
+    let j = -1;
+    for (let i = 0; i < bars.length; i++) {
+      const t = bars[i].time;
+      while (j + 1 < other.length && other[j + 1].time <= t) j++;
+      if (j >= 0) values[i] = other[j].close;
+    }
+    entry.aligned = { key, values };
+    return values;
+  }
+  /** Compare lines in main-price space, each rebased so its first visible value sits on the main close there. */
+  compareOverlays(baseIndex) {
+    const mainBase = this.store.bars[baseIndex]?.close;
+    if (mainBase === void 0) return [];
+    const out = [];
+    for (const entry of this.compares.values()) {
+      if (entry.store.length === 0) continue;
+      const aligned = this.alignedCompare(entry);
+      const base = firstFinite(aligned, baseIndex);
+      if (!base) continue;
+      out.push({
+        series: [
+          {
+            key: entry.symbol,
+            label: entry.info?.name ?? entry.symbol,
+            values: aligned.map((v) => mainBase * v / base),
+            color: entry.color,
+            width: 2,
+            visible: true,
+            kind: "line"
+          }
+        ],
+        precision: null
+      });
+    }
+    return out;
+  }
+  // ── Replay ─────────────────────────────────────────────────────────
+  get replay() {
+    const r = this.replayState;
+    return {
+      selecting: this.replaySelecting,
+      active: r !== null,
+      playing: r?.timer != null,
+      remaining: r?.future.length ?? 0,
+      interval: r?.interval ?? 1e3
+    };
+  }
+  /** Arms start picking: the next click on the chart starts a replay from that bar. Esc cancels. */
+  setReplaySelecting(on) {
+    if (on === this.replaySelecting) return;
+    if (on && this.drawings.tool) this.drawings.setTool(null);
+    this.replaySelecting = on;
+    this.invalidate(false);
+    this.emitReplay();
+  }
+  /** Hides every bar after `time` (UTC ms); reveal them with replayStep/replayPlay. */
+  startReplay(time) {
+    const all = this.replayState ? [...this.store.bars, ...this.replayState.future] : [...this.store.bars];
+    let cut = -1;
+    while (cut + 1 < all.length && all[cut + 1].time <= time) cut++;
+    cut = Math.max(0, cut);
+    if (cut >= all.length - 1) return;
+    const interval = this.replayState?.interval ?? 1e3;
+    this.stopReplayTimer();
+    this.replaySelecting = false;
+    this.replayState = { future: all.slice(cut + 1), timer: null, interval };
+    this.store.set(all.slice(0, cut + 1));
+    this.timeScale.barCount = this.store.length;
+    this.timeScale.rightOffset = Math.max(this.timeScale.options.rightOffset, 10);
+    this.timeScale.clamp();
+    this.mainScale.autoScale = true;
+    this.dataVersion++;
+    this.invalidate();
+    this.emitReplay();
+  }
+  /** Reveals the next `count` hidden bars. */
+  replayStep(count = 1) {
+    const r = this.replayState;
+    if (!r) return;
+    for (let k = 0; k < count && r.future.length > 0; k++) {
+      this.store.upsert(r.future.shift());
+      if (this.timeScale.rightOffset < 0) this.timeScale.rightOffset -= 1;
+    }
+    this.timeScale.barCount = this.store.length;
+    this.dataVersion++;
+    if (r.future.length === 0) this.stopReplayTimer();
+    this.invalidate();
+    this.emitReplay();
+  }
+  /** Plays one bar every `interval` ms (default: the last speed used, initially 1000). */
+  replayPlay(interval) {
+    const r = this.replayState;
+    if (!r || r.future.length === 0) return;
+    if (interval !== void 0) r.interval = Math.max(16, interval);
+    if (r.timer) clearInterval(r.timer);
+    r.timer = setInterval(() => this.replayStep(), r.interval);
+    this.emitReplay();
+  }
+  /** Changes the playback speed (ms per bar), also while playing. */
+  setReplayInterval(interval) {
+    const r = this.replayState;
+    if (!r) return;
+    r.interval = Math.max(16, interval);
+    if (r.timer) {
+      clearInterval(r.timer);
+      r.timer = setInterval(() => this.replayStep(), r.interval);
+    }
+    this.emitReplay();
+  }
+  replayPause() {
+    this.stopReplayTimer();
+    this.emitReplay();
+  }
+  /** Leaves replay and shows every bar again (including live ones that arrived meanwhile). */
+  stopReplay() {
+    this.endReplay(true);
+  }
+  endReplay(restore) {
+    const r = this.replayState;
+    const wasSelecting = this.replaySelecting;
+    this.replaySelecting = false;
+    if (!r) {
+      if (wasSelecting) {
+        this.invalidate(false);
+        this.emitReplay();
+      }
+      return;
+    }
+    this.stopReplayTimer();
+    this.replayState = null;
+    if (restore) {
+      for (const bar of r.future) this.store.upsert(bar);
+      this.timeScale.barCount = this.store.length;
+      this.timeScale.rightOffset = this.timeScale.options.rightOffset;
+      this.timeScale.clamp();
+      this.dataVersion++;
+      this.invalidate();
+    }
+    this.emitReplay();
+  }
+  stopReplayTimer() {
+    const r = this.replayState;
+    if (r?.timer) clearInterval(r.timer);
+    if (r) r.timer = null;
+  }
+  emitReplay() {
+    this.emitter.emit("replayChange", this.replay);
   }
   indicatorScale(id) {
     let scale = this.indicatorScales.get(id);
@@ -2919,6 +3599,10 @@ var Chart = class {
   addOrderLine(options) {
     return this.trading.addOrder(options);
   }
+  /** Price alert line (dotted, gray, "알림" label). Pass `onMove` to make it draggable and `onCancel` for an ×. */
+  addAlertLine(options) {
+    return this.trading.addAlert(options);
+  }
   /** Fill markers (▲ buy under the bar, ▼ sell above). Replaces the previous set. */
   setExecutions(markers) {
     this.trading.setExecutions(markers);
@@ -2976,6 +3660,8 @@ var Chart = class {
     this.loadToken++;
     this.unsubscribeBars?.();
     this.unsubscribeQuotes?.();
+    for (const entry of this.compares.values()) entry.unsubscribe?.();
+    this.stopReplayTimer();
     this.tradingSync.detach();
     if (this.rafId) cancelAnimationFrame(this.rafId);
     this.interaction.destroy();
@@ -3013,6 +3699,7 @@ var Chart = class {
       formatCrosshairTime: (t) => this.formatter.crosshairLabel(t, this.isIntraday()),
       labels: LABELS[this.locale],
       chartType: this.chartType,
+      replaySelecting: this.replaySelecting,
       objects: {
         coords: this.paneCoords(),
         drawings: this.drawings,
@@ -3038,6 +3725,7 @@ var Chart = class {
       plotWidth: ts.width,
       height: scale.height,
       timeToX: (time) => ts.indexToX(this.store.indexFloatOfTime(time, interval)),
+      timeToIndex: (time) => this.store.indexFloatOfTime(time, interval),
       pointAt: (x, y) => {
         const index = Math.round(ts.xToIndexFloat(x));
         const bar = this.magnet ? this.store.at(index) : void 0;
@@ -3050,7 +3738,8 @@ var Chart = class {
       priceToY: (p) => scale.priceToY(p),
       yToPrice: (y) => scale.yToPrice(y),
       snapPrice: (p) => roundToTick(p, this.tickSize),
-      formatPrice: (p) => formatPrice(p, this.pricePrecision)
+      // Drawing and order badges follow the axis (a % axis labels them in %).
+      formatPrice: this.mainScale.mode === "percent" ? this.mainValueFormat() : (p) => formatPrice(p, this.pricePrecision)
     };
   }
   computeFrame() {
@@ -3059,11 +3748,16 @@ var Chart = class {
     const panesHeight = Math.max(0, height - TIME_AXIS_HEIGHT);
     this.timeScale.barCount = this.store.length;
     const indicatorPanes = this.indicators.panes;
-    const totalWeight = PANE_WEIGHT.main + (this.settingsValue.volume ? PANE_WEIGHT.volume : 0) + indicatorPanes.length * PANE_WEIGHT.indicator;
-    const share = (w) => Math.round(panesHeight * w / totalWeight);
-    const volumeHeight = this.settingsValue.volume ? share(PANE_WEIGHT.volume) : 0;
-    const indicatorHeight = share(PANE_WEIGHT.indicator);
-    const mainHeight = panesHeight - volumeHeight - indicatorHeight * indicatorPanes.length;
+    const weightOf = (id, kind) => this.paneWeights.get(id) ?? PANE_WEIGHT[kind];
+    const weights = [["main", weightOf("main", "main")]];
+    if (this.settingsValue.volume) weights.push(["volume", weightOf("volume", "volume")]);
+    for (const c of indicatorPanes) weights.push([c.id, weightOf(c.id, "indicator")]);
+    const totalWeight = weights.reduce((sum, [, w]) => sum + w, 0);
+    this.paneWeightTotal = totalWeight;
+    const heightOf = new Map(weights.map(([id, w]) => [id, Math.max(MIN_PANE_HEIGHT, Math.round(panesHeight * w / totalWeight))]));
+    const volumeHeight = heightOf.get("volume") ?? 0;
+    const indicatorHeights = indicatorPanes.map((c) => heightOf.get(c.id));
+    const mainHeight = Math.max(MIN_PANE_HEIGHT, panesHeight - volumeHeight - indicatorHeights.reduce((a, b) => a + b, 0));
     this.mainScale.height = mainHeight;
     this.volumeScale.height = volumeHeight;
     const drawable = (config) => {
@@ -3074,9 +3768,16 @@ var Chart = class {
       return fill && shown(fill.upper) && shown(fill.lower) ? { ...out, series, fill } : { ...out, series };
     };
     const overlays = this.indicators.overlays.map((config) => ({ config, output: drawable(config) }));
+    const mode = this.compares.size > 0 ? "percent" : this.settingsValue.priceScale;
+    if (this.mainScale.mode !== mode) {
+      this.mainScale.mode = mode;
+      this.mainScale.autoScale = true;
+    }
+    let compareOverlays = [];
+    this.countdownLabel = this.countdownText();
     const subPanes = indicatorPanes.map((config) => {
       const scale = this.indicatorScale(config.id);
-      scale.height = indicatorHeight;
+      scale.height = heightOf.get(config.id);
       return { config, scale, output: drawable(config) };
     });
     const indicatorFormat = (output) => {
@@ -3100,23 +3801,22 @@ var Chart = class {
       this.timeScale.width = Math.max(0, width - this.priceAxisWidth);
       this.timeScale.clamp();
       range = this.timeScale.visibleRange();
-      highLow = this.autoScale(range, overlays.map((o) => o.output));
+      this.percentBaseIndex = Math.max(0, range.from);
+      compareOverlays = this.compareOverlays(this.percentBaseIndex);
+      highLow = this.autoScale(range, [...overlays.map((o) => o.output), ...compareOverlays]);
       for (const pane of subPanes) this.autoScaleIndicator(pane.scale, pane.output, range);
-      const mid = (this.mainScale.min + this.mainScale.max) / 2;
-      priceTicks = niceTicks(
-        this.mainScale.yToPrice(mainHeight),
-        this.mainScale.yToPrice(0),
-        Math.max(2, Math.floor(mainHeight / PRICE_TICK_SPACING)),
-        resolveTickSize(this.tickSize, mid)
-      );
+      priceTicks = this.mainTicks(mainHeight);
       subTicks = subPanes.map((p) => {
-        const [lo, hi] = p.output.range ?? [p.scale.yToPrice(indicatorHeight), p.scale.yToPrice(0)];
-        return niceTicks(lo, hi, Math.max(1, Math.floor(indicatorHeight / 36)));
+        const [lo, hi] = p.output.range ?? [p.scale.yToPrice(p.scale.height), p.scale.yToPrice(0)];
+        return niceTicks(lo, hi, Math.max(1, Math.floor(p.scale.height / 36)));
       });
       let labelWidth = 0;
       const measure = (text) => labelWidth = Math.max(labelWidth, ctx.measureText(text).width);
       const last = this.store.last();
-      for (const v of last ? [...priceTicks, last.close] : priceTicks) measure(formatPrice(v, this.pricePrecision));
+      const tickLabel = this.mainTickFormat(priceTicks);
+      for (const v of priceTicks) measure(tickLabel(v));
+      if (last) measure(this.mainValueFormat()(last.close));
+      if (this.countdownLabel) measure(this.countdownLabel);
       subPanes.forEach((p, i) => subTicks[i].forEach((v) => measure(tickFormat(subTicks[i], p.output)(v))));
       const needed = Math.max(MIN_PRICE_AXIS_WIDTH, Math.ceil((labelWidth + 20) / 8) * 8);
       if (needed === this.priceAxisWidth) break;
@@ -3131,7 +3831,8 @@ var Chart = class {
         height: mainHeight,
         scale: this.mainScale,
         ticks: priceTicks,
-        format: (v) => formatPrice(roundToTick(v, this.tickSize), this.pricePrecision)
+        format: this.mainValueFormat(),
+        tickFormat: this.mainTickFormat(priceTicks)
       }
     ];
     let top = mainHeight;
@@ -3152,14 +3853,14 @@ var Chart = class {
         id: p.config.id,
         kind: "indicator",
         top,
-        height: indicatorHeight,
+        height: p.scale.height,
         scale: p.scale,
         ticks: subTicks[i],
         format: indicatorFormat(p.output),
         tickFormat: tickFormat(subTicks[i], p.output),
         indicator: p.output
       });
-      top += indicatorHeight;
+      top += p.scale.height;
     });
     return {
       width,
@@ -3173,12 +3874,63 @@ var Chart = class {
       timeTicks: computeTimeTicks(this.store.bars, this.timeScale, this.formatter, TIME_LABEL_MIN_GAP),
       highLow,
       settings: this.settingsValue,
-      overlays: overlays.map((o) => o.output),
+      overlays: [...overlays.map((o) => o.output), ...compareOverlays],
       palette: this.resolvePalette(),
       font,
-      radius: this.theme.radius
+      radius: this.theme.radius,
+      countdown: this.countdownLabel
     };
   }
+  /** Price-pane tick values for the current axis mode. */
+  mainTicks(height) {
+    const s = this.mainScale;
+    const lo = s.yToPrice(height);
+    const hi = s.yToPrice(0);
+    const count = Math.max(2, Math.floor(height / PRICE_TICK_SPACING));
+    const minStep = resolveTickSize(this.tickSize, (lo + hi) / 2);
+    if (s.mode === "log") return logTicks(s, PRICE_TICK_SPACING, minStep);
+    if (s.mode === "percent") {
+      const base = this.percentBase();
+      const pct = (p) => (p / base - 1) * 100;
+      return niceTicks(pct(lo), pct(hi), count).map((t) => base * (1 + t / 100));
+    }
+    return niceTicks(lo, hi, count, minStep);
+  }
+  percentBase() {
+    return this.store.at(this.percentBaseIndex)?.close || 1;
+  }
+  /** Price-axis tick labels: prices, or "+2.5%" on a % axis (decimals follow the step). */
+  mainTickFormat(ticks) {
+    if (this.mainScale.mode !== "percent") return (v) => formatPrice(v, this.pricePrecision);
+    const base = this.percentBase();
+    const step = ticks.length > 1 ? Math.abs(ticks[1] - ticks[0]) / base * 100 : 1;
+    const decimals = Math.min(2, decimalsOf(Number(step.toPrecision(6))));
+    return (v) => formatPercent((v / base - 1) * 100, decimals);
+  }
+  /** Crosshair and last-price label of the price pane. */
+  mainValueFormat() {
+    if (this.mainScale.mode !== "percent") return (v) => formatPrice(roundToTick(v, this.tickSize), this.pricePrecision);
+    const base = this.percentBase();
+    return (v) => formatPercent((v / base - 1) * 100, 2);
+  }
+  /** Time left in the last bar, when it's still forming (null otherwise). */
+  countdownText(now = Date.now()) {
+    const s = this.settingsValue;
+    const last = this.store.last();
+    const info = this.symbol;
+    if (!s.countdown || !s.lastPriceLine || this.replayState || !this.resolution || !info || !last) return null;
+    let end = null;
+    if (isIntradayResolution(this.resolution)) {
+      end = last.time + resolutionToMs(this.resolution);
+    } else if (resolutionToMs(this.resolution) === DAY_MS) {
+      if (info.session.trim().toLowerCase() === "24x7") end = last.time + DAY_MS;
+      else {
+        const status = sessionStatus(info.session, info.timezone, now);
+        end = status.open && now - last.time < DAY_MS ? status.nextChange : null;
+      }
+    }
+    return end !== null && end > now ? formatCountdown(end - now) : null;
+  }
   /** Auto-scales the price pane to visible candles and overlay indicators; returns the candle extremes. */
   autoScale(range, overlays) {
     const bars = this.store.bars;
@@ -3204,8 +3956,9 @@ var Chart = class {
       let max = high;
       for (const output of overlays) {
         for (const series of output.series) {
+          const shift = series.shift ?? 0;
           for (let i = range.from; i <= range.to; i++) {
-            const v = series.values[i];
+            const v = series.values[i - shift];
             if (v < min) min = v;
             if (v > max) max = v;
           }
@@ -3229,8 +3982,9 @@ var Chart = class {
         min = Math.min(min, 0);
         max = Math.max(max, 0);
       }
+      const shift = series.shift ?? 0;
       for (let i = range.from; i <= range.to; i++) {
-        const v = series.values[i];
+        const v = series.values[i - shift];
         if (v < min) min = v;
         if (v > max) max = v;
       }
@@ -3300,6 +4054,7 @@ var Chart = class {
       this.prependData(result.bars, { noMoreData: result.noMoreData || result.bars.length === 0 });
       const first = this.store.first();
       if (first) void this.tradingSync.loadOlder(first.time);
+      for (const entry of this.compares.values()) void this.loadOlderCompare(entry);
     }).catch((error) => this.emitter.emit("error", error)).finally(() => {
       if (token === this.loadToken) this.loadingHistory = false;
     });
@@ -3371,6 +4126,8 @@ var Chart = class {
         const f = this.frame;
         if (!f) return { area: "none", pane: null };
         if (y >= f.panesHeight) return { area: x < f.plotWidth ? "timeAxis" : "none", pane: null };
+        const border = f.panes.findIndex((p, i) => i > 0 && Math.abs(y - p.top) <= PANE_BORDER_GRAB);
+        if (border > 0) return { area: "paneBorder", pane: f.panes[border].id, border };
         return { area: x >= f.plotWidth ? "priceAxis" : "plot", pane: this.paneAt(f, y).id };
       },
       plotWidth: () => this.timeScale.width,
@@ -3406,15 +4163,43 @@ var Chart = class {
         this.invalidate();
       },
       resetView: () => this.resetView(),
-      toolActive: () => this.drawings.tool !== null && this.store.length > 0,
+      resizePane: (index, dy) => this.resizePane(index, dy),
+      contextMenu: (x, y) => {
+        const f = this.frame;
+        if (!this.emitter.has("contextMenu") || !f || x > f.plotWidth || y > f.panesHeight) return false;
+        const pane = this.paneAt(f, y);
+        const index = this.timeScale.xToIndex(x);
+        const bar = this.store.at(index);
+        this.emitter.emit("contextMenu", {
+          x,
+          y,
+          pane: pane.id,
+          price: pane.kind === "main" ? roundToTick(this.mainScale.yToPrice(y), this.tickSize) : null,
+          time: bar?.time ?? null
+        });
+        return true;
+      },
+      resetPaneSizes: () => this.resetPaneSizes(),
+      toolActive: () => (this.drawings.tool !== null || this.replaySelecting) && this.store.length > 0,
       hitObject: (x, y, touch) => {
         if (y > this.mainScale.height) return null;
         const tolerance = touch ? HIT_TOLERANCE.touch : HIT_TOLERANCE.mouse;
         return this.trading.hitTest((p) => this.mainScale.priceToY(p), x, y, tolerance) ?? this.drawings.hitTest(this.paneCoords(), x, y, tolerance);
       },
-      drawAt: (x, y) => this.drawings.createAt(this.paneCoords(), x, y),
-      drawPreview: (x, y) => this.drawings.previewAt(this.paneCoords(), x, y),
-      drawRelease: (x, y, moved) => this.drawings.releaseAt(this.paneCoords(), x, y, moved),
+      drawAt: (x, y) => {
+        if (this.replaySelecting) {
+          const bars = this.store.bars;
+          this.startReplay(bars[Math.min(bars.length - 1, Math.max(0, this.timeScale.xToIndex(x)))].time);
+          return;
+        }
+        this.drawings.createAt(this.paneCoords(), x, y);
+      },
+      drawPreview: (x, y) => {
+        if (!this.replaySelecting) this.drawings.previewAt(this.paneCoords(), x, y);
+      },
+      drawRelease: (x, y, moved) => {
+        if (!this.replaySelecting) this.drawings.releaseAt(this.paneCoords(), x, y, moved);
+      },
       objectDown: (hit, x, y) => {
         this.objectDrag = hit;
         if (hit.kind === "drawing") this.drawings.beginDrag(this.paneCoords(), hit.id, hit.part, x, y);
@@ -3449,7 +4234,9 @@ var Chart = class {
     const onKeyDown = (e) => {
       const target = e.target;
       if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) return;
-      if (e.key === "Escape" && (this.drawings.tool || this.drawings.selectedId)) {
+      if (e.key === "Escape" && this.replaySelecting) {
+        this.setReplaySelecting(false);
+      } else if (e.key === "Escape" && (this.drawings.tool || this.drawings.selectedId)) {
         this.drawings.cancel();
       } else if ((e.key === "Delete" || e.key === "Backspace") && this.drawings.selectedId) {
         e.preventDefault();
@@ -3460,6 +4247,14 @@ var Chart = class {
     this.cleanups.push(() => document.removeEventListener("keydown", onKeyDown));
   }
   // ── Environment observers ──────────────────────────────────────────
+  /** Repaints when the bar-close countdown ticks over (once a second, only while it shows or changes). */
+  observeCountdown() {
+    const timer = setInterval(() => {
+      if (this.destroyed || document.hidden) return;
+      if (this.countdownText() !== this.countdownLabel) this.invalidate();
+    }, 1e3);
+    this.cleanups.push(() => clearInterval(timer));
+  }
   observeSize() {
     const apply = (width, height) => {
       const dpr = window.devicePixelRatio || 1;
@@ -3510,103 +4305,6 @@ var Chart = class {
   }
 };
 
-// src/realtime.ts
-var offsetFormatters = /* @__PURE__ */ new Map();
-function timeZoneOffset(time, timeZone) {
-  if (timeZone === "UTC") return 0;
-  let dtf = offsetFormatters.get(timeZone);
-  if (!dtf) {
-    dtf = new Intl.DateTimeFormat("en-US", {
-      timeZone,
-      hourCycle: "h23",
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "numeric",
-      second: "numeric"
-    });
-    offsetFormatters.set(timeZone, dtf);
-  }
-  const p = {};
-  for (const { type, value } of dtf.formatToParts(time)) p[type] = Number(value);
-  const asUtc = Date.UTC(p.year, p.month - 1, p.day, p.hour % 24, p.minute, p.second);
-  return Math.round((asUtc - Math.floor(time / 1e3) * 1e3) / 6e4) * 6e4;
-}
-function bucketStart(time, resolution, timeZone = "UTC") {
-  const offset = timeZoneOffset(time, timeZone);
-  const local = time + offset;
-  const unit = resolution.trim().slice(-1).toUpperCase();
-  if (unit === "M") {
-    const n = Number(resolution.slice(0, -1)) || 1;
-    const d = new Date(local);
-    const months = d.getUTCFullYear() * 12 + d.getUTCMonth();
-    const start = months - months % n;
-    return Date.UTC(Math.floor(start / 12), start % 12, 1) - offset;
-  }
-  if (unit === "W") {
-    const days = Math.floor(local / DAY_MS);
-    const sinceMonday = ((days + 3) % 7 + 7) % 7;
-    return (days - sinceMonday) * DAY_MS - offset;
-  }
-  const size = resolutionToMs(resolution);
-  return Math.floor(local / size) * size - offset;
-}
-var TickAggregator = class {
-  constructor(resolution, timeZone = "UTC") {
-    this.resolution = resolution;
-    this.timeZone = timeZone;
-  }
-  resolution;
-  timeZone;
-  current = null;
-  /** Start from the latest historical bar so the first tick updates it instead of opening a new one. */
-  seed(bar) {
-    this.current = bar ? { ...bar, volume: bar.volume ?? 0 } : null;
-  }
-  /** Returns the updated bar, or null for a tick belonging to an already-closed bar. */
-  push(tick) {
-    const start = bucketStart(tick.time, this.resolution, this.timeZone);
-    const bar = this.current;
-    const volume = tick.volume ?? 0;
-    if (!bar || start > bar.time) {
-      this.current = { time: start, open: tick.price, high: tick.price, low: tick.price, close: tick.price, volume };
-    } else if (start === bar.time) {
-      bar.high = Math.max(bar.high, tick.price);
-      bar.low = Math.min(bar.low, tick.price);
-      bar.close = tick.price;
-      bar.volume = (bar.volume ?? 0) + volume;
-    } else {
-      return null;
-    }
-    return { ...this.current };
-  }
-};
-
-// src/session.ts
-var DAY = 864e5;
-var MINUTE2 = 6e4;
-function sessionStatus(session, timeZone, now = Date.now()) {
-  if (session.trim().toLowerCase() === "24x7") return { open: true, nextChange: null };
-  const match = /^(\d{2})(\d{2})-(\d{2})(\d{2})(?::([1-7]+))?$/.exec(session.trim());
-  if (!match) return { open: true, nextChange: null };
-  const openMin = Number(match[1]) * 60 + Number(match[2]);
-  const closeMin = Number(match[3]) * 60 + Number(match[4]);
-  const days = new Set((match[5] ?? "12345").split("").map(Number));
-  const offset = timeZoneOffset(now, timeZone);
-  const localMidnight = Math.floor((now + offset) / DAY) * DAY;
-  for (let d = -1; d <= 8; d++) {
-    const dayStart = localMidnight + d * DAY;
-    const isoWeekday = (new Date(dayStart).getUTCDay() + 6) % 7 + 1;
-    if (!days.has(isoWeekday)) continue;
-    const open = dayStart + openMin * MINUTE2 - offset;
-    const close = dayStart + closeMin * MINUTE2 - offset;
-    if (now < open) return { open: false, nextChange: open };
-    if (now < close) return { open: true, nextChange: close };
-  }
-  return { open: false, nextChange: null };
-}
-
 // src/datafeed/socket.ts
 var toConnectionStatus = (status) => ({ connecting: "connecting", open: "connected", reconnecting: "reconnecting", closed: "disconnected" })[status];
 var decoder;
@@ -3798,6 +4496,7 @@ function combineDatafeeds(feeds) {
   };
 }
 export {
+  BUILTIN_DRAWINGS,
   Chart,
   DEFAULT_CHART_SETTINGS,
   FIB_LEVELS,
@@ -3813,6 +4512,7 @@ export {
   createTheme,
   darkTheme,
   decimalsOf,
+  distToSegment,
   ema,
   fallbackResolution,
   formatCompact,