@vectojs/core 1.11.0 → 1.11.2

package/dist/index.js

@@ -701,40 +701,47 @@ var Scene = (_class2 = class _Scene {
   __init39() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
   __init40() {this.portalEntities = /* @__PURE__ */ new Map()}
   __init41() {this.renderOrderCounter = 0}
+  /**
+   * Authoritative paint order for semantic nodes discovered during the main
+   * render. A node may not have a DOM projection until the following a11y
+   * sync, so retaining the order prevents a newly opened overlay from spending
+   * its first frame below previously projected controls.
+   */
+  __init42() {this.a11yRenderOrders = /* @__PURE__ */ new Map()}
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
-  __init42() {this.pointRenderer = null}
-  __init43() {this.glCanvas = null}
+  __init43() {this.pointRenderer = null}
+  __init44() {this.glCanvas = null}
   
   
   
-  __init44() {this.disableWindowResize = false}
+  __init45() {this.disableWindowResize = false}
   /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
   
   // WebGPU properties
-  __init45() {this.destroyed = false}
-  __init46() {this.device = null}
-  __init47() {this.deviceLost = false}
-  __init48() {this.particleBackend = "auto"}
-  __init49() {this._webgpuDisabled = false}
+  __init46() {this.destroyed = false}
+  __init47() {this.device = null}
+  __init48() {this.deviceLost = false}
+  __init49() {this.particleBackend = "auto"}
+  __init50() {this._webgpuDisabled = false}
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
-  __init50() {this.recoveryTimerId = null}
-  __init51() {this.manager = null}
-  __init52() {this.initializingWebGPU = false}
-  __init53() {this.gpuCanvas = null}
-  __init54() {this.gpuContext = null}
+  __init51() {this.recoveryTimerId = null}
+  __init52() {this.manager = null}
+  __init53() {this.initializingWebGPU = false}
+  __init54() {this.gpuCanvas = null}
+  __init55() {this.gpuContext = null}
   /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
-  __init55() {this.gpuHasContent = false}
-  __init56() {this.mouseX = -9999}
-  __init57() {this.mouseY = -9999}
-  __init58() {this.pointerMoveListener = null}
-  __init59() {this.pointerLeaveListener = null}
-  __init60() {this.hasWarnedZeroSize = false}
-  __init61() {this.fontLoadHandler = null}
+  __init56() {this.gpuHasContent = false}
+  __init57() {this.mouseX = -9999}
+  __init58() {this.mouseY = -9999}
+  __init59() {this.pointerMoveListener = null}
+  __init60() {this.pointerLeaveListener = null}
+  __init61() {this.hasWarnedZeroSize = false}
+  __init62() {this.fontLoadHandler = null}
   // ── Dev-mode warning infrastructure ──────────────────────────────
   //
   // Enable with `Scene.devMode = true` or by setting `globalThis.__DEV__`.
@@ -752,7 +759,7 @@ var Scene = (_class2 = class _Scene {
     return false;
   }
   
-  __init62() {this._devFrameCount = 0}
+  __init63() {this._devFrameCount = 0}
   _devWarn(message) {
     if (!this._devActive) return;
     console.warn(`[vectojs/dev] ${message}`);
@@ -796,7 +803,7 @@ var Scene = (_class2 = class _Scene {
     };
     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);
+  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);_class2.prototype.__init63.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
@@ -1463,6 +1470,10 @@ var Scene = (_class2 = class _Scene {
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
       }
+      const renderOrder = this.a11yRenderOrders.get(node.id);
+      if (renderOrder !== void 0 && el.style.zIndex !== String(renderOrder)) {
+        el.style.zIndex = String(renderOrder);
+      }
       const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
       const desiredTabIndex = _nullishCoalesce(attrs.tabIndex, () => ( implicitTabIndex));
       if (desiredTabIndex === null) {
@@ -2181,7 +2192,11 @@ var Scene = (_class2 = class _Scene {
       this.scheduleFrame();
       return;
     }
-    const dt = time - this.lastTime;
+    let dt = time - this.lastTime;
+    if (cap > 0) {
+      const nominal = 1e3 / cap;
+      if (Math.abs(dt - nominal) < nominal * 0.3) dt = nominal;
+    }
     this.lastTime = time;
     if (this.renderMode === "onDemand" && isIdle) {
       this.scheduleFrame();
@@ -2223,6 +2238,7 @@ var Scene = (_class2 = class _Scene {
     }
     if (isMainRenderer) {
       this.renderOrderCounter = 0;
+      this.a11yRenderOrders.clear();
       this.activePortalsThisFrame.clear();
     }
     const computeEntities = [];
@@ -2381,8 +2397,11 @@ var Scene = (_class2 = class _Scene {
       const orthogonalTolerance = Math.max(1, worldScaleX * worldScaleY) * 1e-6;
       const isSimilarityTransform = Number.isFinite(worldScaleX) && Number.isFinite(worldScaleY) && Math.abs(worldScaleX - worldScaleY) <= scaleTolerance && Math.abs(a * c + b * d) <= orthogonalTolerance;
       const a11yEl = isMainRenderer ? this.a11yElements.get(node.id) : void 0;
-      if (a11yEl) {
-        a11yEl.style.zIndex = String(this.renderOrderCounter++);
+      const willProjectA11y = isMainRenderer && node.interactive && (node.width > 0 || node.a11yFullViewport);
+      if (a11yEl || willProjectA11y) {
+        const renderOrder = this.renderOrderCounter++;
+        if (willProjectA11y) this.a11yRenderOrders.set(node.id, renderOrder);
+        if (a11yEl) a11yEl.style.zIndex = String(renderOrder);
       }
       if (node.isDOMPortal) {
         if (isMainRenderer) {
@@ -2711,15 +2730,15 @@ var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
-  __init63() {this.nodes = []}
+  __init64() {this.nodes = []}
   
-  __init64() {this.fillStyle = "#94a3b8"}
-  __init65() {this.strokeStyle = null}
-  __init66() {this.hoveredFillStyle = "#ffffff"}
-  __init67() {this.lineWidth = 1}
-  __init68() {this.isHovered = false}
+  __init65() {this.fillStyle = "#94a3b8"}
+  __init66() {this.strokeStyle = null}
+  __init67() {this.hoveredFillStyle = "#ffffff"}
+  __init68() {this.lineWidth = 1}
+  __init69() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    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);;
+    super();_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);_class3.prototype.__init69.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
@@ -2834,15 +2853,15 @@ var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
 // src/components/GridTextEntity.ts
 var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
   
-  __init69() {this.fillStyle = "#ffffff"}
-  __init70() {this.grid = []}
+  __init70() {this.fillStyle = "#ffffff"}
+  __init71() {this.grid = []}
   // Array of rows
-  __init71() {this.cols = 0}
-  __init72() {this.rows = 0}
+  __init72() {this.cols = 0}
+  __init73() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init69.call(this);_class4.prototype.__init70.call(this);_class4.prototype.__init71.call(this);_class4.prototype.__init72.call(this);;
+    super();_class4.prototype.__init70.call(this);_class4.prototype.__init71.call(this);_class4.prototype.__init72.call(this);_class4.prototype.__init73.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -2934,23 +2953,23 @@ var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
-  __init73() {this.offscreen = null}
-  __init74() {this.baked = false}
+  __init74() {this.offscreen = null}
+  __init75() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init75() {this.bakedWidth = 0}
-  __init76() {this.bakedHeight = 0}
+  __init76() {this.bakedWidth = 0}
+  __init77() {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. */
-  __init77() {this.polylines = null}
+  __init78() {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`.
    */
-  __init78() {this.showBounds = false}
+  __init79() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    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);;
+    super();_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);_class5.prototype.__init79.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -3325,9 +3344,9 @@ var Group = class extends _chunk2Z23LTH3js.Entity {
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __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);
+  __init80() {this.grid = /* @__PURE__ */ new Map()}
+  __init81() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init80.call(this);_class6.prototype.__init81.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -3419,18 +3438,18 @@ var SpatialHashGrid = (_class6 = class {
 // src/tree/DOMPortalEntity.ts
 var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
   
-  __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 = ""}
+  __init82() {this.isDOMPortal = true}
+  __init83() {this.domListeners = []}
+  __init84() {this.resizeObserver = null}
+  __init85() {this.cachedWidth = 100}
+  __init86() {this.cachedHeight = 100}
+  __init87() {this.lastWidth = ""}
+  __init88() {this.lastHeight = ""}
+  __init89() {this.lastTransform = ""}
+  __init90() {this.lastZIndex = ""}
+  __init91() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    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);;
+    super(id);_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);_class7.prototype.__init91.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));

package/dist/index.mjs

@@ -701,6 +701,13 @@ var Scene = class _Scene {
   activePortalsPrevFrame = /* @__PURE__ */ new Set();
   portalEntities = /* @__PURE__ */ new Map();
   renderOrderCounter = 0;
+  /**
+   * Authoritative paint order for semantic nodes discovered during the main
+   * render. A node may not have a DOM projection until the following a11y
+   * sync, so retaining the order prevents a newly opened overlay from spending
+   * its first frame below previously projected controls.
+   */
+  a11yRenderOrders = /* @__PURE__ */ new Map();
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
   pointRenderer = null;
   glCanvas = null;
@@ -1463,6 +1470,10 @@ var Scene = class _Scene {
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
       }
+      const renderOrder = this.a11yRenderOrders.get(node.id);
+      if (renderOrder !== void 0 && el.style.zIndex !== String(renderOrder)) {
+        el.style.zIndex = String(renderOrder);
+      }
       const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
       const desiredTabIndex = attrs.tabIndex ?? implicitTabIndex;
       if (desiredTabIndex === null) {
@@ -2181,7 +2192,11 @@ var Scene = class _Scene {
       this.scheduleFrame();
       return;
     }
-    const dt = time - this.lastTime;
+    let dt = time - this.lastTime;
+    if (cap > 0) {
+      const nominal = 1e3 / cap;
+      if (Math.abs(dt - nominal) < nominal * 0.3) dt = nominal;
+    }
     this.lastTime = time;
     if (this.renderMode === "onDemand" && isIdle) {
       this.scheduleFrame();
@@ -2223,6 +2238,7 @@ var Scene = class _Scene {
     }
     if (isMainRenderer) {
       this.renderOrderCounter = 0;
+      this.a11yRenderOrders.clear();
       this.activePortalsThisFrame.clear();
     }
     const computeEntities = [];
@@ -2381,8 +2397,11 @@ var Scene = class _Scene {
       const orthogonalTolerance = Math.max(1, worldScaleX * worldScaleY) * 1e-6;
       const isSimilarityTransform = Number.isFinite(worldScaleX) && Number.isFinite(worldScaleY) && Math.abs(worldScaleX - worldScaleY) <= scaleTolerance && Math.abs(a * c + b * d) <= orthogonalTolerance;
       const a11yEl = isMainRenderer ? this.a11yElements.get(node.id) : void 0;
-      if (a11yEl) {
-        a11yEl.style.zIndex = String(this.renderOrderCounter++);
+      const willProjectA11y = isMainRenderer && node.interactive && (node.width > 0 || node.a11yFullViewport);
+      if (a11yEl || willProjectA11y) {
+        const renderOrder = this.renderOrderCounter++;
+        if (willProjectA11y) this.a11yRenderOrders.set(node.id, renderOrder);
+        if (a11yEl) a11yEl.style.zIndex = String(renderOrder);
       }
       if (node.isDOMPortal) {
         if (isMainRenderer) {

package/dist/tree/Scene.d.ts

@@ -205,6 +205,13 @@ export declare class Scene {
     private activePortalsPrevFrame;
     private portalEntities;
     private renderOrderCounter;
+    /**
+     * Authoritative paint order for semantic nodes discovered during the main
+     * render. A node may not have a DOM projection until the following a11y
+     * sync, so retaining the order prevents a newly opened overlay from spending
+     * its first frame below previously projected controls.
+     */
+    private a11yRenderOrders;
     private pointRenderer;
     private glCanvas;
     private debugA11y;

package/package.json

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