@vectojs/core 1.21.0 → 1.22.0

package/dist/index.js

@@ -9,7 +9,7 @@
 
 
 
-var _chunkGKSCJ6AFjs = require('./chunk-GKSCJ6AF.js');
+var _chunkLHONR3GOjs = require('./chunk-LHONR3GO.js');
 
 
 
@@ -2463,6 +2463,27 @@ var Scene = (_class7 = class _Scene {
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
+  /**
+   * Draw accounting for the WebGL point layer, or null when that layer is not in
+   * use.
+   *
+   * Null and all-zero mean different things: null is "this backend is not
+   * running", zero is "it ran and drew nothing". A readout that conflates them
+   * sends someone looking for a performance problem in a backend that was never
+   * active.
+   */
+  get webglDrawStats() {
+    return _nullishCoalesce(_optionalChain([this, 'access', _27 => _27.pointRenderer, 'optionalAccess', _28 => _28.stats, 'optionalCall', _29 => _29()]), () => ( null));
+  }
+  /**
+   * Whether a WebGPU device is currently live for particle compute.
+   *
+   * The WebGPU path only activates when a `ComputeParticleEntity` is present, so
+   * most scenes never touch it.
+   */
+  get webgpuActive() {
+    return this.device !== null && !this.deviceLost;
+  }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
@@ -2494,8 +2515,8 @@ var Scene = (_class7 = class _Scene {
   static _devModeDetected() {
     if (_Scene.devMode) return true;
     const gp = typeof globalThis !== "undefined" ? globalThis : void 0;
-    if (_optionalChain([gp, 'optionalAccess', _27 => _27.__DEV__])) return true;
-    if (_optionalChain([gp, 'optionalAccess', _28 => _28.process, 'optionalAccess', _29 => _29.env, 'optionalAccess', _30 => _30.NODE_ENV]) === "development") return true;
+    if (_optionalChain([gp, 'optionalAccess', _30 => _30.__DEV__])) return true;
+    if (_optionalChain([gp, 'optionalAccess', _31 => _31.process, 'optionalAccess', _32 => _32.env, 'optionalAccess', _33 => _33.NODE_ENV]) === "development") return true;
     return false;
   }
   
@@ -2526,9 +2547,9 @@ var Scene = (_class7 = class _Scene {
     let checked = 0;
     const walkProjections = (node) => {
       if (checked > 10) return;
-      const proj = _optionalChain([node, 'access', _31 => _31.getContentProjection, 'optionalCall', _32 => _32()]);
-      if (_optionalChain([proj, 'optionalAccess', _33 => _33.text]) && proj.selectable !== false) {
-        const el = _optionalChain([this, 'access', _34 => _34.contentElements, 'optionalAccess', _35 => _35.get, 'call', _36 => _36(node.id)]);
+      const proj = _optionalChain([node, 'access', _34 => _34.getContentProjection, 'optionalCall', _35 => _35()]);
+      if (_optionalChain([proj, 'optionalAccess', _36 => _36.text]) && proj.selectable !== false) {
+        const el = _optionalChain([this, 'access', _37 => _37.contentElements, 'optionalAccess', _38 => _38.get, 'call', _39 => _39(node.id)]);
         if (el) {
           const projectedText = el.textContent || "";
           if (projectedText !== "" && projectedText !== proj.text) {
@@ -2549,8 +2570,8 @@ var Scene = (_class7 = class _Scene {
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
-      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _37 => _37.style, 'optionalAccess', _38 => _38.width]));
-      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _39 => _39.style, 'optionalAccess', _40 => _40.height]));
+      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _40 => _40.style, 'optionalAccess', _41 => _41.width]));
+      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _42 => _42.style, 'optionalAccess', _43 => _43.height]));
       this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
       this.height = _nullishCoalesce(styleHeight, () => ( (canvas.height || canvas.clientHeight || 0)));
     } else {
@@ -2558,7 +2579,7 @@ var Scene = (_class7 = class _Scene {
       this.height = typeof window !== "undefined" ? window.innerHeight : canvas.clientHeight || canvas.height || 600;
     }
     const globalProcess = typeof globalThis !== "undefined" ? globalThis.process : void 0;
-    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _41 => _41.env, 'optionalAccess', _42 => _42.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _43 => _43.env, 'optionalAccess', _44 => _44.VITEST]) === "true");
+    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _44 => _44.env, 'optionalAccess', _45 => _45.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _46 => _46.env, 'optionalAccess', _47 => _47.VITEST]) === "true");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
@@ -2572,7 +2593,7 @@ var Scene = (_class7 = class _Scene {
     if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
       this.forcedColorsQuery = window.matchMedia("(forced-colors: active)");
       this.forcedColorsChangeHandler = () => this.markDirty();
-      _optionalChain([this, 'access', _45 => _45.forcedColorsQuery, 'access', _46 => _46.addEventListener, 'optionalCall', _47 => _47("change", this.forcedColorsChangeHandler)]);
+      _optionalChain([this, 'access', _48 => _48.forcedColorsQuery, 'access', _49 => _49.addEventListener, 'optionalCall', _50 => _50("change", this.forcedColorsChangeHandler)]);
     }
     this.root = new class RootEntity extends _chunkAGP4VLF4js.Entity {
       isPointInside() {
@@ -2594,15 +2615,15 @@ var Scene = (_class7 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkGKSCJ6AFjs.CanvasRenderer)(
+      this.renderer = new (0, _chunkLHONR3GOjs.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
       );
     }
-    _optionalChain([this, 'access', _48 => _48.renderer, 'access', _49 => _49.onContextRestored, 'optionalCall', _50 => _50(() => {
+    _optionalChain([this, 'access', _51 => _51.renderer, 'access', _52 => _52.onContextRestored, 'optionalCall', _53 => _53(() => {
       this.markDirty();
-      if (_optionalChain([this, 'access', _51 => _51.renderer, 'access', _52 => _52.isContextLost, 'optionalCall', _53 => _53()]) !== true) this.render(this.renderer);
+      if (_optionalChain([this, 'access', _54 => _54.renderer, 'access', _55 => _55.isContextLost, 'optionalCall', _56 => _56()]) !== true) this.render(this.renderer);
     })]);
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
@@ -2771,7 +2792,7 @@ var Scene = (_class7 = class _Scene {
   watchDevicePixelRatio() {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     if (this.dprMediaQuery && this.dprChangeHandler) {
-      _optionalChain([this, 'access', _54 => _54.dprMediaQuery, 'access', _55 => _55.removeEventListener, 'optionalCall', _56 => _56("change", this.dprChangeHandler)]);
+      _optionalChain([this, 'access', _57 => _57.dprMediaQuery, 'access', _58 => _58.removeEventListener, 'optionalCall', _59 => _59("change", this.dprChangeHandler)]);
     }
     const dpr = window.devicePixelRatio || 1;
     const query = window.matchMedia(`(resolution: ${dpr}dppx)`);
@@ -2779,7 +2800,7 @@ var Scene = (_class7 = class _Scene {
       this.resize(this.width, this.height);
       this.watchDevicePixelRatio();
     };
-    _optionalChain([query, 'access', _57 => _57.addEventListener, 'optionalCall', _58 => _58("change", handler)]);
+    _optionalChain([query, 'access', _60 => _60.addEventListener, 'optionalCall', _61 => _61("change", handler)]);
     this.dprMediaQuery = query;
     this.dprChangeHandler = handler;
   }
@@ -2799,7 +2820,7 @@ var Scene = (_class7 = class _Scene {
     if (typeof gl.addEventListener !== "function") return;
     this.glContextLostHandler = (e) => {
       e.preventDefault();
-      _optionalChain([this, 'access', _59 => _59.pointRenderer, 'optionalAccess', _60 => _60.destroy, 'call', _61 => _61()]);
+      _optionalChain([this, 'access', _62 => _62.pointRenderer, 'optionalAccess', _63 => _63.destroy, 'call', _64 => _64()]);
       this.pointRenderer = null;
     };
     this.glContextRestoredHandler = () => {
@@ -2829,26 +2850,26 @@ var Scene = (_class7 = class _Scene {
    * to the live DOM selection.
    */
   contentGridSelectionLine(el) {
-    const candidates = [_optionalChain([this, 'access', _62 => _62.contentSelectionAnchor, 'optionalAccess', _63 => _63.node])];
+    const candidates = [_optionalChain([this, 'access', _65 => _65.contentSelectionAnchor, 'optionalAccess', _66 => _66.node])];
     if (typeof window !== "undefined" && typeof window.getSelection === "function") {
       const selection = window.getSelection();
-      candidates.push(_optionalChain([selection, 'optionalAccess', _64 => _64.anchorNode]), _optionalChain([selection, 'optionalAccess', _65 => _65.focusNode]));
+      candidates.push(_optionalChain([selection, 'optionalAccess', _67 => _67.anchorNode]), _optionalChain([selection, 'optionalAccess', _68 => _68.focusNode]));
     }
     for (const candidate of candidates) {
       if (!candidate || !el.contains(candidate)) continue;
       let cursor = candidate;
       while (cursor && cursor.parentNode !== el) cursor = cursor.parentNode;
-      const lineIndex = _optionalChain([cursor, 'optionalAccess', _66 => _66.dataset, 'optionalAccess', _67 => _67.vectoGridLine]);
+      const lineIndex = _optionalChain([cursor, 'optionalAccess', _69 => _69.dataset, 'optionalAccess', _70 => _70.vectoGridLine]);
       if (lineIndex !== void 0) return Number(lineIndex);
     }
     return null;
   }
   releaseContentSelectionForRebuild(el) {
     const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
-    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _68 => _68.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _69 => _69.focusNode]) ? el.contains(selection.focusNode) : false);
+    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _71 => _71.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _72 => _72.focusNode]) ? el.contains(selection.focusNode) : false);
     if (!ownsSelection) return;
     this.endContentSelectionDrag();
-    _optionalChain([selection, 'optionalAccess', _70 => _70.removeAllRanges, 'call', _71 => _71()]);
+    _optionalChain([selection, 'optionalAccess', _73 => _73.removeAllRanges, 'call', _74 => _74()]);
   }
   /**
    * Rebuild a content-projection element's DOM (`rebuild`) while preserving a
@@ -2907,7 +2928,7 @@ var Scene = (_class7 = class _Scene {
   }
   /** Convert browser viewport coordinates into this Scene's logical coordinates. */
   clientToScene(clientX, clientY) {
-    const rect = _optionalChain([this, 'access', _72 => _72.canvas, 'access', _73 => _73.getBoundingClientRect, 'optionalCall', _74 => _74()]);
+    const rect = _optionalChain([this, 'access', _75 => _75.canvas, 'access', _76 => _76.getBoundingClientRect, 'optionalCall', _77 => _77()]);
     if (!rect) return { x: clientX, y: clientY };
     const cssWidth = rect.width || this.canvas.clientWidth || this.width;
     const cssHeight = rect.height || this.canvas.clientHeight || this.height;
@@ -2945,7 +2966,7 @@ var Scene = (_class7 = class _Scene {
       cancelAnimationFrame(calibrationFrame);
     }
     this.contentGridCalibrationFrames.delete(entityId);
-    _optionalChain([this, 'access', _75 => _75.contentGridCalibrationProbes, 'access', _76 => _76.get, 'call', _77 => _77(entityId), 'optionalAccess', _78 => _78.remove, 'call', _79 => _79()]);
+    _optionalChain([this, 'access', _78 => _78.contentGridCalibrationProbes, 'access', _79 => _79.get, 'call', _80 => _80(entityId), 'optionalAccess', _81 => _81.remove, 'call', _82 => _82()]);
     this.contentGridCalibrationProbes.delete(entityId);
     delete el.dataset.vectoGridCalibrationPending;
     delete el.dataset.vectoGridCalibration;
@@ -3099,12 +3120,12 @@ var Scene = (_class7 = class _Scene {
       this.canvasResizeObserver = null;
     }
     if (this.dprMediaQuery && this.dprChangeHandler) {
-      _optionalChain([this, 'access', _80 => _80.dprMediaQuery, 'access', _81 => _81.removeEventListener, 'optionalCall', _82 => _82("change", this.dprChangeHandler)]);
+      _optionalChain([this, 'access', _83 => _83.dprMediaQuery, 'access', _84 => _84.removeEventListener, 'optionalCall', _85 => _85("change", this.dprChangeHandler)]);
       this.dprMediaQuery = null;
       this.dprChangeHandler = null;
     }
     if (this.forcedColorsQuery && this.forcedColorsChangeHandler) {
-      _optionalChain([this, 'access', _83 => _83.forcedColorsQuery, 'access', _84 => _84.removeEventListener, 'optionalCall', _85 => _85("change", this.forcedColorsChangeHandler)]);
+      _optionalChain([this, 'access', _86 => _86.forcedColorsQuery, 'access', _87 => _87.removeEventListener, 'optionalCall', _88 => _88("change", this.forcedColorsChangeHandler)]);
       this.forcedColorsQuery = null;
       this.forcedColorsChangeHandler = null;
     }
@@ -3122,9 +3143,9 @@ var Scene = (_class7 = class _Scene {
       }
       this.pointerEventTarget = null;
     }
-    _optionalChain([this, 'access', _86 => _86.a11yRoot, 'optionalAccess', _87 => _87.remove, 'call', _88 => _88()]);
+    _optionalChain([this, 'access', _89 => _89.a11yRoot, 'optionalAccess', _90 => _90.remove, 'call', _91 => _91()]);
     this.focusSentinel = null;
-    _optionalChain([this, 'access', _89 => _89.portalRoot, 'optionalAccess', _90 => _90.remove, 'call', _91 => _91()]);
+    _optionalChain([this, 'access', _92 => _92.portalRoot, 'optionalAccess', _93 => _93.remove, 'call', _94 => _94()]);
     this.a11yElements.clear();
     for (const el of this.contentElements.values()) el.remove();
     this.contentElements.clear();
@@ -3147,10 +3168,10 @@ var Scene = (_class7 = class _Scene {
     }
     this.glContextLostHandler = null;
     this.glContextRestoredHandler = null;
-    _optionalChain([this, 'access', _92 => _92.pointRenderer, 'optionalAccess', _93 => _93.destroy, 'call', _94 => _94()]);
-    _optionalChain([this, 'access', _95 => _95.renderer, 'access', _96 => _96.dispose, 'optionalCall', _97 => _97()]);
-    _optionalChain([this, 'access', _98 => _98.glCanvas, 'optionalAccess', _99 => _99.remove, 'call', _100 => _100()]);
-    _optionalChain([this, 'access', _101 => _101.gpuCanvas, 'optionalAccess', _102 => _102.remove, 'call', _103 => _103()]);
+    _optionalChain([this, 'access', _95 => _95.pointRenderer, 'optionalAccess', _96 => _96.destroy, 'call', _97 => _97()]);
+    _optionalChain([this, 'access', _98 => _98.renderer, 'access', _99 => _99.dispose, 'optionalCall', _100 => _100()]);
+    _optionalChain([this, 'access', _101 => _101.glCanvas, 'optionalAccess', _102 => _102.remove, 'call', _103 => _103()]);
+    _optionalChain([this, 'access', _104 => _104.gpuCanvas, 'optionalAccess', _105 => _105.remove, 'call', _106 => _106()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -3162,7 +3183,7 @@ var Scene = (_class7 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _104 => _104.device, 'access', _105 => _105.destroy, 'optionalCall', _106 => _106()]);
+      _optionalChain([this, 'access', _107 => _107.device, 'access', _108 => _108.destroy, 'optionalCall', _109 => _109()]);
       this.device = null;
     }
   }
@@ -3594,7 +3615,7 @@ var Scene = (_class7 = class _Scene {
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
             composition = {
-              start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _107 => _107.start]), () => ( 0)),
+              start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _110 => _110.start]), () => ( 0)),
               length: data.length
             };
             forward();
@@ -3667,7 +3688,7 @@ var Scene = (_class7 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkGKSCJ6AFjs.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkLHONR3GOjs.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -4047,9 +4068,9 @@ var Scene = (_class7 = class _Scene {
       for (let lineIndex = 0; lineIndex < grid.lines.length; lineIndex++) {
         const gridLine = grid.lines[lineIndex];
         const projectedLine = projectionLines[lineIndex];
-        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _108 => _108.lineHeight]), () => ( grid.lineHeight));
-        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _109 => _109.baseline]), () => ( grid.baseline));
-        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _110 => _110.font]), () => ( grid.font));
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _111 => _111.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _112 => _112.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _113 => _113.font]), () => ( grid.font));
         const lineSignature = contentGridLineSignature(
           grid,
           gridLine,
@@ -4069,8 +4090,8 @@ var Scene = (_class7 = class _Scene {
         lineElement.dir = "ltr";
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
-        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _111 => _111.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _112 => _112.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _114 => _114.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _115 => _115.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
@@ -4140,7 +4161,7 @@ var Scene = (_class7 = class _Scene {
         if (selectionLine !== null && selectionLine >= grid.lines.length) {
           rebuiltSelectionLine = true;
         }
-        _optionalChain([el, 'access', _113 => _113.lastElementChild, 'optionalAccess', _114 => _114.remove, 'call', _115 => _115()]);
+        _optionalChain([el, 'access', _116 => _116.lastElementChild, 'optionalAccess', _117 => _117.remove, 'call', _118 => _118()]);
       }
       if (rebuiltSelectionLine) this.releaseContentSelectionForRebuild(el);
       el.dataset.vectoProjectionLines = signature;
@@ -4204,7 +4225,7 @@ var Scene = (_class7 = class _Scene {
     if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
       cancelAnimationFrame(previous);
     }
-    _optionalChain([this, 'access', _116 => _116.contentGridCalibrationProbes, 'access', _117 => _117.get, 'call', _118 => _118(entityId), 'optionalAccess', _119 => _119.remove, 'call', _120 => _120()]);
+    _optionalChain([this, 'access', _119 => _119.contentGridCalibrationProbes, 'access', _120 => _120.get, 'call', _121 => _121(entityId), 'optionalAccess', _122 => _122.remove, 'call', _123 => _123()]);
     this.contentGridCalibrationProbes.delete(entityId);
     const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
     const probe = document.createElement("div");
@@ -4238,7 +4259,7 @@ var Scene = (_class7 = class _Scene {
         target.dataset.vectoGridCalib = generation;
         continue;
       }
-      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _121 => _121.textContent, 'optionalAccess', _122 => _122.slice, 'call', _123 => _123(0, sourceLength)]), () => ( ""));
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _124 => _124.textContent, 'optionalAccess', _125 => _125.slice, 'call', _126 => _126(0, sourceLength)]), () => ( ""));
       if (!sourceText) {
         target.dataset.vectoGridCalib = generation;
         continue;
@@ -4449,12 +4470,12 @@ var Scene = (_class7 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _124 => _124.canvas, 'access', _125 => _125.getBoundingClientRect, 'optionalCall', _126 => _126()]);
-    const parentRect = _optionalChain([parent, 'access', _127 => _127.getBoundingClientRect, 'optionalCall', _128 => _128()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _129 => _129.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _130 => _130.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _131 => _131.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _132 => _132.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _133 => _133.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _134 => _134.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _127 => _127.canvas, 'access', _128 => _128.getBoundingClientRect, 'optionalCall', _129 => _129()]);
+    const parentRect = _optionalChain([parent, 'access', _130 => _130.getBoundingClientRect, 'optionalCall', _131 => _131()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _132 => _132.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _133 => _133.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _134 => _134.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _135 => _135.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _136 => _136.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _137 => _137.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = this.width > 0 ? cssWidth / this.width : 1;
     const scaleY = this.height > 0 ? cssHeight / this.height : 1;
     const prev = this._overlayGeometry;
@@ -4593,7 +4614,7 @@ var Scene = (_class7 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _135 => _135.reducedMotionQuery, 'optionalAccess', _136 => _136.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _138 => _138.reducedMotionQuery, 'optionalAccess', _139 => _139.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -4666,7 +4687,7 @@ var Scene = (_class7 = class _Scene {
    * @param time - Current absolute time in milliseconds (default 0).
    */
   render(renderer, dt = 0, time = 0) {
-    if (_optionalChain([renderer, 'access', _137 => _137.isContextLost, 'optionalCall', _138 => _138()])) return;
+    if (_optionalChain([renderer, 'access', _140 => _140.isContextLost, 'optionalCall', _141 => _141()])) return;
     const isMainRenderer = renderer === this.renderer;
     if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
       const parentStyle = this.canvas.parentElement.style;
@@ -4792,7 +4813,7 @@ var Scene = (_class7 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _139 => _139.pointRenderer, 'optionalAccess', _140 => _140.begin, 'call', _141 => _141()]);
+      _optionalChain([this, 'access', _142 => _142.pointRenderer, 'optionalAccess', _143 => _143.begin, 'call', _144 => _144()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -4989,9 +5010,9 @@ var Scene = (_class7 = class _Scene {
     const flushT0 = this._phaseTiming ? performance.now() : 0;
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _142 => _142.pointRenderer, 'optionalAccess', _143 => _143.flush, 'call', _144 => _144()]);
+      _optionalChain([this, 'access', _145 => _145.pointRenderer, 'optionalAccess', _146 => _146.flush, 'call', _147 => _147()]);
     }
-    _optionalChain([renderer, 'access', _145 => _145.present, 'optionalCall', _146 => _146()]);
+    _optionalChain([renderer, 'access', _148 => _148.present, 'optionalCall', _149 => _149()]);
     if (this._phaseTiming) this._recordPhase("flush", performance.now() - flushT0);
     if (this._devActive) {
       this._devFrameCount++;
@@ -5002,7 +5023,7 @@ var Scene = (_class7 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkGKSCJ6AFjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkLHONR3GOjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -5271,8 +5292,8 @@ function pointInBounds(b, x, y) {
 function contentGridLineSignature(grid, line, projected, lineHeight, baseline, font, isFirstLine) {
   const parts = [
     // Line box: position, size, and the font that resolves its baseline.
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _147 => _147.x]), () => ( 0))}`,
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _148 => _148.y]), () => ( ""))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _150 => _150.x]), () => ( 0))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _151 => _151.y]), () => ( ""))}`,
     `${lineHeight}`,
     `${baseline}`,
     font,
@@ -5459,7 +5480,7 @@ var GridTextEntity = (_class9 = class extends _chunkAGP4VLF4js.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _149 => _149[0], 'optionalAccess', _150 => _150.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _152 => _152[0], 'optionalAccess', _153 => _153.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -5569,7 +5590,7 @@ var SplineEntity = (_class10 = class extends _chunkAGP4VLF4js.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _151 => _151.doc, 'access', _152 => _152.equations, 'optionalAccess', _153 => _153.some, 'call', _154 => _154((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _155 => _155.doc, 'access', _156 => _156.paths, 'optionalAccess', _157 => _157.some, 'call', _158 => _158((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _154 => _154.doc, 'access', _155 => _155.equations, 'optionalAccess', _156 => _156.some, 'call', _157 => _157((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _158 => _158.doc, 'access', _159 => _159.paths, 'optionalAccess', _160 => _160.some, 'call', _161 => _161((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -6063,8 +6084,8 @@ var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
 }, _class11);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkGKSCJ6AFjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkGKSCJ6AFjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkLHONR3GOjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkLHONR3GOjs.WebGPUParticleSystemManager);
 
 
 
@@ -6100,4 +6121,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkGKSCJ6AFjs.WebGPUParticleSystemM
 
 
 
-exports.CanvasRenderer = _chunkGKSCJ6AFjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkAGP4VLF4js.Entity; exports.GlyphRasterAtlas = _chunkGKSCJ6AFjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkAGP4VLF4js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkAGP4VLF4js.SVGEntity; exports.SVGRenderer = _chunkGKSCJ6AFjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkGKSCJ6AFjs.TextRasterCache; exports.VectoJSEvent = _chunkAGP4VLF4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkGKSCJ6AFjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkGKSCJ6AFjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkGKSCJ6AFjs.isSafeUrl; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkGKSCJ6AFjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkGKSCJ6AFjs.sanitizeUrl;
+exports.CanvasRenderer = _chunkLHONR3GOjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkAGP4VLF4js.Entity; exports.GlyphRasterAtlas = _chunkLHONR3GOjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkAGP4VLF4js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkAGP4VLF4js.SVGEntity; exports.SVGRenderer = _chunkLHONR3GOjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkLHONR3GOjs.TextRasterCache; exports.VectoJSEvent = _chunkAGP4VLF4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkLHONR3GOjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkLHONR3GOjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkLHONR3GOjs.isSafeUrl; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkLHONR3GOjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkLHONR3GOjs.sanitizeUrl;

package/dist/index.mjs

@@ -8,7 +8,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-RTENOAYT.mjs";
+} from "./chunk-UPULSLKA.mjs";
 import {
   Entity,
   MSDFTextEntity,
@@ -2462,6 +2462,27 @@ var Scene = class _Scene {
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
+  /**
+   * Draw accounting for the WebGL point layer, or null when that layer is not in
+   * use.
+   *
+   * Null and all-zero mean different things: null is "this backend is not
+   * running", zero is "it ran and drew nothing". A readout that conflates them
+   * sends someone looking for a performance problem in a backend that was never
+   * active.
+   */
+  get webglDrawStats() {
+    return this.pointRenderer?.stats?.() ?? null;
+  }
+  /**
+   * Whether a WebGPU device is currently live for particle compute.
+   *
+   * The WebGPU path only activates when a `ComputeParticleEntity` is present, so
+   * most scenes never touch it.
+   */
+  get webgpuActive() {
+    return this.device !== null && !this.deviceLost;
+  }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }

package/dist/renderer/CanvasRenderer.d.ts

@@ -1,4 +1,4 @@
-import { IRenderer } from './IRenderer';
+import { type DrawCounters, IRenderer } from './IRenderer';
 export declare class CanvasRenderer implements IRenderer {
     private ctx;
     private width;
@@ -33,6 +33,17 @@ export declare class CanvasRenderer implements IRenderer {
     private batchCount;
     private _cachedFont;
     private _cachedFill;
+    /** Backend discriminator; see {@link IRenderer.kind}. */
+    readonly 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.
+     */
+    private counters;
+    /** Accumulated primitive area, kept separately so the ratio is derived on read. */
+    private drawnArea;
     /**
      * @param canvas - The target canvas. Its backing store is resized to the
      *   logical size × devicePixelRatio.
@@ -79,6 +90,12 @@ export declare class CanvasRenderer implements IRenderer {
      *  restored). The owner skips its render pass while this is true. */
     isContextLost(): boolean;
     /** @inheritdoc */
+    /** @inheritdoc */
+    setDrawCounters(enabled: boolean): void;
+    /** @inheritdoc */
+    getDrawCounters(): DrawCounters | null;
+    /** @inheritdoc */
+    clearDrawCounters(): void;
     clear(): void;
     /** @inheritdoc */
     save(): void;

package/dist/renderer/IRenderer.d.ts

@@ -12,7 +12,70 @@
  *   r.fill('#38bdf8');
  * }
  */
+/**
+ * Per-backend draw counters, for a DevTools GPU readout.
+ *
+ * Opt-in via {@link IRenderer.setDrawCounters}: when off, counting compiles to a
+ * single boolean test per op, matching how `Scene` gates its phase timing and
+ * dirty tracking. Totals are cumulative until cleared rather than per-frame,
+ * because a per-frame log answers the question less directly at far more memory —
+ * the same reasoning `Scene.renderPhases` documents.
+ */
+export interface DrawCounters {
+    /** `fill()` calls, each committing one path. */
+    fills: number;
+    /** `stroke()` calls. */
+    strokes: number;
+    /** `fillText()` calls. */
+    texts: number;
+    /** `drawImage`/`drawImageRect` blits. */
+    images: number;
+    /** `fillCircle()` calls — batched, so this exceeds the fills they produce. */
+    circles: number;
+    /** Batch commits from {@link IRenderer.flush}. */
+    flushes: number;
+    /** `save()` calls. */
+    saves: number;
+    /** `restore()` calls. */
+    restores: number;
+    /** `clip()` calls. */
+    clips: number;
+    /**
+     * Times a font or fill style actually changed, as opposed to being re-set to
+     * the value it already had.
+     *
+     * The renderer already elides redundant sets; this counts the ones that got
+     * through, which is the number that costs anything.
+     */
+    stateSwitches: number;
+    /**
+     * Sum of drawn primitive areas divided by canvas area.
+     *
+     * A PROXY for overdraw, not a measurement: Canvas2D exposes no pixel-coverage
+     * readback, so this counts area submitted, ignoring clipping and off-screen
+     * rejection. It overstates, sometimes badly. Useful as a trend between two
+     * states of the same scene; meaningless as an absolute.
+     */
+    overdrawRatio: number;
+}
 export interface IRenderer {
+    /**
+     * Stable backend identifier.
+     *
+     * A discriminator rather than `constructor.name`, which minifies to something
+     * unusable in a production bundle — and a debug tool that cannot name the
+     * backend in the build where it matters is not much of a debug tool.
+     */
+    readonly kind?: 'canvas2d' | 'svg' | 'three' | string;
+    /**
+     * Enable or disable draw counting. Optional; a backend that cannot count omits
+     * it and a reader treats the absence as "not available".
+     */
+    setDrawCounters?(enabled: boolean): void;
+    /** Current counter totals, or null when counting is off. */
+    getDrawCounters?(): DrawCounters | null;
+    /** Zero the totals without disabling counting. */
+    clearDrawCounters?(): void;
     /** Clear the entire drawing surface to transparent / background color. */
     clear(): void;
     /** Push the current transform + state onto the renderer's stack. */

package/dist/renderer/SVGRenderer.d.ts

@@ -13,6 +13,8 @@ export interface SVGLinearGradient {
     createMatrix: number[];
 }
 export declare class SVGRenderer implements IRenderer {
+    /** Backend discriminator; see {@link IRenderer.kind}. */
+    readonly kind = "svg";
     private width;
     private height;
     private buffer;

package/dist/renderer/WebGLPointRenderer.d.ts

@@ -4,6 +4,29 @@
  * render `getBatchCircle()` / `getBatchRect()` entities — the point-cloud /
  * particle case where Canvas2D tops out at ~7 fps for 100k primitives.
  */
+/** Per-frame and cumulative WebGL draw accounting. */
+export interface WebGLDrawStats {
+    /** Draw calls issued for the last completed frame. */
+    drawCalls: number;
+    /** Cumulative draw calls since creation. */
+    totalDrawCalls: number;
+    /** Cumulative mid-frame MSDF atlas switches, each costing an extra draw. */
+    atlasSwitches: number;
+    /** Programs compiled at creation — a fixed capability, not a per-frame cost. */
+    programs: number;
+    /** Textures currently allocated (colour atlas and/or MSDF atlas). */
+    textures: number;
+    /**
+     * Circles routed to the quad path rather than `gl.POINTS`, cumulatively.
+     *
+     * A circle takes the quad path when it could clip off-viewport or exceeds the
+     * driver's maximum aliased point size. A high share means the POINTS fast path
+     * is not being used and each circle costs four vertices instead of one.
+     */
+    circleQuadFallbacks: number;
+    /** Circles drawn through the `gl.POINTS` fast path, cumulatively. */
+    circlePoints: number;
+}
 export interface PointRenderer {
     /** Resize the backing buffer + GL viewport to a logical `w × h` (DPR applied). */
     resize(width: number, height: number): void;
@@ -21,6 +44,16 @@ export interface PointRenderer {
     maxDPR?: number;
     /** Begin a frame: reset the accumulated primitive buffers. */
     begin(): void;
+    /**
+     * Draw-call counters for the most recent frame, plus cumulative totals.
+     *
+     * Batching here is by primitive type — one draw per active type — so draw calls
+     * and batches are the same number, and both are bounded at five plus one per
+     * mid-frame MSDF atlas switch. That switch is the only variable term and the
+     * only thing worth watching: it forces a commit of glyphs batched against the
+     * previous font.
+     */
+    stats?(): WebGLDrawStats;
     /** Add one circle in world (CSS-pixel) coordinates; `alpha` multiplies the color's. */
     addCircle(x: number, y: number, radius: number, color: string, alpha?: number): void;
     /**