@vectojs/core 0.2.3 → 0.2.5

package/README.md

@@ -1,55 +1,132 @@
 # @vectojs/core
 
-> The Canvas-native rendering engine behind **VectoJS** — an entity scene graph and Virtual Math
-> Tree with an accessibility/automation projection layer.
+> Scene, layout, interaction, text, rendering, and semantic projection for canvas-native interfaces.
 
-Part of the [VectoJS](https://github.com/vectojs/vectojs) ecosystem.
+[![npm](https://img.shields.io/npm/v/@vectojs/core?color=22d3ee)](https://www.npmjs.com/package/@vectojs/core)
+[![CI](https://github.com/vectojs/vectojs/actions/workflows/ci.yml/badge.svg)](https://github.com/vectojs/vectojs/actions/workflows/ci.yml)
+[![MIT](https://img.shields.io/badge/license-MIT-6366f1.svg)](https://github.com/vectojs/vectojs/blob/main/LICENSE)
 
-## What it does
+`@vectojs/core` is the runtime beneath VectoJS. It owns the retained `Scene`/`Entity` tree, affine
+transforms, render scheduling, layout, text flow, spatial hit-testing, event propagation, renderer
+backends, and the accessibility/automation projection layer.
 
-`@vectojs/core` renders a whole UI onto one `<canvas>`: layout, hit-testing, animation and
-physics are pure math on a Virtual Math Tree, dispatched to a Canvas 2D (or WebGL2) renderer —
-**no per-element DOM, no reflow, no style recalc**. Interactive entities project a real,
-transparent DOM node through the **`a11yRoot`** shadow layer, so a pure-canvas page stays
-accessible and drivable by assistive tech and AI agents.
+[Core guide](https://vectojs.xuepoo.xyz/learn/core-scene/) ·
+[API reference](https://vectojs.xuepoo.xyz/reference/core-api/) ·
+[Main repository](https://github.com/vectojs/vectojs)
 
-Includes: `Scene` (render loop + a11y sync), `Entity` (scene-graph base), `LayoutEngine` (Intl.Segmenter
-with a cold/hot `prepare`/`layoutPrepared` split), `SpatialHashGrid`, `LayoutResultBuffer`
-(reusable typed storage), `SplineEntity` (native vectomancy math-curve rendering + curve-accurate hit-testing),
-`CanvasRenderer`, and a `WebGLPointRenderer` point/rect batch layer.
+## Install
 
-## Performance
+```bash
+bun add @vectojs/core
+```
+
+## Minimal scene
 
-See the [main README](https://github.com/vectojs/vectojs#testing--quality) for reproducible
-workloads (`bun run benchmark` / `bun run compare:dom`). Headline levers include viewport culling,
-on-demand redraw, draw-call batching, a WebGL2 point layer, and a cold/hot text layout split.
-Results are machine- and workload-dependent.
+```ts
+import { Entity, type IRenderer, Scene } from '@vectojs/core';
 
-## Quick Start
+class Dot extends Entity {
+  constructor() {
+    super();
+    this.width = 48;
+    this.height = 48;
+    this.interactive = true;
+    this.on('click', () => this.animate({ scaleX: 1.25, scaleY: 1.25 }, 120));
+  }
 
-```typescript
-import { Scene, Entity, IRenderer } from '@vectojs/core';
+  isPointInside(globalX: number, globalY: number): boolean {
+    const local = this.worldToLocal(globalX, globalY);
+    return !!local && Math.hypot(local.x - 24, local.y - 24) <= 24;
+  }
 
-class CircleEntity extends Entity {
-  isPointInside(x: number, y: number) {
-    return Math.hypot(x - this.x, y - this.y) < 50;
+  getA11yAttributes() {
+    return { tag: 'button' as const, role: 'button', label: 'Animated dot' };
   }
-  render(r: IRenderer) {
-    r.beginPath();
-    r.arc(0, 0, 50, 0, Math.PI * 2);
-    r.fill('#38bdf8');
+
+  render(renderer: IRenderer): void {
+    renderer.beginPath();
+    renderer.arc(24, 24, 24, 0, Math.PI * 2);
+    renderer.fill('#22d3ee');
   }
 }
 
-const canvas = document.querySelector('canvas')!;
+const canvas = document.querySelector<HTMLCanvasElement>('canvas')!;
 const scene = new Scene(canvas);
-scene.add(new CircleEntity().setPosition(100, 100));
+scene.renderMode = 'onDemand';
+scene.add(new Dot().setPosition(80, 80));
+scene.start();
+```
+
+## Runtime building blocks
+
+| Area        | Main APIs                                       | Purpose                                                                |
+| ----------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| Scene graph | `Scene`, `Entity`                               | ownership, transforms, lifecycle, update/render traversal              |
+| Layout      | `LayoutEngine`, layout subpath                  | prepared text/rich-text layout, wrapping, exclusions, reusable buffers |
+| Interaction | entity events, `SpatialHashGrid`                | hit-testing and DOM-like capture/bubble dispatch                       |
+| Text        | `TextEntity`, `MSDFTextEntity`, `SplineEntity`  | Canvas text, GPU text, and mathematical curves                         |
+| Rendering   | `IRenderer`, `CanvasRenderer`, renderer subpath | backend-neutral drawing contract and concrete renderers                |
+| GPU paths   | WebGL point batching, WebGPU particles          | high-volume points/rects and compute-driven particles                  |
+| Semantics   | `A11yAttributes`, Scene projection              | role/name/state, native inputs, screen readers, Playwright/agents      |
+| Animation   | `animate`, springs, transitions, `Scene.step()` | real-time or deterministic fixed-step motion                           |
+
+## Scene lifecycle
+
+```ts
+const scene = new Scene(canvas, {
+  maxFPS: 60,
+  pointBackend: 'canvas', // or 'webgl'
+  particleBackend: 'cpu', // or 'webgpu' when supported
+});
+scene.renderMode = 'onDemand'; // redraw only when dirty
+
+scene.resize(width, height); // logical CSS pixels
+scene.markDirty();
 scene.start();
+scene.stop();
+scene.step(1000 / 60); // deterministic single step
+scene.destroy(); // release renderers, workers, observers, and semantic DOM
 ```
 
-For high-level accessible components (Button, Input, Card…), see
-[`@vectojs/ui`](https://www.npmjs.com/package/@vectojs/ui).
+Always call `destroy()` when a framework component unmounts. A `Scene` owns browser observers,
+renderer resources, layout work, and projected DOM nodes.
+
+## Package entry points
+
+```ts
+import { Scene, Entity } from '@vectojs/core';
+import { LayoutEngine } from '@vectojs/core/layout';
+import type { IRenderer } from '@vectojs/core/renderer';
+import { TextEntity } from '@vectojs/core/text';
+```
+
+Both ESM and CommonJS outputs are published with TypeScript declarations.
+
+## Accessibility and automation
+
+Canvas pixels have no semantics. Interactive entities can implement `getA11yAttributes()`; the
+Scene projects transparent DOM nodes over their world-space bounds and forwards native input back
+into the VectoJS event system.
+
+This projection is intentionally thin. Applications still own accessible names, keyboard behavior,
+focus order, contrast, and correct control semantics. See the
+[accessibility guide](https://vectojs.xuepoo.xyz/learn/accessibility/).
+
+## Performance model
+
+Useful levers include on-demand rendering, viewport culling, spatial hashing, prepared text layout,
+typed reusable buffers, batched WebGL points, and optional WebGPU particle compute. None makes every
+workload allocation-free or GPU-bound; profile the renderer and entity types used by your app.
+
+Run the repository benchmarks with `bun run benchmark`, `bun run compare:dom`, and
+`bun run compare`.
+
+## Related packages
+
+- [`@vectojs/ui`](https://github.com/vectojs/vectojs/tree/main/packages/ui) — high-level accessible components
+- [`@vectojs/three`](https://github.com/vectojs/vectojs/tree/main/packages/three) — Three.js/WebXR projection and raycast routing
+- [`@vectojs/video-exporter`](https://github.com/vectojs/vectojs/tree/main/packages/video-exporter) — deterministic H.264 capture
 
 ## License
 
-MIT © 2026 Xuepoo
+[MIT](https://github.com/vectojs/vectojs/blob/main/LICENSE) © 2026 Xuepoo

package/dist/{chunk-VVOQNUBK.js → chunk-5KLB6BEZ.js}

@@ -1,7 +1,7 @@
 "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 _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 // src/layout/LayoutEngine.ts
 function computeLineSegments(top, bottom, maxWidth, exclusions) {
@@ -79,6 +79,12 @@ var LayoutEngine = (_class = class {
     if (this.measurer) return this.measurer.measure(char, fontSize);
     return fontSize * 0.5;
   }
+  glyphKeyFor(grapheme, fontAtlas) {
+    if (fontAtlas[grapheme]) return grapheme;
+    const firstCodePoint = Array.from(grapheme)[0];
+    if (firstCodePoint && fontAtlas[firstCodePoint]) return firstCodePoint;
+    return grapheme;
+  }
   getGraphemes(word) {
     const cached = this.graphemeCache.get(word);
     if (cached) return cached;
@@ -142,8 +148,8 @@ var LayoutEngine = (_class = class {
         offset += paragraph.length + 1;
         continue;
       }
-      const { shapedText, indexMap } = _chunk6I53LI3Zjs.ArabicShaper.shapeArabic(paragraph);
-      const levels = _chunk6I53LI3Zjs.BidiResolver.resolveLevels(shapedText);
+      const { shapedText, indexMap } = _chunk76NMTLYLjs.ArabicShaper.shapeArabic(paragraph);
+      const levels = _chunk76NMTLYLjs.BidiResolver.resolveLevels(shapedText);
       const words = [];
       let shapedCharIdx = 0;
       let pFallback = false;
@@ -158,25 +164,20 @@ var LayoutEngine = (_class = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, fontSize);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, fontSize);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -192,7 +193,7 @@ var LayoutEngine = (_class = class {
         words,
         isEmpty: false,
         fallbackToCanvas: pFallback || void 0,
-        baseLevel: _chunk6I53LI3Zjs.BidiResolver.getBaseLevel(shapedText)
+        baseLevel: _chunk76NMTLYLjs.BidiResolver.getBaseLevel(shapedText)
       };
       if (this.paragraphCache.size > 1e3) this.paragraphCache.clear();
       this.paragraphCache.set(key, prepared);
@@ -264,8 +265,8 @@ var LayoutEngine = (_class = class {
         offset += paragraph.length + 1;
         continue;
       }
-      const { shapedText, indexMap } = _chunk6I53LI3Zjs.ArabicShaper.shapeArabic(paragraph);
-      const levels = _chunk6I53LI3Zjs.BidiResolver.resolveLevels(shapedText);
+      const { shapedText, indexMap } = _chunk76NMTLYLjs.ArabicShaper.shapeArabic(paragraph);
+      const levels = _chunk76NMTLYLjs.BidiResolver.resolveLevels(shapedText);
       const words = [];
       let shapedCharIdx = 0;
       let pFallback = false;
@@ -280,28 +281,23 @@ var LayoutEngine = (_class = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
           const style = styleAt[offset + rawStart];
           const gfs = _nullishCoalesce(_optionalChain([style, 'optionalAccess', _ => _.fontSize]), () => ( baseFontSize));
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, gfs);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, gfs);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             style,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -317,7 +313,7 @@ var LayoutEngine = (_class = class {
         words,
         isEmpty: false,
         fallbackToCanvas: pFallback || void 0,
-        baseLevel: _chunk6I53LI3Zjs.BidiResolver.getBaseLevel(shapedText)
+        baseLevel: _chunk76NMTLYLjs.BidiResolver.getBaseLevel(shapedText)
       };
       if (this.richParagraphCache.size > 1e3) this.richParagraphCache.clear();
       this.richParagraphCache.set(key, prepared);
@@ -372,7 +368,7 @@ var LayoutEngine = (_class = class {
       }
       for (const run of runs) {
         const runStartX = run[0].x;
-        _chunk6I53LI3Zjs.BidiResolver.reorderVisual(run, paragraphBaseLevel);
+        _chunk76NMTLYLjs.BidiResolver.reorderVisual(run, paragraphBaseLevel);
         let x = runStartX;
         for (const node of run) {
           node.x = x;

package/dist/{chunk-6I53LI3Z.js → chunk-76NMTLYL.js}

@@ -296,7 +296,7 @@ var BidiResolver = class _BidiResolver {
 };
 
 // src/layout/LayoutWorkerSource.ts
-var WORKER_SOURCE_STRING = '"use strict";(()=>{var b=new Map;self.onmessage=x=>{let{id:S,seqId:k,text:A,fontId:i,fontData:c,maxWidth:d,maxHeight:H,fontSize:o,lineHeight:F,letterSpacing:C}=x.data;c&&b.set(i,c);let n=b.get(i);if(!n)return;let f=[],u=[],y=[],l=[],e=0,r=0,h=n.metrics?.ascender??.8,D=n.metrics?.descender??-.2,m=F??o*(h-D),p=Array.from(A);for(let s=0;s<p.length;s++){let a=p[s].codePointAt(0),g=(n.glyphs?.find(w=>w.unicode===a)?.advance??1)*o;e+g>d&&a===32&&(e=0,r++),f.push(a),u.push(e);let M=r*m+h*o;y.push(M),l.push(-256),e+=g+(C??0)}let t={id:S,seqId:k,width:Math.min(e,d),height:(r+1)*m,codePoints:new Uint32Array(f),xCoords:new Float32Array(u),yCoords:new Float32Array(y),packedStyles:new Uint32Array(l)};self.postMessage(t,[t.codePoints.buffer,t.xCoords.buffer,t.yCoords.buffer,t.packedStyles.buffer])};})();\n';
+var WORKER_SOURCE_STRING = '"use strict";(()=>{var k=new Map;function n(t){return typeof t=="number"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&n(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n';
 
 // src/layout/LayoutWorkerManager.ts
 var LayoutWorkerManager = (_class2 = class _LayoutWorkerManager {

package/dist/{chunk-YSS44ADQ.mjs → chunk-B3Z3JEJH.mjs}

@@ -296,7 +296,7 @@ var BidiResolver = class _BidiResolver {
 };
 
 // src/layout/LayoutWorkerSource.ts
-var WORKER_SOURCE_STRING = '"use strict";(()=>{var b=new Map;self.onmessage=x=>{let{id:S,seqId:k,text:A,fontId:i,fontData:c,maxWidth:d,maxHeight:H,fontSize:o,lineHeight:F,letterSpacing:C}=x.data;c&&b.set(i,c);let n=b.get(i);if(!n)return;let f=[],u=[],y=[],l=[],e=0,r=0,h=n.metrics?.ascender??.8,D=n.metrics?.descender??-.2,m=F??o*(h-D),p=Array.from(A);for(let s=0;s<p.length;s++){let a=p[s].codePointAt(0),g=(n.glyphs?.find(w=>w.unicode===a)?.advance??1)*o;e+g>d&&a===32&&(e=0,r++),f.push(a),u.push(e);let M=r*m+h*o;y.push(M),l.push(-256),e+=g+(C??0)}let t={id:S,seqId:k,width:Math.min(e,d),height:(r+1)*m,codePoints:new Uint32Array(f),xCoords:new Float32Array(u),yCoords:new Float32Array(y),packedStyles:new Uint32Array(l)};self.postMessage(t,[t.codePoints.buffer,t.xCoords.buffer,t.yCoords.buffer,t.packedStyles.buffer])};})();\n';
+var WORKER_SOURCE_STRING = '"use strict";(()=>{var k=new Map;function n(t){return typeof t=="number"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!="object")return!1;let e=t;return typeof e.id=="string"&&n(e.seqId)&&typeof e.text=="string"&&typeof e.fontId=="string"&&(e.fontData===void 0||typeof e.fontData=="object")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n';
 
 // src/layout/LayoutWorkerManager.ts
 var LayoutWorkerManager = class _LayoutWorkerManager {

package/dist/{chunk-ISGOYXPF.mjs → chunk-P6MDWIEX.mjs}

@@ -1,6 +1,6 @@
 import {
   LayoutWorkerManager
-} from "./chunk-YSS44ADQ.mjs";
+} from "./chunk-B3Z3JEJH.mjs";
 
 // src/math/SpringPhysics.ts
 var SpringPhysics = class {
@@ -1118,6 +1118,36 @@ var MSDFTextEntity = class extends Entity {
 };
 
 // src/text/SVGEntity.ts
+function isSvgWhitespace(ch) {
+  return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
+}
+function readSvgAttribute(source, name) {
+  const lowerSource = source.toLowerCase();
+  const svgStart = lowerSource.indexOf("<svg");
+  if (svgStart < 0) return null;
+  const tagEnd = source.indexOf(">", svgStart + 4);
+  if (tagEnd < 0) return null;
+  const tag = source.slice(svgStart + 4, tagEnd);
+  const lowerTag = tag.toLowerCase();
+  const lowerName = name.toLowerCase();
+  for (let i = 0; i < tag.length; i++) {
+    const before = i === 0 ? " " : tag[i - 1];
+    if (!isSvgWhitespace(before)) continue;
+    if (!lowerTag.startsWith(lowerName, i)) continue;
+    let cursor = i + lowerName.length;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    if (tag[cursor] !== "=") continue;
+    cursor++;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    const quote = tag[cursor];
+    if (quote !== '"' && quote !== "'") continue;
+    const valueStart = cursor + 1;
+    const valueEnd = tag.indexOf(quote, valueStart);
+    if (valueEnd < 0) return null;
+    return tag.slice(valueStart, valueEnd);
+  }
+  return null;
+}
 var SVGEntity = class extends Entity {
   svgSource = "";
   imageBitmap = null;
@@ -1169,17 +1199,17 @@ var SVGEntity = class extends Entity {
           }
         }
       } catch (e) {
-        console.error("Failed parsing SVG via DOMParser, falling back to regex:", e);
+        console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
       }
     } else {
-      const wMatch = /<svg[^>]*\bwidth\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const hMatch = /<svg[^>]*\bheight\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const vbMatch = /<svg[^>]*\bviewBox\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      if (wMatch && hMatch) {
-        width = parseFloat(wMatch[1]) || 100;
-        height = parseFloat(hMatch[1]) || 100;
-      } else if (vbMatch) {
-        const parts = vbMatch[1].split(/[\s,]+/).map(parseFloat);
+      const wAttr = readSvgAttribute(this.svgSource, "width");
+      const hAttr = readSvgAttribute(this.svgSource, "height");
+      const vbAttr = readSvgAttribute(this.svgSource, "viewBox");
+      if (wAttr && hAttr) {
+        width = parseFloat(wAttr) || 100;
+        height = parseFloat(hAttr) || 100;
+      } else if (vbAttr) {
+        const parts = vbAttr.split(/[\s,]+/).map(parseFloat);
         if (parts.length === 4) {
           width = parts[2];
           height = parts[3];

package/dist/{chunk-LIOJ37MH.mjs → chunk-SB3SCWLT.mjs}

@@ -1,7 +1,7 @@
 import {
   ArabicShaper,
   BidiResolver
-} from "./chunk-YSS44ADQ.mjs";
+} from "./chunk-B3Z3JEJH.mjs";
 
 // src/layout/LayoutEngine.ts
 function computeLineSegments(top, bottom, maxWidth, exclusions) {
@@ -79,6 +79,12 @@ var LayoutEngine = class {
     if (this.measurer) return this.measurer.measure(char, fontSize);
     return fontSize * 0.5;
   }
+  glyphKeyFor(grapheme, fontAtlas) {
+    if (fontAtlas[grapheme]) return grapheme;
+    const firstCodePoint = Array.from(grapheme)[0];
+    if (firstCodePoint && fontAtlas[firstCodePoint]) return firstCodePoint;
+    return grapheme;
+  }
   getGraphemes(word) {
     const cached = this.graphemeCache.get(word);
     if (cached) return cached;
@@ -158,25 +164,20 @@ var LayoutEngine = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, fontSize);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, fontSize);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;
@@ -280,28 +281,23 @@ var LayoutEngine = class {
           const rawEnd = visualEnd === shapedText.length ? paragraph.length : indexMap[visualEnd];
           const sourceIndex = offset + rawStart;
           const sourceLength = rawEnd - rawStart;
-          const baseChar = char[0];
+          const glyphKey = this.glyphKeyFor(char, fontAtlas);
           const level = levels[visualStart];
           const style = styleAt[offset + rawStart];
           const gfs = style?.fontSize ?? baseFontSize;
-          const hasGlyph = !!fontAtlas[char] || !!fontAtlas[baseChar];
+          const hasGlyph = !!fontAtlas[glyphKey];
           if (char.trim().length > 0 && !hasGlyph) {
             pFallback = true;
             fallbackToCanvas = true;
           }
-          const w = this.glyphWidth(baseChar, fontAtlas, gfs);
-          const combining = [];
-          for (let cIdx = 1; cIdx < char.length; cIdx++) {
-            combining.push(char[cIdx]);
-          }
+          const w = this.glyphWidth(glyphKey, fontAtlas, gfs);
           glyphs.push({
-            char: baseChar,
+            char,
             width: w,
             style,
             level,
             sourceIndex,
-            sourceLength,
-            combining: combining.length > 0 ? combining : void 0
+            sourceLength
           });
           width += w;
           shapedCharIdx += char.length;

package/dist/{chunk-TXA3LZDM.js → chunk-TPNADFNN.js}

@@ -230,6 +230,55 @@ function isSafeUrl(urlStr) {
 }
 
 // src/renderer/SVGRenderer.ts
+function parseFontSizeToken(font) {
+  for (let i = 0; i < font.length; i++) {
+    const ch = font[i];
+    if (!(ch >= "0" && ch <= "9" || ch === ".")) continue;
+    let j = i + 1;
+    while (j < font.length) {
+      const next = font[j];
+      if (next >= "0" && next <= "9" || next === ".") {
+        j++;
+      } else {
+        break;
+      }
+    }
+    const unit = font.startsWith("rem", j) ? "rem" : font.startsWith("em", j) ? "em" : font.startsWith("px", j) ? "px" : null;
+    if (!unit) {
+      i = j;
+      continue;
+    }
+    let end = j + unit.length;
+    if (font[end] === "/") {
+      end++;
+      while (end < font.length && font[end] !== " " && font[end] !== "	") end++;
+    }
+    const value = Number.parseFloat(font.slice(i, j));
+    return Number.isFinite(value) ? { value, unit, start: i, end } : null;
+  }
+  return null;
+}
+function fontFamilyFromShorthand(font, sizeToken) {
+  const withoutSize = sizeToken ? `${font.slice(0, sizeToken.start)} ${font.slice(sizeToken.end)}`.trim() : font.trim();
+  const family = withoutSize.split(" ").map((part) => part.trim()).filter(
+    (part) => part && ![
+      "bold",
+      "italic",
+      "oblique",
+      "normal",
+      "900",
+      "800",
+      "700",
+      "600",
+      "500",
+      "400",
+      "300",
+      "200",
+      "100"
+    ].includes(part.toLowerCase())
+  ).join(" ");
+  return family || "sans-serif";
+}
 var SVGRenderer = (_class2 = class {
   
   
@@ -455,17 +504,17 @@ var SVGRenderer = (_class2 = class {
   }
   fillText(text, x, y, font, color) {
     this.flush();
-    const sizeMatch = font.match(/(\d+(?:\.\d+)?)(px|em|rem)/);
-    let fontSize = sizeMatch ? parseFloat(sizeMatch[1]) : 16;
-    if (sizeMatch && sizeMatch[2] !== "px") {
+    const sizeToken = parseFontSizeToken(font);
+    let fontSize = sizeToken ? sizeToken.value : 16;
+    if (sizeToken && sizeToken.unit !== "px") {
       fontSize = fontSize * 16;
     }
-    const styleMatch = font.match(/(italic|oblique)/i);
-    const fontWeightMatch = font.match(/(bold|[1-9]00)/i);
-    const fontStyle = styleMatch ? styleMatch[1].toLowerCase() : "normal";
-    const fontWeight = fontWeightMatch ? fontWeightMatch[1].toLowerCase() : "normal";
-    const cleanFont = font.replace(/\d+(?:\.\d+)?(px|em|rem)(?:\/\d+(?:\.\d+)?(?:px|em|rem|%)?)?/, "").trim();
-    const fontFamily = cleanFont.replace(/(bold|italic|normal|600|500|400|300|100)\s+/gi, "").trim() || "sans-serif";
+    const lowerFont = font.toLowerCase();
+    const fontStyle = lowerFont.includes("italic") ? "italic" : lowerFont.includes("oblique") ? "oblique" : "normal";
+    const fontWeight = lowerFont.includes("bold") ? "bold" : _nullishCoalesce(["900", "800", "700", "600", "500", "400", "300", "200", "100"].find(
+      (weight) => lowerFont.includes(weight)
+    ), () => ( "normal"));
+    const fontFamily = fontFamilyFromShorthand(font, sizeToken);
     const fillVal = this.escapeXML(this.resolveGradient(color));
     const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
     this.buffer.push(

package/dist/{chunk-KPWVPGHR.js → chunk-TQ4H357Q.js}

@@ -1,6 +1,6 @@
 "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; var _class5; var _class6; var _class7;
 
-var _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 // src/math/SpringPhysics.ts
 var SpringPhysics = (_class = class {
@@ -1008,7 +1008,7 @@ var MSDFTextEntity = (_class6 = class extends Entity {
   setText(text) {
     if (this.text === text && this.layoutResult) return;
     this.text = text;
-    _chunk6I53LI3Zjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
+    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
       fontId: this.font.id,
       fontSize: this.fontSize,
       maxWidth: 1e3,
@@ -1112,12 +1112,42 @@ var MSDFTextEntity = (_class6 = class extends Entity {
     }
   }
   destroy() {
-    _chunk6I53LI3Zjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
+    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
     super.destroy();
   }
 }, _class6);
 
 // src/text/SVGEntity.ts
+function isSvgWhitespace(ch) {
+  return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
+}
+function readSvgAttribute(source, name) {
+  const lowerSource = source.toLowerCase();
+  const svgStart = lowerSource.indexOf("<svg");
+  if (svgStart < 0) return null;
+  const tagEnd = source.indexOf(">", svgStart + 4);
+  if (tagEnd < 0) return null;
+  const tag = source.slice(svgStart + 4, tagEnd);
+  const lowerTag = tag.toLowerCase();
+  const lowerName = name.toLowerCase();
+  for (let i = 0; i < tag.length; i++) {
+    const before = i === 0 ? " " : tag[i - 1];
+    if (!isSvgWhitespace(before)) continue;
+    if (!lowerTag.startsWith(lowerName, i)) continue;
+    let cursor = i + lowerName.length;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    if (tag[cursor] !== "=") continue;
+    cursor++;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    const quote = tag[cursor];
+    if (quote !== '"' && quote !== "'") continue;
+    const valueStart = cursor + 1;
+    const valueEnd = tag.indexOf(quote, valueStart);
+    if (valueEnd < 0) return null;
+    return tag.slice(valueStart, valueEnd);
+  }
+  return null;
+}
 var SVGEntity = (_class7 = class extends Entity {
   __init40() {this.svgSource = ""}
   __init41() {this.imageBitmap = null}
@@ -1169,17 +1199,17 @@ var SVGEntity = (_class7 = class extends Entity {
           }
         }
       } catch (e) {
-        console.error("Failed parsing SVG via DOMParser, falling back to regex:", e);
+        console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
       }
     } else {
-      const wMatch = /<svg[^>]*\bwidth\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const hMatch = /<svg[^>]*\bheight\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const vbMatch = /<svg[^>]*\bviewBox\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      if (wMatch && hMatch) {
-        width = parseFloat(wMatch[1]) || 100;
-        height = parseFloat(hMatch[1]) || 100;
-      } else if (vbMatch) {
-        const parts = vbMatch[1].split(/[\s,]+/).map(parseFloat);
+      const wAttr = readSvgAttribute(this.svgSource, "width");
+      const hAttr = readSvgAttribute(this.svgSource, "height");
+      const vbAttr = readSvgAttribute(this.svgSource, "viewBox");
+      if (wAttr && hAttr) {
+        width = parseFloat(wAttr) || 100;
+        height = parseFloat(hAttr) || 100;
+      } else if (vbAttr) {
+        const parts = vbAttr.split(/[\s,]+/).map(parseFloat);
         if (parts.length === 4) {
           width = parts[2];
           height = parts[3];

package/dist/{chunk-NKOQV3RM.mjs → chunk-WEQRBXT2.mjs}

@@ -230,6 +230,55 @@ function isSafeUrl(urlStr) {
 }
 
 // src/renderer/SVGRenderer.ts
+function parseFontSizeToken(font) {
+  for (let i = 0; i < font.length; i++) {
+    const ch = font[i];
+    if (!(ch >= "0" && ch <= "9" || ch === ".")) continue;
+    let j = i + 1;
+    while (j < font.length) {
+      const next = font[j];
+      if (next >= "0" && next <= "9" || next === ".") {
+        j++;
+      } else {
+        break;
+      }
+    }
+    const unit = font.startsWith("rem", j) ? "rem" : font.startsWith("em", j) ? "em" : font.startsWith("px", j) ? "px" : null;
+    if (!unit) {
+      i = j;
+      continue;
+    }
+    let end = j + unit.length;
+    if (font[end] === "/") {
+      end++;
+      while (end < font.length && font[end] !== " " && font[end] !== "	") end++;
+    }
+    const value = Number.parseFloat(font.slice(i, j));
+    return Number.isFinite(value) ? { value, unit, start: i, end } : null;
+  }
+  return null;
+}
+function fontFamilyFromShorthand(font, sizeToken) {
+  const withoutSize = sizeToken ? `${font.slice(0, sizeToken.start)} ${font.slice(sizeToken.end)}`.trim() : font.trim();
+  const family = withoutSize.split(" ").map((part) => part.trim()).filter(
+    (part) => part && ![
+      "bold",
+      "italic",
+      "oblique",
+      "normal",
+      "900",
+      "800",
+      "700",
+      "600",
+      "500",
+      "400",
+      "300",
+      "200",
+      "100"
+    ].includes(part.toLowerCase())
+  ).join(" ");
+  return family || "sans-serif";
+}
 var SVGRenderer = class {
   width;
   height;
@@ -455,17 +504,17 @@ var SVGRenderer = class {
   }
   fillText(text, x, y, font, color) {
     this.flush();
-    const sizeMatch = font.match(/(\d+(?:\.\d+)?)(px|em|rem)/);
-    let fontSize = sizeMatch ? parseFloat(sizeMatch[1]) : 16;
-    if (sizeMatch && sizeMatch[2] !== "px") {
+    const sizeToken = parseFontSizeToken(font);
+    let fontSize = sizeToken ? sizeToken.value : 16;
+    if (sizeToken && sizeToken.unit !== "px") {
       fontSize = fontSize * 16;
     }
-    const styleMatch = font.match(/(italic|oblique)/i);
-    const fontWeightMatch = font.match(/(bold|[1-9]00)/i);
-    const fontStyle = styleMatch ? styleMatch[1].toLowerCase() : "normal";
-    const fontWeight = fontWeightMatch ? fontWeightMatch[1].toLowerCase() : "normal";
-    const cleanFont = font.replace(/\d+(?:\.\d+)?(px|em|rem)(?:\/\d+(?:\.\d+)?(?:px|em|rem|%)?)?/, "").trim();
-    const fontFamily = cleanFont.replace(/(bold|italic|normal|600|500|400|300|100)\s+/gi, "").trim() || "sans-serif";
+    const lowerFont = font.toLowerCase();
+    const fontStyle = lowerFont.includes("italic") ? "italic" : lowerFont.includes("oblique") ? "oblique" : "normal";
+    const fontWeight = lowerFont.includes("bold") ? "bold" : ["900", "800", "700", "600", "500", "400", "300", "200", "100"].find(
+      (weight) => lowerFont.includes(weight)
+    ) ?? "normal";
+    const fontFamily = fontFamilyFromShorthand(font, sizeToken);
     const fillVal = this.escapeXML(this.resolveGradient(color));
     const transformStr = `matrix(${this.ma},${this.mb},${this.mc},${this.md},${this.me},${this.mf})`;
     this.buffer.push(

package/dist/index.js

@@ -3,7 +3,7 @@
 
 
 
-var _chunkVVOQNUBKjs = require('./chunk-VVOQNUBK.js');
+var _chunk5KLB6BEZjs = require('./chunk-5KLB6BEZ.js');
 
 
 
@@ -12,7 +12,7 @@ var _chunkVVOQNUBKjs = require('./chunk-VVOQNUBK.js');
 
 
 
-var _chunkTXA3LZDMjs = require('./chunk-TXA3LZDM.js');
+var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
 
 
 
@@ -24,12 +24,12 @@ var _chunkTXA3LZDMjs = require('./chunk-TXA3LZDM.js');
 
 
 
-var _chunkKPWVPGHRjs = require('./chunk-KPWVPGHR.js');
+var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
 
 
 
 
-var _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -41,7 +41,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 _chunkKPWVPGHRjs.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkTQ4H357Qjs.Entity {
   
   
   
@@ -410,7 +410,7 @@ var Scene = (_class2 = class _Scene {
     this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkKPWVPGHRjs.Entity {
+    this.root = new class RootEntity extends _chunkTQ4H357Qjs.Entity {
       isPointInside() {
         return false;
       }
@@ -419,7 +419,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkKPWVPGHRjs.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkTQ4H357Qjs.Entity {
       isPointInside() {
         return false;
       }
@@ -430,7 +430,7 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkTXA3LZDMjs.CanvasRenderer)(canvas);
+      this.renderer = new (0, _chunkTPNADFNNjs.CanvasRenderer)(canvas);
     }
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
@@ -760,42 +760,42 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           if (typeof capEl.releasePointerCapture === "function")
             capEl.releasePointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -809,6 +809,7 @@ var Scene = (_class2 = class _Scene {
               selectionEnd: _nullishCoalesce(input.selectionEnd, () => ( input.value.length)),
               composition
             });
+            this.markDirty();
           };
           el.addEventListener("input", forward);
           el.addEventListener("change", forward);
@@ -867,7 +868,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -892,7 +893,7 @@ var Scene = (_class2 = class _Scene {
         if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
       }
       if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = _chunkTXA3LZDMjs.sanitizeUrl.call(void 0, attrs.href);
+        const safeHref = _chunkTPNADFNNjs.sanitizeUrl.call(void 0, attrs.href);
         if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
       }
       if (el instanceof HTMLImageElement) {
@@ -1440,7 +1441,7 @@ var Scene = (_class2 = class _Scene {
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkTXA3LZDMjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkTPNADFNNjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -1603,10 +1604,10 @@ var Scene = (_class2 = class _Scene {
 // src/components/TextEntity.ts
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunkVVOQNUBKjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunk5KLB6BEZjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkKPWVPGHRjs.Entity {
+var TextEntity = (_class3 = class extends _chunkTQ4H357Qjs.Entity {
   
   
   
@@ -1623,7 +1624,7 @@ var TextEntity = (_class3 = class extends _chunkKPWVPGHRjs.Entity {
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunkVVOQNUBKjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _chunk5KLB6BEZjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -1704,7 +1705,7 @@ var TextEntity = (_class3 = class extends _chunkKPWVPGHRjs.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkKPWVPGHRjs.Entity {
+var GridTextEntity = (_class4 = class extends _chunkTQ4H357Qjs.Entity {
   
   __init54() {this.fillStyle = "#ffffff"}
   __init55() {this.grid = []}
@@ -1798,7 +1799,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkKPWVPGHRjs.Entity {
+var SplineEntity = (_class5 = class extends _chunkTQ4H357Qjs.Entity {
   
   
   
@@ -2155,7 +2156,7 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkTQ4H357Qjs.Entity {
   
   __init64() {this.isDOMPortal = true}
   __init65() {this.domListeners = []}
@@ -2190,7 +2191,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
       const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2201,7 +2202,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2209,7 +2210,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkKPWVPGHRjs.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkTQ4H357Qjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2248,8 +2249,8 @@ var DOMPortalEntity = (_class7 = class extends _chunkKPWVPGHRjs.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkTXA3LZDMjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkTXA3LZDMjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkTPNADFNNjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkTPNADFNNjs.WebGPUParticleSystemManager);
 
 
 
@@ -2294,4 +2295,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkTXA3LZDMjs.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunk6I53LI3Zjs.ArabicShaper; exports.BidiResolver = _chunk6I53LI3Zjs.BidiResolver; exports.CanvasRenderer = _chunkTXA3LZDMjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkKPWVPGHRjs.Easing; exports.Entity = _chunkKPWVPGHRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkVVOQNUBKjs.LayoutEngine; exports.LayoutResultBuffer = _chunkVVOQNUBKjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk6I53LI3Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkKPWVPGHRjs.MSDFFont; exports.MSDFTextEntity = _chunkKPWVPGHRjs.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.SVGEntity = _chunkKPWVPGHRjs.SVGEntity; exports.SVGRenderer = _chunkTXA3LZDMjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkKPWVPGHRjs.SpringDriver; exports.SpringPhysics = _chunkKPWVPGHRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkKPWVPGHRjs.TweenDriver; exports.VectoJSEvent = _chunkKPWVPGHRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkTXA3LZDMjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkVVOQNUBKjs.computeLineSegments; exports.createCanvasMeasurer = _chunkVVOQNUBKjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkTXA3LZDMjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkTXA3LZDMjs.isSafeUrl; exports.isTweenConfig = _chunkKPWVPGHRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkTXA3LZDMjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkTXA3LZDMjs.sanitizeUrl;
+exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.CanvasRenderer = _chunkTPNADFNNjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkTQ4H357Qjs.Easing; exports.Entity = _chunkTQ4H357Qjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunk5KLB6BEZjs.LayoutEngine; exports.LayoutResultBuffer = _chunk5KLB6BEZjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk76NMTLYLjs.LayoutWorkerManager; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.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.SVGEntity = _chunkTQ4H357Qjs.SVGEntity; exports.SVGRenderer = _chunkTPNADFNNjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkTQ4H357Qjs.SpringDriver; exports.SpringPhysics = _chunkTQ4H357Qjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkTQ4H357Qjs.TweenDriver; exports.VectoJSEvent = _chunkTQ4H357Qjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkTPNADFNNjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunk5KLB6BEZjs.computeLineSegments; exports.createCanvasMeasurer = _chunk5KLB6BEZjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkTPNADFNNjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkTPNADFNNjs.isSafeUrl; exports.isTweenConfig = _chunkTQ4H357Qjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkTPNADFNNjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkTPNADFNNjs.sanitizeUrl;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-LIOJ37MH.mjs";
+} from "./chunk-SB3SCWLT.mjs";
 import {
   CanvasRenderer,
   SVGRenderer,
@@ -12,7 +12,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-NKOQV3RM.mjs";
+} from "./chunk-WEQRBXT2.mjs";
 import {
   Easing,
   Entity,
@@ -24,12 +24,12 @@ import {
   TweenDriver,
   VectoJSEvent,
   isTweenConfig
-} from "./chunk-ISGOYXPF.mjs";
+} from "./chunk-P6MDWIEX.mjs";
 import {
   ArabicShaper,
   BidiResolver,
   LayoutWorkerManager
-} from "./chunk-YSS44ADQ.mjs";
+} from "./chunk-B3Z3JEJH.mjs";
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -809,6 +809,7 @@ var Scene = class _Scene {
               selectionEnd: input.selectionEnd ?? input.value.length,
               composition
             });
+            this.markDirty();
           };
           el.addEventListener("input", forward);
           el.addEventListener("change", forward);

package/dist/layout/LayoutEngine.d.ts

@@ -157,6 +157,7 @@ export declare class LayoutEngine {
      * pre-baked atlas entry → injected {@link GlyphMeasurer} → `0.5em` fallback.
      */
     private glyphWidth;
+    private glyphKeyFor;
     private getGraphemes;
     /**
      * Lay out a Unicode string into a list of positioned {@link LayoutNode} glyphs.

package/dist/layout/LayoutWorkerSource.d.ts

@@ -1 +1 @@
-export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var b=new Map;self.onmessage=x=>{let{id:S,seqId:k,text:A,fontId:i,fontData:c,maxWidth:d,maxHeight:H,fontSize:o,lineHeight:F,letterSpacing:C}=x.data;c&&b.set(i,c);let n=b.get(i);if(!n)return;let f=[],u=[],y=[],l=[],e=0,r=0,h=n.metrics?.ascender??.8,D=n.metrics?.descender??-.2,m=F??o*(h-D),p=Array.from(A);for(let s=0;s<p.length;s++){let a=p[s].codePointAt(0),g=(n.glyphs?.find(w=>w.unicode===a)?.advance??1)*o;e+g>d&&a===32&&(e=0,r++),f.push(a),u.push(e);let M=r*m+h*o;y.push(M),l.push(-256),e+=g+(C??0)}let t={id:S,seqId:k,width:Math.min(e,d),height:(r+1)*m,codePoints:new Uint32Array(f),xCoords:new Float32Array(u),yCoords:new Float32Array(y),packedStyles:new Uint32Array(l)};self.postMessage(t,[t.codePoints.buffer,t.xCoords.buffer,t.yCoords.buffer,t.packedStyles.buffer])};})();\n";
+export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var k=new Map;function n(t){return typeof t==\"number\"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!=\"object\")return!1;let e=t;return typeof e.id==\"string\"&&n(e.seqId)&&typeof e.text==\"string\"&&typeof e.fontId==\"string\"&&(e.fontData===void 0||typeof e.fontData==\"object\")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n";

package/dist/layout.js

@@ -3,14 +3,14 @@
 
 
 
-var _chunkVVOQNUBKjs = require('./chunk-VVOQNUBK.js');
+var _chunk5KLB6BEZjs = require('./chunk-5KLB6BEZ.js');
 
 
-var _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 
 
 
 
 
-exports.LayoutEngine = _chunkVVOQNUBKjs.LayoutEngine; exports.LayoutResultBuffer = _chunkVVOQNUBKjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk6I53LI3Zjs.LayoutWorkerManager; exports.computeLineSegments = _chunkVVOQNUBKjs.computeLineSegments; exports.createCanvasMeasurer = _chunkVVOQNUBKjs.createCanvasMeasurer;
+exports.LayoutEngine = _chunk5KLB6BEZjs.LayoutEngine; exports.LayoutResultBuffer = _chunk5KLB6BEZjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk76NMTLYLjs.LayoutWorkerManager; exports.computeLineSegments = _chunk5KLB6BEZjs.computeLineSegments; exports.createCanvasMeasurer = _chunk5KLB6BEZjs.createCanvasMeasurer;

package/dist/layout.mjs

@@ -3,10 +3,10 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-LIOJ37MH.mjs";
+} from "./chunk-SB3SCWLT.mjs";
 import {
   LayoutWorkerManager
-} from "./chunk-YSS44ADQ.mjs";
+} from "./chunk-B3Z3JEJH.mjs";
 export {
   LayoutEngine,
   LayoutResultBuffer,

package/dist/renderer.js

@@ -4,11 +4,11 @@
 
 
 
-var _chunkTXA3LZDMjs = require('./chunk-TXA3LZDM.js');
+var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
 
 
 
 
 
 
-exports.CanvasRenderer = _chunkTXA3LZDMjs.CanvasRenderer; exports.SVGRenderer = _chunkTXA3LZDMjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkTXA3LZDMjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkTXA3LZDMjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkTXA3LZDMjs.parseColorToRGBA;
+exports.CanvasRenderer = _chunkTPNADFNNjs.CanvasRenderer; exports.SVGRenderer = _chunkTPNADFNNjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkTPNADFNNjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkTPNADFNNjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkTPNADFNNjs.parseColorToRGBA;

package/dist/renderer.mjs

@@ -4,7 +4,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-NKOQV3RM.mjs";
+} from "./chunk-WEQRBXT2.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,

package/dist/text.js

@@ -2,15 +2,15 @@
 
 
 
-var _chunkKPWVPGHRjs = require('./chunk-KPWVPGHR.js');
+var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
 
 
 
-var _chunk6I53LI3Zjs = require('./chunk-6I53LI3Z.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 
 
 
 
 
-exports.ArabicShaper = _chunk6I53LI3Zjs.ArabicShaper; exports.BidiResolver = _chunk6I53LI3Zjs.BidiResolver; exports.MSDFFont = _chunkKPWVPGHRjs.MSDFFont; exports.MSDFTextEntity = _chunkKPWVPGHRjs.MSDFTextEntity; exports.SVGEntity = _chunkKPWVPGHRjs.SVGEntity;
+exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.MSDFTextEntity; exports.SVGEntity = _chunkTQ4H357Qjs.SVGEntity;

package/dist/text.mjs

@@ -2,11 +2,11 @@ import {
   MSDFFont,
   MSDFTextEntity,
   SVGEntity
-} from "./chunk-ISGOYXPF.mjs";
+} from "./chunk-P6MDWIEX.mjs";
 import {
   ArabicShaper,
   BidiResolver
-} from "./chunk-YSS44ADQ.mjs";
+} from "./chunk-B3Z3JEJH.mjs";
 export {
   ArabicShaper,
   BidiResolver,

package/package.json

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