@vectojs/core 1.23.0 → 1.25.0

package/dist/{chunk-LHONR3GO.js → chunk-KHGHP2J3.js}

@@ -924,10 +924,11 @@ 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 FLOATS_PER_SPRITE_VERT = 8;
-var SPRITE_VERT_STRIDE = FLOATS_PER_SPRITE_VERT * 4;
+var PACKED_QUAD_VERT_STRIDE = 16;
+var PACKED_RECT_VERT_STRIDE = 12;
+var PACKED_UV_OFFSET = 8;
+var PACKED_TINT_OFFSET = 12;
+var PACKED_RECT_TINT_OFFSET = 8;
 function buildQuadIndices(quads) {
   const out = new Uint32Array(quads * INDICES_PER_QUAD);
   for (let i = 0; i < quads; i++) {
@@ -942,6 +943,35 @@ function buildQuadIndices(quads) {
   }
   return out;
 }
+function encodeUnorm(v, max) {
+  return v <= 0 ? 0 : v >= 1 ? max : v * max + 0.5 | 0;
+}
+var LITTLE_ENDIAN = new Uint8Array(new Uint32Array([1]).buffer)[0] === 1;
+function packTint(r, g, b, a) {
+  const ri = encodeUnorm(r, 255);
+  const gi = encodeUnorm(g, 255);
+  const bi = encodeUnorm(b, 255);
+  const ai = encodeUnorm(a, 255);
+  return LITTLE_ENDIAN ? ai << 24 | bi << 16 | gi << 8 | ri : ri << 24 | gi << 16 | bi << 8 | ai;
+}
+function createPackedBuffer(byteLength) {
+  const bytes = new ArrayBuffer(byteLength);
+  return {
+    bytes,
+    f32: new Float32Array(bytes),
+    u16: new Uint16Array(bytes),
+    u32: new Uint32Array(bytes),
+    u8: new Uint8Array(bytes)
+  };
+}
+function growPacked(buf, neededBytes) {
+  if (neededBytes <= buf.bytes.byteLength) return buf;
+  let cap = buf.bytes.byteLength;
+  while (cap < neededBytes) cap *= 2;
+  const grown = createPackedBuffer(cap);
+  grown.u8.set(buf.u8);
+  return grown;
+}
 var POINT_VERT = `#version 300 es
 in vec2 a_pos;
 in float a_radius;
@@ -1069,7 +1099,7 @@ function link(gl, vsSrc, fsSrc) {
   }
   return program;
 }
-function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
+function writeQuad(out, byteOffset, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rotation) {
   let x1;
   let y1;
   let x2;
@@ -1097,40 +1127,39 @@ function writeQuad(out, o, x, y, width, height, u0, v0, u1, v1, r, g, b, al, rot
     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;
+  const iu0 = encodeUnorm(u0, 65535);
+  const iv0 = encodeUnorm(v0, 65535);
+  const iu1 = encodeUnorm(u1, 65535);
+  const iv1 = encodeUnorm(v1, 65535);
+  const tint = packTint(r, g, b, al);
+  const f32 = out.f32;
+  const u16 = out.u16;
+  const u32 = out.u32;
+  const fi = byteOffset >> 2;
+  const si = byteOffset + PACKED_UV_OFFSET >> 1;
+  const ti = byteOffset + PACKED_TINT_OFFSET >> 2;
+  f32[fi] = x;
+  f32[fi + 1] = y;
+  u16[si] = iu0;
+  u16[si + 1] = iv0;
+  u32[ti] = tint;
+  f32[fi + 4] = x1;
+  f32[fi + 5] = y1;
+  u16[si + 8] = iu1;
+  u16[si + 9] = iv0;
+  u32[ti + 4] = tint;
+  f32[fi + 8] = x2;
+  f32[fi + 9] = y2;
+  u16[si + 16] = iu1;
+  u16[si + 17] = iv1;
+  u32[ti + 8] = tint;
+  f32[fi + 12] = x3;
+  f32[fi + 13] = y3;
+  u16[si + 24] = iu0;
+  u16[si + 25] = iv1;
+  u32[ti + 12] = tint;
 }
-function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
+function writeRectQuad(out, byteOffset, x, y, width, height, r, g, b, al, rotation) {
   let x1;
   let y1;
   let x2;
@@ -1158,30 +1187,22 @@ function writeRectQuad(out, o, x, y, width, height, r, g, b, al, rotation) {
     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;
+  const tint = packTint(r, g, b, al);
+  const f32 = out.f32;
+  const u32 = out.u32;
+  const fi = byteOffset >> 2;
+  f32[fi] = x;
+  f32[fi + 1] = y;
+  u32[fi + 2] = tint;
+  f32[fi + 3] = x1;
+  f32[fi + 4] = y1;
+  u32[fi + 5] = tint;
+  f32[fi + 6] = x2;
+  f32[fi + 7] = y2;
+  u32[fi + 8] = tint;
+  f32[fi + 9] = x3;
+  f32[fi + 10] = y3;
+  u32[fi + 11] = tint;
 }
 function grow(data, needed) {
   if (needed <= data.length) return data;
@@ -1191,6 +1212,16 @@ function grow(data, needed) {
   grown.set(data);
   return grown;
 }
+function isSourceReady(source) {
+  const candidate = source;
+  if (typeof candidate.complete === "boolean") {
+    if (!candidate.complete) return false;
+    if (typeof candidate.naturalWidth === "number" && candidate.naturalWidth === 0) return false;
+    return true;
+  }
+  if (typeof candidate.readyState === "number") return candidate.readyState >= 2;
+  return true;
+}
 function createWebGLPointRenderer(canvas) {
   const gl = canvas.getContext("webgl2", {
     premultipliedAlpha: false
@@ -1228,9 +1259,16 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(rectVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
   gl.enableVertexAttribArray(rAPos);
-  gl.vertexAttribPointer(rAPos, 2, gl.FLOAT, false, RECT_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(rAPos, 2, gl.FLOAT, false, PACKED_RECT_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(rAColor);
-  gl.vertexAttribPointer(rAColor, 4, gl.FLOAT, false, RECT_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    rAColor,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_RECT_VERT_STRIDE,
+    PACKED_RECT_TINT_OFFSET
+  );
   const sAPos = gl.getAttribLocation(spriteProgram, "a_pos");
   const sAUv = gl.getAttribLocation(spriteProgram, "a_uv");
   const sATint = gl.getAttribLocation(spriteProgram, "a_tint");
@@ -1241,11 +1279,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(spriteVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
   gl.enableVertexAttribArray(sAPos);
-  gl.vertexAttribPointer(sAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(sAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(sAUv);
-  gl.vertexAttribPointer(sAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    sAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(sATint);
-  gl.vertexAttribPointer(sATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    sATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   const gAPos = gl.getAttribLocation(msdfProgram, "a_pos");
   const gAUv = gl.getAttribLocation(msdfProgram, "a_uv");
   const gATint = gl.getAttribLocation(msdfProgram, "a_tint");
@@ -1257,11 +1309,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(glyphVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
   gl.enableVertexAttribArray(gAPos);
-  gl.vertexAttribPointer(gAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(gAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(gAUv);
-  gl.vertexAttribPointer(gAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    gAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(gATint);
-  gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    gATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   const cAPos = gl.getAttribLocation(circleQuadProgram, "a_pos");
   const cAUv = gl.getAttribLocation(circleQuadProgram, "a_uv");
   const cATint = gl.getAttribLocation(circleQuadProgram, "a_tint");
@@ -1271,11 +1337,25 @@ function createWebGLPointRenderer(canvas) {
   gl.bindVertexArray(circleQuadVAO);
   gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
   gl.enableVertexAttribArray(cAPos);
-  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, PACKED_QUAD_VERT_STRIDE, 0);
   gl.enableVertexAttribArray(cAUv);
-  gl.vertexAttribPointer(cAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.vertexAttribPointer(
+    cAUv,
+    2,
+    gl.UNSIGNED_SHORT,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_UV_OFFSET
+  );
   gl.enableVertexAttribArray(cATint);
-  gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  gl.vertexAttribPointer(
+    cATint,
+    4,
+    gl.UNSIGNED_BYTE,
+    true,
+    PACKED_QUAD_VERT_STRIDE,
+    PACKED_TINT_OFFSET
+  );
   gl.bindVertexArray(null);
   const quadIndexBuffer = gl.createBuffer();
   let quadIndexCapacity = 0;
@@ -1285,7 +1365,6 @@ function createWebGLPointRenderer(canvas) {
     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]) {
@@ -1300,11 +1379,11 @@ 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_QUAD * 256);
+  let rectData = createPackedBuffer(PACKED_RECT_VERT_STRIDE * VERTS_PER_QUAD * 256);
   let rectCount = 0;
-  let spriteData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 256);
+  let spriteData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 256);
   let spriteCount = 0;
-  let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 1024);
+  let glyphData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 1024);
   let glyphCount = 0;
   let frameDrawCalls = 0;
   let lastFrameDrawCalls = 0;
@@ -1312,7 +1391,7 @@ function createWebGLPointRenderer(canvas) {
   let atlasSwitches = 0;
   let circleQuadFallbacks = 0;
   let circlePoints = 0;
-  let circleQuadData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD * 64);
+  let circleQuadData = createPackedBuffer(PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD * 64);
   let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
@@ -1322,11 +1401,11 @@ function createWebGLPointRenderer(canvas) {
   const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
-    const floats = glyphCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+    const bytes = glyphCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
     gl.useProgram(msdfProgram);
     gl.bindVertexArray(glyphVAO);
     gl.bindBuffer(gl.ARRAY_BUFFER, glyphBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, glyphData.subarray(0, floats), gl.DYNAMIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, glyphData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, msdfTexture);
     gl.uniform1i(gUTex, 0);
@@ -1378,6 +1457,7 @@ function createWebGLPointRenderer(canvas) {
     },
     setTexture(source) {
       if (source === textureSource && texture) return;
+      if (!isSourceReady(source)) return;
       if (!texture) {
         texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -1393,8 +1473,8 @@ 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_QUAD;
-      spriteData = grow(spriteData, (spriteCount + 1) * stride);
+      const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+      spriteData = growPacked(spriteData, (spriteCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeQuad(
         spriteData,
@@ -1420,6 +1500,10 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      if (!isSourceReady(source)) {
+        distanceRange = range;
+        return;
+      }
       atlasSwitches++;
       drawGlyphs();
       distanceRange = range;
@@ -1438,8 +1522,8 @@ 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_QUAD;
-      glyphData = grow(glyphData, (glyphCount + 1) * stride);
+      const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+      glyphData = growPacked(glyphData, (glyphCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeQuad(
         glyphData,
@@ -1464,8 +1548,8 @@ function createWebGLPointRenderer(canvas) {
       const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
       if (needsQuad) {
         circleQuadFallbacks++;
-        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_QUAD;
-        circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
+        const stride = PACKED_QUAD_VERT_STRIDE * VERTS_PER_QUAD;
+        circleQuadData = growPacked(circleQuadData, (circleQuadCount + 1) * stride);
         const rgba = parseColorToRGBA(color);
         const d = radius * 2;
         writeQuad(
@@ -1502,8 +1586,8 @@ function createWebGLPointRenderer(canvas) {
       pointCount++;
     },
     addRect(x, y, width, height, color, alpha = 1, rotation = 0) {
-      const stride = FLOATS_PER_RECT_VERT * VERTS_PER_QUAD;
-      rectData = grow(rectData, (rectCount + 1) * stride);
+      const stride = PACKED_RECT_VERT_STRIDE * VERTS_PER_QUAD;
+      rectData = growPacked(rectData, (rectCount + 1) * stride);
       const rgba = parseColorToRGBA(color);
       writeRectQuad(
         rectData,
@@ -1522,11 +1606,11 @@ function createWebGLPointRenderer(canvas) {
     },
     flush() {
       if (rectCount > 0) {
-        const floats = rectCount * VERTS_PER_QUAD * FLOATS_PER_RECT_VERT;
+        const bytes = rectCount * VERTS_PER_QUAD * PACKED_RECT_VERT_STRIDE;
         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.bufferData(gl.ARRAY_BUFFER, rectData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.uniform2f(rURes, logicalW, logicalH);
         ensureQuadIndices(rectCount);
         gl.drawElements(gl.TRIANGLES, rectCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
@@ -1547,22 +1631,22 @@ function createWebGLPointRenderer(canvas) {
         frameDrawCalls++;
       }
       if (circleQuadCount > 0) {
-        const floats = circleQuadCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+        const bytes = circleQuadCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
         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.bufferData(gl.ARRAY_BUFFER, circleQuadData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.uniform2f(cURes, logicalW, logicalH);
         ensureQuadIndices(circleQuadCount);
         gl.drawElements(gl.TRIANGLES, circleQuadCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
         frameDrawCalls++;
       }
       if (spriteCount > 0 && texture) {
-        const floats = spriteCount * VERTS_PER_QUAD * FLOATS_PER_SPRITE_VERT;
+        const bytes = spriteCount * VERTS_PER_QUAD * PACKED_QUAD_VERT_STRIDE;
         gl.useProgram(spriteProgram);
         gl.bindVertexArray(spriteVAO);
         gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, spriteData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.bufferData(gl.ARRAY_BUFFER, spriteData.u8.subarray(0, bytes), gl.DYNAMIC_DRAW);
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.uniform1i(sUTex, 0);

package/dist/{chunk-FRMLD4PP.mjs → chunk-MVFPN4Y5.mjs}

@@ -1093,6 +1093,11 @@ var MSDFTextEntity = class extends Entity {
   layoutText = "";
   text = "";
   lastRenderedSeqId = 0;
+  // Atlas-decode subscription (see watchAtlasDecode). Held so `destroy()` can
+  // release it: the handler closes over `this`, so leaving it attached to a
+  // long-lived shared atlas image would retain the whole entity.
+  atlasDecodeTarget = null;
+  atlasDecodeHandler = null;
   rgbColorCache = /* @__PURE__ */ new Map();
   fontStringCache = [];
   layoutResult = null;
@@ -1108,8 +1113,53 @@ var MSDFTextEntity = class extends Entity {
     this.maxWidth = options.maxWidth ?? 1e3;
     this.maxHeight = options.maxHeight ?? 1e3;
     this.textAlign = options.textAlign ?? "left";
+    this.watchAtlasDecode();
     this.setText(text);
   }
+  /**
+   * Repaint once the atlas raster decodes.
+   *
+   * The WebGL backend refuses to upload a not-yet-decoded atlas (it would pin an
+   * empty texture in its identity cache forever), so the upload has to happen on
+   * a LATER frame — and nothing else schedules one. Layout marks the scene dirty
+   * when the worker replies, which for a network-served atlas is long before the
+   * image lands, so the scene is already idle by then.
+   *
+   * Measured on Chromium and Firefox (2026-07-31) with a 600 ms atlas: the
+   * scene's own rAF loop never uploaded a decoded atlas in EITHER render mode.
+   * `onDemand` skips idle frames outright; `always` throttles to 2 FPS when
+   * idle, so whether it recovers is down to whether a throttled tick happens to
+   * land after the decode — Chromium got one, Firefox did not. Neither is a
+   * mechanism, which is why this listener exists rather than relying on the
+   * frame loop to come back around.
+   *
+   * Only `HTMLImageElement`-shaped sources have a decode to wait for; a canvas,
+   * `ImageBitmap`, or `VideoFrame` atlas is ready on arrival.
+   */
+  watchAtlasDecode() {
+    const source = this.texture;
+    if (typeof source.complete !== "boolean" || typeof source.addEventListener !== "function" || typeof source.removeEventListener !== "function") {
+      return;
+    }
+    if (source.complete && typeof source.naturalWidth === "number" && source.naturalWidth > 0) {
+      return;
+    }
+    const target = this.texture;
+    this.atlasDecodeHandler = () => {
+      this.detachAtlasDecodeListener();
+      this.scene?.markDirty();
+    };
+    target.addEventListener("load", this.atlasDecodeHandler);
+    target.addEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = target;
+  }
+  detachAtlasDecodeListener() {
+    if (!this.atlasDecodeTarget || !this.atlasDecodeHandler) return;
+    this.atlasDecodeTarget.removeEventListener("load", this.atlasDecodeHandler);
+    this.atlasDecodeTarget.removeEventListener("error", this.atlasDecodeHandler);
+    this.atlasDecodeTarget = null;
+    this.atlasDecodeHandler = null;
+  }
   /** Change the wrap boundary and re-run layout for the current text. */
   setMaxWidth(maxWidth) {
     if (this.maxWidth === maxWidth) return;
@@ -1281,11 +1331,13 @@ var MSDFTextEntity = class extends Entity {
   }
   destroy() {
     LayoutWorkerManager.cancelLayoutForEntity(this.id);
+    this.detachAtlasDecodeListener();
     super.destroy();
   }
 };
 
 // src/text/SVGEntity.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function isSvgWhitespace(ch) {
   return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
 }
@@ -1317,12 +1369,21 @@ function readSvgAttribute(source, name) {
   return null;
 }
 var SVGEntity = class extends Entity {
+  /**
+   * Stroke colour of the fallback marker drawn when the source cannot be
+   * rasterized. Set to `'transparent'` to opt out and keep the box empty.
+   * Default `'rgba(248,113,113,0.9)'`.
+   */
+  fallbackStroke = "rgba(248,113,113,0.9)";
+  /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
+  fallbackFill = "rgba(248,113,113,0.12)";
   svgSource = "";
   imageBitmap = null;
   imageElement = null;
   blobURL = null;
   currentImg = null;
   lodTimeout = null;
+  rasterFailed = false;
   cachedDoc = null;
   baseWidth = 100;
   baseHeight = 100;
@@ -1349,6 +1410,7 @@ var SVGEntity = class extends Entity {
         const parserError = doc.querySelector("parsererror");
         if (parserError) {
           console.error("SVG Parsing error:", parserError.textContent);
+          this.rasterFailed = true;
         } else {
           this.cachedDoc = doc;
           const svgEl = doc.documentElement;
@@ -1368,6 +1430,7 @@ var SVGEntity = class extends Entity {
         }
       } catch (e) {
         console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
+        this.rasterFailed = true;
       }
     } else {
       const wAttr = readSvgAttribute(this.svgSource, "width");
@@ -1391,6 +1454,7 @@ var SVGEntity = class extends Entity {
   }
   triggerRasterization(scale) {
     if (typeof window === "undefined" || typeof Blob === "undefined") return;
+    this.rasterFailed = false;
     if (this.currentImg) {
       this.currentImg.onload = null;
       this.currentImg.onerror = null;
@@ -1414,6 +1478,7 @@ var SVGEntity = class extends Entity {
           "SVG Parsing validation error in triggerRasterization:",
           parserError.textContent
         );
+        this.rasterFailed = true;
       } else {
         const clonedDoc = doc.cloneNode(true);
         const svgEl = clonedDoc.documentElement;
@@ -1427,10 +1492,14 @@ var SVGEntity = class extends Entity {
           }
           const serializer = new XMLSerializer();
           processedSource = serializer.serializeToString(clonedDoc);
+          if (svgEl.namespaceURI === null && !/\sxmlns\s*=/.test(processedSource)) {
+            processedSource = processedSource.replace(/<svg/i, `<svg xmlns="${SVG_NAMESPACE}"`);
+          }
         }
       }
     } catch (e) {
       console.error("Failed to apply LOD scaling to SVG XML:", e);
+      this.rasterFailed = true;
     }
     const blob = new Blob([processedSource], { type: "image/svg+xml;charset=utf-8" });
     this.blobURL = URL.createObjectURL(blob);
@@ -1459,15 +1528,36 @@ var SVGEntity = class extends Entity {
       }).catch((e) => {
         console.error("Failed to create ImageBitmap from SVG:", e);
         this.currentImg = null;
+        if (!this.imageElement) this.rasterFailed = true;
+        if (this.scene) this.scene.markDirty();
       });
     };
     img.onerror = (e) => {
       if (this.currentImg !== img) return;
       console.error("Failed to load SVG Image element:", e);
       this.currentImg = null;
+      this.rasterFailed = true;
+      if (this.scene) this.scene.markDirty();
     };
     img.src = this.blobURL;
   }
+  /**
+   * Whether the source genuinely rasterized to a bitmap.
+   *
+   * Distinguishes "drew the real artwork" from "drew the fallback marker",
+   * which pixel counts alone cannot tell apart — both are non-blank.
+   */
+  hasRasterBitmap() {
+    return this.imageBitmap !== null;
+  }
+  /**
+   * Whether rasterization failed, so {@link render} draws the fallback marker.
+   *
+   * `false` while a raster is still in flight; only a settled failure sets it.
+   */
+  hasRasterFailed() {
+    return this.rasterFailed;
+  }
   isPointInside(globalX, globalY) {
     const local = this.worldToLocal(globalX, globalY);
     if (!local) return false;
@@ -1492,9 +1582,32 @@ var SVGEntity = class extends Entity {
     }
     if (this.imageBitmap) {
       r.drawImage(this.imageBitmap, 0, 0, this.width, this.height);
-    } else if (this.imageElement) {
+      return;
+    }
+    if (this.imageElement) {
       r.drawImage(this.imageElement, 0, 0, this.width, this.height);
+      return;
     }
+    if (this.rasterFailed) this.drawFallback(r);
+  }
+  /** Box outline plus a diagonal cross — the conventional "broken image" mark. */
+  drawFallback(r) {
+    const w = this.width;
+    const h = this.height;
+    if (w <= 0 || h <= 0) return;
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.fill(this.fallbackFill);
+    r.beginPath();
+    r.roundRect(0, 0, w, h, 0);
+    r.stroke(this.fallbackStroke, 1);
+    const inset = Math.min(w, h) * 0.2;
+    r.beginPath();
+    r.moveTo(inset, inset);
+    r.lineTo(w - inset, h - inset);
+    r.moveTo(w - inset, inset);
+    r.lineTo(inset, h - inset);
+    r.stroke(this.fallbackStroke, 1);
   }
   destroy() {
     if (this.lodTimeout) {