@wick-charts/vue 0.6.4 → 0.7.0

package/dist/core/dist/series/band.js

@@ -1,12 +1,12 @@
 import { Animator as I } from "../animation/animator.js";
-import { DEFAULT_HISTORY_REVEAL as F, DEFAULT_BAND_INTRO as z, DEFAULT_BAND_SMOOTH as _, DEFAULT_BAND_ENTRY as O } from "../animation/config.js";
-import { easeOutCubic as $ } from "../animation/easing.js";
-import { IntroWave as D } from "../animation/intro-wave.js";
-import { ScalarSpring as N } from "../animation/scalar-spring.js";
-import { decimateBandData as Y } from "../data/decimation.js";
+import { DEFAULT_HISTORY_REVEAL as z, DEFAULT_BAND_INTRO as F, DEFAULT_BAND_SMOOTH as O, DEFAULT_BAND_ENTRY as _ } from "../animation/config.js";
+import { easeOutCubic as Y } from "../animation/easing.js";
+import { IntroWave as N } from "../animation/intro-wave.js";
+import { ScalarSpring as S } from "../animation/scalar-spring.js";
+import { decimateBandData as $ } from "../data/decimation.js";
 import { TimeSeriesStore as H } from "../data/store.js";
-import { resolveColor as U, hexToRgba as A } from "../utils/color.js";
-import { lerp as P } from "../utils/math.js";
+import { resolveColor as U, hexToRgba as T } from "../utils/color.js";
+import { lerp as L } from "../utils/math.js";
 import { normalizeTime as W } from "../utils/time.js";
 import { unfoldIntro as J, scaleMean as j, backfillSweepIntro as G } from "./line-intro.js";
 import { buildCurveSegments as B, replaySegmentsForward as R, replaySegmentsReversed as Q } from "./painters/canvas-path.js";
@@ -16,62 +16,62 @@ const Z = {
   stroke: { visible: !0, width: 1, color: void 0 },
   curve: "straight",
   entryAnimation: "grow",
-  entryMs: O,
-  smoothMs: _,
-  introMs: z,
-  historyRevealMs: F,
+  entryMs: _,
+  smoothMs: O,
+  introMs: F,
+  historyRevealMs: z,
   introAnimation: void 0,
   historyReveal: void 0
 }, q = 0.4, K = 0.04, E = 0.6, tt = G();
-function S(l, t) {
-  return l === !1 ? 0 : l ?? t;
+function k(a, t) {
+  return a === !1 ? 0 : a ?? t;
 }
-function V(l, t) {
+function V(a, t) {
   const i = t.stroke;
   return {
-    colors: t.colors ?? l.colors,
-    fill: "fill" in t ? t.fill : l.fill,
+    colors: t.colors ?? a.colors,
+    fill: "fill" in t ? t.fill : a.fill,
     stroke: {
-      visible: i?.visible ?? l.stroke.visible,
-      width: i?.width ?? l.stroke.width,
-      color: i !== void 0 && "color" in i ? i.color : l.stroke.color
+      visible: i?.visible ?? a.stroke.visible,
+      width: i?.width ?? a.stroke.width,
+      color: i !== void 0 && "color" in i ? i.color : a.stroke.color
     },
-    curve: t.curve ?? l.curve,
-    entryAnimation: t.entryAnimation ?? l.entryAnimation,
-    entryMs: S(t.entryMs, l.entryMs),
-    smoothMs: S(t.smoothMs, l.smoothMs),
-    introMs: S(t.introMs, l.introMs),
-    historyRevealMs: S(t.historyRevealMs, l.historyRevealMs),
-    introAnimation: "introAnimation" in t ? t.introAnimation : l.introAnimation,
-    historyReveal: "historyReveal" in t ? t.historyReveal : l.historyReveal
+    curve: t.curve ?? a.curve,
+    entryAnimation: t.entryAnimation ?? a.entryAnimation,
+    entryMs: k(t.entryMs, a.entryMs),
+    smoothMs: k(t.smoothMs, a.smoothMs),
+    introMs: k(t.introMs, a.introMs),
+    historyRevealMs: k(t.historyRevealMs, a.historyRevealMs),
+    introAnimation: "introAnimation" in t ? t.introAnimation : a.introAnimation,
+    historyReveal: "historyReveal" in t ? t.historyReveal : a.historyReveal
   };
 }
-const et = (l, t, i) => l + (t - l) * i;
-function L(l) {
-  return l <= 0 ? 0 : l >= 1 ? 1 : l;
+const et = (a, t, i) => a + (t - a) * i;
+function P(a) {
+  return a <= 0 ? 0 : a >= 1 ? 1 : a;
 }
-function T(l) {
-  const t = W(l.time), { low: i, high: e } = l;
-  return !Number.isFinite(i) || !Number.isFinite(e) ? { ...l, time: t, low: Number.NaN, high: Number.NaN } : { ...l, time: t, low: Math.min(i, e), high: Math.max(i, e) };
+function A(a) {
+  const t = W(a.time), { low: i, high: e } = a;
+  return !Number.isFinite(i) || !Number.isFinite(e) ? { ...a, time: t, low: Number.NaN, high: Number.NaN } : { ...a, time: t, low: Math.min(i, e), high: Math.max(i, e) };
 }
-function b(l) {
-  return !Number.isFinite(l.low);
+function b(a) {
+  return !Number.isFinite(a.low);
 }
-function x(l) {
-  return { low: l.low, high: l.high };
+function x(a) {
+  return { low: a.low, high: a.high };
 }
-function it(l) {
-  const { upperSegs: t, lowerSegs: i } = l;
+function it(a) {
+  const { upperSegs: t, lowerSegs: i } = a;
   for (let e = 0; e < t.length; e++) {
     const o = t[e], s = i[e];
     if (o.kind !== "bezier" || s.kind !== "bezier") continue;
-    const n = C(o.cp1y, s.cp1y), a = C(o.cp2y, s.cp2y);
-    t[e] = { ...o, cp1y: n.top, cp2y: a.top }, i[e] = { ...s, cp1y: n.bottom, cp2y: a.bottom };
+    const n = C(o.cp1y, s.cp1y), l = C(o.cp2y, s.cp2y);
+    t[e] = { ...o, cp1y: n.top, cp2y: l.top }, i[e] = { ...s, cp1y: n.bottom, cp2y: l.bottom };
   }
 }
-function C(l, t) {
-  if (l <= t) return { top: l, bottom: t };
-  const i = (l + t) / 2;
+function C(a, t) {
+  if (a <= t) return { top: a, bottom: t };
+  const i = (a + t) / 2;
   return { top: i, bottom: i };
 }
 class ot {
@@ -88,17 +88,19 @@ class ot {
    * new point lands.
    */
   pinned = null;
+  /** Per-point eases started by `morphData`, keyed by point time; pruned on settle. */
+  morphs = /* @__PURE__ */ new Map();
 }
 class st {
   kind = "band";
   #e;
   #t;
   /** Per-layer colors carried in `data` (sparse); kept apart so a theme swap leaves them alone. */
-  #p = [];
+  #f = [];
   /** Initial-load reveal, armed once on the empty → non-empty seed and shared by every layer. */
-  #i = new D();
+  #i = new N();
   /** History-prepend reveal, armed by {@link prependPoints}. */
-  #o = new D();
+  #o = new N();
   /** Prepended span: `from` = deepest new point, `to` = the pre-prepend first point. */
   #s = null;
   #a = null;
@@ -119,23 +121,61 @@ class st {
   setData(t, i = 0) {
     const e = this.#t[i];
     if (!e) return;
-    const o = this.#t.some((a) => a.store.length > 0), s = (t ?? []).map(T);
+    const o = this.#t.some((l) => l.store.length > 0), s = (t ?? []).map(A);
     e.store.setData(s), !o && s.length > 0 && this.#i.arm(this.#e.introMs);
     const n = e.store.last();
-    e.displayedLast = n ? x(n) : null, e.chase = null, e.pinned = null, e.entries.clear(), this.#o.finish(), this.#s = null;
+    e.displayedLast = n ? x(n) : null, e.chase = null, e.pinned = null, e.morphs.clear(), e.entries.clear(), this.#o.finish(), this.#s = null;
+  }
+  /**
+   * Replace a layer like {@link setData}, but ease each sample that keeps its
+   * `time` from the edges on screen to its new ones over `smoothMs`; a sample
+   * with a new `time` plays its entrance.
+   */
+  morphData(t, i = 0) {
+    const e = this.#t[i];
+    if (!e) return;
+    if (!this.#t.some((h) => h.store.length > 0)) {
+      this.setData(t, i);
+      return;
+    }
+    const o = /* @__PURE__ */ new Map();
+    for (const h of e.store.getAll())
+      o.set(h.time, this.#u(e, h));
+    const s = (t ?? []).map(A);
+    e.store.setData(s);
+    const n = this.#e.smoothMs, l = this.#e.entryAnimation !== "none" && this.#e.entryMs > 0, r = /* @__PURE__ */ new Map();
+    for (const h of s) {
+      const u = o.get(h.time);
+      if (u === void 0) {
+        l && e.entries.set(h.time, performance.now());
+        continue;
+      }
+      if (u.low === h.low && u.high === h.high || n <= 0 || b(h) || !Number.isFinite(u.low)) continue;
+      const g = e.morphs.get(h.time) ?? {
+        low: new S(u.low),
+        high: new S(u.high)
+      };
+      g.low.target !== h.low && g.low.retarget(h.low, { settleMs: n }), g.high.target !== h.high && g.high.retarget(h.high, { settleMs: n }), r.set(h.time, g);
+    }
+    const c = new Set(s.map((h) => h.time));
+    for (const h of e.entries.keys())
+      c.has(h) || e.entries.delete(h);
+    e.morphs = r;
+    const p = e.store.last();
+    e.displayedLast = p ? x(p) : null, e.chase = null, e.pinned = null;
   }
   appendPoint(t, i = 0) {
     const e = this.#t[i];
     if (!e) return;
-    const o = T(t), s = e.store.last(), n = e.store.length;
+    const o = A(t), s = e.store.last(), n = e.store.length;
     e.store.append(o);
-    const a = e.store.length > n;
-    e.chase !== null && s !== void 0 && a && (e.pinned = { time: s.time, chase: e.chase }), e.displayedLast = x(o), e.chase = null, this.#e.entryAnimation !== "none" && this.#e.entryMs > 0 && e.entries.set(o.time, performance.now());
+    const l = e.store.length > n;
+    e.chase !== null && s !== void 0 && l && (e.pinned = { time: s.time, chase: e.chase }), e.displayedLast = x(o), e.chase = null, this.#e.entryAnimation !== "none" && this.#e.entryMs > 0 && e.entries.set(o.time, performance.now());
   }
   prependPoints(t, i = 0) {
     const e = this.#t[i];
     if (!e || t.length === 0) return;
-    const o = t.map(T), s = e.store.first()?.time;
+    const o = t.map(A), s = e.store.first()?.time;
     e.store.prepend(o), this.#A(o[0]?.time, s);
   }
   /** While a reveal is in flight only the range grows — a restart would hide half-revealed points again. */
@@ -152,18 +192,20 @@ class st {
   updateLastPoint(t, i = 0) {
     const e = this.#t[i];
     if (!e) return;
-    const o = T(t);
+    const o = A(t), s = e.store.last()?.time;
     e.store.updateLast(o);
-    const s = this.#e.smoothMs;
-    if (s <= 0 || b(o)) {
+    const n = s === void 0 ? void 0 : e.morphs.get(s);
+    s !== void 0 && n !== void 0 && (e.morphs.delete(s), e.displayedLast = { low: n.low.current, high: n.high.current }, e.chase = n);
+    const l = this.#e.smoothMs;
+    if (l <= 0 || b(o)) {
       e.displayedLast = x(o), e.chase = null;
       return;
     }
     if (e.chase === null) {
-      const n = e.displayedLast, a = n !== null && Number.isFinite(n.low) ? n : x(o);
-      e.chase = { low: new N(a.low), high: new N(a.high) };
+      const r = e.displayedLast, c = r !== null && Number.isFinite(r.low) ? r : x(o);
+      e.chase = { low: new S(c.low), high: new S(c.high) };
     }
-    e.chase.low.retarget(o.low, { settleMs: s }), e.chase.high.retarget(o.high, { settleMs: s });
+    e.chase.low.retarget(o.low, { settleMs: l }), e.chase.high.retarget(o.high, { settleMs: l });
   }
   keepLast(t, i = 0) {
     const e = this.#t[i];
@@ -182,19 +224,19 @@ class st {
     return this.#t[t]?.store.isVisible() ?? !0;
   }
   setColorOverrides(t) {
-    this.#p = t;
+    this.#f = t;
   }
   /** Representative color per layer — a value-fn resolves at the layer's last midpoint. */
   getLayerColors() {
     return this.#t.map((t, i) => this.#r(i));
   }
   #r(t) {
-    const i = this.#p[t], e = this.#e.colors, o = i ?? e[t % e.length], s = this.#t[t]?.store.last(), n = s !== void 0 && !b(s) ? (s.low + s.high) / 2 : 0;
+    const i = this.#f[t], e = this.#e.colors, o = i ?? e[t % e.length], s = this.#t[t]?.store.last(), n = s !== void 0 && !b(s) ? (s.low + s.high) / 2 : 0;
     return U(o, n);
   }
   // --- Animation ------------------------------------------------------------
   /** Advance owned animators. Called by both passes; every clock samples `now`, so a second tick is a no-op. */
-  #f(t) {
+  #g(t) {
     this.#i.tick(t), this.#o.tick(t);
     for (const i of this.#t)
       i.alpha.tick(t), this.#S(i, t), this.#T(i, t);
@@ -210,6 +252,10 @@ class st {
       const s = o.chase.low.tick(i), n = o.chase.high.tick(i);
       !s && !n && (t.pinned = null);
     }
+    for (const [s, n] of t.morphs) {
+      const l = n.low.tick(i), r = n.high.tick(i);
+      !l && !r && t.morphs.delete(s);
+    }
   }
   #T(t, i) {
     const e = this.#e.entryMs;
@@ -220,15 +266,15 @@ class st {
     for (const [o, s] of t.entries)
       i - s >= e && t.entries.delete(o);
   }
-  #g(t, i) {
+  #d(t, i) {
     const e = t.entries.get(i), o = this.#e.entryMs;
-    return e === void 0 || o <= 0 ? 1 : L((performance.now() - e) / o);
+    return e === void 0 || o <= 0 ? 1 : P((performance.now() - e) / o);
   }
   /** Trailing points whose entrance is unsettled, oldest first; stops at the first settled one. */
-  #P(t) {
+  #k(t) {
     const i = t.store.getAll(), e = [];
     for (let o = i.length - 1; o >= 1; o--) {
-      const s = this.#g(t, i[o].time);
+      const s = this.#d(t, i[o].time);
       if (s >= 1) break;
       e.unshift({ time: i[o].time, progress: s });
     }
@@ -236,8 +282,10 @@ class st {
   }
   get needsAnimation() {
     if (this.#i.active || this.#o.active) return !0;
-    for (const t of this.#t)
-      if (t.alpha.animating || t.chase !== null || t.pinned !== null || t.entries.size > 0) return !0;
+    for (const t of this.#t) {
+      const i = t.chase !== null || t.pinned !== null || t.morphs.size > 0;
+      if (t.alpha.animating || i || t.entries.size > 0) return !0;
+    }
     return !1;
   }
   getIntroFront() {
@@ -263,24 +311,26 @@ class st {
     return this.#t[t]?.alpha.current ?? 1;
   }
   // --- Geometry -------------------------------------------------------------
-  /** Stored edges with the live chase applied: the last point, or the pinned chase on the point an append displaced. */
-  #d(t, i) {
-    const e = t.store.last();
-    if (e !== void 0 && i.time === e.time) return t.displayedLast ?? x(i);
-    const o = t.pinned;
-    return o !== null && o.time === i.time ? { low: o.chase.low.current, high: o.chase.high.current } : x(i);
+  /** Stored edges with the live chase applied: a morph ease, the last point, or the pinned chase on the point an append displaced. */
+  #u(t, i) {
+    const e = t.morphs.get(i.time);
+    if (e !== void 0) return { low: e.low.current, high: e.high.current };
+    const o = t.store.last();
+    if (o !== void 0 && i.time === o.time) return t.displayedLast ?? x(i);
+    const s = t.pinned;
+    return s !== null && s.time === i.time ? { low: s.chase.low.current, high: s.chase.high.current } : x(i);
   }
   /** The active intro / history value transform for one sample, or `null` when none applies. */
-  #R(t, i, e) {
+  #L(t, i, e) {
     const o = this.#o.active ? this.#n?.value : void 0, s = this.#s;
     if (o !== void 0 && s !== null && e < s.to) {
-      const m = s.to - s.from, f = m > 0 ? L((s.to - e) / m) : 0;
-      return (u) => o({ layerIndex: i, time: e, value: u, position: f });
+      const p = s.to - s.from, h = p > 0 ? P((s.to - e) / p) : 0;
+      return (u) => o({ layerIndex: i, time: e, value: u, position: h });
     }
     const n = this.#i.active ? this.#a?.value : void 0;
     if (n === void 0) return null;
-    const a = t.timeScale.getRange(), r = a.to - a.from, c = r > 0 ? L((e - a.from) / r) : 0;
-    return (m) => n({ layerIndex: i, time: e, value: m, position: c });
+    const l = t.timeScale.getRange(), r = l.to - l.from, c = r > 0 ? P((e - l.from) / r) : 0;
+    return (p) => n({ layerIndex: i, time: e, value: p, position: c });
   }
   /**
    * Where a sample draws this frame, or `null` for a gap (non-finite, or an
@@ -290,10 +340,10 @@ class st {
   #l(t, i, e) {
     const { timeScale: o, yScale: s } = t;
     if (b(e) || !s.isPlottable(e.low) || !s.isPlottable(e.high)) return null;
-    const n = this.#t[i], a = this.#d(n, e), r = this.#R(t, i, e.time), c = r === null ? a.low : r(a.low), m = r === null ? a.high : r(a.high);
-    if (!s.isPlottable(c) || !s.isPlottable(m)) return null;
-    const f = s.valueToBitmapYExact(c), u = s.valueToBitmapYExact(m);
-    return { x: o.timeToBitmapXExact(e.time), top: Math.min(f, u), bottom: Math.max(f, u) };
+    const n = this.#t[i], l = this.#u(n, e), r = this.#L(t, i, e.time), c = r === null ? l.low : r(l.low), p = r === null ? l.high : r(l.high);
+    if (!s.isPlottable(c) || !s.isPlottable(p)) return null;
+    const h = s.valueToBitmapYExact(c), u = s.valueToBitmapYExact(p);
+    return { x: o.timeToBitmapXExact(e.time), top: Math.min(h, u), bottom: Math.max(h, u) };
   }
   /**
    * Rendered vertices of the layer's still-entering tail, keyed by time. Each
@@ -302,29 +352,29 @@ class st {
    */
   #v(t, i) {
     if (this.#e.entryAnimation !== "grow") return null;
-    const e = this.#t[i], o = this.#P(e);
+    const e = this.#t[i], o = this.#k(e);
     if (o.length === 0) return null;
     const s = e.store.getAll(), n = s.length - 1 - o.length;
     if (n < 0) return null;
-    const a = this.#l(t, i, s[n]);
-    if (a === null) return null;
+    const l = this.#l(t, i, s[n]);
+    if (l === null) return null;
     const r = /* @__PURE__ */ new Map();
-    let c = a;
-    for (let m = 0; m < o.length; m++) {
-      const f = s[n + 1 + m], u = this.#l(t, i, f);
+    let c = l;
+    for (let p = 0; p < o.length; p++) {
+      const h = s[n + 1 + p], u = this.#l(t, i, h);
       if (u === null) return null;
-      const v = $(o[m].progress), y = {
-        x: P(c.x, u.x, v),
-        top: P(c.top, u.top, v),
-        bottom: P(c.bottom, u.bottom, v)
+      const g = Y(o[p].progress), w = {
+        x: L(c.x, u.x, g),
+        top: L(c.top, u.top, g),
+        bottom: L(c.bottom, u.bottom, g)
       };
-      r.set(f.time, y), c = y;
+      r.set(h.time, w), c = w;
     }
     return r;
   }
   // --- Rendering ------------------------------------------------------------
   render(t) {
-    this.#f(performance.now());
+    this.#g(performance.now());
     const { context: i } = t.scope;
     this.#n = null;
     const e = this.#s;
@@ -333,137 +383,137 @@ class st {
       n !== "none" && (this.#n = n(this.#C(t, e)));
     }
     const o = this.#n;
-    this.#y(t, o?.ghostAlpha ?? 0);
+    this.#w(t, o?.ghostAlpha ?? 0);
     const s = this.#D(t, o, e);
-    this.#i.active ? this.#L(t) : (this.#a = null, this.#u(t)), s && i.restore();
+    this.#i.active ? this.#R(t) : (this.#a = null, this.#m(t)), s && i.restore();
   }
-  #L(t) {
-    const i = (this.#e.introAnimation ?? this.#k())(this.#V(t));
-    this.#a = i, this.#y(t, i.ghostAlpha ?? 0);
-    const { context: e } = t.scope, { width: o, height: s } = t.scope.bitmapSize, n = i.clip, a = n !== void 0 && (n.fromX !== void 0 || n.toX !== void 0);
-    if (a) {
+  #R(t) {
+    const i = (this.#e.introAnimation ?? this.#P())(this.#V(t));
+    this.#a = i, this.#w(t, i.ghostAlpha ?? 0);
+    const { context: e } = t.scope, { width: o, height: s } = t.scope.bitmapSize, n = i.clip, l = n !== void 0 && (n.fromX !== void 0 || n.toX !== void 0);
+    if (l) {
       const r = n.fromX ?? 0, c = n.toX ?? o;
       e.save(), e.beginPath(), e.rect(r, 0, Math.max(0, c - r), s), e.clip();
     }
-    this.#u(t), a && e.restore();
+    this.#m(t), l && e.restore();
   }
-  #k() {
+  #P() {
     return this.#h === null && (this.#h = J()), this.#h;
   }
   /** Edges-only skeleton under the main pass, so a clip reveal never reads as an empty chart. */
-  #y(t, i) {
+  #w(t, i) {
     if (i <= 0) return;
     const { context: e } = t.scope;
-    e.save(), e.globalAlpha *= i, this.#c = !0, this.#u(t), this.#c = !1, e.restore();
+    e.save(), e.globalAlpha *= i, this.#c = !0, this.#m(t), this.#c = !1, e.restore();
   }
   /** History clip, mapped from reveal space (`x = 0` at the data boundary) to bitmap space. */
   #D(t, i, e) {
     const o = i?.clip;
     if (o === void 0 || e === null || o.fromX === void 0 && o.toX === void 0) return !1;
-    const { context: s } = t.scope, { width: n, height: a } = t.scope.bitmapSize, r = t.timeScale.timeToBitmapXExact(e.to), c = Math.abs(r - t.timeScale.timeToBitmapXExact(e.from)), m = Math.max(2, this.#e.stroke.width * t.scope.horizontalPixelRatio), f = o.fromX ?? 0, u = o.toX ?? c;
-    return s.save(), s.beginPath(), s.rect(r - u - m, 0, Math.max(0, u - f + m), a), s.rect(r, 0, Math.max(0, n - r), a), s.clip(), !0;
+    const { context: s } = t.scope, { width: n, height: l } = t.scope.bitmapSize, r = t.timeScale.timeToBitmapXExact(e.to), c = Math.abs(r - t.timeScale.timeToBitmapXExact(e.from)), p = Math.max(2, this.#e.stroke.width * t.scope.horizontalPixelRatio), h = o.fromX ?? 0, u = o.toX ?? c;
+    return s.save(), s.beginPath(), s.rect(r - u - p, 0, Math.max(0, u - h + p), l), s.rect(r, 0, Math.max(0, n - r), l), s.clip(), !0;
   }
-  #u(t) {
+  #m(t) {
     for (let i = 0; i < this.#t.length; i++)
       this.#N(t, i);
   }
   #N(t, i) {
     const e = this.#t[i], o = e.alpha.current;
     if (o <= 0) return;
-    const { scope: s, timeScale: n } = t, a = n.getRange();
-    let r = e.store.getVisibleData(a.from, a.to);
-    if (r.length > s.mediaSize.width * 2 && (r = Y(r, Math.round(s.mediaSize.width * 1.5))), r.length === 0) return;
-    const c = r[r.length - 1], m = this.#w(e, r), f = m ? this.#v(t, i) : null, u = this.#B(t, { layerIndex: i, data: r, grown: f });
+    const { scope: s, timeScale: n } = t, l = n.getRange();
+    let r = e.store.getVisibleData(l.from, l.to);
+    if (r.length > s.mediaSize.width * 2 && (r = $(r, Math.round(s.mediaSize.width * 1.5))), r.length === 0) return;
+    const c = r[r.length - 1], p = this.#y(e, r), h = p ? this.#v(t, i) : null, u = this.#B(t, { layerIndex: i, data: r, grown: h });
     if (u.length === 0) return;
-    const v = m ? this.#g(e, c.time) : 1, y = m && !b(c) && this.#e.entryAnimation === "fade" && v < 1 ? nt(u) : null, { context: h } = s;
-    h.save(), o < 1 && (h.globalAlpha *= o);
-    const p = this.#r(i), d = { ctx: t, runs: u, color: p, growing: f !== null };
-    if (y === null)
-      this.#m(d);
+    const g = p ? this.#d(e, c.time) : 1, w = p && !b(c) && this.#e.entryAnimation === "fade" && g < 1 ? nt(u) : null, { context: m } = s;
+    m.save(), o < 1 && (m.globalAlpha *= o);
+    const f = this.#r(i), v = { ctx: t, runs: u, color: f, growing: h !== null };
+    if (w === null)
+      this.#p(v);
     else {
-      const { width: g, height: w } = s.bitmapSize;
-      h.save(), h.beginPath(), h.rect(0, 0, y, w), h.clip(), this.#m(d), h.restore(), h.save(), h.beginPath(), h.rect(y, 0, Math.max(0, g - y), w), h.clip(), h.globalAlpha *= v, this.#m(d), h.restore();
+      const { width: d, height: y } = s.bitmapSize;
+      m.save(), m.beginPath(), m.rect(0, 0, w, y), m.clip(), this.#p(v), m.restore(), m.save(), m.beginPath(), m.rect(w, 0, Math.max(0, d - w), y), m.clip(), m.globalAlpha *= g, this.#p(v), m.restore();
     }
-    h.restore();
+    m.restore();
   }
   /** Split the visible slice into runs of drawable vertices; a gap ends a run. */
   /**
    * Whether a visible slice ends at the live point. Panned into history, the
    * slice's last point is an interior sample, and the live-tail entrance must not apply.
    */
-  #w(t, i) {
+  #y(t, i) {
     const e = t.store.last(), o = i[i.length - 1];
     return e !== void 0 && o !== void 0 && o.time === e.time;
   }
   #B(t, i) {
     const { layerIndex: e, data: o, grown: s } = i, n = [];
-    let a = null;
+    let l = null;
     for (const r of o) {
       const c = s?.get(r.time) ?? this.#l(t, e, r);
       if (c === null) {
-        a = null;
+        l = null;
         continue;
       }
-      a === null && (a = [], n.push(a)), a.push(c);
+      l === null && (l = [], n.push(l)), l.push(c);
     }
     return n;
   }
-  #m(t) {
-    const { ctx: i, runs: e, color: o, growing: s } = t, { context: n, verticalPixelRatio: a } = i.scope, r = this.#e.curve, c = [], m = [];
-    for (let h = 0; h < e.length; h++) {
-      const p = e[h];
-      if (p.length < 2) {
-        m.push(p[0]);
+  #p(t) {
+    const { ctx: i, runs: e, color: o, growing: s } = t, { context: n, verticalPixelRatio: l } = i.scope, r = this.#e.curve, c = [], p = [];
+    for (let m = 0; m < e.length; m++) {
+      const f = e[m];
+      if (f.length < 2) {
+        p.push(f[0]);
         continue;
       }
-      const d = s && h === e.length - 1, g = p.map((M) => ({ x: M.x, y: M.top })), w = p.map((M) => ({ x: M.x, y: M.bottom })), k = {
-        upper: g,
-        lower: w,
-        upperSegs: B(g, r, d),
-        lowerSegs: B(w, r, d)
+      const v = s && m === e.length - 1, d = f.map((M) => ({ x: M.x, y: M.top })), y = f.map((M) => ({ x: M.x, y: M.bottom })), D = {
+        upper: d,
+        lower: y,
+        upperSegs: B(d, r, v),
+        lowerSegs: B(y, r, v)
       };
-      it(k), c.push(k);
+      it(D), c.push(D);
     }
     if (!this.#c && c.length > 0) {
       n.fillStyle = this.#E({ context: n, paths: c, color: o });
-      for (const h of c) {
-        n.beginPath(), n.moveTo(h.upper[0].x, h.upper[0].y), R(n, h.upperSegs);
-        const p = h.lower[h.lower.length - 1];
-        n.lineTo(p.x, p.y), Q(n, h.lower, h.lowerSegs), n.closePath(), n.fill();
+      for (const m of c) {
+        n.beginPath(), n.moveTo(m.upper[0].x, m.upper[0].y), R(n, m.upperSegs);
+        const f = m.lower[m.lower.length - 1];
+        n.lineTo(f.x, f.y), Q(n, m.lower, m.lowerSegs), n.closePath(), n.fill();
       }
     }
-    const f = this.#e.stroke, u = f.color ?? A(o, E), v = Math.max(1, Math.round(f.width * a)), y = f.visible && f.width > 0;
-    if (y && c.length > 0) {
+    const h = this.#e.stroke, u = h.color ?? T(o, E), g = Math.max(1, Math.round(h.width * l)), w = h.visible && h.width > 0;
+    if (w && c.length > 0) {
       n.beginPath();
-      for (const h of c)
-        n.moveTo(h.upper[0].x, h.upper[0].y), R(n, h.upperSegs), n.moveTo(h.lower[0].x, h.lower[0].y), R(n, h.lowerSegs);
-      n.strokeStyle = u, n.lineWidth = v, n.lineJoin = "round", n.lineCap = "round", n.stroke();
+      for (const m of c)
+        n.moveTo(m.upper[0].x, m.upper[0].y), R(n, m.upperSegs), n.moveTo(m.lower[0].x, m.lower[0].y), R(n, m.lowerSegs);
+      n.strokeStyle = u, n.lineWidth = g, n.lineJoin = "round", n.lineCap = "round", n.stroke();
     }
-    if (m.length > 0) {
+    if (p.length > 0) {
       n.beginPath();
-      for (const h of m)
-        n.moveTo(h.x, h.top), n.lineTo(h.x, h.bottom);
-      n.strokeStyle = y ? u : A(o, E), n.lineWidth = v, n.lineCap = "round", n.stroke();
+      for (const m of p)
+        n.moveTo(m.x, m.top), n.lineTo(m.x, m.bottom);
+      n.strokeStyle = w ? u : T(o, E), n.lineWidth = g, n.lineCap = "round", n.stroke();
     }
   }
   /** A gradient fill spans the layer's drawn extent this frame; a degenerate extent paints solid. */
   #E(t) {
     const { context: i, paths: e, color: o } = t, s = this.#e.fill;
     if (typeof s == "string") return s;
-    const [n, a] = s ?? [
-      A(o, q),
-      A(o, K)
+    const [n, l] = s ?? [
+      T(o, q),
+      T(o, K)
     ];
     let r = 1 / 0, c = -1 / 0;
-    for (const f of e) {
-      for (const u of f.upper)
+    for (const h of e) {
+      for (const u of h.upper)
         u.y < r && (r = u.y);
-      for (const u of f.lower)
+      for (const u of h.lower)
         u.y > c && (c = u.y);
     }
     if (!(c > r + 0.5)) return n;
-    const m = i.createLinearGradient(0, r, 0, c);
-    return m.addColorStop(0, n), m.addColorStop(1, a), m;
+    const p = i.createLinearGradient(0, r, 0, c);
+    return p.addColorStop(0, n), p.addColorStop(1, l), p;
   }
   // --- Intro frames ---------------------------------------------------------
   #V(t) {
@@ -488,32 +538,32 @@ class st {
    * `layerMean` is the center the default unfold opens the band out of.
    */
   #b(t, i) {
-    const { timeScale: e, yScale: o, scope: s } = t, { progress: n, range: a, width: r } = i, c = this.#t.length, m = new Array(c), f = new Array(c);
+    const { timeScale: e, yScale: o, scope: s } = t, { progress: n, range: l, width: r } = i, c = this.#t.length, p = new Array(c), h = new Array(c);
     let u;
-    const v = (p) => {
-      const d = m[p];
-      if (d !== void 0) return d;
-      const g = (this.#t[p]?.store.getVisibleData(a.from, a.to) ?? []).map((w) => ({
-        time: w.time,
-        value: b(w) ? Number.NaN : o.lerpValue(w.low, w.high, 0.5)
+    const g = (f) => {
+      const v = p[f];
+      if (v !== void 0) return v;
+      const d = (this.#t[f]?.store.getVisibleData(l.from, l.to) ?? []).map((y) => ({
+        time: y.time,
+        value: b(y) ? Number.NaN : o.lerpValue(y.low, y.high, 0.5)
       }));
-      return m[p] = g, g;
-    }, y = (p) => {
-      const d = f[p];
-      if (d !== void 0) return d;
-      const g = j(v(p), o);
-      return f[p] = g, g;
-    }, h = () => {
+      return p[f] = d, d;
+    }, w = (f) => {
+      const v = h[f];
+      if (v !== void 0) return v;
+      const d = j(g(f), o);
+      return h[f] = d, d;
+    }, m = () => {
       if (u !== void 0) return u;
       u = null;
-      for (let p = 0; p < c; p++) {
-        if (this.getLayerAlpha(p) <= 0 || !this.isLayerVisible(p)) continue;
-        const d = v(p).filter((g) => o.isPlottable(g.value));
-        if (!(d.length < 2)) {
-          u = d.map((g) => ({
-            x: e.timeToBitmapXExact(g.time),
-            y: o.valueToBitmapYExact(g.value),
-            time: g.time
+      for (let f = 0; f < c; f++) {
+        if (this.getLayerAlpha(f) <= 0 || !this.isLayerVisible(f)) continue;
+        const v = g(f).filter((d) => o.isPlottable(d.value));
+        if (!(v.length < 2)) {
+          u = v.map((d) => ({
+            x: e.timeToBitmapXExact(d.time),
+            y: o.valueToBitmapYExact(d.value),
+            time: d.time
           }));
           break;
         }
@@ -522,51 +572,51 @@ class st {
     };
     return {
       progress: n,
-      range: a,
+      range: l,
       width: r,
       height: o.getMediaHeight() * s.verticalPixelRatio,
       stacking: "off",
-      timeToX: (p) => e.timeToBitmapXExact(p),
-      xToTime: (p) => e.xToTime(p / s.horizontalPixelRatio),
-      valueToY: (p) => o.valueToBitmapYExact(p),
-      lerpValue: (p, d, g) => o.lerpValue(p, d, g),
+      timeToX: (f) => e.timeToBitmapXExact(f),
+      xToTime: (f) => e.xToTime(f / s.horizontalPixelRatio),
+      valueToY: (f) => o.valueToBitmapYExact(f),
+      lerpValue: (f, v, d) => o.lerpValue(f, v, d),
       layerCount: c,
-      layerData: v,
-      layerMean: y,
-      primaryPath: h
+      layerData: g,
+      layerMean: w,
+      primaryPath: m
     };
   }
   // --- Overlay --------------------------------------------------------------
   /** Crosshair dots on both edges of every visible band at the hovered sample. */
   drawOverlay(t) {
-    this.#f(performance.now());
+    this.#g(performance.now());
     const { crosshair: i, scope: e } = t;
     if (i === null) return;
-    const { context: o, horizontalPixelRatio: s } = e, n = 3 * s, a = n + 3 * s;
+    const { context: o, horizontalPixelRatio: s } = e, n = 3 * s, l = n + 3 * s;
     for (let r = 0; r < this.#t.length; r++) {
-      const c = this.#t[r], m = c.alpha.current;
-      if (m <= 0) continue;
-      const f = c.store.findNearest(i.time, t.dataInterval);
-      if (f === null) continue;
-      const u = this.#X(t, r, f);
+      const c = this.#t[r], p = c.alpha.current;
+      if (p <= 0) continue;
+      const h = c.store.findNearest(i.time, t.dataInterval);
+      if (h === null) continue;
+      const u = this.#X(t, r, h);
       if (u === null) continue;
-      const v = this.#r(r);
-      o.save(), o.globalAlpha *= m, o.fillStyle = v;
-      for (const y of [u.top, u.bottom])
-        o.save(), o.globalAlpha *= 0.25, o.beginPath(), o.arc(u.x, y, a, 0, Math.PI * 2), o.fill(), o.restore(), o.beginPath(), o.arc(u.x, y, n, 0, Math.PI * 2), o.fill();
+      const g = this.#r(r);
+      o.save(), o.globalAlpha *= p, o.fillStyle = g;
+      for (const w of [u.top, u.bottom])
+        o.save(), o.globalAlpha *= 0.25, o.beginPath(), o.arc(u.x, w, l, 0, Math.PI * 2), o.fill(), o.restore(), o.beginPath(), o.arc(u.x, w, n, 0, Math.PI * 2), o.fill();
       o.restore();
     }
   }
   /** The hovered sample where the fill draws it: an entering tail point sits on its grown head. */
   #X(t, i, e) {
     const o = this.#t[i], s = t.timeScale.getRange(), n = o.store.getVisibleData(s.from, s.to);
-    return (this.#w(o, n) ? this.#v(t, i) : null)?.get(e.time) ?? this.#l(t, i, e);
+    return (this.#y(o, n) ? this.#v(t, i) : null)?.get(e.time) ?? this.#l(t, i, e);
   }
   // --- Data queries ---------------------------------------------------------
   /** A sample as a query reports it: the drawn (live-chased) edges, `null` for a gap. */
   #x(t, i) {
     if (b(i)) return null;
-    const e = this.#d(t, i);
+    const e = this.#u(t, i);
     return { ...i, low: Math.min(e.low, e.high), high: Math.max(e.low, e.high) };
   }
   getDataAtTime(t, i) {
@@ -585,14 +635,16 @@ class st {
       const o = this.#t[e];
       if (!o.store.isVisible()) continue;
       const s = t(o), n = s === null ? null : this.#x(o, s);
-      n !== null && i.push({
+      if (n === null) continue;
+      const l = {
         layerIndex: e,
         time: n.time,
         value: (n.low + n.high) / 2,
         color: this.#r(e),
         low: n.low,
         high: n.high
-      });
+      };
+      n.x !== void 0 && (l.x = n.x), i.push(l);
     }
     return i.length > 0 ? i : null;
   }
@@ -633,9 +685,9 @@ class st {
   getValueRange(t, i, e) {
     const o = e?.plottable;
     let s = 1 / 0, n = -1 / 0;
-    for (const a of this.#t)
-      if (a.store.isVisible())
-        for (const r of a.store.getVisibleData(t, i))
+    for (const l of this.#t)
+      if (l.store.isVisible())
+        for (const r of l.store.getVisibleData(t, i))
           b(r) || o && (!o(r.low) || !o(r.high)) || (r.low < s && (s = r.low), r.high > n && (n = r.high));
     return s < 1 / 0 ? { min: s, max: n } : null;
   }
@@ -653,18 +705,19 @@ class st {
       t.store.removeAllListeners();
   }
 }
-function X(l, t) {
-  return t === 1 ? [l.bands.upper] : l.seriesColors.slice(0, t);
+function X(a, t) {
+  return t === 1 ? [a.bands.upper] : a.seriesColors.slice(0, t);
 }
-function nt(l) {
-  const t = l[l.length - 1];
+function nt(a) {
+  const t = a[a.length - 1];
   return t.length < 2 ? null : Math.round(t[t.length - 2].x);
 }
-const yt = {
+const wt = {
   type: "band",
-  create: ({ theme: l, layerCount: t }, i) => new st(t, { colors: X(l, t), ...i })
+  xTypes: ["time", "numeric", "category"],
+  create: ({ theme: a, layerCount: t }, i) => new st(t, { colors: X(a, t), ...i })
 };
 export {
   st as BandRenderer,
-  yt as BandSeriesDef
+  wt as BandSeriesDef
 };