@vectojs/core 0.2.2 → 0.2.3

package/dist/index.js

@@ -3,16 +3,16 @@
 
 
 
-var _chunk72WVPMSJjs = require('./chunk-72WVPMSJ.js');
+var _chunkVVOQNUBKjs = require('./chunk-VVOQNUBK.js');
 
 
 
 
 
 
-var _chunkLIX7DJTIjs = require('./chunk-LIX7DJTI.js');
 
 
+var _chunkTXA3LZDMjs = require('./chunk-TXA3LZDM.js');
 
 
 
@@ -22,12 +22,14 @@ var _chunkLIX7DJTIjs = require('./chunk-LIX7DJTI.js');
 
 
 
-var _chunkLA3FJLP2js = require('./chunk-LA3FJLP2.js');
 
 
+var _chunkKPWVPGHRjs = require('./chunk-KPWVPGHR.js');
 
 
-var _chunkRW6NC4RBjs = require('./chunk-RW6NC4RB.js');
+
+
+var _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -39,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 _chunkLA3FJLP2js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkKPWVPGHRjs.Entity {
   
   
   
@@ -408,7 +410,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 _chunkLA3FJLP2js.Entity {
+    this.root = new class RootEntity extends _chunkKPWVPGHRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -417,7 +419,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkLA3FJLP2js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkKPWVPGHRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -428,7 +430,7 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkLIX7DJTIjs.CanvasRenderer)(canvas);
+      this.renderer = new (0, _chunkTXA3LZDMjs.CanvasRenderer)(canvas);
     }
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
@@ -489,6 +491,17 @@ var Scene = (_class2 = class _Scene {
   getRenderer() {
     return this.renderer;
   }
+  /** Convert browser viewport coordinates into this Scene's logical coordinates. */
+  clientToScene(clientX, clientY) {
+    const rect = _optionalChain([this, 'access', _19 => _19.canvas, 'access', _20 => _20.getBoundingClientRect, 'optionalCall', _21 => _21()]);
+    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;
+    return {
+      x: (clientX - rect.left) * (cssWidth > 0 ? this.width / cssWidth : 1),
+      y: (clientY - rect.top) * (cssHeight > 0 ? this.height / cssHeight : 1)
+    };
+  }
   /**
    * Add a top-level entity to the scene graph.
    *
@@ -563,12 +576,21 @@ var Scene = (_class2 = class _Scene {
     this.removeA11yRecursively(overlay);
     this.markDirty();
   }
+  destroyEntitySubtree(entity) {
+    while (entity.children.length > 0) this.destroyEntitySubtree(entity.children.at(-1));
+    entity.destroy();
+  }
   /**
    * Tear down the Scene, halt the loop, and clean up event listeners and DOM elements.
    */
   destroy() {
+    if (this.destroyed) return;
     this.destroyed = true;
     this.stop();
+    while (this.root.children.length > 0) this.destroyEntitySubtree(this.root.children.at(-1));
+    while (this.overlayRoot.children.length > 0) {
+      this.destroyEntitySubtree(this.overlayRoot.children.at(-1));
+    }
     if (typeof window !== "undefined" && !this.disableWindowResize) {
       window.removeEventListener("resize", this.resizeHandler);
     }
@@ -580,12 +602,13 @@ var Scene = (_class2 = class _Scene {
         this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
       }
     }
-    _optionalChain([this, 'access', _19 => _19.a11yRoot, 'optionalAccess', _20 => _20.remove, 'call', _21 => _21()]);
-    _optionalChain([this, 'access', _22 => _22.portalRoot, 'optionalAccess', _23 => _23.remove, 'call', _24 => _24()]);
+    _optionalChain([this, 'access', _22 => _22.a11yRoot, 'optionalAccess', _23 => _23.remove, 'call', _24 => _24()]);
+    _optionalChain([this, 'access', _25 => _25.portalRoot, 'optionalAccess', _26 => _26.remove, 'call', _27 => _27()]);
     this.a11yElements.clear();
-    _optionalChain([this, 'access', _25 => _25.pointRenderer, 'optionalAccess', _26 => _26.destroy, 'call', _27 => _27()]);
-    _optionalChain([this, 'access', _28 => _28.glCanvas, 'optionalAccess', _29 => _29.remove, 'call', _30 => _30()]);
-    _optionalChain([this, 'access', _31 => _31.gpuCanvas, 'optionalAccess', _32 => _32.remove, 'call', _33 => _33()]);
+    _optionalChain([this, 'access', _28 => _28.pointRenderer, 'optionalAccess', _29 => _29.destroy, 'call', _30 => _30()]);
+    _optionalChain([this, 'access', _31 => _31.renderer, 'access', _32 => _32.dispose, 'optionalCall', _33 => _33()]);
+    _optionalChain([this, 'access', _34 => _34.glCanvas, 'optionalAccess', _35 => _35.remove, 'call', _36 => _36()]);
+    _optionalChain([this, 'access', _37 => _37.gpuCanvas, 'optionalAccess', _38 => _38.remove, 'call', _39 => _39()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -603,9 +626,9 @@ var Scene = (_class2 = class _Scene {
     }
     if (typeof window !== "undefined" && this.canvas && typeof this.canvas.addEventListener === "function") {
       this.pointerMoveListener = (e) => {
-        const rect = this.canvas.getBoundingClientRect();
-        this.mouseX = e.clientX - rect.left;
-        this.mouseY = e.clientY - rect.top;
+        const point = this.clientToScene(e.clientX, e.clientY);
+        this.mouseX = point.x;
+        this.mouseY = point.y;
       };
       this.pointerLeaveListener = () => {
         this.mouseX = -9999;
@@ -721,6 +744,7 @@ var Scene = (_class2 = class _Scene {
         el.id = node.id;
         el.setAttribute("data-vecto-id", node.id);
         el.style.position = "absolute";
+        el.style.transformOrigin = "0 0";
         el.style.pointerEvents = "auto";
         el.style.touchAction = "pinch-zoom";
         el.style.margin = "0";
@@ -736,42 +760,42 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.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, _chunkLA3FJLP2js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.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, _chunkLA3FJLP2js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           if (typeof capEl.releasePointerCapture === "function")
             capEl.releasePointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -797,7 +821,7 @@ var Scene = (_class2 = class _Scene {
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _34 => _34.start]), () => ( 0)), length: data.length };
+            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _40 => _40.start]), () => ( 0)), length: data.length };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -843,7 +867,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -868,7 +892,8 @@ var Scene = (_class2 = class _Scene {
         if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
       }
       if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        if (el.getAttribute("href") !== attrs.href) el.setAttribute("href", attrs.href);
+        const safeHref = _chunkTXA3LZDMjs.sanitizeUrl.call(void 0, attrs.href);
+        if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
       }
       if (el instanceof HTMLImageElement) {
         if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
@@ -929,12 +954,12 @@ var Scene = (_class2 = class _Scene {
         el.style.height = `${this.height}px`;
         el.style.transform = "";
       } else {
-        const pos = node.getGlobalPosition();
-        el.style.left = `${pos.x + node.a11yOffsetX}px`;
-        el.style.top = `${pos.y + node.a11yOffsetY}px`;
-        el.style.width = `${node.width * node.scaleX}px`;
-        el.style.height = `${node.height * node.scaleY}px`;
-        el.style.transform = `rotate(${node.rotation}rad)`;
+        const { a, b, c, d, e, f } = node.getWorldTransform();
+        el.style.left = `${e + node.a11yOffsetX}px`;
+        el.style.top = `${f + node.a11yOffsetY}px`;
+        el.style.width = `${node.width}px`;
+        el.style.height = `${node.height}px`;
+        el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
       }
     }
     for (const child of node.children) this.syncA11y(child);
@@ -996,6 +1021,35 @@ var Scene = (_class2 = class _Scene {
     }
     this.a11yNeedsReorder = false;
   }
+  /** Keep DOM/WebGL overlay layers aligned with the canvas's CSS box. */
+  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 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]) {
+      if (!root) continue;
+      root.style.left = `${left}px`;
+      root.style.top = `${top}px`;
+      root.style.width = `${this.width}px`;
+      root.style.height = `${this.height}px`;
+      root.style.transformOrigin = "0 0";
+      root.style.transform = `scale(${scaleX}, ${scaleY})`;
+    }
+    for (const canvas of [this.glCanvas, this.gpuCanvas]) {
+      if (!canvas) continue;
+      canvas.style.left = `${left}px`;
+      canvas.style.top = `${top}px`;
+      canvas.style.width = `${cssWidth}px`;
+      canvas.style.height = `${cssHeight}px`;
+    }
+  }
   getA11yTree() {
     const map = /* @__PURE__ */ new Map();
     const roots = [];
@@ -1039,7 +1093,7 @@ var Scene = (_class2 = class _Scene {
     traverse(this.root, null);
     return roots;
   }
-  renderPortalDOM(portal, te, tf, a, b, c, d) {
+  renderPortalDOM(portal, te, tf, a, b, c, d, opacity) {
     if (!this.portalRoot) return;
     this.activePortalsThisFrame.add(portal.id);
     this.portalEntities.set(portal.id, portal);
@@ -1073,6 +1127,11 @@ var Scene = (_class2 = class _Scene {
       portal.domElement.style.zIndex = zIndexStr;
       portal.lastZIndex = zIndexStr;
     }
+    const opacityStr = String(opacity);
+    if (portal.lastOpacity !== opacityStr) {
+      portal.domElement.style.opacity = opacityStr;
+      portal.lastOpacity = opacityStr;
+    }
   }
   reconcilePortals() {
     if (!this.portalRoot) return;
@@ -1096,7 +1155,7 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _35 => _35.reducedMotionQuery, 'optionalAccess', _36 => _36.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _52 => _52.reducedMotionQuery, 'optionalAccess', _53 => _53.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -1143,14 +1202,18 @@ var Scene = (_class2 = class _Scene {
    * @param time - Current absolute time in milliseconds (default 0).
    */
   render(renderer, dt = 0, time = 0) {
-    if (this.a11yRoot && this.canvas.parentElement) {
+    const isMainRenderer = renderer === this.renderer;
+    if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
       const parentStyle = this.canvas.parentElement.style;
       if (!parentStyle.position || parentStyle.position === "static") {
         parentStyle.position = "relative";
       }
+      this.syncOverlayGeometry();
+    }
+    if (isMainRenderer) {
+      this.renderOrderCounter = 0;
+      this.activePortalsThisFrame.clear();
     }
-    this.renderOrderCounter = 0;
-    this.activePortalsThisFrame.clear();
     const computeEntities = [];
     const collectComputeEntities = (node) => {
       if (node instanceof ComputeParticleEntity) {
@@ -1165,7 +1228,8 @@ var Scene = (_class2 = class _Scene {
       collectComputeEntities(overlay);
     }
     if (computeEntities.length > 0) {
-      if (!this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
+      const isMainRenderPath = renderer === this.renderer;
+      if (isMainRenderPath && !this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
         this.initializingWebGPU = true;
         this.initWebGPUContext(computeEntities).then((newDevice) => {
           this.device = newDevice;
@@ -1188,12 +1252,16 @@ var Scene = (_class2 = class _Scene {
             }
           }
         }).catch((err) => {
-          console.error("Failed to initialize WebGPU:", err);
+          if (this.particleBackend === "webgpu") {
+            console.error("Failed to initialize WebGPU:", err);
+          } else {
+            console.warn("WebGPU unavailable; using CPU particle fallback.", err);
+          }
           this.webgpuDisabled = true;
           this.initializingWebGPU = false;
         });
       }
-      if (this.device && this.manager && !this.deviceLost && !this.webgpuDisabled) {
+      if (isMainRenderPath && this.device && this.manager && !this.deviceLost && !this.webgpuDisabled) {
         try {
           const commandEncoder = this.device.createCommandEncoder();
           const computePass = commandEncoder.beginComputePass();
@@ -1241,21 +1309,20 @@ var Scene = (_class2 = class _Scene {
           this.device = null;
           this.recreateWebGPUDeviceWithRetry(computeEntities);
         }
-      } else {
+      } else if (isMainRenderPath) {
         for (const entity of computeEntities) {
           entity.updateCPU(dt / 1e3, this.mouseX, this.mouseY, this.width, this.height);
         }
       }
     }
     renderer.clear();
-    const isMainRenderer = renderer === this.renderer;
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _37 => _37.pointRenderer, 'optionalAccess', _38 => _38.begin, 'call', _39 => _39()]);
+      _optionalChain([this, 'access', _54 => _54.pointRenderer, 'optionalAccess', _55 => _55.begin, 'call', _56 => _56()]);
     }
     const vw = this.width;
     const vh = this.height;
-    const renderNode = (node, pa, pb, pc, pd, pe, pf) => {
-      node.update(dt, time);
+    const renderNode = (node, pa, pb, pc, pd, pe, pf, parentOpacity) => {
+      if (isMainRenderer) node.update(dt, time);
       const cos = Math.cos(node.rotation);
       const sin = Math.sin(node.rotation);
       const te = pa * node.x + pc * node.y + pe;
@@ -1264,16 +1331,24 @@ var Scene = (_class2 = class _Scene {
       const sxSin = node.scaleX * sin;
       const syCos = node.scaleY * cos;
       const sySin = node.scaleY * sin;
-      const a = pa * sxCos + pc * sxSin;
-      const b = pb * sxCos + pd * sxSin;
-      const c = pa * -sySin + pc * syCos;
-      const d = pb * -sySin + pd * syCos;
-      const a11yEl = this.a11yElements.get(node.id);
+      const a = pa * sxCos + pc * sySin;
+      const b = pb * sxCos + pd * sySin;
+      const c = pa * -sxSin + pc * syCos;
+      const d = pb * -sxSin + pd * syCos;
+      const worldScaleX = Math.hypot(a, b);
+      const worldScaleY = Math.hypot(c, d);
+      const worldOpacity = parentOpacity * node.opacity;
+      const scaleTolerance = Math.max(1, worldScaleX, worldScaleY) * 1e-6;
+      const orthogonalTolerance = Math.max(1, worldScaleX * worldScaleY) * 1e-6;
+      const isSimilarityTransform = Number.isFinite(worldScaleX) && Number.isFinite(worldScaleY) && Math.abs(worldScaleX - worldScaleY) <= scaleTolerance && Math.abs(a * c + b * d) <= orthogonalTolerance;
+      const a11yEl = isMainRenderer ? this.a11yElements.get(node.id) : void 0;
       if (a11yEl) {
         a11yEl.style.zIndex = String(this.renderOrderCounter++);
       }
       if (node.isDOMPortal) {
-        this.renderPortalDOM(node, te, tf, a, b, c, d);
+        if (isMainRenderer) {
+          this.renderPortalDOM(node, te, tf, a, b, c, d, worldOpacity);
+        }
         return;
       }
       let visible = true;
@@ -1299,33 +1374,27 @@ var Scene = (_class2 = class _Scene {
       if (node.children.length === 0 && node.scaleX === node.scaleY) {
         const bc = node.getBatchCircle();
         if (bc) {
-          if (visible) {
-            if (isMainRenderer && this.pointRenderer) {
-              this.pointRenderer.addCircle(
-                te,
-                tf,
-                bc.radius * Math.hypot(a, b),
-                bc.color,
-                node.opacity
-              );
-            } else {
-              renderer.fillCircle(node.x, node.y, bc.radius * node.scaleX, bc.color, node.opacity);
+          if (!visible) return;
+          if (isMainRenderer && this.pointRenderer) {
+            if (isSimilarityTransform) {
+              this.pointRenderer.addCircle(te, tf, bc.radius * worldScaleX, bc.color, worldOpacity);
+              return;
             }
+          } else {
+            renderer.fillCircle(node.x, node.y, bc.radius * node.scaleX, bc.color, worldOpacity);
+            return;
           }
-          return;
-        }
-        if (isMainRenderer && this.pointRenderer) {
+        } else if (isMainRenderer && this.pointRenderer) {
           const br = node.getBatchRect();
-          if (br) {
+          if (br && isSimilarityTransform && a * d - b * c >= 0) {
             if (visible) {
-              const ws = Math.hypot(a, b);
               this.pointRenderer.addRect(
                 te,
                 tf,
-                br.width * ws,
-                br.height * ws,
+                br.width * worldScaleX,
+                br.height * worldScaleX,
                 br.color,
-                node.opacity,
+                worldOpacity,
                 Math.atan2(b, a)
               );
             }
@@ -1338,11 +1407,11 @@ var Scene = (_class2 = class _Scene {
       renderer.translate(node.x, node.y);
       renderer.scale(node.scaleX, node.scaleY);
       renderer.rotate(node.rotation);
-      renderer.setGlobalAlpha(node.opacity);
+      renderer.setGlobalAlpha(worldOpacity);
       if (visible) {
         if (node instanceof ComputeParticleEntity) {
           if (this.deviceLost || this.webgpuDisabled || !this.device || !this.manager) {
-            this.renderCPUParticles(renderer, node);
+            this.renderCPUParticles(renderer, node, worldOpacity);
           }
         } else {
           node.render(renderer);
@@ -1352,26 +1421,26 @@ var Scene = (_class2 = class _Scene {
         renderer.clip(0, 0, node.width, node.height);
       }
       for (const child of node.children) {
-        renderNode(child, a, b, c, d, te, tf);
+        renderNode(child, a, b, c, d, te, tf, worldOpacity);
       }
       renderer.flush();
       renderer.restore();
     };
-    renderNode(this.root, 1, 0, 0, 1, 0, 0);
+    renderNode(this.root, 1, 0, 0, 1, 0, 0, 1);
     for (const overlay of this.overlayRoot.children) {
-      renderNode(overlay, 1, 0, 0, 1, 0, 0);
+      renderNode(overlay, 1, 0, 0, 1, 0, 0, 1);
     }
-    this.reconcilePortals();
+    if (isMainRenderer) this.reconcilePortals();
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _40 => _40.pointRenderer, 'optionalAccess', _41 => _41.flush, 'call', _42 => _42()]);
+      _optionalChain([this, 'access', _57 => _57.pointRenderer, 'optionalAccess', _58 => _58.flush, 'call', _59 => _59()]);
     }
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkLIX7DJTIjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkTXA3LZDMjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -1384,7 +1453,7 @@ var Scene = (_class2 = class _Scene {
     if (typeof this.renderer.resize === "function") {
       this.renderer.resize(width, height);
     }
-    _optionalChain([this, 'access', _43 => _43.pointRenderer, 'optionalAccess', _44 => _44.resize, 'call', _45 => _45(width, height)]);
+    _optionalChain([this, 'access', _60 => _60.pointRenderer, 'optionalAccess', _61 => _61.resize, 'call', _62 => _62(width, height)]);
     this.markDirty();
   }
   /**
@@ -1491,13 +1560,15 @@ var Scene = (_class2 = class _Scene {
           this.manager.initPipelines(format);
           for (const entity of entities) {
             this.manager.setupEntityResources(entity);
-            newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
+            if (entity.gpuStorageBuffer) {
+              newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
+            }
           }
         }
       }).catch(() => this.recreateWebGPUDeviceWithRetry(entities, attempt + 1));
     }, backoff);
   }
-  renderCPUParticles(renderer, entity) {
+  renderCPUParticles(renderer, entity, worldOpacity) {
     const data = entity.particleData;
     const size = entity.maxParticles;
     const isMain = renderer === this.renderer;
@@ -1508,7 +1579,7 @@ var Scene = (_class2 = class _Scene {
       const pSize = data[idx + 6];
       const life = data[idx + 7];
       if (life === 0) continue;
-      const opacity = life < 0 ? entity.opacity : entity.opacity * Math.min(1, life);
+      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);
@@ -1532,10 +1603,10 @@ var Scene = (_class2 = class _Scene {
 // src/components/TextEntity.ts
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunk72WVPMSJjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunkVVOQNUBKjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkLA3FJLP2js.Entity {
+var TextEntity = (_class3 = class extends _chunkKPWVPGHRjs.Entity {
   
   
   
@@ -1552,7 +1623,7 @@ var TextEntity = (_class3 = class extends _chunkLA3FJLP2js.Entity {
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunk72WVPMSJjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _chunkVVOQNUBKjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -1592,10 +1663,9 @@ var TextEntity = (_class3 = class extends _chunkLA3FJLP2js.Entity {
     this.a11yOffsetY = 0;
   }
   isPointInside(globalX, globalY) {
-    const pos = this.getGlobalPosition();
-    const lx = globalX - pos.x;
-    const ly = globalY - pos.y;
-    return lx >= 0 && lx <= this.width && ly >= 0 && ly <= this.height;
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
   }
   render(renderer) {
     const currentFill = this.isHovered ? this.hoveredFillStyle : this.fillStyle;
@@ -1634,7 +1704,7 @@ var TextEntity = (_class3 = class extends _chunkLA3FJLP2js.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkLA3FJLP2js.Entity {
+var GridTextEntity = (_class4 = class extends _chunkKPWVPGHRjs.Entity {
   
   __init54() {this.fillStyle = "#ffffff"}
   __init55() {this.grid = []}
@@ -1653,7 +1723,7 @@ var GridTextEntity = (_class4 = class extends _chunkLA3FJLP2js.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _46 => _46[0], 'optionalAccess', _47 => _47.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _63 => _63[0], 'optionalAccess', _64 => _64.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -1728,7 +1798,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkLA3FJLP2js.Entity {
+var SplineEntity = (_class5 = class extends _chunkKPWVPGHRjs.Entity {
   
   
   
@@ -1810,10 +1880,9 @@ var SplineEntity = (_class5 = class extends _chunkLA3FJLP2js.Entity {
    * this method already calls it as a refinement when it is overridden.
    */
   isPointInside(globalX, globalY) {
-    const pos = this.getGlobalPosition();
-    const scale = this.getWorldScale();
-    const lx = (globalX - pos.x) / (scale.x || 1);
-    const ly = (globalY - pos.y) / (scale.y || 1);
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    const { x: lx, y: ly } = local;
     const inAabb = lx >= this.bounds.x && lx <= this.bounds.x + this.bounds.width && ly >= this.bounds.y && ly <= this.bounds.y + this.bounds.height;
     if (!inAabb) return false;
     const refined = this.hitTestCurve(lx, ly);
@@ -2050,7 +2119,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _48 => _48.grid, 'access', _49 => _49.get, 'call', _50 => _50(key), 'optionalAccess', _51 => _51.delete, 'call', _52 => _52(id)]);
+      _optionalChain([this, 'access', _65 => _65.grid, 'access', _66 => _66.get, 'call', _67 => _67(key), 'optionalAccess', _68 => _68.delete, 'call', _69 => _69(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -2086,7 +2155,7 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
   
   __init64() {this.isDOMPortal = true}
   __init65() {this.domListeners = []}
@@ -2097,8 +2166,9 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
   __init70() {this.lastHeight = ""}
   __init71() {this.lastTransform = ""}
   __init72() {this.lastZIndex = ""}
+  __init73() {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);;
+    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);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -2120,7 +2190,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
       const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2131,7 +2201,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2139,7 +2209,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkLA3FJLP2js.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2147,22 +2217,15 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
     }
   }
   isPointInside(globalX, globalY) {
-    const pos = this.getGlobalPosition();
-    const scale = this.getWorldScale();
-    const rot = this.getWorldRotation();
-    const dx = globalX - pos.x;
-    const dy = globalY - pos.y;
-    const cos = Math.cos(-rot);
-    const sin = Math.sin(-rot);
-    const lx = (dx * cos - dy * sin) / scale.x;
-    const ly = (dx * sin + dy * cos) / scale.y;
     const w = this.width > 0 ? this.width : this.cachedWidth;
     const h = this.height > 0 ? this.height : this.cachedHeight;
-    return lx >= 0 && lx <= w && ly >= 0 && ly <= h;
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
   }
-  add(child) {
+  add(_child) {
     console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
-    return super.add(child);
+    return this;
   }
   render() {
   }
@@ -2185,8 +2248,10 @@ var DOMPortalEntity = (_class7 = class extends _chunkLA3FJLP2js.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkLIX7DJTIjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkLIX7DJTIjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkTXA3LZDMjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkTXA3LZDMjs.WebGPUParticleSystemManager);
+
+
 
 
 
@@ -2229,4 +2294,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkLIX7DJTIjs.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunkRW6NC4RBjs.ArabicShaper; exports.BidiResolver = _chunkRW6NC4RBjs.BidiResolver; exports.CanvasRenderer = _chunkLIX7DJTIjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkLA3FJLP2js.Easing; exports.Entity = _chunkLA3FJLP2js.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunk72WVPMSJjs.LayoutEngine; exports.LayoutResultBuffer = _chunk72WVPMSJjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkRW6NC4RBjs.LayoutWorkerManager; exports.MSDFFont = _chunkLA3FJLP2js.MSDFFont; exports.MSDFTextEntity = _chunkLA3FJLP2js.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 = _chunkLA3FJLP2js.SVGEntity; exports.SVGRenderer = _chunkLIX7DJTIjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkLA3FJLP2js.SpringDriver; exports.SpringPhysics = _chunkLA3FJLP2js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkLA3FJLP2js.TweenDriver; exports.VectoJSEvent = _chunkLA3FJLP2js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkLIX7DJTIjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunk72WVPMSJjs.computeLineSegments; exports.createCanvasMeasurer = _chunk72WVPMSJjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkLIX7DJTIjs.createWebGLPointRenderer; exports.isTweenConfig = _chunkLA3FJLP2js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkLIX7DJTIjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier;
+exports.ArabicShaper = _chunk6I53LI3Zjs.ArabicShaper; exports.BidiResolver = _chunk6I53LI3Zjs.BidiResolver; exports.CanvasRenderer = _chunkTXA3LZDMjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkKPWVPGHRjs.Easing; exports.Entity = _chunkKPWVPGHRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkVVOQNUBKjs.LayoutEngine; exports.LayoutResultBuffer = _chunkVVOQNUBKjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk6I53LI3Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkKPWVPGHRjs.MSDFFont; exports.MSDFTextEntity = _chunkKPWVPGHRjs.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 = _chunkKPWVPGHRjs.SVGEntity; exports.SVGRenderer = _chunkTXA3LZDMjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkKPWVPGHRjs.SpringDriver; exports.SpringPhysics = _chunkKPWVPGHRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkKPWVPGHRjs.TweenDriver; exports.VectoJSEvent = _chunkKPWVPGHRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkTXA3LZDMjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkVVOQNUBKjs.computeLineSegments; exports.createCanvasMeasurer = _chunkVVOQNUBKjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkTXA3LZDMjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkTXA3LZDMjs.isSafeUrl; exports.isTweenConfig = _chunkKPWVPGHRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkTXA3LZDMjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkTXA3LZDMjs.sanitizeUrl;