@vectojs/core 1.16.1 → 1.16.3

package/dist/{chunk-IYPLG4Z4.js → chunk-L4SWVP2H.js}

@@ -827,8 +827,6 @@ function fromCanvas(css) {
 function parseColorToRGBA(css) {
   const hit = cache.get(css);
   if (hit) {
-    cache.delete(css);
-    cache.set(css, hit);
     return hit;
   }
   const trimmed = css.trim();
@@ -843,12 +841,26 @@ function parseColorToRGBA(css) {
 // src/renderer/WebGLPointRenderer.ts
 var FLOATS_PER_POINT = 7;
 var POINT_STRIDE = FLOATS_PER_POINT * 4;
+var VERTS_PER_QUAD = 4;
+var INDICES_PER_QUAD = 6;
 var FLOATS_PER_RECT_VERT = 6;
 var RECT_VERT_STRIDE = FLOATS_PER_RECT_VERT * 4;
-var VERTS_PER_RECT = 6;
 var FLOATS_PER_SPRITE_VERT = 8;
 var SPRITE_VERT_STRIDE = FLOATS_PER_SPRITE_VERT * 4;
-var VERTS_PER_SPRITE = 6;
+function buildQuadIndices(quads) {
+  const out = new Uint32Array(quads * INDICES_PER_QUAD);
+  for (let i = 0; i < quads; i++) {
+    const v = i * VERTS_PER_QUAD;
+    const o = i * INDICES_PER_QUAD;
+    out[o] = v;
+    out[o + 1] = v + 1;
+    out[o + 2] = v + 2;
+    out[o + 3] = v;
+    out[o + 4] = v + 2;
+    out[o + 5] = v + 3;
+  }
+  return out;
+}
 var POINT_VERT = `#version 300 es
 in vec2 a_pos;
 in float a_radius;
@@ -976,6 +988,120 @@ function link(gl, vsSrc, fsSrc) {
   }
   return program;
 }
+function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
+  let x1;
+  let y1;
+  let x2;
+  let y2;
+  let x3;
+  let y3;
+  if (rotation === 0) {
+    x1 = x + width;
+    y1 = y;
+    x2 = x + width;
+    y2 = y + height;
+    x3 = x;
+    y3 = y + height;
+  } else {
+    const s = Math.sin(rotation);
+    const c = Math.cos(rotation);
+    const wc = width * c;
+    const ws = width * s;
+    const hc = height * c;
+    const hs = height * s;
+    x1 = x + wc;
+    y1 = y + ws;
+    x2 = x + wc - hs;
+    y2 = y + ws + hc;
+    x3 = x - hs;
+    y3 = y + hc;
+  }
+  out[o] = x;
+  out[o + 1] = y;
+  out[o + 2] = u0;
+  out[o + 3] = v0;
+  out[o + 4] = r;
+  out[o + 5] = g;
+  out[o + 6] = b;
+  out[o + 7] = al;
+  out[o + 8] = x1;
+  out[o + 9] = y1;
+  out[o + 10] = u1;
+  out[o + 11] = v0;
+  out[o + 12] = r;
+  out[o + 13] = g;
+  out[o + 14] = b;
+  out[o + 15] = al;
+  out[o + 16] = x2;
+  out[o + 17] = y2;
+  out[o + 18] = u1;
+  out[o + 19] = v1;
+  out[o + 20] = r;
+  out[o + 21] = g;
+  out[o + 22] = b;
+  out[o + 23] = al;
+  out[o + 24] = x3;
+  out[o + 25] = y3;
+  out[o + 26] = u0;
+  out[o + 27] = v1;
+  out[o + 28] = r;
+  out[o + 29] = g;
+  out[o + 30] = b;
+  out[o + 31] = al;
+}
+function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
+  let x1;
+  let y1;
+  let x2;
+  let y2;
+  let x3;
+  let y3;
+  if (rotation === 0) {
+    x1 = x + width;
+    y1 = y;
+    x2 = x + width;
+    y2 = y + height;
+    x3 = x;
+    y3 = y + height;
+  } else {
+    const s = Math.sin(rotation);
+    const c = Math.cos(rotation);
+    const wc = width * c;
+    const ws = width * s;
+    const hc = height * c;
+    const hs = height * s;
+    x1 = x + wc;
+    y1 = y + ws;
+    x2 = x + wc - hs;
+    y2 = y + ws + hc;
+    x3 = x - hs;
+    y3 = y + hc;
+  }
+  out[o] = x;
+  out[o + 1] = y;
+  out[o + 2] = r;
+  out[o + 3] = g;
+  out[o + 4] = b;
+  out[o + 5] = al;
+  out[o + 6] = x1;
+  out[o + 7] = y1;
+  out[o + 8] = r;
+  out[o + 9] = g;
+  out[o + 10] = b;
+  out[o + 11] = al;
+  out[o + 12] = x2;
+  out[o + 13] = y2;
+  out[o + 14] = r;
+  out[o + 15] = g;
+  out[o + 16] = b;
+  out[o + 17] = al;
+  out[o + 18] = x3;
+  out[o + 19] = y3;
+  out[o + 20] = r;
+  out[o + 21] = g;
+  out[o + 22] = b;
+  out[o + 23] = al;
+}
 function grow(data, needed) {
   if (needed <= data.length) return data;
   let cap = data.length;
@@ -1070,6 +1196,22 @@ function createWebGLPointRenderer(canvas) {
   gl.enableVertexAttribArray(cATint);
   gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
+  const quadIndexBuffer = gl.createBuffer();
+  let quadIndexCapacity = 0;
+  const ensureQuadIndices = (quads) => {
+    if (quads <= quadIndexCapacity) return;
+    let cap = quadIndexCapacity || 256;
+    while (cap < quads) cap *= 2;
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quadIndexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, buildQuadIndices(cap), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    quadIndexCapacity = cap;
+  };
+  for (const vao of [rectVAO, spriteVAO, glyphVAO, circleQuadVAO]) {
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quadIndexBuffer);
+    gl.bindVertexArray(null);
+  }
   let texture = null;
   let textureSource = null;
   let msdfTexture = null;
@@ -1077,15 +1219,13 @@ function createWebGLPointRenderer(canvas) {
   let distanceRange = 4;
   let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
   let pointCount = 0;
-  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_RECT * 256);
+  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_QUAD * 256);
   let rectCount = 0;
-  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 256);
+  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 256);
   let spriteCount = 0;
-  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 1024);
+  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
-  let circleQuadData = new Float32Array(
-    FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 64
-  );
+  let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
@@ -1095,7 +1235,7 @@ function createWebGLPointRenderer(canvas) {
   const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
-    const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+    const floats = glyphCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
     gl.useProgram(msdfProgram);
     gl.bindVertexArray(glyphVAO);
     gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
@@ -1105,7 +1245,8 @@ function createWebGLPointRenderer(canvas) {
     gl.uniform1i(gUTex, 0);
     gl.uniform2f(gURes, logicalW, logicalH);
     gl.uniform1f(gURange, distanceRange);
-    gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
+    ensureQuadIndices(glyphCount);
+    gl.drawElements(gl.TRIANGLES, glyphCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
@@ -1148,36 +1289,26 @@ function createWebGLPointRenderer(canvas) {
     },
     addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!texture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
       spriteData = grow(spriteData, (spriteCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const quad = [
-        [corner(0, 0), [u0, v0]],
-        [corner(width, 0), [u1, v0]],
-        [corner(width, height), [u1, v1]],
-        [corner(0, height), [u0, v1]]
-      ];
-      const order = [0, 1, 2, 0, 2, 3];
-      let o = spriteCount * stride;
-      for (const i of order) {
-        const [[vx, vy], [vu, vv]] = quad[i];
-        spriteData[o] = vx;
-        spriteData[o + 1] = vy;
-        spriteData[o + 2] = vu;
-        spriteData[o + 3] = vv;
-        spriteData[o + 4] = r;
-        spriteData[o + 5] = g;
-        spriteData[o + 6] = b;
-        spriteData[o + 7] = al;
-        o += FLOATS_PER_SPRITE_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeQuad(
+        spriteData,
+        spriteCount * stride,
+        x,
+        y,
+        width,
+        height,
+        u0,
+        v0,
+        u1,
+        v1,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       spriteCount++;
     },
     setMSDFTexture(source, range) {
@@ -1202,65 +1333,52 @@ function createWebGLPointRenderer(canvas) {
     },
     addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!msdfTexture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
       glyphData = grow(glyphData, (glyphCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const quad = [
-        [corner(0, 0), [u0, v0]],
-        [corner(width, 0), [u1, v0]],
-        [corner(width, height), [u1, v1]],
-        [corner(0, height), [u0, v1]]
-      ];
-      const order = [0, 1, 2, 0, 2, 3];
-      let o = glyphCount * stride;
-      for (const i of order) {
-        const [[vx, vy], [vu, vv]] = quad[i];
-        glyphData[o] = vx;
-        glyphData[o + 1] = vy;
-        glyphData[o + 2] = vu;
-        glyphData[o + 3] = vv;
-        glyphData[o + 4] = r;
-        glyphData[o + 5] = g;
-        glyphData[o + 6] = b;
-        glyphData[o + 7] = al;
-        o += FLOATS_PER_SPRITE_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeQuad(
+        glyphData,
+        glyphCount * stride,
+        x,
+        y,
+        width,
+        height,
+        u0,
+        v0,
+        u1,
+        v1,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       glyphCount++;
     },
     addCircle(x, y, radius, color, alpha = 1) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
-        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
         circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
-        const [qr, qg, qb, qa] = parseColorToRGBA(color);
-        const al = qa * alpha;
-        const quad = [
-          [x - radius, y - radius, 0, 0],
-          [x + radius, y - radius, 1, 0],
-          [x + radius, y + radius, 1, 1],
-          [x - radius, y + radius, 0, 1]
-        ];
-        const order = [0, 1, 2, 0, 2, 3];
-        let o2 = circleQuadCount * stride;
-        for (const i of order) {
-          const [vx, vy, vu, vv] = quad[i];
-          circleQuadData[o2] = vx;
-          circleQuadData[o2 + 1] = vy;
-          circleQuadData[o2 + 2] = vu;
-          circleQuadData[o2 + 3] = vv;
-          circleQuadData[o2 + 4] = qr;
-          circleQuadData[o2 + 5] = qg;
-          circleQuadData[o2 + 6] = qb;
-          circleQuadData[o2 + 7] = al;
-          o2 += FLOATS_PER_SPRITE_VERT;
-        }
+        const rgba = parseColorToRGBA(color);
+        const d = radius * 2;
+        writeQuad(
+          circleQuadData,
+          circleQuadCount * stride,
+          x - radius,
+          y - radius,
+          d,
+          d,
+          0,
+          0,
+          1,
+          1,
+          rgba[0],
+          rgba[1],
+          rgba[2],
+          rgba[3] * alpha,
+          0
+        );
         circleQuadCount++;
         return;
       }
@@ -1277,42 +1395,34 @@ function createWebGLPointRenderer(canvas) {
       pointCount++;
     },
     addRect(x, y, width, height, color, alpha = 1, rotation = 0) {
-      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_RECT;
+      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_QUAD;
       rectData = grow(rectData, (rectCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const p0 = corner(0, 0);
-      const p1 = corner(width, 0);
-      const p2 = corner(width, height);
-      const p3 = corner(0, height);
-      const verts = [p0, p1, p2, p0, p2, p3];
-      let o = rectCount * stride;
-      for (const [vx, vy] of verts) {
-        rectData[o] = vx;
-        rectData[o + 1] = vy;
-        rectData[o + 2] = r;
-        rectData[o + 3] = g;
-        rectData[o + 4] = b;
-        rectData[o + 5] = al;
-        o += FLOATS_PER_RECT_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeRectQuad(
+        rectData,
+        rectCount * stride,
+        x,
+        y,
+        width,
+        height,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       rectCount++;
     },
     flush() {
       if (rectCount > 0) {
-        const floats = rectCount * VERTS_PER_RECT * FLOATS_PER_RECT_VERT;
+        const floats = rectCount * VERTS_PER_QUAD * FLOATS_PER_RECT_VERT;
         gl.useProgram(rectProgram);
         gl.bindVertexArray(rectVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, rectData.subarray(0, floats), gl.DYNAMIC_DRAW);
         gl.uniform2f(rURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, rectCount * VERTS_PER_RECT);
+        ensureQuadIndices(rectCount);
+        gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       if (pointCount > 0) {
         gl.useProgram(pointProgram);
@@ -1328,16 +1438,17 @@ function createWebGLPointRenderer(canvas) {
         gl.drawArrays(gl.POINTS, 0, pointCount);
       }
       if (circleQuadCount > 0) {
-        const floats = circleQuadCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(circleQuadProgram);
         gl.bindVertexArray(circleQuadVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.subarray(0, floats), gl.DYNAMIC_DRAW);
         gl.uniform2f(cURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, circleQuadCount * VERTS_PER_SPRITE);
+        ensureQuadIndices(circleQuadCount);
+        gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       if (spriteCount > 0 && texture) {
-        const floats = spriteCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(spriteProgram);
         gl.bindVertexArray(spriteVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
@@ -1346,7 +1457,8 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.uniform1i(sUTex, 0);
         gl.uniform2f(sURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, spriteCount * VERTS_PER_SPRITE);
+        ensureQuadIndices(spriteCount);
+        gl.drawElements(gl.TRIANGLES, spriteCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       gl.bindVertexArray(null);
       drawGlyphs();
@@ -1359,6 +1471,7 @@ function createWebGLPointRenderer(canvas) {
       gl.deleteBuffer(spriteBuffer);
       gl.deleteBuffer(glyphBuffer);
       gl.deleteBuffer(circleQuadBuffer);
+      gl.deleteBuffer(quadIndexBuffer);
       gl.deleteVertexArray(pointVAO);
       gl.deleteVertexArray(rectVAO);
       gl.deleteVertexArray(spriteVAO);

package/dist/{chunk-JFU56BX4.mjs → chunk-QS3CUV7H.mjs}

@@ -825,8 +825,6 @@ function fromCanvas(css) {
 function parseColorToRGBA(css) {
   const hit = cache.get(css);
   if (hit) {
-    cache.delete(css);
-    cache.set(css, hit);
     return hit;
   }
   const trimmed = css.trim();
@@ -841,12 +839,26 @@ function parseColorToRGBA(css) {
 // src/renderer/WebGLPointRenderer.ts
 var FLOATS_PER_POINT = 7;
 var POINT_STRIDE = FLOATS_PER_POINT * 4;
+var VERTS_PER_QUAD = 4;
+var INDICES_PER_QUAD = 6;
 var FLOATS_PER_RECT_VERT = 6;
 var RECT_VERT_STRIDE = FLOATS_PER_RECT_VERT * 4;
-var VERTS_PER_RECT = 6;
 var FLOATS_PER_SPRITE_VERT = 8;
 var SPRITE_VERT_STRIDE = FLOATS_PER_SPRITE_VERT * 4;
-var VERTS_PER_SPRITE = 6;
+function buildQuadIndices(quads) {
+  const out = new Uint32Array(quads * INDICES_PER_QUAD);
+  for (let i = 0; i < quads; i++) {
+    const v = i * VERTS_PER_QUAD;
+    const o = i * INDICES_PER_QUAD;
+    out[o] = v;
+    out[o + 1] = v + 1;
+    out[o + 2] = v + 2;
+    out[o + 3] = v;
+    out[o + 4] = v + 2;
+    out[o + 5] = v + 3;
+  }
+  return out;
+}
 var POINT_VERT = `#version 300 es
 in vec2 a_pos;
 in float a_radius;
@@ -974,6 +986,120 @@ function link(gl, vsSrc, fsSrc) {
   }
   return program;
 }
+function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
+  let x1;
+  let y1;
+  let x2;
+  let y2;
+  let x3;
+  let y3;
+  if (rotation === 0) {
+    x1 = x + width;
+    y1 = y;
+    x2 = x + width;
+    y2 = y + height;
+    x3 = x;
+    y3 = y + height;
+  } else {
+    const s = Math.sin(rotation);
+    const c = Math.cos(rotation);
+    const wc = width * c;
+    const ws = width * s;
+    const hc = height * c;
+    const hs = height * s;
+    x1 = x + wc;
+    y1 = y + ws;
+    x2 = x + wc - hs;
+    y2 = y + ws + hc;
+    x3 = x - hs;
+    y3 = y + hc;
+  }
+  out[o] = x;
+  out[o + 1] = y;
+  out[o + 2] = u0;
+  out[o + 3] = v0;
+  out[o + 4] = r;
+  out[o + 5] = g;
+  out[o + 6] = b;
+  out[o + 7] = al;
+  out[o + 8] = x1;
+  out[o + 9] = y1;
+  out[o + 10] = u1;
+  out[o + 11] = v0;
+  out[o + 12] = r;
+  out[o + 13] = g;
+  out[o + 14] = b;
+  out[o + 15] = al;
+  out[o + 16] = x2;
+  out[o + 17] = y2;
+  out[o + 18] = u1;
+  out[o + 19] = v1;
+  out[o + 20] = r;
+  out[o + 21] = g;
+  out[o + 22] = b;
+  out[o + 23] = al;
+  out[o + 24] = x3;
+  out[o + 25] = y3;
+  out[o + 26] = u0;
+  out[o + 27] = v1;
+  out[o + 28] = r;
+  out[o + 29] = g;
+  out[o + 30] = b;
+  out[o + 31] = al;
+}
+function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
+  let x1;
+  let y1;
+  let x2;
+  let y2;
+  let x3;
+  let y3;
+  if (rotation === 0) {
+    x1 = x + width;
+    y1 = y;
+    x2 = x + width;
+    y2 = y + height;
+    x3 = x;
+    y3 = y + height;
+  } else {
+    const s = Math.sin(rotation);
+    const c = Math.cos(rotation);
+    const wc = width * c;
+    const ws = width * s;
+    const hc = height * c;
+    const hs = height * s;
+    x1 = x + wc;
+    y1 = y + ws;
+    x2 = x + wc - hs;
+    y2 = y + ws + hc;
+    x3 = x - hs;
+    y3 = y + hc;
+  }
+  out[o] = x;
+  out[o + 1] = y;
+  out[o + 2] = r;
+  out[o + 3] = g;
+  out[o + 4] = b;
+  out[o + 5] = al;
+  out[o + 6] = x1;
+  out[o + 7] = y1;
+  out[o + 8] = r;
+  out[o + 9] = g;
+  out[o + 10] = b;
+  out[o + 11] = al;
+  out[o + 12] = x2;
+  out[o + 13] = y2;
+  out[o + 14] = r;
+  out[o + 15] = g;
+  out[o + 16] = b;
+  out[o + 17] = al;
+  out[o + 18] = x3;
+  out[o + 19] = y3;
+  out[o + 20] = r;
+  out[o + 21] = g;
+  out[o + 22] = b;
+  out[o + 23] = al;
+}
 function grow(data, needed) {
   if (needed <= data.length) return data;
   let cap = data.length;
@@ -1068,6 +1194,22 @@ function createWebGLPointRenderer(canvas) {
   gl.enableVertexAttribArray(cATint);
   gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
+  const quadIndexBuffer = gl.createBuffer();
+  let quadIndexCapacity = 0;
+  const ensureQuadIndices = (quads) => {
+    if (quads <= quadIndexCapacity) return;
+    let cap = quadIndexCapacity || 256;
+    while (cap < quads) cap *= 2;
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quadIndexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, buildQuadIndices(cap), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    quadIndexCapacity = cap;
+  };
+  for (const vao of [rectVAO, spriteVAO, glyphVAO, circleQuadVAO]) {
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quadIndexBuffer);
+    gl.bindVertexArray(null);
+  }
   let texture = null;
   let textureSource = null;
   let msdfTexture = null;
@@ -1075,15 +1217,13 @@ function createWebGLPointRenderer(canvas) {
   let distanceRange = 4;
   let pointData = new Float32Array(FLOATS_PER_POINT * 1024);
   let pointCount = 0;
-  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_RECT * 256);
+  let rectData = new Float32Array(FLOATS_PER_RECT_VERT * VERTS_PER_QUAD * 256);
   let rectCount = 0;
-  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 256);
+  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 256);
   let spriteCount = 0;
-  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 1024);
+  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
-  let circleQuadData = new Float32Array(
-    FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 64
-  );
+  let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
@@ -1093,7 +1233,7 @@ function createWebGLPointRenderer(canvas) {
   const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
-    const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+    const floats = glyphCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
     gl.useProgram(msdfProgram);
     gl.bindVertexArray(glyphVAO);
     gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
@@ -1103,7 +1243,8 @@ function createWebGLPointRenderer(canvas) {
     gl.uniform1i(gUTex, 0);
     gl.uniform2f(gURes, logicalW, logicalH);
     gl.uniform1f(gURange, distanceRange);
-    gl.drawArrays(gl.TRIANGLES, 0, glyphCount * VERTS_PER_SPRITE);
+    ensureQuadIndices(glyphCount);
+    gl.drawElements(gl.TRIANGLES, glyphCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
     gl.bindVertexArray(null);
     glyphCount = 0;
   };
@@ -1146,36 +1287,26 @@ function createWebGLPointRenderer(canvas) {
     },
     addSprite(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!texture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
       spriteData = grow(spriteData, (spriteCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const quad = [
-        [corner(0, 0), [u0, v0]],
-        [corner(width, 0), [u1, v0]],
-        [corner(width, height), [u1, v1]],
-        [corner(0, height), [u0, v1]]
-      ];
-      const order = [0, 1, 2, 0, 2, 3];
-      let o = spriteCount * stride;
-      for (const i of order) {
-        const [[vx, vy], [vu, vv]] = quad[i];
-        spriteData[o] = vx;
-        spriteData[o + 1] = vy;
-        spriteData[o + 2] = vu;
-        spriteData[o + 3] = vv;
-        spriteData[o + 4] = r;
-        spriteData[o + 5] = g;
-        spriteData[o + 6] = b;
-        spriteData[o + 7] = al;
-        o += FLOATS_PER_SPRITE_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeQuad(
+        spriteData,
+        spriteCount * stride,
+        x,
+        y,
+        width,
+        height,
+        u0,
+        v0,
+        u1,
+        v1,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       spriteCount++;
     },
     setMSDFTexture(source, range) {
@@ -1200,65 +1331,52 @@ function createWebGLPointRenderer(canvas) {
     },
     addGlyph(x, y, width, height, u0, v0, u1, v1, color = "#ffffff", alpha = 1, rotation = 0) {
       if (!msdfTexture) return;
-      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+      const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
       glyphData = grow(glyphData, (glyphCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const quad = [
-        [corner(0, 0), [u0, v0]],
-        [corner(width, 0), [u1, v0]],
-        [corner(width, height), [u1, v1]],
-        [corner(0, height), [u0, v1]]
-      ];
-      const order = [0, 1, 2, 0, 2, 3];
-      let o = glyphCount * stride;
-      for (const i of order) {
-        const [[vx, vy], [vu, vv]] = quad[i];
-        glyphData[o] = vx;
-        glyphData[o + 1] = vy;
-        glyphData[o + 2] = vu;
-        glyphData[o + 3] = vv;
-        glyphData[o + 4] = r;
-        glyphData[o + 5] = g;
-        glyphData[o + 6] = b;
-        glyphData[o + 7] = al;
-        o += FLOATS_PER_SPRITE_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeQuad(
+        glyphData,
+        glyphCount * stride,
+        x,
+        y,
+        width,
+        height,
+        u0,
+        v0,
+        u1,
+        v1,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       glyphCount++;
     },
     addCircle(x, y, radius, color, alpha = 1) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
-        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
         circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
-        const [qr, qg, qb, qa] = parseColorToRGBA(color);
-        const al = qa * alpha;
-        const quad = [
-          [x - radius, y - radius, 0, 0],
-          [x + radius, y - radius, 1, 0],
-          [x + radius, y + radius, 1, 1],
-          [x - radius, y + radius, 0, 1]
-        ];
-        const order = [0, 1, 2, 0, 2, 3];
-        let o2 = circleQuadCount * stride;
-        for (const i of order) {
-          const [vx, vy, vu, vv] = quad[i];
-          circleQuadData[o2] = vx;
-          circleQuadData[o2 + 1] = vy;
-          circleQuadData[o2 + 2] = vu;
-          circleQuadData[o2 + 3] = vv;
-          circleQuadData[o2 + 4] = qr;
-          circleQuadData[o2 + 5] = qg;
-          circleQuadData[o2 + 6] = qb;
-          circleQuadData[o2 + 7] = al;
-          o2 += FLOATS_PER_SPRITE_VERT;
-        }
+        const rgba = parseColorToRGBA(color);
+        const d = radius * 2;
+        writeQuad(
+          circleQuadData,
+          circleQuadCount * stride,
+          x - radius,
+          y - radius,
+          d,
+          d,
+          0,
+          0,
+          1,
+          1,
+          rgba[0],
+          rgba[1],
+          rgba[2],
+          rgba[3] * alpha,
+          0
+        );
         circleQuadCount++;
         return;
       }
@@ -1275,42 +1393,34 @@ function createWebGLPointRenderer(canvas) {
       pointCount++;
     },
     addRect(x, y, width, height, color, alpha = 1, rotation = 0) {
-      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_RECT;
+      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_QUAD;
       rectData = grow(rectData, (rectCount + 1) * stride);
-      const [r, g, b, a] = parseColorToRGBA(color);
-      const al = a * alpha;
-      const s = Math.sin(rotation);
-      const c = Math.cos(rotation);
-      const corner = (lx, ly) => [
-        x + lx * c - ly * s,
-        y + lx * s + ly * c
-      ];
-      const p0 = corner(0, 0);
-      const p1 = corner(width, 0);
-      const p2 = corner(width, height);
-      const p3 = corner(0, height);
-      const verts = [p0, p1, p2, p0, p2, p3];
-      let o = rectCount * stride;
-      for (const [vx, vy] of verts) {
-        rectData[o] = vx;
-        rectData[o + 1] = vy;
-        rectData[o + 2] = r;
-        rectData[o + 3] = g;
-        rectData[o + 4] = b;
-        rectData[o + 5] = al;
-        o += FLOATS_PER_RECT_VERT;
-      }
+      const rgba = parseColorToRGBA(color);
+      writeRectQuad(
+        rectData,
+        rectCount * stride,
+        x,
+        y,
+        width,
+        height,
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3] * alpha,
+        rotation
+      );
       rectCount++;
     },
     flush() {
       if (rectCount > 0) {
-        const floats = rectCount * VERTS_PER_RECT * FLOATS_PER_RECT_VERT;
+        const floats = rectCount * VERTS_PER_QUAD * FLOATS_PER_RECT_VERT;
         gl.useProgram(rectProgram);
         gl.bindVertexArray(rectVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, rectData.subarray(0, floats), gl.DYNAMIC_DRAW);
         gl.uniform2f(rURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, rectCount * VERTS_PER_RECT);
+        ensureQuadIndices(rectCount);
+        gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       if (pointCount > 0) {
         gl.useProgram(pointProgram);
@@ -1326,16 +1436,17 @@ function createWebGLPointRenderer(canvas) {
         gl.drawArrays(gl.POINTS, 0, pointCount);
       }
       if (circleQuadCount > 0) {
-        const floats = circleQuadCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(circleQuadProgram);
         gl.bindVertexArray(circleQuadVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.subarray(0, floats), gl.DYNAMIC_DRAW);
         gl.uniform2f(cURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, circleQuadCount * VERTS_PER_SPRITE);
+        ensureQuadIndices(circleQuadCount);
+        gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       if (spriteCount > 0 && texture) {
-        const floats = spriteCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(spriteProgram);
         gl.bindVertexArray(spriteVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
@@ -1344,7 +1455,8 @@ function createWebGLPointRenderer(canvas) {
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.uniform1i(sUTex, 0);
         gl.uniform2f(sURes, logicalW, logicalH);
-        gl.drawArrays(gl.TRIANGLES, 0, spriteCount * VERTS_PER_SPRITE);
+        ensureQuadIndices(spriteCount);
+        gl.drawElements(gl.TRIANGLES, spriteCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
       }
       gl.bindVertexArray(null);
       drawGlyphs();
@@ -1357,6 +1469,7 @@ function createWebGLPointRenderer(canvas) {
       gl.deleteBuffer(spriteBuffer);
       gl.deleteBuffer(glyphBuffer);
       gl.deleteBuffer(circleQuadBuffer);
+      gl.deleteBuffer(quadIndexBuffer);
       gl.deleteVertexArray(pointVAO);
       gl.deleteVertexArray(rectVAO);
       gl.deleteVertexArray(spriteVAO);

package/dist/index.js

@@ -8,7 +8,7 @@
 
 
 
-var _chunkIYPLG4Z4js = require('./chunk-IYPLG4Z4.js');
+var _chunkL4SWVP2Hjs = require('./chunk-L4SWVP2H.js');
 
 
 
@@ -2162,17 +2162,17 @@ var Scene = (_class6 = class _Scene {
     this._devFrameCount++;
     if (this._devFrameCount % 120 !== 0) return;
     if (this.a11yElements) {
-      let interactiveCount = 0;
+      let projectableCount = 0;
       const walk = (node) => {
-        if (node.interactive && node.width > 0) interactiveCount++;
+        if (this.shouldProjectA11y(node)) projectableCount++;
         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) {
+      if (shadowCount > projectableCount) {
         this._devWarn(
-          `a11yElements (${shadowCount}) exceeds interactive entities (${interactiveCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
+          `a11yElements (${shadowCount}) exceeds projectable entities (${projectableCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
         );
       }
     }
@@ -2247,7 +2247,7 @@ var Scene = (_class6 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkIYPLG4Z4js.CanvasRenderer)(
+      this.renderer = new (0, _chunkL4SWVP2Hjs.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
@@ -2643,7 +2643,19 @@ var Scene = (_class6 = class _Scene {
    * without removing it from the scene graph. Components that manage dynamic
    * interactive *child* entities (e.g. a {@link Entity}'s per-link hotspots) call
    * this before discarding those children so their shadow `<a>`/controls don't
-   * leak (the per-frame `syncA11y` only creates/updates, it never prunes).
+   * leak.
+   *
+   * `syncA11y` itself only creates and updates, never prunes — but it is always
+   * followed by `enforceA11yDomOrder`, whose prune pass removes any element
+   * whose entity is no longer reachable in the tree or no longer satisfies
+   * {@link shouldProjectA11y}. So an entity that is `remove()`d, or whose
+   * `interactive` flips to `false`, has its element torn down on the next synced
+   * frame without any explicit call.
+   *
+   * This method is for the case that pass cannot see: a child dropped from a
+   * component's own bookkeeping while still parented, or one discarded before
+   * the next sync runs. Calling it is always safe and is the right habit for
+   * pooled children.
    *
    * @param entity - The subtree whose shadow nodes should be removed.
    */
@@ -2932,12 +2944,34 @@ var Scene = (_class6 = class _Scene {
     }
     if (element.getAttribute(name) !== value) element.setAttribute(name, value);
   }
+  /**
+   * Whether `node` should have an a11y shadow element projected for it.
+   *
+   * The single authority for that decision. It was previously inlined verbatim
+   * at four call sites — `syncA11y` (create/update), `enforceA11yDomOrder`
+   * (which ids survive pruning), `getA11yTree` (the public snapshot) and
+   * `render` (z-index / reading-order assignment). Four copies of one predicate
+   * is a standing correctness hazard: if any of them drifts, elements either
+   * leak (created but never marked active, so pruned every frame and rebuilt) or
+   * go missing from the semantic tree while still present in the DOM.
+   *
+   * A box is required because a zero-size element is unfocusable and
+   * unhittable; `a11yFullViewport` is the deliberate exception, since those
+   * nodes are boundless interaction surfaces mounted behind everything else.
+   *
+   * Keep this the only place the rule is written. A planned per-entity
+   * `a11yProjection` mode ('eager' | 'onDemand' | 'never') extends exactly this
+   * predicate, which is only tractable while it has one home.
+   */
+  shouldProjectA11y(node) {
+    return node.interactive && (node.width > 0 || node.a11yFullViewport);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
       return;
     }
-    if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+    if (this.shouldProjectA11y(node)) {
       let el = this.a11yElements.get(node.id);
       const attrs = node.getA11yAttributes();
       const expectedTag = attrs.tag || "div";
@@ -3136,7 +3170,7 @@ var Scene = (_class6 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkIYPLG4Z4js.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkL4SWVP2Hjs.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -3713,7 +3747,7 @@ var Scene = (_class6 = class _Scene {
         if (node.a11yFullViewport) this.fullViewportElements.push(contentEl);
         else this.normalElements.push(contentEl);
       }
-      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+      if (this.shouldProjectA11y(node)) {
         const el = this.a11yElements.get(node.id);
         if (el) {
           this.activeIds.add(node.id);
@@ -3852,7 +3886,7 @@ var Scene = (_class6 = class _Scene {
     const traverse = (node, parentNode) => {
       if (node.isDOMPortal) return;
       let currentA11yNode = null;
-      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+      if (this.shouldProjectA11y(node)) {
         const el = this.a11yElements.get(node.id);
         if (el) {
           const attrs = node.getA11yAttributes();
@@ -4222,7 +4256,7 @@ var Scene = (_class6 = 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;
-      const willProjectA11y = isMainRenderer && node.interactive && (node.width > 0 || node.a11yFullViewport);
+      const willProjectA11y = isMainRenderer && this.shouldProjectA11y(node);
       if (a11yEl || willProjectA11y) {
         const renderOrder = this.renderOrderCounter++;
         if (willProjectA11y) this.a11yRenderOrders.set(node.id, renderOrder);
@@ -4344,7 +4378,7 @@ var Scene = (_class6 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkIYPLG4Z4js.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkL4SWVP2Hjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -5370,8 +5404,8 @@ var DOMPortalEntity = (_class10 = class extends _chunkDUYB4GX4js.Entity {
 }, _class10);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkIYPLG4Z4js.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkIYPLG4Z4js.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkL4SWVP2Hjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkL4SWVP2Hjs.WebGPUParticleSystemManager);
 
 
 
@@ -5406,4 +5440,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkIYPLG4Z4js.WebGPUParticleSystemM
 
 
 
-exports.CanvasRenderer = _chunkIYPLG4Z4js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkDUYB4GX4js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkDUYB4GX4js.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 = _chunkDUYB4GX4js.SVGEntity; exports.SVGRenderer = _chunkIYPLG4Z4js.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkIYPLG4Z4js.TextRasterCache; exports.VectoJSEvent = _chunkDUYB4GX4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkIYPLG4Z4js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkIYPLG4Z4js.createWebGLPointRenderer; exports.isSafeUrl = _chunkIYPLG4Z4js.isSafeUrl; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkIYPLG4Z4js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkIYPLG4Z4js.sanitizeUrl;
+exports.CanvasRenderer = _chunkL4SWVP2Hjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkDUYB4GX4js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkDUYB4GX4js.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 = _chunkDUYB4GX4js.SVGEntity; exports.SVGRenderer = _chunkL4SWVP2Hjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkL4SWVP2Hjs.TextRasterCache; exports.VectoJSEvent = _chunkDUYB4GX4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkL4SWVP2Hjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkL4SWVP2Hjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkL4SWVP2Hjs.isSafeUrl; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkL4SWVP2Hjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkL4SWVP2Hjs.sanitizeUrl;

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-JFU56BX4.mjs";
+} from "./chunk-QS3CUV7H.mjs";
 import {
   Entity,
   MSDFTextEntity,
@@ -2161,17 +2161,17 @@ var Scene = class _Scene {
     this._devFrameCount++;
     if (this._devFrameCount % 120 !== 0) return;
     if (this.a11yElements) {
-      let interactiveCount = 0;
+      let projectableCount = 0;
       const walk = (node) => {
-        if (node.interactive && node.width > 0) interactiveCount++;
+        if (this.shouldProjectA11y(node)) projectableCount++;
         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) {
+      if (shadowCount > projectableCount) {
         this._devWarn(
-          `a11yElements (${shadowCount}) exceeds interactive entities (${interactiveCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
+          `a11yElements (${shadowCount}) exceeds projectable entities (${projectableCount}). Call scene.detachA11y(entity) before removing interactive children from the tree, or their shadow nodes leak.`
         );
       }
     }
@@ -2642,7 +2642,19 @@ var Scene = class _Scene {
    * without removing it from the scene graph. Components that manage dynamic
    * interactive *child* entities (e.g. a {@link Entity}'s per-link hotspots) call
    * this before discarding those children so their shadow `<a>`/controls don't
-   * leak (the per-frame `syncA11y` only creates/updates, it never prunes).
+   * leak.
+   *
+   * `syncA11y` itself only creates and updates, never prunes — but it is always
+   * followed by `enforceA11yDomOrder`, whose prune pass removes any element
+   * whose entity is no longer reachable in the tree or no longer satisfies
+   * {@link shouldProjectA11y}. So an entity that is `remove()`d, or whose
+   * `interactive` flips to `false`, has its element torn down on the next synced
+   * frame without any explicit call.
+   *
+   * This method is for the case that pass cannot see: a child dropped from a
+   * component's own bookkeeping while still parented, or one discarded before
+   * the next sync runs. Calling it is always safe and is the right habit for
+   * pooled children.
    *
    * @param entity - The subtree whose shadow nodes should be removed.
    */
@@ -2931,12 +2943,34 @@ var Scene = class _Scene {
     }
     if (element.getAttribute(name) !== value) element.setAttribute(name, value);
   }
+  /**
+   * Whether `node` should have an a11y shadow element projected for it.
+   *
+   * The single authority for that decision. It was previously inlined verbatim
+   * at four call sites — `syncA11y` (create/update), `enforceA11yDomOrder`
+   * (which ids survive pruning), `getA11yTree` (the public snapshot) and
+   * `render` (z-index / reading-order assignment). Four copies of one predicate
+   * is a standing correctness hazard: if any of them drifts, elements either
+   * leak (created but never marked active, so pruned every frame and rebuilt) or
+   * go missing from the semantic tree while still present in the DOM.
+   *
+   * A box is required because a zero-size element is unfocusable and
+   * unhittable; `a11yFullViewport` is the deliberate exception, since those
+   * nodes are boundless interaction surfaces mounted behind everything else.
+   *
+   * Keep this the only place the rule is written. A planned per-entity
+   * `a11yProjection` mode ('eager' | 'onDemand' | 'never') extends exactly this
+   * predicate, which is only tractable while it has one home.
+   */
+  shouldProjectA11y(node) {
+    return node.interactive && (node.width > 0 || node.a11yFullViewport);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
       return;
     }
-    if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+    if (this.shouldProjectA11y(node)) {
       let el = this.a11yElements.get(node.id);
       const attrs = node.getA11yAttributes();
       const expectedTag = attrs.tag || "div";
@@ -3712,7 +3746,7 @@ var Scene = class _Scene {
         if (node.a11yFullViewport) this.fullViewportElements.push(contentEl);
         else this.normalElements.push(contentEl);
       }
-      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+      if (this.shouldProjectA11y(node)) {
         const el = this.a11yElements.get(node.id);
         if (el) {
           this.activeIds.add(node.id);
@@ -3851,7 +3885,7 @@ var Scene = class _Scene {
     const traverse = (node, parentNode) => {
       if (node.isDOMPortal) return;
       let currentA11yNode = null;
-      if (node.interactive && (node.width > 0 || node.a11yFullViewport)) {
+      if (this.shouldProjectA11y(node)) {
         const el = this.a11yElements.get(node.id);
         if (el) {
           const attrs = node.getA11yAttributes();
@@ -4221,7 +4255,7 @@ 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;
-      const willProjectA11y = isMainRenderer && node.interactive && (node.width > 0 || node.a11yFullViewport);
+      const willProjectA11y = isMainRenderer && this.shouldProjectA11y(node);
       if (a11yEl || willProjectA11y) {
         const renderOrder = this.renderOrderCounter++;
         if (willProjectA11y) this.a11yRenderOrders.set(node.id, renderOrder);

package/dist/renderer.js

@@ -6,7 +6,7 @@
 
 
 
-var _chunkIYPLG4Z4js = require('./chunk-IYPLG4Z4.js');
+var _chunkL4SWVP2Hjs = require('./chunk-L4SWVP2H.js');
 
 
 
@@ -14,4 +14,4 @@ var _chunkIYPLG4Z4js = require('./chunk-IYPLG4Z4.js');
 
 
 
-exports.CanvasRenderer = _chunkIYPLG4Z4js.CanvasRenderer; exports.SVGRenderer = _chunkIYPLG4Z4js.SVGRenderer; exports.TextRasterCache = _chunkIYPLG4Z4js.TextRasterCache; exports.WebGPUParticleSystemManager = _chunkIYPLG4Z4js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkIYPLG4Z4js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkIYPLG4Z4js.parseColorToRGBA;
+exports.CanvasRenderer = _chunkL4SWVP2Hjs.CanvasRenderer; exports.SVGRenderer = _chunkL4SWVP2Hjs.SVGRenderer; exports.TextRasterCache = _chunkL4SWVP2Hjs.TextRasterCache; exports.WebGPUParticleSystemManager = _chunkL4SWVP2Hjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkL4SWVP2Hjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkL4SWVP2Hjs.parseColorToRGBA;

package/dist/renderer.mjs

@@ -5,7 +5,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-JFU56BX4.mjs";
+} from "./chunk-QS3CUV7H.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,

package/dist/tree/Scene.d.ts

@@ -673,7 +673,19 @@ export declare class Scene {
      * without removing it from the scene graph. Components that manage dynamic
      * interactive *child* entities (e.g. a {@link Entity}'s per-link hotspots) call
      * this before discarding those children so their shadow `<a>`/controls don't
-     * leak (the per-frame `syncA11y` only creates/updates, it never prunes).
+     * leak.
+     *
+     * `syncA11y` itself only creates and updates, never prunes — but it is always
+     * followed by `enforceA11yDomOrder`, whose prune pass removes any element
+     * whose entity is no longer reachable in the tree or no longer satisfies
+     * {@link shouldProjectA11y}. So an entity that is `remove()`d, or whose
+     * `interactive` flips to `false`, has its element torn down on the next synced
+     * frame without any explicit call.
+     *
+     * This method is for the case that pass cannot see: a child dropped from a
+     * component's own bookkeeping while still parented, or one discarded before
+     * the next sync runs. Calling it is always safe and is the right habit for
+     * pooled children.
      *
      * @param entity - The subtree whose shadow nodes should be removed.
      */
@@ -756,6 +768,26 @@ export declare class Scene {
     /** True when any node in the subtree has a pending animation. */
     /** True when any node in the subtree is interactive (drives a11y sync). */
     private syncOptionalAttribute;
+    /**
+     * Whether `node` should have an a11y shadow element projected for it.
+     *
+     * The single authority for that decision. It was previously inlined verbatim
+     * at four call sites — `syncA11y` (create/update), `enforceA11yDomOrder`
+     * (which ids survive pruning), `getA11yTree` (the public snapshot) and
+     * `render` (z-index / reading-order assignment). Four copies of one predicate
+     * is a standing correctness hazard: if any of them drifts, elements either
+     * leak (created but never marked active, so pruned every frame and rebuilt) or
+     * go missing from the semantic tree while still present in the DOM.
+     *
+     * A box is required because a zero-size element is unfocusable and
+     * unhittable; `a11yFullViewport` is the deliberate exception, since those
+     * nodes are boundless interaction surfaces mounted behind everything else.
+     *
+     * Keep this the only place the rule is written. A planned per-entity
+     * `a11yProjection` mode ('eager' | 'onDemand' | 'never') extends exactly this
+     * predicate, which is only tractable while it has one home.
+     */
+    private shouldProjectA11y;
     private syncA11y;
     /**
      * Mirror one entity's static text ({@link Entity.getContentProjection}) as a

package/package.json

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