@wick-charts/vue 0.6.0 → 0.6.1

package/dist/core/dist/chart.js

@@ -1,40 +1,40 @@
-import { AnimationConfig as F, DEFAULT_LINE_PULSE as E } from "./animation/config.js";
-import { easeOutCubic as L } from "./animation/easing.js";
-import { createViewportEngine as N } from "./animation/viewport-engine.js";
-import { CanvasManager as W } from "./canvas-manager.js";
-import { resolveEdgeAnchorValue as O, drawEdgeIndicators as Y, resolveEdgeBoundary as B } from "./chart/edge-indicators.js";
-import { computeFitToData as X } from "./chart/fit-to-data.js";
-import { getLastValue as Z, getPreviousClose as _, getStackedLastValue as U } from "./chart/last-value.js";
-import { resolveMaxVisibleBars as $, resolvePadding as C, resolvePerfOptions as G, isSameHorizontalPadding as R } from "./chart/options.js";
-import { computePan as q, computeZoom as K } from "./chart/pan-zoom-math.js";
-import { StreamingCadence as j } from "./chart/streaming-cadence.js";
-import { computeStreamingTarget as J } from "./chart/streaming-target.js";
-import { resolvePaddingTime as M } from "./chart/viewport-padding.js";
-import { computeTargetYRange as Q, resolveBound as I } from "./chart/y-target.js";
-import { renderCrosshair as tt } from "./components/crosshair.js";
-import { renderGrid as it } from "./components/grid.js";
-import { renderMarker as et } from "./components/marker.js";
-import { renderReferenceLine as st } from "./components/reference-line.js";
-import { resolveTimeRegionColors as rt, renderTimeRegion as nt } from "./components/time-region.js";
-import { EventEmitter as at } from "./events.js";
-import { InteractionHandler as ht } from "./interactions/handler.js";
-import { RenderScheduler as P } from "./render-scheduler.js";
-import { XScale as ot } from "./scales/x-scale.js";
-import { YScale as lt } from "./scales/y-scale.js";
-import { resolveSeriesDefinition as ct } from "./series/definition.js";
-import { isTimeSeriesRenderer as S } from "./series/types.js";
-import { catppuccin as dt } from "./theme/themes/catppuccin.js";
-import { clamp as mt } from "./utils/math.js";
-import { normalizeTime as y, detectInterval as ut } from "./utils/time.js";
-const ft = 200, gt = 1500;
-let pt = 0, yt = 0, vt = 0, bt = 0;
-function H(f, t) {
-  return f === t ? !0 : !f || !t || f.length !== t.length ? !1 : f.every((i, e) => i === t[e]);
+import { AnimationConfig as O, DEFAULT_LINE_PULSE as N } from "./animation/config.js";
+import { easeOutCubic as R } from "./animation/easing.js";
+import { createViewportEngine as E } from "./animation/viewport-engine.js";
+import { CanvasManager as Y } from "./canvas-manager.js";
+import { resolveEdgeAnchorValue as X, drawEdgeIndicators as Z, resolveEdgeBoundary as $ } from "./chart/edge-indicators.js";
+import { computeFitToData as _ } from "./chart/fit-to-data.js";
+import { getLastValue as G, getPreviousClose as U, getStackedLastValue as K } from "./chart/last-value.js";
+import { resolveFade as C, resolveMaxVisibleBars as j, resolvePadding as I, resolvePerfOptions as q, isSameHorizontalPadding as P } from "./chart/options.js";
+import { computePan as J, computeZoom as Q } from "./chart/pan-zoom-math.js";
+import { StreamingCadence as tt } from "./chart/streaming-cadence.js";
+import { computeStreamingTarget as it } from "./chart/streaming-target.js";
+import { resolvePaddingTime as H } from "./chart/viewport-padding.js";
+import { computeTargetYRange as et, resolveBound as z } from "./chart/y-target.js";
+import { renderCrosshair as st } from "./components/crosshair.js";
+import { renderGrid as rt } from "./components/grid.js";
+import { renderMarker as nt } from "./components/marker.js";
+import { renderReferenceLine as at } from "./components/reference-line.js";
+import { resolveTimeRegionColors as ht, renderTimeRegion as ot } from "./components/time-region.js";
+import { EventEmitter as lt } from "./events.js";
+import { InteractionHandler as ct } from "./interactions/handler.js";
+import { RenderScheduler as V } from "./render-scheduler.js";
+import { XScale as dt } from "./scales/x-scale.js";
+import { YScale as mt } from "./scales/y-scale.js";
+import { resolveSeriesDefinition as ut } from "./series/definition.js";
+import { isTimeSeriesRenderer as x } from "./series/types.js";
+import { catppuccin as ft } from "./theme/themes/catppuccin.js";
+import { clamp as gt } from "./utils/math.js";
+import { normalizeTime as v, detectInterval as pt } from "./utils/time.js";
+const yt = 200, vt = 1500, bt = 48, xt = 12, A = 9;
+let St = 0, kt = 0, wt = 0, At = 0;
+function W(g, t) {
+  return g === t ? !0 : !g || !t || g.length !== t.length ? !1 : g.every((i, e) => i === t[e]);
 }
-function St(f, t) {
-  return f === t ? !0 : !f || !t || f.length !== t.length ? !1 : f.every((i, e) => i === t[e]);
+function Mt(g, t) {
+  return g === t ? !0 : !g || !t || g.length !== t.length ? !1 : g.every((i, e) => i === t[e]);
 }
-class qt extends at {
+class ti extends lt {
   /** Canvas lifecycle and DPR-aware sizing. */
   #a;
   /** Schedules main-layer redraws (background, grid, series). */
@@ -46,7 +46,7 @@ class qt extends at {
   /** Maps price/value to vertical pixel coordinates. */
   yScale;
   /** Zoom, pan, crosshair — null when interactive=false. */
-  #C;
+  #T;
   /** All registered series (candlestick, line, bar, pie). */
   #t = [];
   /** Point annotations (event markers) drawn on the overlay layer, kept out of the series model. */
@@ -63,12 +63,18 @@ class qt extends at {
    * later — which re-arms `getIntroFront()`'s global min — can't blink settled
    * markers / reference lines back out.
    */
-  #tt = !1;
-  #it = !1;
+  #rt = !1;
+  #nt = !1;
   /** Active visual theme (colors, fonts, grid style). */
   #n;
   /** Whether to render the background grid. */
-  #O;
+  #V;
+  /** Resolved edge-fade zones — `right: null` tracks the live Y-axis width. */
+  #k;
+  /** Memoized destination-out mask gradients, one per edge, keyed by the
+   *  zone's bitmap geometry so a resize / DPR change / `setFade` rebuilds
+   *  them and steady frames reuse them. */
+  #w = { top: null, right: null, left: null, tail: null };
   /** Detected time interval between data points (milliseconds). */
   #r = 6e4;
   /** Current crosshair position, null when cursor is outside the chart. */
@@ -80,45 +86,45 @@ class qt extends at {
    * `time`/`y`; `'time'` (programmatic {@link setCrosshair}) keeps
    * `time`/`y` and re-projects the pixel position.
    */
-  #Y = "pointer";
+  #X = "pointer";
   /** Whether the last overlay pass painted anything — gates the full-bitmap
    *  clear so an empty overlay isn't cleared again every main frame. */
-  #et = !1;
+  #at = !1;
   /** User-specified Y-axis bounds (auto, fixed, percentage). */
   #l = {};
   /** Cached series ID list — invalidated on add/remove. */
-  #T = null;
+  #D = null;
   /** Axis visibility and sizing configuration. */
-  #H = {};
+  #W = {};
   /** Host-declared state per edge — drives the edge-indicator overlay. */
-  #S = { left: "idle", right: "idle" };
+  #x = { left: "idle", right: "idle" };
   /** Wall-clock start of a `loading` exit fade per side — set when the host
    *  drops `loading` back to `idle`/`has-more`, so the indicator fades out
    *  over {@link EDGE_EXIT_FADE_MS} instead of vanishing the same frame the
    *  fetched data lands. `null` = no fade in flight. */
-  #V = { left: null, right: null };
+  #B = { left: null, right: null };
   /** Cached boundary timestamps from the last `edgeReached` emission, by side. */
-  #st = { left: null, right: null };
+  #ht = { left: null, right: null };
   /** Latest placeholder shapes a `loading` indicator reported per side —
    *  the morph hand-off candidate consumed by {@link prependData}. */
-  #B = { left: null, right: null };
+  #Z = { left: null, right: null };
   /** True after a prepend consumed a side's placeholder snapshot: the series'
    *  reveal owns those pixels now, so the still-`loading` indicator is hidden
    *  and the upcoming `loading → idle` transition skips its exit fade. Reset
    *  by the next {@link setEdgeState} call. */
-  #R = { left: !1, right: !1 };
+  #I = { left: !1, right: !1 };
   /** Host-supplied callback fired when the user releases a pan/zoom past a data edge. */
-  #rt;
+  #ot;
   /** Per-side custom painter for the edge `loading` spinner. `null` falls back to the built-in dots. */
-  #nt = { left: null, right: null };
+  #lt = { left: null, right: null };
   /** Nesting depth for batch updates. Suppresses recomputes while > 0. */
-  #A = 0;
+  #M = 0;
   /** True when batched operations include data changes (triggers full onDataChanged on end). */
-  #X = !1;
+  #$ = !1;
   /** True when batched operations include visibility changes (triggers Y-range + redraw on end). */
-  #M = !1;
+  #P = !1;
   /** True when batched operations bumped overlay version (emits a single overlayChange on flush). */
-  #Z = !1;
+  #_ = !1;
   /**
    * Monotonic counter bumped on any mutation that affects overlay output —
    * data, visibility, series options, theme. Used by snapshot helpers in
@@ -128,13 +134,13 @@ class qt extends at {
    *
    * @internal
    */
-  #at = 0;
+  #ct = 0;
   get yAxisWidth() {
-    const t = this.#H.y;
+    const t = this.#W.y;
     return t?.visible === !1 ? 0 : t?.width ?? 55;
   }
   get xAxisHeight() {
-    const t = this.#H.x;
+    const t = this.#W.x;
     return t?.visible === !1 ? 0 : t?.height ?? 30;
   }
   /** Resolved animation config derived from `options.animations` at construction. */
@@ -153,7 +159,7 @@ class qt extends at {
    *  longer than the producer's tick interval — the spring never quite
    *  settles between ticks, so velocity carries continuously and the slide
    *  doesn't pulse. */
-  #D;
+  #R;
   /**
    * Mirrors `#dataReplaceSnapPending` for the engine signal that follows
    * inside the same `onDataChanged` call. `#dataReplaceSnapPending` is
@@ -163,9 +169,9 @@ class qt extends at {
    * field carries the decision across that gap. The closure also reads
    * `#dataStart` / `#dataEnd` directly for the timestamps.
    */
-  #ht = !1;
+  #dt = !1;
   /** Earliest data timestamp registered across all series, `null` before any data has arrived. */
-  #k = null;
+  #A = null;
   /** Latest data timestamp registered across all series, `null` before any data has arrived. */
   #i = null;
   /**
@@ -174,20 +180,20 @@ class qt extends at {
    * left of the tail keeps that offset as new bars arrive, instead of
    * snapping back to the natural-pin position every frame.
    */
-  #z = null;
+  #F = null;
   /**
    * Warm-up window flag — `setVisibleRange({ from, bars })` arms it and
    * the streaming-target math suppresses pan ticks while the data hasn't
    * reached the right edge yet. Cleared by user interaction or once the
    * data fills the window.
    */
-  #w = !1;
+  #L = !1;
   /**
    * Cap for fit-to-data. When the data span exceeds this, the fit anchors
    * the right edge and trims the left. Resolved once at construction from
    * `options.viewport.maxVisibleBars`.
    */
-  #ot;
+  #mt;
   /**
    * Committed logical X range — the "where X should be" target. Engine
    * eases its visual toward this. Pan / zoom / setRange / fitContent /
@@ -196,7 +202,7 @@ class qt extends at {
    */
   #o = { from: 0, to: 0 };
   /** Padded Y range — engine's raw Y target plus pixel padding from `#padding`. */
-  #F = { min: 0, max: 0 };
+  #O = { min: 0, max: 0 };
   /**
    * Auto-scroll flag — when `true`, streaming ticks slide X to track the
    * data tail. Pan flips this off when the gesture pushes the tail off
@@ -208,17 +214,17 @@ class qt extends at {
   #c;
   /** Cached chart width — passed by interactions on every call; kept for the rare
    *  call that omits it (e.g. programmatic `chart.pan(...)` without explicit width). */
-  #E = 0;
+  #N = 0;
   /** Active performance monitor, or `null` when instrumentation is disabled (the default). */
-  #x;
+  #S;
   /** When true, `destroy()` tears down the monitor; false for caller-supplied monitors we must not destroy. */
-  #_ = !1;
+  #G = !1;
   /** Visible HUD overlay (mounted by the perf config); non-null only when the caller requested one. */
   #U = null;
   constructor(t, i) {
-    super(), i?.axis && (this.#H = i.axis, this.#l = { min: i.axis.y?.min, max: i.axis.y?.max }), this.#n = i?.theme ?? dt.theme, this.#O = i?.grid?.visible !== !1, this.#g = F.resolve(i?.animations), this.#ot = $(i?.viewport?.maxVisibleBars), this.#c = C(i?.padding), this.#D = new j();
+    super(), i?.axis && (this.#W = i.axis, this.#l = { min: i.axis.y?.min, max: i.axis.y?.max }), this.#n = i?.theme ?? ft.theme, this.#V = i?.grid?.visible !== !1, this.#k = C(i?.fade), this.#g = O.resolve(i?.animations), this.#mt = j(i?.viewport?.maxVisibleBars), this.#c = I(i?.padding), this.#R = new tt();
     const e = this.#g.axis.y, s = this.#g.axis.x;
-    this.#s = N({
+    this.#s = E({
       initial: { yRange: { min: 0, max: 0 }, xRange: { from: 0, to: 0 } },
       y: {
         curve: e.curve,
@@ -233,25 +239,25 @@ class qt extends at {
         settleMs: s.settleMs,
         gestureMs: s.gestureMs
       },
-      computeXTarget: () => this.#Rt(),
-      computeYTarget: ({ xTarget: a }) => this.#gt(a),
+      computeXTarget: () => this.#Wt(),
+      computeYTarget: ({ xTarget: h }) => this.#xt(h),
       onWake: () => this.#e?.markDirty()
-    }), this.#rt = i?.onEdgeReached, this.#N = i?.viewport?.initialRange;
-    const r = G(i?.perf);
-    this.#x = r.monitor, this.#_ = r.ownsMonitor, this.#a = new W(t, this.#x ?? void 0), this.timeScale = new ot(), this.yScale = new lt(), this.timeScale.setLocale(i?.locale), this.timeScale.setTimeZone(i?.timeZone);
+    }), this.#ot = i?.onEdgeReached, this.#E = i?.viewport?.initialRange;
+    const r = q(i?.perf);
+    this.#S = r.monitor, this.#G = r.ownsMonitor, this.#a = new Y(t, this.#S ?? void 0), this.timeScale = new dt(), this.yScale = new mt(), this.timeScale.setLocale(i?.locale), this.timeScale.setTimeZone(i?.timeZone);
     const n = this.#g.axis.ticksMs;
-    this.timeScale.tickTracker.setFadeMs(n), this.yScale.tickTracker.setFadeMs(n), this.#e = new P((a) => this.#J(a)), this.#h = new P(
-      (a) => this.#Q("overlay", a, () => this.renderOverlay(a))
-    ), this.#x && r.hud && (this.#U = r.hud(t, this.#x));
-    const h = i?.interactive !== !1;
-    this.#C = h ? new ht(this.#a.canvas, this, this.timeScale, this.yScale) : null, this.#a.on("resize", () => {
-      this.syncScales(), this.#J(), this.emit("viewportChange");
-    }), this.syncScales(), this.#C?.on("crosshairMove", (a) => {
-      this.#Y = "pointer", this.#d = a, this.#h.markDirty(), this.emit("crosshairMove", a), this.#G(a);
-    }), this.#C?.on("click", (a) => {
-      this.emit("pointClick", { ...a, spatialHit: this.#ft(a) });
-    }), this.#C?.on("dblclick", (a) => {
-      this.fitContent(), this.emit("pointDoubleClick", { ...a, spatialHit: this.#ft(a) });
+    this.timeScale.tickTracker.setFadeMs(n), this.yScale.tickTracker.setFadeMs(n), this.#e = new V((h) => this.#et(h)), this.#h = new V(
+      (h) => this.#st("overlay", h, () => this.renderOverlay(h))
+    ), this.#S && r.hud && (this.#U = r.hud(t, this.#S));
+    const a = i?.interactive !== !1;
+    this.#T = a ? new ct(this.#a.canvas, this, this.timeScale, this.yScale) : null, this.#a.on("resize", () => {
+      this.syncScales(), this.#et(), this.emit("viewportChange");
+    }), this.syncScales(), this.#T?.on("crosshairMove", (h) => {
+      this.#X = "pointer", this.#d = h, this.#h.markDirty(), this.emit("crosshairMove", h), this.#q(h);
+    }), this.#T?.on("click", (h) => {
+      this.emit("pointClick", { ...h, spatialHit: this.#bt(h) });
+    }), this.#T?.on("dblclick", (h) => {
+      this.fitContent(), this.emit("pointDoubleClick", { ...h, spatialHit: this.#bt(h) });
     });
   }
   /**
@@ -267,8 +273,8 @@ class qt extends at {
    * render instead of N.
    */
   #p() {
-    if (this.#at++, this.#A > 0) {
-      this.#Z = !0;
+    if (this.#ct++, this.#M > 0) {
+      this.#_ = !0;
       return;
     }
     this.emit("overlayChange");
@@ -282,39 +288,39 @@ class qt extends at {
    * @internal
    */
   getOverlayVersion() {
-    return this.#at;
+    return this.#ct;
   }
   /**
    * Return a series ID: use the provided hint if it's non-empty and not already taken,
    * otherwise generate a new auto ID. Auto-generated IDs never collide with each other
    * or with user-provided IDs because they use a monotonically increasing counter.
    */
-  #bt(t) {
+  #Tt(t) {
     if (t && !this.#t.some((e) => e.id === t))
       return t;
     let i;
     do
-      i = `series_${++pt}`;
+      i = `series_${++St}`;
     while (this.#t.some((e) => e.id === i));
     return i;
   }
   addSeries(t, i = {}) {
-    const e = typeof t == "string" ? ct(t) : t;
+    const e = typeof t == "string" ? ut(t) : t;
     if (!e)
       throw new Error(
         `[wick-charts] Unknown series type '${String(t)}'. The string form of addSeries resolves through the series registry — call registerBuiltinSeries() once at startup, or pass the definition directly: chart.addSeries(LineSeriesDef, options).`
       );
-    const { layers: s, id: r, label: n, labels: h, ...a } = i, l = s ?? 1, o = {
+    const { layers: s, id: r, label: n, labels: a, ...h } = i, l = s ?? 1, o = {
       ...this.#g.defaults(e.type),
-      ...a,
+      ...h,
       ...this.#g.overrides(e.type)
-    }, u = e.create({ theme: this.#n, layerCount: l }, o), d = h ?? (typeof n == "string" ? [n] : void 0), c = this.#bt(r);
-    return u.onDataChanged?.(() => this.onDataChanged()), this.#t.push({ id: c, labels: d, renderer: u, visible: !0 }), this.#T = null, this.emit("seriesChange"), this.#p(), c;
+    }, u = e.create({ theme: this.#n, layerCount: l }, o), c = a ?? (typeof n == "string" ? [n] : void 0), d = this.#Tt(r);
+    return u.onDataChanged?.(() => this.onDataChanged()), this.#t.push({ id: d, labels: c, renderer: u, visible: !0 }), this.#D = null, this.#j(), this.emit("seriesChange"), this.#p(), d;
   }
   /** Remove a series by ID and clean up its resources. */
   removeSeries(t) {
     const i = this.#t.findIndex((e) => e.id === t);
-    i >= 0 && (this.#t[i].renderer.dispose(), this.#t.splice(i, 1), this.#T = null, this.#e.markDirty(), this.emit("seriesChange"), this.#p());
+    i >= 0 && (this.#t[i].renderer.dispose(), this.#t.splice(i, 1), this.#D = null, this.#j(), this.#e.markDirty(), this.emit("seriesChange"), this.#p());
   }
   // --- Markers (point annotations) -----------------------------------------
   /**
@@ -327,13 +333,13 @@ class qt extends at {
    * appear in series queries.
    */
   addMarker(t) {
-    const i = `marker_${++yt}`;
-    return this.#m.push(this.#lt(i, t)), this.#h.markDirty(), i;
+    const i = `marker_${++kt}`;
+    return this.#m.push(this.#ut(i, t)), this.#h.markDirty(), i;
   }
   /** Replace a marker's config in place. No-op when the id is unknown. */
   updateMarker(t, i) {
     const e = this.#m.findIndex((s) => s.id === t);
-    e !== -1 && (this.#m[e] = this.#lt(t, i), this.#h.markDirty());
+    e !== -1 && (this.#m[e] = this.#ut(t, i), this.#h.markDirty());
   }
   /** Remove a marker by id. No-op when the id is unknown. */
   removeMarker(t) {
@@ -344,10 +350,10 @@ class qt extends at {
   getMarkers() {
     return this.#m;
   }
-  #lt(t, i) {
+  #ut(t, i) {
     return {
       id: t,
-      time: y(i.time),
+      time: v(i.time),
       value: i.value,
       seriesId: i.seriesId,
       shape: i.shape ?? "dot",
@@ -357,14 +363,14 @@ class qt extends at {
     };
   }
   /** Resolve a marker's Y value: explicit `value`, else snapped to its series at `time`. Null when neither resolves. */
-  #St(t) {
+  #Dt(t) {
     if (t.value !== void 0 && Number.isFinite(t.value)) return t.value;
     if (t.seriesId === void 0) return null;
     const i = this.getDataAtTime(t.seriesId, t.time);
     return i ? "close" in i ? i.close : i.value : null;
   }
   /** Resolve a marker's color: explicit `color`, else the series color, else the theme line color. */
-  #xt(t) {
+  #Rt(t) {
     if (t.color !== void 0) return t.color;
     if (t.seriesId !== void 0) {
       const i = this.getSeriesColor(t.seriesId);
@@ -372,24 +378,24 @@ class qt extends at {
     }
     return this.#n.line.color;
   }
-  #kt(t, i, e) {
+  #Ct(t, i, e) {
     if (this.#m.length === 0) return;
-    const s = performance.now() / (E * 2 * Math.PI) % 1, r = this.#$();
+    const s = performance.now() / (N * 2 * Math.PI) % 1, r = this.#K();
     for (const n of this.#m) {
-      const h = this.#St(n);
-      if (h === null) continue;
-      const a = this.#mt(r, n.time);
-      if (a <= 0) continue;
+      const a = this.#Dt(n);
+      if (a === null) continue;
+      const h = this.#pt(r, n.time);
+      if (h <= 0) continue;
       const l = t.context.globalAlpha;
-      a < 1 && (t.context.globalAlpha = l * a), et({
+      h < 1 && (t.context.globalAlpha = l * h), nt({
         scope: t,
         timeScale: this.timeScale,
         yScale: this.yScale,
         theme: this.#n,
         marker: {
           time: n.time,
-          value: h,
-          color: this.#xt(n),
+          value: a,
+          color: this.#Rt(n),
           shape: n.shape,
           pulse: n.pulse,
           label: n.label
@@ -397,7 +403,7 @@ class qt extends at {
         phase: s,
         plotWidth: i,
         plotHeight: e
-      }), a < 1 && (t.context.globalAlpha = l);
+      }), h < 1 && (t.context.globalAlpha = l);
     }
   }
   // --- Time regions (shaded bands) -----------------------------------------
@@ -413,13 +419,13 @@ class qt extends at {
    * legend.
    */
   addRegion(t) {
-    const i = `region_${++vt}`;
-    return this.#b.push(this.#ct(i, t)), this.#e.markDirty(), i;
+    const i = `region_${++wt}`;
+    return this.#b.push(this.#ft(i, t)), this.#e.markDirty(), i;
   }
   /** Replace a region's config in place. No-op when the id is unknown. */
   updateRegion(t, i) {
     const e = this.#b.findIndex((s) => s.id === t);
-    e !== -1 && (this.#b[e] = this.#ct(t, i), this.#e.markDirty());
+    e !== -1 && (this.#b[e] = this.#ft(t, i), this.#e.markDirty());
   }
   /** Remove a region by id. No-op when the id is unknown. */
   removeRegion(t) {
@@ -430,22 +436,22 @@ class qt extends at {
   getRegions() {
     return this.#b;
   }
-  #ct(t, i) {
-    const { to: e } = i, s = e === void 0 || e === "now" ? null : y(e);
+  #ft(t, i) {
+    const { to: e } = i, s = e === void 0 || e === "now" ? null : v(e);
     return {
       id: t,
-      from: y(i.from),
+      from: v(i.from),
       to: s,
       fill: i.fill,
       color: i.color,
       label: i.label
     };
   }
-  #At(t, i, e) {
+  #It(t, i, e) {
     if (this.#b.length !== 0)
       for (const s of this.#b) {
-        const { color: r, fill: n } = rt(s, this.#n);
-        nt({
+        const { color: r, fill: n } = ht(s, this.#n);
+        ot({
           scope: t,
           timeScale: this.timeScale,
           theme: this.#n,
@@ -467,13 +473,13 @@ class qt extends at {
    * legend.
    */
   addLine(t) {
-    const i = `line_${++bt}`;
-    return this.#y.push(this.#dt(i, t)), this.#h.markDirty(), i;
+    const i = `line_${++At}`;
+    return this.#y.push(this.#gt(i, t)), this.#h.markDirty(), i;
   }
   /** Replace a reference line's config in place. No-op when the id is unknown. */
   updateLine(t, i) {
     const e = this.#y.findIndex((s) => s.id === t);
-    e !== -1 && (this.#y[e] = this.#dt(t, i), this.#h.markDirty());
+    e !== -1 && (this.#y[e] = this.#gt(t, i), this.#h.markDirty());
   }
   /** Remove a reference line by id. No-op when the id is unknown. */
   removeLine(t) {
@@ -484,7 +490,7 @@ class qt extends at {
   getLines() {
     return this.#y;
   }
-  #dt(t, i) {
+  #gt(t, i) {
     const { time: e, value: s } = i, r = {
       id: t,
       color: i.color,
@@ -492,16 +498,16 @@ class qt extends at {
       style: i.style ?? "dashed",
       width: i.width ?? 1
     };
-    return e !== void 0 ? { ...r, orientation: "vertical", coord: y(e) } : { ...r, orientation: "horizontal", coord: s ?? Number.NaN };
+    return e !== void 0 ? { ...r, orientation: "vertical", coord: v(e) } : { ...r, orientation: "horizontal", coord: s ?? Number.NaN };
   }
-  #wt(t, i, e) {
+  #Pt(t, i, e) {
     if (this.#y.length === 0) return;
-    const s = this.#$();
+    const s = this.#K();
     for (const r of this.#y) {
-      const n = s >= 1 ? 1 : r.orientation === "vertical" ? this.#mt(s, r.coord) : L(s);
+      const n = s >= 1 ? 1 : r.orientation === "vertical" ? this.#pt(s, r.coord) : R(s);
       if (n <= 0) continue;
-      const h = t.context.globalAlpha;
-      n < 1 && (t.context.globalAlpha = h * n), st({
+      const a = t.context.globalAlpha;
+      n < 1 && (t.context.globalAlpha = a * n), at({
         scope: t,
         timeScale: this.timeScale,
         yScale: this.yScale,
@@ -516,7 +522,7 @@ class qt extends at {
         },
         plotWidth: i,
         plotHeight: e
-      }), n < 1 && (t.context.globalAlpha = h);
+      }), n < 1 && (t.context.globalAlpha = a);
     }
   }
   /**
@@ -554,10 +560,10 @@ class qt extends at {
    * has actually been observed in progress, so an annotation drawn on a chart
    * that has no data yet still rides the reveal once data arrives.
    */
-  #$() {
-    if (this.#it) return 1;
+  #K() {
+    if (this.#nt) return 1;
     const t = this.getIntroFront();
-    return t < 1 ? (this.#tt = !0, t) : (this.#tt && (this.#it = !0), 1);
+    return t < 1 ? (this.#rt = !0, t) : (this.#rt && (this.#nt = !0), 1);
   }
   /**
    * Entrance alpha for an overlay pinned at `time`, given the intro reveal
@@ -565,10 +571,10 @@ class qt extends at {
    * then fades in over a short band — so annotations surface in step with the
    * series drawing past them. `1` once the intro has settled.
    */
-  #mt(t, i) {
+  #pt(t, i) {
     if (t >= 1) return 1;
     const { from: e, to: s } = this.timeScale.getRange(), r = s - e, n = r > 0 ? (i - e) / r : 0;
-    return mt((t - n) / 0.12, 0, 1);
+    return gt((t - n) / 0.12, 0, 1);
   }
   /**
    * Replace all data for a series.
@@ -581,7 +587,7 @@ class qt extends at {
    */
   setSeriesData(t, i, e) {
     const s = this.#t.find((r) => r.id === t);
-    s && (this.#q = !0, s.renderer.setData(i, e));
+    s && (this.#J = !0, s.renderer.setData(i, e));
   }
   /** Append a new data point to the end of a series (real-time tick). */
   appendData(t, i, e) {
@@ -604,8 +610,8 @@ class qt extends at {
   prependData(t, i, e) {
     const s = this.#t.find((n) => n.id === t);
     if (s === void 0 || s.renderer.prependPoints === void 0) return;
-    const r = this.#B.left;
-    r !== null && s.renderer.setHistoryHandoff !== void 0 && performance.now() - r.at < gt && (s.renderer.setHistoryHandoff(r.bars), this.#R.left = !0, this.#V.left = null, this.#B.left = null, this.#h.markDirty()), s.renderer.prependPoints(i, e);
+    const r = this.#Z.left;
+    r !== null && s.renderer.setHistoryHandoff !== void 0 && performance.now() - r.at < vt && (s.renderer.setHistoryHandoff(r.bars), this.#I.left = !0, this.#B.left = null, this.#Z.left = null, this.#h.markDirty()), s.renderer.prependPoints(i, e);
   }
   /** Update the last data point of a series in place (e.g. live candle update). */
   updateData(t, i, e) {
@@ -633,27 +639,27 @@ class qt extends at {
     if (!e) return;
     const s = e.labels, r = e.renderer.getLayerColors().slice(), n = this.#g.overrides(e.renderer.kind);
     e.renderer.updateOptions({ ...i, ...n }), "label" in i && typeof i.label == "string" && (e.labels = [i.label]), this.#e.markDirty();
-    const h = e.renderer.getLayerColors(), a = r.length !== h.length || r.some((o, u) => o !== h[u]), l = !H(s, e.labels);
-    (a || l) && this.#p();
+    const a = e.renderer.getLayerColors(), h = r.length !== a.length || r.some((o, u) => o !== a[u]), l = !W(s, e.labels);
+    (h || l) && this.#p();
   }
   /**
    * Batch multiple updates: suppress recomputes until `fn` returns. Exceptions
    * inside `fn` still flush the batch so counters don't leak across calls.
    */
   batch(t) {
-    this.#A++;
+    this.#M++;
     try {
       t();
     } finally {
-      if (--this.#A <= 0) {
-        if (this.#A = 0, this.#X)
-          this.#X = !1, this.#M = !1, this.onDataChanged();
-        else if (this.#M) {
-          this.#M = !1, this.#f = !0;
+      if (--this.#M <= 0) {
+        if (this.#M = 0, this.#$)
+          this.#$ = !1, this.#P = !1, this.onDataChanged();
+        else if (this.#P) {
+          this.#P = !1, this.#f = !0;
           const i = performance.now();
           this.#s.onAxisReconfig(i), this.#v(i), this.#e.markDirty();
         }
-        this.#Z && (this.#Z = !1, this.emit("overlayChange"));
+        this.#_ && (this.#_ = !1, this.emit("overlayChange"));
       }
     }
   }
@@ -667,10 +673,10 @@ class qt extends at {
   setSeriesVisible(t, i) {
     const e = this.#t.find((n) => n.id === t);
     if (!e || e.visible === i) return;
-    e.visible = i, this.#p();
+    e.visible = i, this.#p(), this.#j();
     const s = this.#g.toggleMs;
-    if (e.renderer.setAlpha?.(i ? 1 : 0, s), this.#e.markDirty(), this.#A > 0) {
-      this.#M = !0;
+    if (e.renderer.setAlpha?.(i ? 1 : 0, s), this.#e.markDirty(), this.#M > 0) {
+      this.#P = !0;
       return;
     }
     this.#f = !0;
@@ -701,12 +707,12 @@ class qt extends at {
    * layer's geometry on screen until the engine's Y ease settles.
    */
   setLayerVisible(t, i, e) {
-    const s = this.#t.find((h) => h.id === t);
+    const s = this.#t.find((a) => a.id === t);
     if (!s || s.renderer.getLayerCount() <= 1 || s.renderer.isLayerVisible(i) === e) return;
     s.renderer.setLayerVisible(i, e), this.#p();
     const r = this.#g.toggleMs;
-    if (s.renderer.setLayerAlpha?.(i, e ? 1 : 0, r), this.#e.markDirty(), this.#A > 0) {
-      this.#M = !0;
+    if (s.renderer.setLayerAlpha?.(i, e ? 1 : 0, r), this.#e.markDirty(), this.#M > 0) {
+      this.#P = !0;
       return;
     }
     this.#f = !0;
@@ -721,7 +727,7 @@ class qt extends at {
     const { first: t, last: i } = this.getDataBounds();
     if (t === void 0 || i === void 0) return;
     const e = this.#a.size.media.width - this.yAxisWidth;
-    this.#P(t, i, e), this.#W({ xEase: !0 });
+    this.#z(t, i, e), this.#Y({ xEase: !0 });
   }
   getVisibleRange() {
     return this.#o.from === 0 && this.#o.to === 0 ? this.#s.getAnimationState().xRange : this.#o;
@@ -732,7 +738,7 @@ class qt extends at {
    * tracking and is cheaper than recomputing from series stores.
    */
   getDataRange() {
-    return this.#k === null || this.#i === null ? null : { from: this.#k, to: this.#i };
+    return this.#A === null || this.#i === null ? null : { from: this.#A, to: this.#i };
   }
   /**
    * Imperatively set the visible time range. Three forms:
@@ -761,29 +767,29 @@ class qt extends at {
   setVisibleRange(t, i) {
     if (typeof t == "number") {
       if (!Number.isInteger(t) || t < 2) return;
-      const { first: n, last: h } = this.getDataBounds();
-      if (n === void 0 || h === void 0) return;
-      const a = Math.max(n, h - (t - 1) * this.#r), l = this.#a.size.media.width - this.yAxisWidth;
-      this.#P(a, h, l), this.#W();
+      const { first: n, last: a } = this.getDataBounds();
+      if (n === void 0 || a === void 0) return;
+      const h = Math.max(n, a - (t - 1) * this.#r), l = this.#a.size.media.width - this.yAxisWidth;
+      this.#z(h, a, l), this.#Y();
       return;
     }
     if ("bars" in t) {
       if (!Number.isInteger(t.bars) || t.bars < 2) return;
-      const n = y(t.from), h = n + t.bars * this.#r;
-      this.#u = this.#i !== null && this.#i >= n && this.#i <= h, this.#L({ from: n, to: h }, { emitChange: !0 }), this.#w = !0, this.#W();
+      const n = v(t.from), a = n + t.bars * this.#r;
+      this.#u = this.#i !== null && this.#i >= n && this.#i <= a, this.#C({ from: n, to: a }, { emitChange: !0 }), this.#L = !0, this.#Y();
       return;
     }
-    const e = y(t.from), s = y(t.to);
-    this.#u = this.#i !== null && this.#i >= e && this.#i <= s, this.#w = !1;
-    const r = this.#L({ from: e, to: s }, { emitChange: !0 });
+    const e = v(t.from), s = v(t.to);
+    this.#u = this.#i !== null && this.#i >= e && this.#i <= s, this.#L = !1;
+    const r = this.#C({ from: e, to: s }, { emitChange: !0 });
     if (i?.gesture) {
-      r && this.#Mt();
+      r && this.#Bt();
       return;
     }
-    this.#W();
+    this.#Y();
   }
   getYRange() {
-    return this.#F;
+    return this.#O;
   }
   getCrosshairPosition() {
     return this.#d;
@@ -836,24 +842,24 @@ class qt extends at {
     else if (e !== null)
       s = e.y;
     else {
-      const h = this.#F;
-      s = (h.min + h.max) / 2;
+      const a = this.#O;
+      s = (a.min + a.max) / 2;
     }
     if (!Number.isFinite(s) || e !== null && e.time === i && e.y === s) return;
     const r = this.timeScale.timeToX(i), n = this.yScale.valueToY(s);
-    this.#Y = "time", this.#d = { mediaX: r, mediaY: n, time: i, y: s }, this.#h.markDirty(), this.emit("crosshairMove", this.#d);
+    this.#X = "time", this.#d = { mediaX: r, mediaY: n, time: i, y: s }, this.#h.markDirty(), this.emit("crosshairMove", this.#d);
   }
   /** Get the last visible value and whether the absolute last point is on screen. */
   getLastValue(t) {
-    return Z(t, this.#t, this.#s.getAnimationState().xRange);
+    return G(t, this.#t, this.#s.getAnimationState().xRange);
   }
   /** Get the second-to-last value, useful for computing change. */
   getPreviousClose(t) {
-    return _(t, this.#t);
+    return U(t, this.#t);
   }
   getLastData(t) {
     const i = this.#t.find((e) => e.id === t);
-    return !i || !S(i.renderer) ? null : i.renderer.getLastDataPoint();
+    return !i || !x(i.renderer) ? null : i.renderer.getLastDataPoint();
   }
   /** Find the data point closest to the given timestamp within one data interval. */
   getDataAtTime(t, i) {
@@ -871,7 +877,7 @@ class qt extends at {
     return e?.visible ? e.renderer.getLayerSnapshots?.(i, this.#r) ?? null : null;
   }
   getSeriesIds() {
-    return this.#T || (this.#T = this.#t.map((t) => t.id)), this.#T.slice();
+    return this.#D || (this.#D = this.#t.map((t) => t.id)), this.#D.slice();
   }
   /**
    * True if any visible series has a time axis (line / bar / candlestick).
@@ -879,12 +885,31 @@ class qt extends at {
    * has no meaningful x/y coordinate system, so the dashed hairlines would
    * just be visual noise.
    */
-  #Tt() {
+  #yt() {
     for (const t of this.#t)
-      if (t.visible && S(t.renderer))
+      if (t.visible && x(t.renderer))
         return !0;
     return !1;
   }
+  /**
+   * Whether pan/zoom gestures currently apply — true when any visible series
+   * has a time axis. Part of the {@link PanZoomTarget} surface: on a
+   * spatial-only chart (pie, heatmap) the interaction layer stops capturing
+   * wheel and touch events, so the page scrolls normally under the cursor.
+   */
+  canPanZoom() {
+    return this.#yt();
+  }
+  /**
+   * Push the current pan/zoom capability into the interaction layer (canvas
+   * `touch-action`). Wheel and mouse gates read {@link canPanZoom} live, but
+   * the CSS must be correct *before* a touch gesture starts — call this from
+   * every mutation that can flip {@link canPanZoom}: series add/remove and
+   * series visibility.
+   */
+  #j() {
+    this.#T?.syncPanZoomMode();
+  }
   /**
    * Filter `getSeriesIds()` by renderer type. A concrete kind (`'pie'`,
    * `'heatmap'`, a custom kind, …) returns series of that exact kind;
@@ -899,19 +924,19 @@ class qt extends at {
   getSeriesIdsByType(t, i) {
     const e = i?.visibleOnly === !0, s = i?.singleLayerOnly === !0, r = [];
     for (const n of this.#t) {
-      if (!(t === "time" ? S(n.renderer) : n.renderer.kind === t)) continue;
-      const h = n.renderer.getLayerCount();
-      if (!(s && h > 1)) {
+      if (!(t === "time" ? x(n.renderer) : n.renderer.kind === t)) continue;
+      const a = n.renderer.getLayerCount();
+      if (!(s && a > 1)) {
         if (e) {
           if (!n.visible) continue;
-          if (h > 1) {
-            let a = !1;
-            for (let l = 0; l < h; l++)
+          if (a > 1) {
+            let h = !1;
+            for (let l = 0; l < a; l++)
               if (n.renderer.isLayerVisible(l)) {
-                a = !0;
+                h = !0;
                 break;
               }
-            if (!a) continue;
+            if (!h) continue;
           }
         }
         r.push(n.id);
@@ -926,7 +951,7 @@ class qt extends at {
    * Returns `null` for unknown ids or empty series.
    */
   getStackedLastValue(t) {
-    return U(t, this.#t, this.#s.getAnimationState().xRange);
+    return K(t, this.#t, this.#s.getAnimationState().xRange);
   }
   /**
    * Stacked value at an arbitrary `time` — the cumulative stack top at that
@@ -983,7 +1008,7 @@ class qt extends at {
    */
   setSeriesLabels(t, i) {
     const e = this.#t.find((s) => s.id === t);
-    !e || H(e.labels, i) || (e.labels = i, this.#p());
+    !e || W(e.labels, i) || (e.labels = i, this.#p());
   }
   /**
    * Set the per-layer color overrides carried in `data` (sparse — `undefined`
@@ -994,7 +1019,7 @@ class qt extends at {
    */
   setLayerColors(t, i) {
     const e = this.#t.find((s) => s.id === t);
-    !e || St(e.colorOverrides, i) || (e.colorOverrides = i, e.renderer.setColorOverrides?.(i), this.#e.markDirty(), this.#p());
+    !e || Mt(e.colorOverrides, i) || (e.colorOverrides = i, e.renderer.setColorOverrides?.(i), this.#e.markDirty(), this.#p());
   }
   /** Get per-layer colors for a series. Returns null for single-layer non-bar/line series. */
   getSeriesLayers(t) {
@@ -1041,7 +1066,7 @@ class qt extends at {
   /** Update axis configuration and re-render. */
   setAxis(t) {
     const i = this.yAxisWidth, e = this.xAxisHeight;
-    this.#H = t, this.#l = { min: t.y?.min, max: t.y?.max }, this.#f = !0;
+    this.#W = t, this.#l = { min: t.y?.min, max: t.y?.max }, this.#f = !0;
     const s = performance.now();
     this.#s.onAxisReconfig(s), this.#v(s), (this.yAxisWidth !== i || this.xAxisHeight !== e) && this.syncScales(), this.#e.markDirty();
   }
@@ -1085,13 +1110,13 @@ class qt extends at {
    */
   setPadding(t) {
     const i = this.#c;
-    this.#c = C(t);
-    const e = this.#c, s = !R(i.left, e.left) || !R(i.right, e.right), r = i.top !== e.top || i.bottom !== e.bottom;
+    this.#c = I(t);
+    const e = this.#c, s = !P(i.left, e.left) || !P(i.right, e.right), r = i.top !== e.top || i.bottom !== e.bottom;
     if (s) {
-      const { first: n, last: h } = this.getDataBounds();
-      if (n !== void 0 && h !== void 0) {
-        const a = this.#a.size.media.width - this.yAxisWidth;
-        this.#P(n, h, a);
+      const { first: n, last: a } = this.getDataBounds();
+      if (n !== void 0 && a !== void 0) {
+        const h = this.#a.size.media.width - this.yAxisWidth;
+        this.#z(n, a, h);
       }
     }
     if (s || r) {
@@ -1103,7 +1128,18 @@ class qt extends at {
   }
   /** Show or hide the background grid. Takes effect on the next render frame. */
   setGrid(t) {
-    this.#O = t.visible, this.#e.markDirty();
+    this.#V = t.visible, this.#e.markDirty();
+  }
+  /**
+   * Set or clear the edge fade masks (see {@link ChartOptions.fade}).
+   * Content the main layer draws inside a zone dissolves toward that edge.
+   * `right` omitted re-arms its default (track the Y-axis width); pass
+   * `{ top: 0, right: 0, left: 0 }` to turn every mask off. Takes effect on
+   * the next render frame.
+   */
+  setFade(t) {
+    const i = C(t), e = this.#k;
+    i.top === e.top && i.right === e.right && i.left === e.left || (this.#k = i, this.#e.markDirty());
   }
   /**
    * Set the visual state for one side of the chart. Typically called in
@@ -1115,23 +1151,23 @@ class qt extends at {
    * symmetry and currently renders identically to `idle`.
    */
   setEdgeState(t, i) {
-    if (this.#S[t] === i) return;
-    const e = this.#S[t] === "loading", s = this.#R[t];
-    this.#R[t] = !1, this.#V[t] = e && !s && (i === "idle" || i === "has-more") ? performance.now() : null, this.#S[t] = i, this.#h.markDirty();
+    if (this.#x[t] === i) return;
+    const e = this.#x[t] === "loading", s = this.#I[t];
+    this.#I[t] = !1, this.#B[t] = e && !s && (i === "idle" || i === "has-more") ? performance.now() : null, this.#x[t] = i, this.#h.markDirty();
   }
   /** Read the current host-declared state for a given edge. */
   getEdgeState(t) {
-    return this.#S[t];
+    return this.#x[t];
   }
   /**
    * Alpha for a side's `loading` exit fade, or `null` when none is in
    * flight. Self-cleaning: an elapsed fade clears its start stamp.
    */
-  #ut(t) {
-    const i = this.#V[t];
+  #vt(t) {
+    const i = this.#B[t];
     if (i === null) return null;
-    const e = (performance.now() - i) / ft;
-    return e >= 1 ? (this.#V[t] = null, null) : 1 - L(Math.max(0, e));
+    const e = (performance.now() - i) / yt;
+    return e >= 1 ? (this.#B[t] = null, null) : 1 - R(Math.max(0, e));
   }
   /**
    * Swap the painter used for a side's `loading` spinner — the same
@@ -1140,7 +1176,7 @@ class qt extends at {
    * immediately if that side is currently in the `loading` state.
    */
   setEdgeIndicator(t, i) {
-    this.#nt[t] = i, this.#S[t] === "loading" && this.#h.markDirty();
+    this.#lt[t] = i, this.#x[t] === "loading" && this.#h.markDirty();
   }
   /**
    * Resolve the boundary point's Y position and series kind on the primary
@@ -1150,14 +1186,14 @@ class qt extends at {
    * `open` (the value immediately preceding the boundary); `right` from the
    * last visible candle's `close`.
    */
-  #Dt(t, i) {
+  #Ht(t, i) {
     const e = this.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 })[0] ?? this.getSeriesIdsByType("time", { visibleOnly: !0 })[0];
     if (!e) return null;
     const s = this.getDataAtTime(e, i);
     if (!s) return null;
     const r = this.#t.find((n) => n.id === e);
     return r ? {
-      valueY: this.yScale.valueToY(O(t, s)),
+      valueY: this.yScale.valueToY(X(t, s)),
       seriesKind: r.renderer.kind
     } : null;
   }
@@ -1167,7 +1203,7 @@ class qt extends at {
    * placeholder shapes to match the real bars that will render once data
    * lands. `null` when the viewport has no meaningful span yet.
    */
-  #Lt() {
+  #zt() {
     const t = this.timeScale.barWidthMedia(this.#r);
     return Number.isFinite(t) && t > 0 ? t : null;
   }
@@ -1186,20 +1222,20 @@ class qt extends at {
    * probed, not kind-gated: a kind check here silently kills hover for the
    * next spatial renderer.
    */
-  #G(t) {
+  #q(t) {
     const i = this.#a.size, e = this.#c, s = {
       top: e.top * i.verticalPixelRatio,
       bottom: e.bottom * i.verticalPixelRatio
     };
     let r = !1, n = null;
-    for (const h of this.#t) {
-      if (!h.renderer.hitTest || !h.renderer.setHoverIndex) continue;
-      let a = -1;
+    for (const a of this.#t) {
+      if (!a.renderer.hitTest || !a.renderer.setHoverIndex) continue;
+      let h = -1;
       if (t) {
         const l = t.mediaX * i.horizontalPixelRatio, o = t.mediaY * i.verticalPixelRatio;
-        a = h.renderer.hitTest(l, o, i.bitmap.width, i.bitmap.height, s);
+        h = a.renderer.hitTest(l, o, i.bitmap.width, i.bitmap.height, s);
       }
-      h.renderer.setHoverIndex(a) && (r = !0), a >= 0 && !n && (n = { seriesId: h.id, index: a, info: h.renderer.getHoverInfo?.(this.#n) ?? null });
+      a.renderer.setHoverIndex(h) && (r = !0), h >= 0 && !n && (n = { seriesId: a.id, index: h, info: a.renderer.getHoverInfo?.(this.#n) ?? null });
     }
     r && (this.#e.markDirty(), this.emit("seriesHover", n));
   }
@@ -1210,15 +1246,15 @@ class qt extends at {
    * Returns the first spatial series (pie, heatmap, or a custom spatial kind)
    * whose `hitTest` claims the position, or `null` if none does.
    */
-  #ft(t) {
+  #bt(t) {
     const i = this.#a.size, e = this.#c, s = {
       top: e.top * i.verticalPixelRatio,
       bottom: e.bottom * i.verticalPixelRatio
     }, r = t.mediaX * i.horizontalPixelRatio, n = t.mediaY * i.verticalPixelRatio;
-    for (const h of this.#t) {
-      if (!h.renderer.hitTest) continue;
-      const a = h.renderer.hitTest(r, n, i.bitmap.width, i.bitmap.height, s);
-      if (a >= 0) return { seriesId: h.id, index: a };
+    for (const a of this.#t) {
+      if (!a.renderer.hitTest) continue;
+      const h = a.renderer.hitTest(r, n, i.bitmap.width, i.bitmap.height, s);
+      if (h >= 0) return { seriesId: a.id, index: h };
     }
     return null;
   }
@@ -1242,40 +1278,40 @@ class qt extends at {
    * viewport didn't move, the re-derived values are bit-identical and the
    * method exits without emitting.
    */
-  #Ct() {
+  #Vt() {
     const t = this.#d;
     if (t === null) return;
-    const { from: i, to: e } = this.timeScale.getRange(), s = this.yScale.getRange(), r = Math.abs(e - i) * 1e-9, n = Math.abs(s.max - s.min) * 1e-9, h = 1e-6;
-    let a;
-    if (this.#Y === "pointer") {
+    const { from: i, to: e } = this.timeScale.getRange(), s = this.yScale.getRange(), r = Math.abs(e - i) * 1e-9, n = Math.abs(s.max - s.min) * 1e-9, a = 1e-6;
+    let h;
+    if (this.#X === "pointer") {
       const l = this.timeScale.xToTime(t.mediaX), o = this.yScale.yToValue(t.mediaY);
       if (!Number.isFinite(l) || !Number.isFinite(o) || Math.abs(l - t.time) <= r && Math.abs(o - t.y) <= n) return;
-      a = { mediaX: t.mediaX, mediaY: t.mediaY, time: l, y: o };
+      h = { mediaX: t.mediaX, mediaY: t.mediaY, time: l, y: o };
     } else {
       if (t.time < i || t.time > e) {
-        this.#d = null, this.#h.markDirty(), this.emit("crosshairMove", null), this.#G(null);
+        this.#d = null, this.#h.markDirty(), this.emit("crosshairMove", null), this.#q(null);
         return;
       }
       const l = this.timeScale.timeToX(t.time), o = this.yScale.valueToY(t.y);
-      if (!Number.isFinite(l) || !Number.isFinite(o) || Math.abs(l - t.mediaX) <= h && Math.abs(o - t.mediaY) <= h) return;
-      a = { mediaX: l, mediaY: o, time: t.time, y: t.y };
+      if (!Number.isFinite(l) || !Number.isFinite(o) || Math.abs(l - t.mediaX) <= a && Math.abs(o - t.mediaY) <= a) return;
+      h = { mediaX: l, mediaY: o, time: t.time, y: t.y };
     }
-    this.#d = a, this.#h.markDirty(), this.emit("crosshairMove", a), this.#G(a);
+    this.#d = h, this.#h.markDirty(), this.emit("crosshairMove", h), this.#q(h);
   }
   /** Tear down the chart: cancel animations, remove listeners, and detach the canvas. */
   destroy() {
     for (const t of this.#t) t.renderer.dispose();
-    this.#t = [], this.#m = [], this.#b = [], this.#y = [], this.#T = null, this.#e.destroy(), this.#h.destroy(), this.#C?.destroy(), this.#a.destroy(), this.#U?.destroy(), this.#U = null, this.#_ && this.#x?.destroy(), this.#x = null, this.#_ = !1, this.removeAllListeners();
+    this.#t = [], this.#m = [], this.#b = [], this.#y = [], this.#D = null, this.#e.destroy(), this.#h.destroy(), this.#T?.destroy(), this.#a.destroy(), this.#U?.destroy(), this.#U = null, this.#G && this.#S?.destroy(), this.#S = null, this.#G = !1, this.removeAllListeners();
   }
   /** The attached performance monitor, or `null` when instrumentation is disabled. */
   getPerfMonitor() {
-    return this.#x;
+    return this.#S;
   }
   /** Compute the earliest and latest timestamps across all series. */
   getDataBounds() {
     let t, i;
     for (const e of this.#t) {
-      if (!e.visible || !S(e.renderer)) continue;
+      if (!e.visible || !x(e.renderer)) continue;
       const s = e.renderer.getTimeBounds();
       s !== null && ((t === void 0 || s.first < t) && (t = s.first), (i === void 0 || s.last > i) && (i = s.last));
     }
@@ -1284,28 +1320,28 @@ class qt extends at {
   /** Set by `setSeriesData`/bulk-replace paths so the next `onDataChanged`
    * snaps the Y range (instead of easing) and `yScale.getRange()` reflects
    * the new domain synchronously. Cleared by `onDataChanged` after each run. */
-  #q = !1;
+  #J = !1;
   onDataChanged() {
-    if (this.#A > 0) {
-      this.#X = !0;
+    if (this.#M > 0) {
+      this.#$ = !0;
       return;
     }
     this.updateDataInterval();
     const { first: t, last: i } = this.getDataBounds();
-    t !== void 0 && (this.#k = t), i !== void 0 && (this.#z = this.#i, this.#i = i);
-    const e = this.#q;
-    this.#q = !1;
+    t !== void 0 && (this.#A = t), i !== void 0 && (this.#F = this.#i, this.#i = i);
+    const e = this.#J;
+    this.#J = !1;
     const s = !this.#f && t !== void 0;
-    e && (this.yScale.tickTracker.reset(), this.timeScale.tickTracker.reset()), this.#ht = e;
+    e && (this.yScale.tickTracker.reset(), this.timeScale.tickTracker.reset()), this.#dt = e;
     const r = performance.now();
-    e || s ? (this.#D.seed(r), this.#s.onDataReplaced(r)) : this.#s.onPointAppended(r), this.#s.lastXTarget !== null && (this.#I = !0), t !== void 0 && (this.#f = !0), this.#v(r), this.syncScales(), s ? this.#J() : this.#e.markDirty(), this.emit("dataUpdate"), this.#p();
+    e || s ? (this.#R.seed(r), this.#s.onDataReplaced(r)) : this.#s.onPointAppended(r), this.#s.lastXTarget !== null && (this.#H = !0), t !== void 0 && (this.#f = !0), this.#v(r), this.syncScales(), s ? this.#et() : this.#e.markDirty(), this.emit("dataUpdate"), this.#p();
   }
   updateDataInterval() {
     for (const t of this.#t) {
-      if (!S(t.renderer)) continue;
+      if (!x(t.renderer)) continue;
       const i = t.renderer.sampleTimes(20);
       if (i.length >= 2) {
-        this.#r = ut(i);
+        this.#r = pt(i);
         break;
       }
     }
@@ -1321,22 +1357,22 @@ class qt extends at {
    *  range — without this guard the engine would ease from `{0,0}` into
    *  the new target and the very first frame would render with a
    *  zero-width X domain. */
-  #I = !1;
+  #H = !1;
   /**
    * One-shot `setVisibleRange` argument applied on the first data arrival.
    * Captured at chart construction from {@link ChartOptions.viewport.initialRange};
    * cleared the moment it's consumed so subsequent data swaps don't snap
    * back to the initial window.
    */
-  #N;
+  #E;
   /** Last Y bounds the engine resolved into {@link AnimationState.yRange}.
    *  Used by {@link renderMain} to detect Y movement frame-to-frame so
    *  `viewportChange` only emits when the Y range actually shifted — DOM
    *  axis labels subscribe to that event and re-renders on every tick are
    *  expensive. Initialised to NaN so the first real Y emit always passes
    *  the change check. */
-  #K = Number.NaN;
-  #j = Number.NaN;
+  #Q = Number.NaN;
+  #tt = Number.NaN;
   /**
    * Sample the visible data window and return the resolved Y bounds, or
    * `null` when no series has data inside the X destination range.
@@ -1345,11 +1381,11 @@ class qt extends at {
    * converge together. Clears {@link #yInited} on empty so the next emit
    * with valid data lands as an instant snap.
    */
-  #gt(t) {
-    const i = t ?? this.#o, e = this.#l.min !== void 0 && this.#l.min !== "auto" && typeof this.#l.min != "number" || this.#l.max !== void 0 && this.#l.max !== "auto" && typeof this.#l.max != "number" ? [] : null, s = Q(i, this.#t, e);
+  #xt(t) {
+    const i = t ?? this.#o, e = this.#l.min !== void 0 && this.#l.min !== "auto" && typeof this.#l.min != "number" || this.#l.max !== void 0 && this.#l.max !== "auto" && typeof this.#l.max != "number" ? [] : null, s = et(i, this.#t, e);
     if (s === null)
       return this.#f = !1, null;
-    const r = I(this.#l.min, s.min, s.max, e ?? [], "min"), n = I(this.#l.max, s.max, s.min, e ?? [], "max");
+    const r = z(this.#l.min, s.min, s.max, e ?? [], "min"), n = z(this.#l.max, s.max, s.min, e ?? [], "max");
     return { min: r, max: n };
   }
   /**
@@ -1370,29 +1406,29 @@ class qt extends at {
    * - **autoscroll off** → `null` (no X retarget; user has panned away
    *   from the tail).
    */
-  #Rt() {
-    if (this.#k === null || this.#i === null) return null;
+  #Wt() {
+    if (this.#A === null || this.#i === null) return null;
     const { from: t, to: i } = this.#o, e = t === 0 && i === 0, s = this.#a.size.media.width - this.yAxisWidth;
     if (e) {
-      if (this.#P(this.#k, this.#i, s), this.#N !== void 0 && (this.setVisibleRange(this.#N), this.#N = void 0, !this.#u && this.#i !== null)) {
+      if (this.#z(this.#A, this.#i, s), this.#E !== void 0 && (this.setVisibleRange(this.#E), this.#E = void 0, !this.#u && this.#i !== null)) {
         const { to: n } = this.#o;
         this.#i >= n && this.#i - n <= this.#r * 1.5 && (this.#u = !0);
       }
       return this.#o;
     }
     if (!this.#u) return null;
-    if (this.#ht)
-      return this.#P(this.#k, this.#i, s), this.#o;
-    const r = J({
+    if (this.#dt)
+      return this.#z(this.#A, this.#i, s), this.#o;
+    const r = it({
       currentLogical: this.#o,
       lastTime: this.#i,
-      prevDataEnd: this.#z,
+      prevDataEnd: this.#F,
       dataInterval: this.#r,
       paddingRight: this.#c.right,
       chartWidth: s,
-      holdUntilFilled: this.#w
+      holdUntilFilled: this.#L
     });
-    return r.releaseHold && (this.#w = !1), r.reengageAutoScroll && (this.#u = !0), r.newLogical === null ? null : (this.#D.observe(performance.now()), this.#s.setXSettleMs(this.#D.pickSettleMs(this.#g.axis.x.settleMs)), this.#L(r.newLogical, { emitChange: !1, skipValidation: !0 }), this.#z = this.#i, r.newLogical);
+    return r.releaseHold && (this.#L = !1), r.reengageAutoScroll && (this.#u = !0), r.newLogical === null ? null : (this.#R.observe(performance.now()), this.#s.setXSettleMs(this.#R.pickSettleMs(this.#g.axis.x.settleMs)), this.#C(r.newLogical, { emitChange: !1, skipValidation: !0 }), this.#F = this.#i, r.newLogical);
   }
   /**
    * Fit the viewport's logical X range around a data span. Mirrors the
@@ -1400,16 +1436,16 @@ class qt extends at {
    * forces autoscroll on (data tail is in the new window by construction),
    * commits the new range via `viewport.setRange` (which emits `change`).
    */
-  #P(t, i, e) {
-    const s = this.#c, r = X({
+  #z(t, i, e) {
+    const s = this.#c, r = _({
       firstTime: t,
       lastTime: i,
       dataInterval: this.#r,
-      maxVisibleBars: this.#ot,
+      maxVisibleBars: this.#mt,
       chartWidth: e,
       padding: { left: s.left, right: s.right }
     });
-    this.#w = !1, this.#u = !0, this.#L(r, { emitChange: !0 });
+    this.#L = !1, this.#u = !0, this.#C(r, { emitChange: !0 });
   }
   /**
    * Commit a programmatic zoom — `fitContent` or `setVisibleRange`. Reads
@@ -1425,12 +1461,12 @@ class qt extends at {
    *   passes `xEase: true` so X eases instead — viewport and axis converge
    *   on the same frame.
    */
-  #W(t) {
+  #Y(t) {
     const i = this.#o;
     if (i.to <= i.from) return;
     const e = performance.now();
-    if (!this.#I || !this.#f) {
-      this.#pt(e);
+    if (!this.#H || !this.#f) {
+      this.#St(e);
       return;
     }
     this.#s.onProgrammaticZoom({ xTarget: i, xEase: t?.xEase }, e), this.#v(e);
@@ -1447,12 +1483,12 @@ class qt extends at {
    * instead of lagging on the long sticky contract. First paint still snaps
    * (same as the programmatic path) so synchronous readers see final values.
    */
-  #Mt() {
+  #Bt() {
     const t = this.#o;
     if (t.to <= t.from) return;
     const i = performance.now();
-    if (!this.#I || !this.#f) {
-      this.#pt(i);
+    if (!this.#H || !this.#f) {
+      this.#St(i);
       return;
     }
     this.#s.onPanZoom({ xTarget: t, yAuto: !0 }, i), this.#v(i);
@@ -1464,9 +1500,9 @@ class qt extends at {
    * commits — both must snap before the chart has painted once so a
    * synchronous `getYRange()` / `getVisibleRange()` read sees final values.
    */
-  #pt(t) {
-    const i = this.#o, e = this.#gt(i);
-    this.#I = !0, e !== null && (this.#f = !0), this.#s.snap({ x: i, y: e ?? void 0 }, t), this.#v(t);
+  #St(t) {
+    const i = this.#o, e = this.#xt(i);
+    this.#H = !0, e !== null && (this.#f = !0), this.#s.snap({ x: i, y: e ?? void 0 }, t), this.#v(t);
   }
   /**
    * Validate and commit a new logical X range. Mirrors the old
@@ -1486,7 +1522,7 @@ class qt extends at {
    * see `setVisibleRange`'s gesture path, where a per-frame echo would
    * otherwise re-arm and stall the in-flight Y ease.
    */
-  #L(t, i) {
+  #C(t, i) {
     const { from: e, to: s } = t;
     return !Number.isFinite(e) || !Number.isFinite(s) || s <= e || !i.skipValidation && (s - e) / this.#r < 2 || this.#o.from === e && this.#o.to === s ? !1 : (this.#o = { from: e, to: s }, i.emitChange && (this.syncScales(), this.#e?.markDirty(), this.emit("viewportChange")), !0);
   }
@@ -1496,11 +1532,11 @@ class qt extends at {
    * symmetric pad top / bottom from `#padding`, suppressed on the side
    * that has an explicit (fixed) axis bound.
    */
-  #yt(t, i, e, s, r) {
-    const n = i - t, h = e > 0 ? this.#c.top / e * n : 0, a = e > 0 ? this.#c.bottom / e * n : 0;
-    this.#F = {
-      min: s ? t : t - a,
-      max: r ? i : i + h
+  #kt(t, i, e, s, r) {
+    const n = i - t, a = e > 0 ? this.#c.top / e * n : 0, h = e > 0 ? this.#c.bottom / e * n : 0;
+    this.#O = {
+      min: s ? t : t - h,
+      max: r ? i : i + a
     };
   }
   /**
@@ -1513,18 +1549,18 @@ class qt extends at {
    * as a gesture for visual easing. Public so consumers can drive pan
    * programmatically.
    */
-  pan(t, i = this.#E) {
-    i > 0 && (this.#E = i), this.#w = !1;
-    const e = q({
+  pan(t, i = this.#N) {
+    i > 0 && (this.#N = i), this.#L = !1;
+    const e = J({
       currentLogical: this.#o,
       timeDelta: t,
       chartWidth: i,
       dataInterval: this.#r,
       padding: { left: this.#c.left, right: this.#c.right },
-      dataStart: this.#k,
+      dataStart: this.#A,
       dataEnd: this.#i
     });
-    e.newLogical !== null && (this.#u = !e.autoScrollOff, this.#L(e.newLogical, { emitChange: !0 }), e.edgeReached !== null && (this.#st[e.edgeReached.side] = e.edgeReached.boundaryTime, this.#rt?.(e.edgeReached)), this.#D.pause(), this.#vt());
+    e.newLogical !== null && (this.#u = !e.autoScrollOff, this.#C(e.newLogical, { emitChange: !0 }), e.edgeReached !== null && (this.#ht[e.edgeReached.side] = e.edgeReached.boundaryTime, this.#ot?.(e.edgeReached)), this.#R.pause(), this.#wt());
   }
   /**
    * Zoom around a time anchor. `factor < 1` zooms in, `> 1` zooms out.
@@ -1541,35 +1577,35 @@ class qt extends at {
    * and produce a visible jump). Cursor-anchored zoom is intentionally
    * sacrificed in follow-live mode — pan first to inspect history.
    */
-  zoomAt(t, i, e = this.#E) {
-    e > 0 && (this.#E = e), this.#w = !1;
-    const s = K({
+  zoomAt(t, i, e = this.#N) {
+    e > 0 && (this.#N = e), this.#L = !1;
+    const s = Q({
       currentLogical: this.#o,
       centerTime: t,
       factor: i,
       chartWidth: e,
       dataInterval: this.#r,
       padding: { left: this.#c.left, right: this.#c.right },
-      dataStart: this.#k,
+      dataStart: this.#A,
       dataEnd: this.#i
     });
     if (s.newLogical === null) return;
     let r = s.newLogical;
     if (this.#u && this.#i !== null) {
-      const n = r.to - r.from, h = M(this.#c.right, n, this.#r, e), a = this.#i + h;
-      r = { from: a - n, to: a }, this.#z = this.#i;
+      const n = r.to - r.from, a = H(this.#c.right, n, this.#r, e), h = this.#i + a;
+      r = { from: h - n, to: h }, this.#F = this.#i;
     }
-    this.#L(r, { emitChange: !0 }), this.#D.pause(), this.#vt();
+    this.#C(r, { emitChange: !0 }), this.#R.pause(), this.#wt();
   }
   /**
    * Common tail for `pan` / `zoomAt`: routes the just-committed `#logical`
    * to the engine as a gesture so the X spring retargets and the Y spring
    * eases over `animations.axis.y.gesture`.
    */
-  #vt() {
+  #wt() {
     const t = this.#o;
     if (t.to <= t.from) return;
-    this.#I = !0, this.#f = !0;
+    this.#H = !0, this.#f = !0;
     const i = performance.now();
     this.#s.onPanZoom({ xTarget: t, yAuto: !0 }, i), this.#v(i);
   }
@@ -1590,7 +1626,7 @@ class qt extends at {
     const i = this.#s.tick(t), e = this.#a.size;
     if (e.media.width === 0 || e.media.height === 0) return;
     const s = this.#l.min !== void 0 && this.#l.min !== "auto", r = this.#l.max !== void 0 && this.#l.max !== "auto", n = e.media.height - this.xAxisHeight;
-    this.#yt(i.yRange.min, i.yRange.max, n, s, r), this.#K = i.yRange.min, this.#j = i.yRange.max, this.syncScales();
+    this.#kt(i.yRange.min, i.yRange.max, n, s, r), this.#Q = i.yRange.min, this.#tt = i.yRange.max, this.syncScales();
   }
   /**
    * Lightweight scale sync: updates timeScale/yScale from current viewport state
@@ -1606,7 +1642,7 @@ class qt extends at {
       i,
       t.horizontalPixelRatio,
       this.#r
-    ), this.yScale.update(this.#F, e, t.verticalPixelRatio);
+    ), this.yScale.update(this.#O, e, t.verticalPixelRatio);
   }
   /** Expensive: background, grid, all series. Only on data/viewport/resize change. */
   renderMain(t) {
@@ -1614,64 +1650,231 @@ class qt extends at {
     if (i.media.width === 0 || i.media.height === 0) return;
     const e = typeof t == "number" ? t : performance.now(), s = this.#s.tick(e);
     s.animating && this.#e.markDirty();
-    const r = s.yRange.min, n = s.yRange.max, h = r !== this.#K || n !== this.#j;
-    if (h) {
-      const d = this.#l.min !== void 0 && this.#l.min !== "auto", c = this.#l.max !== void 0 && this.#l.max !== "auto", p = i.media.height - this.xAxisHeight;
-      this.#yt(r, n, p, d, c), this.#K = r, this.#j = n;
+    const r = s.yRange.min, n = s.yRange.max, a = r !== this.#Q || n !== this.#tt;
+    if (a) {
+      const c = this.#l.min !== void 0 && this.#l.min !== "auto", d = this.#l.max !== void 0 && this.#l.max !== "auto", p = i.media.height - this.xAxisHeight;
+      this.#kt(r, n, p, c, d), this.#Q = r, this.#tt = n;
     }
-    if (this.syncScales(), this.#Ct(), this.#i !== null && !this.#u) {
-      const d = this.#s.lastXTarget ?? this.#o, c = d.to - d.from;
-      if (c > 0) {
-        const p = this.#a.size.media.width - this.yAxisWidth, v = M(this.#c.right, c, this.#r, p), m = this.#r * 0.5;
-        Math.abs(d.to - (this.#i + v)) < m && (this.#u = !0);
+    if (this.syncScales(), this.#Vt(), this.#i !== null && !this.#u) {
+      const c = this.#s.lastXTarget ?? this.#o, d = c.to - c.from;
+      if (d > 0) {
+        const p = this.#a.size.media.width - this.yAxisWidth, f = H(this.#c.right, d, this.#r, p), m = this.#r * 0.5;
+        Math.abs(c.to - (this.#i + f)) < m && (this.#u = !0);
       }
     }
-    h && this.emit("viewportChange");
-    let a = !1, l = !1;
-    this.#a.useMainLayer((d) => {
-      const { context: c, bitmapSize: p } = d, v = (i.media.width - this.yAxisWidth) * i.horizontalPixelRatio, m = (i.media.height - this.xAxisHeight) * i.verticalPixelRatio;
-      c.clearRect(0, 0, p.width, p.height), c.save(), c.beginPath(), c.rect(0, 0, v, m), c.clip(), this.yScale.tickTracker.setCurrentTicks(this.yScale.niceTickValues()), this.timeScale.tickTracker.setCurrentTicks(this.timeScale.niceTickValues(this.#r).ticks), this.yScale.tickTracker.tick(e), this.timeScale.tickTracker.tick(e);
-      const g = this.yScale.tickTracker.snapshot(), k = this.timeScale.tickTracker.snapshot();
-      a = g.isAnimating, l = k.isAnimating, (g.isAnimating || k.isAnimating || s.animating) && this.emit("tickFrame"), this.#O && it({
-        scope: d,
+    a && this.emit("viewportChange");
+    let h = !1, l = !1;
+    this.#a.useMainLayer((c) => {
+      const { context: d, bitmapSize: p } = c, f = (i.media.width - this.yAxisWidth) * i.horizontalPixelRatio, m = (i.media.height - this.xAxisHeight) * i.verticalPixelRatio;
+      d.clearRect(0, 0, p.width, p.height), d.save(), d.beginPath();
+      const y = this.#it(c, f);
+      d.rect(0, 0, f + y.intrusion, m), d.clip(), this.yScale.tickTracker.setCurrentTicks(this.yScale.niceTickValues()), this.timeScale.tickTracker.setCurrentTicks(this.timeScale.niceTickValues(this.#r).ticks), this.yScale.tickTracker.tick(e), this.timeScale.tickTracker.tick(e);
+      const w = this.yScale.tickTracker.snapshot(), S = this.timeScale.tickTracker.snapshot();
+      h = w.isAnimating, l = S.isAnimating, (w.isAnimating || S.isAnimating || s.animating) && this.emit("tickFrame"), this.#V && rt({
+        scope: c,
         timeScale: this.timeScale,
         yScale: this.yScale,
         theme: this.#n,
-        yTicks: g,
-        timeTicks: k
-      }), this.#At(d, v, m);
-      const A = this.#c, V = { top: A.top, bottom: A.bottom }, w = this.#x;
+        yTicks: w,
+        timeTicks: S
+      }), this.#It(c, f, m);
+      const M = this.#c, B = { top: M.top, bottom: M.bottom }, L = this.#S;
       for (const b of this.#t) {
-        const x = b.renderer.getAlpha?.() ?? (b.visible ? 1 : 0);
-        if (x <= 0) continue;
+        const k = b.renderer.getAlpha?.() ?? (b.visible ? 1 : 0);
+        if (k <= 0) continue;
         const T = {
-          scope: d,
+          scope: c,
           timeScale: this.timeScale,
           yScale: this.yScale,
           theme: this.#n,
           dataInterval: this.#r,
-          padding: V,
+          padding: B,
           state: s,
           seriesId: b.id
-        }, D = c.globalAlpha;
-        if (x < 1 && (c.globalAlpha = D * x), w) {
-          const z = performance.now();
-          b.renderer.render(T), w.recordSeries(b.id, performance.now() - z, e);
+        }, D = d.globalAlpha;
+        if (k < 1 && (d.globalAlpha = D * k), L) {
+          const F = performance.now();
+          b.renderer.render(T), L.recordSeries(b.id, performance.now() - F, e);
         } else
           b.renderer.render(T);
-        x < 1 && (c.globalAlpha = D);
+        k < 1 && (d.globalAlpha = D);
       }
-      c.restore();
-    }), this.#$();
+      d.restore(), this.#Ft({
+        scope: c,
+        paneBitmapWidth: f,
+        paneBitmapHeight: m,
+        timeTicks: S
+      }), this.#At(c, m), this.#Lt(c, f);
+    }), this.#K();
     let o = !1;
-    for (const d of this.#t)
-      if (d.renderer.needsAnimation) {
+    for (const c of this.#t)
+      if (c.renderer.needsAnimation) {
         o = !0, this.#e.markDirty();
         break;
       }
-    const u = a || l;
+    const u = h || l;
     !s.animating && !o && !u && (this.yScale.tickTracker.markArmed(), this.timeScale.tickTracker.markArmed());
   }
+  /**
+   * Erase the main layer's alpha across the top fade zone so content
+   * dissolves as it approaches the top edge. `destination-out` multiplies
+   * the already-painted pixels by the mask's inverse alpha — an *erase*, not
+   * a paint-over — so the container background behind the canvas (solid or
+   * CSS gradient) shows through untouched.
+   */
+  #At(t, i) {
+    if (this.#k.top <= 0) return;
+    const e = Math.min(Math.round(this.#k.top * t.verticalPixelRatio), Math.round(i));
+    if (e < 1) return;
+    const { context: s } = t;
+    s.save(), s.globalCompositeOperation = "destination-out", s.fillStyle = this.#Nt(s, e), s.fillRect(0, 0, t.bitmapSize.width, e), s.restore();
+  }
+  /**
+   * Run the vertical gridlines a short stub past the pane floor, dissolving
+   * to transparent on the way to the time-axis labels — the bottom-edge
+   * mirror of the horizontal gridlines melting under the Y-axis column.
+   * Drawn outside the pane clip (the stubs live below the pane, where
+   * nothing else paints) and faded with the same destination-out ramp the
+   * edge masks use, so the taper stays correct over any background.
+   */
+  #Ft(t) {
+    if (!this.#V || this.xAxisHeight === 0) return;
+    const { scope: i, paneBitmapWidth: e, paneBitmapHeight: s, timeTicks: r } = t, { context: n, horizontalPixelRatio: a, verticalPixelRatio: h } = i, l = Math.round(s), o = Math.round(A * h);
+    if (o < 1) return;
+    const u = this.#n.grid;
+    n.save(), n.strokeStyle = u.color, u.style === "dashed" ? n.setLineDash([4 * a, 4 * a]) : u.style === "dotted" && n.setLineDash([1 * a, 3 * a]), n.lineDashOffset = l;
+    const c = Math.max(1, Math.round(a)), d = c % 2 === 1 ? 0.5 : 0;
+    n.lineWidth = c;
+    const p = Math.round(e);
+    for (const { value: f, opacity: m } of r.entries) {
+      if (m <= 0.01) continue;
+      const y = Math.round(this.timeScale.timeToBitmapX(f)) + d;
+      y < 0 || y > p || (n.globalAlpha = m, n.beginPath(), n.moveTo(y, l), n.lineTo(y, l + o), n.stroke());
+    }
+    n.restore(), this.#Mt(i, s);
+  }
+  /**
+   * Erase ramp over the below-pane overrun strip — the gridline tail stubs
+   * on the main layer, the crosshair's overrun on the overlay. Nothing
+   * erased at the pane floor, total at the strip's bottom edge, so whatever
+   * crosses the floor tapers out short of the time-axis labels.
+   */
+  #Mt(t, i) {
+    if (this.xAxisHeight === 0) return;
+    const e = Math.round(i), s = Math.round(A * t.verticalPixelRatio);
+    if (s < 1) return;
+    const { context: r } = t;
+    r.save(), r.globalCompositeOperation = "destination-out", r.fillStyle = this.#Yt({ context: r, start: e, height: s }), r.fillRect(0, e, t.bitmapSize.width, s), r.restore();
+  }
+  /**
+   * Crosshair hairlines with the same edge melt the main layer runs: the
+   * pane clip widens by the right-fade intrusion and by a gridline-tail's
+   * overrun below the floor, then the shared erase ramps dissolve the
+   * overhangs — the vertical line tapers toward the time-axis labels in
+   * step with the gridline stubs and the horizontal line rides under the
+   * Y-axis column toward its label instead of stopping dead at the pane
+   * edge. Erases alpha (destination-out), so it must run while the
+   * crosshair is the only content on the layer.
+   */
+  #Ot(t) {
+    const i = this.#d;
+    if (i === null) return;
+    const { scope: e, chartBitmapWidth: s, chartBitmapHeight: r } = t, { context: n } = e, a = this.#it(e, s), h = this.xAxisHeight > 0 ? Math.round(A * e.verticalPixelRatio) : 0;
+    n.save(), n.beginPath(), n.rect(0, 0, s + a.intrusion, r + h), n.clip(), st({
+      scope: e,
+      bitmapX: i.mediaX * e.horizontalPixelRatio,
+      bitmapY: i.mediaY * e.verticalPixelRatio,
+      theme: this.#n,
+      pane: { width: s, height: r }
+    }), n.restore(), this.#Mt(e, r), this.#At(e, r), this.#Lt(e, s);
+  }
+  /**
+   * Horizontal companions to {@link #applyTopFade}: dissolve content that
+   * rides under the Y-axis column on the right (the pane clip is widened by
+   * the same zone) and, when configured, content leaving through the left
+   * pane edge. Same destination-out erase — background-safe over gradients.
+   * Runs the full bitmap height so the below-pane gridline tail stubs melt
+   * at the edges in step with their lines above.
+   */
+  #Lt(t, i) {
+    const { context: e } = t, s = t.bitmapSize.height, r = this.#it(t, i);
+    r.width >= 1 && (e.save(), e.globalCompositeOperation = "destination-out", e.fillStyle = this.#Et({ context: e, start: r.start, width: r.width }), e.fillRect(r.start, 0, r.width, s), e.restore());
+    const n = Math.min(Math.round(this.#k.left * t.horizontalPixelRatio), Math.round(i));
+    n >= 1 && (e.save(), e.globalCompositeOperation = "destination-out", e.fillStyle = this.#Xt(e, n), e.fillRect(0, 0, n, s), e.restore());
+  }
+  /**
+   * Bitmap geometry of the right fade zone. The ramp finishes just inside
+   * the Y-axis column — {@link RIGHT_FADE_END_GAP_PX} past the pane edge,
+   * still short of where the right-anchored label glyphs start — so content
+   * is fully erased before it can cross any axis text. Everything wider
+   * spills backward into the pane as the soft lead-in. `width: 0` (axis
+   * hidden, or `right: 0`) means no zone; `intrusion` is what the pane clip
+   * extends by (content past the ramp is total-erased anyway, so the clip
+   * stops with the ramp).
+   */
+  #it(t, i) {
+    const e = { start: 0, width: 0, intrusion: 0 }, s = Math.max(0, Math.round(t.bitmapSize.width - i));
+    if (s === 0) return e;
+    const r = t.horizontalPixelRatio, n = Math.min(Math.round(xt * r), s), a = this.#k.right === null ? n + Math.round(bt * r) : Math.round(this.#k.right * r);
+    if (a < 1) return e;
+    const h = i + n, l = Math.min(a, h);
+    return { start: h - l, width: l, intrusion: n };
+  }
+  /** Memoized mask gradient — rebuilt only when the bitmap zone height
+   *  changes (resize, DPR change, `setFade`). Ease-out ramp (`1 - t²`):
+   *  near-total erasure across the upper half keeps a floating header
+   *  legible, then a soft tail into full opacity at the zone's bottom. */
+  #Nt(t, i) {
+    const e = this.#w.top;
+    if (e !== null && e.height === i) return e.gradient;
+    const s = t.createLinearGradient(0, 0, 0, i);
+    for (let r = 0; r <= 4; r++) {
+      const n = r / 4;
+      s.addColorStop(n, `rgba(0, 0, 0, ${1 - n * n})`);
+    }
+    return this.#w.top = { height: i, gradient: s }, s;
+  }
+  /** Right-zone mask — erase grows from 0 at the ramp's inner start to
+   *  total at its outer end on an ease-in (`s³`): zero slope *and* zero
+   *  curvature at the entry, so the in-pane lead-in barely dims the newest
+   *  candles at rest and the aggressive erasing all happens deep under the
+   *  axis column. Nine stops keep the piecewise interpolation smooth across
+   *  the zone. */
+  #Et(t) {
+    const i = this.#w.right;
+    if (i !== null && i.start === t.start && i.width === t.width) return i.gradient;
+    const e = t.context.createLinearGradient(t.start, 0, t.start + t.width, 0);
+    for (let s = 0; s <= 8; s++) {
+      const r = s / 8;
+      e.addColorStop(r, `rgba(0, 0, 0, ${r * r * r})`);
+    }
+    return this.#w.right = { start: t.start, width: t.width, gradient: e }, e;
+  }
+  /** Erase ramp for the gridline tail stubs — nothing erased at the pane
+   *  floor, total at the stub tip, ease-in (`t²`) so a stub holds strength
+   *  briefly before melting away short of the label glyphs. */
+  #Yt(t) {
+    const i = this.#w.tail;
+    if (i !== null && i.start === t.start && i.height === t.height) return i.gradient;
+    const e = t.context.createLinearGradient(0, t.start, 0, t.start + t.height);
+    for (let s = 0; s <= 4; s++) {
+      const r = s / 4;
+      e.addColorStop(r, `rgba(0, 0, 0, ${r * r})`);
+    }
+    return this.#w.tail = { start: t.start, height: t.height, gradient: e }, e;
+  }
+  /** Left-zone mask — mirror of the top ramp: total erase at the canvas
+   *  edge, fully opaque at the zone's inner boundary. */
+  #Xt(t, i) {
+    const e = this.#w.left;
+    if (e !== null && e.width === i) return e.gradient;
+    const s = t.createLinearGradient(0, 0, i, 0);
+    for (let r = 0; r <= 4; r++) {
+      const n = r / 4;
+      s.addColorStop(n, `rgba(0, 0, 0, ${1 - n * n})`);
+    }
+    return this.#w.left = { width: i, gradient: s }, s;
+  }
   /**
    * Paint a full frame: the main layer, then the overlay synchronously on
    * top so both land in the same browser paint. The overlay scheduler's
@@ -1681,13 +1884,13 @@ class qt extends at {
    * `markDirty` calls made *during* `renderOverlay` (pulse, edge spinner)
    * land after the consume and re-arm cleanly for the next frame.
    */
-  #J(t) {
-    this.#Q("main", t, () => this.renderMain(t)), this.#h.consume(), this.#Q("overlay", t, () => this.renderOverlay(t));
+  #et(t) {
+    this.#st("main", t, () => this.renderMain(t)), this.#h.consume(), this.#st("overlay", t, () => this.renderOverlay(t));
   }
   /** Run a layer's paint, booking duration + draw calls to the perf monitor
    *  when one is attached — keeps overlay time out of the `main` samples. */
-  #Q(t, i, e) {
-    const s = this.#x;
+  #st(t, i, e) {
+    const s = this.#S;
     if (!s) {
       e();
       return;
@@ -1708,21 +1911,18 @@ class qt extends at {
       }
     this.#m.some((o) => o.pulse) && (e = !0);
     const s = {
-      left: this.#R.left && this.#S.left === "loading" ? "idle" : this.#S.left,
-      right: this.#R.right && this.#S.right === "loading" ? "idle" : this.#S.right
+      left: this.#I.left && this.#x.left === "loading" ? "idle" : this.#x.left,
+      right: this.#I.right && this.#x.right === "loading" ? "idle" : this.#x.right
     }, r = {
-      left: this.#ut("left"),
-      right: this.#ut("right")
-    }, n = r.left !== null || r.right !== null, h = s.left === "loading" || s.right === "loading" || n, a = s.left !== "idle" || s.right !== "idle" || n, l = !!this.#d || e || a || this.#m.length > 0 || this.#y.length > 0;
-    if (!(!l && !this.#et)) {
-      if (this.#et = l, this.#a.useOverlayLayer((o) => {
+      left: this.#vt("left"),
+      right: this.#vt("right")
+    }, n = r.left !== null || r.right !== null, a = s.left === "loading" || s.right === "loading" || n, h = s.left !== "idle" || s.right !== "idle" || n, l = !!this.#d || e || h || this.#m.length > 0 || this.#y.length > 0;
+    if (!(!l && !this.#at)) {
+      if (this.#at = l, this.#a.useOverlayLayer((o) => {
         if (!l) return;
-        const u = (i.media.width - this.yAxisWidth) * i.horizontalPixelRatio, d = (i.media.height - this.xAxisHeight) * i.verticalPixelRatio;
-        if (o.context.save(), o.context.beginPath(), o.context.rect(0, 0, u, d), o.context.clip(), this.#d && this.#Tt()) {
-          const m = this.#d.mediaX * i.horizontalPixelRatio, g = this.#d.mediaY * i.verticalPixelRatio;
-          tt(o, m, g, this.#n);
-        }
-        const c = this.#c, p = { top: c.top, bottom: c.bottom }, v = this.#s.getAnimationState();
+        const u = (i.media.width - this.yAxisWidth) * i.horizontalPixelRatio, c = (i.media.height - this.xAxisHeight) * i.verticalPixelRatio;
+        this.#d && this.#yt() && this.#Ot({ scope: o, chartBitmapWidth: u, chartBitmapHeight: c }), o.context.save(), o.context.beginPath(), o.context.rect(0, 0, u, c), o.context.clip();
+        const d = this.#c, p = { top: d.top, bottom: d.bottom }, f = this.#s.getAnimationState();
         for (const m of this.#t)
           m.visible && m.renderer.drawOverlay?.({
             scope: o,
@@ -1732,10 +1932,10 @@ class qt extends at {
             dataInterval: this.#r,
             padding: p,
             crosshair: this.#d,
-            state: v,
+            state: f,
             seriesId: m.id
           });
-        this.#wt(o, u, d), this.#kt(o, u, d), a && Y({
+        this.#Pt(o, u, c), this.#Ct(o, u, c), h && Z({
           scope: o,
           chartMediaWidth: i.media.width - this.yAxisWidth,
           chartMediaHeight: i.media.height - this.xAxisHeight,
@@ -1743,35 +1943,35 @@ class qt extends at {
           theme: this.#n,
           edgeStates: s,
           edgeExitFades: r,
-          edgeIndicatorFns: this.#nt,
-          resolveBoundary: (m) => B(m, this.#st[m], this.getDataBounds()),
-          resolveEdgeAnchor: (m, g) => this.#Dt(m, g),
-          resolveEdgeBarSpacing: () => this.#Lt(),
-          reportPlaceholders: (m, g) => {
-            this.#B[m] = { bars: g, at: performance.now() };
+          edgeIndicatorFns: this.#lt,
+          resolveBoundary: (m) => $(m, this.#ht[m], this.getDataBounds()),
+          resolveEdgeAnchor: (m, y) => this.#Ht(m, y),
+          resolveEdgeBarSpacing: () => this.#zt(),
+          reportPlaceholders: (m, y) => {
+            this.#Z[m] = { bars: y, at: performance.now() };
           }
         }), o.context.restore();
       }), e) {
         const { from: o, to: u } = this.timeScale.getRange();
-        let d = !1;
-        for (const c of this.#t)
-          if (!(!c.visible || !c.renderer.overlayNeedsAnimation) && (c.renderer.hasOverlayContentInRange?.(o, u) ?? !0)) {
-            d = !0;
+        let c = !1;
+        for (const d of this.#t)
+          if (!(!d.visible || !d.renderer.overlayNeedsAnimation) && (d.renderer.hasOverlayContentInRange?.(o, u) ?? !0)) {
+            c = !0;
             break;
           }
-        if (!d) {
-          for (const c of this.#m)
-            if (c.pulse && c.time >= o && c.time <= u) {
-              d = !0;
+        if (!c) {
+          for (const d of this.#m)
+            if (d.pulse && d.time >= o && d.time <= u) {
+              c = !0;
               break;
             }
         }
-        d && this.#h.markDirty();
+        c && this.#h.markDirty();
       }
-      h && this.#h.markDirty();
+      a && this.#h.markDirty();
     }
   }
 }
 export {
-  qt as ChartInstance
+  ti as ChartInstance
 };