@vectojs/core 1.10.0 → 1.11.0

package/dist/{chunk-GKLTTGBR.js → chunk-2Z23LTH3.js}

@@ -710,6 +710,25 @@ var Entity = (_class4 = class {
       handlers.forEach((h) => h(payload));
     }
   }
+  /**
+   * Programmatically focus the entity's projected a11y shadow element, if one
+   * exists. After `scene.add(entity)` the shadow element is typically created
+   * on the next a11y sync (within one animation frame), so this method retries
+   * once on the next rAF if the element isn't immediately available — matching
+   * the timing pattern the prior workaround described in findings.md achieved
+   * with `requestAnimationFrame(() => document.getElementById(id)?.focus())`.
+   */
+  focus() {
+    const el = _optionalChain([this, 'access', _57 => _57.scene, 'optionalAccess', _58 => _58.getA11yElement, 'call', _59 => _59(this.id)]);
+    if (el) {
+      el.focus();
+      return;
+    }
+    requestAnimationFrame(() => {
+      const retry = _optionalChain([this, 'access', _60 => _60.scene, 'optionalAccess', _61 => _61.getA11yElement, 'call', _62 => _62(this.id)]);
+      if (retry) retry.focus();
+    });
+  }
   /** Run one node's listeners for the event, honoring stopImmediatePropagation. */
   fireListeners(node, map, event) {
     const handlers = map.get(event.type);
@@ -1141,7 +1160,7 @@ var MSDFTextEntity = (_class6 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
-        _optionalChain([this, 'access', _57 => _57.scene, 'optionalAccess', _58 => _58.markDirty, 'call', _59 => _59()]);
+        _optionalChain([this, 'access', _63 => _63.scene, 'optionalAccess', _64 => _64.markDirty, 'call', _65 => _65()]);
       }
     });
   }

package/dist/{chunk-J2P6QZJV.mjs → chunk-XIEQHSBB.mjs}

@@ -710,6 +710,25 @@ var Entity = class {
       handlers.forEach((h) => h(payload));
     }
   }
+  /**
+   * Programmatically focus the entity's projected a11y shadow element, if one
+   * exists. After `scene.add(entity)` the shadow element is typically created
+   * on the next a11y sync (within one animation frame), so this method retries
+   * once on the next rAF if the element isn't immediately available — matching
+   * the timing pattern the prior workaround described in findings.md achieved
+   * with `requestAnimationFrame(() => document.getElementById(id)?.focus())`.
+   */
+  focus() {
+    const el = this.scene?.getA11yElement(this.id);
+    if (el) {
+      el.focus();
+      return;
+    }
+    requestAnimationFrame(() => {
+      const retry = this.scene?.getA11yElement(this.id);
+      if (retry) retry.focus();
+    });
+  }
   /** Run one node's listeners for the event, honoring stopImmediatePropagation. */
   fireListeners(node, map, event) {
     const handlers = map.get(event.type);

package/dist/index.js

@@ -27,7 +27,7 @@ var _chunkORCPCIJ7js = require('./chunk-ORCPCIJ7.js');
 
 
 
-var _chunkGKLTTGBRjs = require('./chunk-GKLTTGBR.js');
+var _chunk2Z23LTH3js = require('./chunk-2Z23LTH3.js');
 
 
 
@@ -44,7 +44,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 _chunkGKLTTGBRjs.Entity {
+var ComputeParticleEntity = (_class = class extends _chunk2Z23LTH3js.Entity {
   
   
   
@@ -735,14 +735,75 @@ var Scene = (_class2 = class _Scene {
   __init59() {this.pointerLeaveListener = null}
   __init60() {this.hasWarnedZeroSize = false}
   __init61() {this.fontLoadHandler = null}
-  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);_class2.prototype.__init49.call(this);_class2.prototype.__init50.call(this);_class2.prototype.__init51.call(this);_class2.prototype.__init52.call(this);_class2.prototype.__init53.call(this);_class2.prototype.__init54.call(this);_class2.prototype.__init55.call(this);_class2.prototype.__init56.call(this);_class2.prototype.__init57.call(this);_class2.prototype.__init58.call(this);_class2.prototype.__init59.call(this);_class2.prototype.__init60.call(this);_class2.prototype.__init61.call(this);
+  // ── Dev-mode warning infrastructure ──────────────────────────────
+  //
+  // Enable with `Scene.devMode = true` or by setting `globalThis.__DEV__`.
+  // Auto-detected when `NODE_ENV === 'development'`.
+  //
+  // Checks run once every ~120 frames (~2s at 60fps) to keep overhead
+  // negligible even when dev mode is on.
+  /** Toggle development-mode runtime warnings globally. */
+  static __initStatic3() {this.devMode = false}
+  static _devModeDetected() {
+    if (_Scene.devMode) return true;
+    const gp = typeof globalThis !== "undefined" ? globalThis : void 0;
+    if (_optionalChain([gp, 'optionalAccess', _23 => _23.__DEV__])) return true;
+    if (_optionalChain([gp, 'optionalAccess', _24 => _24.process, 'optionalAccess', _25 => _25.env, 'optionalAccess', _26 => _26.NODE_ENV]) === "development") return true;
+    return false;
+  }
+  
+  __init62() {this._devFrameCount = 0}
+  _devWarn(message) {
+    if (!this._devActive) return;
+    console.warn(`[vectojs/dev] ${message}`);
+  }
+  /** @internal Periodic dev checks — called once per frame in dev mode. */
+  _devRunChecks() {
+    this._devFrameCount++;
+    if (this._devFrameCount % 120 !== 0) return;
+    if (this.a11yElements) {
+      let interactiveCount = 0;
+      const walk = (node) => {
+        if (node.interactive && node.width > 0) interactiveCount++;
+        for (const c of node.children) walk(c);
+      };
+      walk(this.root);
+      for (const c of this.overlayRoot.children) walk(c);
+      const shadowCount = this.a11yElements.size;
+      if (shadowCount > interactiveCount + 2) {
+        this._devWarn(
+          `a11yElements (${shadowCount}) exceeds interactive entities (${interactiveCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
+        );
+      }
+    }
+    let checked = 0;
+    const walkProjections = (node) => {
+      if (checked > 10) return;
+      const proj = _optionalChain([node, 'access', _27 => _27.getContentProjection, 'optionalCall', _28 => _28()]);
+      if (_optionalChain([proj, 'optionalAccess', _29 => _29.text]) && proj.selectable !== false) {
+        const el = _optionalChain([this, 'access', _30 => _30.contentElements, 'optionalAccess', _31 => _31.get, 'call', _32 => _32(node.id)]);
+        if (el) {
+          const projectedText = el.textContent || "";
+          if (projectedText !== "" && projectedText !== proj.text) {
+            this._devWarn(
+              `Content projection mismatch for entity "${node.id}": projection says "${proj.text.slice(0, 60)}" but DOM shows "${projectedText.slice(0, 60)}". Ensure getContentProjection() output matches what drawSelf renders.`
+            );
+          }
+        }
+      }
+      checked++;
+      for (const c of node.children) walkProjections(c);
+    };
+    walkProjections(this.root);
+  }
+  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);_class2.prototype.__init49.call(this);_class2.prototype.__init50.call(this);_class2.prototype.__init51.call(this);_class2.prototype.__init52.call(this);_class2.prototype.__init53.call(this);_class2.prototype.__init54.call(this);_class2.prototype.__init55.call(this);_class2.prototype.__init56.call(this);_class2.prototype.__init57.call(this);_class2.prototype.__init58.call(this);_class2.prototype.__init59.call(this);_class2.prototype.__init60.call(this);_class2.prototype.__init61.call(this);_class2.prototype.__init62.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
-      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _23 => _23.style, 'optionalAccess', _24 => _24.width]));
-      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _25 => _25.style, 'optionalAccess', _26 => _26.height]));
+      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _33 => _33.style, 'optionalAccess', _34 => _34.width]));
+      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _35 => _35.style, 'optionalAccess', _36 => _36.height]));
       this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
       this.height = _nullishCoalesce(styleHeight, () => ( (canvas.height || canvas.clientHeight || 0)));
     } else {
@@ -750,15 +811,16 @@ var Scene = (_class2 = class _Scene {
       this.height = typeof window !== "undefined" ? window.innerHeight : canvas.clientHeight || canvas.height || 600;
     }
     const globalProcess = typeof globalThis !== "undefined" ? globalThis.process : void 0;
-    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _27 => _27.env, 'optionalAccess', _28 => _28.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _29 => _29.env, 'optionalAccess', _30 => _30.VITEST]) === "true");
+    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _37 => _37.env, 'optionalAccess', _38 => _38.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _39 => _39.env, 'optionalAccess', _40 => _40.VITEST]) === "true");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
     this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
+    this._devActive = _Scene._devModeDetected();
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkGKLTTGBRjs.Entity {
+    this.root = new class RootEntity extends _chunk2Z23LTH3js.Entity {
       isPointInside() {
         return false;
       }
@@ -767,7 +829,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkGKLTTGBRjs.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunk2Z23LTH3js.Entity {
       isPointInside() {
         return false;
       }
@@ -920,7 +982,7 @@ var Scene = (_class2 = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
-        _chunkGKLTTGBRjs.clearCssLineBoxMetrics.call(void 0, );
+        _chunk2Z23LTH3js.clearCssLineBoxMetrics.call(void 0, );
         this.contentFontEpoch++;
         this.markDirty();
       };
@@ -936,10 +998,10 @@ var Scene = (_class2 = class _Scene {
   }
   releaseContentSelectionForRebuild(el) {
     const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
-    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _31 => _31.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _32 => _32.focusNode]) ? el.contains(selection.focusNode) : false);
+    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _41 => _41.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _42 => _42.focusNode]) ? el.contains(selection.focusNode) : false);
     if (!ownsSelection) return;
     this.endContentSelectionDrag();
-    _optionalChain([selection, 'optionalAccess', _33 => _33.removeAllRanges, 'call', _34 => _34()]);
+    _optionalChain([selection, 'optionalAccess', _43 => _43.removeAllRanges, 'call', _44 => _44()]);
   }
   /**
    * Expose the underlying {@link IRenderer} for advanced direct-draw operations.
@@ -951,7 +1013,7 @@ var Scene = (_class2 = class _Scene {
   }
   /** Convert browser viewport coordinates into this Scene's logical coordinates. */
   clientToScene(clientX, clientY) {
-    const rect = _optionalChain([this, 'access', _35 => _35.canvas, 'access', _36 => _36.getBoundingClientRect, 'optionalCall', _37 => _37()]);
+    const rect = _optionalChain([this, 'access', _45 => _45.canvas, 'access', _46 => _46.getBoundingClientRect, 'optionalCall', _47 => _47()]);
     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;
@@ -977,7 +1039,7 @@ var Scene = (_class2 = class _Scene {
       cancelAnimationFrame(calibrationFrame);
     }
     this.contentGridCalibrationFrames.delete(entityId);
-    _optionalChain([this, 'access', _38 => _38.contentGridCalibrationProbes, 'access', _39 => _39.get, 'call', _40 => _40(entityId), 'optionalAccess', _41 => _41.remove, 'call', _42 => _42()]);
+    _optionalChain([this, 'access', _48 => _48.contentGridCalibrationProbes, 'access', _49 => _49.get, 'call', _50 => _50(entityId), 'optionalAccess', _51 => _51.remove, 'call', _52 => _52()]);
     this.contentGridCalibrationProbes.delete(entityId);
     delete el.dataset.vectoGridCalibrationPending;
     delete el.dataset.vectoGridCalibration;
@@ -1093,8 +1155,8 @@ var Scene = (_class2 = class _Scene {
         this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
       }
     }
-    _optionalChain([this, 'access', _43 => _43.a11yRoot, 'optionalAccess', _44 => _44.remove, 'call', _45 => _45()]);
-    _optionalChain([this, 'access', _46 => _46.portalRoot, 'optionalAccess', _47 => _47.remove, 'call', _48 => _48()]);
+    _optionalChain([this, 'access', _53 => _53.a11yRoot, 'optionalAccess', _54 => _54.remove, 'call', _55 => _55()]);
+    _optionalChain([this, 'access', _56 => _56.portalRoot, 'optionalAccess', _57 => _57.remove, 'call', _58 => _58()]);
     this.a11yElements.clear();
     for (const el of this.contentElements.values()) el.remove();
     this.contentElements.clear();
@@ -1107,10 +1169,10 @@ var Scene = (_class2 = class _Scene {
     for (const probe of this.contentGridCalibrationProbes.values()) probe.remove();
     this.contentGridCalibrationProbes.clear();
     this.endContentSelectionDrag();
-    _optionalChain([this, 'access', _49 => _49.pointRenderer, 'optionalAccess', _50 => _50.destroy, 'call', _51 => _51()]);
-    _optionalChain([this, 'access', _52 => _52.renderer, 'access', _53 => _53.dispose, 'optionalCall', _54 => _54()]);
-    _optionalChain([this, 'access', _55 => _55.glCanvas, 'optionalAccess', _56 => _56.remove, 'call', _57 => _57()]);
-    _optionalChain([this, 'access', _58 => _58.gpuCanvas, 'optionalAccess', _59 => _59.remove, 'call', _60 => _60()]);
+    _optionalChain([this, 'access', _59 => _59.pointRenderer, 'optionalAccess', _60 => _60.destroy, 'call', _61 => _61()]);
+    _optionalChain([this, 'access', _62 => _62.renderer, 'access', _63 => _63.dispose, 'optionalCall', _64 => _64()]);
+    _optionalChain([this, 'access', _65 => _65.glCanvas, 'optionalAccess', _66 => _66.remove, 'call', _67 => _67()]);
+    _optionalChain([this, 'access', _68 => _68.gpuCanvas, 'optionalAccess', _69 => _69.remove, 'call', _70 => _70()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -1122,7 +1184,7 @@ var Scene = (_class2 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _61 => _61.device, 'access', _62 => _62.destroy, 'optionalCall', _63 => _63()]);
+      _optionalChain([this, 'access', _71 => _71.device, 'access', _72 => _72.destroy, 'optionalCall', _73 => _73()]);
       this.device = null;
     }
   }
@@ -1271,15 +1333,18 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("click", node, e));
+        });
+        el.addEventListener("dblclick", (e) => {
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("dblclick", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.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, _chunkGKLTTGBRjs.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -1295,32 +1360,32 @@ var Scene = (_class2 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -1347,7 +1412,7 @@ var Scene = (_class2 = class _Scene {
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _64 => _64.start]), () => ( 0)), length: data.length };
+            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _74 => _74.start]), () => ( 0)), length: data.length };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -1380,7 +1445,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -1539,7 +1604,7 @@ var Scene = (_class2 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -1570,7 +1635,7 @@ var Scene = (_class2 = class _Scene {
           lineElement.style.position = "absolute";
           lineElement.dir = "auto";
           lineElement.style.left = `${line.x}px`;
-          lineElement.style.top = `${line.y + line.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
+          lineElement.style.top = `${line.y + line.baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
           lineElement.style.whiteSpace = "pre";
           if (lineFont) lineElement.style.font = lineFont;
           lineElement.style.lineHeight = `${lineHeight2}px`;
@@ -1622,7 +1687,7 @@ var Scene = (_class2 = class _Scene {
     const { a, b, c, d, e, f } = node.getWorldTransform();
     const contentX = _nullishCoalesce(projection.contentX, () => ( 0));
     const contentY = _nullishCoalesce(projection.contentY, () => ( 0));
-    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
     const localY = contentY + baselineOffset;
     el.style.left = `${e + a * contentX + c * localY}px`;
     el.style.top = `${f + b * contentX + d * localY}px`;
@@ -1686,15 +1751,15 @@ var Scene = (_class2 = class _Scene {
       for (let lineIndex = 0; lineIndex < grid.lines.length; lineIndex++) {
         const gridLine = grid.lines[lineIndex];
         const projectedLine = projectionLines[lineIndex];
-        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _65 => _65.lineHeight]), () => ( grid.lineHeight));
-        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _66 => _66.baseline]), () => ( grid.baseline));
-        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _67 => _67.font]), () => ( grid.font));
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _75 => _75.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _76 => _76.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _77 => _77.font]), () => ( grid.font));
         const lineElement = document.createElement("span");
         lineElement.dir = "ltr";
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
-        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _68 => _68.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _69 => _69.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _78 => _78.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _79 => _79.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
@@ -1790,7 +1855,7 @@ var Scene = (_class2 = class _Scene {
     if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
       cancelAnimationFrame(previous);
     }
-    _optionalChain([this, 'access', _70 => _70.contentGridCalibrationProbes, 'access', _71 => _71.get, 'call', _72 => _72(entityId), 'optionalAccess', _73 => _73.remove, 'call', _74 => _74()]);
+    _optionalChain([this, 'access', _80 => _80.contentGridCalibrationProbes, 'access', _81 => _81.get, 'call', _82 => _82(entityId), 'optionalAccess', _83 => _83.remove, 'call', _84 => _84()]);
     this.contentGridCalibrationProbes.delete(entityId);
     const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
     const probe = document.createElement("div");
@@ -1820,7 +1885,7 @@ var Scene = (_class2 = class _Scene {
       const sourceLength = Number(_nullishCoalesce(target.dataset.vectoGridSourceLength, () => ( 0)));
       const targetWidth = Number(_nullishCoalesce(target.dataset.vectoGridAdvance, () => ( 0)));
       if (sourceLength <= 0 || targetWidth <= 0) continue;
-      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _75 => _75.textContent, 'optionalAccess', _76 => _76.slice, 'call', _77 => _77(0, sourceLength)]), () => ( ""));
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _85 => _85.textContent, 'optionalAccess', _86 => _86.slice, 'call', _87 => _87(0, sourceLength)]), () => ( ""));
       if (!sourceText) continue;
       const measurementKey = JSON.stringify([
         target.style.font,
@@ -1970,12 +2035,12 @@ var Scene = (_class2 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _78 => _78.canvas, 'access', _79 => _79.getBoundingClientRect, 'optionalCall', _80 => _80()]);
-    const parentRect = _optionalChain([parent, 'access', _81 => _81.getBoundingClientRect, 'optionalCall', _82 => _82()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _83 => _83.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _84 => _84.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _85 => _85.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _86 => _86.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _87 => _87.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _88 => _88.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _88 => _88.canvas, 'access', _89 => _89.getBoundingClientRect, 'optionalCall', _90 => _90()]);
+    const parentRect = _optionalChain([parent, 'access', _91 => _91.getBoundingClientRect, 'optionalCall', _92 => _92()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _93 => _93.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _94 => _94.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _95 => _95.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _96 => _96.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _97 => _97.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _98 => _98.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]) {
@@ -2100,7 +2165,7 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _89 => _89.reducedMotionQuery, 'optionalAccess', _90 => _90.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _99 => _99.reducedMotionQuery, 'optionalAccess', _100 => _100.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -2278,7 +2343,7 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _91 => _91.pointRenderer, 'optionalAccess', _92 => _92.begin, 'call', _93 => _93()]);
+      _optionalChain([this, 'access', _101 => _101.pointRenderer, 'optionalAccess', _102 => _102.begin, 'call', _103 => _103()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -2289,6 +2354,13 @@ var Scene = (_class2 = class _Scene {
         node.update(dt, time);
         if (!walkHadAnimation && node.hasPendingAnimations()) walkHadAnimation = true;
         if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
+        if (this._devActive && this._devFrameCount % 120 === 0) {
+          if (node.update !== _chunk2Z23LTH3js.Entity.prototype.update && node.hasPendingAnimations === _chunk2Z23LTH3js.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.`
+            );
+          }
+        }
       }
       const cos = Math.cos(node.rotation);
       const sin = Math.sin(node.rotation);
@@ -2416,9 +2488,13 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _94 => _94.pointRenderer, 'optionalAccess', _95 => _95.flush, 'call', _96 => _96()]);
+      _optionalChain([this, 'access', _104 => _104.pointRenderer, 'optionalAccess', _105 => _105.flush, 'call', _106 => _106()]);
+    }
+    _optionalChain([renderer, 'access', _107 => _107.present, 'optionalCall', _108 => _108()]);
+    if (this._devActive) {
+      this._devFrameCount++;
+      this._devRunChecks();
     }
-    _optionalChain([renderer, 'access', _97 => _97.present, 'optionalCall', _98 => _98()]);
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
@@ -2622,7 +2698,7 @@ var Scene = (_class2 = class _Scene {
     }
     return null;
   }
-}, _class2.__initStatic(), _class2.__initStatic2(), _class2);
+}, _class2.__initStatic(), _class2.__initStatic2(), _class2.__initStatic3(), _class2);
 
 // src/components/TextEntity.ts
 var sharedMeasurer;
@@ -2630,20 +2706,20 @@ function defaultMeasurer() {
   if (sharedMeasurer === void 0) sharedMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkGKLTTGBRjs.Entity {
+var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
   
-  __init62() {this.nodes = []}
+  __init63() {this.nodes = []}
   
-  __init63() {this.fillStyle = "#94a3b8"}
-  __init64() {this.strokeStyle = null}
-  __init65() {this.hoveredFillStyle = "#ffffff"}
-  __init66() {this.lineWidth = 1}
-  __init67() {this.isHovered = false}
+  __init64() {this.fillStyle = "#94a3b8"}
+  __init65() {this.strokeStyle = null}
+  __init66() {this.hoveredFillStyle = "#ffffff"}
+  __init67() {this.lineWidth = 1}
+  __init68() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init62.call(this);_class3.prototype.__init63.call(this);_class3.prototype.__init64.call(this);_class3.prototype.__init65.call(this);_class3.prototype.__init66.call(this);_class3.prototype.__init67.call(this);;
+    super();_class3.prototype.__init63.call(this);_class3.prototype.__init64.call(this);_class3.prototype.__init65.call(this);_class3.prototype.__init66.call(this);_class3.prototype.__init67.call(this);_class3.prototype.__init68.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
@@ -2756,17 +2832,17 @@ var TextEntity = (_class3 = class extends _chunkGKLTTGBRjs.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkGKLTTGBRjs.Entity {
+var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
   
-  __init68() {this.fillStyle = "#ffffff"}
-  __init69() {this.grid = []}
+  __init69() {this.fillStyle = "#ffffff"}
+  __init70() {this.grid = []}
   // Array of rows
-  __init70() {this.cols = 0}
-  __init71() {this.rows = 0}
+  __init71() {this.cols = 0}
+  __init72() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init68.call(this);_class4.prototype.__init69.call(this);_class4.prototype.__init70.call(this);_class4.prototype.__init71.call(this);;
+    super();_class4.prototype.__init69.call(this);_class4.prototype.__init70.call(this);_class4.prototype.__init71.call(this);_class4.prototype.__init72.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -2775,7 +2851,7 @@ var GridTextEntity = (_class4 = class extends _chunkGKLTTGBRjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _99 => _99[0], 'optionalAccess', _100 => _100.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _109 => _109[0], 'optionalAccess', _110 => _110.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -2850,7 +2926,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
+var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
@@ -2858,23 +2934,23 @@ var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
-  __init72() {this.offscreen = null}
-  __init73() {this.baked = false}
+  __init73() {this.offscreen = null}
+  __init74() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init74() {this.bakedWidth = 0}
-  __init75() {this.bakedHeight = 0}
+  __init75() {this.bakedWidth = 0}
+  __init76() {this.bakedHeight = 0}
   /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
   
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init76() {this.polylines = null}
+  __init77() {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`.
    */
-  __init77() {this.showBounds = false}
+  __init78() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init72.call(this);_class5.prototype.__init73.call(this);_class5.prototype.__init74.call(this);_class5.prototype.__init75.call(this);_class5.prototype.__init76.call(this);_class5.prototype.__init77.call(this);;
+    super();_class5.prototype.__init73.call(this);_class5.prototype.__init74.call(this);_class5.prototype.__init75.call(this);_class5.prototype.__init76.call(this);_class5.prototype.__init77.call(this);_class5.prototype.__init78.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -2885,7 +2961,7 @@ var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _101 => _101.doc, 'access', _102 => _102.equations, 'optionalAccess', _103 => _103.some, 'call', _104 => _104((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _105 => _105.doc, 'access', _106 => _106.paths, 'optionalAccess', _107 => _107.some, 'call', _108 => _108((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _111 => _111.doc, 'access', _112 => _112.equations, 'optionalAccess', _113 => _113.some, 'call', _114 => _114((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _115 => _115.doc, 'access', _116 => _116.paths, 'optionalAccess', _117 => _117.some, 'call', _118 => _118((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -3125,7 +3201,7 @@ async function loadSpline(url) {
 }
 
 // src/components/Rect.ts
-var Rect = class extends _chunkGKLTTGBRjs.Entity {
+var Rect = class extends _chunk2Z23LTH3js.Entity {
   
   
   
@@ -3174,7 +3250,7 @@ var Rect = class extends _chunkGKLTTGBRjs.Entity {
 };
 
 // src/components/Circle.ts
-var Circle = class extends _chunkGKLTTGBRjs.Entity {
+var Circle = class extends _chunk2Z23LTH3js.Entity {
   
   
   
@@ -3234,7 +3310,7 @@ var Circle = class extends _chunkGKLTTGBRjs.Entity {
 };
 
 // src/components/Group.ts
-var Group = class extends _chunkGKLTTGBRjs.Entity {
+var Group = class extends _chunk2Z23LTH3js.Entity {
   constructor(...children) {
     super();
     if (children.length > 0) this.add(...children);
@@ -3249,9 +3325,9 @@ var Group = class extends _chunkGKLTTGBRjs.Entity {
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __init78() {this.grid = /* @__PURE__ */ new Map()}
-  __init79() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init78.call(this);_class6.prototype.__init79.call(this);
+  __init79() {this.grid = /* @__PURE__ */ new Map()}
+  __init80() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init79.call(this);_class6.prototype.__init80.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -3305,7 +3381,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _109 => _109.grid, 'access', _110 => _110.get, 'call', _111 => _111(key), 'optionalAccess', _112 => _112.delete, 'call', _113 => _113(id)]);
+      _optionalChain([this, 'access', _119 => _119.grid, 'access', _120 => _120.get, 'call', _121 => _121(key), 'optionalAccess', _122 => _122.delete, 'call', _123 => _123(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -3341,20 +3417,20 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
   
-  __init80() {this.isDOMPortal = true}
-  __init81() {this.domListeners = []}
-  __init82() {this.resizeObserver = null}
-  __init83() {this.cachedWidth = 100}
-  __init84() {this.cachedHeight = 100}
-  __init85() {this.lastWidth = ""}
-  __init86() {this.lastHeight = ""}
-  __init87() {this.lastTransform = ""}
-  __init88() {this.lastZIndex = ""}
-  __init89() {this.lastOpacity = ""}
+  __init81() {this.isDOMPortal = true}
+  __init82() {this.domListeners = []}
+  __init83() {this.resizeObserver = null}
+  __init84() {this.cachedWidth = 100}
+  __init85() {this.cachedHeight = 100}
+  __init86() {this.lastWidth = ""}
+  __init87() {this.lastHeight = ""}
+  __init88() {this.lastTransform = ""}
+  __init89() {this.lastZIndex = ""}
+  __init90() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init80.call(this);_class7.prototype.__init81.call(this);_class7.prototype.__init82.call(this);_class7.prototype.__init83.call(this);_class7.prototype.__init84.call(this);_class7.prototype.__init85.call(this);_class7.prototype.__init86.call(this);_class7.prototype.__init87.call(this);_class7.prototype.__init88.call(this);_class7.prototype.__init89.call(this);;
+    super(id);_class7.prototype.__init81.call(this);_class7.prototype.__init82.call(this);_class7.prototype.__init83.call(this);_class7.prototype.__init84.call(this);_class7.prototype.__init85.call(this);_class7.prototype.__init86.call(this);_class7.prototype.__init87.call(this);_class7.prototype.__init88.call(this);_class7.prototype.__init89.call(this);_class7.prototype.__init90.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -3383,7 +3459,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
       ];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -3394,7 +3470,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -3402,7 +3478,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunk2Z23LTH3js.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -3493,4 +3569,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkORCPCIJ7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkGKLTTGBRjs.Easing; exports.Entity = _chunkGKLTTGBRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkGKLTTGBRjs.SpringDriver; exports.SpringPhysics = _chunkGKLTTGBRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkGKLTTGBRjs.TweenDriver; exports.VectoJSEvent = _chunkGKLTTGBRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.isSafeUrl = _chunkORCPCIJ7js.isSafeUrl; exports.isTweenConfig = _chunkGKLTTGBRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid; exports.sanitizeUrl = _chunkORCPCIJ7js.sanitizeUrl;
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk2Z23LTH3js.Easing; exports.Entity = _chunk2Z23LTH3js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunk2Z23LTH3js.MSDFFont; exports.MSDFTextEntity = _chunk2Z23LTH3js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunk2Z23LTH3js.SVGEntity; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk2Z23LTH3js.SpringDriver; exports.SpringPhysics = _chunk2Z23LTH3js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunk2Z23LTH3js.TweenDriver; exports.VectoJSEvent = _chunk2Z23LTH3js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunk2Z23LTH3js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunk2Z23LTH3js.cssLineBoxBaseline; exports.isSafeUrl = _chunkORCPCIJ7js.isSafeUrl; exports.isTweenConfig = _chunk2Z23LTH3js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunk2Z23LTH3js.prepareContentGrid; exports.sanitizeUrl = _chunkORCPCIJ7js.sanitizeUrl;

package/dist/index.mjs

@@ -27,7 +27,7 @@ import {
   cssLineBoxBaseline,
   isTweenConfig,
   prepareContentGrid
-} from "./chunk-J2P6QZJV.mjs";
+} from "./chunk-XIEQHSBB.mjs";
 import {
   ArabicShaper,
   BidiResolver,
@@ -735,6 +735,67 @@ var Scene = class _Scene {
   pointerLeaveListener = null;
   hasWarnedZeroSize = false;
   fontLoadHandler = null;
+  // ── Dev-mode warning infrastructure ──────────────────────────────
+  //
+  // Enable with `Scene.devMode = true` or by setting `globalThis.__DEV__`.
+  // Auto-detected when `NODE_ENV === 'development'`.
+  //
+  // Checks run once every ~120 frames (~2s at 60fps) to keep overhead
+  // negligible even when dev mode is on.
+  /** Toggle development-mode runtime warnings globally. */
+  static devMode = false;
+  static _devModeDetected() {
+    if (_Scene.devMode) return true;
+    const gp = typeof globalThis !== "undefined" ? globalThis : void 0;
+    if (gp?.__DEV__) return true;
+    if (gp?.process?.env?.NODE_ENV === "development") return true;
+    return false;
+  }
+  _devActive;
+  _devFrameCount = 0;
+  _devWarn(message) {
+    if (!this._devActive) return;
+    console.warn(`[vectojs/dev] ${message}`);
+  }
+  /** @internal Periodic dev checks — called once per frame in dev mode. */
+  _devRunChecks() {
+    this._devFrameCount++;
+    if (this._devFrameCount % 120 !== 0) return;
+    if (this.a11yElements) {
+      let interactiveCount = 0;
+      const walk = (node) => {
+        if (node.interactive && node.width > 0) interactiveCount++;
+        for (const c of node.children) walk(c);
+      };
+      walk(this.root);
+      for (const c of this.overlayRoot.children) walk(c);
+      const shadowCount = this.a11yElements.size;
+      if (shadowCount > interactiveCount + 2) {
+        this._devWarn(
+          `a11yElements (${shadowCount}) exceeds interactive entities (${interactiveCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
+        );
+      }
+    }
+    let checked = 0;
+    const walkProjections = (node) => {
+      if (checked > 10) return;
+      const proj = node.getContentProjection?.();
+      if (proj?.text && proj.selectable !== false) {
+        const el = this.contentElements?.get(node.id);
+        if (el) {
+          const projectedText = el.textContent || "";
+          if (projectedText !== "" && projectedText !== proj.text) {
+            this._devWarn(
+              `Content projection mismatch for entity "${node.id}": projection says "${proj.text.slice(0, 60)}" but DOM shows "${projectedText.slice(0, 60)}". Ensure getContentProjection() output matches what drawSelf renders.`
+            );
+          }
+        }
+      }
+      checked++;
+      for (const c of node.children) walkProjections(c);
+    };
+    walkProjections(this.root);
+  }
   constructor(canvas, options = {}) {
     this.canvas = canvas;
     this.debugA11y = options.debugA11y ?? false;
@@ -757,6 +818,7 @@ var Scene = class _Scene {
     this.particleBackend = options.particleBackend ?? "auto";
     this.a11ySyncInterval = options.a11ySyncInterval ?? 0;
     this.contentProjectionEnabled = options.contentProjection ?? true;
+    this._devActive = _Scene._devModeDetected();
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
     this.root = new class RootEntity extends Entity {
       isPointInside() {
@@ -1273,6 +1335,9 @@ var Scene = class _Scene {
         el.addEventListener("click", (e) => {
           node.dispatchEvent(new VectoJSEvent("click", node, e));
         });
+        el.addEventListener("dblclick", (e) => {
+          node.dispatchEvent(new VectoJSEvent("dblclick", node, e));
+        });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
           node.dispatchEvent(new VectoJSEvent("hover", node, e, false));
@@ -2289,6 +2354,13 @@ var Scene = class _Scene {
         node.update(dt, time);
         if (!walkHadAnimation && node.hasPendingAnimations()) walkHadAnimation = true;
         if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
+        if (this._devActive && this._devFrameCount % 120 === 0) {
+          if (node.update !== Entity.prototype.update && node.hasPendingAnimations === 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.`
+            );
+          }
+        }
       }
       const cos = Math.cos(node.rotation);
       const sin = Math.sin(node.rotation);
@@ -2419,6 +2491,10 @@ var Scene = class _Scene {
       this.pointRenderer?.flush();
     }
     renderer.present?.();
+    if (this._devActive) {
+      this._devFrameCount++;
+      this._devRunChecks();
+    }
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.

package/dist/text.js

@@ -5,7 +5,7 @@
 
 
 
-var _chunkGKLTTGBRjs = require('./chunk-GKLTTGBR.js');
+var _chunk2Z23LTH3js = require('./chunk-2Z23LTH3.js');
 
 
 
@@ -19,4 +19,4 @@ var _chunk4AR425ARjs = require('./chunk-4AR425AR.js');
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid;
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.MSDFFont = _chunk2Z23LTH3js.MSDFFont; exports.MSDFTextEntity = _chunk2Z23LTH3js.MSDFTextEntity; exports.SVGEntity = _chunk2Z23LTH3js.SVGEntity; exports.clearCssLineBoxMetrics = _chunk2Z23LTH3js.clearCssLineBoxMetrics; exports.cssLineBoxBaseline = _chunk2Z23LTH3js.cssLineBoxBaseline; exports.prepareContentGrid = _chunk2Z23LTH3js.prepareContentGrid;

package/dist/text.mjs

@@ -5,7 +5,7 @@ import {
   clearCssLineBoxMetrics,
   cssLineBoxBaseline,
   prepareContentGrid
-} from "./chunk-J2P6QZJV.mjs";
+} from "./chunk-XIEQHSBB.mjs";
 import {
   ArabicShaper,
   BidiResolver

package/dist/tree/Entity.d.ts

@@ -192,7 +192,7 @@ export interface A11yAttributes {
 /**
  * Union of all pointer/interaction events that can be emitted by an {@link Entity}.
  */
-export type VectoEvent = 'click' | 'hover' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'keydown' | 'keyup';
+export type VectoEvent = 'click' | 'dblclick' | 'hover' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerleave' | 'change' | 'focus' | 'blur' | 'wheel' | 'keydown' | 'keyup';
 /** Options for {@link Entity.on} / {@link Entity.off}. */
 export interface ListenerOptions {
     /** Register the listener for the capture phase (root→target) instead of bubble. */
@@ -470,6 +470,15 @@ export declare abstract class Entity {
      * @param payload - Arbitrary data forwarded to each listener.
      */
     emit(event: VectoEvent, payload: any): void;
+    /**
+     * Programmatically focus the entity's projected a11y shadow element, if one
+     * exists. After `scene.add(entity)` the shadow element is typically created
+     * on the next a11y sync (within one animation frame), so this method retries
+     * once on the next rAF if the element isn't immediately available — matching
+     * the timing pattern the prior workaround described in findings.md achieved
+     * with `requestAnimationFrame(() => document.getElementById(id)?.focus())`.
+     */
+    focus(): void;
     /** Run one node's listeners for the event, honoring stopImmediatePropagation. */
     private fireListeners;
     /**

package/dist/tree/Scene.d.ts

@@ -233,6 +233,14 @@ export declare class Scene {
     private pointerLeaveListener;
     private hasWarnedZeroSize;
     private fontLoadHandler;
+    /** Toggle development-mode runtime warnings globally. */
+    static devMode: boolean;
+    private static _devModeDetected;
+    private _devActive;
+    private _devFrameCount;
+    private _devWarn;
+    /** @internal Periodic dev checks — called once per frame in dev mode. */
+    private _devRunChecks;
     constructor(canvas: HTMLCanvasElement, options?: SceneOptions);
     private endContentSelectionDrag;
     private releaseContentSelectionForRebuild;

package/package.json

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