@wick-charts/vue 0.6.1 → 0.6.2

package/dist/core/dist/components/grid.js

@@ -1,22 +1,26 @@
-function T({ scope: c, timeScale: h, yScale: d, theme: a, yTicks: m, timeTicks: p }) {
-  const { context: t, bitmapSize: s, horizontalPixelRatio: e, verticalPixelRatio: u } = c;
-  t.save(), t.strokeStyle = a.grid.color, a.grid.style === "dashed" ? t.setLineDash([4 * e, 4 * e]) : a.grid.style === "dotted" && t.setLineDash([1 * e, 3 * e]);
-  const l = Math.max(1, Math.round(u)), g = l % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = l;
-  for (const { value: n, opacity: o } of m.entries) {
-    if (o <= 0.01) continue;
-    const i = Math.round(d.valueToBitmapY(n)) + g;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(0, i), t.lineTo(s.width, i), t.stroke();
+import { crispLineWidth as h, crispCenterOffset as d } from "../utils/pixel-grid.js";
+function x({ scope: p, timeScale: m, yScale: f, theme: a, yTicks: u, timeTicks: T, alpha: n = 1 }) {
+  if (n <= 0.01) return;
+  const { context: e, bitmapSize: c, horizontalPixelRatio: t, verticalPixelRatio: l } = p;
+  e.save(), e.strokeStyle = a.grid.color, a.grid.style === "dashed" ? e.setLineDash([4 * t, 4 * t]) : a.grid.style === "dotted" && e.setLineDash([1 * t, 3 * t]);
+  const g = h(l), v = d(l);
+  e.lineWidth = g;
+  for (const { value: r, opacity: s } of u.entries) {
+    const i = s * n;
+    if (i <= 0.01) continue;
+    const o = Math.round(f.valueToBitmapY(r)) + v;
+    e.globalAlpha = i, e.beginPath(), e.moveTo(0, o), e.lineTo(c.width, o), e.stroke();
   }
-  const r = Math.max(1, Math.round(e)), y = r % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = r;
-  for (const { value: n, opacity: o } of p.entries) {
-    if (o <= 0.01) continue;
-    const i = Math.round(h.timeToBitmapX(n)) + y;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(i, 0), t.lineTo(i, s.height), t.stroke();
+  const y = h(t), b = d(t);
+  e.lineWidth = y;
+  for (const { value: r, opacity: s } of T.entries) {
+    const i = s * n;
+    if (i <= 0.01) continue;
+    const o = Math.round(m.timeToBitmapX(r)) + b;
+    e.globalAlpha = i, e.beginPath(), e.moveTo(o, 0), e.lineTo(o, c.height), e.stroke();
   }
-  t.restore();
+  e.restore();
 }
 export {
-  T as renderGrid
+  x as renderGrid
 };

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

@@ -2,8 +2,8 @@ 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 { hitTest as y, computeSnapCenter as E, computePan as I, computeResize as M } from "./interactions.js";
-import { computeWindowGeometry as $, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.js";
+import { hitTest as y, computeSnapCenter as E, computePan as I, computeResize as $ } from "./interactions.js";
+import { computeWindowGeometry as M, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.js";
 import { Animator as S } from "../animation/animator.js";
 import { easeOutCubic as z } from "../animation/easing.js";
 class G {
@@ -58,8 +58,8 @@ class G {
   #g = null;
   // Bound listeners so we can remove the same references on destroy.
   #I;
-  #M;
   #$;
+  #M;
   #V;
   #L;
   #b;
@@ -68,9 +68,9 @@ class G {
     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.#o = document.createElement("div"), this.#o.dataset.chartNavigatorOverlay = "", this.#o.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 = b(), this.#c = b(), this.#o.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#o), this.#I = () => this.#B(), this.#M = () => this.#f(), this.#$ = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#M), this.#e.on("tickFrame", this.#$), this.#V = (s) => this.#H(s), this.#L = (s) => this.#J(s), this.#b = (s) => this.#K(s), this.#N = () => {
+    this.#z = e, this.#o = document.createElement("div"), this.#o.dataset.chartNavigatorOverlay = "", this.#o.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 = b(), this.#c = b(), this.#o.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#o), 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.#V = (s) => this.#U(s), this.#L = (s) => this.#J(s), this.#b = (s) => this.#K(s), this.#N = () => {
       this.#g === null && (this.#t.style.cursor = "default");
-    }, this.#t.addEventListener("pointerdown", this.#V), this.#t.addEventListener("pointermove", this.#L), this.#t.addEventListener("pointerup", this.#b), this.#t.addEventListener("pointercancel", this.#b), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#U(s[0])), this.#E.observe(this.#s), this.#D();
+    }, this.#t.addEventListener("pointerdown", this.#V), this.#t.addEventListener("pointermove", this.#L), this.#t.addEventListener("pointerup", this.#b), this.#t.addEventListener("pointercancel", this.#b), this.#t.addEventListener("pointerleave", this.#N), 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();
   }
@@ -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.#M), this.#e.off("tickFrame", this.#$), this.#t.removeEventListener("pointerdown", this.#V), this.#t.removeEventListener("pointermove", this.#L), this.#t.removeEventListener("pointerup", this.#b), this.#t.removeEventListener("pointercancel", this.#b), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#o.remove();
+    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#V), this.#t.removeEventListener("pointermove", this.#L), this.#t.removeEventListener("pointerup", this.#b), this.#t.removeEventListener("pointercancel", this.#b), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#o.remove();
   }
   /** CSS pixel height of the strip — theme default unless overridden. */
   get height() {
@@ -112,7 +112,7 @@ class G {
   get #i() {
     return Math.max(0, this.#A - this.#e.yAxisWidth);
   }
-  #U(t) {
+  #j(t) {
     if (!t) return;
     const e = t.contentBoxSize?.[0], i = e?.inlineSize ?? t.contentRect.width, s = e?.blockSize ?? t.contentRect.height;
     i <= 0 || s <= 0 || (this.#W(i, s), this.#f());
@@ -169,17 +169,17 @@ class G {
     return this.#g !== null ? this.#e.getVisibleRange() : this.#e.getAnimationState().xRange;
   }
   #S() {
-    return this.#P(), $(this.#u, this.#Y(), this.#y());
+    return this.#P(), M(this.#u, this.#Y(), this.#y());
   }
-  #j() {
+  #H() {
     const t = this.#y(), e = t.to - t.from;
     return e <= 0 || this.#i <= 0 ? 0 : this.#i / e;
   }
-  #H(t) {
+  #U(t) {
     if (t.button !== void 0 && t.button !== 0) return;
     const e = this.#w(t), i = this.#y();
     if (i.to <= i.from) return;
-    const s = this.#S(), n = y(e, s), h = this.#j();
+    const s = this.#S(), n = y(e, s), h = this.#H();
     if (h === 0) return;
     let l = this.#e.getVisibleRange();
     if (n.snapToCenter) {
@@ -216,7 +216,7 @@ class G {
       });
     else {
       const h = e.gesture === "resize-left" ? "left" : "right";
-      n = M({
+      n = $({
         edge: h,
         startVisible: e.startVisible,
         deltaPx: i,

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;
 }
-class m {
+let m = class {
   #e = [];
   #r = [];
   #t = /* @__PURE__ */ new Map();
@@ -104,7 +104,7 @@ class m {
   reset() {
     this.#e = [], this.#r = [], this.#t.clear(), this.#s = !1;
   }
-}
+};
 export {
   m as AxisTickTracker
 };

package/dist/core/dist/scales/x-scale.js

@@ -1,13 +1,14 @@
-import { formatTime as m, niceTimeIntervals as c } from "../utils/time.js";
-import { AxisTickTracker as f } from "./tick-tracker.js";
-const o = 50, v = 80;
-class p {
+import { crispCenterOffset as m } from "../utils/pixel-grid.js";
+import { formatTime as c, niceTimeIntervals as f } from "../utils/time.js";
+import { AxisTickTracker as v } from "./tick-tracker.js";
+const o = 50, d = 80;
+class b {
   /**
    * Shared fade state for time ticks. Grid lines (canvas) and DOM tick labels
    * read opacity from the same tracker, so a tick fading in/out looks
    * identical on both surfaces.
    */
-  tickTracker = new f();
+  tickTracker = new v();
   from = 0;
   to = 0;
   width = 1;
@@ -37,17 +38,17 @@ class p {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? v;
+    return this.minSpacingValue ?? d;
   }
-  update(t, e, n, r) {
-    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, r !== void 0 && r > 0) {
-      const a = h(r);
-      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = r;
+  update(t, e, n, l) {
+    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, l !== void 0 && l > 0) {
+      const a = h(l);
+      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = l;
     }
     this.resolveInterval();
   }
   setLabelCount(t) {
-    this.labelCountHintValue = d(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveInterval();
   }
   setMinSpacing(t) {
     this.minSpacingValue = I(t), this.resetHysteresis(), this.resolveInterval();
@@ -88,7 +89,7 @@ class p {
    * `formatTime`, applying the installed locale/timezone.
    */
   formatX(t, e) {
-    return this.customFormat ? this.customFormat(t, e) : m(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
+    return this.customFormat ? this.customFormat(t, e) : c(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastWant = null;
@@ -96,8 +97,22 @@ class p {
   timeToX(t) {
     return this.to <= this.from ? 0 : (t - this.from) / (this.to - this.from) * this.width;
   }
+  /** X in physical (bitmap) pixels, snapped to the pixel grid — for
+   *  axis-aligned edges that have to stay crisp. */
   timeToBitmapX(t) {
-    return Math.round(this.timeToX(t) * this.pixelRatio);
+    return Math.round(this.timeToBitmapXExact(t));
+  }
+  /** Same in physical pixels, off the grid — see {@link YScale.valueToBitmapYExact}. */
+  timeToBitmapXExact(t) {
+    return this.timeToX(t) * this.pixelRatio;
+  }
+  /**
+   * X position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `time`. DOM axis labels position off this instead of raw {@link timeToX}
+   * so text and gridline share one pixel grid.
+   */
+  timeToSnappedX(t) {
+    return (this.timeToBitmapX(t) + m(this.pixelRatio)) / this.pixelRatio;
   }
   xToTime(t) {
     return this.to <= this.from ? this.from : this.from + t / this.width * (this.to - this.from);
@@ -119,16 +134,16 @@ class p {
   niceTickValues(t) {
     if (this.to <= this.from) return { ticks: [], tickInterval: 0 };
     if (this.customTickGenerator) {
-      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), l = i.length >= 2 ? i[1] - i[0] : t;
-      return { ticks: i, tickInterval: l };
+      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), r = i.length >= 2 ? i[1] - i[0] : t;
+      return { ticks: i, tickInterval: r };
     }
     if (this.dataInterval !== t) {
       const i = h(t);
       this.lastBucketKey !== null && this.lastBucketKey !== i && this.resetHysteresis(), this.lastBucketKey = i, this.dataInterval = t, this.resolveInterval();
     }
     if (this.resolvedInterval == null) return { ticks: [], tickInterval: 0 };
-    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, r = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
-    for (let i = 0; i < r; i++) a.push(n + i * e);
+    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, l = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
+    for (let i = 0; i < l; i++) a.push(n + i * e);
     return { ticks: a, tickInterval: e };
   }
   getRange() {
@@ -147,31 +162,31 @@ class p {
       this.resolvedInterval = null;
       return;
     }
-    const t = c(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
-    let r;
+    const t = f(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
+    let l;
     if (this.labelCountHint != null) {
-      const l = Math.max(1, this.labelCountHint);
-      r = Math.max(e / l, n);
+      const r = Math.max(1, this.labelCountHint);
+      l = Math.max(e / r, n);
     } else
-      r = n;
+      l = n;
     if (this.lastInterval != null && this.lastWant != null && t.includes(this.lastInterval)) {
-      const l = r >= this.lastWant * 0.8 && r <= this.lastWant * 1.25, u = this.lastInterval >= n;
-      if (l && u) {
+      const r = l >= this.lastWant * 0.8 && l <= this.lastWant * 1.25, u = this.lastInterval >= n;
+      if (r && u) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
     let a = t[t.length - 1], i = t.length - 1;
-    for (let l = 0; l < t.length; l++)
-      if (t[l] >= r) {
-        a = t[l], i = l;
+    for (let r = 0; r < t.length; r++)
+      if (t[r] >= l) {
+        a = t[r], i = r;
         break;
       }
     if (this.labelCountHint != null && i > 0 && this.countTicks(a) < this.labelCountHint) {
-      const l = t[i - 1];
-      l >= n && (a = l);
+      const r = t[i - 1];
+      r >= n && (a = r);
     }
-    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = r;
+    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = l;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
@@ -182,12 +197,12 @@ class p {
 function h(s) {
   return s < 6e4 ? 0 : s < 36e5 ? 1 : s < 864e5 ? 2 : 3;
 }
-function d(s) {
+function p(s) {
   return typeof s == "number" && Number.isFinite(s) && s >= 2 ? Math.floor(s) : null;
 }
 function I(s) {
   return typeof s == "number" && Number.isFinite(s) && s > 0 ? s : null;
 }
 export {
-  p as XScale
+  b as XScale
 };

package/dist/core/dist/scales/y-scale.js

@@ -1,19 +1,20 @@
 import { formatCompact as o } from "../utils/format.js";
-import { AxisTickTracker as u } from "./tick-tracker.js";
-function m(e) {
+import { crispCenterOffset as u } from "../utils/pixel-grid.js";
+import { AxisTickTracker as m } from "./tick-tracker.js";
+function c(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10) * t;
 }
-function c(e) {
+function v(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i >= 5 ? 5 : i >= 2 ? 2 : 1) * t;
 }
-const r = 50, v = 50;
-class M {
+const l = 50, f = 50;
+class T {
   /** Shared fade state for Y ticks; see {@link TimeScale.tickTracker}. */
-  tickTracker = new u();
+  tickTracker = new m();
   min = 0;
   max = 0;
   height = 1;
@@ -41,7 +42,7 @@ class M {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? v;
+    return this.minSpacingValue ?? f;
   }
   /** Recalculate the scale with a new Y range, chart height, and device pixel ratio. */
   update(t, i, a) {
@@ -49,11 +50,11 @@ class M {
   }
   /** Desired label count. Invalid values (NaN, <2, Infinity) clear the hint. */
   setLabelCount(t) {
-    this.labelCountHintValue = f(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = x(t), this.resetHysteresis(), this.resolveInterval();
   }
   /** Minimum pixel gap between adjacent labels. */
   setMinSpacing(t) {
-    this.minSpacingValue = g(t), this.resetHysteresis(), this.resolveInterval();
+    this.minSpacingValue = p(t), this.resetHysteresis(), this.resolveInterval();
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastRawInterval = null;
@@ -79,9 +80,26 @@ class M {
     const i = this.max - this.min;
     return i === 0 ? this.height / 2 : (1 - (t - this.min) / i) * this.height;
   }
-  /** Convert a value to a Y position in physical (bitmap) pixels. */
+  /** Convert a value to a Y position in physical (bitmap) pixels, snapped to
+   *  the pixel grid — for axis-aligned edges that have to stay crisp. */
   valueToBitmapY(t) {
-    return Math.round(this.valueToY(t) * this.pixelRatio);
+    return Math.round(this.valueToBitmapYExact(t));
+  }
+  /**
+   * Same in physical pixels, off the grid. Anti-aliased geometry reads this
+   * one: snapping buys a diagonal stroke no sharpness, and during a slow
+   * animation it quantises the motion into whole-pixel jumps.
+   */
+  valueToBitmapYExact(t) {
+    return this.valueToY(t) * this.pixelRatio;
+  }
+  /**
+   * Y position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `value`. DOM axis labels position off this instead of raw {@link valueToY}
+   * so text and gridline share one pixel grid.
+   */
+  valueToSnappedY(t) {
+    return (this.valueToBitmapY(t) + u(this.pixelRatio)) / this.pixelRatio;
   }
   /** Convert a Y position in CSS pixels back to a value. */
   yToValue(t) {
@@ -93,9 +111,9 @@ class M {
    * chart height. Pure read — resolution happens in `update()`.
    */
   niceTickValues() {
-    if (this.customTickGenerator) return this.customTickGenerator({ min: this.min, max: this.max }).slice(0, r);
+    if (this.customTickGenerator) return this.customTickGenerator({ min: this.min, max: this.max }).slice(0, l);
     if (this.resolvedInterval == null) return [];
-    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, a = Math.max(0, Math.min(r, Math.floor((this.max - i) / t) + 1)), s = [];
+    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, a = Math.max(0, Math.min(l, Math.floor((this.max - i) / t) + 1)), s = [];
     for (let n = 0; n < a; n++) s.push(i + n * t);
     return s;
   }
@@ -137,16 +155,16 @@ class M {
     const t = this.max - this.min, i = t * this.minLabelSpacing / this.height, a = this.labelCountHint != null ? Math.max(1, this.labelCountHint) : Math.max(1, Math.floor(this.height / this.minLabelSpacing));
     let s = t / a;
     if (s < i && (s = i), this.lastInterval != null && this.lastRawInterval != null) {
-      const l = s >= this.lastRawInterval * 0.8 && s <= this.lastRawInterval * 1.25, h = this.lastInterval >= i;
-      if (l && h) {
+      const r = s >= this.lastRawInterval * 0.8 && s <= this.lastRawInterval * 1.25, h = this.lastInterval >= i;
+      if (r && h) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
-    let n = m(s);
+    let n = c(s);
     if (this.labelCountHint != null && this.countTicks(n) < this.labelCountHint) {
-      const l = c(s);
-      l >= i && l > 0 && (n = l);
+      const r = v(s);
+      r >= i && r > 0 && (n = r);
     }
     this.resolvedInterval = n, this.lastInterval = n, this.lastRawInterval = s;
   }
@@ -156,12 +174,12 @@ class M {
     return Math.max(0, Math.floor((this.max - i) / t) + 1);
   }
 }
-function f(e) {
+function x(e) {
   return typeof e == "number" && Number.isFinite(e) && e >= 2 ? Math.floor(e) : null;
 }
-function g(e) {
+function p(e) {
   return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : null;
 }
 export {
-  M as YScale
+  T as YScale
 };

package/dist/core/dist/series/bar.js

@@ -1,7 +1,7 @@
 import { DEFAULT_HISTORY_REVEAL as _, DEFAULT_BAR_INTRO as C, DEFAULT_BAR_SMOOTH as F, DEFAULT_BAR_ENTRY as N } from "../animation/config.js";
 import { growIntro as Q } from "./bar-intro.js";
-import { BaseMultiLayerSeries as $ } from "./base-multi-layer.js";
-import { resolveBarPainter as Z } from "./painters/resolve.js";
+import { BaseMultiLayerSeries as Z } from "./base-multi-layer.js";
+import { resolveBarPainter as $ } from "./painters/resolve.js";
 import { fadeIntro as q } from "./wave-intro.js";
 const U = 2, G = {
   // Single fallback resolver; the definition's `create` swaps in `theme.bar.color`.
@@ -15,7 +15,7 @@ const U = 2, G = {
   introMs: C,
   historyRevealMs: _
 };
-function I(y) {
+function O(y) {
   return {
     ...y,
     entryMs: y.entryMs === !1 ? 0 : y.entryMs ?? N,
@@ -29,7 +29,7 @@ const J = Q(), K = q(), tt = {
   bottom: { tl: !1, tr: !1, br: !0, bl: !0 },
   none: { tl: !1, tr: !1, br: !1, bl: !1 }
 };
-class et extends $ {
+class et extends Z {
   kind = "bar";
   /** Resolved drawing context for the in-flight render pass. Set at the top of
    *  {@link render}, read by {@link drawAnimatedBar}. */
@@ -43,10 +43,10 @@ class et extends $ {
   /** Per-frame history-reveal directives; `null` when no reveal is in flight. */
   #t = null;
   constructor(e, t) {
-    super(e), this.options = I({ ...G, ...t });
+    super(e), this.options = O({ ...G, ...t });
   }
   updateOptions(e) {
-    this.options = I({ ...this.options, ...e });
+    this.options = O({ ...this.options, ...e });
   }
   isEntryEnabled() {
     return (this.options.entryAnimation ?? "fade-grow") !== "none";
@@ -122,7 +122,7 @@ class et extends $ {
     this.tickAnimations(performance.now());
     const { scope: t, timeScale: o, yScale: n } = e;
     if (this.#o = {
-      painter: Z(this.options.barPainter),
+      painter: $(this.options.barPainter),
       env: {
         ctx: t.context,
         theme: e.theme,
@@ -188,7 +188,7 @@ class et extends $ {
       const p = M.getVisibleData(b.from, b.to).length;
       if (p > l && (l = p), l > 2) break;
     }
-    const u = o.barWidthBitmap(a), x = Math.round(30 * v), R = l <= 2 ? Math.min(x, u) : u, r = Math.max(1, Math.round(R * this.options.barWidthRatio) - 2), W = Math.floor(r / 2), H = this.options.anchor === "right" ? r : W, T = n.getRange().min < 0, f = T ? n.valueToBitmapY(0) : t.bitmapSize.height;
+    const u = o.barWidthBitmap(a), x = Math.round(30 * v), R = l <= 2 ? Math.min(x, u) : u, r = Math.max(1, Math.round(R * this.options.barWidthRatio) - 2), W = Math.floor(r / 2), k = this.options.anchor === "right" ? r : W, T = n.getRange().min < 0, f = T ? n.valueToBitmapY(0) : t.bitmapSize.height;
     if (this.stores.length === 1) {
       if (!this.stores[0].isVisible()) return;
       const M = this.stores[0].getVisibleData(b.from, b.to);
@@ -204,7 +204,7 @@ class et extends $ {
             baselineY: f,
             topY: g,
             barHeight: c,
-            x: h - H,
+            x: h - k,
             barWidth: r,
             color: s,
             roundEdge: "top",
@@ -219,7 +219,7 @@ class et extends $ {
             baselineY: f,
             topY: f,
             barHeight: c,
-            x: h - H,
+            x: h - k,
             barWidth: r,
             color: s,
             roundEdge: "bottom",
@@ -256,22 +256,22 @@ class et extends $ {
         for (let h = 0; h < P.length; h++) {
           const { layer: s, value: g, colorValue: c } = P[h], S = this.resolveLayerColor(s, c), E = this.entranceProgress(s, d);
           if (g >= 0) {
-            const k = n.valueToBitmapY(g), V = Math.max(1, f - k);
+            const H = n.valueToBitmapY(g), V = Math.max(1, f - H);
             this.drawAnimatedBar({
               context: m,
               time: d,
               progress: E,
               baselineY: f,
-              topY: k,
+              topY: H,
               barHeight: V,
-              x: B - H,
+              x: B - k,
               barWidth: r,
               color: S,
               roundEdge: "top",
               isProjected: i
             });
           } else {
-            const k = n.valueToBitmapY(g), V = Math.max(1, k - f);
+            const H = n.valueToBitmapY(g), V = Math.max(1, H - f);
             this.drawAnimatedBar({
               context: m,
               time: d,
@@ -279,7 +279,7 @@ class et extends $ {
               baselineY: f,
               topY: f,
               barHeight: V,
-              x: B - H,
+              x: B - k,
               barWidth: r,
               color: S,
               roundEdge: "bottom",
@@ -304,7 +304,7 @@ class et extends $ {
       const h = i.getVisibleData(l.from, l.to).length;
       if (h > u && (u = h), u > 2) break;
     }
-    const x = n.barWidthBitmap(m), R = Math.round(30 * b), r = u <= 2 ? Math.min(R, x) : x, W = Math.max(1, Math.round(r * this.options.barWidthRatio) - 2), H = Math.floor(W / 2), T = this.options.anchor === "right" ? W : H, f = this.stores.map(
+    const x = n.barWidthBitmap(m), R = Math.round(30 * b), r = u <= 2 ? Math.min(R, x) : x, W = Math.max(1, Math.round(r * this.options.barWidthRatio) - 2), k = Math.floor(W / 2), T = this.options.anchor === "right" ? W : k, f = this.stores.map(
       (i, h) => this.getLayerAlpha(h) > 0 ? i.getVisibleData(l.from, l.to) : []
     );
     if (f.every((i) => i.length === 0)) return;
@@ -332,10 +332,10 @@ class et extends $ {
         const c = g[i];
         if (c === 0) continue;
         const S = n.timeToBitmapX(s);
-        let E = 0, k = 0;
+        let E = 0, H = 0;
         for (let Y = 0; Y < i; Y++) {
           const w = g[Y];
-          w > 0 ? E += w : k += w;
+          w > 0 ? E += w : H += w;
         }
         const V = this.entranceProgress(i, s), X = this.isProjectedTime(s), z = c > 0 ? P.get(s) === i ? "top" : "none" : B.get(s) === i ? "bottom" : "none";
         if (t) {
@@ -343,14 +343,14 @@ class et extends $ {
           for (const A of g)
             A > 0 ? Y += A : w += A;
           if (c > 0 && Y > 0) {
-            const A = E / Y * 100, D = (E + c) / Y * 100, j = a.valueToBitmapY(D), L = a.valueToBitmapY(A), O = Math.max(1, L - j);
+            const A = E / Y * 100, D = (E + c) / Y * 100, j = a.valueToBitmapY(D), L = a.valueToBitmapY(A), I = Math.max(1, L - j);
             this.drawAnimatedBar({
               context: v,
               time: s,
               progress: V,
               baselineY: L,
               topY: j,
-              barHeight: O,
+              barHeight: I,
               x: S - T,
               barWidth: W,
               color: h,
@@ -359,14 +359,14 @@ class et extends $ {
               growBaked: !0
             });
           } else if (c < 0 && w < 0) {
-            const A = k / w * -100, D = (k + c) / w * -100, j = a.valueToBitmapY(A), L = a.valueToBitmapY(D), O = Math.max(1, L - j);
+            const A = H / w * -100, D = (H + c) / w * -100, j = a.valueToBitmapY(A), L = a.valueToBitmapY(D), I = Math.max(1, L - j);
             this.drawAnimatedBar({
               context: v,
               time: s,
               progress: V,
               baselineY: j,
               topY: j,
-              barHeight: O,
+              barHeight: I,
               x: S - T,
               barWidth: W,
               color: h,
@@ -392,7 +392,7 @@ class et extends $ {
             growBaked: !0
           });
         } else {
-          const Y = a.valueToBitmapY(k), w = a.valueToBitmapY(k + c), A = Math.max(1, w - Y);
+          const Y = a.valueToBitmapY(H), w = a.valueToBitmapY(H + c), A = Math.max(1, w - Y);
           this.drawAnimatedBar({
             context: v,
             time: s,
@@ -423,7 +423,7 @@ class et extends $ {
     const { context: o, baselineY: n, topY: a, barHeight: m, x: v, barWidth: b, color: l, roundEdge: u } = e, x = e.isProjected ? 1 : e.progress, R = this.options.entryAnimation ?? "fade-grow";
     let r = x >= 1 || R === "none" ? { x: v, topY: a, barWidth: b, barHeight: m, alpha: 1 } : this.applyBarTransform(e, x);
     if (!e.isProjected) {
-      const H = this.#t?.element, T = H !== void 0 ? this.#r(e.time) : null, f = T !== null ? H : this.#e?.element, M = T ?? (f !== void 0 ? this.#a(e.time) : null);
+      const k = this.#t?.element, T = k !== void 0 ? this.#r(e.time) : null, f = T !== null ? k : this.#e?.element, M = T ?? (f !== void 0 ? this.#a(e.time) : null);
       if (f !== void 0 && M !== null) {
         const p = f({
           ...M,