@vectojs/core 1.4.1 → 1.6.0

package/README.md

@@ -112,6 +112,31 @@ This projection is intentionally thin. Applications still own accessible names,
 focus order, contrast, and correct control semantics. See the
 [accessibility guide](https://vectojs.org/learn/accessibility/).
 
+## Static content projection
+
+Canvas-rendered text can opt into browser-native find, translation, selection, and copy without
+turning the application into a DOM layout. Override `getContentProjection()` on the owning Entity;
+the Scene creates a transparent, position-synchronized mirror while the VMT remains authoritative:
+
+```ts
+class SelectableLabel extends Entity {
+  getContentProjection() {
+    return {
+      text: 'Selectable canvas text',
+      font: '18px Inter',
+      lineHeight: 24,
+      selectable: true,
+    };
+  }
+}
+```
+
+`selectable` controls whether the mirror receives pointer input. The Scene keeps projection order
+aligned with VMT order, removes descendant mirrors with their subtree, and hides mirrors fully
+outside the viewport or a `clipChildren` ancestor. Tooling can inspect the currently materialized
+node with `scene.getContentElement(entityId)`. Virtualized or non-materialized off-viewport text is
+not searchable until the application brings it into the active scene.
+
 ## Performance model
 
 Useful levers include on-demand rendering, viewport culling, spatial hashing, prepared text layout,

package/dist/{chunk-N7DNUDVY.mjs → chunk-3CODWSF3.mjs}

@@ -939,6 +939,31 @@ var Entity = class {
   }
 };
 
+// src/text/Typography.ts
+var typographyContext;
+var baselineCache = /* @__PURE__ */ new Map();
+function cssLineBoxBaseline(font, lineHeight) {
+  if (typeof document === "undefined") return lineHeight * 0.8;
+  const key = `${font}\0${lineHeight}`;
+  const cached = baselineCache.get(key);
+  if (cached !== void 0) return cached;
+  if (typographyContext === void 0) {
+    typographyContext = document.createElement("canvas").getContext("2d");
+  }
+  if (!typographyContext) return lineHeight * 0.8;
+  typographyContext.font = font;
+  const metrics = typographyContext.measureText("Mg");
+  const ascent = metrics.fontBoundingBoxAscent || metrics.actualBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent || metrics.actualBoundingBoxDescent;
+  if (!(ascent > 0) || !(descent >= 0)) return lineHeight * 0.8;
+  const baseline = (lineHeight - ascent - descent) / 2 + ascent;
+  baselineCache.set(key, baseline);
+  return baseline;
+}
+function clearCssLineBoxMetrics() {
+  baselineCache.clear();
+}
+
 // src/text/MSDFFont.ts
 function kernKey(a, b) {
   return a * 1114112 + b;
@@ -1442,6 +1467,8 @@ export {
   SpringDriver,
   VectoJSEvent,
   Entity,
+  cssLineBoxBaseline,
+  clearCssLineBoxMetrics,
   MSDFFont,
   MSDFTextEntity,
   SVGEntity

package/dist/{chunk-NHNOKBD4.js → chunk-DFNK6OV6.js}

@@ -939,6 +939,31 @@ var Entity = (_class4 = class {
   }
 }, _class4);
 
+// src/text/Typography.ts
+var typographyContext;
+var baselineCache = /* @__PURE__ */ new Map();
+function cssLineBoxBaseline(font, lineHeight) {
+  if (typeof document === "undefined") return lineHeight * 0.8;
+  const key = `${font}\0${lineHeight}`;
+  const cached = baselineCache.get(key);
+  if (cached !== void 0) return cached;
+  if (typographyContext === void 0) {
+    typographyContext = document.createElement("canvas").getContext("2d");
+  }
+  if (!typographyContext) return lineHeight * 0.8;
+  typographyContext.font = font;
+  const metrics = typographyContext.measureText("Mg");
+  const ascent = metrics.fontBoundingBoxAscent || metrics.actualBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent || metrics.actualBoundingBoxDescent;
+  if (!(ascent > 0) || !(descent >= 0)) return lineHeight * 0.8;
+  const baseline = (lineHeight - ascent - descent) / 2 + ascent;
+  baselineCache.set(key, baseline);
+  return baseline;
+}
+function clearCssLineBoxMetrics() {
+  baselineCache.clear();
+}
+
 // src/text/MSDFFont.ts
 function kernKey(a, b) {
   return a * 1114112 + b;
@@ -1445,4 +1470,6 @@ var SVGEntity = (_class7 = class extends Entity {
 
 
 
-exports.SpringPhysics = SpringPhysics; exports.Easing = Easing; exports.isTweenConfig = isTweenConfig; exports.TweenDriver = TweenDriver; exports.SpringDriver = SpringDriver; exports.VectoJSEvent = VectoJSEvent; exports.Entity = Entity; exports.MSDFFont = MSDFFont; exports.MSDFTextEntity = MSDFTextEntity; exports.SVGEntity = SVGEntity;
+
+
+exports.SpringPhysics = SpringPhysics; exports.Easing = Easing; exports.isTweenConfig = isTweenConfig; exports.TweenDriver = TweenDriver; exports.SpringDriver = SpringDriver; exports.VectoJSEvent = VectoJSEvent; exports.Entity = Entity; exports.cssLineBoxBaseline = cssLineBoxBaseline; exports.clearCssLineBoxMetrics = clearCssLineBoxMetrics; exports.MSDFFont = MSDFFont; exports.MSDFTextEntity = MSDFTextEntity; exports.SVGEntity = SVGEntity;

package/dist/{chunk-FNXOS7IA.mjs → chunk-V7GUWG5C.mjs}

@@ -598,8 +598,11 @@ var LayoutEngine = class {
           currentLineNodes.push({
             char: glyph.char,
             x: currentX,
-            // Drop smaller glyphs to the shared baseline (no-op when gfs === pMax).
-            y: currentY + (pMax - gfs),
+            // Canvas text is positioned by baseline, while `y` is the local
+            // top used by the renderer. Offset smaller runs by their baseline
+            // delta, not by their full em-box delta, so mixed-size glyphs share
+            // one real baseline in every Canvas 2D implementation.
+            y: currentY + (pMax - gfs) * 0.8,
             width: charWidth,
             height: gfs,
             style: glyph.style,

package/dist/{chunk-XLZDOFSB.js → chunk-ZBKKRYDH.js}

@@ -598,8 +598,11 @@ var LayoutEngine = (_class = class {
           currentLineNodes.push({
             char: glyph.char,
             x: currentX,
-            // Drop smaller glyphs to the shared baseline (no-op when gfs === pMax).
-            y: currentY + (pMax - gfs),
+            // Canvas text is positioned by baseline, while `y` is the local
+            // top used by the renderer. Offset smaller runs by their baseline
+            // delta, not by their full em-box delta, so mixed-size glyphs share
+            // one real baseline in every Canvas 2D implementation.
+            y: currentY + (pMax - gfs) * 0.8,
             width: charWidth,
             height: gfs,
             style: glyph.style,

package/dist/index.d.ts

@@ -25,3 +25,4 @@ export { SVGEntity } from './text/SVGEntity';
 export * from './tree/ComputeParticleEntity';
 export * from './text/ArabicShaper';
 export * from './text/BidiResolver';
+export * from './text/Typography';

package/dist/index.js

@@ -3,7 +3,7 @@
 
 
 
-var _chunkXLZDOFSBjs = require('./chunk-XLZDOFSB.js');
+var _chunkZBKKRYDHjs = require('./chunk-ZBKKRYDH.js');
 
 
 
@@ -24,7 +24,9 @@ var _chunkBPMNCGU7js = require('./chunk-BPMNCGU7.js');
 
 
 
-var _chunkNHNOKBD4js = require('./chunk-NHNOKBD4.js');
+
+
+var _chunkDFNK6OV6js = require('./chunk-DFNK6OV6.js');
 
 
 
@@ -41,7 +43,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 _chunkNHNOKBD4js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkDFNK6OV6js.Entity {
   
   
   
@@ -429,7 +431,7 @@ var Scene = (_class2 = class _Scene {
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkNHNOKBD4js.Entity {
+    this.root = new class RootEntity extends _chunkDFNK6OV6js.Entity {
       isPointInside() {
         return false;
       }
@@ -438,7 +440,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkNHNOKBD4js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkDFNK6OV6js.Entity {
       isPointInside() {
         return false;
       }
@@ -505,6 +507,7 @@ var Scene = (_class2 = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
+        _chunkDFNK6OV6js.clearCssLineBoxMetrics.call(void 0, );
         this.markDirty();
       };
       document.fonts.ready.then(this.fontLoadHandler);
@@ -553,6 +556,7 @@ var Scene = (_class2 = class _Scene {
     if (contentEl) {
       contentEl.remove();
       this.contentElements.delete(node.id);
+      this.a11yNeedsReorder = true;
     }
     const el = this.a11yElements.get(node.id);
     if (el) {
@@ -801,42 +805,42 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.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, _chunkNHNOKBD4js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.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, _chunkNHNOKBD4js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           if (typeof capEl.releasePointerCapture === "function")
             capEl.releasePointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -909,7 +913,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -992,6 +996,16 @@ var Scene = (_class2 = class _Scene {
           el.setAttribute("aria-valuenow", attrs.value);
         }
       }
+      if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        const textStyle = attrs.textInputStyle;
+        if (el.style.font !== textStyle.font) el.style.font = textStyle.font;
+        const lineHeight = `${textStyle.lineHeight}px`;
+        if (el.style.lineHeight !== lineHeight) el.style.lineHeight = lineHeight;
+        const padding = `${textStyle.padding}px`;
+        if (el.style.padding !== padding) el.style.padding = padding;
+        if (el.style.boxSizing !== "border-box") el.style.boxSizing = "border-box";
+        if (el instanceof HTMLTextAreaElement) el.style.resize = "none";
+      }
       if (node.a11yFullViewport) {
         el.style.left = "0px";
         el.style.top = "0px";
@@ -1028,6 +1042,7 @@ var Scene = (_class2 = class _Scene {
       if (el) {
         el.remove();
         this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
       }
       return;
     }
@@ -1046,14 +1061,54 @@ var Scene = (_class2 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
       this.a11yRoot.appendChild(el);
       this.contentElements.set(node.id, el);
+      this.a11yNeedsReorder = true;
+    }
+    const lines = projection.lines;
+    if (lines && lines.length > 0) {
+      const signature = JSON.stringify({
+        lines,
+        fallbackFont: _nullishCoalesce(projection.font, () => ( "")),
+        fallbackLineHeight: _nullishCoalesce(projection.lineHeight, () => ( 16))
+      });
+      if (el.dataset.vectoProjectionLines !== signature) {
+        el.replaceChildren();
+        for (let index = 0; index < lines.length; index++) {
+          const line = lines[index];
+          const lineElement = document.createElement("span");
+          const lineFont = _nullishCoalesce(_nullishCoalesce(line.font, () => ( projection.font)), () => ( ""));
+          const lineHeight2 = _nullishCoalesce(_nullishCoalesce(line.lineHeight, () => ( projection.lineHeight)), () => ( 16));
+          lineElement.style.position = "absolute";
+          lineElement.style.left = `${line.x}px`;
+          lineElement.style.top = `${line.y + line.baseline - _chunkDFNK6OV6js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
+          lineElement.style.whiteSpace = "pre";
+          if (lineFont) lineElement.style.font = lineFont;
+          lineElement.style.lineHeight = `${lineHeight2}px`;
+          if (line.runs && line.runs.length > 0) {
+            for (const run of line.runs) {
+              const runElement = document.createElement("span");
+              runElement.textContent = run.text;
+              if (run.font) runElement.style.font = run.font;
+              runElement.style.lineHeight = `${lineHeight2}px`;
+              lineElement.appendChild(runElement);
+            }
+          } else {
+            lineElement.textContent = line.text;
+          }
+          el.appendChild(lineElement);
+          if (index < lines.length - 1) el.appendChild(document.createTextNode("\n"));
+        }
+        el.dataset.vectoProjectionLines = signature;
+      }
+    } else {
+      if (el.textContent !== projection.text) el.textContent = projection.text;
+      delete el.dataset.vectoProjectionLines;
     }
-    if (el.textContent !== projection.text) el.textContent = projection.text;
     const font = _nullishCoalesce(projection.font, () => ( ""));
     if (el.style.font !== font) el.style.font = font;
     const lineHeight = projection.lineHeight !== void 0 ? `${projection.lineHeight}px` : "";
@@ -1071,13 +1126,18 @@ var Scene = (_class2 = class _Scene {
       el.style.cursor = selectable ? "text" : "";
     }
     const { a, b, c, d, e, f } = node.getWorldTransform();
-    el.style.left = `${e}px`;
-    el.style.top = `${f}px`;
+    const contentX = _nullishCoalesce(projection.contentX, () => ( 0));
+    const contentY = _nullishCoalesce(projection.contentY, () => ( 0));
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkDFNK6OV6js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
+    const localY = contentY + baselineOffset;
+    el.style.left = `${e + a * contentX + c * localY}px`;
+    el.style.top = `${f + b * contentX + d * localY}px`;
     if (node.width > 0) el.style.width = `${node.width}px`;
     if (node.height > 0) el.style.height = `${node.height}px`;
     el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
     let visible = true;
     if (node.width > 0 && node.height > 0) {
+      const worldCorners = [];
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -1087,12 +1147,29 @@ var Scene = (_class2 = class _Scene {
         const ly = i & 2 ? node.height : 0;
         const wx = a * lx + c * ly + e;
         const wy = b * lx + d * ly + f;
+        worldCorners.push({ x: wx, y: wy });
         if (wx < minX) minX = wx;
         if (wx > maxX) maxX = wx;
         if (wy < minY) minY = wy;
         if (wy > maxY) maxY = wy;
       }
       visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
+      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
+        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+        let localMinX = Infinity;
+        let localMinY = Infinity;
+        let localMaxX = -Infinity;
+        let localMaxY = -Infinity;
+        for (const corner of worldCorners) {
+          const local = ancestor.worldToLocal(corner.x, corner.y);
+          if (!local) continue;
+          localMinX = Math.min(localMinX, local.x);
+          localMinY = Math.min(localMinY, local.y);
+          localMaxX = Math.max(localMaxX, local.x);
+          localMaxY = Math.max(localMaxY, local.y);
+        }
+        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
+      }
     }
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
@@ -1640,6 +1717,10 @@ var Scene = (_class2 = class _Scene {
   getA11yElement(entityId) {
     return this.a11yElements.get(entityId);
   }
+  /** Gets the static-content DOM projection for an entity ID, when materialized. */
+  getContentElement(entityId) {
+    return this.contentElements.get(entityId);
+  }
   /**
    * Gets the root entity of the scene.
    */
@@ -1808,10 +1889,10 @@ var Scene = (_class2 = class _Scene {
 // src/components/TextEntity.ts
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunkXLZDOFSBjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunkZBKKRYDHjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkNHNOKBD4js.Entity {
+var TextEntity = (_class3 = class extends _chunkDFNK6OV6js.Entity {
   
   
   
@@ -1828,7 +1909,7 @@ var TextEntity = (_class3 = class extends _chunkNHNOKBD4js.Entity {
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunkXLZDOFSBjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _chunkZBKKRYDHjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -1937,7 +2018,7 @@ var TextEntity = (_class3 = class extends _chunkNHNOKBD4js.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkNHNOKBD4js.Entity {
+var GridTextEntity = (_class4 = class extends _chunkDFNK6OV6js.Entity {
   
   __init60() {this.fillStyle = "#ffffff"}
   __init61() {this.grid = []}
@@ -2031,7 +2112,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkNHNOKBD4js.Entity {
+var SplineEntity = (_class5 = class extends _chunkDFNK6OV6js.Entity {
   
   
   
@@ -2400,7 +2481,7 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkNHNOKBD4js.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
   
   __init72() {this.isDOMPortal = true}
   __init73() {this.domListeners = []}
@@ -2435,7 +2516,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkNHNOKBD4js.Entity {
       const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2446,7 +2527,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkNHNOKBD4js.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2454,7 +2535,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkNHNOKBD4js.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkNHNOKBD4js.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2539,4 +2620,6 @@ Scene.registerWebGPUParticleSystemManager(_chunkBPMNCGU7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkNHNOKBD4js.Easing; exports.Entity = _chunkNHNOKBD4js.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkXLZDOFSBjs.LayoutEngine; exports.LayoutResultBuffer = _chunkXLZDOFSBjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkNHNOKBD4js.MSDFFont; exports.MSDFTextEntity = _chunkNHNOKBD4js.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 = _chunkNHNOKBD4js.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkNHNOKBD4js.SpringDriver; exports.SpringPhysics = _chunkNHNOKBD4js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkNHNOKBD4js.TweenDriver; exports.VectoJSEvent = _chunkNHNOKBD4js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkXLZDOFSBjs.computeLineSegments; exports.createCanvasMeasurer = _chunkXLZDOFSBjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkNHNOKBD4js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;
+
+
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkDFNK6OV6js.Easing; exports.Entity = _chunkDFNK6OV6js.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkZBKKRYDHjs.LayoutEngine; exports.LayoutResultBuffer = _chunkZBKKRYDHjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkDFNK6OV6js.MSDFFont; exports.MSDFTextEntity = _chunkDFNK6OV6js.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 = _chunkDFNK6OV6js.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkDFNK6OV6js.SpringDriver; exports.SpringPhysics = _chunkDFNK6OV6js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkDFNK6OV6js.TweenDriver; exports.VectoJSEvent = _chunkDFNK6OV6js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkDFNK6OV6js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkZBKKRYDHjs.computeLineSegments; exports.createCanvasMeasurer = _chunkZBKKRYDHjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkDFNK6OV6js.cssLineBoxBaseline; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkDFNK6OV6js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-FNXOS7IA.mjs";
+} from "./chunk-V7GUWG5C.mjs";
 import {
   CanvasRenderer,
   SVGRenderer,
@@ -23,8 +23,10 @@ import {
   SpringPhysics,
   TweenDriver,
   VectoJSEvent,
+  clearCssLineBoxMetrics,
+  cssLineBoxBaseline,
   isTweenConfig
-} from "./chunk-N7DNUDVY.mjs";
+} from "./chunk-3CODWSF3.mjs";
 import {
   ArabicShaper,
   BidiResolver,
@@ -505,6 +507,7 @@ var Scene = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
+        clearCssLineBoxMetrics();
         this.markDirty();
       };
       document.fonts.ready.then(this.fontLoadHandler);
@@ -553,6 +556,7 @@ var Scene = class _Scene {
     if (contentEl) {
       contentEl.remove();
       this.contentElements.delete(node.id);
+      this.a11yNeedsReorder = true;
     }
     const el = this.a11yElements.get(node.id);
     if (el) {
@@ -992,6 +996,16 @@ var Scene = class _Scene {
           el.setAttribute("aria-valuenow", attrs.value);
         }
       }
+      if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        const textStyle = attrs.textInputStyle;
+        if (el.style.font !== textStyle.font) el.style.font = textStyle.font;
+        const lineHeight = `${textStyle.lineHeight}px`;
+        if (el.style.lineHeight !== lineHeight) el.style.lineHeight = lineHeight;
+        const padding = `${textStyle.padding}px`;
+        if (el.style.padding !== padding) el.style.padding = padding;
+        if (el.style.boxSizing !== "border-box") el.style.boxSizing = "border-box";
+        if (el instanceof HTMLTextAreaElement) el.style.resize = "none";
+      }
       if (node.a11yFullViewport) {
         el.style.left = "0px";
         el.style.top = "0px";
@@ -1028,6 +1042,7 @@ var Scene = class _Scene {
       if (el) {
         el.remove();
         this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
       }
       return;
     }
@@ -1052,8 +1067,48 @@ var Scene = class _Scene {
       );
       this.a11yRoot.appendChild(el);
       this.contentElements.set(node.id, el);
+      this.a11yNeedsReorder = true;
+    }
+    const lines = projection.lines;
+    if (lines && lines.length > 0) {
+      const signature = JSON.stringify({
+        lines,
+        fallbackFont: projection.font ?? "",
+        fallbackLineHeight: projection.lineHeight ?? 16
+      });
+      if (el.dataset.vectoProjectionLines !== signature) {
+        el.replaceChildren();
+        for (let index = 0; index < lines.length; index++) {
+          const line = lines[index];
+          const lineElement = document.createElement("span");
+          const lineFont = line.font ?? projection.font ?? "";
+          const lineHeight2 = line.lineHeight ?? projection.lineHeight ?? 16;
+          lineElement.style.position = "absolute";
+          lineElement.style.left = `${line.x}px`;
+          lineElement.style.top = `${line.y + line.baseline - cssLineBoxBaseline(lineFont, lineHeight2)}px`;
+          lineElement.style.whiteSpace = "pre";
+          if (lineFont) lineElement.style.font = lineFont;
+          lineElement.style.lineHeight = `${lineHeight2}px`;
+          if (line.runs && line.runs.length > 0) {
+            for (const run of line.runs) {
+              const runElement = document.createElement("span");
+              runElement.textContent = run.text;
+              if (run.font) runElement.style.font = run.font;
+              runElement.style.lineHeight = `${lineHeight2}px`;
+              lineElement.appendChild(runElement);
+            }
+          } else {
+            lineElement.textContent = line.text;
+          }
+          el.appendChild(lineElement);
+          if (index < lines.length - 1) el.appendChild(document.createTextNode("\n"));
+        }
+        el.dataset.vectoProjectionLines = signature;
+      }
+    } else {
+      if (el.textContent !== projection.text) el.textContent = projection.text;
+      delete el.dataset.vectoProjectionLines;
     }
-    if (el.textContent !== projection.text) el.textContent = projection.text;
     const font = projection.font ?? "";
     if (el.style.font !== font) el.style.font = font;
     const lineHeight = projection.lineHeight !== void 0 ? `${projection.lineHeight}px` : "";
@@ -1071,13 +1126,18 @@ var Scene = class _Scene {
       el.style.cursor = selectable ? "text" : "";
     }
     const { a, b, c, d, e, f } = node.getWorldTransform();
-    el.style.left = `${e}px`;
-    el.style.top = `${f}px`;
+    const contentX = projection.contentX ?? 0;
+    const contentY = projection.contentY ?? 0;
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - cssLineBoxBaseline(font, projection.lineHeight ?? 16);
+    const localY = contentY + baselineOffset;
+    el.style.left = `${e + a * contentX + c * localY}px`;
+    el.style.top = `${f + b * contentX + d * localY}px`;
     if (node.width > 0) el.style.width = `${node.width}px`;
     if (node.height > 0) el.style.height = `${node.height}px`;
     el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
     let visible = true;
     if (node.width > 0 && node.height > 0) {
+      const worldCorners = [];
       let minX = Infinity;
       let minY = Infinity;
       let maxX = -Infinity;
@@ -1087,12 +1147,29 @@ var Scene = class _Scene {
         const ly = i & 2 ? node.height : 0;
         const wx = a * lx + c * ly + e;
         const wy = b * lx + d * ly + f;
+        worldCorners.push({ x: wx, y: wy });
         if (wx < minX) minX = wx;
         if (wx > maxX) maxX = wx;
         if (wy < minY) minY = wy;
         if (wy > maxY) maxY = wy;
       }
       visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
+      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
+        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+        let localMinX = Infinity;
+        let localMinY = Infinity;
+        let localMaxX = -Infinity;
+        let localMaxY = -Infinity;
+        for (const corner of worldCorners) {
+          const local = ancestor.worldToLocal(corner.x, corner.y);
+          if (!local) continue;
+          localMinX = Math.min(localMinX, local.x);
+          localMinY = Math.min(localMinY, local.y);
+          localMaxX = Math.max(localMaxX, local.x);
+          localMaxY = Math.max(localMaxY, local.y);
+        }
+        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
+      }
     }
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
@@ -1640,6 +1717,10 @@ var Scene = class _Scene {
   getA11yElement(entityId) {
     return this.a11yElements.get(entityId);
   }
+  /** Gets the static-content DOM projection for an entity ID, when materialized. */
+  getContentElement(entityId) {
+    return this.contentElements.get(entityId);
+  }
   /**
    * Gets the root entity of the scene.
    */
@@ -2530,9 +2611,11 @@ export {
   TweenDriver,
   VectoJSEvent,
   WebGPUParticleSystemManager,
+  clearCssLineBoxMetrics,
   computeLineSegments,
   createCanvasMeasurer,
   createWebGLPointRenderer,
+  cssLineBoxBaseline,
   isSafeUrl,
   isTweenConfig,
   loadSpline,

package/dist/layout.js

@@ -3,7 +3,7 @@
 
 
 
-var _chunkXLZDOFSBjs = require('./chunk-XLZDOFSB.js');
+var _chunkZBKKRYDHjs = require('./chunk-ZBKKRYDH.js');
 
 
 var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
@@ -13,4 +13,4 @@ var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 
 
-exports.LayoutEngine = _chunkXLZDOFSBjs.LayoutEngine; exports.LayoutResultBuffer = _chunkXLZDOFSBjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.computeLineSegments = _chunkXLZDOFSBjs.computeLineSegments; exports.createCanvasMeasurer = _chunkXLZDOFSBjs.createCanvasMeasurer;
+exports.LayoutEngine = _chunkZBKKRYDHjs.LayoutEngine; exports.LayoutResultBuffer = _chunkZBKKRYDHjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.computeLineSegments = _chunkZBKKRYDHjs.computeLineSegments; exports.createCanvasMeasurer = _chunkZBKKRYDHjs.createCanvasMeasurer;

package/dist/layout.mjs

@@ -3,7 +3,7 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-FNXOS7IA.mjs";
+} from "./chunk-V7GUWG5C.mjs";
 import {
   LayoutWorkerManager
 } from "./chunk-STWPTWO4.mjs";

package/dist/text/Typography.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Return the baseline offset inside a CSS line box for a canvas-compatible
+ * font. Canvas text and a native editor must use this identical value whenever
+ * one mirrors the other; CSS otherwise centers font metrics in the line box.
+ *
+ * The 0.8 fallback preserves the framework's deterministic, DOM-free text
+ * contract in SSR and test environments where Canvas 2D is unavailable.
+ */
+export declare function cssLineBoxBaseline(font: string, lineHeight: number): number;
+/** Clear cached browser font metrics after a webfont finishes loading. */
+export declare function clearCssLineBoxMetrics(): void;

package/dist/text/index.d.ts

@@ -3,3 +3,4 @@ export * from './BidiResolver';
 export * from './MSDFFont';
 export * from './MSDFTextEntity';
 export * from './SVGEntity';
+export * from './Typography';

package/dist/text.js

@@ -2,7 +2,9 @@
 
 
 
-var _chunkNHNOKBD4js = require('./chunk-NHNOKBD4.js');
+
+
+var _chunkDFNK6OV6js = require('./chunk-DFNK6OV6.js');
 
 
 
@@ -13,4 +15,6 @@ var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 
 
-exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.MSDFFont = _chunkNHNOKBD4js.MSDFFont; exports.MSDFTextEntity = _chunkNHNOKBD4js.MSDFTextEntity; exports.SVGEntity = _chunkNHNOKBD4js.SVGEntity;
+
+
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.MSDFFont = _chunkDFNK6OV6js.MSDFFont; exports.MSDFTextEntity = _chunkDFNK6OV6js.MSDFTextEntity; exports.SVGEntity = _chunkDFNK6OV6js.SVGEntity; exports.clearCssLineBoxMetrics = _chunkDFNK6OV6js.clearCssLineBoxMetrics; exports.cssLineBoxBaseline = _chunkDFNK6OV6js.cssLineBoxBaseline;

package/dist/text.mjs

@@ -1,8 +1,10 @@
 import {
   MSDFFont,
   MSDFTextEntity,
-  SVGEntity
-} from "./chunk-N7DNUDVY.mjs";
+  SVGEntity,
+  clearCssLineBoxMetrics,
+  cssLineBoxBaseline
+} from "./chunk-3CODWSF3.mjs";
 import {
   ArabicShaper,
   BidiResolver
@@ -12,5 +14,7 @@ export {
   BidiResolver,
   MSDFFont,
   MSDFTextEntity,
-  SVGEntity
+  SVGEntity,
+  clearCssLineBoxMetrics,
+  cssLineBoxBaseline
 };

package/dist/tree/Entity.d.ts

@@ -59,6 +59,27 @@ export interface BatchRect {
  * find-in-page, screen readers, SEO crawlers, translation, `#:~:text=`
  * fragments — operates on canvas-rendered text.
  */
+export interface ContentProjectionRun {
+    /** Text written with one CSS font inside a projected visual line. */
+    text: string;
+    /** CSS font shorthand matching the canvas run. */
+    font?: string;
+}
+export interface ContentProjectionLine {
+    /** Text for browser find-in-page and native selection. */
+    text: string;
+    /** Local origin of the visual line inside the entity. */
+    x: number;
+    y: number;
+    /** Canvas baseline relative to `y`. */
+    baseline: number;
+    /** CSS font used for the line when it has no styled runs. */
+    font?: string;
+    /** Explicit line height for this line. */
+    lineHeight?: number;
+    /** Styled text runs in visual order. */
+    runs?: ContentProjectionRun[];
+}
 export interface ContentProjection {
     /** The plain text content as rendered (line breaks as `\n`). */
     text: string;
@@ -71,6 +92,27 @@ export interface ContentProjection {
      * projection never intercepts pointer input meant for the canvas.
      */
     selectable?: boolean;
+    /** Local x-origin of the rendered text inside the owning entity. */
+    contentX?: number;
+    /** Local y-origin of the rendered text inside the owning entity. */
+    contentY?: number;
+    /**
+     * Canvas baseline relative to `contentY` for the first line. When supplied,
+     * Scene aligns the DOM line box baseline instead of assuming both engines
+     * interpret the entity top as a text baseline.
+     */
+    baseline?: number;
+    /** Explicit visual lines for mixed-style or internally inset text. */
+    lines?: ContentProjectionLine[];
+}
+/** Typography for a native input projected by the accessibility layer. */
+export interface TextInputStyle {
+    /** CSS font shorthand shared with the canvas mirror. */
+    font: string;
+    /** Explicit line advance in CSS pixels. */
+    lineHeight: number;
+    /** Inner text inset in CSS pixels. */
+    padding: number;
 }
 /**
  * Semantic attributes an {@link Entity} can project into the accessibility /
@@ -114,6 +156,8 @@ export interface A11yAttributes {
     activedescendant?: string;
     valuemin?: string;
     valuemax?: string;
+    /** Explicit native editor typography; ignored for non-input elements. */
+    textInputStyle?: TextInputStyle;
 }
 /**
  * Union of all pointer/interaction events that can be emitted by an {@link Entity}.

package/dist/tree/Scene.d.ts

@@ -330,6 +330,8 @@ export declare class Scene {
      * Gets the accessibility DOM element projected for the given entity ID.
      */
     getA11yElement(entityId: string): HTMLElement | undefined;
+    /** Gets the static-content DOM projection for an entity ID, when materialized. */
+    getContentElement(entityId: string): HTMLElement | undefined;
     /**
      * Gets the root entity of the scene.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,7 @@
   "scripts": {
     "build": "node scripts/build-worker.js && tsup && tsc -p tsconfig.build.json",
     "test": "vitest run",
-    "test:e2e": "bun e2e/hidpi.e2e.ts"
+    "test:e2e": "bun e2e/hidpi.e2e.ts && bun e2e/text-projection.e2e.ts"
   },
   "dependencies": {},
   "devDependencies": {