@vectojs/core 0.2.4 → 0.2.6

package/dist/index.js

@@ -3,7 +3,7 @@
 
 
 
-var _chunkIKLYTHALjs = require('./chunk-IKLYTHAL.js');
+var _chunkBWLNEJJWjs = require('./chunk-BWLNEJJW.js');
 
 
 
@@ -12,7 +12,7 @@ var _chunkIKLYTHALjs = require('./chunk-IKLYTHAL.js');
 
 
 
-var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
+var _chunkGADBN53Zjs = require('./chunk-GADBN53Z.js');
 
 
 
@@ -24,12 +24,12 @@ var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
 
 
 
-var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
+var _chunk4BO5XBJLjs = require('./chunk-4BO5XBJL.js');
 
 
 
 
-var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
+var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -41,7 +41,7 @@ var PARTICLE_OFFSET_ORIGIN_X = 4;
 var PARTICLE_OFFSET_ORIGIN_Y = 5;
 var PARTICLE_OFFSET_SIZE = 6;
 var PARTICLE_OFFSET_LIFE = 7;
-var ComputeParticleEntity = (_class = class extends _chunkTQ4H357Qjs.Entity {
+var ComputeParticleEntity = (_class = class extends _chunk4BO5XBJLjs.Entity {
   
   
   
@@ -386,12 +386,14 @@ var Scene = (_class2 = class _Scene {
   __init40() {this.initializingWebGPU = false}
   __init41() {this.gpuCanvas = null}
   __init42() {this.gpuContext = null}
-  __init43() {this.mouseX = -9999}
-  __init44() {this.mouseY = -9999}
-  __init45() {this.pointerMoveListener = null}
-  __init46() {this.pointerLeaveListener = null}
-  __init47() {this.hasWarnedZeroSize = false}
-  constructor(canvas, options = {}) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_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);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);_class2.prototype.__init35.call(this);_class2.prototype.__init36.call(this);_class2.prototype.__init37.call(this);_class2.prototype.__init38.call(this);_class2.prototype.__init39.call(this);_class2.prototype.__init40.call(this);_class2.prototype.__init41.call(this);_class2.prototype.__init42.call(this);_class2.prototype.__init43.call(this);_class2.prototype.__init44.call(this);_class2.prototype.__init45.call(this);_class2.prototype.__init46.call(this);_class2.prototype.__init47.call(this);
+  /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
+  __init43() {this.gpuHasContent = false}
+  __init44() {this.mouseX = -9999}
+  __init45() {this.mouseY = -9999}
+  __init46() {this.pointerMoveListener = null}
+  __init47() {this.pointerLeaveListener = null}
+  __init48() {this.hasWarnedZeroSize = false}
+  constructor(canvas, options = {}) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_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);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);_class2.prototype.__init35.call(this);_class2.prototype.__init36.call(this);_class2.prototype.__init37.call(this);_class2.prototype.__init38.call(this);_class2.prototype.__init39.call(this);_class2.prototype.__init40.call(this);_class2.prototype.__init41.call(this);_class2.prototype.__init42.call(this);_class2.prototype.__init43.call(this);_class2.prototype.__init44.call(this);_class2.prototype.__init45.call(this);_class2.prototype.__init46.call(this);_class2.prototype.__init47.call(this);_class2.prototype.__init48.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
@@ -410,7 +412,7 @@ var Scene = (_class2 = class _Scene {
     this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkTQ4H357Qjs.Entity {
+    this.root = new class RootEntity extends _chunk4BO5XBJLjs.Entity {
       isPointInside() {
         return false;
       }
@@ -419,7 +421,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkTQ4H357Qjs.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunk4BO5XBJLjs.Entity {
       isPointInside() {
         return false;
       }
@@ -430,7 +432,10 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkTPNADFNNjs.CanvasRenderer)(canvas);
+      this.renderer = new (0, _chunkGADBN53Zjs.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 = (_class2 = class _Scene {
       this.manager.destroy();
       this.manager = null;
     }
+    if (this.device) {
+      _optionalChain([this, 'access', _40 => _40.device, 'access', _41 => _41.destroy, 'optionalCall', _42 => _42()]);
+      this.device = null;
+    }
   }
   setupEvents() {
     if (typeof window !== "undefined" && !this.disableWindowResize) {
@@ -760,42 +769,42 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           if (typeof capEl.releasePointerCapture === "function")
             capEl.releasePointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -822,7 +831,7 @@ var Scene = (_class2 = class _Scene {
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _40 => _40.start]), () => ( 0)), length: data.length };
+            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _43 => _43.start]), () => ( 0)), length: data.length };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -868,7 +877,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -893,7 +902,7 @@ var Scene = (_class2 = class _Scene {
         if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
       }
       if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = _chunkTPNADFNNjs.sanitizeUrl.call(void 0, attrs.href);
+        const safeHref = _chunkGADBN53Zjs.sanitizeUrl.call(void 0, attrs.href);
         if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
       }
       if (el instanceof HTMLImageElement) {
@@ -1026,12 +1035,12 @@ var Scene = (_class2 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _41 => _41.canvas, 'access', _42 => _42.getBoundingClientRect, 'optionalCall', _43 => _43()]);
-    const parentRect = _optionalChain([parent, 'access', _44 => _44.getBoundingClientRect, 'optionalCall', _45 => _45()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _46 => _46.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _47 => _47.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _48 => _48.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _49 => _49.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _50 => _50.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _51 => _51.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _44 => _44.canvas, 'access', _45 => _45.getBoundingClientRect, 'optionalCall', _46 => _46()]);
+    const parentRect = _optionalChain([parent, 'access', _47 => _47.getBoundingClientRect, 'optionalCall', _48 => _48()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _49 => _49.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _50 => _50.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _51 => _51.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _52 => _52.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _53 => _53.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _54 => _54.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;
     for (const root of [this.a11yRoot, this.portalRoot]) {
@@ -1156,7 +1165,7 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _52 => _52.reducedMotionQuery, 'optionalAccess', _53 => _53.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _55 => _55.reducedMotionQuery, 'optionalAccess', _56 => _56.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -1164,8 +1173,8 @@ var Scene = (_class2 = 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 = (_class2 = 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 = (_class2 = class _Scene {
     } else if (hasActiveAnimation) {
       this.a11yPendingSyncAfterAnimation = true;
     }
-    this.dirty = false;
     this.scheduleFrame();
   }
   /**
@@ -1304,6 +1313,7 @@ var Scene = (_class2 = 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,13 +1322,27 @@ var Scene = (_class2 = 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) {
-      _optionalChain([this, 'access', _54 => _54.pointRenderer, 'optionalAccess', _55 => _55.begin, 'call', _56 => _56()]);
+      _optionalChain([this, 'access', _57 => _57.pointRenderer, 'optionalAccess', _58 => _58.begin, 'call', _59 => _59()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -1412,7 +1436,19 @@ var Scene = (_class2 = 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);
@@ -1434,14 +1470,15 @@ var Scene = (_class2 = class _Scene {
     if (isMainRenderer) this.reconcilePortals();
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _57 => _57.pointRenderer, 'optionalAccess', _58 => _58.flush, 'call', _59 => _59()]);
+      _optionalChain([this, 'access', _60 => _60.pointRenderer, 'optionalAccess', _61 => _61.flush, 'call', _62 => _62()]);
     }
+    _optionalChain([renderer, 'access', _63 => _63.present, 'optionalCall', _64 => _64()]);
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkTPNADFNNjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkGADBN53Zjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -1454,7 +1491,11 @@ var Scene = (_class2 = class _Scene {
     if (typeof this.renderer.resize === "function") {
       this.renderer.resize(width, height);
     }
-    _optionalChain([this, 'access', _60 => _60.pointRenderer, 'optionalAccess', _61 => _61.resize, 'call', _62 => _62(width, height)]);
+    _optionalChain([this, 'access', _65 => _65.pointRenderer, 'optionalAccess', _66 => _66.resize, 'call', _67 => _67(width, height)]);
+    if (this.gpuCanvas) {
+      this.gpuCanvas.width = width;
+      this.gpuCanvas.height = height;
+    }
     this.markDirty();
   }
   /**
@@ -1477,6 +1518,27 @@ var Scene = (_class2 = 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 (e2) {
+    }
+    this.gpuHasContent = false;
+  }
   async initWebGPUContext(entities) {
     if (!navigator.gpu) {
       throw new Error("WebGPU not supported on this platform.");
@@ -1569,10 +1631,10 @@ var Scene = (_class2 = 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 = (_class2 = 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);
       }
@@ -1604,27 +1672,27 @@ var Scene = (_class2 = class _Scene {
 // src/components/TextEntity.ts
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunkIKLYTHALjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkTQ4H357Qjs.Entity {
+var TextEntity = (_class3 = class extends _chunk4BO5XBJLjs.Entity {
   
   
   
   
-  __init48() {this.nodes = []}
+  __init49() {this.nodes = []}
   
-  __init49() {this.fillStyle = "#94a3b8"}
-  __init50() {this.strokeStyle = null}
-  __init51() {this.hoveredFillStyle = "#ffffff"}
-  __init52() {this.lineWidth = 1}
-  __init53() {this.isHovered = false}
+  __init50() {this.fillStyle = "#94a3b8"}
+  __init51() {this.strokeStyle = null}
+  __init52() {this.hoveredFillStyle = "#ffffff"}
+  __init53() {this.lineWidth = 1}
+  __init54() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init48.call(this);_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);_class3.prototype.__init51.call(this);_class3.prototype.__init52.call(this);_class3.prototype.__init53.call(this);;
+    super();_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);_class3.prototype.__init51.call(this);_class3.prototype.__init52.call(this);_class3.prototype.__init53.call(this);_class3.prototype.__init54.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunkIKLYTHALjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _chunkBWLNEJJWjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -1705,17 +1773,17 @@ var TextEntity = (_class3 = class extends _chunkTQ4H357Qjs.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkTQ4H357Qjs.Entity {
+var GridTextEntity = (_class4 = class extends _chunk4BO5XBJLjs.Entity {
   
-  __init54() {this.fillStyle = "#ffffff"}
-  __init55() {this.grid = []}
+  __init55() {this.fillStyle = "#ffffff"}
+  __init56() {this.grid = []}
   // Array of rows
-  __init56() {this.cols = 0}
-  __init57() {this.rows = 0}
+  __init57() {this.cols = 0}
+  __init58() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);;
+    super();_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -1724,7 +1792,7 @@ var GridTextEntity = (_class4 = class extends _chunkTQ4H357Qjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _63 => _63[0], 'optionalAccess', _64 => _64.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _68 => _68[0], 'optionalAccess', _69 => _69.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -1799,26 +1867,31 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkTQ4H357Qjs.Entity {
+var SplineEntity = (_class5 = class extends _chunk4BO5XBJLjs.Entity {
+  
   
   
   
   
   
   
+  __init59() {this.offscreen = null}
+  __init60() {this.baked = false}
+  /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
+  __init61() {this.bakedWidth = 0}
+  __init62() {this.bakedHeight = 0}
+  /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
   
-  __init58() {this.offscreen = null}
-  __init59() {this.baked = false}
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init60() {this.polylines = null}
+  __init63() {this.polylines = null}
   /**
    * When `true`, the renderer draws a rounded-rect outline of the entity's
    * local bounds after painting the curves. Useful for drag feedback and
    * debugging hit areas. Defaults to `false`.
    */
-  __init61() {this.showBounds = false}
+  __init64() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init58.call(this);_class5.prototype.__init59.call(this);_class5.prototype.__init60.call(this);_class5.prototype.__init61.call(this);;
+    super();_class5.prototype.__init59.call(this);_class5.prototype.__init60.call(this);_class5.prototype.__init61.call(this);_class5.prototype.__init62.call(this);_class5.prototype.__init63.call(this);_class5.prototype.__init64.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -1828,6 +1901,8 @@ var SplineEntity = (_class5 = class extends _chunkTQ4H357Qjs.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 = (_nullishCoalesce(_optionalChain([this, 'access', _70 => _70.doc, 'access', _71 => _71.equations, 'optionalAccess', _72 => _72.some, 'call', _73 => _73((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _74 => _74.doc, 'access', _75 => _75.paths, 'optionalAccess', _76 => _76.some, 'call', _77 => _77((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -1987,18 +2062,22 @@ var SplineEntity = (_class5 = class extends _chunkTQ4H357Qjs.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 = (_class5 = class extends _chunkTQ4H357Qjs.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 = (_class5 = class extends _chunkTQ4H357Qjs.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;
       }
@@ -2064,9 +2144,9 @@ async function loadSpline(url) {
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __init62() {this.grid = /* @__PURE__ */ new Map()}
-  __init63() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init62.call(this);_class6.prototype.__init63.call(this);
+  __init65() {this.grid = /* @__PURE__ */ new Map()}
+  __init66() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init65.call(this);_class6.prototype.__init66.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -2120,7 +2200,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _65 => _65.grid, 'access', _66 => _66.get, 'call', _67 => _67(key), 'optionalAccess', _68 => _68.delete, 'call', _69 => _69(id)]);
+      _optionalChain([this, 'access', _78 => _78.grid, 'access', _79 => _79.get, 'call', _80 => _80(key), 'optionalAccess', _81 => _81.delete, 'call', _82 => _82(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -2156,20 +2236,20 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
   
-  __init64() {this.isDOMPortal = true}
-  __init65() {this.domListeners = []}
-  __init66() {this.resizeObserver = null}
-  __init67() {this.cachedWidth = 100}
-  __init68() {this.cachedHeight = 100}
-  __init69() {this.lastWidth = ""}
-  __init70() {this.lastHeight = ""}
-  __init71() {this.lastTransform = ""}
-  __init72() {this.lastZIndex = ""}
-  __init73() {this.lastOpacity = ""}
+  __init67() {this.isDOMPortal = true}
+  __init68() {this.domListeners = []}
+  __init69() {this.resizeObserver = null}
+  __init70() {this.cachedWidth = 100}
+  __init71() {this.cachedHeight = 100}
+  __init72() {this.lastWidth = ""}
+  __init73() {this.lastHeight = ""}
+  __init74() {this.lastTransform = ""}
+  __init75() {this.lastZIndex = ""}
+  __init76() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init64.call(this);_class7.prototype.__init65.call(this);_class7.prototype.__init66.call(this);_class7.prototype.__init67.call(this);_class7.prototype.__init68.call(this);_class7.prototype.__init69.call(this);_class7.prototype.__init70.call(this);_class7.prototype.__init71.call(this);_class7.prototype.__init72.call(this);_class7.prototype.__init73.call(this);;
+    super(id);_class7.prototype.__init67.call(this);_class7.prototype.__init68.call(this);_class7.prototype.__init69.call(this);_class7.prototype.__init70.call(this);_class7.prototype.__init71.call(this);_class7.prototype.__init72.call(this);_class7.prototype.__init73.call(this);_class7.prototype.__init74.call(this);_class7.prototype.__init75.call(this);_class7.prototype.__init76.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -2191,7 +2271,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
       const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2202,7 +2282,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2210,7 +2290,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2249,8 +2329,8 @@ var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkTPNADFNNjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkTPNADFNNjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkGADBN53Zjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkGADBN53Zjs.WebGPUParticleSystemManager);
 
 
 
@@ -2295,4 +2375,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkTPNADFNNjs.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.CanvasRenderer = _chunkTPNADFNNjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkTQ4H357Qjs.Easing; exports.Entity = _chunkTQ4H357Qjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkIKLYTHALjs.LayoutEngine; exports.LayoutResultBuffer = _chunkIKLYTHALjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk76NMTLYLjs.LayoutWorkerManager; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.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.SVGEntity = _chunkTQ4H357Qjs.SVGEntity; exports.SVGRenderer = _chunkTPNADFNNjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkTQ4H357Qjs.SpringDriver; exports.SpringPhysics = _chunkTQ4H357Qjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkTQ4H357Qjs.TweenDriver; exports.VectoJSEvent = _chunkTQ4H357Qjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkTPNADFNNjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkIKLYTHALjs.computeLineSegments; exports.createCanvasMeasurer = _chunkIKLYTHALjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkTPNADFNNjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkTPNADFNNjs.isSafeUrl; exports.isTweenConfig = _chunkTQ4H357Qjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkTPNADFNNjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkTPNADFNNjs.sanitizeUrl;
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkGADBN53Zjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk4BO5XBJLjs.Easing; exports.Entity = _chunk4BO5XBJLjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkBWLNEJJWjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBWLNEJJWjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunk4BO5XBJLjs.MSDFFont; exports.MSDFTextEntity = _chunk4BO5XBJLjs.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.SVGEntity = _chunk4BO5XBJLjs.SVGEntity; exports.SVGRenderer = _chunkGADBN53Zjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk4BO5XBJLjs.SpringDriver; exports.SpringPhysics = _chunk4BO5XBJLjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunk4BO5XBJLjs.TweenDriver; exports.VectoJSEvent = _chunk4BO5XBJLjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkGADBN53Zjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkBWLNEJJWjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkGADBN53Zjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkGADBN53Zjs.isSafeUrl; exports.isTweenConfig = _chunk4BO5XBJLjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkGADBN53Zjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkGADBN53Zjs.sanitizeUrl;