@wick-charts/vue 0.6.3 → 0.7.0

package/dist/core/dist/data/decimation.js

@@ -1,54 +1,73 @@
-function D(t, o) {
-  return t.length <= o ? t : x(
+function D(t, h) {
+  return t.length <= h ? t : v(
     t,
-    o,
+    h,
     (l) => l.time,
     (l) => l.value
   );
 }
-function L(t, o) {
-  if (t.length <= o) return t;
-  const l = Math.ceil(t.length / o), c = [];
-  for (let h = 0; h < t.length; h += l) {
-    const s = Math.min(h + l, t.length);
-    let r = -1 / 0, a = 1 / 0, f = 0;
-    for (let n = h; n < s; n++)
-      t[n].high > r && (r = t[n].high), t[n].low < a && (a = t[n].low), f += t[n].volume ?? 0;
-    c.push({
-      time: t[h].time,
-      open: t[h].open,
-      high: r,
-      low: a,
-      close: t[s - 1].close,
-      volume: f
+function k(t, h) {
+  if (t.length <= h) return t;
+  const l = Math.ceil(t.length / h), u = [];
+  for (let o = 0; o < t.length; o += l) {
+    const n = Math.min(o + l, t.length);
+    let s = -1 / 0, i = 1 / 0, c = 0;
+    for (let r = o; r < n; r++)
+      t[r].high > s && (s = t[r].high), t[r].low < i && (i = t[r].low), c += t[r].volume ?? 0;
+    u.push({
+      time: t[o].time,
+      open: t[o].open,
+      high: s,
+      low: i,
+      close: t[n - 1].close,
+      volume: c
     });
   }
-  return c;
+  return u;
 }
-function x(t, o, l, c) {
-  if (o >= t.length || o < 3) return t;
-  const h = [t[0]], s = (t.length - 2) / (o - 2);
-  let r = 0;
-  for (let a = 0; a < o - 2; a++) {
-    const f = Math.floor((a + 1) * s) + 1, n = Math.min(Math.floor((a + 2) * s) + 1, t.length - 1);
-    let u = 0, g = 0;
-    const M = n, p = Math.min(Math.floor((a + 3) * s) + 1, t.length), e = p - M;
-    if (e > 0) {
-      for (let i = M; i < p; i++)
-        u += l(t[i]), g += c(t[i]);
-      u /= e, g /= e;
+function x(t, h) {
+  if (t.length <= h || h < 3) return t;
+  const l = t.length - 1, u = Math.ceil((t.length - 2) / (h - 2)), o = [t[0]];
+  for (let n = 1; n < l; n += u) {
+    const s = Math.min(n + u, l);
+    let i = 1 / 0, c = -1 / 0, r = !1;
+    for (let f = n; f < s; f++) {
+      const a = t[f];
+      if (!Number.isFinite(a.low) || !Number.isFinite(a.high)) {
+        r = !0;
+        break;
+      }
+      a.low < i && (i = a.low), a.high > c && (c = a.high);
     }
-    let v = -1, m = f;
-    const w = l(t[r]), b = c(t[r]);
-    for (let i = f; i < n; i++) {
-      const d = Math.abs((w - u) * (c(t[i]) - b) - (w - l(t[i])) * (g - b));
-      d > v && (v = d, m = i);
+    o.push(r ? { time: t[n].time, low: Number.NaN, high: Number.NaN } : { time: t[n].time, low: i, high: c });
+  }
+  return o.push(t[l]), o;
+}
+function v(t, h, l, u) {
+  if (h >= t.length || h < 3) return t;
+  const o = [t[0]], n = (t.length - 2) / (h - 2);
+  let s = 0;
+  for (let i = 0; i < h - 2; i++) {
+    const c = Math.floor((i + 1) * n) + 1, r = Math.min(Math.floor((i + 2) * n) + 1, t.length - 1);
+    let f = 0, a = 0;
+    const M = r, p = Math.min(Math.floor((i + 3) * n) + 1, t.length), g = p - M;
+    if (g > 0) {
+      for (let e = M; e < p; e++)
+        f += l(t[e]), a += u(t[e]);
+      f /= g, a /= g;
+    }
+    let w = -1, m = c;
+    const N = l(t[s]), b = u(t[s]);
+    for (let e = c; e < r; e++) {
+      const d = Math.abs((N - f) * (u(t[e]) - b) - (N - l(t[e])) * (a - b));
+      d > w && (w = d, m = e);
     }
-    h.push(t[m]), r = m;
+    o.push(t[m]), s = m;
   }
-  return h.push(t[t.length - 1]), h;
+  return o.push(t[t.length - 1]), o;
 }
 export {
+  x as decimateBandData,
   D as decimateLineData,
-  L as decimateOHLCData
+  k as decimateOHLCData
 };

package/dist/core/dist/data/sync.js

@@ -1,69 +1,75 @@
-import { normalizeTime as s } from "../utils/time.js";
-const g = { len: 0, firstTime: null, lastTime: null, data: null }, d = 20;
-function c(t, a) {
-  if (s(t.time) !== s(a.time)) return !1;
+import { normalizeTime as y } from "../utils/time.js";
+function i(t) {
+  return "x" in t ? t.x : y(t.time);
+}
+const m = { len: 0, firstTime: null, lastTime: null, data: null }, p = 20;
+function g(t, a) {
+  if (i(t) !== i(a)) return !1;
   const r = Object.keys(t), e = Object.keys(a);
   return r.length !== e.length ? !1 : r.every((n) => n === "time" || t[n] === a[n]);
 }
-function y(t, a) {
+function c(t, a) {
   if (!t || t.length !== a.length || t === a) return !1;
   for (let r = 0; r < a.length - 1; r++)
-    if (t[r] !== a[r] && !c(t[r], a[r]))
+    if (t[r] !== a[r] && !g(t[r], a[r]))
       return !1;
   return !0;
 }
-function p(t, a, r) {
+function T(t, a, r) {
   if (!t || t.length === 0 || r <= 0 || t.length !== a.length - r) return !1;
   for (let e = 1; e < r; e++)
-    if (s(a[e - 1].time) >= s(a[e].time)) return !1;
-  if (s(a[r - 1].time) >= s(t[0].time)) return !1;
+    if (i(a[e - 1]) >= i(a[e])) return !1;
+  if (i(a[r - 1]) >= i(t[0])) return !1;
   for (let e = 0; e < t.length; e++)
-    if (!c(t[e], a[r + e])) return !1;
+    if (!g(t[e], a[r + e])) return !1;
   return !0;
 }
-function T(t) {
+function A(t) {
   return typeof t == "object" && t !== null && !Array.isArray(t) && Array.isArray(t.data);
 }
-function A(t) {
+function b(t) {
   if (!Array.isArray(t)) return [t];
   if (t.length === 0) return [{ data: [] }];
   const a = t[0];
-  return Array.isArray(a) || T(a) ? t.map((r) => Array.isArray(r) ? { data: r } : r) : [{ data: t }];
+  return Array.isArray(a) || A(a) ? t.map((r) => Array.isArray(r) ? { data: r } : r) : [{ data: t }];
 }
-function D(t) {
-  const { chart: a, id: r } = t, e = A(t.data), n = e.length > 1 ? e.map((l, f) => l.label ?? `Series ${f + 1}`) : [e[0].label];
+function L(t) {
+  const { chart: a, id: r } = t, e = b(t.data), n = e.length > 1 ? e.map((l, f) => l.label ?? `Series ${f + 1}`) : [e[0].label];
   a.setSeriesLabels(r, n), a.setLayerColors(
     r,
     e.map((l) => l.color)
   );
-  const i = [];
+  const s = [];
   return a.batch(() => {
     for (let l = 0; l < e.length; l++)
-      i[l] = b({
+      s[l] = S({
         chart: a,
         id: r,
         data: e[l].data,
-        prev: t.prev[l] ?? g,
+        prev: t.prev[l] ?? m,
         layerIndex: l
       });
-  }), i;
+  }), s;
 }
-function b(t) {
-  const { chart: a, id: r, data: e, prev: n, layerIndex: i } = t;
+function S(t) {
+  const { chart: a, id: r, data: e, prev: n, layerIndex: s } = t;
   if (e.length === 0)
-    return a.setSeriesData(r, [], i), { len: 0, firstTime: null, lastTime: null, data: [] };
+    return a.setSeriesData(r, [], s), { len: 0, firstTime: null, lastTime: null, data: [] };
   if (n.data === e && n.len === e.length) return n;
-  const l = s(e[0].time), f = s(e[e.length - 1].time), h = n.firstTime !== null && n.firstTime !== l, u = e.length - n.len, m = n.lastTime !== null && n.lastTime !== f;
-  return h && u === 0 && m ? a.batch(() => {
-    a.appendData(r, e[e.length - 1], i), a.keepLast(r, e.length, i);
-  }) : p(n.data, e, u) ? a.prependData(r, e.slice(0, u), i) : n.len === 0 || e.length < n.len || u > d || h ? a.setSeriesData(r, e, i) : e.length === n.len ? y(n.data, e) ? a.updateData(r, e[e.length - 1], i) : a.setSeriesData(r, e, i) : a.batch(() => {
+  const l = i(e[0]), f = i(e[e.length - 1]);
+  if (typeof l == "string")
+    return e.length === n.len && c(n.data, e) ? a.updateData(r, e[e.length - 1], s) : a.setSeriesData(r, e, s), { len: e.length, firstTime: l, lastTime: f, data: e };
+  const h = n.firstTime !== null && n.firstTime !== l, u = e.length - n.len, d = n.lastTime !== null && n.lastTime !== f;
+  return h && u === 0 && d ? a.batch(() => {
+    a.appendData(r, e[e.length - 1], s), a.keepLast(r, e.length, s);
+  }) : T(n.data, e, u) ? a.prependData(r, e.slice(0, u), s) : n.len === 0 || e.length < n.len || u > p || h ? a.setSeriesData(r, e, s) : e.length === n.len ? c(n.data, e) ? a.updateData(r, e[e.length - 1], s) : a.setSeriesData(r, e, s) : a.batch(() => {
     for (let o = n.len; o < e.length; o++)
-      a.appendData(r, e[o], i);
+      a.appendData(r, e[o], s);
   }), { len: e.length, firstTime: l, lastTime: f, data: e };
 }
 export {
-  g as EMPTY_SYNC_STATE,
-  D as syncLayers,
-  b as syncSeriesLayer,
-  A as toLayers
+  m as EMPTY_SYNC_STATE,
+  L as syncLayers,
+  S as syncSeriesLayer,
+  b as toLayers
 };

package/dist/core/dist/navigator/controller.js

@@ -1,9 +1,9 @@
 import { DEFAULT_LINE_ENTRY as w } from "../animation/config.js";
 import { XScale as T } from "../scales/x-scale.js";
-import { YScale as R } from "../scales/y-scale.js";
-import { decimateCandles as k, decimateLinear as C } from "./decimate.js";
+import { YScale as k } from "../scales/y-scale.js";
+import { decimateCandles as C, decimateLinear as R } from "./decimate.js";
 import { hitTest as b, computeSnapCenter as E, computePan as I, computeResize as $ } from "./interactions.js";
-import { computeWindowGeometry as M, renderBackground as L, renderMiniCandlestick as V, renderMiniBar as N, renderMiniLine as P } from "./render.js";
+import { computeWindowGeometry as M, renderBackground as L, renderMiniCandlestick as N, renderMiniBar as V, renderMiniLine as P } from "./render.js";
 import { Animator as S } from "../animation/animator.js";
 import { easeOutCubic as z } from "../animation/easing.js";
 class G {
@@ -12,7 +12,7 @@ class G {
   #z;
   #e;
   #n;
-  #d;
+  #u;
   #r;
   #l;
   #a;
@@ -21,9 +21,9 @@ class G {
   #v;
   // Own scales — both cover the full data span. The main chart's scales move
   // with the viewport; these don't.
-  #u = new T();
-  #F = new R();
-  #A = 0;
+  #d = new T();
+  #A = new k();
+  #F = 0;
   #m = 0;
   #h = 1;
   #p = null;
@@ -35,7 +35,7 @@ class G {
    * `setData` (guards in-place mutation of a re-passed array); a buckets
    * mismatch (resize) recomputes per entry.
    */
-  #R = /* @__PURE__ */ new Map();
+  #k = /* @__PURE__ */ new Map();
   /**
    * Eases the alpha of the trailing bar/candle/line-segment from 0 → 1 over
    * `DEFAULT_LINE_ENTRY` whenever {@link setData} reports a new last point
@@ -48,11 +48,11 @@ class G {
   #o = null;
   /** `time` of the last point we've ever seen — initialises after the first
    * `setData`/render so the first paint doesn't trigger a fade-in. */
-  #k = null;
+  #C = null;
   /** Series index in `lineSeriesList(data)` that owns the newest last-time,
    * so the tail fade applies to the series that actually grew — not always
    * the last entry in the stack. -1 for candlestick (single-series). */
-  #C = -1;
+  #R = -1;
   #E;
   // Active-drag state — null when idle.
   #g = null;
@@ -61,22 +61,22 @@ class G {
   #$;
   #M;
   #L;
-  #V;
-  #y;
   #N;
+  #y;
+  #V;
   constructor(t) {
     this.#s = t.container, this.#e = t.chart, this.#x = t.data, this.#v = t.options ?? {}, window.getComputedStyle(this.#s).position === "static" && (this.#s.style.position = "relative"), this.#t = document.createElement("canvas"), this.#t.style.position = "absolute", this.#t.style.left = "0", this.#t.style.top = "0", this.#t.style.height = "100%", this.#t.style.touchAction = "none", this.#s.appendChild(this.#t);
     const e = this.#t.getContext("2d", { alpha: !0 });
     if (!e) throw new Error("NavigatorController: failed to acquire 2D context");
-    this.#z = e, this.#n = document.createElement("div"), this.#n.dataset.chartNavigatorOverlay = "", this.#n.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#d = document.createElement("div"), this.#d.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = y(), this.#c = y(), this.#n.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#n), this.#I = () => this.#B(), this.#$ = () => this.#f(), this.#M = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#$), this.#e.on("tickFrame", this.#M), this.#L = (s) => this.#U(s), this.#V = (s) => this.#J(s), this.#y = (s) => this.#K(s), this.#N = () => {
+    this.#z = e, this.#n = document.createElement("div"), this.#n.dataset.chartNavigatorOverlay = "", this.#n.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#u = document.createElement("div"), this.#u.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = y(), this.#c = y(), this.#n.append(this.#u, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#n), this.#I = () => this.#B(), this.#$ = () => this.#f(), this.#M = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#$), this.#e.on("tickFrame", this.#M), this.#L = (s) => this.#U(s), this.#N = (s) => this.#J(s), this.#y = (s) => this.#K(s), this.#V = () => {
       this.#g === null && (this.#t.style.cursor = "default");
-    }, this.#t.addEventListener("pointerdown", this.#L), this.#t.addEventListener("pointermove", this.#V), this.#t.addEventListener("pointerup", this.#y), this.#t.addEventListener("pointercancel", this.#y), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#j(s[0])), this.#E.observe(this.#s), this.#D();
+    }, this.#t.addEventListener("pointerdown", this.#L), this.#t.addEventListener("pointermove", this.#N), this.#t.addEventListener("pointerup", this.#y), this.#t.addEventListener("pointercancel", this.#y), this.#t.addEventListener("pointerleave", this.#V), this.#E = new ResizeObserver((s) => this.#j(s[0])), this.#E.observe(this.#s), this.#D();
     const i = this.#s.getBoundingClientRect();
     i.width > 0 && i.height > 0 && this.#W(i.width, i.height), this.#f();
   }
   setData(t) {
-    const e = F(t), i = e?.time ?? null;
-    if (i !== null && this.#k !== null && i !== this.#k) {
+    const e = A(t), i = e?.time ?? null;
+    if (i !== null && this.#C !== null && i !== this.#C) {
       const s = this.#o?.current ?? 0;
       this.#o = new S({
         initial: s,
@@ -85,7 +85,7 @@ class G {
         lerp: (n, h, l) => n + (h - n) * l
       }), this.#o.setTarget(1);
     }
-    this.#k = i, this.#C = e?.seriesIndex ?? -1, this.#x = t, this.#R.clear(), this.#f();
+    this.#C = i, this.#R = e?.seriesIndex ?? -1, this.#x = t, this.#k.clear(), this.#f();
   }
   setOptions(t) {
     this.#v = t, this.#D(), this.#f();
@@ -100,7 +100,7 @@ class G {
     t !== void 0 && (this.#s.style.height = `${t}px`);
   }
   destroy() {
-    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#L), this.#t.removeEventListener("pointermove", this.#V), this.#t.removeEventListener("pointerup", this.#y), this.#t.removeEventListener("pointercancel", this.#y), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#n.remove();
+    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#L), this.#t.removeEventListener("pointermove", this.#N), this.#t.removeEventListener("pointerup", this.#y), this.#t.removeEventListener("pointercancel", this.#y), this.#t.removeEventListener("pointerleave", this.#V), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#n.remove();
   }
   /** CSS pixel height of the strip — theme default unless overridden. */
   get height() {
@@ -108,10 +108,10 @@ class G {
   }
   // --- internals ---------------------------------------------------------
   /** Effective drawing width — the navigator reserves the main chart's
-   *  `yAxisWidth` on the Y-axis side so its active zone lines up with the
-   *  plot area. */
+   *  Y-axis columns so its active zone lines up with the plot area. */
   get #i() {
-    return Math.max(0, this.#A - this.#e.yAxisWidth);
+    const t = this.#e.getAxisColumnWidth("left") + this.#e.getAxisColumnWidth("right");
+    return Math.max(0, this.#F - t);
   }
   #j(t) {
     if (!t) return;
@@ -119,7 +119,7 @@ class G {
     i <= 0 || s <= 0 || (this.#W(i, s), this.#f());
   }
   #W(t, e) {
-    this.#A = t, this.#m = e, this.#h = window.devicePixelRatio || 1, this.#X();
+    this.#F = t, this.#m = e, this.#h = window.devicePixelRatio || 1, this.#X();
   }
   /**
    * Write canvas backing-store / CSS sizes only when they actually changed —
@@ -160,7 +160,7 @@ class G {
    *  compute against primed scales even on the opening gesture. */
   #P() {
     const t = this.#b(), e = this.#Z();
-    return this.#u.update(t, this.#i, this.#h), this.#F.update(e, this.#m, this.#h), { xRange: t, yRange: e };
+    return this.#d.update(t, this.#i, this.#h), this.#A.update(e, this.#m, this.#h), { xRange: t, yRange: e };
   }
   /**
    * X range for the brush window. While the user drags the brush we track the
@@ -172,7 +172,7 @@ class G {
     return this.#g !== null ? this.#e.getVisibleRange() : this.#e.getAnimationState().xRange;
   }
   #S() {
-    return this.#P(), M(this.#u, this.#Y(), this.#b());
+    return this.#P(), M(this.#d, this.#Y(), this.#b());
   }
   #H() {
     const t = this.#b(), e = t.to - t.from;
@@ -186,7 +186,7 @@ class G {
     if (h === 0) return;
     let l = this.#e.getVisibleRange();
     if (n.snapToCenter) {
-      const r = this.#u.xToTime(e), a = E({ time: r, startVisible: l, xRange: i });
+      const r = this.#d.xToTime(e), a = E({ time: r, startVisible: l, xRange: i });
       this.#e.setVisibleRange(a), l = a;
     }
     this.#g = {
@@ -243,8 +243,8 @@ class G {
     i.save(), i.clearRect(0, 0, s, n), i.scale(this.#h, this.#h);
     const h = {
       ctx: i,
-      timeScale: this.#u,
-      yScale: this.#F,
+      timeScale: this.#d,
+      yScale: this.#A,
       mediaWidth: this.#i,
       mediaHeight: this.#m,
       theme: t
@@ -254,12 +254,12 @@ class G {
     this.#o !== null && (this.#o.tick(performance.now()), l = this.#o.current, this.#o.animating ? this.#f() : this.#o = null);
     const r = Math.max(1, Math.round(this.#i)), a = this.#x;
     if (a.type === "candlestick")
-      V(h, this.#q(a.points, r, k), l);
+      N(h, this.#q(a.points, r, C), l);
     else {
-      const c = f(a), g = c.length === 1, d = this.#C >= 0 ? this.#C : c.length - 1;
-      for (let u = 0; u < c.length; u++) {
-        const p = this.#q(c[u], r, C), m = u === d ? l : 1;
-        a.type === "bar" ? N(h, p, m) : P(h, p, g, m);
+      const c = f(a), g = c.length === 1, u = this.#R >= 0 ? this.#R : c.length - 1;
+      for (let d = 0; d < c.length; d++) {
+        const p = this.#q(c[d], r, R), m = d === u ? l : 1;
+        a.type === "bar" ? V(h, p, m) : P(h, p, g, m);
       }
     }
     i.restore(), this.#G(t, e);
@@ -283,20 +283,20 @@ class G {
   /** Decimate `points` into `buckets`, reusing the cached result while the
    *  source array ref and bucket count are unchanged. */
   #q(t, e, i) {
-    const s = this.#R.get(t);
+    const s = this.#k.get(t);
     if (s !== void 0 && s.buckets === e)
       return s.result;
     const n = i(t, e);
-    return this.#R.set(t, { buckets: e, result: n }), n;
+    return this.#k.set(t, { buckets: e, result: n }), n;
   }
   #G(t, e) {
     if (e.to <= e.from) return;
-    const i = this.#Y(), s = Math.max(e.from, Math.min(e.to, i.from)), n = Math.max(e.from, Math.min(e.to, i.to)), h = this.#u.timeToX(s), l = this.#u.timeToX(n), r = Math.min(h, l), a = Math.max(h, l), c = Math.max(1, a - r);
-    this.#d.style.width = `${r}px`, this.#d.style.background = t.mask.fill, this.#d.style.display = r > 0 ? "block" : "none";
+    const i = this.#Y(), s = Math.max(e.from, Math.min(e.to, i.from)), n = Math.max(e.from, Math.min(e.to, i.to)), h = this.#d.timeToX(s), l = this.#d.timeToX(n), r = Math.min(h, l), a = Math.max(h, l), c = Math.max(1, a - r);
+    this.#u.style.width = `${r}px`, this.#u.style.background = t.mask.fill, this.#u.style.display = r > 0 ? "block" : "none";
     const g = Math.max(0, this.#i - (r + c));
     this.#r.style.left = `${r + c}px`, this.#r.style.width = `${g}px`, this.#r.style.background = t.mask.fill, this.#r.style.display = g > 0 ? "block" : "none", this.#l.style.left = `${r}px`, this.#l.style.width = `${c}px`, this.#l.style.background = t.window.fill, this.#l.style.border = t.window.borderWidth > 0 ? `${t.window.borderWidth}px solid ${t.window.border}` : "none";
-    const d = t.handle.width, u = Math.max(1, d / 2), p = this.#e.getTheme().background;
-    this.#a.style.left = `${r - d / 2}px`, this.#a.style.width = `${d}px`, this.#a.style.background = t.handle.color, this.#a.style.borderRadius = `${u}px`, this.#c.style.left = `${r + c - d / 2}px`, this.#c.style.width = `${d}px`, this.#c.style.background = t.handle.color, this.#c.style.borderRadius = `${u}px`;
+    const u = t.handle.width, d = Math.max(1, u / 2), p = this.#e.getTheme().background;
+    this.#a.style.left = `${r - u / 2}px`, this.#a.style.width = `${u}px`, this.#a.style.background = t.handle.color, this.#a.style.borderRadius = `${d}px`, this.#c.style.left = `${r + c - u / 2}px`, this.#c.style.width = `${u}px`, this.#c.style.background = t.handle.color, this.#c.style.borderRadius = `${d}px`;
     for (const m of this.#a.children)
       m.style.background = p;
     for (const m of this.#c.children)
@@ -339,7 +339,7 @@ class G {
 function f(o) {
   return "series" in o ? o.series : [o.points];
 }
-function F(o) {
+function A(o) {
   if (o.type === "candlestick") {
     const s = o.points.length;
     return s === 0 ? null : { time: o.points[s - 1].time, seriesIndex: -1 };
@@ -358,9 +358,9 @@ function v(o, t) {
   return o === "resize-left" || o === "resize-right" ? "ew-resize" : t ? "grabbing" : "grab";
 }
 function x(o, t) {
-  return v(A(o, t), !1);
+  return v(F(o, t), !1);
 }
-function A(o, t) {
+function F(o, t) {
   return b(o, t).gesture;
 }
 function y() {

package/dist/core/dist/perf/perf-hud.js

@@ -20,7 +20,7 @@ function I(i) {
 function O(i) {
   return -I(i) / 12;
 }
-const V = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f", B = "#f5c451", $ = "#f4756a", Y = "#5d6877", X = {
+const B = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f", V = "#f5c451", $ = "#f4756a", Y = "#5d6877", X = {
   position: "absolute",
   top: "8px",
   right: "8px",
@@ -34,7 +34,7 @@ const V = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f",
   border: "1px solid rgba(255, 255, 255, 0.09)",
   borderRadius: "10px",
   boxShadow: "0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
-  color: V,
+  color: B,
   font: "10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
   fontVariantNumeric: "tabular-nums",
   letterSpacing: "0.02em",
@@ -50,7 +50,7 @@ function G(i) {
 }`, i.head.appendChild(e);
 }
 function v(i) {
-  return i <= H ? y : i <= F ? B : $;
+  return i <= H ? y : i <= F ? V : $;
 }
 function A(i) {
   return i >= 1e6 ? `${(i / 1e6).toFixed(1)}M` : i >= 1e4 ? `${(i / 1e3).toFixed(1)}k` : Math.round(i).toLocaleString("en-US");

package/dist/core/dist/scales/tick-tracker.js

@@ -8,7 +8,7 @@ function f(s, t) {
     if (s[e] !== t[e]) return !1;
   return !0;
 }
-let m = class {
+class m {
   #e = [];
   #r = [];
   #t = /* @__PURE__ */ new Map();
@@ -104,7 +104,7 @@ let m = class {
   reset() {
     this.#e = [], this.#r = [], this.#t.clear(), this.#s = !1;
   }
-};
+}
 export {
   m as AxisTickTracker
 };