@funnest/charts-ui 0.5.1 → 0.6.0

package/dist/index.js

@@ -267,6 +267,160 @@ n = { __e: function(n2, t3, r3, u3) {
   return n2.__v.__b - t3.__v.__b;
 }, e = /* @__PURE__ */ Symbol(), l = /(PointerCapture)$|Capture$/i, c = 0, a = {}, s = 0;
 
+// ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/hooks/dist/hooks.mjs
+var t2;
+var r2;
+var u2;
+var i2;
+var o2 = Object.is;
+var f2 = 0;
+var c2 = [];
+var e2 = [];
+var a2 = n;
+var v2 = a2.__b;
+var l2 = a2.__r;
+var m2 = a2.diffed;
+var h2 = a2.__c;
+var s2 = a2.unmount;
+var p2 = a2.__;
+function y2(n2, t3) {
+  a2.__h && a2.__h(r2, n2, f2 || t3), f2 = 0;
+  var u3 = r2.__H || (r2.__H = { __: [], __h: [] });
+  return n2 >= u3.__.length && u3.__.push({}), u3.__[n2];
+}
+function d2(n2) {
+  return f2 = 1, _2(G2, n2);
+}
+function _2(n2, u3, i3) {
+  var f4 = y2(t2++, 2);
+  if (f4.t = n2, !f4.__c && (f4.__ = [i3 ? i3(u3) : G2(void 0, u3), function(n3) {
+    var t3 = (f4.__N || f4.__)[0], r3 = f4.t(t3, n3);
+    o2(t3, r3) || (f4.__N = [r3, f4.__[1]], f4.__c.setState({}));
+  }], f4.__c = r2, !r2.__f)) {
+    r2.__f = true;
+    var c3 = r2.shouldComponentUpdate;
+    r2.shouldComponentUpdate = function(n3, t3, r3) {
+      var u4 = this.__H;
+      if (!u4) return true;
+      var i4 = false, f5 = this.props != n3;
+      if (u4.__.some(function(n4) {
+        n4.__N && (i4 = true, o2(n4.__[0], n4.__N[0]) || (f5 = true));
+      }), c3) {
+        var e3 = c3.call(this, n3, t3, r3);
+        return i4 ? e3 || f5 : e3;
+      }
+      return !i4 || f5;
+    };
+  }
+  return f4.__;
+}
+function A2(n2, u3) {
+  var i3 = y2(t2++, 3);
+  !a2.__s && E2(i3.__H, u3) && (i3.__P = true, i3.__ = n2, i3.u = u3, r2.__H.__h.push(i3));
+}
+function F2(n2, u3) {
+  var i3 = y2(t2++, 4);
+  !a2.__s && E2(i3.__H, u3) && (i3.__P = false, i3.__ = n2, i3.u = u3, r2.__h.push(i3));
+}
+function T2(n2) {
+  return f2 = 5, w2(function() {
+    return { current: n2 };
+  }, []);
+}
+function w2(n2, r3) {
+  var u3 = y2(t2++, 7);
+  return E2(u3.__H, r3) && (u3.__ = n2(), u3.__H = r3), u3.__;
+}
+function g2() {
+  var n2;
+  do {
+    for (; n2 = e2.shift(); ) try {
+      C2(n2);
+    } catch (t4) {
+      a2.__e(t4, { __: (n2 = n2.__P) && n2.__v });
+    }
+    for (; n2 = c2.shift(); ) {
+      var t3 = n2.__H;
+      if (n2.__P && t3) try {
+        t3.__h.some(C2), t3.__h.some(D2), t3.__h = [];
+      } catch (r3) {
+        t3.__h = [], a2.__e(r3, n2.__v);
+      }
+    }
+  } while (e2.length);
+}
+a2.__b = function(n2) {
+  r2 = null, v2 && v2(n2);
+}, a2.__ = function(n2, t3) {
+  n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), p2 && p2(n2, t3);
+}, a2.__r = function(n2) {
+  l2 && l2(n2), t2 = 0;
+  var i3 = (r2 = n2.__c).__H;
+  i3 && (u2 == r2 ? r2.__h = [] : (i3.__h.some(C2), i3.__h.some(D2), t2 = 0), i3.__h = [], i3.__.some(function(n3) {
+    n3.__N && (n3.__ = n3.__N), n3.u = n3.__N = void 0;
+  })), u2 = r2;
+}, a2.diffed = function(n2) {
+  m2 && m2(n2);
+  var t3 = n2.__c;
+  t3 && t3.__H && (t3.__H.__h.length && B2(c2.push(t3)), t3.__H.__.some(function(n3) {
+    n3.u && (n3.__H = n3.u);
+  })), u2 = r2 = null;
+}, a2.__c = function(n2, t3) {
+  t3.some(function(n3) {
+    try {
+      n3.__h.some(C2), n3.__h = n3.__h.filter(function(n4) {
+        return !n4.__ || D2(n4);
+      });
+    } catch (t4) {
+      n3.__h = [function() {
+        throw t4;
+      }];
+    }
+  }), h2 && h2(n2, t3);
+}, a2.unmount = function(n2) {
+  s2 && s2(n2);
+  var t3, r3, u3 = n2.__c;
+  u3 && u3.__H && (u3.__H.__.some(function(u4) {
+    try {
+      if (u4.__P && u4.__c) {
+        if (void 0 === r3) {
+          for (r3 = n2.__; r3 && (!r3.__c || !r3.__c.__P); ) r3 = r3.__;
+          r3 = r3 && r3.__c;
+        }
+        u4.__P = r3, B2(e2.push(u4));
+      } else C2(u4);
+    } catch (n3) {
+      t3 = n3;
+    }
+  }), u3.__H = void 0, t3 && a2.__e(t3, u3.__v));
+};
+var k = "function" == typeof requestAnimationFrame;
+function z2(n2) {
+  var t3, r3 = function() {
+    clearTimeout(u3), k && cancelAnimationFrame(t3), setTimeout(n2);
+  }, u3 = setTimeout(r3, 35);
+  k && (t3 = requestAnimationFrame(r3));
+}
+function B2(n2) {
+  1 != n2 && i2 == a2.requestAnimationFrame || ((i2 = a2.requestAnimationFrame) || z2)(g2);
+}
+function C2(n2) {
+  var t3 = r2, u3 = n2.__c;
+  "function" == typeof u3 && (n2.__c = void 0, u3()), r2 = t3;
+}
+function D2(n2) {
+  var t3 = r2;
+  n2.__c = n2.__(), r2 = t3;
+}
+function E2(n2, t3) {
+  return !n2 || n2.length != t3.length || t3.some(function(t4, r3) {
+    return !o2(t4, n2[r3]);
+  });
+}
+function G2(n2, t3) {
+  return "function" == typeof t3 ? t3(n2) : t3;
+}
+
 // src/i18n.ts
 var STRINGS = {
   ko: {
@@ -310,6 +464,27 @@ var STRINGS = {
     settingLastPrice: "\uD604\uC7AC\uAC00 \uC120",
     settingVolume: "\uAC70\uB798\uB7C9",
     settingNavButtons: "\uD655\uB300\xB7\uC774\uB3D9 \uBC84\uD2BC",
+    settingCountdown: "\uBD09 \uB9C8\uAC10\uAE4C\uC9C0 \uB0A8\uC740 \uC2DC\uAC04",
+    settingsScale: "\uAC00\uACA9 \uCD95",
+    scaleNormal: "\uC77C\uBC18",
+    scaleLog: "\uB85C\uADF8",
+    scalePercent: "%",
+    undo: "\uB418\uB3CC\uB9AC\uAE30",
+    redo: "\uB2E4\uC2DC \uC2E4\uD589",
+    compare: "\uBE44\uAD50",
+    compareSymbol: "\uBE44\uAD50\uD560 \uC885\uBAA9 \uCD94\uAC00",
+    removeCompare: "\uBE44\uAD50 \uD574\uC81C",
+    replay: "\uB9AC\uD50C\uB808\uC774",
+    replayPick: "\uC2DC\uC791\uD560 \uBD09\uC744 \uB204\uB974\uC138\uC694",
+    replayPlay: "\uC7AC\uC0DD",
+    replayPause: "\uC77C\uC2DC\uC815\uC9C0",
+    replayStep: "\uD55C \uBD09 \uC55E\uC73C\uB85C",
+    replayExit: "\uB9AC\uD50C\uB808\uC774 \uC885\uB8CC",
+    replaySpeed: "\uC18D\uB3C4",
+    replayRestart: "\uC2DC\uC791 \uC9C0\uC810 \uB2E4\uC2DC \uACE0\uB974\uAE30",
+    replayDone: "\uB05D\uAE4C\uC9C0 \uC7AC\uC0DD\uD588\uC5B4\uC694",
+    searchIndicators: "\uC9C0\uD45C \uAC80\uC0C9",
+    moreTools: "\uB3C4\uAD6C \uB354 \uBCF4\uAE30",
     settingGridH: "\uAC00\uB85C \uACA9\uC790",
     settingGridV: "\uC138\uB85C \uACA9\uC790",
     resetDefaults: "\uAE30\uBCF8\uAC12\uC73C\uB85C",
@@ -417,6 +592,27 @@ var STRINGS = {
     settingLastPrice: "Last price line",
     settingVolume: "Volume",
     settingNavButtons: "Zoom & scroll buttons",
+    settingCountdown: "Time to bar close",
+    settingsScale: "Price scale",
+    scaleNormal: "Regular",
+    scaleLog: "Log",
+    scalePercent: "%",
+    undo: "Undo",
+    redo: "Redo",
+    compare: "Compare",
+    compareSymbol: "Add symbol to compare",
+    removeCompare: "Remove comparison",
+    replay: "Replay",
+    replayPick: "Click the bar to start from",
+    replayPlay: "Play",
+    replayPause: "Pause",
+    replayStep: "Step forward",
+    replayExit: "Exit replay",
+    replaySpeed: "Speed",
+    replayRestart: "Pick a new start",
+    replayDone: "Reached the end",
+    searchIndicators: "Search indicators",
+    moreTools: "More tools",
     settingGridH: "Horizontal grid",
     settingGridV: "Vertical grid",
     resetDefaults: "Reset",
@@ -506,19 +702,19 @@ function resolutionLabel(resolution, locale, form = "short") {
 }
 
 // ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs
-var f2 = /* @__PURE__ */ Symbol.for("pv");
-var o2 = 0;
-function a2(t3, e3, n2, u3, a4, i3) {
+var f3 = /* @__PURE__ */ Symbol.for("pv");
+var o3 = 0;
+function a3(t3, e3, n2, u3, a4, i3) {
   e3 || (e3 = {});
   var c3, l3, p3 = e3;
   if ("ref" in p3 && "function" != typeof t3) for (l3 in p3 = {}, e3) "ref" == l3 ? c3 = e3[l3] : p3[l3] = e3[l3];
-  var s3 = { type: t3, props: p3, key: n2, ref: c3, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: f2, __v: --o2, __i: -1, __u: 0 };
+  var s3 = { type: t3, props: p3, key: n2, ref: c3, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: f3, __v: --o3, __i: -1, __u: 0 };
   return (a4 || i3) && (s3.__source = a4, s3.__self = i3), n.vnode && n.vnode(s3), s3;
 }
 
 // src/icons.tsx
 function Icon({ children, size = 20 }) {
-  return /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3(
     "svg",
     {
       width: size,
@@ -534,245 +730,129 @@ function Icon({ children, size = 20 }) {
     }
   );
 }
-var SearchIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: [
-  /* @__PURE__ */ a2("circle", { cx: "9", cy: "9", r: "5.5" }),
-  /* @__PURE__ */ a2("path", { d: "M13 13l3.5 3.5" })
+var SearchIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("circle", { cx: "9", cy: "9", r: "5.5" }),
+  /* @__PURE__ */ a3("path", { d: "M13 13l3.5 3.5" })
 ] });
-var CloseIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M5.5 5.5l9 9M14.5 5.5l-9 9" }) });
-var CameraIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M3.5 7.2c0-.9.7-1.6 1.6-1.6h1.6l1.2-1.8h4.2l1.2 1.8h1.6c.9 0 1.6.7 1.6 1.6v6.6c0 .9-.7 1.6-1.6 1.6H5.1c-.9 0-1.6-.7-1.6-1.6z" }),
-  /* @__PURE__ */ a2("circle", { cx: "10", cy: "10.4", r: "2.6" })
+var CloseIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M5.5 5.5l9 9M14.5 5.5l-9 9" }) });
+var CameraIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3.5 7.2c0-.9.7-1.6 1.6-1.6h1.6l1.2-1.8h4.2l1.2 1.8h1.6c.9 0 1.6.7 1.6 1.6v6.6c0 .9-.7 1.6-1.6 1.6H5.1c-.9 0-1.6-.7-1.6-1.6z" }),
+  /* @__PURE__ */ a3("circle", { cx: "10", cy: "10.4", r: "2.6" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M4 8V4h4M16 8V4h-4M4 12v4h4M16 12v4h-4" }) });
-var CollapseIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M8 4v4H4M12 4v4h4M8 16v-4H4M12 16v-4h4" }) });
-var MinusIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: /* @__PURE__ */ a2("path", { d: "M5 10h10" }) });
-var PlusIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: /* @__PURE__ */ a2("path", { d: "M5 10h10M10 5v10" }) });
-var ChevronLeftIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: /* @__PURE__ */ a2("path", { d: "M12 5l-5 5 5 5" }) });
-var ChevronRightIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: /* @__PURE__ */ a2("path", { d: "M8 5l5 5-5 5" }) });
-var ResetIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: [
-  /* @__PURE__ */ a2("path", { d: "M4.5 10a5.5 5.5 0 1 0 1.7-4" }),
-  /* @__PURE__ */ a2("path", { d: "M4.5 3.5V7H8" })
+var ExpandIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M4 8V4h4M16 8V4h-4M4 12v4h4M16 12v4h-4" }) });
+var CollapseIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M8 4v4H4M12 4v4h4M8 16v-4H4M12 16v-4h4" }) });
+var MinusIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M5 10h10" }) });
+var PlusIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M5 10h10M10 5v10" }) });
+var ChevronLeftIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M12 5l-5 5 5 5" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M8 5l5 5-5 5" }) });
+var ResetIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("path", { d: "M4.5 10a5.5 5.5 0 1 0 1.7-4" }),
+  /* @__PURE__ */ a3("path", { d: "M4.5 3.5V7H8" })
 ] });
-var ToRealtimeIcon = () => /* @__PURE__ */ a2(Icon, { size: 18, children: /* @__PURE__ */ a2("path", { d: "M5 5.5l4.5 4.5L5 14.5M10 5.5l4.5 4.5-4.5 4.5" }) });
-var ChevronDownIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: /* @__PURE__ */ a2("path", { d: "M5 8l5 5 5-5" }) });
-var CursorIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M5 3.5l10 6.2-4.4 1.1-2 4.2z" }) });
-var TrendLineIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M5 15L15 5" }),
-  /* @__PURE__ */ a2("circle", { cx: "5", cy: "15", r: "1.6", fill: "currentColor" }),
-  /* @__PURE__ */ a2("circle", { cx: "15", cy: "5", r: "1.6", fill: "currentColor" })
+var ToRealtimeIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M5 5.5l4.5 4.5L5 14.5M10 5.5l4.5 4.5-4.5 4.5" }) });
+var ChevronDownIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M5 8l5 5 5-5" }) });
+var CursorIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M5 3.5l10 6.2-4.4 1.1-2 4.2z" }) });
+var TrendLineIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M5 15L15 5" }),
+  /* @__PURE__ */ a3("circle", { cx: "5", cy: "15", r: "1.6", fill: "currentColor" }),
+  /* @__PURE__ */ a3("circle", { cx: "15", cy: "5", r: "1.6", fill: "currentColor" })
 ] });
-var HorizontalLineIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M3 10h14" }),
-  /* @__PURE__ */ a2("circle", { cx: "10", cy: "10", r: "1.6", fill: "currentColor" })
+var HorizontalLineIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3 10h14" }),
+  /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "1.6", fill: "currentColor" })
 ] });
-var FibonacciIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M3 4.5h14M3 8.2h14M3 11.8h14M3 15.5h14" }) });
-var TrashIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M4.5 6h11M8 6V4.5h4V6M6 6l.7 9.5h6.6L14 6" }) });
-var PencilIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M12.8 4.2l3 3L7.5 15.5 4 16l.5-3.5z" }) });
-var CandlesIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M6.5 3.5v13M13.5 3.5v13" }),
-  /* @__PURE__ */ a2("rect", { x: "4.5", y: "6", width: "4", height: "6", rx: "0.8", fill: "currentColor" }),
-  /* @__PURE__ */ a2("rect", { x: "11.5", y: "8", width: "4", height: "5", rx: "0.8" })
+var FibonacciIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M3 4.5h14M3 8.2h14M3 11.8h14M3 15.5h14" }) });
+var TrashIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M4.5 6h11M8 6V4.5h4V6M6 6l.7 9.5h6.6L14 6" }) });
+var PencilIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M12.8 4.2l3 3L7.5 15.5 4 16l.5-3.5z" }) });
+var CandlesIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M6.5 3.5v13M13.5 3.5v13" }),
+  /* @__PURE__ */ a3("rect", { x: "4.5", y: "6", width: "4", height: "6", rx: "0.8", fill: "currentColor" }),
+  /* @__PURE__ */ a3("rect", { x: "11.5", y: "8", width: "4", height: "5", rx: "0.8" })
 ] });
-var LineChartIcon = () => /* @__PURE__ */ a2(Icon, { children: /* @__PURE__ */ a2("path", { d: "M3 14l4.5-5 3.5 3 6-7" }) });
-var AreaChartIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M3 14l4.5-5 3.5 3 6-7" }),
-  /* @__PURE__ */ a2("path", { d: "M3 14l4.5-5 3.5 3 6-7V17H3z", fill: "currentColor", "fill-opacity": "0.25", stroke: "none" })
+var LineChartIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M3 14l4.5-5 3.5 3 6-7" }) });
+var AreaChartIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3 14l4.5-5 3.5 3 6-7" }),
+  /* @__PURE__ */ a3("path", { d: "M3 14l4.5-5 3.5 3 6-7V17H3z", fill: "currentColor", "fill-opacity": "0.25", stroke: "none" })
 ] });
-var IndicatorIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M3 15.5l4-5 3 2.5 3.5-5L17 11" }),
-  /* @__PURE__ */ a2("path", { d: "M3 4.5v11.5h14" })
+var IndicatorIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3 15.5l4-5 3 2.5 3.5-5L17 11" }),
+  /* @__PURE__ */ a3("path", { d: "M3 4.5v11.5h14" })
 ] });
-var GearIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: [
-  /* @__PURE__ */ a2("circle", { cx: "10", cy: "10", r: "2.4" }),
-  /* @__PURE__ */ a2("path", { d: "M10 3v2M10 15v2M3 10h2M15 10h2M5 5l1.4 1.4M13.6 13.6L15 15M5 15l1.4-1.4M13.6 6.4L15 5" })
+var GearIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: [
+  /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "2.4" }),
+  /* @__PURE__ */ a3("path", { d: "M10 3v2M10 15v2M3 10h2M15 10h2M5 5l1.4 1.4M13.6 13.6L15 15M5 15l1.4-1.4M13.6 6.4L15 5" })
 ] });
-var SmallCloseIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: /* @__PURE__ */ a2("path", { d: "M6 6l8 8M14 6l-8 8" }) });
-var EyeIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: [
-  /* @__PURE__ */ a2("path", { d: "M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10z" }),
-  /* @__PURE__ */ a2("circle", { cx: "10", cy: "10", r: "2.3" })
+var SmallCloseIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M6 6l8 8M14 6l-8 8" }) });
+var EyeIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: [
+  /* @__PURE__ */ a3("path", { d: "M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10z" }),
+  /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "2.3" })
 ] });
-var EyeOffIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: /* @__PURE__ */ a2("path", { d: "M3 3l14 14M8.2 5a8 8 0 0 1 1.8-.5c5 0 8 5.5 8 5.5a14 14 0 0 1-2.2 2.9M5.4 6.4A14 14 0 0 0 2 10s3 5.5 8 5.5a7.7 7.7 0 0 0 3.6-.9" }) });
-var MagnetIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M5 4h3v6.5a2 2 0 0 0 4 0V4h3v6.5a5 5 0 0 1-10 0z" }),
-  /* @__PURE__ */ a2("path", { d: "M5 7h3M12 7h3" })
+var EyeOffIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M3 3l14 14M8.2 5a8 8 0 0 1 1.8-.5c5 0 8 5.5 8 5.5a14 14 0 0 1-2.2 2.9M5.4 6.4A14 14 0 0 0 2 10s3 5.5 8 5.5a7.7 7.7 0 0 0 3.6-.9" }) });
+var MagnetIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M5 4h3v6.5a2 2 0 0 0 4 0V4h3v6.5a5 5 0 0 1-10 0z" }),
+  /* @__PURE__ */ a3("path", { d: "M5 7h3M12 7h3" })
 ] });
-var StarIcon = ({ filled = false }) => /* @__PURE__ */ a2(Icon, { size: 16, children: /* @__PURE__ */ a2(
+var StarIcon = ({ filled = false }) => /* @__PURE__ */ a3(Icon, { size: 16, children: /* @__PURE__ */ a3(
   "path",
   {
     d: "M10 3.2l2.1 4.3 4.7.7-3.4 3.3.8 4.7L10 14l-4.2 2.2.8-4.7-3.4-3.3 4.7-.7z",
     fill: filled ? "currentColor" : "none"
   }
 ) });
-var CollapseLeftIcon = () => /* @__PURE__ */ a2(Icon, { size: 14, children: /* @__PURE__ */ a2("path", { d: "M11 5l-5 5 5 5M15 5l-5 5 5 5" }) });
-var SettingsIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M10 12.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z" }),
-  /* @__PURE__ */ a2("path", { d: "M16.2 12a1.3 1.3 0 0 0 .26 1.43l.05.05a1.6 1.6 0 1 1-2.26 2.26l-.05-.05a1.3 1.3 0 0 0-1.43-.26 1.3 1.3 0 0 0-.79 1.19v.14a1.6 1.6 0 0 1-3.2 0v-.07a1.3 1.3 0 0 0-.85-1.19 1.3 1.3 0 0 0-1.43.26l-.05.05a1.6 1.6 0 1 1-2.26-2.26l.05-.05A1.3 1.3 0 0 0 4.5 12a1.3 1.3 0 0 0-1.19-.79h-.14a1.6 1.6 0 0 1 0-3.2h.07a1.3 1.3 0 0 0 1.19-.85 1.3 1.3 0 0 0-.26-1.43l-.05-.05a1.6 1.6 0 1 1 2.26-2.26l.05.05a1.3 1.3 0 0 0 1.43.26h.06a1.3 1.3 0 0 0 .79-1.19v-.14a1.6 1.6 0 0 1 3.2 0v.07a1.3 1.3 0 0 0 .79 1.19 1.3 1.3 0 0 0 1.43-.26l.05-.05a1.6 1.6 0 1 1 2.26 2.26l-.05.05a1.3 1.3 0 0 0-.26 1.43v.06a1.3 1.3 0 0 0 1.19.79h.14a1.6 1.6 0 0 1 0 3.2h-.07a1.3 1.3 0 0 0-1.19.79z" })
+var CollapseLeftIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M11 5l-5 5 5 5M15 5l-5 5 5 5" }) });
+var SettingsIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M10 12.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z" }),
+  /* @__PURE__ */ a3("path", { d: "M16.2 12a1.3 1.3 0 0 0 .26 1.43l.05.05a1.6 1.6 0 1 1-2.26 2.26l-.05-.05a1.3 1.3 0 0 0-1.43-.26 1.3 1.3 0 0 0-.79 1.19v.14a1.6 1.6 0 0 1-3.2 0v-.07a1.3 1.3 0 0 0-.85-1.19 1.3 1.3 0 0 0-1.43.26l-.05.05a1.6 1.6 0 1 1-2.26-2.26l.05-.05A1.3 1.3 0 0 0 4.5 12a1.3 1.3 0 0 0-1.19-.79h-.14a1.6 1.6 0 0 1 0-3.2h.07a1.3 1.3 0 0 0 1.19-.85 1.3 1.3 0 0 0-.26-1.43l-.05-.05a1.6 1.6 0 1 1 2.26-2.26l.05.05a1.3 1.3 0 0 0 1.43.26h.06a1.3 1.3 0 0 0 .79-1.19v-.14a1.6 1.6 0 0 1 3.2 0v.07a1.3 1.3 0 0 0 .79 1.19 1.3 1.3 0 0 0 1.43-.26l.05-.05a1.6 1.6 0 1 1 2.26 2.26l-.05.05a1.3 1.3 0 0 0-.26 1.43v.06a1.3 1.3 0 0 0 1.19.79h.14a1.6 1.6 0 0 1 0 3.2h-.07a1.3 1.3 0 0 0-1.19.79z" })
 ] });
-var FunnestMark = () => /* @__PURE__ */ a2("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [
-  /* @__PURE__ */ a2("rect", { width: "32", height: "32", rx: "9", fill: "#6C4DFF" }),
-  /* @__PURE__ */ a2("path", { d: "M7 13.5C9.5 21.5 17 23.5 23.4 11.2", stroke: "#fff", "stroke-width": "3.2", "stroke-linecap": "round" }),
-  /* @__PURE__ */ a2("circle", { cx: "24.6", cy: "8.6", r: "2.9", fill: "#FFD43B" })
+var FunnestMark = () => /* @__PURE__ */ a3("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ a3("rect", { width: "32", height: "32", rx: "9", fill: "#6C4DFF" }),
+  /* @__PURE__ */ a3("path", { d: "M7 13.5C9.5 21.5 17 23.5 23.4 11.2", stroke: "#fff", "stroke-width": "3.2", "stroke-linecap": "round" }),
+  /* @__PURE__ */ a3("circle", { cx: "24.6", cy: "8.6", r: "2.9", fill: "#FFD43B" })
 ] });
-var LinkIcon = () => /* @__PURE__ */ a2(Icon, { children: [
-  /* @__PURE__ */ a2("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1" }),
-  /* @__PURE__ */ a2("path", { d: "M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1" })
+var LinkIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1" }),
+  /* @__PURE__ */ a3("path", { d: "M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1" })
 ] });
-var MaximizeIcon = () => /* @__PURE__ */ a2(Icon, { size: 16, children: /* @__PURE__ */ a2("path", { d: "M11 4h5v5M9 16H4v-5M16 4l-5 5M4 16l5-5" }) });
-var RestoreIcon = () => /* @__PURE__ */ a2(Icon, { size: 16, children: /* @__PURE__ */ a2("path", { d: "M15 9h-4V5M5 11h4v4M11 9l5-5M9 11l-5 5" }) });
-
-// ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/hooks/dist/hooks.mjs
-var t2;
-var r2;
-var u2;
-var i2;
-var o3 = Object.is;
-var f3 = 0;
-var c2 = [];
-var e2 = [];
-var a3 = n;
-var v2 = a3.__b;
-var l2 = a3.__r;
-var m2 = a3.diffed;
-var h2 = a3.__c;
-var s2 = a3.unmount;
-var p2 = a3.__;
-function y2(n2, t3) {
-  a3.__h && a3.__h(r2, n2, f3 || t3), f3 = 0;
-  var u3 = r2.__H || (r2.__H = { __: [], __h: [] });
-  return n2 >= u3.__.length && u3.__.push({}), u3.__[n2];
-}
-function d2(n2) {
-  return f3 = 1, _2(G2, n2);
-}
-function _2(n2, u3, i3) {
-  var f4 = y2(t2++, 2);
-  if (f4.t = n2, !f4.__c && (f4.__ = [i3 ? i3(u3) : G2(void 0, u3), function(n3) {
-    var t3 = (f4.__N || f4.__)[0], r3 = f4.t(t3, n3);
-    o3(t3, r3) || (f4.__N = [r3, f4.__[1]], f4.__c.setState({}));
-  }], f4.__c = r2, !r2.__f)) {
-    r2.__f = true;
-    var c3 = r2.shouldComponentUpdate;
-    r2.shouldComponentUpdate = function(n3, t3, r3) {
-      var u4 = this.__H;
-      if (!u4) return true;
-      var i4 = false, f5 = this.props != n3;
-      if (u4.__.some(function(n4) {
-        n4.__N && (i4 = true, o3(n4.__[0], n4.__N[0]) || (f5 = true));
-      }), c3) {
-        var e3 = c3.call(this, n3, t3, r3);
-        return i4 ? e3 || f5 : e3;
-      }
-      return !i4 || f5;
-    };
+var MaximizeIcon = () => /* @__PURE__ */ a3(Icon, { size: 16, children: /* @__PURE__ */ a3("path", { d: "M11 4h5v5M9 16H4v-5M16 4l-5 5M4 16l5-5" }) });
+var RestoreIcon = () => /* @__PURE__ */ a3(Icon, { size: 16, children: /* @__PURE__ */ a3("path", { d: "M15 9h-4V5M5 11h4v4M11 9l5-5M9 11l-5 5" }) });
+var UndoIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("path", { d: "M7 5L3.5 8.5 7 12" }),
+  /* @__PURE__ */ a3("path", { d: "M3.5 8.5h8.5a4.5 4.5 0 0 1 0 9H9" })
+] });
+var RedoIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("path", { d: "M13 5l3.5 3.5L13 12" }),
+  /* @__PURE__ */ a3("path", { d: "M16.5 8.5H8a4.5 4.5 0 0 0 0 9h3" })
+] });
+var CompareIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3 14l4-4 3 2 7-7" }),
+  /* @__PURE__ */ a3("path", { d: "M3 9l4 2 3-3 7 5", opacity: "0.55" })
+] });
+var ReplayIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M5 4v12" }),
+  /* @__PURE__ */ a3("path", { d: "M16 4.5v11L8 10z" })
+] });
+var PlayIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M6 4.5v11l9-5.5z", fill: "currentColor" }) });
+var PauseIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: /* @__PURE__ */ a3("path", { d: "M7 4.5v11M13 4.5v11", "stroke-width": "2.4" }) });
+var StepIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("path", { d: "M4.5 4.5v11l8-5.5z" }),
+  /* @__PURE__ */ a3("path", { d: "M15.5 4.5v11" })
+] });
+var SvgIcon = ({ markup }) => markup.trim().startsWith("<svg") ? /* @__PURE__ */ a3("span", { class: "fnc-svg-icon", dangerouslySetInnerHTML: { __html: markup } }) : /* @__PURE__ */ a3(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "1.6",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true",
+    dangerouslySetInnerHTML: { __html: markup }
   }
-  return f4.__;
-}
-function A2(n2, u3) {
-  var i3 = y2(t2++, 3);
-  !a3.__s && E2(i3.__H, u3) && (i3.__P = true, i3.__ = n2, i3.u = u3, r2.__H.__h.push(i3));
-}
-function F2(n2, u3) {
-  var i3 = y2(t2++, 4);
-  !a3.__s && E2(i3.__H, u3) && (i3.__P = false, i3.__ = n2, i3.u = u3, r2.__h.push(i3));
-}
-function T2(n2) {
-  return f3 = 5, w2(function() {
-    return { current: n2 };
-  }, []);
-}
-function w2(n2, r3) {
-  var u3 = y2(t2++, 7);
-  return E2(u3.__H, r3) && (u3.__ = n2(), u3.__H = r3), u3.__;
-}
-function g2() {
-  var n2;
-  do {
-    for (; n2 = e2.shift(); ) try {
-      C2(n2);
-    } catch (t4) {
-      a3.__e(t4, { __: (n2 = n2.__P) && n2.__v });
-    }
-    for (; n2 = c2.shift(); ) {
-      var t3 = n2.__H;
-      if (n2.__P && t3) try {
-        t3.__h.some(C2), t3.__h.some(D2), t3.__h = [];
-      } catch (r3) {
-        t3.__h = [], a3.__e(r3, n2.__v);
-      }
-    }
-  } while (e2.length);
-}
-a3.__b = function(n2) {
-  r2 = null, v2 && v2(n2);
-}, a3.__ = function(n2, t3) {
-  n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), p2 && p2(n2, t3);
-}, a3.__r = function(n2) {
-  l2 && l2(n2), t2 = 0;
-  var i3 = (r2 = n2.__c).__H;
-  i3 && (u2 == r2 ? r2.__h = [] : (i3.__h.some(C2), i3.__h.some(D2), t2 = 0), i3.__h = [], i3.__.some(function(n3) {
-    n3.__N && (n3.__ = n3.__N), n3.u = n3.__N = void 0;
-  })), u2 = r2;
-}, a3.diffed = function(n2) {
-  m2 && m2(n2);
-  var t3 = n2.__c;
-  t3 && t3.__H && (t3.__H.__h.length && B2(c2.push(t3)), t3.__H.__.some(function(n3) {
-    n3.u && (n3.__H = n3.u);
-  })), u2 = r2 = null;
-}, a3.__c = function(n2, t3) {
-  t3.some(function(n3) {
-    try {
-      n3.__h.some(C2), n3.__h = n3.__h.filter(function(n4) {
-        return !n4.__ || D2(n4);
-      });
-    } catch (t4) {
-      n3.__h = [function() {
-        throw t4;
-      }];
-    }
-  }), h2 && h2(n2, t3);
-}, a3.unmount = function(n2) {
-  s2 && s2(n2);
-  var t3, r3, u3 = n2.__c;
-  u3 && u3.__H && (u3.__H.__.some(function(u4) {
-    try {
-      if (u4.__P && u4.__c) {
-        if (void 0 === r3) {
-          for (r3 = n2.__; r3 && (!r3.__c || !r3.__c.__P); ) r3 = r3.__;
-          r3 = r3 && r3.__c;
-        }
-        u4.__P = r3, B2(e2.push(u4));
-      } else C2(u4);
-    } catch (n3) {
-      t3 = n3;
-    }
-  }), u3.__H = void 0, t3 && a3.__e(t3, u3.__v));
-};
-var k = "function" == typeof requestAnimationFrame;
-function z2(n2) {
-  var t3, r3 = function() {
-    clearTimeout(u3), k && cancelAnimationFrame(t3), setTimeout(n2);
-  }, u3 = setTimeout(r3, 35);
-  k && (t3 = requestAnimationFrame(r3));
-}
-function B2(n2) {
-  1 != n2 && i2 == a3.requestAnimationFrame || ((i2 = a3.requestAnimationFrame) || z2)(g2);
-}
-function C2(n2) {
-  var t3 = r2, u3 = n2.__c;
-  "function" == typeof u3 && (n2.__c = void 0, u3()), r2 = t3;
-}
-function D2(n2) {
-  var t3 = r2;
-  n2.__c = n2.__(), r2 = t3;
-}
-function E2(n2, t3) {
-  return !n2 || n2.length != t3.length || t3.some(function(t4, r3) {
-    return !o3(t4, n2[r3]);
-  });
-}
-function G2(n2, t3) {
-  return "function" == typeof t3 ? t3(n2) : t3;
-}
+);
+var CornerIcon = () => /* @__PURE__ */ a3("svg", { width: "6", height: "6", viewBox: "0 0 6 6", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M6 0v6H0z", fill: "currentColor" }) });
 
 // src/store.ts
 var Store = class {
@@ -811,22 +891,71 @@ function useStore(store) {
 }
 
 // src/components/drawing-toolbar.tsx
-var TOOLS = [
-  { tool: null, label: "cursor", icon: CursorIcon },
-  { tool: "trendline", label: "trendline", icon: TrendLineIcon },
-  { tool: "horizontal", label: "horizontal", icon: HorizontalLineIcon },
-  { tool: "fibonacci", label: "fibonacci", icon: FibonacciIcon }
-];
+var BUILTIN_ICONS = {
+  trendline: TrendLineIcon,
+  horizontal: HorizontalLineIcon,
+  fibonacci: FibonacciIcon
+};
+function ToolIcon({ def, locale }) {
+  const Builtin = BUILTIN_ICONS[def.type];
+  if (Builtin) return /* @__PURE__ */ a3(Builtin, {});
+  if (def.icon) return /* @__PURE__ */ a3(SvgIcon, { markup: def.icon });
+  return /* @__PURE__ */ a3("span", { class: "fnc-tool-letter", children: def.name[locale].slice(0, 1) });
+}
+function toolGroups(defs) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const def of defs) {
+    const key = def.group ?? def.type;
+    groups.set(key, [...groups.get(key) ?? [], def]);
+  }
+  return [...groups];
+}
+function ToolGroup({
+  ctx,
+  tools,
+  open,
+  onOpen,
+  onPick
+}) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const [chosen, setChosen] = d2(tools[0].type);
+  const armed = tools.find((d3) => d3.type === s3.drawingTool);
+  const current = armed ?? tools.find((d3) => d3.type === chosen) ?? tools[0];
+  const name = current.name[s3.locale];
+  const ref = T2(null);
+  A2(() => {
+    if (!open) return;
+    const close = (e3) => !ref.current?.contains(e3.target) && onOpen(false);
+    document.addEventListener("pointerdown", close, true);
+    return () => document.removeEventListener("pointerdown", close, true);
+  }, [open]);
+  const pick = (def) => {
+    setChosen(def.type);
+    onOpen(false);
+    onPick(def.type);
+  };
+  return /* @__PURE__ */ a3("div", { class: "fnc-tool-group", ref, "data-open": open, children: [
+    /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": name, "aria-label": name, "aria-pressed": !!armed, onClick: () => pick(current), children: /* @__PURE__ */ a3(ToolIcon, { def: current, locale: s3.locale }) }),
+    tools.length > 1 && /* @__PURE__ */ a3("button", { class: "fnc-tool-more", "aria-label": `${t3.moreTools}: ${name}`, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => onOpen(!open), children: /* @__PURE__ */ a3(CornerIcon, {}) }),
+    open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-tool-menu", role: "menu", children: tools.map((def) => /* @__PURE__ */ a3("button", { class: "fnc-menu-item", role: "menuitemradio", "aria-checked": def.type === current.type, onClick: () => pick(def), children: [
+      /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale }),
+      /* @__PURE__ */ a3("span", { children: def.name[s3.locale] })
+    ] })) })
+  ] });
+}
 function DrawingToolbar({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = STRINGS[s3.locale];
+  const [openGroup, setOpenGroup] = d2(null);
+  const groups = toolGroups(ctx.chart.drawingDefinitions());
   const pick = (tool) => {
     ctx.chart.setDrawingTool(tool);
     if (tool && ctx.store.get().drawbarOpen) ctx.store.set({ drawbarOpen: false });
   };
-  return /* @__PURE__ */ a2($, { children: [
-    s3.drawbarCollapsed && /* @__PURE__ */ a2("button", { class: "fnc-drawbar-tab", "aria-label": t3.expandDrawbar, title: t3.expandDrawbar, onClick: () => ctx.setDrawbarCollapsed(false), children: /* @__PURE__ */ a2(ChevronRightIcon, {}) }),
-    /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3($, { children: [
+    s3.drawbarCollapsed && /* @__PURE__ */ a3("button", { class: "fnc-drawbar-tab", "aria-label": t3.expandDrawbar, "data-tip": t3.expandDrawbar, onClick: () => ctx.setDrawbarCollapsed(false), children: /* @__PURE__ */ a3(ChevronRightIcon, {}) }),
+    /* @__PURE__ */ a3(
       "div",
       {
         class: "fnc-drawbar",
@@ -836,49 +965,50 @@ function DrawingToolbar({ ctx }) {
         "data-open": s3.drawbarOpen,
         "data-collapsed": s3.drawbarCollapsed,
         children: [
-          TOOLS.map(({ tool, label, icon: Icon2 }) => /* @__PURE__ */ a2(
-            "button",
+          /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.cursor, "aria-label": t3.cursor, "aria-pressed": s3.drawingTool === null, onClick: () => pick(null), children: /* @__PURE__ */ a3(CursorIcon, {}) }),
+          groups.map(([key, tools]) => /* @__PURE__ */ a3(
+            ToolGroup,
             {
-              class: "fnc-btn",
-              title: t3[label],
-              "aria-label": t3[label],
-              "aria-pressed": s3.drawingTool === tool,
-              onClick: () => pick(tool),
-              children: /* @__PURE__ */ a2(Icon2, {})
-            }
+              ctx,
+              tools,
+              open: openGroup === key,
+              onOpen: (open) => setOpenGroup(open ? key : null),
+              onPick: pick
+            },
+            key
           )),
-          /* @__PURE__ */ a2("div", { class: "fnc-hsep" }),
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3("div", { class: "fnc-hsep" }),
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-btn",
-              title: t3.magnet,
+              "data-tip": t3.magnet,
               "aria-label": t3.magnet,
               "aria-pressed": s3.magnet,
               onClick: () => ctx.chart.setMagnet(!s3.magnet),
-              children: /* @__PURE__ */ a2(MagnetIcon, {})
+              children: /* @__PURE__ */ a3(MagnetIcon, {})
             }
           ),
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-btn",
-              title: t3.removeAll,
+              "data-tip": t3.removeAll,
               "aria-label": t3.removeAll,
               disabled: s3.drawingCount === 0,
               onClick: () => ctx.chart.clearDrawings(),
-              children: /* @__PURE__ */ a2(TrashIcon, {})
+              children: /* @__PURE__ */ a3(TrashIcon, {})
             }
           ),
-          /* @__PURE__ */ a2("span", { class: "fnc-spacer" }),
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3("span", { class: "fnc-spacer" }),
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-btn fnc-drawbar-collapse",
-              title: t3.collapseDrawbar,
+              "data-tip": t3.collapseDrawbar,
               "aria-label": t3.collapseDrawbar,
               onClick: () => ctx.setDrawbarCollapsed(true),
-              children: /* @__PURE__ */ a2(ChevronLeftIcon, {})
+              children: /* @__PURE__ */ a3(ChevronLeftIcon, {})
             }
           )
         ]
@@ -892,23 +1022,49 @@ function SelectionBar({ ctx }) {
   const t3 = STRINGS[s3.locale];
   const d3 = s3.selection;
   if (!d3 || s3.layout.plotWidth <= 0) return null;
-  return /* @__PURE__ */ a2("div", { class: "fnc-selbar", role: "toolbar", style: { left: `${s3.layout.plotWidth / 2}px` }, children: [
-    SWATCHES.map((color) => /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3("div", { class: "fnc-selbar", role: "toolbar", style: { left: `${s3.layout.plotWidth / 2}px` }, children: [
+    SWATCHES.map((color) => /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-swatch",
         style: { background: color },
-        title: t3.color,
+        "data-tip": t3.color,
         "aria-label": `${t3.color} ${color}`,
         "aria-pressed": (d3.color ?? SWATCHES[0]) === color,
         onClick: () => ctx.chart.updateDrawing(d3.id, { color })
       }
     )),
-    /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
-    /* @__PURE__ */ a2("button", { class: "fnc-btn", title: t3.remove, "aria-label": t3.remove, onClick: () => ctx.chart.removeDrawing(d3.id), children: /* @__PURE__ */ a2(TrashIcon, {}) })
+    /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.remove, "aria-label": t3.remove, onClick: () => ctx.chart.removeDrawing(d3.id), children: /* @__PURE__ */ a3(TrashIcon, {}) })
   ] });
 }
 
+// src/components/keep-in-view.ts
+var MARGIN = 8;
+function useKeepInView(open) {
+  const ref = T2(null);
+  F2(() => {
+    const el = ref.current;
+    if (!open || !el) return;
+    el.style.translate = "";
+    const fit = () => {
+      el.style.translate = "";
+      const r3 = el.getBoundingClientRect();
+      const root = el.closest(".fnc-root")?.getBoundingClientRect();
+      const minX = Math.max(0, root?.left ?? 0) + MARGIN;
+      const maxX = Math.min(document.documentElement.clientWidth, root?.right ?? Infinity) - MARGIN;
+      let dx = 0;
+      if (r3.right > maxX) dx = maxX - r3.right;
+      if (r3.left + dx < minX) dx = minX - r3.left;
+      if (dx) el.style.translate = `${Math.round(dx)}px 0`;
+    };
+    fit();
+    window.addEventListener("resize", fit);
+    return () => window.removeEventListener("resize", fit);
+  }, [open]);
+  return ref;
+}
+
 // src/components/chart-type-menu.tsx
 var TYPES = [
   { type: "candles", label: "candles", icon: CandlesIcon },
@@ -920,6 +1076,7 @@ function ChartTypeMenu({ ctx }) {
   const t3 = STRINGS[s3.locale];
   const [open, setOpen] = d2(false);
   const ref = T2(null);
+  const menuRef = useKeepInView(open);
   const current = TYPES.find((x2) => x2.type === s3.chartType) ?? TYPES[0];
   A2(() => {
     if (!open) return;
@@ -937,23 +1094,23 @@ function ChartTypeMenu({ ctx }) {
     ctx.store.set({ chartType: type });
     setOpen(false);
   };
-  return /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref, children: [
-    /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap fnc-chart-type", ref, children: [
+    /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-btn fnc-btn-wide",
-        title: t3.chartType,
+        "data-tip": t3.chartType,
         "aria-label": t3.chartType,
         "aria-haspopup": "menu",
         "aria-expanded": open,
         onClick: () => setOpen(!open),
         children: [
-          /* @__PURE__ */ a2(current.icon, {}),
-          /* @__PURE__ */ a2(ChevronDownIcon, {})
+          /* @__PURE__ */ a3(current.icon, {}),
+          /* @__PURE__ */ a3(ChevronDownIcon, {})
         ]
       }
     ),
-    open && /* @__PURE__ */ a2("div", { class: "fnc-menu", role: "menu", children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a2(
+    open && /* @__PURE__ */ a3("div", { class: "fnc-menu", role: "menu", ref: menuRef, children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-menu-item",
@@ -961,8 +1118,8 @@ function ChartTypeMenu({ ctx }) {
         "aria-checked": type === s3.chartType,
         onClick: () => choose(type),
         children: [
-          /* @__PURE__ */ a2(Icon2, {}),
-          /* @__PURE__ */ a2("span", { children: t3[label] })
+          /* @__PURE__ */ a3(Icon2, {}),
+          /* @__PURE__ */ a3("span", { children: t3[label] })
         ]
       }
     )) })
@@ -971,7 +1128,6 @@ function ChartTypeMenu({ ctx }) {
 
 // src/components/indicator-dialogs.tsx
 import {
-  INDICATORS,
   maLines,
   PRICE_SOURCES,
   SERIES_COLORS
@@ -992,6 +1148,7 @@ var SECTIONS = [
     toggles: [
       { key: "highLowMarkers", label: "settingHighLow" },
       { key: "lastPriceLine", label: "settingLastPrice" },
+      { key: "countdown", label: "settingCountdown" },
       { key: "volume", label: "settingVolume" },
       { key: "navigationButtons", label: "settingNavButtons" }
     ]
@@ -1004,6 +1161,11 @@ var SECTIONS = [
     ]
   }
 ];
+var SCALES = [
+  { mode: "normal", label: "scaleNormal" },
+  { mode: "log", label: "scaleLog" },
+  { mode: "percent", label: "scalePercent" }
+];
 function SettingsDialog({ ctx }) {
   const { locale } = useStore(ctx.store);
   const t3 = STRINGS[locale];
@@ -1012,16 +1174,16 @@ function SettingsDialog({ ctx }) {
   const close = () => ctx.store.set({ dialog: null });
   const set = (patch) => ctx.chart.setSettings(patch);
   const themeColor = (name) => toHex(getComputedStyle(ctx.root).getPropertyValue(name).trim());
-  return /* @__PURE__ */ a2("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && close(), children: /* @__PURE__ */ a2("div", { class: "fnc-dialog", role: "dialog", "aria-modal": "true", "aria-label": t3.chartSettings, onKeyDown: (e3) => e3.key === "Escape" && close(), children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-dialog-head", children: [
-      /* @__PURE__ */ a2("b", { children: t3.chartSettings }),
-      /* @__PURE__ */ a2("button", { class: "fnc-btn", "aria-label": t3.close, onClick: close, children: /* @__PURE__ */ a2(CloseIcon, {}) })
+  return /* @__PURE__ */ a3("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && close(), children: /* @__PURE__ */ a3("div", { class: "fnc-dialog", role: "dialog", "aria-modal": "true", "aria-label": t3.chartSettings, onKeyDown: (e3) => e3.key === "Escape" && close(), children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-dialog-head", children: [
+      /* @__PURE__ */ a3("b", { children: t3.chartSettings }),
+      /* @__PURE__ */ a3("button", { class: "fnc-btn", "aria-label": t3.close, onClick: close, children: /* @__PURE__ */ a3(CloseIcon, {}) })
     ] }),
-    /* @__PURE__ */ a2("form", { class: "fnc-form", onSubmit: (e3) => (e3.preventDefault(), close()), children: [
-      /* @__PURE__ */ a2("div", { class: "fnc-section", children: t3.settingsCandles }),
-      ["upColor", "downColor"].map((key) => /* @__PURE__ */ a2("label", { class: "fnc-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-row-label fnc-row-label-wide", children: key === "upColor" ? t3.settingUpColor : t3.settingDownColor }),
-        /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("form", { class: "fnc-form", onSubmit: (e3) => (e3.preventDefault(), close()), children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.settingsCandles }),
+      ["upColor", "downColor"].map((key) => /* @__PURE__ */ a3("label", { class: "fnc-row", children: [
+        /* @__PURE__ */ a3("span", { class: "fnc-row-label fnc-row-label-wide", children: key === "upColor" ? t3.settingUpColor : t3.settingDownColor }),
+        /* @__PURE__ */ a3(
           "input",
           {
             type: "color",
@@ -1030,13 +1192,24 @@ function SettingsDialog({ ctx }) {
             onInput: (e3) => set({ [key]: e3.currentTarget.value })
           }
         ),
-        settings[key] && /* @__PURE__ */ a2("button", { type: "button", class: "fnc-link", onClick: () => set({ [key]: null }), children: t3.followTheme })
+        settings[key] && /* @__PURE__ */ a3("button", { type: "button", class: "fnc-link", onClick: () => set({ [key]: null }), children: t3.followTheme })
       ] })),
-      SECTIONS.map((section) => /* @__PURE__ */ a2($, { children: [
-        /* @__PURE__ */ a2("div", { class: "fnc-section", children: t3[section.title] }),
-        section.toggles.map(({ key, label }) => /* @__PURE__ */ a2("label", { class: "fnc-row fnc-toggle-row", children: [
-          /* @__PURE__ */ a2("span", { children: t3[label] }),
-          /* @__PURE__ */ a2(
+      /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.settingsScale }),
+      /* @__PURE__ */ a3("div", { class: "fnc-row", children: /* @__PURE__ */ a3("div", { class: "fnc-seg", role: "radiogroup", "aria-label": t3.settingsScale, children: SCALES.map(({ mode, label }) => /* @__PURE__ */ a3(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": settings.priceScale === mode,
+          onClick: () => set({ priceScale: mode }),
+          children: t3[label]
+        }
+      )) }) }),
+      SECTIONS.map((section) => /* @__PURE__ */ a3($, { children: [
+        /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3[section.title] }),
+        section.toggles.map(({ key, label }) => /* @__PURE__ */ a3("label", { class: "fnc-row fnc-toggle-row", children: [
+          /* @__PURE__ */ a3("span", { children: t3[label] }),
+          /* @__PURE__ */ a3(
             "input",
             {
               type: "checkbox",
@@ -1048,9 +1221,9 @@ function SettingsDialog({ ctx }) {
           )
         ] }))
       ] })),
-      /* @__PURE__ */ a2("div", { class: "fnc-form-actions", children: [
-        /* @__PURE__ */ a2("button", { type: "button", class: "fnc-action fnc-action-danger", onClick: () => ctx.chart.setSettings(DEFAULT_CHART_SETTINGS), children: t3.resetDefaults }),
-        /* @__PURE__ */ a2("button", { type: "submit", class: "fnc-action fnc-action-primary", children: t3.done })
+      /* @__PURE__ */ a3("div", { class: "fnc-form-actions", children: [
+        /* @__PURE__ */ a3("button", { type: "button", class: "fnc-action fnc-action-danger", onClick: () => ctx.chart.setSettings(DEFAULT_CHART_SETTINGS), children: t3.resetDefaults }),
+        /* @__PURE__ */ a3("button", { type: "submit", class: "fnc-action fnc-action-primary", children: t3.done })
       ] })
     ] })
   ] }) });
@@ -1062,7 +1235,7 @@ function Dialog({ title, onClose, children, wide }) {
   A2(() => {
     ref.current?.querySelector("input, button.fnc-sr-row")?.focus();
   }, []);
-  return /* @__PURE__ */ a2("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && onClose(), children: /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && onClose(), children: /* @__PURE__ */ a3(
     "div",
     {
       class: wide ? "fnc-dialog fnc-dialog-wide" : "fnc-dialog",
@@ -1072,49 +1245,71 @@ function Dialog({ title, onClose, children, wide }) {
       ref,
       onKeyDown: (e3) => e3.key === "Escape" && onClose(),
       children: [
-        /* @__PURE__ */ a2("div", { class: "fnc-dialog-head", children: [
-          /* @__PURE__ */ a2("b", { children: title }),
-          /* @__PURE__ */ a2("button", { class: "fnc-btn", "aria-label": "close", onClick: onClose, children: /* @__PURE__ */ a2(CloseIcon, {}) })
+        /* @__PURE__ */ a3("div", { class: "fnc-dialog-head", children: [
+          /* @__PURE__ */ a3("b", { children: title }),
+          /* @__PURE__ */ a3("button", { class: "fnc-btn", "aria-label": "close", onClick: onClose, children: /* @__PURE__ */ a3(CloseIcon, {}) })
         ] }),
         children
       ]
     }
   ) });
 }
+var SEARCH_THRESHOLD = 8;
 function IndicatorPicker({ ctx }) {
   const { locale } = useStore(ctx.store);
   const t3 = STRINGS[locale];
+  const [query, setQuery] = d2("");
   const close = () => ctx.store.set({ dialog: null });
   const add = (type) => {
     ctx.chart.addIndicator(type);
     close();
   };
+  const all = ctx.chart.indicatorDefinitions();
+  const q2 = query.trim().toLowerCase();
+  const matches = (d3) => !q2 || [d3.type, d3.name.ko, d3.name.en, d3.description[locale]].some((s3) => s3.toLowerCase().includes(q2));
   const groups = [
-    [locale === "ko" ? "\uAC00\uACA9 \uCC28\uD2B8\uC5D0 \uD45C\uC2DC" : "On price", ["ma", "ema", "bb"]],
-    [locale === "ko" ? "\uC544\uB798 \uC601\uC5ED\uC5D0 \uD45C\uC2DC" : "Separate pane", ["rsi", "macd"]]
-  ];
-  return /* @__PURE__ */ a2(Dialog, { title: t3.addIndicator, onClose: close, children: /* @__PURE__ */ a2("div", { class: "fnc-sr-list fnc-scroll", children: groups.map(([label, types]) => /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-sr-section", children: label }),
-    types.map((type) => {
-      const def = INDICATORS[type];
-      return /* @__PURE__ */ a2("button", { class: "fnc-sr-row", onClick: () => add(type), children: /* @__PURE__ */ a2("span", { class: "fnc-sr-main", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-sr-name", children: def.name[locale] }),
-        /* @__PURE__ */ a2("span", { class: "fnc-sr-meta", children: def.description[locale] })
-      ] }) });
-    })
-  ] })) }) });
+    [locale === "ko" ? "\uAC00\uACA9 \uCC28\uD2B8\uC5D0 \uD45C\uC2DC" : "On price", all.filter((d3) => d3.overlay && matches(d3))],
+    [locale === "ko" ? "\uC544\uB798 \uC601\uC5ED\uC5D0 \uD45C\uC2DC" : "Separate pane", all.filter((d3) => !d3.overlay && matches(d3))]
+  ].filter(([, defs]) => defs.length > 0);
+  const first = groups[0]?.[1][0];
+  return /* @__PURE__ */ a3(Dialog, { title: t3.addIndicator, onClose: close, children: [
+    all.length > SEARCH_THRESHOLD && /* @__PURE__ */ a3("div", { class: "fnc-search fnc-ind-search", children: /* @__PURE__ */ a3(
+      "input",
+      {
+        value: query,
+        placeholder: t3.searchIndicators,
+        "aria-label": t3.searchIndicators,
+        autocomplete: "off",
+        onInput: (e3) => setQuery(e3.currentTarget.value),
+        onKeyDown: (e3) => e3.key === "Enter" && first && add(first.type)
+      }
+    ) }),
+    /* @__PURE__ */ a3("div", { class: "fnc-sr-list fnc-scroll", children: [
+      groups.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: t3.noResults }),
+      groups.map(([label, defs]) => /* @__PURE__ */ a3($, { children: [
+        /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: label }),
+        defs.map((def) => {
+          const type = def.type;
+          return /* @__PURE__ */ a3("button", { class: "fnc-sr-row", onClick: () => add(type), children: /* @__PURE__ */ a3("span", { class: "fnc-sr-main", children: [
+            /* @__PURE__ */ a3("span", { class: "fnc-sr-name", children: def.name[locale] }),
+            /* @__PURE__ */ a3("span", { class: "fnc-sr-meta", children: def.description[locale] })
+          ] }) });
+        })
+      ] }))
+    ] })
+  ] });
 }
 var WIDTHS = [1, 2, 3, 4];
-function defaultSeries(type, params) {
-  return INDICATORS[type].compute([], params).series.filter((s3) => s3.kind === "line");
+function defaultSeries(def, params) {
+  return def.compute([], params).series.filter((s3) => s3.kind === "line");
 }
 function StyleControls({
   t: t3,
   row: row2,
   onChange
 }) {
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3($, { children: [
+    /* @__PURE__ */ a3(
       "input",
       {
         type: "checkbox",
@@ -1124,7 +1319,7 @@ function StyleControls({
         onChange: (e3) => onChange({ visible: e3.currentTarget.checked })
       }
     ),
-    /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3(
       "input",
       {
         type: "color",
@@ -1134,24 +1329,24 @@ function StyleControls({
         onInput: (e3) => onChange({ color: e3.currentTarget.value })
       }
     ),
-    /* @__PURE__ */ a2("select", { class: "fnc-select fnc-select-width", value: row2.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS.map((w3) => /* @__PURE__ */ a2("option", { value: w3, children: [
+    /* @__PURE__ */ a3("select", { class: "fnc-select fnc-select-width", value: row2.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS.map((w3) => /* @__PURE__ */ a3("option", { value: w3, children: [
       w3,
       "px"
     ] })) })
   ] });
 }
 function SourceSelect({ value, locale, label, onChange }) {
-  return /* @__PURE__ */ a2("select", { class: "fnc-select fnc-select-source", value, "aria-label": label, onChange: (e3) => onChange(e3.currentTarget.value), children: PRICE_SOURCES.map((s3) => /* @__PURE__ */ a2("option", { value: s3.value, children: s3.label[locale] })) });
+  return /* @__PURE__ */ a3("select", { class: "fnc-select fnc-select-source", value, "aria-label": label, onChange: (e3) => onChange(e3.currentTarget.value), children: PRICE_SOURCES.map((s3) => /* @__PURE__ */ a3("option", { value: s3.value, children: s3.label[locale] })) });
 }
 function IndicatorSettings({ ctx, id }) {
   const { locale, indicators } = useStore(ctx.store);
   const t3 = STRINGS[locale];
   const config = indicators.find((c3) => c3.id === id);
-  const def = config ? INDICATORS[config.type] : null;
+  const def = config ? ctx.chart.indicatorDefinition(config.type) ?? null : null;
   const hasLines = !!def?.params.some((p3) => p3.kind === "lines");
   const [lines, setLines] = d2(() => {
-    if (!config || !hasLines) return [];
-    const defaults = defaultSeries(config.type, config.params);
+    if (!config || !def || !hasLines) return [];
+    const defaults = defaultSeries(def, config.params);
     return maLines(config.params).map((l3, i3) => {
       const style = config.styles?.[`l${i3}`];
       return {
@@ -1167,8 +1362,8 @@ function IndicatorSettings({ ctx, id }) {
     () => Object.fromEntries(Object.entries(config?.params ?? {}).filter(([, v3]) => !Array.isArray(v3)).map(([k2, v3]) => [k2, String(v3)]))
   );
   const [styles, setStyles] = d2(() => {
-    if (!config || hasLines) return [];
-    return defaultSeries(config.type, config.params).map((s3) => {
+    if (!config || !def || hasLines) return [];
+    return defaultSeries(def, config.params).map((s3) => {
       const style = config.styles?.[s3.key];
       return { key: s3.key, label: s3.label, color: style?.color ?? s3.color, width: style?.width ?? s3.width, visible: style?.visible ?? true };
     });
@@ -1211,16 +1406,16 @@ function IndicatorSettings({ ctx, id }) {
     ctx.chart.updateIndicator(id, { params, styles: nextStyles });
     close();
   };
-  return /* @__PURE__ */ a2(Dialog, { title: `${def.name[locale]} \xB7 ${t3.indicatorSettings}`, onClose: close, wide: true, children: /* @__PURE__ */ a2("form", { class: "fnc-form", onSubmit: apply, children: [
-    hasLines ? /* @__PURE__ */ a2("div", { class: "fnc-rows", children: [
-      lines.map((l3, i3) => /* @__PURE__ */ a2("div", { class: "fnc-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-row-label", children: [
+  return /* @__PURE__ */ a3(Dialog, { title: `${def.name[locale]} \xB7 ${t3.indicatorSettings}`, onClose: close, wide: true, children: /* @__PURE__ */ a3("form", { class: "fnc-form", onSubmit: apply, children: [
+    hasLines ? /* @__PURE__ */ a3("div", { class: "fnc-rows", children: [
+      lines.map((l3, i3) => /* @__PURE__ */ a3("div", { class: "fnc-row", children: [
+        /* @__PURE__ */ a3("span", { class: "fnc-row-label", children: [
           t3.period,
           i3 + 1
         ] }),
-        /* @__PURE__ */ a2(StyleControls, { t: t3, row: l3, onChange: (p3) => updateLine(i3, p3) }),
-        /* @__PURE__ */ a2(SourceSelect, { value: l3.source, locale, label: t3.source, onChange: (source) => updateLine(i3, { source }) }),
-        /* @__PURE__ */ a2(
+        /* @__PURE__ */ a3(StyleControls, { t: t3, row: l3, onChange: (p3) => updateLine(i3, p3) }),
+        /* @__PURE__ */ a3(SourceSelect, { value: l3.source, locale, label: t3.source, onChange: (source) => updateLine(i3, { source }) }),
+        /* @__PURE__ */ a3(
           "input",
           {
             class: "fnc-input fnc-input-period",
@@ -1230,17 +1425,17 @@ function IndicatorSettings({ ctx, id }) {
             onInput: (e3) => updateLine(i3, { period: e3.currentTarget.value.replace(/\D/g, "") })
           }
         ),
-        /* @__PURE__ */ a2("button", { type: "button", class: "fnc-ind-btn", "aria-label": t3.removePeriod, title: t3.removePeriod, onClick: () => setLines(lines.filter((_3, j2) => j2 !== i3)), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) })
+        /* @__PURE__ */ a3("button", { type: "button", class: "fnc-ind-btn", "aria-label": t3.removePeriod, "data-tip": t3.removePeriod, onClick: () => setLines(lines.filter((_3, j2) => j2 !== i3)), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) })
       ] })),
-      /* @__PURE__ */ a2("button", { type: "button", class: "fnc-add-row", onClick: addLine, children: [
+      /* @__PURE__ */ a3("button", { type: "button", class: "fnc-add-row", onClick: addLine, children: [
         "+ ",
         t3.addPeriod
       ] })
-    ] }) : /* @__PURE__ */ a2($, { children: [
-      /* @__PURE__ */ a2("div", { class: "fnc-section", children: t3.inputs }),
-      def.params.map((spec) => /* @__PURE__ */ a2("div", { class: "fnc-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-row-label fnc-row-label-wide", children: spec.label[locale] }),
-        spec.kind === "source" ? /* @__PURE__ */ a2(
+    ] }) : /* @__PURE__ */ a3($, { children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.inputs }),
+      def.params.map((spec) => /* @__PURE__ */ a3("div", { class: "fnc-row", children: [
+        /* @__PURE__ */ a3("span", { class: "fnc-row-label fnc-row-label-wide", children: spec.label[locale] }),
+        spec.kind === "source" ? /* @__PURE__ */ a3(
           SourceSelect,
           {
             value: values[spec.key] ?? "close",
@@ -1248,7 +1443,7 @@ function IndicatorSettings({ ctx, id }) {
             label: spec.label[locale],
             onChange: (v3) => setValues({ ...values, [spec.key]: v3 })
           }
-        ) : /* @__PURE__ */ a2(
+        ) : /* @__PURE__ */ a3(
           "input",
           {
             class: "fnc-input",
@@ -1259,14 +1454,14 @@ function IndicatorSettings({ ctx, id }) {
           }
         )
       ] })),
-      styles.length > 0 && /* @__PURE__ */ a2("div", { class: "fnc-section", children: t3.style }),
-      styles.map((row2, i3) => /* @__PURE__ */ a2("div", { class: "fnc-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-row-label fnc-row-label-wide", children: row2.label }),
-        /* @__PURE__ */ a2(StyleControls, { t: t3, row: row2, onChange: (p3) => setStyles(styles.map((s3, j2) => j2 === i3 ? { ...s3, ...p3 } : s3)) })
+      styles.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-section", children: t3.style }),
+      styles.map((row2, i3) => /* @__PURE__ */ a3("div", { class: "fnc-row", children: [
+        /* @__PURE__ */ a3("span", { class: "fnc-row-label fnc-row-label-wide", children: row2.label }),
+        /* @__PURE__ */ a3(StyleControls, { t: t3, row: row2, onChange: (p3) => setStyles(styles.map((s3, j2) => j2 === i3 ? { ...s3, ...p3 } : s3)) })
       ] }))
     ] }),
-    /* @__PURE__ */ a2("div", { class: "fnc-form-actions", children: [
-      /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("div", { class: "fnc-form-actions", children: [
+      /* @__PURE__ */ a3(
         "button",
         {
           type: "button",
@@ -1278,16 +1473,16 @@ function IndicatorSettings({ ctx, id }) {
           children: t3.remove
         }
       ),
-      /* @__PURE__ */ a2("button", { type: "button", class: "fnc-action", onClick: close, children: t3.cancel }),
-      /* @__PURE__ */ a2("button", { type: "submit", class: "fnc-action fnc-action-primary", children: t3.apply })
+      /* @__PURE__ */ a3("button", { type: "button", class: "fnc-action", onClick: close, children: t3.cancel }),
+      /* @__PURE__ */ a3("button", { type: "submit", class: "fnc-action fnc-action-primary", children: t3.apply })
     ] })
   ] }) });
 }
 function Dialogs({ ctx }) {
   const { dialog } = useStore(ctx.store);
-  if (dialog?.kind === "indicators") return /* @__PURE__ */ a2(IndicatorPicker, { ctx });
-  if (dialog?.kind === "indicatorSettings") return /* @__PURE__ */ a2(IndicatorSettings, { ctx, id: dialog.id });
-  if (dialog?.kind === "chartSettings") return /* @__PURE__ */ a2(SettingsDialog, { ctx });
+  if (dialog?.kind === "indicators") return /* @__PURE__ */ a3(IndicatorPicker, { ctx });
+  if (dialog?.kind === "indicatorSettings") return /* @__PURE__ */ a3(IndicatorSettings, { ctx, id: dialog.id });
+  if (dialog?.kind === "chartSettings") return /* @__PURE__ */ a3(SettingsDialog, { ctx });
   return null;
 }
 
@@ -1302,6 +1497,7 @@ function IntervalPicker({ ctx }) {
   const t3 = STRINGS[s3.locale];
   const [open, setOpen] = d2(false);
   const ref = T2(null);
+  const menuRef = useKeepInView(open);
   A2(() => {
     if (!open) return;
     const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
@@ -1321,60 +1517,60 @@ function IntervalPicker({ ctx }) {
     setOpen(false);
     ctx.selectResolution(r3);
   };
-  return /* @__PURE__ */ a2("div", { class: "fnc-interval-picker", ref, children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-intervals", children: favorites.map((r3) => /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3("div", { class: "fnc-interval-picker", ref, children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-intervals", children: favorites.map((r3) => /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-chip",
         "aria-pressed": r3 === s3.resolution,
         disabled: !isSupported(r3),
-        title: isSupported(r3) ? resolutionLabel(r3, s3.locale, "long") : t3.unsupportedInterval,
+        "data-tip": isSupported(r3) ? resolutionLabel(r3, s3.locale, "long") : t3.unsupportedInterval,
         onClick: () => select(r3),
         children: resolutionLabel(r3, s3.locale)
       }
     )) }),
-    /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3(
       "button",
       {
         class: `fnc-btn fnc-btn-wide fnc-interval-trigger${favorites.includes(s3.resolution) ? "" : " fnc-interval-trigger-active"}`,
-        title: t3.moreIntervals,
+        "data-tip": t3.moreIntervals,
         "aria-label": t3.moreIntervals,
         "aria-haspopup": "menu",
         "aria-expanded": open,
         onClick: () => setOpen(!open),
         children: [
-          /* @__PURE__ */ a2("b", { class: "fnc-interval-current", children: resolutionLabel(s3.resolution, s3.locale) }),
-          /* @__PURE__ */ a2(ChevronDownIcon, {})
+          /* @__PURE__ */ a3("b", { class: "fnc-interval-current", children: resolutionLabel(s3.resolution, s3.locale) }),
+          /* @__PURE__ */ a3(ChevronDownIcon, {})
         ]
       }
     ),
-    open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-interval-menu", role: "menu", children: ctx.intervalGroups.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-menu-group", role: "group", "aria-label": t3[GROUP_LABEL[group.id]], children: [
-      /* @__PURE__ */ a2("div", { class: "fnc-menu-title", children: t3[GROUP_LABEL[group.id]] }),
+    open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-interval-menu", role: "menu", ref: menuRef, children: ctx.intervalGroups.map((group) => /* @__PURE__ */ a3("div", { class: "fnc-menu-group", role: "group", "aria-label": t3[GROUP_LABEL[group.id]], children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-menu-title", children: t3[GROUP_LABEL[group.id]] }),
       group.intervals.map((r3) => {
         const favorite = s3.favoriteIntervals.includes(r3);
         const ok = isSupported(r3);
-        return /* @__PURE__ */ a2("div", { class: `fnc-menu-row${favorite ? " is-favorite" : ""}`, children: [
-          /* @__PURE__ */ a2(
+        return /* @__PURE__ */ a3("div", { class: `fnc-menu-row${favorite ? " is-favorite" : ""}`, children: [
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-menu-item",
               role: "menuitemradio",
               "aria-checked": r3 === s3.resolution,
               disabled: !ok,
-              title: ok ? void 0 : t3.unsupportedInterval,
+              "data-tip": ok ? void 0 : t3.unsupportedInterval,
               onClick: () => select(r3),
               children: resolutionLabel(r3, s3.locale, "long")
             }
           ),
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-star",
               "aria-pressed": favorite,
               "aria-label": `${resolutionLabel(r3, s3.locale, "long")} ${favorite ? t3.removeFavorite : t3.addFavorite}`,
-              title: favorite ? t3.removeFavorite : t3.addFavorite,
+              "data-tip": favorite ? t3.removeFavorite : t3.addFavorite,
               onClick: () => ctx.toggleFavoriteInterval(r3),
-              children: /* @__PURE__ */ a2(StarIcon, { filled: favorite })
+              children: /* @__PURE__ */ a3(StarIcon, { filled: favorite })
             }
           )
         ] });
@@ -1452,7 +1648,7 @@ function layoutRects(node, x2 = 0, y3 = 0, w3 = 20, h3 = 16, gap = 1.6) {
 // src/components/layout-menu.tsx
 var LAYOUT_PANES = (id) => paneCount(LAYOUTS[id]);
 function LayoutGlyph({ id }) {
-  return /* @__PURE__ */ a2("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a2("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
+  return /* @__PURE__ */ a3("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a3("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
 }
 function usePopover() {
   const [open, setOpen] = d2(false);
@@ -1482,63 +1678,65 @@ function LayoutMenu({ ctx, multi }) {
   const t3 = STRINGS[s3.locale];
   const layout = usePopover();
   const sync = usePopover();
+  const layoutMenuRef = useKeepInView(layout.open);
+  const syncMenuRef = useKeepInView(sync.open);
   const anySync = Object.values(m3.sync).some(Boolean);
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: layout.ref, children: [
-      /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3($, { children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap", ref: layout.ref, children: [
+      /* @__PURE__ */ a3(
         "button",
         {
           class: "fnc-btn fnc-btn-wide fnc-btn-layout",
-          title: t3.layout,
+          "data-tip": t3.layout,
           "aria-label": t3.layout,
           "aria-haspopup": "menu",
           "aria-expanded": layout.open,
           onClick: () => layout.setOpen(!layout.open),
           children: [
-            /* @__PURE__ */ a2(LayoutGlyph, { id: m3.layout }),
-            /* @__PURE__ */ a2(ChevronDownIcon, {})
+            /* @__PURE__ */ a3(LayoutGlyph, { id: m3.layout }),
+            /* @__PURE__ */ a3(ChevronDownIcon, {})
           ]
         }
       ),
-      layout.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-layout-row", children: [
-        /* @__PURE__ */ a2("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
-        group.map((id) => /* @__PURE__ */ a2(
+      layout.open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, ref: layoutMenuRef, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a3("div", { class: "fnc-layout-row", children: [
+        /* @__PURE__ */ a3("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
+        group.map((id) => /* @__PURE__ */ a3(
           "button",
           {
             class: "fnc-layout-opt",
             role: "menuitemradio",
             "aria-checked": id === m3.layout,
             "aria-label": `${t3.layout} ${id}`,
-            title: id,
+            "data-layout": id,
             onClick: () => {
               multi.setLayout(id);
               layout.setOpen(false);
             },
-            children: /* @__PURE__ */ a2(LayoutGlyph, { id })
+            children: /* @__PURE__ */ a3(LayoutGlyph, { id })
           }
         ))
       ] })) })
     ] }),
-    LAYOUT_PANES(m3.layout) > 1 && /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
-      /* @__PURE__ */ a2(
+    LAYOUT_PANES(m3.layout) > 1 && /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
+      /* @__PURE__ */ a3(
         "button",
         {
           class: "fnc-btn fnc-btn-sync",
-          title: t3.sync,
+          "data-tip": t3.sync,
           "aria-label": t3.sync,
           "aria-haspopup": "menu",
           "aria-expanded": sync.open,
           "aria-pressed": anySync,
           onClick: () => sync.setOpen(!sync.open),
-          children: /* @__PURE__ */ a2(LinkIcon, {})
+          children: /* @__PURE__ */ a3(LinkIcon, {})
         }
       ),
-      sync.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, children: [
-        /* @__PURE__ */ a2("div", { class: "fnc-menu-title", children: [
+      sync.open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, ref: syncMenuRef, children: [
+        /* @__PURE__ */ a3("div", { class: "fnc-menu-title", children: [
           t3.sync,
-          /* @__PURE__ */ a2("small", { children: t3.syncHint })
+          /* @__PURE__ */ a3("small", { children: t3.syncHint })
         ] }),
-        SYNC_KEYS.map(({ key, label }) => /* @__PURE__ */ a2(
+        SYNC_KEYS.map(({ key, label }) => /* @__PURE__ */ a3(
           "button",
           {
             class: "fnc-menu-item fnc-sync-item",
@@ -1546,8 +1744,8 @@ function LayoutMenu({ ctx, multi }) {
             "aria-checked": m3.sync[key],
             onClick: () => multi.setSync({ [key]: !m3.sync[key] }),
             children: [
-              /* @__PURE__ */ a2("span", { children: t3[label] }),
-              /* @__PURE__ */ a2("span", { class: "fnc-switch", "data-on": m3.sync[key] ? "true" : "false", "aria-hidden": "true" })
+              /* @__PURE__ */ a3("span", { children: t3[label] }),
+              /* @__PURE__ */ a3("span", { class: "fnc-switch", "data-on": m3.sync[key] ? "true" : "false", "aria-hidden": "true" })
             ]
           }
         ))
@@ -1563,7 +1761,7 @@ function Slot({ el, fixed = false }) {
     ref.current?.appendChild(el);
     return () => el.remove();
   }, [el]);
-  return /* @__PURE__ */ a2("div", { class: fixed ? "fnc-slot-host fnc-slot-host-fixed" : "fnc-slot-host", ref });
+  return /* @__PURE__ */ a3("div", { class: fixed ? "fnc-slot-host fnc-slot-host-fixed" : "fnc-slot-host", ref });
 }
 
 // src/components/symbol-avatar.tsx
@@ -1577,10 +1775,10 @@ function SymbolAvatar({ info, size = 24 }) {
   A2(() => setFailed(false), [info.logoUrl]);
   const style = { width: `${size}px`, height: `${size}px`, fontSize: `${Math.round(size * 0.46)}px` };
   if (info.logoUrl && !failed) {
-    return /* @__PURE__ */ a2("img", { class: "fnc-avatar", src: info.logoUrl, alt: "", style, onError: () => setFailed(true) });
+    return /* @__PURE__ */ a3("img", { class: "fnc-avatar", src: info.logoUrl, alt: "", style, onError: () => setFailed(true) });
   }
   const h3 = hue(info.symbol);
-  return /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3(
     "span",
     {
       class: "fnc-avatar fnc-avatar-initial",
@@ -1601,18 +1799,18 @@ var displayCode = (symbol) => symbol.slice(symbol.lastIndexOf(":") + 1);
 var toStored = (info) => JSON.parse(JSON.stringify({ ...info, tickSize: 0, price: void 0, changePercent: void 0, sparkline: void 0 }));
 function Highlight({ text, query }) {
   const q2 = query.trim();
-  if (!q2) return /* @__PURE__ */ a2($, { children: text });
+  if (!q2) return /* @__PURE__ */ a3($, { children: text });
   const parts = [];
   const lower = text.toLowerCase();
   const needle = q2.toLowerCase();
   let i3 = 0;
   for (let at = lower.indexOf(needle); at >= 0; at = lower.indexOf(needle, i3)) {
     if (at > i3) parts.push(text.slice(i3, at));
-    parts.push(/* @__PURE__ */ a2("mark", { children: text.slice(at, at + q2.length) }));
+    parts.push(/* @__PURE__ */ a3("mark", { children: text.slice(at, at + q2.length) }));
     i3 = at + q2.length;
   }
   parts.push(text.slice(i3));
-  return /* @__PURE__ */ a2($, { children: parts });
+  return /* @__PURE__ */ a3($, { children: parts });
 }
 function Sparkline({ values, up }) {
   if (values.length < 2) return null;
@@ -1621,10 +1819,11 @@ function Sparkline({ values, up }) {
   const w3 = 72;
   const h3 = 24;
   const points = values.map((v3, i3) => `${(i3 / (values.length - 1) * w3).toFixed(1)},${(h3 - 2 - (v3 - min) / (max - min || 1) * (h3 - 4)).toFixed(1)}`).join(" ");
-  return /* @__PURE__ */ a2("svg", { class: `fnc-sr-spark ${up ? "fnc-up" : "fnc-down"}`, width: w3, height: h3, viewBox: `0 0 ${w3} ${h3}`, "aria-hidden": "true", children: /* @__PURE__ */ a2("polyline", { points, fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }) });
+  return /* @__PURE__ */ a3("svg", { class: `fnc-sr-spark ${up ? "fnc-up" : "fnc-down"}`, width: w3, height: h3, viewBox: `0 0 ${w3} ${h3}`, "aria-hidden": "true", children: /* @__PURE__ */ a3("polyline", { points, fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }) });
 }
 function SymbolSearch({ ctx }) {
-  const { locale, symbol: current } = useStore(ctx.store);
+  const { locale, symbol: current, searchTarget } = useStore(ctx.store);
+  const comparing = searchTarget === "compare";
   const t3 = STRINGS[locale];
   const [query, setQuery] = d2("");
   const [category, setCategory] = d2(ctx.searchCategories[0]?.id ?? "all");
@@ -1678,7 +1877,8 @@ function SymbolSearch({ ctx }) {
     if (!info) return;
     save(RECENT_KEY, [toStored(info), ...recent.filter((r3) => r3.symbol !== info.symbol)].slice(0, MAX_RECENT), setRecent);
     close();
-    ctx.selectSymbol(info.symbol);
+    if (comparing) ctx.chart.addCompare(info.symbol).catch((error) => console.error("funnest-charts: compare failed", error));
+    else ctx.selectSymbol(info.symbol);
   };
   const onKeyDown = (e3) => {
     const count = rows.length;
@@ -1696,7 +1896,7 @@ function SymbolSearch({ ctx }) {
     const change = info.changePercent ?? 0;
     const up = change >= 0;
     const trend = change > 0 ? "fnc-up" : change < 0 ? "fnc-down" : "fnc-flat";
-    return /* @__PURE__ */ a2(
+    return /* @__PURE__ */ a3(
       "div",
       {
         class: "fnc-sr-row",
@@ -1706,76 +1906,76 @@ function SymbolSearch({ ctx }) {
         onPointerMove: () => setActive(index),
         onClick: () => choose(info),
         children: [
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3(
             "button",
             {
               class: `fnc-sr-star${fav ? " is-on" : ""}`,
               "aria-pressed": fav,
               "aria-label": `${info.name} ${fav ? t3.removeFavorite : t3.addFavorite}`,
-              title: fav ? t3.removeFavorite : t3.addFavorite,
+              "data-tip": fav ? t3.removeFavorite : t3.addFavorite,
               onClick: (e3) => {
                 e3.stopPropagation();
                 toggleFavorite(info);
               },
-              children: /* @__PURE__ */ a2(StarIcon, { filled: fav })
+              children: /* @__PURE__ */ a3(StarIcon, { filled: fav })
             }
           ),
-          ctx.showLogo && /* @__PURE__ */ a2(SymbolAvatar, { info, size: 32 }),
-          /* @__PURE__ */ a2("span", { class: "fnc-sr-main", children: [
-            /* @__PURE__ */ a2("span", { class: "fnc-sr-name", children: [
-              /* @__PURE__ */ a2(Highlight, { text: info.name, query }),
-              current?.symbol === info.symbol && /* @__PURE__ */ a2("span", { class: "fnc-sr-current", children: t3.current })
+          ctx.showLogo && /* @__PURE__ */ a3(SymbolAvatar, { info, size: 32 }),
+          /* @__PURE__ */ a3("span", { class: "fnc-sr-main", children: [
+            /* @__PURE__ */ a3("span", { class: "fnc-sr-name", children: [
+              /* @__PURE__ */ a3(Highlight, { text: info.name, query }),
+              current?.symbol === info.symbol && /* @__PURE__ */ a3("span", { class: "fnc-sr-current", children: t3.current })
             ] }),
-            /* @__PURE__ */ a2("span", { class: "fnc-sr-meta", children: [
-              /* @__PURE__ */ a2(Highlight, { text: displayCode(info.symbol), query }),
+            /* @__PURE__ */ a3("span", { class: "fnc-sr-meta", children: [
+              /* @__PURE__ */ a3(Highlight, { text: displayCode(info.symbol), query }),
               " \xB7 ",
               info.exchange,
               cat && ` \xB7 ${cat.label[locale]}`
             ] })
           ] }),
-          info.sparkline && /* @__PURE__ */ a2(Sparkline, { values: info.sparkline, up }),
-          info.price !== void 0 && /* @__PURE__ */ a2("span", { class: "fnc-sr-quote", children: [
-            /* @__PURE__ */ a2("b", { children: formatPrice(info.price, info.pricePrecision) }),
-            info.changePercent !== void 0 && /* @__PURE__ */ a2("span", { class: trend, children: [
+          info.sparkline && /* @__PURE__ */ a3(Sparkline, { values: info.sparkline, up }),
+          info.price !== void 0 && /* @__PURE__ */ a3("span", { class: "fnc-sr-quote", children: [
+            /* @__PURE__ */ a3("b", { children: formatPrice(info.price, info.pricePrecision) }),
+            info.changePercent !== void 0 && /* @__PURE__ */ a3("span", { class: trend, children: [
               change > 0 ? "\u2191 " : change < 0 ? "\u2193 " : "",
               Math.abs(info.changePercent).toFixed(2),
               "%"
             ] })
           ] }),
-          isRecent && /* @__PURE__ */ a2(
+          isRecent && /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-ind-btn",
               "aria-label": `${info.name} ${t3.removeRecent}`,
-              title: t3.removeRecent,
+              "data-tip": t3.removeRecent,
               onClick: (e3) => {
                 e3.stopPropagation();
                 save(RECENT_KEY, recent.filter((r3) => r3.symbol !== info.symbol), setRecent);
               },
-              children: /* @__PURE__ */ a2(SmallCloseIcon, {})
+              children: /* @__PURE__ */ a3(SmallCloseIcon, {})
             }
           )
         ]
       }
     );
   };
-  const sideItem = (label, selected, onClick, extra) => /* @__PURE__ */ a2("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
-    /* @__PURE__ */ a2("span", { children: label }),
+  const sideItem = (label, selected, onClick, extra) => /* @__PURE__ */ a3("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
+    /* @__PURE__ */ a3("span", { children: label }),
     extra
   ] });
-  return /* @__PURE__ */ a2("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && close(), children: /* @__PURE__ */ a2("div", { class: "fnc-dialog fnc-search-dialog", role: "dialog", "aria-modal": "true", "aria-label": t3.searchSymbol, onKeyDown, children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-search", children: [
-      /* @__PURE__ */ a2(SearchIcon, {}),
-      exchange && /* @__PURE__ */ a2("span", { class: "fnc-chip-token", children: [
+  return /* @__PURE__ */ a3("div", { class: "fnc-backdrop", onPointerDown: (e3) => e3.target === e3.currentTarget && close(), children: /* @__PURE__ */ a3("div", { class: "fnc-dialog fnc-search-dialog", role: "dialog", "aria-modal": "true", "aria-label": comparing ? t3.compareSymbol : t3.searchSymbol, onKeyDown, children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-search", children: [
+      /* @__PURE__ */ a3(SearchIcon, {}),
+      exchange && /* @__PURE__ */ a3("span", { class: "fnc-chip-token", children: [
         exchange,
-        /* @__PURE__ */ a2("button", { "aria-label": `${exchange} ${t3.cancel}`, onClick: () => setExchange(null), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) })
+        /* @__PURE__ */ a3("button", { "aria-label": `${exchange} ${t3.cancel}`, onClick: () => setExchange(null), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) })
       ] }),
-      /* @__PURE__ */ a2(
+      /* @__PURE__ */ a3(
         "input",
         {
           ref: inputRef,
           value: query,
-          placeholder: t3.searchPlaceholder,
+          placeholder: comparing ? t3.compareSymbol : t3.searchPlaceholder,
           role: "combobox",
           "aria-expanded": "true",
           "aria-controls": "fnc-search-results",
@@ -1784,50 +1984,50 @@ function SymbolSearch({ ctx }) {
           onInput: (e3) => setQuery(e3.currentTarget.value)
         }
       ),
-      query && /* @__PURE__ */ a2("button", { class: "fnc-ind-btn", "aria-label": t3.cancel, onClick: () => (setQuery(""), inputRef.current?.focus()), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) }),
-      /* @__PURE__ */ a2("button", { class: "fnc-kbd fnc-kbd-btn fnc-hide-mobile", "aria-label": t3.close, title: t3.close, onClick: close, children: "ESC" })
+      query && /* @__PURE__ */ a3("button", { class: "fnc-ind-btn", "aria-label": t3.cancel, onClick: () => (setQuery(""), inputRef.current?.focus()), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) }),
+      /* @__PURE__ */ a3("button", { class: "fnc-kbd fnc-kbd-btn fnc-hide-mobile", "aria-label": t3.close, "data-tip": t3.close, onClick: close, children: "ESC" })
     ] }),
-    /* @__PURE__ */ a2("div", { class: "fnc-tabs", role: "tablist", children: ctx.searchCategories.map((c3) => /* @__PURE__ */ a2("button", { class: "fnc-tab", role: "tab", "aria-selected": c3.id === category, onClick: () => setCategory(c3.id), children: c3.label[locale] })) }),
-    /* @__PURE__ */ a2("div", { class: "fnc-sr-body", children: [
-      /* @__PURE__ */ a2("nav", { class: "fnc-sr-side fnc-scroll", "aria-label": t3.searchSymbol, children: [
-        /* @__PURE__ */ a2("div", { class: "fnc-sr-side-title", children: t3.browse }),
+    /* @__PURE__ */ a3("div", { class: "fnc-tabs", role: "tablist", children: ctx.searchCategories.map((c3) => /* @__PURE__ */ a3("button", { class: "fnc-tab", role: "tab", "aria-selected": c3.id === category, onClick: () => setCategory(c3.id), children: c3.label[locale] })) }),
+    /* @__PURE__ */ a3("div", { class: "fnc-sr-body", children: [
+      /* @__PURE__ */ a3("nav", { class: "fnc-sr-side fnc-scroll", "aria-label": t3.searchSymbol, children: [
+        /* @__PURE__ */ a3("div", { class: "fnc-sr-side-title", children: t3.browse }),
         sideItem(t3.allSymbols, view.kind === "all" && !exchange, () => (setView({ kind: "all" }), setExchange(null))),
-        sideItem(t3.favorites, view.kind === "favorites", () => (setView({ kind: "favorites" }), setExchange(null)), /* @__PURE__ */ a2("em", { children: favorites.length || "" })),
-        exchanges.length > 0 && /* @__PURE__ */ a2("div", { class: "fnc-sr-side-title", children: t3.exchanges }),
+        sideItem(t3.favorites, view.kind === "favorites", () => (setView({ kind: "favorites" }), setExchange(null)), /* @__PURE__ */ a3("em", { children: favorites.length || "" })),
+        exchanges.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-sr-side-title", children: t3.exchanges }),
         exchanges.map(
-          ([name, count]) => sideItem(name, exchange === name, () => (setView({ kind: "all" }), setExchange(exchange === name ? null : name)), /* @__PURE__ */ a2("em", { children: count }))
+          ([name, count]) => sideItem(name, exchange === name, () => (setView({ kind: "all" }), setExchange(exchange === name ? null : name)), /* @__PURE__ */ a3("em", { children: count }))
         )
       ] }),
-      /* @__PURE__ */ a2("div", { class: "fnc-sr-list fnc-scroll", id: "fnc-search-results", role: "listbox", ref: listRef, children: [
-        recentRows.length > 0 && /* @__PURE__ */ a2("div", { class: "fnc-sr-section", children: [
-          /* @__PURE__ */ a2("span", { children: t3.recentSearches }),
-          /* @__PURE__ */ a2("button", { class: "fnc-link", onClick: () => save(RECENT_KEY, [], setRecent), children: t3.clearRecent })
+      /* @__PURE__ */ a3("div", { class: "fnc-sr-list fnc-scroll", id: "fnc-search-results", role: "listbox", ref: listRef, children: [
+        recentRows.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: [
+          /* @__PURE__ */ a3("span", { children: t3.recentSearches }),
+          /* @__PURE__ */ a3("button", { class: "fnc-link", onClick: () => save(RECENT_KEY, [], setRecent), children: t3.clearRecent })
         ] }),
         recentRows.map((info, i3) => row2(info, i3, true)),
-        (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a2("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
-        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a2("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => row2(info, recentRows.length + i3, false)),
-        !loading && rows.length === 0 && /* @__PURE__ */ a2("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
+        (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
+        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => row2(info, recentRows.length + i3, false)),
+        !loading && rows.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
       ] })
     ] }),
-    /* @__PURE__ */ a2("div", { class: "fnc-sr-footer", children: [
-      /* @__PURE__ */ a2("span", { children: [
-        /* @__PURE__ */ a2("kbd", { class: "fnc-kbd", children: "\u2191\u2193" }),
+    /* @__PURE__ */ a3("div", { class: "fnc-sr-footer", children: [
+      /* @__PURE__ */ a3("span", { children: [
+        /* @__PURE__ */ a3("kbd", { class: "fnc-kbd", children: "\u2191\u2193" }),
         " ",
         t3.navigate
       ] }),
-      /* @__PURE__ */ a2("span", { children: [
-        /* @__PURE__ */ a2("kbd", { class: "fnc-kbd", children: "\u21B5" }),
+      /* @__PURE__ */ a3("span", { children: [
+        /* @__PURE__ */ a3("kbd", { class: "fnc-kbd", children: "\u21B5" }),
         " ",
         t3.openAction
       ] }),
-      /* @__PURE__ */ a2("button", { class: "fnc-sr-foot-btn", onClick: close, children: [
-        /* @__PURE__ */ a2("kbd", { class: "fnc-kbd", children: "ESC" }),
+      /* @__PURE__ */ a3("button", { class: "fnc-sr-foot-btn", onClick: close, children: [
+        /* @__PURE__ */ a3("kbd", { class: "fnc-kbd", children: "ESC" }),
         " ",
         t3.close
       ] }),
-      /* @__PURE__ */ a2("span", { class: "fnc-spacer" }),
-      /* @__PURE__ */ a2("span", { children: [
-        /* @__PURE__ */ a2("kbd", { class: "fnc-kbd", children: [
+      /* @__PURE__ */ a3("span", { class: "fnc-spacer" }),
+      /* @__PURE__ */ a3("span", { children: [
+        /* @__PURE__ */ a3("kbd", { class: "fnc-kbd", children: [
           /Mac|iPhone|iPad/.test(navigator.platform) ? "\u2318" : "Ctrl",
           " + K"
         ] }),
@@ -1843,81 +2043,107 @@ function Toolbar({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = STRINGS[s3.locale];
   const canSearch = typeof ctx.datafeed.searchSymbols === "function";
-  return /* @__PURE__ */ a2("div", { class: "fnc-toolbar", role: "toolbar", children: [
-    /* @__PURE__ */ a2(
+  const mod = /Mac|iPhone|iPad/.test(navigator.platform) ? "\u2318" : "Ctrl";
+  return /* @__PURE__ */ a3("div", { class: "fnc-toolbar", role: "toolbar", children: [
+    /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-symbol",
         disabled: !canSearch,
-        title: canSearch ? t3.searchSymbol : void 0,
+        "data-tip": canSearch ? t3.searchSymbol : void 0,
         "aria-haspopup": "dialog",
-        onClick: () => ctx.setSearchOpen(true),
+        onClick: () => ctx.setSearchOpen(true, "symbol"),
         children: [
-          ctx.showLogo && s3.symbol ? /* @__PURE__ */ a2(SymbolAvatar, { info: s3.symbol, size: 24 }) : canSearch && /* @__PURE__ */ a2("span", { class: "fnc-icon", children: /* @__PURE__ */ a2(SearchIcon, {}) }),
-          /* @__PURE__ */ a2("span", { class: "fnc-symbol-name", children: s3.symbol?.name ?? "\u2014" }),
-          canSearch && ctx.showLogo && /* @__PURE__ */ a2("span", { class: "fnc-icon", children: /* @__PURE__ */ a2(ChevronDownIcon, {}) })
+          ctx.showLogo && s3.symbol ? /* @__PURE__ */ a3(SymbolAvatar, { info: s3.symbol, size: 24 }) : canSearch && /* @__PURE__ */ a3("span", { class: "fnc-icon", children: /* @__PURE__ */ a3(SearchIcon, {}) }),
+          /* @__PURE__ */ a3("span", { class: "fnc-symbol-name", children: s3.symbol?.name ?? "\u2014" }),
+          canSearch && ctx.showLogo && /* @__PURE__ */ a3("span", { class: "fnc-icon", children: /* @__PURE__ */ a3(ChevronDownIcon, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
-    /* @__PURE__ */ a2(IntervalPicker, { ctx }),
-    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbar }),
-    /* @__PURE__ */ a2("div", { class: "fnc-spacer" }),
-    /* @__PURE__ */ a2("div", { class: "fnc-tools", children: [
-      /* @__PURE__ */ a2(ChartTypeMenu, { ctx }),
-      /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    /* @__PURE__ */ a3(IntervalPicker, { ctx }),
+    /* @__PURE__ */ a3(Slot, { el: ctx.slots.toolbar }),
+    /* @__PURE__ */ a3("div", { class: "fnc-spacer" }),
+    /* @__PURE__ */ a3("div", { class: "fnc-tools", children: [
+      /* @__PURE__ */ a3(ChartTypeMenu, { ctx }),
+      /* @__PURE__ */ a3(
         "button",
         {
-          class: "fnc-btn fnc-btn-wide fnc-btn-label",
-          title: t3.addIndicator,
+          class: "fnc-btn fnc-btn-wide fnc-btn-label fnc-btn-indicators",
+          "data-tip": t3.addIndicator,
           "aria-label": t3.addIndicator,
           "aria-haspopup": "dialog",
           onClick: () => ctx.store.set({ dialog: { kind: "indicators" } }),
           children: [
-            /* @__PURE__ */ a2(IndicatorIcon, {}),
-            /* @__PURE__ */ a2("span", { children: t3.indicators })
+            /* @__PURE__ */ a3(IndicatorIcon, {}),
+            /* @__PURE__ */ a3("span", { children: t3.indicators })
           ]
         }
       ),
-      ctx.multi && /* @__PURE__ */ a2(LayoutMenu, { ctx, multi: ctx.multi })
+      canSearch && /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-btn fnc-btn-compare",
+          "data-tip": t3.compareSymbol,
+          "aria-label": t3.compareSymbol,
+          "aria-haspopup": "dialog",
+          disabled: s3.compares.length >= 5,
+          onClick: () => ctx.setSearchOpen(true, "compare"),
+          children: /* @__PURE__ */ a3(CompareIcon, {})
+        }
+      ),
+      /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-btn fnc-btn-replay",
+          "data-tip": s3.replay.selecting ? t3.replayPick : t3.replay,
+          "aria-label": t3.replay,
+          "aria-pressed": s3.replay.selecting || s3.replay.active,
+          onClick: () => s3.replay.active ? ctx.chart.stopReplay() : ctx.chart.setReplaySelecting(!s3.replay.selecting),
+          children: /* @__PURE__ */ a3(ReplayIcon, {})
+        }
+      ),
+      ctx.multi && /* @__PURE__ */ a3(LayoutMenu, { ctx, multi: ctx.multi })
     ] }),
-    /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
-    ctx.drawingToolbar && /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    ctx.drawingToolbar && /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-btn fnc-btn-drawbar",
-        title: t3.drawingTools,
+        "data-tip": t3.drawingTools,
         "aria-label": t3.drawingTools,
         "aria-pressed": s3.drawbarOpen || s3.drawingTool !== null,
         onClick: () => ctx.store.set({ drawbarOpen: !s3.drawbarOpen }),
-        children: /* @__PURE__ */ a2(PencilIcon, {})
+        children: /* @__PURE__ */ a3(PencilIcon, {})
       }
     ),
-    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbarEnd, fixed: true }),
-    /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-undo", "data-tip": `${t3.undo} (${mod}+Z)`, "aria-label": t3.undo, disabled: !s3.canUndo, onClick: () => ctx.chart.undo(), children: /* @__PURE__ */ a3(UndoIcon, {}) }),
+    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-undo", "data-tip": `${t3.redo} (${mod}+Shift+Z)`, "aria-label": t3.redo, disabled: !s3.canRedo, onClick: () => ctx.chart.redo(), children: /* @__PURE__ */ a3(RedoIcon, {}) }),
+    /* @__PURE__ */ a3(Slot, { el: ctx.slots.toolbarEnd, fixed: true }),
+    /* @__PURE__ */ a3(
       "button",
       {
-        class: "fnc-btn",
-        title: t3.chartSettings,
+        class: "fnc-btn fnc-btn-settings",
+        "data-tip": t3.chartSettings,
         "aria-label": t3.chartSettings,
         "aria-haspopup": "dialog",
         onClick: () => ctx.store.set({ dialog: { kind: "chartSettings" } }),
-        children: /* @__PURE__ */ a2(SettingsIcon, {})
+        children: /* @__PURE__ */ a3(SettingsIcon, {})
       }
     ),
-    /* @__PURE__ */ a2("button", { class: "fnc-btn fnc-btn-screenshot", title: t3.screenshot, "aria-label": t3.screenshot, onClick: ctx.screenshot, children: /* @__PURE__ */ a2(CameraIcon, {}) }),
-    /* @__PURE__ */ a2(
+    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-screenshot", "data-tip": t3.screenshot, "aria-label": t3.screenshot, onClick: ctx.screenshot, children: /* @__PURE__ */ a3(CameraIcon, {}) }),
+    /* @__PURE__ */ a3(
       "button",
       {
-        class: "fnc-btn",
-        title: s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
+        class: "fnc-btn fnc-btn-fullscreen",
+        "data-tip": s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
         "aria-label": s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
         onClick: ctx.toggleFullscreen,
-        children: s3.fullscreen ? /* @__PURE__ */ a2(CollapseIcon, {}) : /* @__PURE__ */ a2(ExpandIcon, {})
+        children: s3.fullscreen ? /* @__PURE__ */ a3(CollapseIcon, {}) : /* @__PURE__ */ a3(ExpandIcon, {})
       }
     ),
-    s3.searchOpen && canSearch && /* @__PURE__ */ a2(SymbolSearch, { ctx }),
-    /* @__PURE__ */ a2(Dialogs, { ctx })
+    s3.searchOpen && canSearch && /* @__PURE__ */ a3(SymbolSearch, { ctx }),
+    /* @__PURE__ */ a3(Dialogs, { ctx })
   ] });
 }
 
@@ -1931,7 +2157,7 @@ var CONTROL_OFFSET = 52;
 var dirClass = (v3) => v3 > 0 ? "fnc-up" : v3 < 0 ? "fnc-down" : "fnc-flat";
 function IndicatorItem({ ctx, item }) {
   const t3 = STRINGS[ctx.store.get().locale];
-  return /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3(
     "div",
     {
       class: item.visible ? "fnc-ind" : "fnc-ind fnc-ind-hidden",
@@ -1944,41 +2170,41 @@ function IndicatorItem({ ctx, item }) {
       },
       onKeyDown: (e3) => e3.key === "Enter" && ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
       children: [
-        /* @__PURE__ */ a2(
+        /* @__PURE__ */ a3(
           "button",
           {
             class: "fnc-ind-btn fnc-ind-eye",
-            title: item.visible ? t3.hide : t3.show,
+            "data-tip": item.visible ? t3.hide : t3.show,
             "aria-label": `${item.title} ${item.visible ? t3.hide : t3.show}`,
             "aria-pressed": !item.visible,
             onClick: (e3) => {
               e3.stopPropagation();
               ctx.chart.setIndicatorVisible(item.id, !item.visible);
             },
-            children: item.visible ? /* @__PURE__ */ a2(EyeIcon, {}) : /* @__PURE__ */ a2(EyeOffIcon, {})
+            children: item.visible ? /* @__PURE__ */ a3(EyeIcon, {}) : /* @__PURE__ */ a3(EyeOffIcon, {})
           }
         ),
-        /* @__PURE__ */ a2("span", { class: "fnc-ind-title", children: item.title }),
-        item.visible && item.values.map((v3) => /* @__PURE__ */ a2("b", { style: { color: v3.color }, title: v3.label, children: v3.value })),
-        /* @__PURE__ */ a2("span", { class: "fnc-ind-actions", children: [
-          /* @__PURE__ */ a2(
+        /* @__PURE__ */ a3("span", { class: "fnc-ind-title", children: item.title }),
+        item.visible && item.values.map((v3) => /* @__PURE__ */ a3("b", { style: { color: v3.color }, "data-tip": v3.label, children: v3.value })),
+        /* @__PURE__ */ a3("span", { class: "fnc-ind-actions", children: [
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-ind-btn",
-              title: t3.indicatorSettings,
+              "data-tip": t3.indicatorSettings,
               "aria-label": `${item.title} ${t3.indicatorSettings}`,
               onClick: () => ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
-              children: /* @__PURE__ */ a2(GearIcon, {})
+              children: /* @__PURE__ */ a3(GearIcon, {})
             }
           ),
-          /* @__PURE__ */ a2(
+          /* @__PURE__ */ a3(
             "button",
             {
               class: "fnc-ind-btn",
-              title: t3.removeIndicator,
+              "data-tip": t3.removeIndicator,
               "aria-label": `${item.title} ${t3.removeIndicator}`,
               onClick: () => ctx.chart.removeIndicator(item.id),
-              children: /* @__PURE__ */ a2(SmallCloseIcon, {})
+              children: /* @__PURE__ */ a3(SmallCloseIcon, {})
             }
           )
         ] })
@@ -1998,7 +2224,9 @@ function Legend({ ctx }) {
         "crosshairMove",
         (info) => setHover(info ? { bar: info.bar, prev: ctx.chart.bars[info.index - 1], index: info.index } : null)
       ),
-      ctx.chart.on("dataChange", () => refresh(void 0))
+      ctx.chart.on("dataChange", () => refresh(void 0)),
+      // Compare values are % from the first visible bar, so they change while scrolling.
+      ctx.chart.on("visibleRangeChange", () => ctx.store.get().compares.length > 0 && refresh(void 0))
     ];
     return () => offs.forEach((off) => off());
   }, [ctx.chart]);
@@ -2011,7 +2239,7 @@ function Legend({ ctx }) {
     ro.observe(el);
     return () => ro.disconnect();
   }, [ctx.chart]);
-  if (!s3.symbol) return /* @__PURE__ */ a2("div", { class: "fnc-legend", ref });
+  if (!s3.symbol) return /* @__PURE__ */ a3("div", { class: "fnc-legend", ref });
   const bars = ctx.chart.bars;
   const bar = hover?.bar ?? bars[bars.length - 1];
   const prev = hover ? hover.prev : bars[bars.length - 2];
@@ -2022,28 +2250,28 @@ function Legend({ ctx }) {
     const change = prev ? bar.close - prev.close : 0;
     const pct = prev && prev.close ? change / prev.close * 100 : 0;
     const sign = change > 0 ? "+" : "";
-    values = /* @__PURE__ */ a2("div", { class: "fnc-legend-values", children: [
-      /* @__PURE__ */ a2("span", { children: [
+    values = /* @__PURE__ */ a3("div", { class: "fnc-legend-values", children: [
+      /* @__PURE__ */ a3("span", { children: [
         t3.open,
         " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.open) })
+        /* @__PURE__ */ a3("b", { class: cls, children: fmt(bar.open) })
       ] }),
-      /* @__PURE__ */ a2("span", { children: [
+      /* @__PURE__ */ a3("span", { children: [
         t3.high,
         " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.high) })
+        /* @__PURE__ */ a3("b", { class: cls, children: fmt(bar.high) })
       ] }),
-      /* @__PURE__ */ a2("span", { children: [
+      /* @__PURE__ */ a3("span", { children: [
         t3.low,
         " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.low) })
+        /* @__PURE__ */ a3("b", { class: cls, children: fmt(bar.low) })
       ] }),
-      /* @__PURE__ */ a2("span", { children: [
+      /* @__PURE__ */ a3("span", { children: [
         t3.close_,
         " ",
-        /* @__PURE__ */ a2("b", { class: cls, children: fmt(bar.close) })
+        /* @__PURE__ */ a3("b", { class: cls, children: fmt(bar.close) })
       ] }),
-      /* @__PURE__ */ a2("b", { class: dirClass(change), children: [
+      /* @__PURE__ */ a3("b", { class: dirClass(change), children: [
         sign,
         fmt(change),
         " (",
@@ -2051,33 +2279,48 @@ function Legend({ ctx }) {
         pct.toFixed(2),
         "%)"
       ] }),
-      bar.volume !== void 0 && /* @__PURE__ */ a2("span", { children: [
+      bar.volume !== void 0 && /* @__PURE__ */ a3("span", { children: [
         t3.volume,
         " ",
-        /* @__PURE__ */ a2("b", { class: "fnc-flat", children: formatCompact(bar.volume, s3.locale) })
+        /* @__PURE__ */ a3("b", { class: "fnc-flat", children: formatCompact(bar.volume, s3.locale) })
       ] })
     ] });
   }
   const items = s3.indicators.length ? ctx.chart.indicatorLegend(hover?.index) : [];
   const overlayItems = items.filter((i3) => i3.overlay);
   const paneLegends = s3.layout.panes.filter((p3) => p3.kind === "indicator").map((pane) => ({ pane, item: items.find((i3) => i3.id === pane.id) }));
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2("div", { class: "fnc-legend", ref, children: [
-      /* @__PURE__ */ a2("div", { class: "fnc-legend-title", children: [
-        ctx.showLogo && /* @__PURE__ */ a2(SymbolAvatar, { info: s3.symbol, size: 18 }),
-        /* @__PURE__ */ a2("b", { children: s3.symbol.name }),
-        /* @__PURE__ */ a2("span", { children: "\xB7" }),
-        /* @__PURE__ */ a2("span", { children: resolutionLabel(s3.resolution, s3.locale) }),
-        /* @__PURE__ */ a2("span", { children: "\xB7" }),
-        /* @__PURE__ */ a2("span", { children: s3.symbol.exchange }),
-        s3.loading && /* @__PURE__ */ a2("span", { class: "fnc-spinner", role: "status" })
+  return /* @__PURE__ */ a3($, { children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-legend", ref, children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-legend-title", children: [
+        ctx.showLogo && /* @__PURE__ */ a3(SymbolAvatar, { info: s3.symbol, size: 18 }),
+        /* @__PURE__ */ a3("b", { children: s3.symbol.name }),
+        /* @__PURE__ */ a3("span", { children: "\xB7" }),
+        /* @__PURE__ */ a3("span", { children: resolutionLabel(s3.resolution, s3.locale) }),
+        /* @__PURE__ */ a3("span", { children: "\xB7" }),
+        /* @__PURE__ */ a3("span", { children: s3.symbol.exchange }),
+        s3.loading && /* @__PURE__ */ a3("span", { class: "fnc-spinner", role: "status" })
       ] }),
       values,
-      !collapsed && overlayItems.map((item) => /* @__PURE__ */ a2(IndicatorItem, { ctx, item })),
-      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a2("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, title: t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a2("span", {}) }) : /* @__PURE__ */ a2("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, title: t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a2(CollapseLeftIcon, {}) }))
+      s3.compares.length > 0 && ctx.chart.compareLegend(hover?.index).map((c3) => /* @__PURE__ */ a3("div", { class: "fnc-cmp", children: [
+        /* @__PURE__ */ a3("i", { class: "fnc-cmp-dot", style: { background: c3.color } }),
+        /* @__PURE__ */ a3("span", { class: "fnc-cmp-name", children: c3.name }),
+        /* @__PURE__ */ a3("b", { children: c3.value }),
+        /* @__PURE__ */ a3(
+          "button",
+          {
+            class: "fnc-ind-btn",
+            "data-tip": t3.removeCompare,
+            "aria-label": `${c3.name} ${t3.removeCompare}`,
+            onClick: () => ctx.chart.removeCompare(c3.symbol),
+            children: /* @__PURE__ */ a3(SmallCloseIcon, {})
+          }
+        )
+      ] })),
+      !collapsed && overlayItems.map((item) => /* @__PURE__ */ a3(IndicatorItem, { ctx, item })),
+      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a3("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a3("span", {}) }) : /* @__PURE__ */ a3("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a3(CollapseLeftIcon, {}) }))
     ] }),
     paneLegends.map(
-      ({ pane, item }) => item && /* @__PURE__ */ a2("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a2(IndicatorItem, { ctx, item }) })
+      ({ pane, item }) => item && /* @__PURE__ */ a3("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a3(IndicatorItem, { ctx, item }) })
     )
   ] });
 }
@@ -2090,24 +2333,25 @@ function NavControls({ ctx }) {
   if (plotWidth <= 0) return null;
   const top = panesHeight - CONTROL_OFFSET;
   const page = () => Math.max(1, Math.round(plotWidth / ctx.chart.timeScale.barSpacing / 3));
-  const button = (label, onClick, icon) => /* @__PURE__ */ a2("button", { class: "fnc-btn", title: label, "aria-label": label, onClick, children: icon });
-  return /* @__PURE__ */ a2($, { children: [
-    showButtons && /* @__PURE__ */ a2("div", { class: "fnc-nav", style: { left: `${plotWidth / 2}px`, top: `${top}px` }, children: [
-      button(t3.zoomOut, () => ctx.chart.zoom(1 / ZOOM_STEP), /* @__PURE__ */ a2(MinusIcon, {})),
-      button(t3.zoomIn, () => ctx.chart.zoom(ZOOM_STEP), /* @__PURE__ */ a2(PlusIcon, {})),
-      button(t3.scrollBack, () => ctx.chart.scrollBars(-page()), /* @__PURE__ */ a2(ChevronLeftIcon, {})),
-      button(t3.scrollForward, () => ctx.chart.scrollBars(page()), /* @__PURE__ */ a2(ChevronRightIcon, {})),
-      button(t3.resetView, () => ctx.chart.resetView(), /* @__PURE__ */ a2(ResetIcon, {}))
+  const button = (label, onClick, icon) => /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": label, "aria-label": label, onClick, children: icon });
+  const replaying = s3.replay.active || s3.replay.selecting;
+  return /* @__PURE__ */ a3($, { children: [
+    showButtons && !replaying && /* @__PURE__ */ a3("div", { class: "fnc-nav", style: { left: `${plotWidth / 2}px`, top: `${top}px` }, children: [
+      button(t3.zoomOut, () => ctx.chart.zoom(1 / ZOOM_STEP), /* @__PURE__ */ a3(MinusIcon, {})),
+      button(t3.zoomIn, () => ctx.chart.zoom(ZOOM_STEP), /* @__PURE__ */ a3(PlusIcon, {})),
+      button(t3.scrollBack, () => ctx.chart.scrollBars(-page()), /* @__PURE__ */ a3(ChevronLeftIcon, {})),
+      button(t3.scrollForward, () => ctx.chart.scrollBars(page()), /* @__PURE__ */ a3(ChevronRightIcon, {})),
+      button(t3.resetView, () => ctx.chart.resetView(), /* @__PURE__ */ a3(ResetIcon, {}))
     ] }),
-    !s3.atRealtime && /* @__PURE__ */ a2(
+    !s3.atRealtime && /* @__PURE__ */ a3(
       "button",
       {
         class: "fnc-realtime",
         style: { left: `${plotWidth - 44}px`, top: `${top}px` },
-        title: t3.toRealtime,
+        "data-tip": t3.toRealtime,
         "aria-label": t3.toRealtime,
         onClick: () => ctx.chart.scrollToRealtime(),
-        children: /* @__PURE__ */ a2(ToRealtimeIcon, {})
+        children: /* @__PURE__ */ a3(ToRealtimeIcon, {})
       }
     )
   ] });
@@ -2118,25 +2362,25 @@ function Attribution({ ctx }) {
   const { panesHeight, plotWidth } = s3.layout;
   if (!ctx.attribution || plotWidth <= 0) return null;
   const label = s3.locale === "ko" ? "Funnest \uCC28\uD2B8" : "Charts by Funnest";
-  return /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3(
     "a",
     {
       class: "fnc-attribution",
       href: ATTRIBUTION_URL,
       target: "_blank",
       rel: "noopener",
-      title: label,
+      "data-tip": label,
       "aria-label": label,
       style: { top: `${panesHeight - 36}px` },
       children: [
-        /* @__PURE__ */ a2(FunnestMark, {}),
-        /* @__PURE__ */ a2("span", { children: "funnest" })
+        /* @__PURE__ */ a3(FunnestMark, {}),
+        /* @__PURE__ */ a3("span", { children: "funnest" })
       ]
     }
   );
 }
 function PaneTools({ ctx }) {
-  return ctx.multi ? /* @__PURE__ */ a2(PaneMaximize, { ctx, multi: ctx.multi }) : null;
+  return ctx.multi ? /* @__PURE__ */ a3(PaneMaximize, { ctx, multi: ctx.multi }) : null;
 }
 function PaneMaximize({ ctx, multi }) {
   const s3 = useStore(ctx.store);
@@ -2145,29 +2389,70 @@ function PaneMaximize({ ctx, multi }) {
   const t3 = STRINGS[s3.locale];
   const maximized = m3.maximized !== null;
   const label = maximized ? t3.restorePane : t3.maximizePane;
-  return /* @__PURE__ */ a2(
+  return /* @__PURE__ */ a3(
     "button",
     {
       class: "fnc-btn fnc-pane-max",
       style: { left: `${s3.layout.plotWidth - 36}px` },
-      title: `${label} (Alt+Enter)`,
+      "data-tip": `${label} (Alt+Enter)`,
       "aria-label": label,
       "aria-pressed": maximized,
       onClick: () => {
         const index = multi.store.get().active;
         multi.toggleMaximize(index);
       },
-      children: maximized ? /* @__PURE__ */ a2(RestoreIcon, {}) : /* @__PURE__ */ a2(MaximizeIcon, {})
+      children: maximized ? /* @__PURE__ */ a3(RestoreIcon, {}) : /* @__PURE__ */ a3(MaximizeIcon, {})
     }
   );
 }
+var REPLAY_SPEEDS = [
+  { label: "1x", interval: 1e3 },
+  { label: "3x", interval: 333 },
+  { label: "10x", interval: 100 }
+];
+function ReplayBar({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const r3 = s3.replay;
+  const { plotWidth, panesHeight } = s3.layout;
+  if (plotWidth <= 0 || !r3.active && !r3.selecting) return null;
+  const style = { left: `${plotWidth / 2}px`, top: `${panesHeight - CONTROL_OFFSET}px` };
+  if (!r3.active) {
+    return /* @__PURE__ */ a3("div", { class: "fnc-replay fnc-replay-hint", style, role: "status", children: [
+      /* @__PURE__ */ a3(ReplayIcon, {}),
+      /* @__PURE__ */ a3("span", { children: t3.replayPick }),
+      /* @__PURE__ */ a3("button", { class: "fnc-ind-btn", "aria-label": t3.cancel, "data-tip": `${t3.cancel} (Esc)`, onClick: () => ctx.chart.setReplaySelecting(false), children: /* @__PURE__ */ a3(SmallCloseIcon, {}) })
+    ] });
+  }
+  const done = r3.remaining === 0;
+  const button = (label, onClick, icon, disabled = false) => /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": label, "aria-label": label, disabled, onClick, children: icon });
+  return /* @__PURE__ */ a3("div", { class: "fnc-replay", style, role: "toolbar", "aria-label": t3.replay, children: [
+    r3.playing ? button(t3.replayPause, () => ctx.chart.replayPause(), /* @__PURE__ */ a3(PauseIcon, {})) : button(t3.replayPlay, () => ctx.chart.replayPlay(), /* @__PURE__ */ a3(PlayIcon, {}), done),
+    button(t3.replayStep, () => ctx.chart.replayStep(), /* @__PURE__ */ a3(StepIcon, {}), done),
+    /* @__PURE__ */ a3("div", { class: "fnc-seg fnc-seg-sm", role: "radiogroup", "aria-label": t3.replaySpeed, children: REPLAY_SPEEDS.map((speed) => /* @__PURE__ */ a3(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": r3.interval === speed.interval,
+        onClick: () => ctx.chart.setReplayInterval(speed.interval),
+        children: speed.label
+      }
+    )) }),
+    done && /* @__PURE__ */ a3("span", { class: "fnc-replay-note", children: t3.replayDone }),
+    /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    button(t3.replayRestart, () => ctx.chart.setReplaySelecting(true), /* @__PURE__ */ a3(ReplayIcon, {})),
+    button(t3.replayExit, () => ctx.chart.stopReplay(), /* @__PURE__ */ a3(SmallCloseIcon, {}))
+  ] });
+}
 function Overlay({ ctx }) {
-  return /* @__PURE__ */ a2($, { children: [
-    /* @__PURE__ */ a2(Attribution, { ctx }),
-    /* @__PURE__ */ a2(Legend, { ctx }),
-    /* @__PURE__ */ a2(NavControls, { ctx }),
-    /* @__PURE__ */ a2(SelectionBar, { ctx }),
-    /* @__PURE__ */ a2(PaneTools, { ctx })
+  return /* @__PURE__ */ a3($, { children: [
+    /* @__PURE__ */ a3(Attribution, { ctx }),
+    /* @__PURE__ */ a3(Legend, { ctx }),
+    /* @__PURE__ */ a3(NavControls, { ctx }),
+    /* @__PURE__ */ a3(ReplayBar, { ctx }),
+    /* @__PURE__ */ a3(SelectionBar, { ctx }),
+    /* @__PURE__ */ a3(PaneTools, { ctx })
   ] });
 }
 
@@ -2696,6 +2981,38 @@ var CSS = (
   flex: none;
 }
 
+/* Tooltip (data-tip). Hosts can restyle it with --fnc-tip-bg / --fnc-tip-text. */
+.fnc-tip {
+  position: fixed;
+  z-index: 2147483001;
+  max-width: 240px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--fnc-tip-bg, #24242b);
+  color: var(--fnc-tip-text, #f2f2f4);
+  font-family: var(--fnc-font);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1), transform 120ms cubic-bezier(0.4, 0, 1, 1), visibility 0s 120ms;
+}
+.fnc-tip[data-side='bottom'] { transform: translateY(-4px); }
+.fnc-tip[data-side='top'] { transform: translateY(4px); }
+.fnc-tip[data-side='right'] { transform: translateX(-4px); }
+.fnc-tip.is-on {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
+}
+@media (prefers-reduced-motion: reduce) { .fnc-tip, .fnc-tip.is-on { transform: none; } }
+@media (hover: none) { .fnc-tip { display: none; } }
+
 .fnc-tools { display: flex; align-items: center; gap: 4px; flex: none; }
 /* Right-hand menus open toward the left so they stay on screen. */
 .fnc-tools .fnc-menu { left: auto; right: 0; }
@@ -2934,6 +3251,20 @@ var CSS = (
 .fnc-action-primary { background: var(--fnc-accent); color: #fff; }
 .fnc-action-danger { flex: 0 0 auto; padding: 0 16px; color: var(--fnc-danger, #F04452); background: none; }
 
+/* \u2500\u2500 Narrow widgets (split screens next to side panels): the widget's own width decides, so
+   every toolbar button stays reachable. Ctrl/\u2318+Z still undoes when the buttons are hidden. \u2500\u2500 */
+.fnc-root { container: fnc / inline-size; }
+@container fnc (max-width: 1100px) {
+  .fnc-btn-undo { display: none; }
+  .fnc-btn-label span { display: none; }
+  .fnc-toolbar .fnc-btn-label { padding: 0 6px; }
+}
+@container fnc (max-width: 940px) {
+  .fnc-intervals { display: none; }
+  .fnc-interval-current { display: inline; }
+  .fnc-btn-screenshot { display: none; }
+}
+
 /* \u2500\u2500 Narrow phones (\u2264 400px): drop the menu chevrons and separators so every button fits \u2500\u2500 */
 @media (max-width: 400px) {
   .fnc-toolbar .fnc-btn-wide > svg:last-child { display: none; }
@@ -3038,8 +3369,79 @@ var CSS = (
 .fnc-switch[data-on='true'] { background: var(--fnc-text-2); }
 .fnc-switch[data-on='true']::after { transform: translateX(16px); }
 
+/* \u2500\u2500 Drawing tool groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-tool-group { position: relative; display: flex; }
+.fnc-tool-group[data-open='true'] { z-index: 30; }
+.fnc-tool-more {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  width: 14px;
+  height: 14px;
+  padding: 3px;
+  color: var(--fnc-text-2);
+  opacity: 0.7;
+}
+.fnc-tool-more:hover, .fnc-tool-more[aria-expanded='true'] { opacity: 1; color: var(--fnc-text); }
+.fnc-tool-menu { top: 0; left: calc(100% + 8px); min-width: 180px; }
+.fnc-tool-menu .fnc-menu-item { white-space: nowrap; }
+.fnc-tool-letter { font-size: 13px; font-weight: 700; }
+.fnc-svg-icon { display: inline-flex; }
+.fnc-svg-icon svg { width: 20px; height: 20px; }
+
+/* \u2500\u2500 Segmented control (price scale, replay speed) \u2500\u2500\u2500\u2500 */
+.fnc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: calc(var(--fnc-radius) + 2px); background: var(--fnc-surface); }
+.fnc-seg button {
+  min-width: 56px;
+  height: 30px;
+  padding: 0 12px;
+  border-radius: var(--fnc-radius);
+  font-size: 13px;
+  color: var(--fnc-text-2);
+}
+.fnc-seg button[aria-checked='true'] { background: var(--fnc-bg); color: var(--fnc-text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
+.fnc-seg-sm button { min-width: 36px; height: 26px; padding: 0 6px; font-size: 12px; }
+
+/* \u2500\u2500 Compare legend rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-cmp { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 12px; color: var(--fnc-text-2); pointer-events: auto; }
+.fnc-cmp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.fnc-cmp-name { color: var(--fnc-text); }
+.fnc-cmp b { color: var(--fnc-text); font-weight: 600; font-variant-numeric: tabular-nums; }
+.fnc-cmp .fnc-ind-btn { opacity: 0; }
+.fnc-cmp:hover .fnc-ind-btn, .fnc-cmp .fnc-ind-btn:focus-visible { opacity: 1; }
+@media (hover: none) { .fnc-cmp .fnc-ind-btn { opacity: 1; } }
+
+/* \u2500\u2500 Replay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.fnc-replay {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  transform: translateX(-50%);
+  border-radius: calc(var(--fnc-radius) + 4px);
+  background: var(--fnc-bg);
+  box-shadow: 0 2px 12px rgb(0 0 0 / 0.12), 0 0 0 1px var(--fnc-border);
+  white-space: nowrap;
+  pointer-events: auto;
+}
+.fnc-replay .fnc-btn { width: 32px; height: 32px; }
+.fnc-replay .fnc-sep { height: 20px; margin: 0 2px; }
+.fnc-replay-hint { gap: 8px; padding: 4px 4px 4px 12px; font-size: 13px; color: var(--fnc-text); }
+.fnc-replay-hint svg { color: var(--fnc-text-2); }
+.fnc-replay-note { padding: 0 6px; font-size: 12px; color: var(--fnc-text-2); }
+
+/* Indicator picker search (shown when custom indicators make the list long) */
+.fnc-ind-search { height: 48px; padding: 0 16px; }
+.fnc-ind-search input { font-size: 15px; }
+
 /* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (max-width: 640px) {
+  .fnc-btn-compare, .fnc-btn-replay, .fnc-btn-undo { display: none; }
   .fnc-toolbar { padding: 0 4px; gap: 2px; }
   .fnc-toolbar .fnc-btn { width: 32px; height: 32px; }
   .fnc-toolbar .fnc-btn-wide, .fnc-toolbar .fnc-btn-label { width: auto; padding: 0 6px; }
@@ -3116,6 +3518,77 @@ function div(className, parent) {
   parent?.appendChild(el);
   return el;
 }
+function bindTooltips(root) {
+  const tip = div("fnc-tip", root);
+  tip.setAttribute("role", "tooltip");
+  tip.id = `fnc-tip-${Math.random().toString(36).slice(2, 8)}`;
+  let current = null;
+  let timer;
+  let hiddenAt = 0;
+  const place = (el) => {
+    const r3 = el.getBoundingClientRect();
+    const w3 = tip.offsetWidth;
+    const h3 = tip.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let side = el.closest(".fnc-drawbar") ? "right" : el.closest(".fnc-nav") ? "top" : "bottom";
+    if (side === "bottom" && r3.bottom + h3 + 10 > vh) side = "top";
+    let left = side === "right" ? r3.right + 8 : r3.left + r3.width / 2 - w3 / 2;
+    const top = side === "right" ? r3.top + r3.height / 2 - h3 / 2 : side === "top" ? r3.top - h3 - 6 : r3.bottom + 6;
+    left = Math.max(4, Math.min(vw - w3 - 4, left));
+    tip.style.left = `${Math.round(left)}px`;
+    tip.style.top = `${Math.round(top)}px`;
+    tip.dataset.side = side;
+  };
+  const show = (el) => {
+    const text = el.dataset.tip;
+    if (!text || !el.isConnected) return;
+    tip.textContent = text;
+    el.setAttribute("aria-describedby", tip.id);
+    place(el);
+    tip.classList.add("is-on");
+  };
+  const hide = () => {
+    clearTimeout(timer);
+    if (tip.classList.contains("is-on")) hiddenAt = Date.now();
+    tip.classList.remove("is-on");
+    current?.removeAttribute("aria-describedby");
+    current = null;
+  };
+  const target = (e3) => e3.target instanceof Element ? e3.target.closest("[data-tip]") : null;
+  const onOver = (e3) => {
+    if (e3.pointerType === "touch") return;
+    const el = target(e3);
+    if (el === current) return;
+    hide();
+    if (!el || !root.contains(el)) return;
+    current = el;
+    timer = setTimeout(() => show(el), Date.now() - hiddenAt < 300 ? 0 : 350);
+  };
+  const onFocus = (e3) => {
+    const el = target(e3);
+    if (!el || !e3.target.matches?.(":focus-visible")) return;
+    hide();
+    current = el;
+    show(el);
+  };
+  root.addEventListener("pointerover", onOver);
+  root.addEventListener("pointerleave", hide);
+  root.addEventListener("pointerdown", hide, true);
+  root.addEventListener("wheel", hide, { passive: true });
+  root.addEventListener("focusin", onFocus);
+  root.addEventListener("focusout", hide);
+  return () => {
+    hide();
+    root.removeEventListener("pointerover", onOver);
+    root.removeEventListener("pointerleave", hide);
+    root.removeEventListener("pointerdown", hide, true);
+    root.removeEventListener("wheel", hide);
+    root.removeEventListener("focusin", onFocus);
+    root.removeEventListener("focusout", hide);
+    tip.remove();
+  };
+}
 function createShell(container, options) {
   injectStyles(container.ownerDocument);
   const storage = createStorage(options.storageKey);
@@ -3142,6 +3615,7 @@ function createShell(container, options) {
     bottom: div("fnc-slot fnc-slot-bottom"),
     footer: div("fnc-slot fnc-slot-footer")
   };
+  const unbindTips = bindTooltips(root);
   const body = div("fnc-body", root);
   const drawbarHost = options.drawingToolbar ? div("fnc-drawbar-host", body) : null;
   const main = div("fnc-main", body);
@@ -3207,6 +3681,7 @@ function createShell(container, options) {
       options.onFavoriteIntervalsChange?.(favoriteIntervals);
     },
     destroy: () => {
+      unbindTips();
       document.removeEventListener("fullscreenchange", onFullscreenChange);
       darkQuery?.removeEventListener?.("change", onSchemeChange);
       if (isNativeFullscreen()) void document.exitFullscreen();
@@ -3216,10 +3691,21 @@ function createShell(container, options) {
 }
 function bindWidgetKeys(shell, active, searchHotkey, extra) {
   const { root } = shell;
+  let focused = false;
+  const onPointerDown = (e3) => focused = root.contains(e3.target);
   const onKeyDown = (e3) => {
     const pane = active();
     if (!pane) return;
     const s3 = pane.store.get();
+    const target = e3.target;
+    const typing = !!target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+    const key = e3.key.toLowerCase();
+    if (focused && !typing && !s3.dialog && !s3.searchOpen && (e3.ctrlKey || e3.metaKey) && !e3.altKey && (key === "z" || key === "y")) {
+      e3.preventDefault();
+      if (key === "y" || e3.shiftKey) pane.chart.redo();
+      else pane.chart.undo();
+      return;
+    }
     if (searchHotkey && (e3.ctrlKey || e3.metaKey) && e3.key.toLowerCase() === "k" && pane.canSearch && !s3.dialog) {
       e3.preventDefault();
       pane.store.set({ searchOpen: true });
@@ -3244,9 +3730,11 @@ function bindWidgetKeys(shell, active, searchHotkey, extra) {
   };
   document.addEventListener("keydown", onKeyDown);
   document.addEventListener("keyup", onKeyUp);
+  document.addEventListener("pointerdown", onPointerDown, true);
   return () => {
     document.removeEventListener("keydown", onKeyDown);
     document.removeEventListener("keyup", onKeyUp);
+    document.removeEventListener("pointerdown", onPointerDown, true);
   };
 }
 
@@ -3270,6 +3758,11 @@ function createPane(shell, config) {
     layout: chart.layout,
     atRealtime: true,
     searchOpen: false,
+    searchTarget: "symbol",
+    canUndo: chart.canUndo,
+    canRedo: chart.canRedo,
+    compares: chart.getCompares(),
+    replay: chart.replay,
     chartType: config.chartType,
     drawingTool: null,
     selection: null,
@@ -3292,7 +3785,10 @@ function createPane(shell, config) {
     chart.on("drawingsChange", (drawings) => store.set({ drawingCount: drawings.length })),
     chart.on("indicatorsChange", (indicators) => store.set({ indicators })),
     chart.on("magnetChange", (magnet) => store.set({ magnet })),
-    chart.on("chartTypeChange", (chartType) => store.set({ chartType }))
+    chart.on("chartTypeChange", (chartType) => store.set({ chartType })),
+    chart.on("historyChange", ({ canUndo, canRedo }) => store.set({ canUndo, canRedo })),
+    chart.on("comparesChange", (compares) => store.set({ compares })),
+    chart.on("replayChange", (replay) => store.set({ replay }))
   ];
   const load = (sym, res) => {
     store.set({ resolution: res });
@@ -3322,7 +3818,7 @@ function createPane(shell, config) {
       if (current) void load(current.symbol, res);
     },
     toggleFavoriteInterval: shell.toggleFavoriteInterval,
-    setSearchOpen: (open) => store.set({ searchOpen: open }),
+    setSearchOpen: (open, target = "symbol") => store.set(open ? { searchOpen: true, searchTarget: target } : { searchOpen: false }),
     screenshot: () => {
       const s3 = store.get();
       chart.takeScreenshot().toBlob((blob) => {
@@ -3336,7 +3832,7 @@ function createPane(shell, config) {
     },
     toggleFullscreen: shell.toggleFullscreen
   };
-  Q(/* @__PURE__ */ a2(Overlay, { ctx }), overlayHost);
+  Q(/* @__PURE__ */ a3(Overlay, { ctx }), overlayHost);
   return {
     stage,
     chart,
@@ -3414,8 +3910,8 @@ function createTradingChart(container, options) {
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
   const unbindKeys = bindWidgetKeys(shell, () => pane, searchHotkey);
-  Q(/* @__PURE__ */ a2(Toolbar, { ctx: pane.ctx }), shell.toolbarHost);
-  if (shell.drawbarHost) Q(/* @__PURE__ */ a2(DrawingToolbar, { ctx: pane.ctx }), shell.drawbarHost);
+  Q(/* @__PURE__ */ a3(Toolbar, { ctx: pane.ctx }), shell.toolbarHost);
+  if (shell.drawbarHost) Q(/* @__PURE__ */ a3(DrawingToolbar, { ctx: pane.ctx }), shell.drawbarHost);
   void pane.load(symbol, resolution);
   return {
     chart: pane.chart,
@@ -3449,17 +3945,17 @@ var DEFAULT_SYNC = { crosshair: true, time: false, symbol: false, interval: fals
 function PaneTab({ pane, index, active, onSelect }) {
   const s3 = useStore(pane.store);
   const t3 = STRINGS[s3.locale];
-  return /* @__PURE__ */ a2("button", { class: "fnc-pane-tab", role: "tab", "aria-selected": active, onClick: onSelect, children: [
-    /* @__PURE__ */ a2("span", { class: "fnc-pane-tab-num", children: index + 1 }),
+  return /* @__PURE__ */ a3("button", { class: "fnc-pane-tab", role: "tab", "aria-selected": active, onClick: onSelect, children: [
+    /* @__PURE__ */ a3("span", { class: "fnc-pane-tab-num", children: index + 1 }),
     s3.symbol?.name ?? `${t3.pane} ${index + 1}`,
-    /* @__PURE__ */ a2("small", { children: resolutionLabel(s3.resolution, s3.locale) })
+    /* @__PURE__ */ a3("small", { children: resolutionLabel(s3.resolution, s3.locale) })
   ] });
 }
 function PaneTabs({ multi, panes }) {
   const m3 = useStore(multi.store);
   const visible = panes().slice(0, paneCount(LAYOUTS[m3.layout]));
   if (!m3.narrow || visible.length < 2) return null;
-  return /* @__PURE__ */ a2("div", { class: "fnc-pane-tabs", role: "tablist", children: visible.map((p3, i3) => /* @__PURE__ */ a2(PaneTab, { pane: p3, index: i3, active: i3 === m3.active, onSelect: () => multi.activate(i3) })) });
+  return /* @__PURE__ */ a3("div", { class: "fnc-pane-tabs", role: "tablist", children: visible.map((p3, i3) => /* @__PURE__ */ a3(PaneTab, { pane: p3, index: i3, active: i3 === m3.active, onSelect: () => multi.activate(i3) })) });
 }
 function createMultiChart(container, options) {
   const {
@@ -3664,8 +4160,8 @@ function createMultiChart(container, options) {
   }
   function bindToolbar() {
     const pane = panes[store.get().active];
-    Q(/* @__PURE__ */ a2(Toolbar, { ctx: pane.ctx }, store.get().active), shell.toolbarHost);
-    if (shell.drawbarHost) Q(/* @__PURE__ */ a2(DrawingToolbar, { ctx: pane.ctx }, store.get().active), shell.drawbarHost);
+    Q(/* @__PURE__ */ a3(Toolbar, { ctx: pane.ctx }, store.get().active), shell.toolbarHost);
+    if (shell.drawbarHost) Q(/* @__PURE__ */ a3(DrawingToolbar, { ctx: pane.ctx }, store.get().active), shell.drawbarHost);
   }
   function activate(index) {
     const s3 = store.get();
@@ -3722,7 +4218,7 @@ function createMultiChart(container, options) {
   ensurePanes(Math.max(visibleCount(), Math.min(paneSpecs.length, MAX_PANES)));
   shell.setPanes(() => panes);
   bindToolbar();
-  Q(/* @__PURE__ */ a2(PaneTabs, { multi: controls, panes: () => panes }), tabsHost);
+  Q(/* @__PURE__ */ a3(PaneTabs, { multi: controls, panes: () => panes }), tabsHost);
   renderGrid();
   const resize = new ResizeObserver(() => {
     const narrow = shell.root.clientWidth > 0 && shell.root.clientWidth < narrowWidth;