@vectojs/core 1.11.3 → 1.12.0

package/dist/{chunk-ORCPCIJ7.js → chunk-BEUIB3U7.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3;// src/renderer/CanvasRenderer.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4;// src/renderer/CanvasRenderer.ts
 var TWO_PI = Math.PI * 2;
 function getDevicePixelRatio() {
   return typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
@@ -29,6 +29,8 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   __init2() {this.batchColor = ""}
   __init3() {this.batchAlpha = 1}
   __init4() {this.batchCount = 0}
+  __init5() {this._cachedFont = ""}
+  __init6() {this._cachedFill = ""}
   /**
    * @param canvas - The target canvas. Its backing store is resized to the
    *   logical size × devicePixelRatio.
@@ -38,7 +40,7 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
    *   set) so the canvas's own dimensions aren't clobbered by the window's.
    * @param maxDPR - See {@link maxDPR}.
    */
-  constructor(canvas, size, maxDPR) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
+  constructor(canvas, size, maxDPR) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);
     this.maxDPR = maxDPR;
     const dpr = this.effectiveDPR();
     this.width = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _ => _.width]), () => ( (typeof window !== "undefined" ? window.innerWidth : canvas.width || 0)));
@@ -99,6 +101,8 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   restore() {
     this.flush();
     this.ctx.restore();
+    this._cachedFont = "";
+    this._cachedFill = "";
   }
   /** @inheritdoc */
   translate(x, y) {
@@ -186,7 +190,10 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   fill(color) {
     this.flush();
-    this.ctx.fillStyle = color;
+    if (this._cachedFill !== color) {
+      this.ctx.fillStyle = color;
+      this._cachedFill = color;
+    }
     this.ctx.fill();
   }
   /** @inheritdoc */
@@ -201,8 +208,14 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
   /** @inheritdoc */
   fillText(text, x, y, font, color) {
     this.flush();
-    this.ctx.font = font;
-    this.ctx.fillStyle = color;
+    if (this._cachedFont !== font) {
+      this.ctx.font = font;
+      this._cachedFont = font;
+    }
+    if (this._cachedFill !== color) {
+      this.ctx.fillStyle = color;
+      this._cachedFill = color;
+    }
     this.ctx.fillText(text, x, y);
   }
   /** @inheritdoc */
@@ -223,6 +236,8 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
     this.batchColor = "";
     this.batchAlpha = 1;
     this.batchActive = false;
+    this._cachedFont = "";
+    this._cachedFill = "";
   }
 }, _class.__initStatic(), _class);
 
@@ -310,39 +325,39 @@ function fontFamilyFromShorthand(font, sizeToken) {
 var SVGRenderer = (_class2 = class {
   
   
-  __init5() {this.buffer = []}
-  __init6() {this.defsBuffer = []}
-  __init7() {this.currentPath = []}
+  __init7() {this.buffer = []}
+  __init8() {this.defsBuffer = []}
+  __init9() {this.currentPath = []}
   // Inline matrix states (3x3 representation)
   // [a, b, c, d, e, f] corresponding to:
   // | a c e |
   // | b d f |
   // | 0 0 1 |
-  __init8() {this.mStack = []}
-  __init9() {this.ma = 1}
-  __init10() {this.mb = 0}
-  __init11() {this.mc = 0}
-  __init12() {this.md = 1}
-  __init13() {this.me = 0}
-  __init14() {this.mf = 0}
+  __init10() {this.mStack = []}
+  __init11() {this.ma = 1}
+  __init12() {this.mb = 0}
+  __init13() {this.mc = 0}
+  __init14() {this.md = 1}
+  __init15() {this.me = 0}
+  __init16() {this.mf = 0}
   // Alpha stack
-  __init15() {this.alphaStack = []}
-  __init16() {this.globalAlpha = 1}
+  __init17() {this.alphaStack = []}
+  __init18() {this.globalAlpha = 1}
   // Clipping stack
-  __init17() {this.clipDepthStack = []}
-  __init18() {this.clipDepth = 0}
-  __init19() {this.clipCounter = 0}
+  __init19() {this.clipDepthStack = []}
+  __init20() {this.clipDepth = 0}
+  __init21() {this.clipCounter = 0}
   // uniquely identifies clipPaths
   // Batch circles states (local coordinates)
-  __init20() {this.batchCircles = []}
-  __init21() {this.batchMatrix = [1, 0, 0, 1, 0, 0]}
-  __init22() {this.batchColor = ""}
-  __init23() {this.batchAlpha = 1}
-  __init24() {this.batchActive = false}
+  __init22() {this.batchCircles = []}
+  __init23() {this.batchMatrix = [1, 0, 0, 1, 0, 0]}
+  __init24() {this.batchColor = ""}
+  __init25() {this.batchAlpha = 1}
+  __init26() {this.batchActive = false}
   // Cache for generated gradient defs
-  __init25() {this.gradientCounter = 0}
-  __init26() {this.gradientCache = /* @__PURE__ */ new Map()}
-  constructor(width, height) {;_class2.prototype.__init5.call(this);_class2.prototype.__init6.call(this);_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);
+  __init27() {this.gradientCounter = 0}
+  __init28() {this.gradientCache = /* @__PURE__ */ new Map()}
+  constructor(width, height) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);
     this.width = width;
     this.height = height;
   }
@@ -1486,11 +1501,11 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
 `;
 var WebGPUParticleSystemManager = (_class3 = class {
   
-  __init27() {this.computePipeline = null}
-  __init28() {this.renderPipeline = null}
-  __init29() {this.computeBindGroupLayout = null}
-  __init30() {this.renderBindGroupLayout = null}
-  constructor(device) {;_class3.prototype.__init27.call(this);_class3.prototype.__init28.call(this);_class3.prototype.__init29.call(this);_class3.prototype.__init30.call(this);
+  __init29() {this.computePipeline = null}
+  __init30() {this.renderPipeline = null}
+  __init31() {this.computeBindGroupLayout = null}
+  __init32() {this.renderBindGroupLayout = null}
+  constructor(device) {;_class3.prototype.__init29.call(this);_class3.prototype.__init30.call(this);_class3.prototype.__init31.call(this);_class3.prototype.__init32.call(this);
     this.device = device;
   }
   initPipelines(format) {
@@ -1631,6 +1646,92 @@ var WebGPUParticleSystemManager = (_class3 = class {
   }
 }, _class3);
 
+// src/renderer/TextRasterCache.ts
+var TextRasterCache = (_class4 = class {
+  __init33() {this.cache = /* @__PURE__ */ new Map()}
+  
+  
+  __init34() {this.scratchCtx = null}
+  __init35() {this._hits = 0}
+  __init36() {this._misses = 0}
+  constructor(options = {}) {;_class4.prototype.__init33.call(this);_class4.prototype.__init34.call(this);_class4.prototype.__init35.call(this);_class4.prototype.__init36.call(this);
+    this.maxEntries = Math.max(1, _nullishCoalesce(options.maxEntries, () => ( 4096)));
+    this.dpr = Math.max(1, _nullishCoalesce(options.dpr, () => ( 1)));
+  }
+  /** Live instrumentation snapshot. */
+  get stats() {
+    return { hits: this._hits, misses: this._misses, size: this.cache.size };
+  }
+  measureCtx() {
+    if (!this.scratchCtx) {
+      if (typeof document === "undefined") return null;
+      this.scratchCtx = document.createElement("canvas").getContext("2d");
+    }
+    return this.scratchCtx;
+  }
+  /**
+   * Return the cached raster for a text run, rasterizing it on first request.
+   *
+   * @param font - Full CSS `font` shorthand, used for both measuring and painting.
+   * @param color - CSS color baked into the raster.
+   * @param text - The run to rasterize (may contain CJK / emoji).
+   * @returns The raster, or `null` in a non-DOM/headless context (caller should
+   *   fall back to {@link IRenderer.fillText}).
+   */
+  get(font, color, text) {
+    const key = font + "\0" + color + "\0" + text;
+    const hit = this.cache.get(key);
+    if (hit) {
+      this._hits++;
+      return hit;
+    }
+    this._misses++;
+    const m = this.measureCtx();
+    if (!m) return null;
+    m.font = font;
+    const metrics = m.measureText(text);
+    const approx = metrics.width || text.length * 8;
+    const ascent = metrics.actualBoundingBoxAscent || metrics.fontBoundingBoxAscent || approx * 0.8;
+    const descent = metrics.actualBoundingBoxDescent || metrics.fontBoundingBoxDescent || approx * 0.2;
+    const left = metrics.actualBoundingBoxLeft || 0;
+    const right = metrics.actualBoundingBoxRight || metrics.width;
+    const pad = 2;
+    const offsetX = Math.ceil(left) + pad;
+    const offsetY = Math.ceil(ascent) + pad;
+    const width = offsetX + Math.ceil(right) + pad;
+    const height = offsetY + Math.ceil(descent) + pad;
+    if (typeof document === "undefined") return null;
+    const canvas = document.createElement("canvas");
+    const dpr = this.dpr;
+    canvas.width = Math.max(1, Math.ceil(width * dpr));
+    canvas.height = Math.max(1, Math.ceil(height * dpr));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    if (dpr !== 1) ctx.scale(dpr, dpr);
+    ctx.font = font;
+    ctx.textBaseline = "alphabetic";
+    ctx.fillStyle = color;
+    ctx.fillText(text, offsetX, offsetY);
+    const raster = { canvas, width, height, offsetX, offsetY };
+    if (this.cache.size >= this.maxEntries) {
+      let toDrop = Math.ceil(this.maxEntries * 0.1);
+      for (const k of this.cache.keys()) {
+        this.cache.delete(k);
+        if (--toDrop <= 0) break;
+      }
+    }
+    this.cache.set(key, raster);
+    return raster;
+  }
+  /** Drop all cached rasters and reset instrumentation. */
+  clear() {
+    this.cache.clear();
+    this._hits = 0;
+    this._misses = 0;
+  }
+}, _class4);
+
+
 
 
 
@@ -1639,4 +1740,4 @@ var WebGPUParticleSystemManager = (_class3 = class {
 
 
 
-exports.CanvasRenderer = CanvasRenderer; exports.sanitizeUrl = sanitizeUrl; exports.isSafeUrl = isSafeUrl; exports.SVGRenderer = SVGRenderer; exports.parseColorToRGBA = parseColorToRGBA; exports.createWebGLPointRenderer = createWebGLPointRenderer; exports.WebGPUParticleSystemManager = WebGPUParticleSystemManager;
+exports.CanvasRenderer = CanvasRenderer; exports.sanitizeUrl = sanitizeUrl; exports.isSafeUrl = isSafeUrl; exports.SVGRenderer = SVGRenderer; exports.parseColorToRGBA = parseColorToRGBA; exports.createWebGLPointRenderer = createWebGLPointRenderer; exports.WebGPUParticleSystemManager = WebGPUParticleSystemManager; exports.TextRasterCache = TextRasterCache;

package/dist/{chunk-XZEPHCDZ.mjs → chunk-L5BCKFQE.mjs}

@@ -29,6 +29,8 @@ var CanvasRenderer = class _CanvasRenderer {
   batchColor = "";
   batchAlpha = 1;
   batchCount = 0;
+  _cachedFont = "";
+  _cachedFill = "";
   /**
    * @param canvas - The target canvas. Its backing store is resized to the
    *   logical size × devicePixelRatio.
@@ -99,6 +101,8 @@ var CanvasRenderer = class _CanvasRenderer {
   restore() {
     this.flush();
     this.ctx.restore();
+    this._cachedFont = "";
+    this._cachedFill = "";
   }
   /** @inheritdoc */
   translate(x, y) {
@@ -186,7 +190,10 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   fill(color) {
     this.flush();
-    this.ctx.fillStyle = color;
+    if (this._cachedFill !== color) {
+      this.ctx.fillStyle = color;
+      this._cachedFill = color;
+    }
     this.ctx.fill();
   }
   /** @inheritdoc */
@@ -201,8 +208,14 @@ var CanvasRenderer = class _CanvasRenderer {
   /** @inheritdoc */
   fillText(text, x, y, font, color) {
     this.flush();
-    this.ctx.font = font;
-    this.ctx.fillStyle = color;
+    if (this._cachedFont !== font) {
+      this.ctx.font = font;
+      this._cachedFont = font;
+    }
+    if (this._cachedFill !== color) {
+      this.ctx.fillStyle = color;
+      this._cachedFill = color;
+    }
     this.ctx.fillText(text, x, y);
   }
   /** @inheritdoc */
@@ -223,6 +236,8 @@ var CanvasRenderer = class _CanvasRenderer {
     this.batchColor = "";
     this.batchAlpha = 1;
     this.batchActive = false;
+    this._cachedFont = "";
+    this._cachedFill = "";
   }
 };
 
@@ -1631,6 +1646,91 @@ var WebGPUParticleSystemManager = class {
   }
 };
 
+// src/renderer/TextRasterCache.ts
+var TextRasterCache = class {
+  cache = /* @__PURE__ */ new Map();
+  maxEntries;
+  dpr;
+  scratchCtx = null;
+  _hits = 0;
+  _misses = 0;
+  constructor(options = {}) {
+    this.maxEntries = Math.max(1, options.maxEntries ?? 4096);
+    this.dpr = Math.max(1, options.dpr ?? 1);
+  }
+  /** Live instrumentation snapshot. */
+  get stats() {
+    return { hits: this._hits, misses: this._misses, size: this.cache.size };
+  }
+  measureCtx() {
+    if (!this.scratchCtx) {
+      if (typeof document === "undefined") return null;
+      this.scratchCtx = document.createElement("canvas").getContext("2d");
+    }
+    return this.scratchCtx;
+  }
+  /**
+   * Return the cached raster for a text run, rasterizing it on first request.
+   *
+   * @param font - Full CSS `font` shorthand, used for both measuring and painting.
+   * @param color - CSS color baked into the raster.
+   * @param text - The run to rasterize (may contain CJK / emoji).
+   * @returns The raster, or `null` in a non-DOM/headless context (caller should
+   *   fall back to {@link IRenderer.fillText}).
+   */
+  get(font, color, text) {
+    const key = font + "\0" + color + "\0" + text;
+    const hit = this.cache.get(key);
+    if (hit) {
+      this._hits++;
+      return hit;
+    }
+    this._misses++;
+    const m = this.measureCtx();
+    if (!m) return null;
+    m.font = font;
+    const metrics = m.measureText(text);
+    const approx = metrics.width || text.length * 8;
+    const ascent = metrics.actualBoundingBoxAscent || metrics.fontBoundingBoxAscent || approx * 0.8;
+    const descent = metrics.actualBoundingBoxDescent || metrics.fontBoundingBoxDescent || approx * 0.2;
+    const left = metrics.actualBoundingBoxLeft || 0;
+    const right = metrics.actualBoundingBoxRight || metrics.width;
+    const pad = 2;
+    const offsetX = Math.ceil(left) + pad;
+    const offsetY = Math.ceil(ascent) + pad;
+    const width = offsetX + Math.ceil(right) + pad;
+    const height = offsetY + Math.ceil(descent) + pad;
+    if (typeof document === "undefined") return null;
+    const canvas = document.createElement("canvas");
+    const dpr = this.dpr;
+    canvas.width = Math.max(1, Math.ceil(width * dpr));
+    canvas.height = Math.max(1, Math.ceil(height * dpr));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    if (dpr !== 1) ctx.scale(dpr, dpr);
+    ctx.font = font;
+    ctx.textBaseline = "alphabetic";
+    ctx.fillStyle = color;
+    ctx.fillText(text, offsetX, offsetY);
+    const raster = { canvas, width, height, offsetX, offsetY };
+    if (this.cache.size >= this.maxEntries) {
+      let toDrop = Math.ceil(this.maxEntries * 0.1);
+      for (const k of this.cache.keys()) {
+        this.cache.delete(k);
+        if (--toDrop <= 0) break;
+      }
+    }
+    this.cache.set(key, raster);
+    return raster;
+  }
+  /** Drop all cached rasters and reset instrumentation. */
+  clear() {
+    this.cache.clear();
+    this._hits = 0;
+    this._misses = 0;
+  }
+};
+
 export {
   CanvasRenderer,
   sanitizeUrl,
@@ -1638,5 +1738,6 @@ export {
   SVGRenderer,
   parseColorToRGBA,
   createWebGLPointRenderer,
-  WebGPUParticleSystemManager
+  WebGPUParticleSystemManager,
+  TextRasterCache
 };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './renderer/WebGLPointRenderer';
 export * from './renderer/WebGPUParticleSystemManager';
 export * from './renderer/colorParse';
 export * from './renderer/url';
+export * from './renderer/TextRasterCache';
 export * from './tree/Entity';
 export * from './tree/Scene';
 export * from './components/TextEntity';

package/dist/index.js

@@ -12,7 +12,8 @@ var _chunkBA5HUUDFjs = require('./chunk-BA5HUUDF.js');
 
 
 
-var _chunkORCPCIJ7js = require('./chunk-ORCPCIJ7.js');
+
+var _chunkBEUIB3U7js = require('./chunk-BEUIB3U7.js');
 
 
 
@@ -878,7 +879,7 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkORCPCIJ7js.CanvasRenderer)(
+      this.renderer = new (0, _chunkBEUIB3U7js.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0,
         this.maxDPR
@@ -1521,7 +1522,7 @@ var Scene = (_class2 = class _Scene {
         this.syncOptionalAttribute(
           el,
           "href",
-          attrs.href === void 0 ? void 0 : _chunkORCPCIJ7js.sanitizeUrl.call(void 0, attrs.href)
+          attrs.href === void 0 ? void 0 : _chunkBEUIB3U7js.sanitizeUrl.call(void 0, attrs.href)
         );
         this.syncOptionalAttribute(el, "target", attrs.target);
       }
@@ -2550,7 +2551,7 @@ var Scene = (_class2 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkORCPCIJ7js.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkBEUIB3U7js.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -3567,8 +3568,9 @@ var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkORCPCIJ7js.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkORCPCIJ7js.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkBEUIB3U7js.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkBEUIB3U7js.WebGPUParticleSystemManager);
+
 
 
 
@@ -3619,4 +3621,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkORCPCIJ7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk2Z23LTH3js.Easing; exports.Entity = _chunk2Z23LTH3js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunk2Z23LTH3js.MSDFFont; exports.MSDFTextEntity = _chunk2Z23LTH3js.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 = _chunk2Z23LTH3js.SVGEntity; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk2Z23LTH3js.SpringDriver; exports.SpringPhysics = _chunk2Z23LTH3js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunk2Z23LTH3js.TweenDriver; exports.VectoJSEvent = _chunk2Z23LTH3js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunk2Z23LTH3js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunk2Z23LTH3js.cssLineBoxBaseline; exports.isSafeUrl = _chunkORCPCIJ7js.isSafeUrl; exports.isTweenConfig = _chunk2Z23LTH3js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunk2Z23LTH3js.prepareContentGrid; exports.sanitizeUrl = _chunkORCPCIJ7js.sanitizeUrl;
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkBEUIB3U7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk2Z23LTH3js.Easing; exports.Entity = _chunk2Z23LTH3js.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunk2Z23LTH3js.MSDFFont; exports.MSDFTextEntity = _chunk2Z23LTH3js.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 = _chunk2Z23LTH3js.SVGEntity; exports.SVGRenderer = _chunkBEUIB3U7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk2Z23LTH3js.SpringDriver; exports.SpringPhysics = _chunk2Z23LTH3js.SpringPhysics; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkBEUIB3U7js.TextRasterCache; exports.TweenDriver = _chunk2Z23LTH3js.TweenDriver; exports.VectoJSEvent = _chunk2Z23LTH3js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBEUIB3U7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunk2Z23LTH3js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBEUIB3U7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunk2Z23LTH3js.cssLineBoxBaseline; exports.isSafeUrl = _chunkBEUIB3U7js.isSafeUrl; exports.isTweenConfig = _chunk2Z23LTH3js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBEUIB3U7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunk2Z23LTH3js.prepareContentGrid; exports.sanitizeUrl = _chunkBEUIB3U7js.sanitizeUrl;

package/dist/index.mjs

@@ -7,12 +7,13 @@ import {
 import {
   CanvasRenderer,
   SVGRenderer,
+  TextRasterCache,
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-XZEPHCDZ.mjs";
+} from "./chunk-L5BCKFQE.mjs";
 import {
   Easing,
   Entity,
@@ -3604,6 +3605,7 @@ export {
   SpringDriver,
   SpringPhysics,
   TextEntity,
+  TextRasterCache,
   TweenDriver,
   VectoJSEvent,
   WebGPUParticleSystemManager,

package/dist/renderer/CanvasRenderer.d.ts

@@ -23,6 +23,8 @@ export declare class CanvasRenderer implements IRenderer {
     private batchColor;
     private batchAlpha;
     private batchCount;
+    private _cachedFont;
+    private _cachedFill;
     /**
      * @param canvas - The target canvas. Its backing store is resized to the
      *   logical size × devicePixelRatio.

package/dist/renderer/TextRasterCache.d.ts

@@ -0,0 +1,105 @@
+/**
+ * A cache of pre-rasterized text runs, so a scene that draws the *same short
+ * strings* thousands of times per frame pays the Canvas2D text cost once per
+ * unique run instead of once per draw.
+ *
+ * ## Why
+ *
+ * `ctx.fillText()` is deceptively expensive at scale: each call re-shapes the
+ * string, re-parses the CSS `fillStyle` color, and rasterizes glyphs on the CPU
+ * main thread. When a view draws thousands of independently-positioned text
+ * runs per frame (danmaku/barrage, chat/log tails, data-grid cells, particle
+ * labels), that per-call shaping dominates the frame — a CPU profile shows the
+ * main thread pegged in native (`(program)`) code while the GPU sits idle,
+ * because the GPU can't be fed fast enough.
+ *
+ * This cache rasterizes each distinct `(font, color, text)` run to a small
+ * offscreen canvas exactly once. Every subsequent frame the caller blits it
+ * with a single {@link IRenderer.drawImage}, turning CPU text shaping into a
+ * GPU-friendly bitmap copy. When the set of distinct runs is bounded (a fixed
+ * phrase library, a small palette, a handful of font sizes) the steady-state
+ * hit rate approaches 100%; an insertion-order eviction cap bounds memory
+ * against unbounded (e.g. user-typed) content.
+ *
+ * It does **not** replace `fillText` for large or highly-varied text — the win
+ * comes from *reuse*. Emoji and color glyphs rasterize fine (they're baked into
+ * the bitmap), but a run that's only ever drawn once is pure overhead.
+ *
+ * ## Use
+ *
+ * ```ts
+ * const cache = new TextRasterCache();
+ * // in the frame loop, per text run:
+ * const r = cache.get('600 24px system-ui', '#38bdf8', label);
+ * if (r) renderer.drawImage(r.canvas, x - r.offsetX, baselineY - r.offsetY, r.width, r.height);
+ * else renderer.fillText(label, x, baselineY, '600 24px system-ui', '#38bdf8'); // headless fallback
+ * ```
+ *
+ * The blit position mirrors the `fillText` baseline: pass the glyph origin `x`
+ * and the text baseline `y`, then subtract the raster's `offsetX`/`offsetY`.
+ */
+/** A rasterized text run plus the offsets needed to blit it at a baseline. */
+export interface TextRaster {
+    /** The offscreen canvas holding the rasterized run. */
+    canvas: HTMLCanvasElement;
+    /** Blit destination width in CSS pixels. */
+    width: number;
+    /** Blit destination height in CSS pixels. */
+    height: number;
+    /** Left inset (CSS px) of the glyph origin inside the canvas. */
+    offsetX: number;
+    /** Distance (CSS px) from the canvas top down to the text baseline. */
+    offsetY: number;
+}
+/** Instrumentation counters for the cache (e.g. to surface a HUD hit rate). */
+export interface TextRasterStats {
+    /** Requests served from an existing raster. */
+    hits: number;
+    /** Requests that had to rasterize a new run. */
+    misses: number;
+    /** Current number of cached rasters. */
+    size: number;
+}
+/** Options for {@link TextRasterCache}. */
+export interface TextRasterCacheOptions {
+    /**
+     * Hard cap on cached rasters. On overflow the oldest ~10% (insertion order,
+     * which `Map` preserves) are evicted; evicted runs are re-rasterized cheaply
+     * on their next miss. Default `4096`.
+     */
+    maxEntries?: number;
+    /**
+     * Device-pixel-ratio the rasters are rendered at. `> 1` keeps text crisp on
+     * HiDPI displays at the cost of larger bitmaps; the returned `width`/`height`
+     * stay in CSS pixels so the blit is unchanged. Default `1`.
+     */
+    dpr?: number;
+}
+/**
+ * An isolated text-raster cache. Create one per renderer/scene (instances don't
+ * share state, so multiple scenes or an SSR pass never collide).
+ */
+export declare class TextRasterCache {
+    private readonly cache;
+    private readonly maxEntries;
+    private readonly dpr;
+    private scratchCtx;
+    private _hits;
+    private _misses;
+    constructor(options?: TextRasterCacheOptions);
+    /** Live instrumentation snapshot. */
+    get stats(): TextRasterStats;
+    private measureCtx;
+    /**
+     * Return the cached raster for a text run, rasterizing it on first request.
+     *
+     * @param font - Full CSS `font` shorthand, used for both measuring and painting.
+     * @param color - CSS color baked into the raster.
+     * @param text - The run to rasterize (may contain CJK / emoji).
+     * @returns The raster, or `null` in a non-DOM/headless context (caller should
+     *   fall back to {@link IRenderer.fillText}).
+     */
+    get(font: string, color: string, text: string): TextRaster | null;
+    /** Drop all cached rasters and reset instrumentation. */
+    clear(): void;
+}

package/dist/renderer/index.d.ts

@@ -4,3 +4,4 @@ export * from './WebGLPointRenderer';
 export * from './WebGPUParticleSystemManager';
 export * from './IRenderer';
 export * from './colorParse';
+export * from './TextRasterCache';

package/dist/renderer.js

@@ -4,11 +4,13 @@
 
 
 
-var _chunkORCPCIJ7js = require('./chunk-ORCPCIJ7.js');
 
+var _chunkBEUIB3U7js = require('./chunk-BEUIB3U7.js');
 
 
 
 
 
-exports.CanvasRenderer = _chunkORCPCIJ7js.CanvasRenderer; exports.SVGRenderer = _chunkORCPCIJ7js.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkORCPCIJ7js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkORCPCIJ7js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkORCPCIJ7js.parseColorToRGBA;
+
+
+exports.CanvasRenderer = _chunkBEUIB3U7js.CanvasRenderer; exports.SVGRenderer = _chunkBEUIB3U7js.SVGRenderer; exports.TextRasterCache = _chunkBEUIB3U7js.TextRasterCache; exports.WebGPUParticleSystemManager = _chunkBEUIB3U7js.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkBEUIB3U7js.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkBEUIB3U7js.parseColorToRGBA;

package/dist/renderer.mjs

@@ -1,13 +1,15 @@
 import {
   CanvasRenderer,
   SVGRenderer,
+  TextRasterCache,
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-XZEPHCDZ.mjs";
+} from "./chunk-L5BCKFQE.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,
+  TextRasterCache,
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA

package/package.json

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