@vectojs/core 1.35.0 → 1.35.2

package/dist/index.js

@@ -12,14 +12,14 @@
 
 
 
-var _chunkM73XB4ZKjs = require('./chunk-M73XB4ZK.js');
+var _chunkMO24PVGTjs = require('./chunk-MO24PVGT.js');
 
 
 
 
 
 
-var _chunkXXU56ZNAjs = require('./chunk-XXU56ZNA.js');
+var _chunkXHPUCU5Pjs = require('./chunk-XHPUCU5P.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -31,7 +31,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 _chunkXXU56ZNAjs.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkXHPUCU5Pjs.Entity {
   
   
   
@@ -317,6 +317,7 @@ var ComputeParticleEntity = (_class = class extends _chunkXXU56ZNAjs.Entity {
   stepWithBackend(backend, dt, mouseX, mouseY, width, height) {
     const count = this.maxParticles;
     backend.ensure(count);
+    backend.revalidateViews();
     backend.gather(this.particleData, count, true);
     const pending = backend.step(count, {
       dt,
@@ -1326,6 +1327,7 @@ var DriverTicker = (_class5 = class {
     tP.length = tweenCount;
     tD.length = tweenCount;
     backend.ensure(springCount, tweenCount);
+    backend.revalidateViews();
     if (springCount > 0) {
       const sv = backend.springView();
       for (let i = 0; i < springCount; i++) {
@@ -1594,6 +1596,7 @@ var HitTester = (_class6 = class {
       gathered = gatherHitAABBs(this.root, frame);
     }
     backend.ensure(gathered.count, width, height, 64);
+    backend.revalidateViews();
     const view = backend.inputView();
     view.minx.set(gathered.minx.subarray(0, gathered.count));
     view.miny.set(gathered.miny.subarray(0, gathered.count));
@@ -2124,10 +2127,15 @@ var ContentProjectionManager = (_class7 = class {
     }
     if (this.phases.enabled) this.phases.record("calibScan", performance.now() - scanStart);
     if (measurements.length === 0) {
-      el.dataset.vectoGridCalibration = calibrationKey;
-      el.dataset.vectoGridReady = "true";
       el.dataset.vectoGridCalibrationSamples = "0";
       delete el.dataset.vectoGridCalibrationPending;
+      const readyFrame = requestAnimationFrame(() => {
+        this.calibrationFrameHandles.delete(entityId);
+        if (!el.isConnected) return;
+        el.dataset.vectoGridCalibration = calibrationKey;
+        el.dataset.vectoGridReady = "true";
+      });
+      this.calibrationFrameHandles.set(entityId, readyFrame);
       return;
     }
     const appendStart = this.phases.enabled ? performance.now() : 0;
@@ -2370,8 +2378,15 @@ var WASM_STATUS = {
   /** A kernel ran before `init`. */
   UNINITIALIZED: 2,
   /** A sibling run addressed a slot or parent outside the store. */
-  BAD_RUN: 3
+  BAD_RUN: 3,
+  /** A requested capacity's size arithmetic overflowed; the previous store
+   *  was left untouched. */
+  OVERFLOW: 4
 };
+function viewsStale(cap, probe, memory) {
+  if (cap === 0) return false;
+  return probe.byteLength === 0 || probe.buffer !== memory.buffer;
+}
 var PAD2 = 8;
 var WasmTransformBackend = (_class9 = class {
   __init40() {this.available = true}
@@ -2561,9 +2576,15 @@ var WasmTransformBackend = (_class9 = class {
   }
   ensure(count, runCount) {
     if (count + PAD2 <= this.cap && runCount <= this.runCap) return;
-    this.cap = count + PAD2;
-    this.runCap = Math.max(runCount, count, 1);
-    this.ex.init(count, this.runCap);
+    const cap = count + PAD2;
+    const runCap = Math.max(runCount, count, 1);
+    const status = this.ex.init(count, runCap);
+    if (status !== WASM_STATUS.OK) {
+      this.lastStatus = status;
+      return;
+    }
+    this.cap = cap;
+    this.runCap = runCap;
     this.refreshViews();
   }
   /** Rebuild typed-array views after an init() (which may have grown, and thus
@@ -2631,11 +2652,26 @@ var AnimBackend = (_class10 = class {
    */
   ensure(springCount, tweenCount) {
     if (springCount + PAD3 <= this.springCap && tweenCount + PAD3 <= this.tweenCap) return;
-    this.springCap = springCount + PAD3;
-    this.tweenCap = tweenCount + PAD3;
-    this.ex.anim_init(this.springCap, this.tweenCap);
+    const springCap = springCount + PAD3;
+    const tweenCap = tweenCount + PAD3;
+    const status = this.ex.anim_init(springCap, tweenCap);
+    if (status !== WASM_STATUS.OK) {
+      this.lastStatus = status;
+      return;
+    }
+    this.springCap = springCap;
+    this.tweenCap = tweenCap;
     this.refreshViews();
   }
+  /**
+   * Re-create the typed-array views if another backend's allocation grew the
+   * shared linear memory and detached them (see {@link viewsStale}). Call after
+   * {@link ensure} and before writing into {@link springView}/{@link tweenView}.
+   */
+  revalidateViews() {
+    if (this.springCap === 0) return;
+    if (viewsStale(this.springCap, this.sv.val, this.ex.memory)) this.refreshViews();
+  }
   /**
    * Advance `count` springs (from index 0) by `dtMs` milliseconds, in place.
    * Returns `true` when the kernel ran. `false` means it rejected the call
@@ -2729,15 +2765,26 @@ var HitTestBackend = (_class11 = class {
     this.gridH = gh;
     this.cellSize = cellSize;
   }
+  /**
+   * Re-create the typed-array views if another backend's allocation grew the
+   * shared linear memory and detached them (see {@link viewsStale}). Call after
+   * {@link ensure} and before writing into {@link inputView}.
+   */
+  revalidateViews() {
+    if (this.entityCap === 0) return;
+    if (viewsStale(this.entityCap, this.vminx, this.ex.memory)) this.refreshViews();
+  }
   /**
    * Run the kernel's bucketing over whatever is currently resident in
    * {@link inputView} (write the AABBs there, and call {@link ensure} first).
-   * Returns `false` if the build overflowed its item budget — the caller must
-   * not trust {@link candidatesAt} results for this build and should fall back
-   * to the JS walk instead (never return a wrong hit).
+   * Returns `false` if the build was rejected (no `hit_init` yet) or overflowed
+   * its item budget — the caller must not trust {@link candidatesAt} results
+   * for this build and should fall back to the JS walk instead (never return a
+   * wrong hit).
    */
   runBuild(count, vw, vh, cellSize) {
-    this.ex.hit_build(count, vw, vh, cellSize);
+    const status = this.ex.hit_build(count, vw, vh, cellSize);
+    if (status !== WASM_STATUS.OK) return false;
     return this.ex.hit_overflow() === 0;
   }
   /**
@@ -2763,10 +2810,16 @@ var HitTestBackend = (_class11 = class {
     if (count + PAD4 <= this.entityCap && cellCount <= this.cellCap && itemCount <= this.itemCap) {
       return;
     }
-    this.entityCap = count + PAD4;
-    this.cellCap = Math.max(cellCount, 1);
-    this.itemCap = Math.max(itemCount, count, 1);
-    this.ex.hit_init(count, this.cellCap, this.itemCap);
+    const entityCap = count + PAD4;
+    const cellCap = Math.max(cellCount, 1);
+    const itemCap = Math.max(itemCount, count, 1);
+    const status = this.ex.hit_init(count, cellCap, itemCap);
+    if (status !== WASM_STATUS.OK) {
+      return;
+    }
+    this.entityCap = entityCap;
+    this.cellCap = cellCap;
+    this.itemCap = itemCap;
     this.refreshViews();
   }
   /** Rebuild typed-array views after a growing `hit_init` (which detaches the
@@ -2805,10 +2858,24 @@ var ParticleBackend = (_class12 = class {
    */
   ensure(count) {
     if (count + PAD5 <= this.cap) return;
-    this.cap = count + PAD5;
-    this.ex.particle_init(this.cap);
+    const cap = count + PAD5;
+    const status = this.ex.particle_init(cap);
+    if (status !== WASM_STATUS.OK) {
+      this.lastStatus = status;
+      return;
+    }
+    this.cap = cap;
     this.refreshViews();
   }
+  /**
+   * Re-create the typed-array views if another backend's allocation grew the
+   * shared linear memory and detached them (see {@link viewsStale}). Call after
+   * {@link ensure} and before {@link gather}/{@link scatter}.
+   */
+  revalidateViews() {
+    if (this.cap === 0) return;
+    if (viewsStale(this.cap, this.view.px, this.ex.memory)) this.refreshViews();
+  }
   /**
    * Advance `count` particles one step in place. Returns `true` when at least
    * one live particle is still moving or off-origin beyond epsilon (the fused
@@ -3075,9 +3142,17 @@ var WasmBackendFacade = (_class14 = class {
    * main render walk onto it; passing `null` reverts to the JS path.
    */
   setTransform(backend) {
+    const backendChanged = backend !== this._transform && this._transform !== null;
     this._transform = backend;
     this._mode = backend ? "wasm" : "js";
     this._uploadRejections = 0;
+    if (backendChanged) {
+      this._treeStore = null;
+      this._storeStructureVersion = -1;
+      this._inputs = null;
+      this._world = null;
+      this._aabbsFresh = false;
+    }
   }
   // ── The shared runtime ──────────────────────────────────────────────────────
   /**
@@ -3245,6 +3320,7 @@ var WasmBackendFacade = (_class14 = class {
       }
       if (!backend.uploadRuns(built.store)) {
         this.transformReason = "rejected";
+        this._aabbsFresh = false;
         this._uploadRejections++;
         if (this._uploadRejections >= WASM_UPLOAD_REJECT_LIMIT) {
           this._mode = "js";
@@ -3284,6 +3360,7 @@ var WasmBackendFacade = (_class14 = class {
     }
     if (backend.runKernel("simd") !== WASM_STATUS.OK) {
       this.transformReason = "rejected";
+      this._aabbsFresh = false;
       return null;
     }
     this._aabbsFresh = false;
@@ -4469,23 +4546,23 @@ var Scene = (_class15 = class _Scene {
   }
   /**
    * Drop `entity` and its whole subtree from the batched-driver candidate set.
-   * Called by {@link remove}/{@link hideOverlay} on detach: without this a
-   * removed-but-still-animating entity stays pinned in the Set (a leak) and its
-   * drivers keep ticking every frame even though it is off-tree. If it is later
-   * re-added, {@link registerActiveDriverSubtree} re-registers any node that
-   * still has live drivers, so the motion resumes.
+   * Called by `Entity.remove` on detach (which `remove`/`hideOverlay` route
+   * through): without this a removed-but-still-animating entity stays pinned in
+   * the Set (a leak) and its drivers keep ticking every frame even though it is
+   * off-tree. If it is later re-added, {@link _registerActiveDriverSubtree}
+   * re-registers any node that still has live drivers, so the motion resumes.
    */
-  unregisterActiveDriverSubtree(entity) {
+  _unregisterActiveDriverSubtree(entity) {
     this._driverTicker.unregisterSubtree(entity);
   }
   /**
    * Re-register every node in `entity`'s subtree that still has live property
-   * drivers. Called by {@link add}/{@link showOverlay} so re-attaching a subtree
-   * that was removed mid-animation resumes its batched drivers (they were
-   * dropped from the candidate set on removal, but the driver state still lives
-   * on each entity).
+   * drivers. Called by `Entity._addOne` so re-attaching a subtree that was
+   * removed mid-animation resumes its batched drivers (they were dropped from
+   * the candidate set on removal, but the driver state still lives on each
+   * entity).
    */
-  registerActiveDriverSubtree(entity) {
+  _registerActiveDriverSubtree(entity) {
     this._driverTicker.registerSubtree(entity);
   }
   // --- domain: render-scheduler — batched driver tick (extraction 6), reads the anim backend ---
@@ -4611,7 +4688,7 @@ var Scene = (_class15 = class _Scene {
   }
   static set devMode(active) {
     _Scene._devMode = active;
-    _chunkM73XB4ZKjs.setRendererDevMode.call(void 0, active);
+    _chunkMO24PVGTjs.setRendererDevMode.call(void 0, active);
   }
   static _devModeDetected() {
     if (_Scene._devMode) return true;
@@ -4728,7 +4805,7 @@ var Scene = (_class15 = class _Scene {
     this.readingDirection = _nullishCoalesce(options.readingDirection, () => ( "ltr"));
     this.renderMode = _nullishCoalesce(options.renderMode, () => ( "always"));
     this._devActive = _Scene._devModeDetected();
-    _chunkM73XB4ZKjs.setRendererDevMode.call(void 0, this._devActive);
+    _chunkMO24PVGTjs.setRendererDevMode.call(void 0, this._devActive);
     this._warnUnknownOptions(options);
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
     if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
@@ -4736,7 +4813,7 @@ var Scene = (_class15 = class _Scene {
       this.forcedColorsChangeHandler = () => this.markDirty();
       _optionalChain([this, 'access', _118 => _118.forcedColorsQuery, 'access', _119 => _119.addEventListener, 'optionalCall', _120 => _120("change", this.forcedColorsChangeHandler)]);
     }
-    this.root = new class RootEntity extends _chunkXXU56ZNAjs.Entity {
+    this.root = new class RootEntity extends _chunkXHPUCU5Pjs.Entity {
       isPointInside() {
         return false;
       }
@@ -4746,7 +4823,7 @@ var Scene = (_class15 = class _Scene {
     }("root");
     this.root._scene = this;
     this._wasmBackend = new WasmBackendFacade(this.root);
-    this.overlayRoot = new class OverlayRoot extends _chunkXXU56ZNAjs.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkXHPUCU5Pjs.Entity {
       isPointInside() {
         return false;
       }
@@ -4759,7 +4836,7 @@ var Scene = (_class15 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkM73XB4ZKjs.CanvasRenderer)(
+      this.renderer = new (0, _chunkMO24PVGTjs.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
@@ -5022,7 +5099,6 @@ var Scene = (_class15 = class _Scene {
    */
   add(entity) {
     this.root.add(entity);
-    this.registerActiveDriverSubtree(entity);
     return this;
   }
   // --- domain: a11y-projection — subtree pruning, focus preservation on removal ---
@@ -5067,7 +5143,7 @@ var Scene = (_class15 = class _Scene {
       }
       if (this.hoveredA11yElements.has(el)) {
         this.hoveredA11yElements.delete(el);
-        node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerleave", node, void 0, false));
+        node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointerleave", node, void 0, false));
       }
       this.preserveFocusOnRemoval(el);
       el.remove();
@@ -5101,7 +5177,6 @@ var Scene = (_class15 = class _Scene {
   remove(entity) {
     this.root.remove(entity);
     this.removeA11yRecursively(entity);
-    this.unregisterActiveDriverSubtree(entity);
     return this;
   }
   /**
@@ -5133,7 +5208,6 @@ var Scene = (_class15 = class _Scene {
    */
   showOverlay(overlay) {
     this.overlayRoot.add(overlay);
-    this.registerActiveDriverSubtree(overlay);
     this.markDirty();
   }
   /**
@@ -5142,7 +5216,6 @@ var Scene = (_class15 = class _Scene {
   hideOverlay(overlay) {
     this.overlayRoot.remove(overlay);
     this.removeA11yRecursively(overlay);
-    this.unregisterActiveDriverSubtree(overlay);
     this.markDirty();
   }
   destroyEntitySubtree(entity) {
@@ -5386,8 +5459,9 @@ var Scene = (_class15 = class _Scene {
    * workload rendered ~1.0 frames per content change. To measure anything about
    * scheduling, use {@link start} and let `requestAnimationFrame` drive.
    *
-   * @param dt Seconds to advance. Not clamped by `MAX_FRAME_DT` — the caller
-   *   chooses the step, since determinism is the point.
+   * @param dt Milliseconds to advance (same unit as the rAF timestamps `loop`
+   *   feeds `render`). Not clamped by `MAX_FRAME_DT` — the caller chooses the
+   *   step, since determinism is the point.
    */
   step(dt) {
     const time = this.lastTime + dt;
@@ -5658,20 +5732,20 @@ var Scene = (_class15 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("dblclick", (e) => {
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("dblclick", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("dblclick", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
           this.hoveredA11yElements.add(el);
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
           this.hoveredA11yElements.delete(el);
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -5687,24 +5761,24 @@ var Scene = (_class15 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
@@ -5729,10 +5803,10 @@ var Scene = (_class15 = class _Scene {
         );
         emitInitialScroll = emitScroll;
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -5798,7 +5872,7 @@ var Scene = (_class15 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -5836,7 +5910,7 @@ var Scene = (_class15 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkM73XB4ZKjs.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkMO24PVGTjs.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -6235,7 +6309,7 @@ var Scene = (_class15 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -6330,26 +6404,43 @@ var Scene = (_class15 = class _Scene {
               if (mctx) {
                 mctx.font = lineFont;
                 const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
-                const segments = [...segmenter.segment(line.text)];
-                let runningX = 0;
-                for (let segIdx = 0; segIdx < segments.length; segIdx++) {
-                  const { segment, index: index2 } = segments[segIdx];
-                  const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
-                  const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
-                  const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
-                  const carrierEl = document.createElement("span");
-                  carrierEl.textContent = segment;
-                  carrierEl.style.position = "relative";
-                  carrierEl.style.display = "inline-block";
-                  carrierEl.style.left = `${canvasX - runningX}px`;
-                  carrierEl.style.width = `${canvasWidth}px`;
-                  carrierEl.style.boxSizing = "border-box";
-                  carrierEl.style.lineHeight = `${lineHeight2}px`;
-                  carrierEl.style.whiteSpace = "pre";
-                  carrierEl.style.verticalAlign = "top";
-                  carrierEl.style.unicodeBidi = "isolate";
-                  lineElement.appendChild(carrierEl);
-                  runningX += canvasWidth;
+                if (line.shapedPaint) {
+                  const segments = [...segmenter.segment(line.text)];
+                  let runningX = 0;
+                  for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+                    const { segment, index: index2 } = segments[segIdx];
+                    const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
+                    const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
+                    const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.left = `${canvasX - runningX}px`;
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                    runningX += canvasWidth;
+                  }
+                } else {
+                  for (const { segment } of segmenter.segment(line.text)) {
+                    const canvasWidth = mctx.measureText(segment).width;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                  }
                 }
               } else {
                 lineElement.textContent = line.text;
@@ -6685,7 +6776,7 @@ var Scene = (_class15 = class _Scene {
     const hasInteractive = this.frameHadInteractive;
     const wantsContentSync = this.contentProjectionEnabled;
     const shouldSyncInterval = this.a11ySyncInterval <= 0 || time - this.lastA11ySync >= this.a11ySyncInterval;
-    if ((hasInteractive || this.a11yElements.size > 0 || wantsContentSync) && (shouldSyncInterval || this.a11yPendingSyncAfterAnimation)) {
+    if ((hasInteractive || this.a11yElements.size > 0 || wantsContentSync) && (shouldSyncInterval || !hasActiveAnimation && this.a11yPendingSyncAfterAnimation)) {
       this.lastA11ySync = time;
       if (hasInteractive || wantsContentSync) {
         const userTiming = this.phases.userTiming ? beginVectoUserTiming(VECTO_USER_TIMING.scene.a11ySync) : null;
@@ -6887,7 +6978,7 @@ var Scene = (_class15 = class _Scene {
     let walkHadAnimation = false;
     let walkHadInteractive = false;
     const runUpdate = (node) => {
-      const overridesUpdate = node.update !== _chunkXXU56ZNAjs.Entity.prototype.update;
+      const overridesUpdate = node.update !== _chunkXHPUCU5Pjs.Entity.prototype.update;
       let pending = node.hasPendingAnimations();
       if (pending || overridesUpdate) {
         node.update(dt, time);
@@ -6896,7 +6987,7 @@ var Scene = (_class15 = class _Scene {
       if (pending) walkHadAnimation = true;
       if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
       if (this._devActive && this._devFrameCount % 120 === 0) {
-        if (overridesUpdate && node.hasPendingAnimations === _chunkXXU56ZNAjs.Entity.prototype.hasPendingAnimations) {
+        if (overridesUpdate && node.hasPendingAnimations === _chunkXHPUCU5Pjs.Entity.prototype.hasPendingAnimations) {
           this._devWarn(
             `Entity "${node.id}" overrides update() but not hasPendingAnimations(). Custom motion in update() without overriding hasPendingAnimations() causes the idle throttle to drop the animation to ~2fps. Override hasPendingAnimations() to return true while motion is in flight.`
           );
@@ -7109,7 +7200,7 @@ var Scene = (_class15 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkM73XB4ZKjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkMO24PVGTjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -7322,7 +7413,7 @@ function defaultMeasurer() {
   sharedMeasurer ??= _layout.resolveGlyphMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class16 = class extends _chunkXXU56ZNAjs.Entity {
+var TextEntity = (_class16 = class extends _chunkXHPUCU5Pjs.Entity {
   
   
   
@@ -7526,7 +7617,7 @@ var TextEntity = (_class16 = class extends _chunkXXU56ZNAjs.Entity {
 }, _class16);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class17 = class extends _chunkXXU56ZNAjs.Entity {
+var GridTextEntity = (_class17 = class extends _chunkXHPUCU5Pjs.Entity {
   
   __init184() {this.fillStyle = "#ffffff"}
   __init185() {this.grid = []}
@@ -7545,7 +7636,7 @@ var GridTextEntity = (_class17 = class extends _chunkXXU56ZNAjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _187 => _187[0], 'optionalAccess', _188 => _188.length]) || 0;
+    this.cols = ascii.reduce((widest, row) => Math.max(widest, _nullishCoalesce(_optionalChain([row, 'optionalAccess', _187 => _187.length]), () => ( 0))), 0);
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -7620,7 +7711,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
+var SplineEntity = (_class18 = class extends _chunkXHPUCU5Pjs.Entity {
   
   
   
@@ -7633,6 +7724,12 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
   __init190() {this.bakedWidth = 0}
   __init191() {this.bakedHeight = 0}
+  /**
+   * Device-pixel ratio the bitmap was rasterized at. Tracked so a DPR change
+   * (browser zoom, a monitor move, a renderer whose clamp changed) re-bakes
+   * instead of blitting a bitmap at the wrong device density forever.
+   */
+  __init192() {this.bakedDPR = 0}
   /**
    * Gradient strokes can't be baked to a solid-color bitmap; they render
    * per-frame. Derived from `_doc`, so it is NOT readonly — assigning a new
@@ -7640,7 +7737,7 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
    */
   
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init192() {this.polylines = null}
+  __init193() {this.polylines = null}
   /**
    * The spline document to render. Assigning a new document invalidates all
    * caches (baked canvas, flattened polylines, bounds).
@@ -7674,9 +7771,9 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
    * local bounds after painting the curves. Useful for drag feedback and
    * debugging hit areas. Defaults to `false`.
    */
-  __init193() {this.showBounds = false}
+  __init194() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class18.prototype.__init188.call(this);_class18.prototype.__init189.call(this);_class18.prototype.__init190.call(this);_class18.prototype.__init191.call(this);_class18.prototype.__init192.call(this);_class18.prototype.__init193.call(this);;
+    super();_class18.prototype.__init188.call(this);_class18.prototype.__init189.call(this);_class18.prototype.__init190.call(this);_class18.prototype.__init191.call(this);_class18.prototype.__init192.call(this);_class18.prototype.__init193.call(this);_class18.prototype.__init194.call(this);;
     this._doc = doc;
     this._lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -7696,7 +7793,7 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
    */
   computeContainsGradient() {
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    return (_nullishCoalesce(_optionalChain([this, 'access', _189 => _189._doc, 'access', _190 => _190.equations, 'optionalAccess', _191 => _191.some, 'call', _192 => _192((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _193 => _193._doc, 'access', _194 => _194.paths, 'optionalAccess', _195 => _195.some, 'call', _196 => _196((p) => isGradient(p.color_rgb))]), () => ( false)));
+    return (_nullishCoalesce(_optionalChain([this, 'access', _188 => _188._doc, 'access', _189 => _189.equations, 'optionalAccess', _190 => _190.some, 'call', _191 => _191((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _192 => _192._doc, 'access', _193 => _193.paths, 'optionalAccess', _194 => _194.some, 'call', _195 => _195((p) => isGradient(p.color_rgb))]), () => ( false)));
   }
   /** Clear cached baked canvas and hit-test polylines. */
   invalidateCache() {
@@ -7856,14 +7953,14 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
     }
   }
   /** Bake all equations into an OffscreenCanvas once (when available). */
-  bake() {
+  bake(dpr) {
     this.baked = true;
     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;
+    this.bakedDPR = dpr;
     let canvas;
     if (typeof OffscreenCanvas !== "undefined") {
       canvas = new OffscreenCanvas(w * dpr, h * dpr);
@@ -7911,7 +8008,8 @@ var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
   render(r) {
     let rendered = false;
     if (this.cache && !this.containsGradient) {
-      if (!this.baked) this.bake();
+      const dpr = typeof r.pixelRatio === "number" && r.pixelRatio > 0 ? r.pixelRatio : typeof window !== "undefined" && typeof window.devicePixelRatio === "number" ? window.devicePixelRatio || 1 : 1;
+      if (!this.baked || this.bakedDPR !== dpr) this.bake(dpr);
       if (this.offscreen) {
         const pad = this.lineWidth + 2;
         r.drawImage(
@@ -7941,7 +8039,7 @@ async function loadSpline(url) {
 }
 
 // src/components/Rect.ts
-var Rect = class extends _chunkXXU56ZNAjs.Entity {
+var Rect = class extends _chunkXHPUCU5Pjs.Entity {
   
   
   
@@ -7997,7 +8095,7 @@ var Rect = class extends _chunkXXU56ZNAjs.Entity {
 };
 
 // src/components/Circle.ts
-var Circle = class extends _chunkXXU56ZNAjs.Entity {
+var Circle = class extends _chunkXHPUCU5Pjs.Entity {
   
   
   
@@ -8061,7 +8159,7 @@ var Circle = class extends _chunkXXU56ZNAjs.Entity {
 };
 
 // src/components/Group.ts
-var Group = class extends _chunkXXU56ZNAjs.Entity {
+var Group = class extends _chunkXHPUCU5Pjs.Entity {
   constructor(...children) {
     super();
     if (children.length > 0) this.add(...children);
@@ -8080,21 +8178,21 @@ var _math = require('@vectojs/math'); _createStarExport(_math);
 
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
+var DOMPortalEntity = (_class19 = class extends _chunkXHPUCU5Pjs.Entity {
   
-  __init194() {this.isDOMPortal = true}
-  __init195() {this.domListeners = []}
-  __init196() {this.resizeObserver = null}
-  __init197() {this.domBound = false}
-  __init198() {this.cachedWidth = 100}
-  __init199() {this.cachedHeight = 100}
-  __init200() {this.lastWidth = ""}
-  __init201() {this.lastHeight = ""}
-  __init202() {this.lastTransform = ""}
-  __init203() {this.lastZIndex = ""}
-  __init204() {this.lastOpacity = ""}
+  __init195() {this.isDOMPortal = true}
+  __init196() {this.domListeners = []}
+  __init197() {this.resizeObserver = null}
+  __init198() {this.domBound = false}
+  __init199() {this.cachedWidth = 100}
+  __init200() {this.cachedHeight = 100}
+  __init201() {this.lastWidth = ""}
+  __init202() {this.lastHeight = ""}
+  __init203() {this.lastTransform = ""}
+  __init204() {this.lastZIndex = ""}
+  __init205() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class19.prototype.__init194.call(this);_class19.prototype.__init195.call(this);_class19.prototype.__init196.call(this);_class19.prototype.__init197.call(this);_class19.prototype.__init198.call(this);_class19.prototype.__init199.call(this);_class19.prototype.__init200.call(this);_class19.prototype.__init201.call(this);_class19.prototype.__init202.call(this);_class19.prototype.__init203.call(this);_class19.prototype.__init204.call(this);;
+    super(id);_class19.prototype.__init195.call(this);_class19.prototype.__init196.call(this);_class19.prototype.__init197.call(this);_class19.prototype.__init198.call(this);_class19.prototype.__init199.call(this);_class19.prototype.__init200.call(this);_class19.prototype.__init201.call(this);_class19.prototype.__init202.call(this);_class19.prototype.__init203.call(this);_class19.prototype.__init204.call(this);_class19.prototype.__init205.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -8136,7 +8234,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
     ];
     for (const type of events) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(type, this, e));
+        this.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)(type, this, e));
       };
       this.domElement.addEventListener(type, handler);
       this.domListeners.push({ type, handler, capture: false });
@@ -8147,7 +8245,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
     ];
     for (const { native, vecto } of hoverEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(vecto, this, e, false));
+        this.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)(vecto, this, e, false));
       };
       this.domElement.addEventListener(native, handler);
       this.domListeners.push({ type: native, handler, capture: false });
@@ -8155,7 +8253,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
     const focusEvents = ["focus", "blur"];
     for (const type of focusEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(type, this, e, true));
+        this.dispatchEvent(new (0, _chunkXHPUCU5Pjs.VectoJSEvent)(type, this, e, true));
       };
       this.domElement.addEventListener(type, handler, true);
       this.domListeners.push({ type, handler, capture: true });
@@ -8206,8 +8304,8 @@ var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
 }, _class19);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkM73XB4ZKjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkM73XB4ZKjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkMO24PVGTjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkMO24PVGTjs.WebGPUParticleSystemManager);
 
 
 
@@ -8253,4 +8351,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkM73XB4ZKjs.WebGPUParticleSystemM
 
 
 
-exports.CanvasRenderer = _chunkM73XB4ZKjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DEFAULT_CONTENT_SEMANTIC_BUDGET = DEFAULT_CONTENT_SEMANTIC_BUDGET; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkXXU56ZNAjs.Entity; exports.GlyphRasterAtlas = _chunkM73XB4ZKjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkXXU56ZNAjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SCENE_OPTION_KEYS = SCENE_OPTION_KEYS; exports.SVGEntity = _chunkXXU56ZNAjs.SVGEntity; exports.SVGRenderer = _chunkM73XB4ZKjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkM73XB4ZKjs.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkXXU56ZNAjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkM73XB4ZKjs.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.contentLineInHint = _chunkXXU56ZNAjs.contentLineInHint; exports.createWebGLPointRenderer = _chunkM73XB4ZKjs.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.installRendererDevTraps = _chunkM73XB4ZKjs.installRendererDevTraps; exports.isRendererDevMode = _chunkM73XB4ZKjs.isRendererDevMode; exports.isSafeUrl = _chunkM73XB4ZKjs.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkM73XB4ZKjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkM73XB4ZKjs.sanitizeUrl; exports.setRendererDevMode = _chunkM73XB4ZKjs.setRendererDevMode;
+exports.CanvasRenderer = _chunkMO24PVGTjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DEFAULT_CONTENT_SEMANTIC_BUDGET = DEFAULT_CONTENT_SEMANTIC_BUDGET; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkXHPUCU5Pjs.Entity; exports.GlyphRasterAtlas = _chunkMO24PVGTjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkXHPUCU5Pjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SCENE_OPTION_KEYS = SCENE_OPTION_KEYS; exports.SVGEntity = _chunkXHPUCU5Pjs.SVGEntity; exports.SVGRenderer = _chunkMO24PVGTjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkMO24PVGTjs.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkXHPUCU5Pjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkMO24PVGTjs.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.contentLineInHint = _chunkXHPUCU5Pjs.contentLineInHint; exports.createWebGLPointRenderer = _chunkMO24PVGTjs.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.installRendererDevTraps = _chunkMO24PVGTjs.installRendererDevTraps; exports.isRendererDevMode = _chunkMO24PVGTjs.isRendererDevMode; exports.isSafeUrl = _chunkMO24PVGTjs.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkMO24PVGTjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkMO24PVGTjs.sanitizeUrl; exports.setRendererDevMode = _chunkMO24PVGTjs.setRendererDevMode;