@vectojs/core 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-SB3SCWLT.mjs";
+} from "./chunk-SSOP3F5F.mjs";
 import {
   CanvasRenderer,
   SVGRenderer,
@@ -12,7 +12,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-WEQRBXT2.mjs";
+} from "./chunk-PK5EYWIT.mjs";
 import {
   Easing,
   Entity,
@@ -24,12 +24,12 @@ import {
   TweenDriver,
   VectoJSEvent,
   isTweenConfig
-} from "./chunk-P6MDWIEX.mjs";
+} from "./chunk-SL654OMF.mjs";
 import {
   ArabicShaper,
   BidiResolver,
   LayoutWorkerManager
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -386,6 +386,8 @@ var Scene = class _Scene {
   initializingWebGPU = false;
   gpuCanvas = null;
   gpuContext = null;
+  /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
+  gpuHasContent = false;
   mouseX = -9999;
   mouseY = -9999;
   pointerMoveListener = null;
@@ -430,7 +432,10 @@ var Scene = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new CanvasRenderer(canvas);
+      this.renderer = new CanvasRenderer(
+        canvas,
+        this.disableWindowResize ? { width: this.width, height: this.height } : void 0
+      );
     }
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
@@ -619,6 +624,10 @@ var Scene = class _Scene {
       this.manager.destroy();
       this.manager = null;
     }
+    if (this.device) {
+      this.device.destroy?.();
+      this.device = null;
+    }
   }
   setupEvents() {
     if (typeof window !== "undefined" && !this.disableWindowResize) {
@@ -1164,8 +1173,8 @@ var Scene = class _Scene {
   loop(time) {
     if (!this.isRunning) return;
     let cap = this.effectiveMaxFPS();
-    const isStatic = this.autoThrottle && !this.dirty && !this.hasAnyPendingAnimation(this.root) && !this.hasAnyPendingAnimation(this.overlayRoot);
-    if (isStatic && this.renderMode === "always" && this.maxFPS > 0) {
+    const isIdle = !this.dirty && !this.hasAnyPendingAnimation(this.root) && !this.hasAnyPendingAnimation(this.overlayRoot);
+    if (isIdle && this.autoThrottle && this.renderMode === "always" && this.maxFPS > 0) {
       cap = Math.min(cap, 2);
     }
     if (cap > 0 && time - this.lastTime < 1e3 / cap - 1) {
@@ -1174,10 +1183,11 @@ var Scene = class _Scene {
     }
     const dt = time - this.lastTime;
     this.lastTime = time;
-    if (this.renderMode === "onDemand" && isStatic) {
+    if (this.renderMode === "onDemand" && isIdle) {
       this.scheduleFrame();
       return;
     }
+    this.dirty = false;
     this.render(this.renderer, dt, time);
     const hasActiveAnimation = this.hasAnyPendingAnimation(this.root) || this.hasAnyPendingAnimation(this.overlayRoot);
     const hasInteractive = this.hasAnyInteractive(this.root) || this.hasAnyInteractive(this.overlayRoot);
@@ -1192,7 +1202,6 @@ var Scene = class _Scene {
     } else if (hasActiveAnimation) {
       this.a11yPendingSyncAfterAnimation = true;
     }
-    this.dirty = false;
     this.scheduleFrame();
   }
   /**
@@ -1304,6 +1313,7 @@ var Scene = class _Scene {
             renderPass.end();
           }
           this.device.queue.submit([commandEncoder.finish()]);
+          if (this.gpuContext) this.gpuHasContent = true;
         } catch (e) {
           console.error("WebGPU frame execution failed. Falling back.", e);
           this.deviceLost = true;
@@ -1312,9 +1322,23 @@ var Scene = class _Scene {
         }
       } else if (isMainRenderPath) {
         for (const entity of computeEntities) {
-          entity.updateCPU(dt / 1e3, this.mouseX, this.mouseY, this.width, this.height);
+          let mx = this.mouseX;
+          let my = this.mouseY;
+          if (mx > -9e3 && my > -9e3) {
+            const local = entity.worldToLocal(mx, my);
+            if (local) {
+              mx = local.x;
+              my = local.y;
+            } else {
+              mx = -9999;
+              my = -9999;
+            }
+          }
+          entity.updateCPU(dt / 1e3, mx, my, this.width, this.height);
         }
       }
+    } else if (isMainRenderer) {
+      this.clearGPUCanvasIfStale();
     }
     renderer.clear();
     if (isMainRenderer) {
@@ -1412,7 +1436,19 @@ var Scene = class _Scene {
       if (visible) {
         if (node instanceof ComputeParticleEntity) {
           if (this.deviceLost || this.webgpuDisabled || !this.device || !this.manager) {
-            this.renderCPUParticles(renderer, node, worldOpacity);
+            this.renderCPUParticles(
+              renderer,
+              node,
+              worldOpacity,
+              a,
+              b,
+              c,
+              d,
+              te,
+              tf,
+              worldScaleX,
+              isSimilarityTransform
+            );
           }
         } else {
           node.render(renderer);
@@ -1436,6 +1472,7 @@ var Scene = class _Scene {
     if (isMainRenderer) {
       this.pointRenderer?.flush();
     }
+    renderer.present?.();
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
@@ -1455,6 +1492,10 @@ var Scene = class _Scene {
       this.renderer.resize(width, height);
     }
     this.pointRenderer?.resize(width, height);
+    if (this.gpuCanvas) {
+      this.gpuCanvas.width = width;
+      this.gpuCanvas.height = height;
+    }
     this.markDirty();
   }
   /**
@@ -1477,6 +1518,27 @@ var Scene = class _Scene {
     if (overlayHit) return overlayHit;
     return this.findHitRecursively(this.root, x, y);
   }
+  /** Submit one transparent clear pass when particle content lingers on the GPU canvas. */
+  clearGPUCanvasIfStale() {
+    if (!this.gpuHasContent || !this.device || !this.gpuContext || this.deviceLost) return;
+    try {
+      const encoder = this.device.createCommandEncoder();
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: this.gpuContext.getCurrentTexture().createView(),
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            loadOp: "clear",
+            storeOp: "store"
+          }
+        ]
+      });
+      pass.end();
+      this.device.queue.submit([encoder.finish()]);
+    } catch {
+    }
+    this.gpuHasContent = false;
+  }
   async initWebGPUContext(entities) {
     if (!navigator.gpu) {
       throw new Error("WebGPU not supported on this platform.");
@@ -1569,10 +1631,10 @@ var Scene = class _Scene {
       }).catch(() => this.recreateWebGPUDeviceWithRetry(entities, attempt + 1));
     }, backoff);
   }
-  renderCPUParticles(renderer, entity, worldOpacity) {
+  renderCPUParticles(renderer, entity, worldOpacity, a, b, c, d, e, f, worldScale, isSimilarityTransform) {
     const data = entity.particleData;
     const size = entity.maxParticles;
-    const isMain = renderer === this.renderer;
+    const useGL = renderer === this.renderer && !!this.pointRenderer && isSimilarityTransform;
     for (let i = 0; i < size; i++) {
       const idx = i * 8;
       const x = data[idx];
@@ -1582,8 +1644,14 @@ var Scene = class _Scene {
       if (life === 0) continue;
       const opacity = life < 0 ? worldOpacity : worldOpacity * Math.min(1, life);
       const scale = life >= 0 ? Math.min(1, life) : 1;
-      if (isMain && this.pointRenderer) {
-        this.pointRenderer.addCircle(x, y, pSize * scale, entity.baseColor, opacity);
+      if (useGL) {
+        this.pointRenderer.addCircle(
+          a * x + c * y + e,
+          b * x + d * y + f,
+          pSize * scale * worldScale,
+          entity.baseColor,
+          opacity
+        );
       } else {
         renderer.fillCircle(x, y, pSize * scale, entity.baseColor, opacity);
       }
@@ -1809,6 +1877,11 @@ var SplineEntity = class extends Entity {
   bounds;
   offscreen = null;
   baked = false;
+  /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
+  bakedWidth = 0;
+  bakedHeight = 0;
+  /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
+  containsGradient;
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
   polylines = null;
   /**
@@ -1828,6 +1901,8 @@ var SplineEntity = class extends Entity {
     this.bounds = this.computeBounds();
     this.width = this.bounds.width;
     this.height = this.bounds.height;
+    const isGradient = (c) => c !== null && !Array.isArray(c);
+    this.containsGradient = (this.doc.equations?.some((eq) => isGradient(eq.color_rgb)) ?? false) || (this.doc.paths?.some((p) => isGradient(p.color_rgb)) ?? false);
     this.interactive = true;
   }
   computeBounds() {
@@ -1987,18 +2062,22 @@ var SplineEntity = class extends Entity {
     const pad = this.lineWidth + 2;
     const w = Math.max(1, Math.ceil(this.bounds.width) + pad * 2);
     const h = Math.max(1, Math.ceil(this.bounds.height) + pad * 2);
+    this.bakedWidth = w;
+    this.bakedHeight = h;
+    const dpr = typeof window !== "undefined" && typeof window.devicePixelRatio === "number" ? window.devicePixelRatio || 1 : 1;
     let canvas;
     if (typeof OffscreenCanvas !== "undefined") {
-      canvas = new OffscreenCanvas(w, h);
+      canvas = new OffscreenCanvas(w * dpr, h * dpr);
     } else if (typeof document !== "undefined") {
       canvas = document.createElement("canvas");
-      canvas.width = w;
-      canvas.height = h;
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
     } else {
       return;
     }
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    ctx.scale(dpr, dpr);
     ctx.translate(pad - this.bounds.x, pad - this.bounds.y);
     ctx.lineWidth = this.lineWidth;
     ctx.lineCap = "round";
@@ -2032,7 +2111,7 @@ var SplineEntity = class extends Entity {
   }
   render(r) {
     let rendered = false;
-    if (this.cache) {
+    if (this.cache && !this.containsGradient) {
       if (!this.baked) this.bake();
       if (this.offscreen) {
         const pad = this.lineWidth + 2;
@@ -2040,8 +2119,9 @@ var SplineEntity = class extends Entity {
           this.offscreen,
           this.bounds.x - pad,
           this.bounds.y - pad,
-          this.offscreen.width,
-          this.offscreen.height
+          // Logical size, not the (DPR-scaled) bitmap size.
+          this.bakedWidth,
+          this.bakedHeight
         );
         rendered = true;
       }

package/dist/layout/LayoutWorkerSource.d.ts

@@ -1 +1 @@
-export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var k=new Map;function n(t){return typeof t==\"number\"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!=\"object\")return!1;let e=t;return typeof e.id==\"string\"&&n(e.seqId)&&typeof e.text==\"string\"&&typeof e.fontId==\"string\"&&(e.fontData===void 0||typeof e.fontData==\"object\")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n";
+export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var C=new Map;function f(t){return typeof t==\"number\"&&Number.isFinite(t)}function U(t){return t.origin?t.origin===self.location.origin:!0}function j(t){if(!t||typeof t!=\"object\")return!1;let e=t;return typeof e.id==\"string\"&&f(e.seqId)&&typeof e.text==\"string\"&&typeof e.fontId==\"string\"&&(e.fontData===void 0||typeof e.fontData==\"object\")&&f(e.maxWidth)&&f(e.maxHeight)&&f(e.fontSize)&&(e.lineHeight===void 0||f(e.lineHeight))&&(e.letterSpacing===void 0||f(e.letterSpacing))}self.onmessage=t=>{if(!U(t)||!j(t.data))return;let{id:e,seqId:D,text:L,fontId:k,fontData:S,maxWidth:H,maxHeight:z,fontSize:d,lineHeight:I,letterSpacing:M}=t.data;S&&C.set(k,S);let g=C.get(k);if(!g)return;let m=[],i=[],h=[],w=[],n=0,c=0,r=0,o=-1,p=g.metrics?.ascender??.8,R=g.metrics?.descender??-.2,b=I??d*(p-R),P=M??0,F=new Map;for(let s of g.glyphs??[])F.set(s.unicode,s.advance);let x=()=>{n>r&&(r=n),n=0,c++,o=-1},A=Array.from(L);for(let s=0;s<A.length;s++){let a=A[s].codePointAt(0);if(a===10){x();continue}let W=(F.get(a)??1)*d,q=a>=11904;if(q&&(o=-1),n+W>H&&n>0){if(a===32){x();continue}if(o>=0&&i[o]>0){let l=i[o];l>r&&(r=l),c++;let v=c*b+p*d;for(let y=o;y<i.length;y++)i[y]-=l,h[y]=v;n-=l}else x()}a===32?o=-1:o===-1&&!q&&(o=m.length),m.push(a),i.push(n),h.push(c*b+p*d),w.push(-256),n+=W+P}n>r&&(r=n);let u={id:e,seqId:D,width:r,height:(c+1)*b,codePoints:new Uint32Array(m),xCoords:new Float32Array(i),yCoords:new Float32Array(h),packedStyles:new Uint32Array(w)};self.postMessage(u,[u.codePoints.buffer,u.xCoords.buffer,u.yCoords.buffer,u.packedStyles.buffer])};})();\n";

package/dist/layout.js

@@ -3,14 +3,14 @@
 
 
 
-var _chunk5KLB6BEZjs = require('./chunk-5KLB6BEZ.js');
+var _chunkBWLNEJJWjs = require('./chunk-BWLNEJJW.js');
 
 
-var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
+var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 
 
 
 
 
-exports.LayoutEngine = _chunk5KLB6BEZjs.LayoutEngine; exports.LayoutResultBuffer = _chunk5KLB6BEZjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk76NMTLYLjs.LayoutWorkerManager; exports.computeLineSegments = _chunk5KLB6BEZjs.computeLineSegments; exports.createCanvasMeasurer = _chunk5KLB6BEZjs.createCanvasMeasurer;
+exports.LayoutEngine = _chunkBWLNEJJWjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBWLNEJJWjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.computeLineSegments = _chunkBWLNEJJWjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer;

package/dist/layout.mjs

@@ -3,10 +3,10 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-SB3SCWLT.mjs";
+} from "./chunk-SSOP3F5F.mjs";
 import {
   LayoutWorkerManager
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 export {
   LayoutEngine,
   LayoutResultBuffer,

package/dist/renderer/CanvasRenderer.d.ts

@@ -14,7 +14,18 @@ export declare class CanvasRenderer implements IRenderer {
     private batchColor;
     private batchAlpha;
     private batchCount;
-    constructor(canvas: HTMLCanvasElement);
+    /**
+     * @param canvas - The target canvas. Its backing store is resized to the
+     *   logical size × devicePixelRatio.
+     * @param size - Explicit logical size. Without it the renderer assumes a
+     *   fullscreen canvas and sizes to the window — pass this for embedded /
+     *   custom-container canvases (the Scene does when `disableWindowResize` is
+     *   set) so the canvas's own dimensions aren't clobbered by the window's.
+     */
+    constructor(canvas: HTMLCanvasElement, size?: {
+        width: number;
+        height: number;
+    });
     /**
      * Expose the underlying `CanvasRenderingContext2D` for operations not
      * covered by the {@link IRenderer} interface.

package/dist/renderer/IRenderer.d.ts

@@ -175,6 +175,13 @@ export interface IRenderer {
         stop: number;
         color: string;
     }[]): any;
+    /**
+     * Present the completed frame, called by {@link Scene} exactly once at the
+     * end of each render pass (after the final {@link flush}). Retained-scene
+     * backends (e.g. `@vectojs/three`) do their single real GL render here;
+     * immediate-mode backends (Canvas2D, SVG) don't need it. Optional.
+     */
+    present?(): void;
     /**
      * Release any backend-owned GPU textures / GL contexts / caches.
      *

package/dist/renderer/url.d.ts

@@ -18,7 +18,7 @@
  *    returns it verbatim — relative navigation is never script-injectable.
  * 4. If the URL parses with a scheme NOT in {@link SAFE_SCHEMES}, returns `'#'`
  *    to keep the link non-empty but inert.
- * 5. Otherwise returns the canonical `URL.toString()` form.
+ * 5. Otherwise returns the trimmed input unchanged (no canonicalization).
  *
  * The function never throws; malformed input falls back to `'#'`.
  */

package/dist/renderer.js

@@ -4,11 +4,11 @@
 
 
 
-var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
+var _chunkGADBN53Zjs = require('./chunk-GADBN53Z.js');
 
 
 
 
 
 
-exports.CanvasRenderer = _chunkTPNADFNNjs.CanvasRenderer; exports.SVGRenderer = _chunkTPNADFNNjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkTPNADFNNjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkTPNADFNNjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkTPNADFNNjs.parseColorToRGBA;
+exports.CanvasRenderer = _chunkGADBN53Zjs.CanvasRenderer; exports.SVGRenderer = _chunkGADBN53Zjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkGADBN53Zjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkGADBN53Zjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkGADBN53Zjs.parseColorToRGBA;

package/dist/renderer.mjs

@@ -4,7 +4,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-WEQRBXT2.mjs";
+} from "./chunk-PK5EYWIT.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,

package/dist/text/MSDFTextEntity.d.ts

@@ -8,6 +8,10 @@ export interface MSDFTextEntityOptions {
     color?: string;
     lineHeight?: number;
     letterSpacing?: number;
+    /** Wrap boundary in logical pixels. Defaults to 1000. */
+    maxWidth?: number;
+    /** Layout height limit in logical pixels. Defaults to 1000. */
+    maxHeight?: number;
 }
 export declare class MSDFTextEntity extends Entity {
     private font;
@@ -17,13 +21,18 @@ export declare class MSDFTextEntity extends Entity {
     color: string;
     private letterSpacing;
     private lineHeight?;
+    private maxWidth;
+    private maxHeight;
     private text;
     private lastRenderedSeqId;
     private rgbColorCache;
     private fontStringCache;
     private layoutResult;
     constructor(text: string, options: MSDFTextEntityOptions);
+    /** Change the wrap boundary and re-run layout for the current text. */
+    setMaxWidth(maxWidth: number): void;
     setText(text: string): void;
+    private queueLayout;
     isPointInside(globalX: number, globalY: number): boolean;
     render(renderer: any): void;
     destroy(): void;

package/dist/text.js

@@ -2,15 +2,15 @@
 
 
 
-var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
+var _chunk4BO5XBJLjs = require('./chunk-4BO5XBJL.js');
 
 
 
-var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
+var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 
 
 
 
 
-exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.MSDFTextEntity; exports.SVGEntity = _chunkTQ4H357Qjs.SVGEntity;
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.MSDFFont = _chunk4BO5XBJLjs.MSDFFont; exports.MSDFTextEntity = _chunk4BO5XBJLjs.MSDFTextEntity; exports.SVGEntity = _chunk4BO5XBJLjs.SVGEntity;

package/dist/text.mjs

@@ -2,11 +2,11 @@ import {
   MSDFFont,
   MSDFTextEntity,
   SVGEntity
-} from "./chunk-P6MDWIEX.mjs";
+} from "./chunk-SL654OMF.mjs";
 import {
   ArabicShaper,
   BidiResolver
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 export {
   ArabicShaper,
   BidiResolver,

package/dist/tree/Scene.d.ts

@@ -41,9 +41,9 @@ export interface SceneOptions {
     debugA11y?: boolean;
     /**
      * Cap the render loop to at most this many frames per second (power saving —
-     * e.g. a quieter fan in a library). `0` (default) means uncapped (native
-     * refresh rate). Continuous animations still run, just less often. Also
-     * settable later via {@link Scene.maxFPS}.
+     * e.g. a quieter fan in a library). `0` means uncapped (native refresh
+     * rate). Defaults to `60` (`0` under test runners). Continuous animations
+     * still run, just less often. Also settable later via {@link Scene.maxFPS}.
      */
     maxFPS?: number;
     /**
@@ -177,6 +177,8 @@ export declare class Scene {
     private initializingWebGPU;
     private gpuCanvas;
     private gpuContext;
+    /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
+    private gpuHasContent;
     private mouseX;
     private mouseY;
     private pointerMoveListener;
@@ -308,6 +310,8 @@ export declare class Scene {
      * Finds the topmost interactive entity at the given coordinates.
      */
     findEntityAt(x: number, y: number): Entity | null;
+    /** Submit one transparent clear pass when particle content lingers on the GPU canvas. */
+    private clearGPUCanvasIfStale;
     private initWebGPUContext;
     private setupDeviceLostHandler;
     private recreateWebGPUDeviceWithRetry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "publishConfig": {
     "access": "public"
   },