@vectojs/core 1.24.0 → 1.25.0

package/dist/{chunk-ME4LB2HB.mjs → chunk-I4WQY7CJ.mjs}

@@ -1210,6 +1210,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
@@ -1445,6 +1455,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);
@@ -1487,6 +1498,10 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      if (!isSourceReady(source)) {
+        distanceRange = range;
+        return;
+      }
       atlasSwitches++;
       drawGlyphs();
       distanceRange = range;

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

@@ -1212,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
@@ -1447,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);
@@ -1489,6 +1500,10 @@ function createWebGLPointRenderer(canvas) {
         distanceRange = range;
         return;
       }
+      if (!isSourceReady(source)) {
+        distanceRange = range;
+        return;
+      }
       atlasSwitches++;
       drawGlyphs();
       distanceRange = range;

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) {

package/dist/{chunk-AGP4VLF4.js → chunk-Z3HFY75R.js}

@@ -1095,11 +1095,16 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   __init40() {this.layoutText = ""}
   __init41() {this.text = ""}
   __init42() {this.lastRenderedSeqId = 0}
-  __init43() {this.rgbColorCache = /* @__PURE__ */ new Map()}
-  __init44() {this.fontStringCache = []}
-  __init45() {this.layoutResult = null}
+  // 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.
+  __init43() {this.atlasDecodeTarget = null}
+  __init44() {this.atlasDecodeHandler = null}
+  __init45() {this.rgbColorCache = /* @__PURE__ */ new Map()}
+  __init46() {this.fontStringCache = []}
+  __init47() {this.layoutResult = null}
   constructor(text, options) {
-    super();_class3.prototype.__init39.call(this);_class3.prototype.__init40.call(this);_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);;
+    super();_class3.prototype.__init39.call(this);_class3.prototype.__init40.call(this);_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);_class3.prototype.__init46.call(this);_class3.prototype.__init47.call(this);;
     this.font = options.font;
     this.texture = options.texture;
     this.fallbackFont = _nullishCoalesce(options.fallbackFont, () => ( "sans-serif"));
@@ -1110,8 +1115,53 @@ var MSDFTextEntity = (_class3 = class extends Entity {
     this.maxWidth = _nullishCoalesce(options.maxWidth, () => ( 1e3));
     this.maxHeight = _nullishCoalesce(options.maxHeight, () => ( 1e3));
     this.textAlign = _nullishCoalesce(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();
+      _optionalChain([this, 'access', _108 => _108.scene, 'optionalAccess', _109 => _109.markDirty, 'call', _110 => _110()]);
+    };
+    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;
@@ -1177,7 +1227,7 @@ var MSDFTextEntity = (_class3 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
-        _optionalChain([this, 'access', _108 => _108.scene, 'optionalAccess', _109 => _109.markDirty, 'call', _110 => _110()]);
+        _optionalChain([this, 'access', _111 => _111.scene, 'optionalAccess', _112 => _112.markDirty, 'call', _113 => _113()]);
       }
     });
   }
@@ -1283,11 +1333,13 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   }
   destroy() {
     _layout.LayoutWorkerManager.cancelLayoutForEntity(this.id);
+    this.detachAtlasDecodeListener();
     super.destroy();
   }
 }, _class3);
 
 // src/text/SVGEntity.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 function isSvgWhitespace(ch) {
   return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
 }
@@ -1319,19 +1371,28 @@ function readSvgAttribute(source, name) {
   return null;
 }
 var SVGEntity = (_class4 = class extends Entity {
-  __init46() {this.svgSource = ""}
-  __init47() {this.imageBitmap = null}
-  __init48() {this.imageElement = null}
-  __init49() {this.blobURL = null}
-  __init50() {this.currentImg = null}
-  __init51() {this.lodTimeout = null}
-  __init52() {this.cachedDoc = null}
-  __init53() {this.baseWidth = 100}
-  __init54() {this.baseHeight = 100}
-  __init55() {this.lastRasterizedScale = 1}
-  __init56() {this.targetScale = 1}
+  /**
+   * 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)'`.
+   */
+  __init48() {this.fallbackStroke = "rgba(248,113,113,0.9)"}
+  /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
+  __init49() {this.fallbackFill = "rgba(248,113,113,0.12)"}
+  __init50() {this.svgSource = ""}
+  __init51() {this.imageBitmap = null}
+  __init52() {this.imageElement = null}
+  __init53() {this.blobURL = null}
+  __init54() {this.currentImg = null}
+  __init55() {this.lodTimeout = null}
+  __init56() {this.rasterFailed = false}
+  __init57() {this.cachedDoc = null}
+  __init58() {this.baseWidth = 100}
+  __init59() {this.baseHeight = 100}
+  __init60() {this.lastRasterizedScale = 1}
+  __init61() {this.targetScale = 1}
   constructor(svgSource, id) {
-    super(id);_class4.prototype.__init46.call(this);_class4.prototype.__init47.call(this);_class4.prototype.__init48.call(this);_class4.prototype.__init49.call(this);_class4.prototype.__init50.call(this);_class4.prototype.__init51.call(this);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);;
+    super(id);_class4.prototype.__init48.call(this);_class4.prototype.__init49.call(this);_class4.prototype.__init50.call(this);_class4.prototype.__init51.call(this);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);_class4.prototype.__init59.call(this);_class4.prototype.__init60.call(this);_class4.prototype.__init61.call(this);;
     this.setSVGSource(svgSource);
   }
   setSVGSource(svgSource) {
@@ -1351,6 +1412,7 @@ var SVGEntity = (_class4 = 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;
@@ -1370,6 +1432,7 @@ var SVGEntity = (_class4 = 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");
@@ -1393,6 +1456,7 @@ var SVGEntity = (_class4 = 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;
@@ -1416,6 +1480,7 @@ var SVGEntity = (_class4 = class extends Entity {
           "SVG Parsing validation error in triggerRasterization:",
           parserError.textContent
         );
+        this.rasterFailed = true;
       } else {
         const clonedDoc = doc.cloneNode(true);
         const svgEl = clonedDoc.documentElement;
@@ -1429,10 +1494,14 @@ var SVGEntity = (_class4 = 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);
@@ -1461,15 +1530,36 @@ var SVGEntity = (_class4 = 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;
@@ -1494,9 +1584,32 @@ var SVGEntity = (_class4 = 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) {

package/dist/index.js

@@ -9,13 +9,13 @@
 
 
 
-var _chunkKEBYJVD6js = require('./chunk-KEBYJVD6.js');
+var _chunkKHGHP2J3js = require('./chunk-KHGHP2J3.js');
 
 
 
 
 
-var _chunkAGP4VLF4js = require('./chunk-AGP4VLF4.js');
+var _chunkZ3HFY75Rjs = require('./chunk-Z3HFY75R.js');
 
 // src/tree/Scene.ts
 var _animation = require('@vectojs/animation'); _createStarExport(_animation);
@@ -30,7 +30,7 @@ var PARTICLE_OFFSET_ORIGIN_X = 4;
 var PARTICLE_OFFSET_ORIGIN_Y = 5;
 var PARTICLE_OFFSET_SIZE = 6;
 var PARTICLE_OFFSET_LIFE = 7;
-var ComputeParticleEntity = (_class = class extends _chunkAGP4VLF4js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkZ3HFY75Rjs.Entity {
   
   
   
@@ -2875,7 +2875,7 @@ var Scene = (_class7 = class _Scene {
       this.forcedColorsChangeHandler = () => this.markDirty();
       _optionalChain([this, 'access', _58 => _58.forcedColorsQuery, 'access', _59 => _59.addEventListener, 'optionalCall', _60 => _60("change", this.forcedColorsChangeHandler)]);
     }
-    this.root = new class RootEntity extends _chunkAGP4VLF4js.Entity {
+    this.root = new class RootEntity extends _chunkZ3HFY75Rjs.Entity {
       isPointInside() {
         return false;
       }
@@ -2884,7 +2884,7 @@ var Scene = (_class7 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkAGP4VLF4js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkZ3HFY75Rjs.Entity {
       isPointInside() {
         return false;
       }
@@ -2895,7 +2895,7 @@ var Scene = (_class7 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkKEBYJVD6js.CanvasRenderer)(
+      this.renderer = new (0, _chunkKHGHP2J3js.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
@@ -3299,7 +3299,7 @@ var Scene = (_class7 = class _Scene {
       }
       if (this.hoveredA11yElements.has(el)) {
         this.hoveredA11yElements.delete(el);
-        node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointerleave", node, void 0, false));
+        node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointerleave", node, void 0, false));
       }
       this.preserveFocusOnRemoval(el);
       el.remove();
@@ -3812,20 +3812,20 @@ var Scene = (_class7 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("dblclick", (e) => {
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("dblclick", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("dblclick", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
           this.hoveredA11yElements.add(el);
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
           this.hoveredA11yElements.delete(el);
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -3841,32 +3841,32 @@ var Scene = (_class7 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -3932,7 +3932,7 @@ var Scene = (_class7 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -3970,7 +3970,7 @@ var Scene = (_class7 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkKEBYJVD6js.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkKHGHP2J3js.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -4247,7 +4247,7 @@ var Scene = (_class7 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -5184,7 +5184,7 @@ var Scene = (_class7 = class _Scene {
     let walkHadAnimation = false;
     let walkHadInteractive = false;
     const runUpdate = (node) => {
-      const overridesUpdate = node.update !== _chunkAGP4VLF4js.Entity.prototype.update;
+      const overridesUpdate = node.update !== _chunkZ3HFY75Rjs.Entity.prototype.update;
       let pending = node.hasPendingAnimations();
       if (pending || overridesUpdate) {
         node.update(dt, time);
@@ -5193,7 +5193,7 @@ var Scene = (_class7 = class _Scene {
       if (pending) walkHadAnimation = true;
       if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
       if (this._devActive && this._devFrameCount % 120 === 0) {
-        if (overridesUpdate && node.hasPendingAnimations === _chunkAGP4VLF4js.Entity.prototype.hasPendingAnimations) {
+        if (overridesUpdate && node.hasPendingAnimations === _chunkZ3HFY75Rjs.Entity.prototype.hasPendingAnimations) {
           this._devWarn(
             `Entity "${node.id}" overrides update() but not hasPendingAnimations(). Custom motion in update() without overriding hasPendingAnimations() causes the idle throttle to drop the animation to ~2fps. Override hasPendingAnimations() to return true while motion is in flight.`
           );
@@ -5405,7 +5405,7 @@ var Scene = (_class7 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkKEBYJVD6js.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkKHGHP2J3js.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -5712,12 +5712,12 @@ function contentGridLineSignature(grid, line, projected, lineHeight, baseline, f
 
 
 var _layout = require('@vectojs/layout'); _createStarExport(_layout);
-var sharedMeasurer;
+var sharedMeasurer = null;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _layout.createCanvasMeasurer.call(void 0, "sans-serif");
+  sharedMeasurer ??= _layout.resolveGlyphMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class8 = class extends _chunkAGP4VLF4js.Entity {
+var TextEntity = (_class8 = class extends _chunkZ3HFY75Rjs.Entity {
   
   
   
@@ -5843,7 +5843,7 @@ var TextEntity = (_class8 = class extends _chunkAGP4VLF4js.Entity {
 }, _class8);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class9 = class extends _chunkAGP4VLF4js.Entity {
+var GridTextEntity = (_class9 = class extends _chunkZ3HFY75Rjs.Entity {
   
   __init155() {this.fillStyle = "#ffffff"}
   __init156() {this.grid = []}
@@ -5937,7 +5937,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class10 = class extends _chunkAGP4VLF4js.Entity {
+var SplineEntity = (_class10 = class extends _chunkZ3HFY75Rjs.Entity {
   
   
   
@@ -6212,7 +6212,7 @@ async function loadSpline(url) {
 }
 
 // src/components/Rect.ts
-var Rect = class extends _chunkAGP4VLF4js.Entity {
+var Rect = class extends _chunkZ3HFY75Rjs.Entity {
   
   
   
@@ -6261,7 +6261,7 @@ var Rect = class extends _chunkAGP4VLF4js.Entity {
 };
 
 // src/components/Circle.ts
-var Circle = class extends _chunkAGP4VLF4js.Entity {
+var Circle = class extends _chunkZ3HFY75Rjs.Entity {
   
   
   
@@ -6321,7 +6321,7 @@ var Circle = class extends _chunkAGP4VLF4js.Entity {
 };
 
 // src/components/Group.ts
-var Group = class extends _chunkAGP4VLF4js.Entity {
+var Group = class extends _chunkZ3HFY75Rjs.Entity {
   constructor(...children) {
     super();
     if (children.length > 0) this.add(...children);
@@ -6340,7 +6340,7 @@ var _math = require('@vectojs/math'); _createStarExport(_math);
 
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
+var DOMPortalEntity = (_class11 = class extends _chunkZ3HFY75Rjs.Entity {
   
   __init165() {this.isDOMPortal = true}
   __init166() {this.domListeners = []}
@@ -6396,7 +6396,7 @@ var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
     ];
     for (const type of events) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)(type, this, e));
+        this.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)(type, this, e));
       };
       this.domElement.addEventListener(type, handler);
       this.domListeners.push({ type, handler, capture: false });
@@ -6407,7 +6407,7 @@ var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
     ];
     for (const { native, vecto } of hoverEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)(vecto, this, e, false));
+        this.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)(vecto, this, e, false));
       };
       this.domElement.addEventListener(native, handler);
       this.domListeners.push({ type: native, handler, capture: false });
@@ -6415,7 +6415,7 @@ var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
     const focusEvents = ["focus", "blur"];
     for (const type of focusEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkAGP4VLF4js.VectoJSEvent)(type, this, e, true));
+        this.dispatchEvent(new (0, _chunkZ3HFY75Rjs.VectoJSEvent)(type, this, e, true));
       };
       this.domElement.addEventListener(type, handler, true);
       this.domListeners.push({ type, handler, capture: true });
@@ -6466,8 +6466,8 @@ var DOMPortalEntity = (_class11 = class extends _chunkAGP4VLF4js.Entity {
 }, _class11);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkKEBYJVD6js.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkKEBYJVD6js.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkKHGHP2J3js.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkKHGHP2J3js.WebGPUParticleSystemManager);
 
 
 
@@ -6507,4 +6507,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkKEBYJVD6js.WebGPUParticleSystemM
 
 
 
-exports.CanvasRenderer = _chunkKEBYJVD6js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkAGP4VLF4js.Entity; exports.GlyphRasterAtlas = _chunkKEBYJVD6js.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkAGP4VLF4js.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 = _chunkAGP4VLF4js.SVGEntity; exports.SVGRenderer = _chunkKEBYJVD6js.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkKEBYJVD6js.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkAGP4VLF4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkKEBYJVD6js.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.createWebGLPointRenderer = _chunkKEBYJVD6js.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.isSafeUrl = _chunkKEBYJVD6js.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkKEBYJVD6js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkKEBYJVD6js.sanitizeUrl;
+exports.CanvasRenderer = _chunkKHGHP2J3js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkZ3HFY75Rjs.Entity; exports.GlyphRasterAtlas = _chunkKHGHP2J3js.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkZ3HFY75Rjs.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 = _chunkZ3HFY75Rjs.SVGEntity; exports.SVGRenderer = _chunkKHGHP2J3js.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkKHGHP2J3js.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkZ3HFY75Rjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkKHGHP2J3js.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.createWebGLPointRenderer = _chunkKHGHP2J3js.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.isSafeUrl = _chunkKHGHP2J3js.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkKHGHP2J3js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkKHGHP2J3js.sanitizeUrl;

package/dist/index.mjs

@@ -8,13 +8,13 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-ME4LB2HB.mjs";
+} from "./chunk-I4WQY7CJ.mjs";
 import {
   Entity,
   MSDFTextEntity,
   SVGEntity,
   VectoJSEvent
-} from "./chunk-FRMLD4PP.mjs";
+} from "./chunk-MVFPN4Y5.mjs";
 
 // src/tree/Scene.ts
 import { SpringDriver, TweenDriver } from "@vectojs/animation";
@@ -5709,11 +5709,11 @@ function contentGridLineSignature(grid, line, projected, lineHeight, baseline, f
 // src/components/TextEntity.ts
 import {
   LayoutEngine,
-  createCanvasMeasurer
+  resolveGlyphMeasurer
 } from "@vectojs/layout";
-var sharedMeasurer;
+var sharedMeasurer = null;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = createCanvasMeasurer("sans-serif");
+  sharedMeasurer ??= resolveGlyphMeasurer("sans-serif");
   return sharedMeasurer;
 }
 var TextEntity = class extends Entity {

package/dist/renderer.js

@@ -7,7 +7,7 @@
 
 
 
-var _chunkKEBYJVD6js = require('./chunk-KEBYJVD6.js');
+var _chunkKHGHP2J3js = require('./chunk-KHGHP2J3.js');
 
 
 
@@ -16,4 +16,4 @@ var _chunkKEBYJVD6js = require('./chunk-KEBYJVD6.js');
 
 
 
-exports.CanvasRenderer = _chunkKEBYJVD6js.CanvasRenderer; exports.GlyphRasterAtlas = _chunkKEBYJVD6js.GlyphRasterAtlas; exports.SVGRenderer = _chunkKEBYJVD6js.SVGRenderer; exports.TextRasterCache = _chunkKEBYJVD6js.TextRasterCache; exports.WebGPUParticleSystemManager = _chunkKEBYJVD6js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkKEBYJVD6js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkKEBYJVD6js.parseColorToRGBA;
+exports.CanvasRenderer = _chunkKHGHP2J3js.CanvasRenderer; exports.GlyphRasterAtlas = _chunkKHGHP2J3js.GlyphRasterAtlas; exports.SVGRenderer = _chunkKHGHP2J3js.SVGRenderer; exports.TextRasterCache = _chunkKHGHP2J3js.TextRasterCache; exports.WebGPUParticleSystemManager = _chunkKHGHP2J3js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkKHGHP2J3js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkKHGHP2J3js.parseColorToRGBA;

package/dist/renderer.mjs

@@ -6,7 +6,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-ME4LB2HB.mjs";
+} from "./chunk-I4WQY7CJ.mjs";
 export {
   CanvasRenderer,
   GlyphRasterAtlas,

package/dist/text/MSDFTextEntity.d.ts

@@ -34,10 +34,34 @@ export declare class MSDFTextEntity extends Entity {
     private layoutText;
     private text;
     private lastRenderedSeqId;
+    private atlasDecodeTarget;
+    private atlasDecodeHandler;
     private rgbColorCache;
     private fontStringCache;
     private layoutResult;
     constructor(text: string, options: MSDFTextEntityOptions);
+    /**
+     * 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.
+     */
+    private watchAtlasDecode;
+    private detachAtlasDecodeListener;
     /** Change the wrap boundary and re-run layout for the current text. */
     setMaxWidth(maxWidth: number): void;
     /**

package/dist/text/SVGEntity.d.ts

@@ -1,12 +1,21 @@
 import { Entity } from '../tree/Entity';
 import { IRenderer } from '../renderer/IRenderer';
 export declare class SVGEntity 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: string;
+    /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
+    fallbackFill: string;
     private svgSource;
     private imageBitmap;
     private imageElement;
     private blobURL;
     private currentImg;
     private lodTimeout;
+    private rasterFailed;
     private cachedDoc;
     private baseWidth;
     private baseHeight;
@@ -16,7 +25,22 @@ export declare class SVGEntity extends Entity {
     setSVGSource(svgSource: string): void;
     private parseSVGDimensions;
     private triggerRasterization;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): boolean;
     isPointInside(globalX: number, globalY: number): boolean;
     render(r: IRenderer): void;
+    /** Box outline plus a diagonal cross — the conventional "broken image" mark. */
+    private drawFallback;
     destroy(): void;
 }

package/dist/text.js

@@ -2,11 +2,11 @@
 
 
 
-var _chunkAGP4VLF4js = require('./chunk-AGP4VLF4.js');
+var _chunkZ3HFY75Rjs = require('./chunk-Z3HFY75R.js');
 
 // src/text/index.ts
 var _text = require('@vectojs/text'); _createStarExport(_text);
 
 
 
-exports.MSDFTextEntity = _chunkAGP4VLF4js.MSDFTextEntity; exports.SVGEntity = _chunkAGP4VLF4js.SVGEntity;
+exports.MSDFTextEntity = _chunkZ3HFY75Rjs.MSDFTextEntity; exports.SVGEntity = _chunkZ3HFY75Rjs.SVGEntity;

package/dist/text.mjs

@@ -1,7 +1,7 @@
 import {
   MSDFTextEntity,
   SVGEntity
-} from "./chunk-FRMLD4PP.mjs";
+} from "./chunk-MVFPN4Y5.mjs";
 
 // src/text/index.ts
 export * from "@vectojs/text";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "publishConfig": {
     "access": "public"
   },
@@ -61,20 +61,20 @@
   "scripts": {
     "build": "(cd ../math && bun run build) && (cd ../text && bun run build) && (cd ../layout && bun run build) && (cd ../animation && bun run build) && tsup && tsc -p tsconfig.build.json",
     "test": "vitest run",
-    "test:e2e": "bun e2e/hidpi.e2e.ts && bun e2e/text-projection.e2e.ts"
+    "test:e2e": "bun e2e/hidpi.e2e.ts && bun e2e/text-projection.e2e.ts && bun e2e/svg-fallback.e2e.ts && bun e2e/msdf-atlas-decode.e2e.ts && bun e2e/layout-worker-fallback.e2e.ts"
   },
   "dependencies": {
     "@vectojs/animation": "^0.1.1",
-    "@vectojs/layout": "^0.4.0",
+    "@vectojs/layout": "^0.5.0",
     "@vectojs/math": "^0.1.1",
-    "@vectojs/text": "^0.2.0"
+    "@vectojs/text": "^0.3.0"
   },
   "devDependencies": {
     "@guidepup/virtual-screen-reader": "0.32.1",
     "@vitest/coverage-v8": "^4.1.10",
     "esbuild": "^0.28.1",
-    "jsdom": "^29.1.1",
-    "puppeteer-core": "^25.3.0",
+    "jsdom": "^30.0.1",
+    "puppeteer-core": "^25.4.0",
     "tsup": "^8.3.5",
     "vitest": "^4.1.10"
   }