@vectojs/core 1.38.0 → 1.39.0

package/dist/{chunk-LWEMD34D.mjs → chunk-RUM2KEDI.mjs}

@@ -107,6 +107,17 @@ var CanvasRenderer = class _CanvasRenderer {
   batchCount = 0;
   _cachedFont = "";
   _cachedFill = "";
+  // Stroke-side counterparts of the fill/font caches, read by stroke()'s
+  // style-elision branch. Reset wherever the context state can change behind
+  // our back: restore(), resize(), contextrestored, dispose().
+  _cachedStroke = "";
+  _cachedLineWidth = -1;
+  _cachedLineCap = "";
+  _cachedLineJoin = "";
+  // Context-loss listeners, held for removal in dispose() so a canvas that
+  // outlives the renderer cannot retain it through these closures.
+  _onContextLost;
+  _onContextRestored;
   /** Backend discriminator; see {@link IRenderer.kind}. */
   kind = "canvas2d";
   /**
@@ -160,11 +171,11 @@ var CanvasRenderer = class _CanvasRenderer {
    */
   setupContextLossRecovery() {
     if (typeof this.canvas.addEventListener !== "function") return;
-    this.canvas.addEventListener("contextlost", (e) => {
+    this._onContextLost = (e) => {
       e.preventDefault();
       this.contextLost = true;
-    });
-    this.canvas.addEventListener("contextrestored", () => {
+    };
+    this._onContextRestored = () => {
       const ctx = this.canvas.getContext("2d");
       if (!ctx) return;
       this.ctx = ctx;
@@ -174,11 +185,17 @@ var CanvasRenderer = class _CanvasRenderer {
       ctx.scale(restoredDPR, restoredDPR);
       this._cachedFont = "";
       this._cachedFill = "";
+      this._cachedStroke = "";
+      this._cachedLineWidth = -1;
+      this._cachedLineCap = "";
+      this._cachedLineJoin = "";
       this.batchActive = false;
       this.batchCount = 0;
       this.contextLost = false;
       this.contextRestoredCb?.();
-    });
+    };
+    this.canvas.addEventListener("contextlost", this._onContextLost);
+    this.canvas.addEventListener("contextrestored", this._onContextRestored);
   }
   /**
    * Expose the underlying `CanvasRenderingContext2D` for operations not
@@ -228,11 +245,17 @@ var CanvasRenderer = class _CanvasRenderer {
     this.height = height;
     this.ctx.canvas.width = width * dpr;
     this.ctx.canvas.height = height * dpr;
-    this.ctx.canvas.style.width = `${width}px`;
-    this.ctx.canvas.style.height = `${height}px`;
+    if (this.ctx.canvas.style) {
+      this.ctx.canvas.style.width = `${width}px`;
+      this.ctx.canvas.style.height = `${height}px`;
+    }
     this.ctx.scale(dpr, dpr);
     this._cachedFont = "";
     this._cachedFill = "";
+    this._cachedStroke = "";
+    this._cachedLineWidth = -1;
+    this._cachedLineCap = "";
+    this._cachedLineJoin = "";
     this.batchActive = false;
     this.batchCount = 0;
   }
@@ -286,6 +309,10 @@ var CanvasRenderer = class _CanvasRenderer {
     this.ctx.restore();
     this._cachedFont = "";
     this._cachedFill = "";
+    this._cachedStroke = "";
+    this._cachedLineWidth = -1;
+    this._cachedLineCap = "";
+    this._cachedLineJoin = "";
   }
   /** @inheritdoc */
   translate(x, y) {
@@ -410,10 +437,17 @@ var CanvasRenderer = class _CanvasRenderer {
   stroke(color, lineWidth = 1) {
     this.flush();
     if (this.counters) this.counters.strokes++;
-    this.ctx.strokeStyle = color;
-    this.ctx.lineWidth = lineWidth;
-    this.ctx.lineCap = "round";
-    this.ctx.lineJoin = "round";
+    if (this._cachedStroke !== color || this._cachedLineWidth !== lineWidth || this._cachedLineCap !== "round" || this._cachedLineJoin !== "round") {
+      if (this.counters) this.counters.stateSwitches++;
+      this.ctx.strokeStyle = color;
+      this.ctx.lineWidth = lineWidth;
+      this.ctx.lineCap = "round";
+      this.ctx.lineJoin = "round";
+      this._cachedStroke = color;
+      this._cachedLineWidth = lineWidth;
+      this._cachedLineCap = "round";
+      this._cachedLineJoin = "round";
+    }
     this.ctx.stroke();
   }
   /** @inheritdoc */
@@ -452,6 +486,17 @@ var CanvasRenderer = class _CanvasRenderer {
     this.batchActive = false;
     this._cachedFont = "";
     this._cachedFill = "";
+    this._cachedStroke = "";
+    this._cachedLineWidth = -1;
+    this._cachedLineCap = "";
+    this._cachedLineJoin = "";
+    if (typeof this.canvas.removeEventListener === "function") {
+      if (this._onContextLost) this.canvas.removeEventListener("contextlost", this._onContextLost);
+      if (this._onContextRestored)
+        this.canvas.removeEventListener("contextrestored", this._onContextRestored);
+    }
+    this._onContextLost = void 0;
+    this._onContextRestored = void 0;
   }
 };
 
@@ -474,9 +519,13 @@ function hasSafeSchemeOrIsRelative(url) {
   return SAFE_SCHEMES.has(`${candidate.toLowerCase()}:`);
 }
 var CHAR_REF = /&(?:#\d+|#x[\da-f]+|colon|tab|newline);/i;
+var MAX_CODE_POINT = 1114111;
+function decodeCodePoint(value) {
+  return value <= MAX_CODE_POINT ? String.fromCodePoint(value) : "\uFFFD";
+}
 function decodeCharacterReferences(value) {
   if (value.indexOf("&") < 0 || !CHAR_REF.test(value)) return value;
-  return value.replace(/&#x([\da-f]+);/gi, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/&#(\d+);/g, (_, dec) => String.fromCodePoint(parseInt(dec, 10))).replace(/&colon;/gi, ":").replace(/&tab;/gi, "	").replace(/&newline;/gi, "\n");
+  return value.replace(/&#x([\da-f]+);/gi, (_, hex) => decodeCodePoint(parseInt(hex, 16))).replace(/&#(\d+);/g, (_, dec) => decodeCodePoint(parseInt(dec, 10))).replace(/&colon;/gi, ":").replace(/&tab;/gi, "	").replace(/&newline;/gi, "\n");
 }
 function sanitizeUrl(href) {
   if (typeof href !== "string") return "";
@@ -578,9 +627,12 @@ var SVGRenderer = class {
   // Cache for generated gradient defs
   gradientCounter = 0;
   gradientCache = /* @__PURE__ */ new Map();
-  constructor(width, height) {
+  /** Root font size used to resolve `em`/`rem` font sizes (default 16px). */
+  rootFontSize;
+  constructor(width, height, options) {
     this.width = width;
     this.height = height;
+    this.rootFontSize = options?.rootFontSize ?? 16;
     installRendererDevTraps(this, "SVGRenderer");
   }
   clear() {
@@ -768,12 +820,22 @@ var SVGRenderer = class {
       `<path d="${dStr}" transform="${transformStr}" fill="none" stroke="${strokeVal}" stroke-width="${lineWidth}" stroke-opacity="${this.globalAlpha}" />`
     );
   }
+  /**
+   * Emit a `<text>` element for a text run.
+   *
+   * Font-size unit handling: `px` sizes pass through; `em` and `rem` are both
+   * scaled against the renderer's `rootFontSize` (constructor option, default
+   * 16 — matching the browser default, not necessarily the host page's root,
+   * so pass `{ rootFontSize }` when exporting against a non-default root).
+   * A percentage size (`'100% Inter'`) has no absolute meaning in this
+   * context and silently falls back to the default 16px font size.
+   */
   fillText(text, x, y, font, color) {
     this.flush();
     const sizeToken = parseFontSizeToken(font);
     let fontSize = sizeToken ? sizeToken.value : 16;
-    if (sizeToken && sizeToken.unit !== "px") {
-      fontSize = fontSize * 16;
+    if (sizeToken && (sizeToken.unit === "em" || sizeToken.unit === "rem")) {
+      fontSize = fontSize * this.rootFontSize;
     }
     const lowerFont = font.toLowerCase();
     const fontStyle = lowerFont.includes("italic") ? "italic" : lowerFont.includes("oblique") ? "oblique" : "normal";
@@ -955,11 +1017,11 @@ var SVGRenderer = class {
   }
   /**
    * SVGRenderer accumulates strings in memory; nothing external is allocated.
-   * Drop the buffers for GC and become idempotent.
+   * Drop the buffers for GC and become idempotent. `clear()` already empties
+   * the gradient cache, so no second clear is needed here.
    */
   dispose() {
     this.clear();
-    this.gradientCache.clear();
   }
 };
 
@@ -1331,13 +1393,22 @@ function createWebGLPointRenderer(canvas) {
     premultipliedAlpha: false
   });
   if (!gl) return null;
-  const pointProgram = link(gl, POINT_VERT, POINT_FRAG);
-  const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
-  const spriteProgram = link(gl, SPRITE_VERT, SPRITE_FRAG);
-  const msdfProgram = link(gl, SPRITE_VERT, MSDF_FRAG);
-  const circleQuadProgram = link(gl, SPRITE_VERT, CIRCLE_QUAD_FRAG);
-  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram || !circleQuadProgram)
+  const programs = [];
+  const linkTracked = (vsSrc, fsSrc) => {
+    const program = link(gl, vsSrc, fsSrc);
+    if (program) programs.push(program);
+    return program;
+  };
+  const pointProgram = linkTracked(POINT_VERT, POINT_FRAG);
+  const rectProgram = linkTracked(RECT_VERT, RECT_FRAG);
+  const spriteProgram = linkTracked(SPRITE_VERT, SPRITE_FRAG);
+  const msdfProgram = linkTracked(SPRITE_VERT, MSDF_FRAG);
+  const circleQuadProgram = linkTracked(SPRITE_VERT, CIRCLE_QUAD_FRAG);
+  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram || !circleQuadProgram) {
+    for (const program of programs) gl.deleteProgram(program);
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
     return null;
+  }
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   const pAPos = gl.getAttribLocation(pointProgram, "a_pos");
@@ -1517,6 +1588,7 @@ function createWebGLPointRenderer(canvas) {
     ensureQuadIndices(spriteCount);
     gl.drawElements(gl.TRIANGLES, spriteCount * INDICES_PER_QUAD, gl.UNSIGNED_INT, 0);
     frameDrawCalls++;
+    gl.bindVertexArray(null);
     spriteCount = 0;
   };
   const drawGlyphs = () => {
@@ -1795,6 +1867,7 @@ function createWebGLPointRenderer(canvas) {
 }
 
 // src/renderer/WebGPUParticleSystemManager.ts
+var recordComputePassScratch = new Float32Array(20);
 var COMPUTE_SHADER = `
 struct Particle {
   position: vec2<f32>,
@@ -1971,14 +2044,20 @@ var WebGPUParticleSystemManager = class {
   device;
   computePipeline = null;
   renderPipeline = null;
+  // Held so destroy() can release them — modules were previously unreachable
+  // after initPipelines and lived until context loss (#684).
+  computeModule = null;
+  renderModule = null;
   computeBindGroupLayout = null;
   renderBindGroupLayout = null;
   constructor(device) {
     this.device = device;
   }
   initPipelines(format) {
-    const computeModule = this.device.createShaderModule({ code: COMPUTE_SHADER });
-    const renderModule = this.device.createShaderModule({ code: RENDER_SHADER });
+    this.computeModule = this.device.createShaderModule({ code: COMPUTE_SHADER });
+    this.renderModule = this.device.createShaderModule({ code: RENDER_SHADER });
+    const computeModule = this.computeModule;
+    const renderModule = this.renderModule;
     this.computeBindGroupLayout = this.device.createBindGroupLayout({
       entries: [
         {
@@ -2037,6 +2116,8 @@ var WebGPUParticleSystemManager = class {
     });
   }
   setupEntityResources(entity) {
+    releaseGpuObject(entity.gpuStorageBuffer);
+    releaseGpuObject(entity.gpuUniformBuffer);
     const storageSize = entity.maxParticles * 32;
     entity.gpuStorageBuffer = this.device.createBuffer({
       size: storageSize,
@@ -2063,7 +2144,7 @@ var WebGPUParticleSystemManager = class {
   }
   recordComputePass(pass, entity, dt, mouseX, mouseY, width, height) {
     if (!this.computePipeline || !entity.computeBindGroup) return;
-    const uniformArray = new Float32Array(20);
+    const uniformArray = recordComputePassScratch;
     const color = parseColorToRGBA(entity.baseColor);
     let opacity = 1;
     for (let current = entity; current; current = current.parent) {
@@ -2107,12 +2188,23 @@ var WebGPUParticleSystemManager = class {
     pass.draw(6, entity.maxParticles);
   }
   destroy() {
+    releaseGpuObject(this.computePipeline);
+    releaseGpuObject(this.renderPipeline);
+    releaseGpuObject(this.computeModule);
+    releaseGpuObject(this.renderModule);
     this.computePipeline = null;
     this.renderPipeline = null;
+    this.computeModule = null;
+    this.renderModule = null;
     this.computeBindGroupLayout = null;
     this.renderBindGroupLayout = null;
   }
 };
+function releaseGpuObject(obj) {
+  if (obj && typeof obj.destroy === "function") {
+    obj.destroy();
+  }
+}
 
 // src/renderer/GlyphRasterAtlas.ts
 var HARD_MAX_SIZE = 8192;
@@ -2193,7 +2285,7 @@ var GlyphRasterAtlas = class {
    *   (headless, unrasterizable, or too large to pack).
    */
   get(font, color, glyph) {
-    const key = font + "\0" + color + "\0" + glyph;
+    const key = `${font.length}\0${font}${color.length}\0${color}${glyph.length}\0${glyph}`;
     const existing = this.slots.get(key);
     if (existing !== void 0) {
       if (existing) this._hits++;
@@ -2347,7 +2439,7 @@ var TextRasterCache = class {
    *   fall back to {@link IRenderer.fillText}).
    */
   get(font, color, text) {
-    const key = font + "\0" + color + "\0" + text;
+    const key = `${font.length}\0${font}${color.length}\0${color}${text.length}\0${text}`;
     const hit = this.cache.get(key);
     if (hit) {
       this._hits++;