@vectojs/core 1.21.0 → 1.22.0

package/dist/{chunk-GKSCJ6AF.js → chunk-LHONR3GO.js}

@@ -1,6 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5;const __vecto_cjs_url=require("url").pathToFileURL(__filename).href;
 
 // src/renderer/CanvasRenderer.ts
+function emptyDrawCounters() {
+  return {
+    fills: 0,
+    strokes: 0,
+    texts: 0,
+    images: 0,
+    circles: 0,
+    flushes: 0,
+    saves: 0,
+    restores: 0,
+    clips: 0,
+    stateSwitches: 0,
+    overdrawRatio: 0
+  };
+}
 var TWO_PI = Math.PI * 2;
 function getDevicePixelRatio() {
   return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -41,6 +56,17 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   __init6() {this.batchCount = 0}
   __init7() {this._cachedFont = ""}
   __init8() {this._cachedFill = ""}
+  /** Backend discriminator; see {@link IRenderer.kind}. */
+  __init9() {this.kind = "canvas2d"}
+  /**
+   * Draw counters, allocated only once counting is enabled.
+   *
+   * Null when off, so the guard on every op is a single null test and an inactive
+   * renderer carries no counter object at all.
+   */
+  __init10() {this.counters = null}
+  /** Accumulated primitive area, kept separately so the ratio is derived on read. */
+  __init11() {this.drawnArea = 0}
   /**
    * @param canvas - The target canvas. Its backing store is resized to the
    *   logical size × devicePixelRatio.
@@ -50,7 +76,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
    *   set) so the canvas's own dimensions aren't clobbered by the window's.
    * @param maxDPR - See {@link maxDPR}.
    */
-  constructor(canvas, size, maxDPR) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);
+  constructor(canvas, size, maxDPR) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);_class.prototype.__init9.call(this);_class.prototype.__init10.call(this);_class.prototype.__init11.call(this);
     this.maxDPR = maxDPR;
     const dpr = this.effectiveDPR();
     this.width = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _ => _.width]), () => ( (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0)));
@@ -137,19 +163,47 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
     return this.contextLost;
   }
   /** @inheritdoc */
+  /** @inheritdoc */
+  setDrawCounters(enabled) {
+    if (!enabled) {
+      this.counters = null;
+      this.drawnArea = 0;
+      return;
+    }
+    if (!this.counters) this.counters = emptyDrawCounters();
+  }
+  /** @inheritdoc */
+  getDrawCounters() {
+    if (!this.counters) return null;
+    const area = this.width * this.height;
+    return {
+      ...this.counters,
+      // Derived on read rather than maintained: the ratio is only meaningful
+      // against the current surface size, which can change under resize.
+      overdrawRatio: area > 0 ? Math.round(this.drawnArea / area * 100) / 100 : 0
+    };
+  }
+  /** @inheritdoc */
+  clearDrawCounters() {
+    if (this.counters) this.counters = emptyDrawCounters();
+    this.drawnArea = 0;
+  }
   clear() {
     if (this.contextLost) return;
     this.flush();
+    if (this.counters) this.drawnArea = 0;
     this.ctx.clearRect(0, 0, this.width, this.height);
   }
   /** @inheritdoc */
   save() {
     this.flush();
+    if (this.counters) this.counters.saves++;
     this.ctx.save();
   }
   /** @inheritdoc */
   restore() {
     this.flush();
+    if (this.counters) this.counters.restores++;
     this.ctx.restore();
     this._cachedFont = "";
     this._cachedFill = "";
@@ -173,6 +227,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   clip(x, y, width, height) {
     this.flush();
+    if (this.counters) this.counters.clips++;
     this.ctx.beginPath();
     this.ctx.rect(x, y, width, height);
     this.ctx.clip();
@@ -209,11 +264,19 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   drawImage(source, dx, dy, dw, dh) {
     this.flush();
+    if (this.counters) {
+      this.counters.images++;
+      this.drawnArea += Math.abs(dw * dh);
+    }
     this.ctx.drawImage(source, dx, dy, dw, dh);
   }
   /** @inheritdoc */
   drawImageRect(source, sx, sy, sw, sh, dx, dy, dw, dh) {
     this.flush();
+    if (this.counters) {
+      this.counters.images++;
+      this.drawnArea += Math.abs(dw * dh);
+    }
     this.ctx.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
   }
   /** @inheritdoc */
@@ -227,6 +290,10 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
       this.batchColor = color;
       this.batchAlpha = alpha;
     }
+    if (this.counters) {
+      this.counters.circles++;
+      this.drawnArea += Math.PI * radius * radius;
+    }
     this.ctx.moveTo(cx + radius, cy);
     this.ctx.arc(cx, cy, radius, 0, TWO_PI);
     this.batchCount++;
@@ -235,6 +302,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   flush() {
     if (!this.batchActive) return;
+    if (this.counters) this.counters.flushes++;
     this.ctx.globalAlpha = this.batchAlpha;
     this.ctx.fillStyle = this.batchColor;
     this.ctx.fill();
@@ -245,7 +313,9 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   fill(color) {
     this.flush();
+    if (this.counters) this.counters.fills++;
     if (this._cachedFill !== color) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.fillStyle = color;
       this._cachedFill = color;
     }
@@ -254,6 +324,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   stroke(color, lineWidth = 1) {
     this.flush();
+    if (this.counters) this.counters.strokes++;
     this.ctx.strokeStyle = color;
     this.ctx.lineWidth = lineWidth;
     this.ctx.lineCap = "round";
@@ -263,11 +334,14 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   fillText(text, x, y, font, color) {
     this.flush();
+    if (this.counters) this.counters.texts++;
     if (this._cachedFont !== font) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.font = font;
       this._cachedFont = font;
     }
     if (this._cachedFill !== color) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.fillStyle = color;
       this._cachedFill = color;
     }
@@ -378,41 +452,43 @@ function fontFamilyFromShorthand(font, sizeToken) {
   return family || "sans-serif";
 }
 var SVGRenderer = (_class2 = class {
+  /** Backend discriminator; see {@link IRenderer.kind}. */
+  __init12() {this.kind = "svg"}
   
   
-  __init9() {this.buffer = []}
-  __init10() {this.defsBuffer = []}
-  __init11() {this.currentPath = []}
+  __init13() {this.buffer = []}
+  __init14() {this.defsBuffer = []}
+  __init15() {this.currentPath = []}
   // Inline matrix states (3x3 representation)
   // [a, b, c, d, e, f] corresponding to:
   // | a c e |
   // | b d f |
   // | 0 0 1 |
-  __init12() {this.mStack = []}
-  __init13() {this.ma = 1}
-  __init14() {this.mb = 0}
-  __init15() {this.mc = 0}
-  __init16() {this.md = 1}
-  __init17() {this.me = 0}
-  __init18() {this.mf = 0}
+  __init16() {this.mStack = []}
+  __init17() {this.ma = 1}
+  __init18() {this.mb = 0}
+  __init19() {this.mc = 0}
+  __init20() {this.md = 1}
+  __init21() {this.me = 0}
+  __init22() {this.mf = 0}
   // Alpha stack
-  __init19() {this.alphaStack = []}
-  __init20() {this.globalAlpha = 1}
+  __init23() {this.alphaStack = []}
+  __init24() {this.globalAlpha = 1}
   // Clipping stack
-  __init21() {this.clipDepthStack = []}
-  __init22() {this.clipDepth = 0}
-  __init23() {this.clipCounter = 0}
+  __init25() {this.clipDepthStack = []}
+  __init26() {this.clipDepth = 0}
+  __init27() {this.clipCounter = 0}
   // uniquely identifies clipPaths
   // Batch circles states (local coordinates)
-  __init24() {this.batchCircles = []}
-  __init25() {this.batchMatrix = [1, 0, 0, 1, 0, 0]}
-  __init26() {this.batchColor = ""}
-  __init27() {this.batchAlpha = 1}
-  __init28() {this.batchActive = false}
+  __init28() {this.batchCircles = []}
+  __init29() {this.batchMatrix = [1, 0, 0, 1, 0, 0]}
+  __init30() {this.batchColor = ""}
+  __init31() {this.batchAlpha = 1}
+  __init32() {this.batchActive = false}
   // Cache for generated gradient defs
-  __init29() {this.gradientCounter = 0}
-  __init30() {this.gradientCache = /* @__PURE__ */ new Map()}
-  constructor(width, height) {;_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);_class2.prototype.__init29.call(this);_class2.prototype.__init30.call(this);
+  __init33() {this.gradientCounter = 0}
+  __init34() {this.gradientCache = /* @__PURE__ */ new Map()}
+  constructor(width, height) {;_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);_class2.prototype.__init29.call(this);_class2.prototype.__init30.call(this);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);
     this.width = width;
     this.height = height;
   }
@@ -1230,6 +1306,12 @@ function createWebGLPointRenderer(canvas) {
   let spriteCount = 0;
   let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
+  let frameDrawCalls = 0;
+  let lastFrameDrawCalls = 0;
+  let totalDrawCalls = 0;
+  let atlasSwitches = 0;
+  let circleQuadFallbacks = 0;
+  let circlePoints = 0;
   let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
@@ -1252,6 +1334,7 @@ function createWebGLPointRenderer(canvas) {
     gl.uniform1f(gURange, distanceRange);
     ensureQuadIndices(glyphCount);
     gl.drawElements(gl.TRIANGLES, glyphCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+    frameDrawCalls++;
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
@@ -1268,7 +1351,23 @@ function createWebGLPointRenderer(canvas) {
       canvas.style.height = `${height}px`;
       gl.viewport(0, 0, canvas.width, canvas.height);
     },
+    stats() {
+      return {
+        drawCalls: lastFrameDrawCalls,
+        totalDrawCalls,
+        atlasSwitches,
+        // Fixed at creation: five programs compiled once, never per frame, so
+        // these are capability facts rather than counters.
+        programs: 5,
+        textures: (texture ? 1 : 0) + (msdfTexture ? 1 : 0),
+        circleQuadFallbacks,
+        circlePoints
+      };
+    },
     begin() {
+      lastFrameDrawCalls = frameDrawCalls;
+      totalDrawCalls += frameDrawCalls;
+      frameDrawCalls = 0;
       pointCount = 0;
       rectCount = 0;
       spriteCount = 0;
@@ -1321,6 +1420,7 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      atlasSwitches++;
       drawGlyphs();
       distanceRange = range;
       if (!msdfTexture) {
@@ -1363,6 +1463,7 @@ function createWebGLPointRenderer(canvas) {
     addCircle(x, y, radius, color, alpha = 1) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
+        circleQuadFallbacks++;
         const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
         circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
         const rgba = parseColorToRGBA(color);
@@ -1387,6 +1488,7 @@ function createWebGLPointRenderer(canvas) {
         circleQuadCount++;
         return;
       }
+      circlePoints++;
       pointData = grow(pointData, (pointCount + 1) * FLOATS_PER_POINT);
       const [r, g, b, a] = parseColorToRGBA(color);
       const o = pointCount * FLOATS_PER_POINT;
@@ -1428,6 +1530,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(rURes, logicalW, logicalH);
         ensureQuadIndices(rectCount);
         gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       if (pointCount > 0) {
         gl.useProgram(pointProgram);
@@ -1441,6 +1544,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(pURes, logicalW, logicalH);
         gl.uniform1f(pUDpr, dpr);
         gl.drawArrays(gl.POINTS, 0, pointCount);
+        frameDrawCalls++;
       }
       if (circleQuadCount > 0) {
         const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
@@ -1451,6 +1555,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(cURes, logicalW, logicalH);
         ensureQuadIndices(circleQuadCount);
         gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       if (spriteCount > 0 && texture) {
         const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
@@ -1464,6 +1569,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(sURes, logicalW, logicalH);
         ensureQuadIndices(spriteCount);
         gl.drawElements(gl.TRIANGLES, spriteCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       gl.bindVertexArray(null);
       drawGlyphs();
@@ -1669,11 +1775,11 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
 `;
 var WebGPUParticleSystemManager = (_class3 = class {
   
-  __init31() {this.computePipeline = null}
-  __init32() {this.renderPipeline = null}
-  __init33() {this.computeBindGroupLayout = null}
-  __init34() {this.renderBindGroupLayout = null}
-  constructor(device) {;_class3.prototype.__init31.call(this);_class3.prototype.__init32.call(this);_class3.prototype.__init33.call(this);_class3.prototype.__init34.call(this);
+  __init35() {this.computePipeline = null}
+  __init36() {this.renderPipeline = null}
+  __init37() {this.computeBindGroupLayout = null}
+  __init38() {this.renderBindGroupLayout = null}
+  constructor(device) {;_class3.prototype.__init35.call(this);_class3.prototype.__init36.call(this);_class3.prototype.__init37.call(this);_class3.prototype.__init38.call(this);
     this.device = device;
   }
   initPipelines(format) {
@@ -1818,23 +1924,23 @@ var WebGPUParticleSystemManager = (_class3 = class {
 var HARD_MAX_SIZE = 8192;
 var PAD = 2;
 var GlyphRasterAtlas = (_class4 = class {
-  __init35() {this.slots = /* @__PURE__ */ new Map()}
+  __init39() {this.slots = /* @__PURE__ */ new Map()}
   
   
-  __init36() {this.canvas = null}
-  __init37() {this.ctx = null}
+  __init40() {this.canvas = null}
+  __init41() {this.ctx = null}
   /**
    * Shelf packing: glyphs land left-to-right on a row, then a new row starts.
    * A monospace grid produces near-uniform widths, so shelves waste very little
    * and cost one comparison per insert — a real 2D packer would buy nothing here.
    */
-  __init38() {this.penX = PAD}
-  __init39() {this.penY = PAD}
-  __init40() {this.rowHeight = 0}
-  __init41() {this._hits = 0}
-  __init42() {this._misses = 0}
-  __init43() {this._resets = 0}
-  constructor(options = {}) {;_class4.prototype.__init35.call(this);_class4.prototype.__init36.call(this);_class4.prototype.__init37.call(this);_class4.prototype.__init38.call(this);_class4.prototype.__init39.call(this);_class4.prototype.__init40.call(this);_class4.prototype.__init41.call(this);_class4.prototype.__init42.call(this);_class4.prototype.__init43.call(this);
+  __init42() {this.penX = PAD}
+  __init43() {this.penY = PAD}
+  __init44() {this.rowHeight = 0}
+  __init45() {this._hits = 0}
+  __init46() {this._misses = 0}
+  __init47() {this._resets = 0}
+  constructor(options = {}) {;_class4.prototype.__init39.call(this);_class4.prototype.__init40.call(this);_class4.prototype.__init41.call(this);_class4.prototype.__init42.call(this);_class4.prototype.__init43.call(this);_class4.prototype.__init44.call(this);_class4.prototype.__init45.call(this);_class4.prototype.__init46.call(this);_class4.prototype.__init47.call(this);
     this.dpr = Math.max(1, _nullishCoalesce(options.dpr, () => ( 1)));
     this.maxSize = Math.min(HARD_MAX_SIZE, Math.max(256, _nullishCoalesce(options.maxSize, () => ( 2048))));
   }
@@ -2002,13 +2108,13 @@ var GlyphRasterAtlas = (_class4 = class {
 
 // src/renderer/TextRasterCache.ts
 var TextRasterCache = (_class5 = class {
-  __init44() {this.cache = /* @__PURE__ */ new Map()}
+  __init48() {this.cache = /* @__PURE__ */ new Map()}
   
   
-  __init45() {this.scratchCtx = null}
-  __init46() {this._hits = 0}
-  __init47() {this._misses = 0}
-  constructor(options = {}) {;_class5.prototype.__init44.call(this);_class5.prototype.__init45.call(this);_class5.prototype.__init46.call(this);_class5.prototype.__init47.call(this);
+  __init49() {this.scratchCtx = null}
+  __init50() {this._hits = 0}
+  __init51() {this._misses = 0}
+  constructor(options = {}) {;_class5.prototype.__init48.call(this);_class5.prototype.__init49.call(this);_class5.prototype.__init50.call(this);_class5.prototype.__init51.call(this);
     this.maxEntries = Math.max(1, _nullishCoalesce(options.maxEntries, () => ( 4096)));
     this.dpr = Math.max(1, _nullishCoalesce(options.dpr, () => ( 1)));
   }

package/dist/{chunk-RTENOAYT.mjs → chunk-UPULSLKA.mjs}

@@ -1,4 +1,19 @@
 // src/renderer/CanvasRenderer.ts
+function emptyDrawCounters() {
+  return {
+    fills: 0,
+    strokes: 0,
+    texts: 0,
+    images: 0,
+    circles: 0,
+    flushes: 0,
+    saves: 0,
+    restores: 0,
+    clips: 0,
+    stateSwitches: 0,
+    overdrawRatio: 0
+  };
+}
 var TWO_PI = Math.PI * 2;
 function getDevicePixelRatio() {
   return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -39,6 +54,17 @@ var CanvasRenderer = class _CanvasRenderer {
   batchCount = 0;
   _cachedFont = "";
   _cachedFill = "";
+  /** Backend discriminator; see {@link IRenderer.kind}. */
+  kind = "canvas2d";
+  /**
+   * Draw counters, allocated only once counting is enabled.
+   *
+   * Null when off, so the guard on every op is a single null test and an inactive
+   * renderer carries no counter object at all.
+   */
+  counters = null;
+  /** Accumulated primitive area, kept separately so the ratio is derived on read. */
+  drawnArea = 0;
   /**
    * @param canvas - The target canvas. Its backing store is resized to the
    *   logical size × devicePixelRatio.
@@ -135,19 +161,47 @@ var CanvasRenderer = class _CanvasRenderer {
     return this.contextLost;
   }
   /** @inheritdoc */
+  /** @inheritdoc */
+  setDrawCounters(enabled) {
+    if (!enabled) {
+      this.counters = null;
+      this.drawnArea = 0;
+      return;
+    }
+    if (!this.counters) this.counters = emptyDrawCounters();
+  }
+  /** @inheritdoc */
+  getDrawCounters() {
+    if (!this.counters) return null;
+    const area = this.width * this.height;
+    return {
+      ...this.counters,
+      // Derived on read rather than maintained: the ratio is only meaningful
+      // against the current surface size, which can change under resize.
+      overdrawRatio: area > 0 ? Math.round(this.drawnArea / area * 100) / 100 : 0
+    };
+  }
+  /** @inheritdoc */
+  clearDrawCounters() {
+    if (this.counters) this.counters = emptyDrawCounters();
+    this.drawnArea = 0;
+  }
   clear() {
     if (this.contextLost) return;
     this.flush();
+    if (this.counters) this.drawnArea = 0;
     this.ctx.clearRect(0, 0, this.width, this.height);
   }
   /** @inheritdoc */
   save() {
     this.flush();
+    if (this.counters) this.counters.saves++;
     this.ctx.save();
   }
   /** @inheritdoc */
   restore() {
     this.flush();
+    if (this.counters) this.counters.restores++;
     this.ctx.restore();
     this._cachedFont = "";
     this._cachedFill = "";
@@ -171,6 +225,7 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   clip(x, y, width, height) {
     this.flush();
+    if (this.counters) this.counters.clips++;
     this.ctx.beginPath();
     this.ctx.rect(x, y, width, height);
     this.ctx.clip();
@@ -207,11 +262,19 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   drawImage(source, dx, dy, dw, dh) {
     this.flush();
+    if (this.counters) {
+      this.counters.images++;
+      this.drawnArea += Math.abs(dw * dh);
+    }
     this.ctx.drawImage(source, dx, dy, dw, dh);
   }
   /** @inheritdoc */
   drawImageRect(source, sx, sy, sw, sh, dx, dy, dw, dh) {
     this.flush();
+    if (this.counters) {
+      this.counters.images++;
+      this.drawnArea += Math.abs(dw * dh);
+    }
     this.ctx.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);
   }
   /** @inheritdoc */
@@ -225,6 +288,10 @@ var CanvasRenderer = class _CanvasRenderer {
       this.batchColor = color;
       this.batchAlpha = alpha;
     }
+    if (this.counters) {
+      this.counters.circles++;
+      this.drawnArea += Math.PI * radius * radius;
+    }
     this.ctx.moveTo(cx + radius, cy);
     this.ctx.arc(cx, cy, radius, 0, TWO_PI);
     this.batchCount++;
@@ -233,6 +300,7 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   flush() {
     if (!this.batchActive) return;
+    if (this.counters) this.counters.flushes++;
     this.ctx.globalAlpha = this.batchAlpha;
     this.ctx.fillStyle = this.batchColor;
     this.ctx.fill();
@@ -243,7 +311,9 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   fill(color) {
     this.flush();
+    if (this.counters) this.counters.fills++;
     if (this._cachedFill !== color) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.fillStyle = color;
       this._cachedFill = color;
     }
@@ -252,6 +322,7 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   stroke(color, lineWidth = 1) {
     this.flush();
+    if (this.counters) this.counters.strokes++;
     this.ctx.strokeStyle = color;
     this.ctx.lineWidth = lineWidth;
     this.ctx.lineCap = "round";
@@ -261,11 +332,14 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   fillText(text, x, y, font, color) {
     this.flush();
+    if (this.counters) this.counters.texts++;
     if (this._cachedFont !== font) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.font = font;
       this._cachedFont = font;
     }
     if (this._cachedFill !== color) {
+      if (this.counters) this.counters.stateSwitches++;
       this.ctx.fillStyle = color;
       this._cachedFill = color;
     }
@@ -376,6 +450,8 @@ function fontFamilyFromShorthand(font, sizeToken) {
   return family || "sans-serif";
 }
 var SVGRenderer = class {
+  /** Backend discriminator; see {@link IRenderer.kind}. */
+  kind = "svg";
   width;
   height;
   buffer = [];
@@ -1228,6 +1304,12 @@ function createWebGLPointRenderer(canvas) {
   let spriteCount = 0;
   let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
+  let frameDrawCalls = 0;
+  let lastFrameDrawCalls = 0;
+  let totalDrawCalls = 0;
+  let atlasSwitches = 0;
+  let circleQuadFallbacks = 0;
+  let circlePoints = 0;
   let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
@@ -1250,6 +1332,7 @@ function createWebGLPointRenderer(canvas) {
     gl.uniform1f(gURange, distanceRange);
     ensureQuadIndices(glyphCount);
     gl.drawElements(gl.TRIANGLES, glyphCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+    frameDrawCalls++;
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
@@ -1266,7 +1349,23 @@ function createWebGLPointRenderer(canvas) {
       canvas.style.height = `${height}px`;
       gl.viewport(0, 0, canvas.width, canvas.height);
     },
+    stats() {
+      return {
+        drawCalls: lastFrameDrawCalls,
+        totalDrawCalls,
+        atlasSwitches,
+        // Fixed at creation: five programs compiled once, never per frame, so
+        // these are capability facts rather than counters.
+        programs: 5,
+        textures: (texture ? 1 : 0) + (msdfTexture ? 1 : 0),
+        circleQuadFallbacks,
+        circlePoints
+      };
+    },
     begin() {
+      lastFrameDrawCalls = frameDrawCalls;
+      totalDrawCalls += frameDrawCalls;
+      frameDrawCalls = 0;
       pointCount = 0;
       rectCount = 0;
       spriteCount = 0;
@@ -1319,6 +1418,7 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      atlasSwitches++;
       drawGlyphs();
       distanceRange = range;
       if (!msdfTexture) {
@@ -1361,6 +1461,7 @@ function createWebGLPointRenderer(canvas) {
     addCircle(x, y, radius, color, alpha = 1) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
+        circleQuadFallbacks++;
         const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
         circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
         const rgba = parseColorToRGBA(color);
@@ -1385,6 +1486,7 @@ function createWebGLPointRenderer(canvas) {
         circleQuadCount++;
         return;
       }
+      circlePoints++;
       pointData = grow(pointData, (pointCount + 1) * FLOATS_PER_POINT);
       const [r, g, b, a] = parseColorToRGBA(color);
       const o = pointCount * FLOATS_PER_POINT;
@@ -1426,6 +1528,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(rURes, logicalW, logicalH);
         ensureQuadIndices(rectCount);
         gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       if (pointCount > 0) {
         gl.useProgram(pointProgram);
@@ -1439,6 +1542,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(pURes, logicalW, logicalH);
         gl.uniform1f(pUDpr, dpr);
         gl.drawArrays(gl.POINTS, 0, pointCount);
+        frameDrawCalls++;
       }
       if (circleQuadCount > 0) {
         const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
@@ -1449,6 +1553,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(cURes, logicalW, logicalH);
         ensureQuadIndices(circleQuadCount);
         gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       if (spriteCount > 0 && texture) {
         const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
@@ -1462,6 +1567,7 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform2f(sURes, logicalW, logicalH);
         ensureQuadIndices(spriteCount);
         gl.drawElements(gl.TRIANGLES, spriteCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
+        frameDrawCalls++;
       }
       gl.bindVertexArray(null);
       drawGlyphs();