@wick-charts/vue 0.4.1 → 0.5.0

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

@@ -0,0 +1,453 @@
+import { ChartInstance as R } from "../chart.js";
+import { LineSeriesDef as E } from "../series/line.js";
+import { PerfMonitor as g } from "./perf-monitor.js";
+import { createTheme as T } from "../theme/create.js";
+function J(i) {
+  const e = i instanceof g;
+  return {
+    monitor: e ? i : new g(i),
+    hud: (t, n) => new D(t, n),
+    ownsMonitor: !e
+  };
+}
+const P = 100, z = 600, f = 250, F = 1e3 / 60, H = 1e3 / 120, m = 60, b = 4, j = 34, S = 64, L = 24;
+function I(i) {
+  let e = 0;
+  for (const t of i)
+    t > e && (e = t);
+  return Math.max(10, Math.ceil(e / 10) * 10);
+}
+function O(i) {
+  return -I(i) / 12;
+}
+const B = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f", V = "#f5c451", $ = "#f4756a", Y = "#5d6877", X = {
+  position: "absolute",
+  top: "8px",
+  right: "8px",
+  // Fixed width on purpose: a content-driven box changes width whenever a
+  // streamed value gains or loses a digit, which makes the whole panel (and
+  // the nested sparkline chart tracking it) visibly twitch.
+  width: "216px",
+  boxSizing: "border-box",
+  padding: "8px 10px 9px",
+  background: "linear-gradient(165deg, rgba(22, 26, 36, 0.92), rgba(10, 12, 18, 0.88))",
+  border: "1px solid rgba(255, 255, 255, 0.09)",
+  borderRadius: "10px",
+  boxShadow: "0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+  color: B,
+  font: "10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
+  fontVariantNumeric: "tabular-nums",
+  letterSpacing: "0.02em",
+  pointerEvents: "none",
+  zIndex: "20"
+}, k = "wick-perf-hud-style";
+function G(i) {
+  if (i.getElementById(k)) return;
+  const e = i.createElement("style");
+  e.id = k, e.textContent = `@keyframes wick-perf-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 143, 0.55); }
+  50% { box-shadow: 0 0 0 4px rgba(63, 214, 143, 0); }
+}`, i.head.appendChild(e);
+}
+function v(i) {
+  return i <= H ? y : i <= F ? V : $;
+}
+function A(i) {
+  return i >= 1e6 ? `${(i / 1e6).toFixed(1)}M` : i >= 1e4 ? `${(i / 1e3).toFixed(1)}k` : Math.round(i).toLocaleString("en-US");
+}
+function w(i, e, t) {
+  return e > t ? e : Math.min(Math.max(i, e), t);
+}
+function M(i) {
+  let e = 0;
+  for (const t of Object.values(i))
+    e += t;
+  return e;
+}
+function h(i) {
+  const e = i.doc.createElement("span");
+  return e.style.textAlign = i.align ?? "right", e.style.color = i.color ?? "", i.perfId && e.setAttribute("data-perf", i.perfId), e;
+}
+class D {
+  element;
+  unsubscribe;
+  updateIntervalMs;
+  sampleTimer;
+  dot;
+  fpsValue;
+  fpsSuffix;
+  header;
+  titleEl;
+  body;
+  sparkHost;
+  sparkMaxTick;
+  minimizeButton;
+  sparkChart = null;
+  sparkSeriesId = null;
+  mode = "mini";
+  mainCells;
+  overlayCells;
+  seriesSection;
+  seriesGrid;
+  heapRow;
+  heapValue;
+  seriesCells = /* @__PURE__ */ new Map();
+  status = null;
+  /** Consecutive zero samples streamed into the sparkline since the last live frame. */
+  idleStubCount = 0;
+  /** Most recent hero render rate, refreshed on every frame; the sample ticker plots it. */
+  lastHeroFps = 0;
+  /** Current drag offset, applied as a `translate` on the panel. */
+  dragX = 0;
+  dragY = 0;
+  lastFrameAt = 0;
+  lastUpdate = 0;
+  constructor(e, t, n = P) {
+    this.updateIntervalMs = n;
+    for (const p of e.querySelectorAll("[data-chart-perf-hud]"))
+      p.remove();
+    const s = e.ownerDocument;
+    G(s), this.element = s.createElement("div"), this.element.setAttribute("data-chart-perf-hud", ""), Object.assign(this.element.style, X), this.element.style.setProperty("backdrop-filter", "blur(10px) saturate(1.3)"), this.element.style.setProperty("-webkit-backdrop-filter", "blur(10px) saturate(1.3)"), this.sparkHost = s.createElement("div"), this.sparkHost.style.overflow = "hidden", this.header = s.createElement("div");
+    const r = this.header;
+    Object.assign(r.style, {
+      position: "relative",
+      zIndex: "1",
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      pointerEvents: "auto",
+      cursor: "grab"
+    }), this.dot = s.createElement("span"), Object.assign(this.dot.style, {
+      width: "7px",
+      height: "7px",
+      borderRadius: "50%",
+      flexShrink: "0"
+    }), this.titleEl = s.createElement("span");
+    const o = this.titleEl;
+    o.textContent = "PERF", Object.assign(o.style, {
+      fontSize: "9px",
+      fontWeight: "700",
+      letterSpacing: "0.18em",
+      color: x
+    }), this.minimizeButton = s.createElement("button"), this.minimizeButton.type = "button", this.minimizeButton.textContent = "–", this.minimizeButton.title = "Collapse to FPS square", Object.assign(this.minimizeButton.style, {
+      pointerEvents: "auto",
+      cursor: "pointer",
+      font: "inherit",
+      fontSize: "8px",
+      lineHeight: "1",
+      color: c,
+      background: "transparent",
+      border: "1px solid rgba(255, 255, 255, 0.14)",
+      borderRadius: "4px",
+      padding: "2px 5px"
+    }), this.minimizeButton.addEventListener("pointerdown", (p) => p.stopPropagation()), this.minimizeButton.addEventListener("click", () => this.setMode("mini"));
+    const l = s.createElement("span");
+    l.style.flex = "1", this.fpsValue = h({ doc: s, perfId: "hero-fps" }), Object.assign(this.fpsValue.style, {
+      fontSize: "16px",
+      fontWeight: "700",
+      lineHeight: "1",
+      color: C
+    }), this.fpsValue.textContent = "—", this.fpsSuffix = s.createElement("span"), this.fpsSuffix.textContent = "fps", Object.assign(this.fpsSuffix.style, {
+      fontSize: "9px",
+      color: c,
+      alignSelf: "flex-end"
+    }), r.append(this.dot, o, this.minimizeButton, l, this.fpsValue, this.fpsSuffix), this.installDrag(e), this.body = s.createElement("div"), this.body.style.position = "relative", this.body.style.zIndex = "1";
+    const a = s.createElement("div");
+    Object.assign(a.style, {
+      display: "grid",
+      gridTemplateColumns: "minmax(44px, 1fr) repeat(3, auto)",
+      columnGap: "8px",
+      rowGap: "2px",
+      marginTop: "7px"
+    });
+    for (const p of ["", "fps", "ms", "calls/s"]) {
+      const u = h({ doc: s, align: p === "" ? "left" : "right", color: c });
+      u.textContent = p, u.style.fontSize = "9px", a.appendChild(u);
+    }
+    this.mainCells = this.appendLayerRow({ doc: s, grid: a, label: "main", perfPrefix: "main" }), this.overlayCells = this.appendLayerRow({ doc: s, grid: a, label: "overlay", perfPrefix: "overlay" }), this.seriesSection = s.createElement("div"), this.seriesSection.style.display = "none", this.seriesSection.style.marginTop = "6px", this.seriesSection.style.paddingTop = "5px", this.seriesSection.style.borderTop = "1px solid rgba(255, 255, 255, 0.07)", this.seriesGrid = s.createElement("div"), Object.assign(this.seriesGrid.style, {
+      display: "grid",
+      gridTemplateColumns: "minmax(44px, 1fr) auto",
+      columnGap: "8px",
+      rowGap: "2px"
+    }), this.seriesSection.appendChild(this.seriesGrid), this.heapRow = s.createElement("div"), Object.assign(this.heapRow.style, {
+      display: "none",
+      justifyContent: "space-between",
+      marginTop: "6px",
+      fontSize: "9px",
+      color: c
+    });
+    const d = s.createElement("span");
+    d.textContent = "heap", this.heapValue = h({ doc: s, perfId: "heap" }), this.heapValue.textContent = "—", this.heapRow.append(d, this.heapValue), performance.memory && (this.heapRow.style.display = "flex"), this.sparkMaxTick = s.createElement("span"), this.sparkMaxTick.setAttribute("data-perf", "spark-max"), Object.assign(this.sparkMaxTick.style, {
+      position: "absolute",
+      display: "none",
+      fontSize: "8px",
+      lineHeight: "1",
+      letterSpacing: "0.05em",
+      color: c,
+      zIndex: "1"
+    }), this.body.append(a, this.seriesSection, this.heapRow), this.element.append(this.sparkHost, r, this.body, this.sparkMaxTick), e.appendChild(this.element), this.applyMode(), this.setStatus("waiting"), this.sampleTimer = setInterval(() => this.onSampleTick(), f), this.unsubscribe = t.onFrame((p) => this.onFrame(p));
+  }
+  destroy() {
+    clearInterval(this.sampleTimer), this.unsubscribe(), this.sparkChart?.destroy(), this.element.remove();
+  }
+  setMode(e) {
+    this.mode !== e && (this.mode = e, this.applyMode());
+  }
+  /**
+   * Apply the panel mode. Mini is a compact square — status dot, hero FPS
+   * and the graph as background; a click anywhere expands. Full is the
+   * complete stats panel with the `–` header button to collapse back.
+   */
+  applyMode() {
+    const e = this.mode === "mini";
+    e ? (Object.assign(this.element.style, {
+      width: `${S}px`,
+      height: `${S}px`,
+      padding: "7px 8px",
+      pointerEvents: "auto",
+      cursor: "pointer"
+    }), this.element.title = "Click to expand") : (Object.assign(this.element.style, {
+      width: "216px",
+      height: "auto",
+      padding: "8px 10px 9px",
+      pointerEvents: "none",
+      cursor: ""
+    }), this.element.title = ""), this.titleEl.style.display = e ? "none" : "", this.minimizeButton.style.display = e ? "none" : "", this.fpsValue.style.fontSize = e ? "13px" : "16px", this.body.style.display = e ? "none" : "", this.header.style.cursor = e ? "pointer" : "grab", this.status === "live" && (this.fpsSuffix.style.display = e ? "none" : ""), this.applySparkLayout();
+  }
+  /**
+   * Place the FPS graph for the current mode. Mini fills the square as a
+   * background; full shows a dedicated strip between header and table. The
+   * nested chart is created once and then reconfigured in place — tearing it
+   * down on a mode switch would wipe the FPS history on every
+   * expand/collapse.
+   */
+  applySparkLayout() {
+    if (this.mode === "mini" ? (Object.assign(this.sparkHost.style, {
+      position: "absolute",
+      inset: "0",
+      height: "auto",
+      marginTop: "0",
+      borderRadius: "inherit",
+      opacity: "0.75",
+      zIndex: "0"
+    }), this.element.insertBefore(this.sparkHost, this.element.firstChild)) : (Object.assign(this.sparkHost.style, {
+      position: "relative",
+      inset: "auto",
+      height: `${j}px`,
+      marginTop: "7px",
+      borderRadius: "4px",
+      opacity: "1",
+      zIndex: "0"
+    }), this.body.insertBefore(this.sparkHost, this.body.firstChild)), this.sparkChart)
+      this.sparkChart.setPadding({ top: this.sparkPaddingTop(), bottom: 4, left: 0, right: 0 });
+    else {
+      const t = this.createSparkChart(this.sparkHost);
+      this.sparkChart = t?.chart ?? null, this.sparkSeriesId = t?.seriesId ?? null;
+    }
+    const e = this.body.offsetTop + this.sparkHost.offsetTop;
+    this.sparkMaxTick.style.top = `${e + 2}px`, this.sparkMaxTick.style.left = "12px", this.sparkMaxTick.style.display = this.sparkChart && this.mode === "full" ? "" : "none";
+  }
+  /**
+   * The sparkline is itself a wick chart: a single-layer area line of the
+   * render rate on a chrome-less ChartInstance — no axes, no grid, no
+   * interactions. Dogfooding buys the library's own streaming behavior for
+   * free: spring tail-scroll on appends, smooth last-value chase, and the
+   * sticky-Y contraction when a rate spike leaves the window.
+   *
+   * Seeding goes through `setSeriesData` on purpose — that is the bulk path
+   * whose `onDataChanged` consumes `viewport.initialRange`, pinning the
+   * window at full capacity from the first paint (the React Sparkline's
+   * "flow" mode). Seeding via `appendData` would leave the viewport fitted
+   * to the two seed points and every sample would span half the panel.
+   *
+   * Two guards keep the measurement honest: the nested chart carries no
+   * `perf` config (no recursive HUD, nothing added to the measured monitor),
+   * and it draws on its own canvases inside the HUD panel. Construction is
+   * best-effort — in environments without a 2D canvas the HUD just drops the
+   * sparkline and keeps the numeric panel.
+   */
+  createSparkChart(e) {
+    try {
+      const t = performance.now(), n = new R(e, {
+        theme: T({ background: "#10141c" }).theme,
+        axis: {
+          y: { visible: !1, width: 0, min: O, max: I },
+          x: { visible: !1, height: 0 }
+        },
+        // Bottom padding keeps the zero baseline clearly on canvas — at 0 the
+        // 1px stroke drowns in the panel's bottom border and rounding.
+        padding: {
+          top: this.sparkPaddingTop(),
+          bottom: 4,
+          left: 0,
+          right: 0
+        },
+        grid: { visible: !1 },
+        interactive: !1,
+        viewport: {
+          maxVisibleBars: m,
+          initialRange: {
+            from: t - m * f,
+            to: t
+          }
+        }
+      }), s = n.addSeries(E, {
+        strokeWidth: 1,
+        curve: "smooth",
+        area: { visible: !0 },
+        pulse: !1
+      });
+      n.setLayerColors(s, [y]);
+      const r = [];
+      for (let o = m + b; o >= 0; o--)
+        r.push({ time: t - o * f, value: 0 });
+      return n.setSeriesData(s, r), { chart: n, seriesId: s };
+    } catch {
+      return null;
+    }
+  }
+  /** Keeps the plateau below the FPS number (mini) or the Y tick (strip). */
+  sparkPaddingTop() {
+    return this.mode === "mini" ? L : 12;
+  }
+  /** Append one FPS sample to the sparkline chart and roll its window. */
+  appendSpark(e) {
+    !this.sparkChart || !this.sparkSeriesId || (this.sparkChart.appendData(this.sparkSeriesId, { time: performance.now(), value: e }), this.sparkChart.keepLast(this.sparkSeriesId, m + b));
+  }
+  /**
+   * Drag-to-reposition, attached to the panel itself. In full mode the panel
+   * is `pointer-events: none`, so gestures only start from the header (its
+   * events bubble up here) and the chart underneath keeps receiving
+   * crosshair moves; in mini mode the whole square is the handle. A press
+   * that never moves is a click — in mini mode it expands the panel.
+   *
+   * Movement is applied as a `translate` transform: a `left`/`top` change
+   * would re-layout the panel and resize-observe the nested graph chart on
+   * every pointer move. Pointer capture keeps the gesture on the panel, so
+   * no document-level listeners to clean up.
+   */
+  installDrag(e) {
+    const t = this.element;
+    t.style.touchAction = "none", t.style.userSelect = "none";
+    let n = 0, s = 0, r = 0, o = 0, l = { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+    t.addEventListener("pointerdown", (a) => {
+      const d = e.getBoundingClientRect(), p = t.getBoundingClientRect();
+      n = a.clientX, s = a.clientY, r = this.dragX, o = this.dragY, l = {
+        minX: r + (d.left - p.left),
+        maxX: r + (d.right - p.right),
+        minY: o + (d.top - p.top),
+        maxY: o + (d.bottom - p.bottom)
+      }, t.setPointerCapture(a.pointerId), a.preventDefault();
+    }), t.addEventListener("pointermove", (a) => {
+      t.hasPointerCapture(a.pointerId) && (this.dragX = w(r + (a.clientX - n), l.minX, l.maxX), this.dragY = w(o + (a.clientY - s), l.minY, l.maxY), t.style.transform = `translate(${this.dragX}px, ${this.dragY}px)`);
+    }), t.addEventListener("pointerup", (a) => {
+      if (!t.hasPointerCapture(a.pointerId)) return;
+      t.releasePointerCapture(a.pointerId);
+      const d = Math.hypot(a.clientX - n, a.clientY - s);
+      this.mode === "mini" && d < 5 && this.setMode("full");
+    }), t.addEventListener("pointercancel", (a) => {
+      t.hasPointerCapture(a.pointerId) && t.releasePointerCapture(a.pointerId);
+    });
+  }
+  appendLayerRow(e) {
+    const { doc: t, grid: n, label: s, perfPrefix: r } = e, o = h({ doc: t, align: "left", color: x });
+    o.textContent = s;
+    const l = {
+      fps: h({ doc: t, perfId: `${r}-fps` }),
+      ms: h({ doc: t, perfId: `${r}-ms` }),
+      calls: h({ doc: t, perfId: `${r}-calls` })
+    };
+    return l.fps.textContent = "—", l.ms.textContent = "—", l.calls.textContent = "—", n.append(o, l.fps, l.ms, l.calls), l;
+  }
+  setStatus(e) {
+    if (this.status !== e) {
+      if (this.status = e, this.element.setAttribute("data-perf-state", e), e === "live") {
+        this.dot.style.background = y, this.dot.style.animation = "wick-perf-pulse 1.6s ease-out infinite", this.fpsValue.style.color = C, this.fpsSuffix.style.display = this.mode === "mini" ? "none" : "", this.body.style.opacity = "1";
+        return;
+      }
+      this.dot.style.background = Y, this.dot.style.animation = "none", this.fpsValue.style.color = c, this.fpsValue.textContent = e === "idle" ? "idle" : "—", this.fpsSuffix.style.display = "none", this.body.style.opacity = "0.6";
+    }
+  }
+  onFrame(e) {
+    const t = performance.now();
+    this.lastFrameAt = t, this.lastHeroFps = Math.max(e.mainRendersPerSec, e.overlayRendersPerSec), this.setStatus("live"), !(t - this.lastUpdate < this.updateIntervalMs) && (this.lastUpdate = t, this.render(e));
+  }
+  /**
+   * Sample ticker: every {@link SAMPLE_TICK_MS} plot one point of the hero
+   * render rate. Doubles as the idle watchdog — once frames stop, the status
+   * flips and the plotted value drops to zero, so the line visibly falls to
+   * the baseline instead of freezing at the last live reading.
+   */
+  onSampleTick() {
+    if (this.status === "waiting") return;
+    const e = performance.now() - this.lastFrameAt >= z;
+    e && this.setStatus("idle"), !(e && this.idleStubCount >= m) && (this.idleStubCount = e ? this.idleStubCount + 1 : 0, this.appendSpark(e ? 0 : this.lastHeroFps));
+  }
+  render(e) {
+    const t = Math.max(e.mainRendersPerSec, e.overlayRendersPerSec);
+    if (this.fpsValue.textContent = t >= 100 ? String(Math.round(t)) : t.toFixed(1), this.updateLayerRow({
+      cells: this.mainCells,
+      drawn: e.frameCount.main > 0,
+      fps: e.mainRendersPerSec,
+      frame: e.mainFrameMs,
+      callsPerRender: M(e.drawCalls.main)
+    }), this.updateLayerRow({
+      cells: this.overlayCells,
+      drawn: e.frameCount.overlay > 0,
+      fps: e.overlayRendersPerSec,
+      frame: e.overlayFrameMs,
+      callsPerRender: M(e.drawCalls.overlay)
+    }), this.renderSeries(e), this.renderHeap(e), this.sparkChart && this.sparkMaxTick) {
+      const { max: n } = this.sparkChart.getYRange();
+      this.sparkMaxTick.textContent = n > 0 ? `${Math.round(n)}` : "";
+    }
+  }
+  updateLayerRow(e) {
+    const { cells: t, drawn: n, fps: s, frame: r, callsPerRender: o } = e;
+    n && (t.fps.textContent = s.toFixed(1), t.ms.textContent = r.last.toFixed(2), t.ms.style.color = v(r.last), t.calls.textContent = A(o * s));
+  }
+  /**
+   * Per-series breakdown of the main pass. Single-series charts give no useful
+   * attribution — the row would just echo the main row — so the section only
+   * shows when there is more than one series to compare.
+   */
+  renderSeries(e) {
+    const t = Object.keys(e.perSeries);
+    if (t.length <= 1) {
+      this.seriesSection.style.display = "none";
+      return;
+    }
+    this.seriesSection.style.display = "", this.sameSeriesIds(t) || this.rebuildSeriesRows(t);
+    for (const n of t) {
+      const s = this.seriesCells.get(n), r = e.perSeries[n];
+      !s || !r || (s.ms.textContent = r.last.toFixed(2), s.ms.style.color = v(r.last));
+    }
+  }
+  sameSeriesIds(e) {
+    return e.length !== this.seriesCells.size ? !1 : e.every((t) => this.seriesCells.has(t));
+  }
+  rebuildSeriesRows(e) {
+    const t = this.element.ownerDocument;
+    this.seriesGrid.replaceChildren(), this.seriesCells = /* @__PURE__ */ new Map();
+    for (const n of ["series", "ms"]) {
+      const s = h({ doc: t, align: n === "series" ? "left" : "right", color: c });
+      s.textContent = n, s.style.fontSize = "9px", this.seriesGrid.appendChild(s);
+    }
+    for (const n of e) {
+      const s = h({ doc: t, align: "left", color: x });
+      s.textContent = n, s.style.overflow = "hidden", s.style.textOverflow = "ellipsis", s.style.whiteSpace = "nowrap";
+      const r = {
+        ms: h({ doc: t, perfId: `series-${n}-ms` })
+      };
+      this.seriesGrid.append(s, r.ms), this.seriesCells.set(n, r);
+    }
+  }
+  /** The row itself is reserved at construction (no layout pop) — only the value updates here. */
+  renderHeap(e) {
+    e.heapMb !== null && (this.heapRow.style.display = "flex", this.heapValue.textContent = `${e.heapMb.toFixed(1)} MB`);
+  }
+}
+export {
+  D as PerfHud,
+  J as perfHud
+};

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

@@ -0,0 +1,132 @@
+import { createCountingContext as m } from "./counting-context.js";
+const S = 5e3, u = 2e3, M = 30;
+function n(s, e, a) {
+  let t = 0;
+  for (; t < e.length && e[t] < a; ) t++;
+  t > 0 && (s.splice(0, t), e.splice(0, t));
+}
+function l(s, e, a) {
+  const t = s.length - a;
+  t > 0 && (s.splice(0, t), e.splice(0, t));
+}
+function h(s) {
+  if (s.length === 0) return { last: 0, p50: 0, p95: 0 };
+  const e = [...s].sort((a, t) => a - t);
+  return {
+    last: s[s.length - 1],
+    p50: e[Math.floor(e.length * 0.5)] ?? 0,
+    p95: e[Math.floor(e.length * 0.95)] ?? 0
+  };
+}
+const c = 300;
+function o(s) {
+  if (s.length < 2) return 0;
+  let e = s.length - 1;
+  for (; e > 0 && s[e] - s[e - 1] <= c; )
+    e--;
+  const a = s.length - 1 - e, t = s[s.length - 1] - s[e];
+  if (a > 0 && t > 0)
+    return a * 1e3 / t;
+  const r = s[s.length - 1] - s[0];
+  return r <= 0 ? 0 : (s.length - 1) * 1e3 / r;
+}
+function p(s) {
+  const e = {};
+  for (const [a, t] of s) e[a] = t;
+  return e;
+}
+class C {
+  /** Draw-call tally map for the main layer. Mutated in place by the counting context; cleared at the start of each frame. */
+  drawCallsMain = /* @__PURE__ */ new Map();
+  /** Draw-call tally map for the overlay layer. Same contract as `drawCallsMain`. */
+  drawCallsOverlay = /* @__PURE__ */ new Map();
+  mainMs = [];
+  overlayMs = [];
+  mainStamps = [];
+  overlayStamps = [];
+  perSeriesMs = /* @__PURE__ */ new Map();
+  perSeriesStamps = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  windowMs;
+  maxSamples;
+  heapInterval;
+  heapCounter = 0;
+  heapMb = null;
+  mainFrameCount = 0;
+  overlayFrameCount = 0;
+  /** Most recent frame timestamp across either layer — anchor for age-based trimming. */
+  lastStamp = 0;
+  constructor(e = {}) {
+    this.windowMs = e.windowMs ?? S, this.maxSamples = e.maxSamples ?? u, this.heapInterval = e.heapSampleEveryNFrames ?? M, this.heapCounter = this.heapInterval;
+  }
+  /** Clear the draw-call tally for the given layer. Call at the start of each frame. */
+  resetDrawCalls(e) {
+    (e === "main" ? this.drawCallsMain : this.drawCallsOverlay).clear();
+  }
+  /**
+   * Wrap a 2D context in a draw-call-counting Proxy feeding this monitor's
+   * tally for `kind`. Lives on the monitor (rather than being imported by
+   * the chart's canvas manager) so charts without instrumentation carry no
+   * perf code at all.
+   */
+  wrapContext(e, a) {
+    return m(e, a === "main" ? this.drawCallsMain : this.drawCallsOverlay);
+  }
+  /** Record a completed frame's wall-clock duration and emit stats to subscribers. */
+  recordFrame(e, a, t) {
+    if (this.lastStamp = t, e === "main" ? (this.mainMs.push(a), this.mainStamps.push(t), this.mainFrameCount++, this.sampleHeap()) : (this.overlayMs.push(a), this.overlayStamps.push(t), this.overlayFrameCount++), this.trimAll(t), this.listeners.size > 0) {
+      const r = this.getStats();
+      for (const i of this.listeners) i(r);
+    }
+  }
+  /** Record one series renderer's time slice inside the main pass. Called from inside `renderMain`, so the enclosing `recordFrame('main', …)` trim takes care of age. */
+  recordSeries(e, a, t = this.lastStamp) {
+    let r = this.perSeriesMs.get(e), i = this.perSeriesStamps.get(e);
+    (!r || !i) && (r = [], i = [], this.perSeriesMs.set(e, r), this.perSeriesStamps.set(e, i)), r.push(a), i.push(t);
+  }
+  /** Drop samples older than `windowMs` behind the newest recorded stamp, and enforce the hard per-layer cap. */
+  trimAll(e) {
+    const a = e - this.windowMs;
+    n(this.mainMs, this.mainStamps, a), n(this.overlayMs, this.overlayStamps, a), l(this.mainMs, this.mainStamps, this.maxSamples), l(this.overlayMs, this.overlayStamps, this.maxSamples);
+    for (const t of this.perSeriesMs.keys()) {
+      const r = this.perSeriesMs.get(t), i = this.perSeriesStamps.get(t);
+      !r || !i || (n(r, i, a), l(r, i, this.maxSamples));
+    }
+  }
+  /** Subscribe to per-frame stat snapshots. Returns an unsubscribe function. */
+  onFrame(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  /** Snapshot current stats. Safe to call outside frames. */
+  getStats() {
+    const e = {};
+    for (const [a, t] of this.perSeriesMs) e[a] = h(t);
+    return {
+      mainRendersPerSec: o(this.mainStamps),
+      overlayRendersPerSec: o(this.overlayStamps),
+      mainFrameMs: h(this.mainMs),
+      overlayFrameMs: h(this.overlayMs),
+      frameCount: { main: this.mainFrameCount, overlay: this.overlayFrameCount },
+      drawCalls: {
+        main: p(this.drawCallsMain),
+        overlay: p(this.drawCallsOverlay)
+      },
+      perSeries: e,
+      heapMb: this.heapMb
+    };
+  }
+  destroy() {
+    this.listeners.clear(), this.mainMs.length = 0, this.overlayMs.length = 0, this.mainStamps.length = 0, this.overlayStamps.length = 0, this.perSeriesMs.clear(), this.perSeriesStamps.clear(), this.drawCallsMain.clear(), this.drawCallsOverlay.clear(), this.mainFrameCount = 0, this.overlayFrameCount = 0, this.lastStamp = 0, this.heapCounter = 0, this.heapMb = null;
+  }
+  sampleHeap() {
+    if (this.heapCounter++, this.heapCounter < this.heapInterval) return;
+    this.heapCounter = 0;
+    const e = performance.memory;
+    this.heapMb = e ? e.usedJSHeapSize / (1024 * 1024) : null;
+  }
+}
+export {
+  C as PerfMonitor
+};

package/dist/core/dist/render-scheduler.js

@@ -0,0 +1,31 @@
+class e {
+  dirty = !1;
+  rafId = null;
+  callback;
+  onVisibilityChange = null;
+  constructor(i) {
+    this.callback = i, typeof document < "u" && (this.onVisibilityChange = () => {
+      !document.hidden && this.dirty && this.rafId === null && (this.rafId = requestAnimationFrame(this.render));
+    }, document.addEventListener("visibilitychange", this.onVisibilityChange));
+  }
+  markDirty() {
+    this.dirty || (this.dirty = !0, !(typeof document < "u" && document.hidden) && (this.rafId = requestAnimationFrame(this.render)));
+  }
+  /**
+   * Drop the pending frame without rendering — for callers that just painted
+   * the same content synchronously and would otherwise get a duplicate
+   * callback later this frame. The next `markDirty` re-arms normally.
+   */
+  consume() {
+    this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.dirty = !1;
+  }
+  render = (i) => {
+    this.dirty = !1, this.rafId = null, this.callback(i);
+  };
+  destroy() {
+    this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.dirty = !1, this.onVisibilityChange !== null && document.removeEventListener("visibilitychange", this.onVisibilityChange);
+  }
+}
+export {
+  e as RenderScheduler
+};