@vectojs/core 1.34.0 → 1.34.2

package/dist/{chunk-VFQMETOR.mjs → chunk-TV4ARAC5.mjs}

@@ -1207,6 +1207,12 @@ var MSDFTextEntity = class extends Entity {
   rgbColorCache = /* @__PURE__ */ new Map();
   fontStringCache = [];
   layoutResult = null;
+  /**
+   * Visual rows rebuilt from {@link layoutResult} (see
+   * {@link rebuildProjectionLines}). Empty until a layout reply lands and the
+   * reply's shaped glyphs can be mapped back to the source text 1:1.
+   */
+  projectionLines = [];
   constructor(text, options) {
     super();
     this.font = options.font;
@@ -1319,6 +1325,7 @@ var MSDFTextEntity = class extends Entity {
   }
   queueLayout() {
     this.contentEpoch++;
+    this.projectionLines = [];
     LayoutWorkerManager.getInstance().queueLayout(this.id, this.layoutText, {
       fontId: this.font.id,
       fontSize: this.fontSize,
@@ -1332,6 +1339,8 @@ var MSDFTextEntity = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
+        this.contentEpoch++;
+        this.rebuildProjectionLines();
         this.scene?.markDirty();
       }
     });
@@ -1339,15 +1348,103 @@ var MSDFTextEntity = class extends Entity {
   /**
    * Mirror the rendered text into the DOM content layer: find-in-page, screen
    * readers, crawlers, and translation see the same string the canvas draws.
+   *
+   * `baseline` + `lineHeight` are always emitted (they come from the font
+   * metrics, no layout reply needed), so the DOM line boxes at least land on
+   * the canvas rhythm: the first baseline at `ascender × fontSize` and every
+   * row advancing `(ascender − descender) × fontSize`. Once a layout reply is
+   * in AND its shaped glyphs map back to the source 1:1 (unshaped LTR text —
+   * bidi, shaping, soft hyphens or `\r` all fall back to the coarse branch),
+   * per-line carriers pin each row's baseline exactly to the painted glyphs.
    */
   getContentProjection() {
     if (!this.text) return null;
+    const metrics = this.font.data.metrics;
+    const asc = metrics?.ascender ?? 0.8;
+    const desc = metrics?.descender ?? -0.2;
+    const actualLineHeight = this.lineHeight ?? this.fontSize * (asc - desc);
     return {
       text: this.text,
       font: `${this.fontSize}px ${this.fallbackFont}`,
-      lineHeight: this.lineHeight
+      lineHeight: actualLineHeight,
+      baseline: asc * this.fontSize,
+      lines: this.projectionLines.length > 0 ? this.projectionLines : void 0
     };
   }
+  /**
+   * Group the worker's positioned glyphs into the same visual rows the canvas
+   * draws. Only runs when the reply's glyph sequence equals the source string
+   * (one glyph per source char, no bidi reordering, no shaping, no soft
+   * hyphens, no `\r`) — only then do glyph offsets line up with source offsets
+   * byte-for-byte, which is what keeps find-in-page and the Scene's dev-mode
+   * equality check correct. Every other text falls back to the coarse branch's
+   * `baseline` + `lineHeight`, which still pins the row rhythm.
+   */
+  rebuildProjectionLines() {
+    const res = this.layoutResult;
+    if (!res) {
+      this.projectionLines = [];
+      return;
+    }
+    const shaped = [];
+    for (let i = 0; i < res.codePoints.length; i++) {
+      shaped.push(String.fromCodePoint(res.codePoints[i]));
+    }
+    const sourceWithoutNewlines = this.text.replace(/\n/g, "");
+    if (this.textAlign !== "left" || shaped.join("") !== sourceWithoutNewlines || res.yCoords.length !== res.codePoints.length) {
+      this.projectionLines = [];
+      return;
+    }
+    const metrics = this.font.data.metrics;
+    const asc = metrics?.ascender ?? 0.8;
+    const desc = metrics?.descender ?? -0.2;
+    const actualLineHeight = this.lineHeight ?? this.fontSize * (asc - desc);
+    const baseline = asc * this.fontSize;
+    const srcIdx = [];
+    for (let i = 0; i < this.text.length; i++) {
+      if (this.text[i] !== "\n") srcIdx.push(i);
+    }
+    const glyphsByLine = /* @__PURE__ */ new Map();
+    let maxIdx = -1;
+    for (let i = 0; i < res.yCoords.length; i++) {
+      const idx = Math.round((res.yCoords[i] - baseline) / actualLineHeight);
+      const list = glyphsByLine.get(idx) ?? [];
+      list.push(i);
+      glyphsByLine.set(idx, list);
+      if (idx > maxIdx) maxIdx = idx;
+    }
+    const starts = [];
+    const ends = [];
+    let previousEnd = 0;
+    for (let i = 0; i <= maxIdx; i++) {
+      const glyphs = glyphsByLine.get(i) ?? [];
+      const start = glyphs.length > 0 ? srcIdx[glyphs[0]] : previousEnd;
+      const end = glyphs.length > 0 ? srcIdx[glyphs[glyphs.length - 1]] + 1 : start;
+      starts.push(start);
+      ends.push(end);
+      previousEnd = Math.max(previousEnd, end);
+    }
+    const lines = [];
+    for (let i = 0; i <= maxIdx; i++) {
+      const start = starts[i];
+      const end = ends[i];
+      const nextStart = i + 1 <= maxIdx ? starts[i + 1] : this.text.length;
+      lines.push({
+        text: this.text.slice(start, Math.max(start, end)),
+        separatorAfter: this.text.slice(end, Math.max(end, nextStart)),
+        // Left-aligned LTR glyphs start at x 0. No perGraphemeCarriers: the
+        // DOM measures the FALLBACK font, not the atlas font, so natural flow
+        // at the fallback's own advances stays self-consistent (pin carriers
+        // to atlas x and the fallback text would misalign instead).
+        x: 0,
+        y: i * actualLineHeight,
+        baseline,
+        font: `${this.fontSize}px ${this.fallbackFont}`,
+        lineHeight: actualLineHeight
+      });
+    }
+    this.projectionLines = lines;
+  }
   getContentEpoch() {
     return this.contentEpoch;
   }

package/dist/{chunk-UEIZDNK7.js → chunk-XXU56ZNA.js}

@@ -1209,8 +1209,14 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   __init48() {this.rgbColorCache = /* @__PURE__ */ new Map()}
   __init49() {this.fontStringCache = []}
   __init50() {this.layoutResult = null}
+  /**
+   * Visual rows rebuilt from {@link layoutResult} (see
+   * {@link rebuildProjectionLines}). Empty until a layout reply lands and the
+   * reply's shaped glyphs can be mapped back to the source text 1:1.
+   */
+  __init51() {this.projectionLines = []}
   constructor(text, options) {
-    super();_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);_class3.prototype.__init46.call(this);_class3.prototype.__init47.call(this);_class3.prototype.__init48.call(this);_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);;
+    super();_class3.prototype.__init41.call(this);_class3.prototype.__init42.call(this);_class3.prototype.__init43.call(this);_class3.prototype.__init44.call(this);_class3.prototype.__init45.call(this);_class3.prototype.__init46.call(this);_class3.prototype.__init47.call(this);_class3.prototype.__init48.call(this);_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);_class3.prototype.__init51.call(this);;
     this.font = options.font;
     this.texture = options.texture;
     this.fallbackFont = _nullishCoalesce(options.fallbackFont, () => ( "sans-serif"));
@@ -1321,6 +1327,7 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   }
   queueLayout() {
     this.contentEpoch++;
+    this.projectionLines = [];
     _layout.LayoutWorkerManager.getInstance().queueLayout(this.id, this.layoutText, {
       fontId: this.font.id,
       fontSize: this.fontSize,
@@ -1334,6 +1341,8 @@ var MSDFTextEntity = (_class3 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
+        this.contentEpoch++;
+        this.rebuildProjectionLines();
         _optionalChain([this, 'access', _114 => _114.scene, 'optionalAccess', _115 => _115.markDirty, 'call', _116 => _116()]);
       }
     });
@@ -1341,15 +1350,103 @@ var MSDFTextEntity = (_class3 = class extends Entity {
   /**
    * Mirror the rendered text into the DOM content layer: find-in-page, screen
    * readers, crawlers, and translation see the same string the canvas draws.
+   *
+   * `baseline` + `lineHeight` are always emitted (they come from the font
+   * metrics, no layout reply needed), so the DOM line boxes at least land on
+   * the canvas rhythm: the first baseline at `ascender × fontSize` and every
+   * row advancing `(ascender − descender) × fontSize`. Once a layout reply is
+   * in AND its shaped glyphs map back to the source 1:1 (unshaped LTR text —
+   * bidi, shaping, soft hyphens or `\r` all fall back to the coarse branch),
+   * per-line carriers pin each row's baseline exactly to the painted glyphs.
    */
   getContentProjection() {
     if (!this.text) return null;
+    const metrics = this.font.data.metrics;
+    const asc = _nullishCoalesce(_optionalChain([metrics, 'optionalAccess', _117 => _117.ascender]), () => ( 0.8));
+    const desc = _nullishCoalesce(_optionalChain([metrics, 'optionalAccess', _118 => _118.descender]), () => ( -0.2));
+    const actualLineHeight = _nullishCoalesce(this.lineHeight, () => ( this.fontSize * (asc - desc)));
     return {
       text: this.text,
       font: `${this.fontSize}px ${this.fallbackFont}`,
-      lineHeight: this.lineHeight
+      lineHeight: actualLineHeight,
+      baseline: asc * this.fontSize,
+      lines: this.projectionLines.length > 0 ? this.projectionLines : void 0
     };
   }
+  /**
+   * Group the worker's positioned glyphs into the same visual rows the canvas
+   * draws. Only runs when the reply's glyph sequence equals the source string
+   * (one glyph per source char, no bidi reordering, no shaping, no soft
+   * hyphens, no `\r`) — only then do glyph offsets line up with source offsets
+   * byte-for-byte, which is what keeps find-in-page and the Scene's dev-mode
+   * equality check correct. Every other text falls back to the coarse branch's
+   * `baseline` + `lineHeight`, which still pins the row rhythm.
+   */
+  rebuildProjectionLines() {
+    const res = this.layoutResult;
+    if (!res) {
+      this.projectionLines = [];
+      return;
+    }
+    const shaped = [];
+    for (let i = 0; i < res.codePoints.length; i++) {
+      shaped.push(String.fromCodePoint(res.codePoints[i]));
+    }
+    const sourceWithoutNewlines = this.text.replace(/\n/g, "");
+    if (this.textAlign !== "left" || shaped.join("") !== sourceWithoutNewlines || res.yCoords.length !== res.codePoints.length) {
+      this.projectionLines = [];
+      return;
+    }
+    const metrics = this.font.data.metrics;
+    const asc = _nullishCoalesce(_optionalChain([metrics, 'optionalAccess', _119 => _119.ascender]), () => ( 0.8));
+    const desc = _nullishCoalesce(_optionalChain([metrics, 'optionalAccess', _120 => _120.descender]), () => ( -0.2));
+    const actualLineHeight = _nullishCoalesce(this.lineHeight, () => ( this.fontSize * (asc - desc)));
+    const baseline = asc * this.fontSize;
+    const srcIdx = [];
+    for (let i = 0; i < this.text.length; i++) {
+      if (this.text[i] !== "\n") srcIdx.push(i);
+    }
+    const glyphsByLine = /* @__PURE__ */ new Map();
+    let maxIdx = -1;
+    for (let i = 0; i < res.yCoords.length; i++) {
+      const idx = Math.round((res.yCoords[i] - baseline) / actualLineHeight);
+      const list = _nullishCoalesce(glyphsByLine.get(idx), () => ( []));
+      list.push(i);
+      glyphsByLine.set(idx, list);
+      if (idx > maxIdx) maxIdx = idx;
+    }
+    const starts = [];
+    const ends = [];
+    let previousEnd = 0;
+    for (let i = 0; i <= maxIdx; i++) {
+      const glyphs = _nullishCoalesce(glyphsByLine.get(i), () => ( []));
+      const start = glyphs.length > 0 ? srcIdx[glyphs[0]] : previousEnd;
+      const end = glyphs.length > 0 ? srcIdx[glyphs[glyphs.length - 1]] + 1 : start;
+      starts.push(start);
+      ends.push(end);
+      previousEnd = Math.max(previousEnd, end);
+    }
+    const lines = [];
+    for (let i = 0; i <= maxIdx; i++) {
+      const start = starts[i];
+      const end = ends[i];
+      const nextStart = i + 1 <= maxIdx ? starts[i + 1] : this.text.length;
+      lines.push({
+        text: this.text.slice(start, Math.max(start, end)),
+        separatorAfter: this.text.slice(end, Math.max(end, nextStart)),
+        // Left-aligned LTR glyphs start at x 0. No perGraphemeCarriers: the
+        // DOM measures the FALLBACK font, not the atlas font, so natural flow
+        // at the fallback's own advances stays self-consistent (pin carriers
+        // to atlas x and the fallback text would misalign instead).
+        x: 0,
+        y: i * actualLineHeight,
+        baseline,
+        font: `${this.fontSize}px ${this.fallbackFont}`,
+        lineHeight: actualLineHeight
+      });
+    }
+    this.projectionLines = lines;
+  }
   getContentEpoch() {
     return this.contentEpoch;
   }
@@ -1486,23 +1583,23 @@ var SVGEntity = (_class4 = class extends Entity {
    * rasterized. Set to `'transparent'` to opt out and keep the box empty.
    * Default `'rgba(248,113,113,0.9)'`.
    */
-  __init51() {this.fallbackStroke = "rgba(248,113,113,0.9)"}
+  __init52() {this.fallbackStroke = "rgba(248,113,113,0.9)"}
   /** Fill behind the fallback marker. Default `'rgba(248,113,113,0.12)'`. */
-  __init52() {this.fallbackFill = "rgba(248,113,113,0.12)"}
-  __init53() {this.svgSource = ""}
-  __init54() {this.imageBitmap = null}
-  __init55() {this.imageElement = null}
-  __init56() {this.blobURL = null}
-  __init57() {this.currentImg = null}
-  __init58() {this.lodTimeout = null}
-  __init59() {this.rasterFailed = false}
-  __init60() {this.cachedDoc = null}
-  __init61() {this.baseWidth = 100}
-  __init62() {this.baseHeight = 100}
-  __init63() {this.lastRasterizedScale = 1}
-  __init64() {this.targetScale = 1}
+  __init53() {this.fallbackFill = "rgba(248,113,113,0.12)"}
+  __init54() {this.svgSource = ""}
+  __init55() {this.imageBitmap = null}
+  __init56() {this.imageElement = null}
+  __init57() {this.blobURL = null}
+  __init58() {this.currentImg = null}
+  __init59() {this.lodTimeout = null}
+  __init60() {this.rasterFailed = false}
+  __init61() {this.cachedDoc = null}
+  __init62() {this.baseWidth = 100}
+  __init63() {this.baseHeight = 100}
+  __init64() {this.lastRasterizedScale = 1}
+  __init65() {this.targetScale = 1}
   constructor(svgSource, id) {
-    super(id);_class4.prototype.__init51.call(this);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);_class4.prototype.__init59.call(this);_class4.prototype.__init60.call(this);_class4.prototype.__init61.call(this);_class4.prototype.__init62.call(this);_class4.prototype.__init63.call(this);_class4.prototype.__init64.call(this);;
+    super(id);_class4.prototype.__init52.call(this);_class4.prototype.__init53.call(this);_class4.prototype.__init54.call(this);_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);_class4.prototype.__init59.call(this);_class4.prototype.__init60.call(this);_class4.prototype.__init61.call(this);_class4.prototype.__init62.call(this);_class4.prototype.__init63.call(this);_class4.prototype.__init64.call(this);_class4.prototype.__init65.call(this);;
     this.setSVGSource(svgSource);
   }
   setSVGSource(svgSource) {

package/dist/components/TextEntity.d.ts

@@ -14,10 +14,28 @@ export declare class TextEntity extends Entity {
     private isHovered;
     /** Bumped by {@link applyLayout}; read by `Scene` to skip an unchanged sync. */
     private contentEpoch;
+    /**
+     * Visual lines with real canvas geometry, rebuilt by {@link applyLayout}
+     * exactly when `this.nodes` changes.
+     *
+     * Without this the Scene placed the DOM copy at the entity origin and let the
+     * browser flow it at CSS `normal` line-height, while the canvas lays lines out
+     * at `1.5em` pitch with the baseline at `0.8em` — so every line after the
+     * first drifted further from the painted glyphs (measured ~6 px on line 0 and
+     * ~0.35 em per line for a 24 px font, Firefox). Per-line carriers pin the DOM
+     * baseline to the canvas baseline by construction, same as `ui/Text`.
+     */
+    private projectionLines;
     constructor(text: string, atlas: any, maxWidth: number, fontSize?: number);
     /**
      * Mirror the rendered text into the DOM content layer: find-in-page, screen
      * readers, crawlers, and translation see the same string the canvas draws.
+     *
+     * Each visual line is emitted with its own y/baseline/line-height so the DOM
+     * line boxes sit exactly on the drawn glyphs instead of flowing at the
+     * browser's `normal` metrics. Line text is the LOGICAL source slice (not the
+     * per-glyph visual text), so shaped or reordered content still copies and
+     * finds in source order — the same contract `ui/Text` ships.
      */
     getContentProjection(): ContentProjection | null;
     getContentEpoch(): number;

package/dist/index.js

@@ -19,7 +19,7 @@ var _chunkM73XB4ZKjs = require('./chunk-M73XB4ZK.js');
 
 
 
-var _chunkUEIZDNK7js = require('./chunk-UEIZDNK7.js');
+var _chunkXXU56ZNAjs = require('./chunk-XXU56ZNA.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -31,7 +31,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 _chunkUEIZDNK7js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkXXU56ZNAjs.Entity {
   
   
   
@@ -438,6 +438,10 @@ function measureVectoUserTiming(name, durationMs) {
 }
 
 // src/tree/Scene.ts
+
+
+
+
 var _text = require('@vectojs/text'); _createStarExport(_text);
 
 // src/tree/scene/a11y-dom.ts
@@ -4732,7 +4736,7 @@ var Scene = (_class15 = class _Scene {
       this.forcedColorsChangeHandler = () => this.markDirty();
       _optionalChain([this, 'access', _118 => _118.forcedColorsQuery, 'access', _119 => _119.addEventListener, 'optionalCall', _120 => _120("change", this.forcedColorsChangeHandler)]);
     }
-    this.root = new class RootEntity extends _chunkUEIZDNK7js.Entity {
+    this.root = new class RootEntity extends _chunkXXU56ZNAjs.Entity {
       isPointInside() {
         return false;
       }
@@ -4742,7 +4746,7 @@ var Scene = (_class15 = class _Scene {
     }("root");
     this.root._scene = this;
     this._wasmBackend = new WasmBackendFacade(this.root);
-    this.overlayRoot = new class OverlayRoot extends _chunkUEIZDNK7js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkXXU56ZNAjs.Entity {
       isPointInside() {
         return false;
       }
@@ -5063,7 +5067,7 @@ var Scene = (_class15 = class _Scene {
       }
       if (this.hoveredA11yElements.has(el)) {
         this.hoveredA11yElements.delete(el);
-        node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointerleave", node, void 0, false));
+        node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerleave", node, void 0, false));
       }
       this.preserveFocusOnRemoval(el);
       el.remove();
@@ -5654,20 +5658,20 @@ var Scene = (_class15 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("dblclick", (e) => {
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("dblclick", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("dblclick", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
           this.hoveredA11yElements.add(el);
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
           this.hoveredA11yElements.delete(el);
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -5683,24 +5687,24 @@ var Scene = (_class15 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
@@ -5725,10 +5729,10 @@ var Scene = (_class15 = class _Scene {
         );
         emitInitialScroll = emitScroll;
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -5794,7 +5798,7 @@ var Scene = (_class15 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -6231,7 +6235,7 @@ var Scene = (_class15 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -6287,6 +6291,8 @@ var Scene = (_class15 = class _Scene {
             const separator = _nullishCoalesce(line.separatorAfter, () => ( (index < lines.length - 1 ? "\n" : "")));
             if (line.runs && line.runs.length > 0) {
               const positioned = line.runs.some((run) => run.x !== void 0);
+              const flowRelative = positioned && line.runs.every((run) => run.x === void 0 || run.width !== void 0);
+              let runningX = line.x;
               for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
                 const run = line.runs[runIndex];
                 const runElement = document.createElement("span");
@@ -6294,8 +6300,16 @@ var Scene = (_class15 = class _Scene {
                 if (run.font) runElement.style.font = run.font;
                 runElement.style.lineHeight = `${lineHeight2}px`;
                 if (positioned && run.x !== void 0) {
-                  runElement.style.position = "absolute";
-                  runElement.style.left = `${run.x - line.x}px`;
+                  if (flowRelative) {
+                    runElement.style.position = "relative";
+                    runElement.style.display = "inline-block";
+                    runElement.style.left = `${run.x - runningX}px`;
+                    runElement.style.boxSizing = "border-box";
+                    runningX += run.width;
+                  } else {
+                    runElement.style.position = "absolute";
+                    runElement.style.left = `${run.x - line.x}px`;
+                  }
                   runElement.style.top = "0";
                   if (run.width !== void 0) runElement.style.width = `${run.width}px`;
                   runElement.style.whiteSpace = "pre";
@@ -6305,6 +6319,35 @@ var Scene = (_class15 = class _Scene {
                 }
                 lineElement.appendChild(runElement);
               }
+            } else if (line.perGraphemeCarriers && line.text.length > 0) {
+              const mctx = _text.getSharedMeasuringContext.call(void 0, );
+              if (mctx) {
+                mctx.font = lineFont;
+                const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+                const segments = [...segmenter.segment(line.text)];
+                let runningX = 0;
+                for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+                  const { segment, index: index2 } = segments[segIdx];
+                  const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
+                  const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
+                  const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
+                  const carrierEl = document.createElement("span");
+                  carrierEl.textContent = segment;
+                  carrierEl.style.position = "relative";
+                  carrierEl.style.display = "inline-block";
+                  carrierEl.style.left = `${canvasX - runningX}px`;
+                  carrierEl.style.width = `${canvasWidth}px`;
+                  carrierEl.style.boxSizing = "border-box";
+                  carrierEl.style.lineHeight = `${lineHeight2}px`;
+                  carrierEl.style.whiteSpace = "pre";
+                  carrierEl.style.verticalAlign = "top";
+                  carrierEl.style.unicodeBidi = "isolate";
+                  lineElement.appendChild(carrierEl);
+                  runningX += canvasWidth;
+                }
+              } else {
+                lineElement.textContent = line.text;
+              }
             } else {
               lineElement.textContent = line.text;
             }
@@ -6838,7 +6881,7 @@ var Scene = (_class15 = class _Scene {
     let walkHadAnimation = false;
     let walkHadInteractive = false;
     const runUpdate = (node) => {
-      const overridesUpdate = node.update !== _chunkUEIZDNK7js.Entity.prototype.update;
+      const overridesUpdate = node.update !== _chunkXXU56ZNAjs.Entity.prototype.update;
       let pending = node.hasPendingAnimations();
       if (pending || overridesUpdate) {
         node.update(dt, time);
@@ -6847,7 +6890,7 @@ var Scene = (_class15 = class _Scene {
       if (pending) walkHadAnimation = true;
       if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
       if (this._devActive && this._devFrameCount % 120 === 0) {
-        if (overridesUpdate && node.hasPendingAnimations === _chunkUEIZDNK7js.Entity.prototype.hasPendingAnimations) {
+        if (overridesUpdate && node.hasPendingAnimations === _chunkXXU56ZNAjs.Entity.prototype.hasPendingAnimations) {
           this._devWarn(
             `Entity "${node.id}" overrides update() but not hasPendingAnimations(). Custom motion in update() without overriding hasPendingAnimations() causes the idle throttle to drop the animation to ~2fps. Override hasPendingAnimations() to return true while motion is in flight.`
           );
@@ -7273,7 +7316,7 @@ function defaultMeasurer() {
   sharedMeasurer ??= _layout.resolveGlyphMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class16 = class extends _chunkUEIZDNK7js.Entity {
+var TextEntity = (_class16 = class extends _chunkXXU56ZNAjs.Entity {
   
   
   
@@ -7287,8 +7330,20 @@ var TextEntity = (_class16 = class extends _chunkUEIZDNK7js.Entity {
   __init181() {this.isHovered = false}
   /** Bumped by {@link applyLayout}; read by `Scene` to skip an unchanged sync. */
   __init182() {this.contentEpoch = 0}
+  /**
+   * Visual lines with real canvas geometry, rebuilt by {@link applyLayout}
+   * exactly when `this.nodes` changes.
+   *
+   * Without this the Scene placed the DOM copy at the entity origin and let the
+   * browser flow it at CSS `normal` line-height, while the canvas lays lines out
+   * at `1.5em` pitch with the baseline at `0.8em` — so every line after the
+   * first drifted further from the painted glyphs (measured ~6 px on line 0 and
+   * ~0.35 em per line for a 24 px font, Firefox). Per-line carriers pin the DOM
+   * baseline to the canvas baseline by construction, same as `ui/Text`.
+   */
+  __init183() {this.projectionLines = []}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class16.prototype.__init176.call(this);_class16.prototype.__init177.call(this);_class16.prototype.__init178.call(this);_class16.prototype.__init179.call(this);_class16.prototype.__init180.call(this);_class16.prototype.__init181.call(this);_class16.prototype.__init182.call(this);;
+    super();_class16.prototype.__init176.call(this);_class16.prototype.__init177.call(this);_class16.prototype.__init178.call(this);_class16.prototype.__init179.call(this);_class16.prototype.__init180.call(this);_class16.prototype.__init181.call(this);_class16.prototype.__init182.call(this);_class16.prototype.__init183.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
@@ -7302,10 +7357,21 @@ var TextEntity = (_class16 = class extends _chunkUEIZDNK7js.Entity {
   /**
    * Mirror the rendered text into the DOM content layer: find-in-page, screen
    * readers, crawlers, and translation see the same string the canvas draws.
+   *
+   * Each visual line is emitted with its own y/baseline/line-height so the DOM
+   * line boxes sit exactly on the drawn glyphs instead of flowing at the
+   * browser's `normal` metrics. Line text is the LOGICAL source slice (not the
+   * per-glyph visual text), so shaped or reordered content still copies and
+   * finds in source order — the same contract `ui/Text` ships.
    */
   getContentProjection() {
     if (!this.text) return null;
-    return { text: this.text, font: `${this.fontSize}px sans-serif` };
+    return {
+      text: this.text,
+      font: `${this.fontSize}px sans-serif`,
+      lineHeight: this.fontSize * 1.5,
+      lines: this.projectionLines
+    };
   }
   getContentEpoch() {
     return this.contentEpoch;
@@ -7362,6 +7428,55 @@ var TextEntity = (_class16 = class extends _chunkUEIZDNK7js.Entity {
     this.width = result.totalWidth;
     this.height = result.totalHeight;
     this.a11yOffsetY = 0;
+    const lineQuantum = this.fontSize * 1.5;
+    const nodesByLine = /* @__PURE__ */ new Map();
+    let maxIdx = -1;
+    for (const node of this.nodes) {
+      const idx = Math.round(node.y / lineQuantum);
+      const list = _nullishCoalesce(nodesByLine.get(idx), () => ( []));
+      list.push(node);
+      nodesByLine.set(idx, list);
+      if (idx > maxIdx) maxIdx = idx;
+    }
+    const justify = this.layout.textAlign === "justify";
+    const starts = [];
+    const ends = [];
+    let previousEnd = 0;
+    for (let i = 0; i <= maxIdx; i++) {
+      const nodes = _nullishCoalesce(nodesByLine.get(i), () => ( []));
+      let start = nodes.length > 0 ? Math.min(...nodes.map((node) => _nullishCoalesce(node.sourceIndex, () => ( previousEnd)))) : previousEnd;
+      const end = nodes.length > 0 ? Math.max(
+        ...nodes.map((node) => (_nullishCoalesce(node.sourceIndex, () => ( previousEnd))) + (_nullishCoalesce(node.sourceLength, () => ( 0))))
+      ) : start;
+      if (i === 0) start = 0;
+      starts.push(start);
+      ends.push(end);
+      previousEnd = Math.max(previousEnd, end);
+    }
+    const lines = [];
+    for (let i = 0; i <= maxIdx; i++) {
+      const nodes = _nullishCoalesce(nodesByLine.get(i), () => ( []));
+      const start = starts[i];
+      const end = ends[i];
+      const nextStart = i + 1 <= maxIdx ? starts[i + 1] : this.text.length;
+      const hasRtl = nodes.some((node) => node.isRTL === true);
+      lines.push({
+        text: this.text.slice(start, Math.max(start, end)),
+        separatorAfter: this.text.slice(end, Math.max(end, nextStart)),
+        x: 0,
+        y: i * lineQuantum,
+        baseline: this.fontSize * 0.8,
+        font: `${this.fontSize}px sans-serif`,
+        lineHeight: lineQuantum,
+        // Per-grapheme carriers pin each cluster to its canvas-measured x so
+        // Gecko's grid-fit advance rounding cannot drift the find-in-page
+        // highlight off the drawn glyphs. Bidi lines must keep one text node
+        // (DOM order is logical; per-glyph carriers break caret mapping), and
+        // justify moves glyphs off their natural x, so both fall back to flow.
+        ...hasRtl || justify ? {} : { perGraphemeCarriers: true }
+      });
+    }
+    this.projectionLines = lines;
   }
   isPointInside(globalX, globalY) {
     const local = this.worldToLocal(globalX, globalY);
@@ -7405,17 +7520,17 @@ var TextEntity = (_class16 = class extends _chunkUEIZDNK7js.Entity {
 }, _class16);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class17 = class extends _chunkUEIZDNK7js.Entity {
+var GridTextEntity = (_class17 = class extends _chunkXXU56ZNAjs.Entity {
   
-  __init183() {this.fillStyle = "#ffffff"}
-  __init184() {this.grid = []}
+  __init184() {this.fillStyle = "#ffffff"}
+  __init185() {this.grid = []}
   // Array of rows
-  __init185() {this.cols = 0}
-  __init186() {this.rows = 0}
+  __init186() {this.cols = 0}
+  __init187() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class17.prototype.__init183.call(this);_class17.prototype.__init184.call(this);_class17.prototype.__init185.call(this);_class17.prototype.__init186.call(this);;
+    super();_class17.prototype.__init184.call(this);_class17.prototype.__init185.call(this);_class17.prototype.__init186.call(this);_class17.prototype.__init187.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -7499,7 +7614,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class18 = class extends _chunkUEIZDNK7js.Entity {
+var SplineEntity = (_class18 = class extends _chunkXXU56ZNAjs.Entity {
   
   
   
@@ -7507,11 +7622,11 @@ var SplineEntity = (_class18 = class extends _chunkUEIZDNK7js.Entity {
   
   
   
-  __init187() {this.offscreen = null}
-  __init188() {this.baked = false}
+  __init188() {this.offscreen = null}
+  __init189() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init189() {this.bakedWidth = 0}
-  __init190() {this.bakedHeight = 0}
+  __init190() {this.bakedWidth = 0}
+  __init191() {this.bakedHeight = 0}
   /**
    * Gradient strokes can't be baked to a solid-color bitmap; they render
    * per-frame. Derived from `_doc`, so it is NOT readonly — assigning a new
@@ -7519,7 +7634,7 @@ var SplineEntity = (_class18 = class extends _chunkUEIZDNK7js.Entity {
    */
   
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init191() {this.polylines = null}
+  __init192() {this.polylines = null}
   /**
    * The spline document to render. Assigning a new document invalidates all
    * caches (baked canvas, flattened polylines, bounds).
@@ -7553,9 +7668,9 @@ var SplineEntity = (_class18 = class extends _chunkUEIZDNK7js.Entity {
    * local bounds after painting the curves. Useful for drag feedback and
    * debugging hit areas. Defaults to `false`.
    */
-  __init192() {this.showBounds = false}
+  __init193() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class18.prototype.__init187.call(this);_class18.prototype.__init188.call(this);_class18.prototype.__init189.call(this);_class18.prototype.__init190.call(this);_class18.prototype.__init191.call(this);_class18.prototype.__init192.call(this);;
+    super();_class18.prototype.__init188.call(this);_class18.prototype.__init189.call(this);_class18.prototype.__init190.call(this);_class18.prototype.__init191.call(this);_class18.prototype.__init192.call(this);_class18.prototype.__init193.call(this);;
     this._doc = doc;
     this._lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -7820,7 +7935,7 @@ async function loadSpline(url) {
 }
 
 // src/components/Rect.ts
-var Rect = class extends _chunkUEIZDNK7js.Entity {
+var Rect = class extends _chunkXXU56ZNAjs.Entity {
   
   
   
@@ -7876,7 +7991,7 @@ var Rect = class extends _chunkUEIZDNK7js.Entity {
 };
 
 // src/components/Circle.ts
-var Circle = class extends _chunkUEIZDNK7js.Entity {
+var Circle = class extends _chunkXXU56ZNAjs.Entity {
   
   
   
@@ -7940,7 +8055,7 @@ var Circle = class extends _chunkUEIZDNK7js.Entity {
 };
 
 // src/components/Group.ts
-var Group = class extends _chunkUEIZDNK7js.Entity {
+var Group = class extends _chunkXXU56ZNAjs.Entity {
   constructor(...children) {
     super();
     if (children.length > 0) this.add(...children);
@@ -7959,21 +8074,21 @@ var _math = require('@vectojs/math'); _createStarExport(_math);
 
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class19 = class extends _chunkUEIZDNK7js.Entity {
+var DOMPortalEntity = (_class19 = class extends _chunkXXU56ZNAjs.Entity {
   
-  __init193() {this.isDOMPortal = true}
-  __init194() {this.domListeners = []}
-  __init195() {this.resizeObserver = null}
-  __init196() {this.domBound = false}
-  __init197() {this.cachedWidth = 100}
-  __init198() {this.cachedHeight = 100}
-  __init199() {this.lastWidth = ""}
-  __init200() {this.lastHeight = ""}
-  __init201() {this.lastTransform = ""}
-  __init202() {this.lastZIndex = ""}
-  __init203() {this.lastOpacity = ""}
+  __init194() {this.isDOMPortal = true}
+  __init195() {this.domListeners = []}
+  __init196() {this.resizeObserver = null}
+  __init197() {this.domBound = false}
+  __init198() {this.cachedWidth = 100}
+  __init199() {this.cachedHeight = 100}
+  __init200() {this.lastWidth = ""}
+  __init201() {this.lastHeight = ""}
+  __init202() {this.lastTransform = ""}
+  __init203() {this.lastZIndex = ""}
+  __init204() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class19.prototype.__init193.call(this);_class19.prototype.__init194.call(this);_class19.prototype.__init195.call(this);_class19.prototype.__init196.call(this);_class19.prototype.__init197.call(this);_class19.prototype.__init198.call(this);_class19.prototype.__init199.call(this);_class19.prototype.__init200.call(this);_class19.prototype.__init201.call(this);_class19.prototype.__init202.call(this);_class19.prototype.__init203.call(this);;
+    super(id);_class19.prototype.__init194.call(this);_class19.prototype.__init195.call(this);_class19.prototype.__init196.call(this);_class19.prototype.__init197.call(this);_class19.prototype.__init198.call(this);_class19.prototype.__init199.call(this);_class19.prototype.__init200.call(this);_class19.prototype.__init201.call(this);_class19.prototype.__init202.call(this);_class19.prototype.__init203.call(this);_class19.prototype.__init204.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -8015,7 +8130,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkUEIZDNK7js.Entity {
     ];
     for (const type of events) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)(type, this, e));
+        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(type, this, e));
       };
       this.domElement.addEventListener(type, handler);
       this.domListeners.push({ type, handler, capture: false });
@@ -8026,7 +8141,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkUEIZDNK7js.Entity {
     ];
     for (const { native, vecto } of hoverEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)(vecto, this, e, false));
+        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(vecto, this, e, false));
       };
       this.domElement.addEventListener(native, handler);
       this.domListeners.push({ type: native, handler, capture: false });
@@ -8034,7 +8149,7 @@ var DOMPortalEntity = (_class19 = class extends _chunkUEIZDNK7js.Entity {
     const focusEvents = ["focus", "blur"];
     for (const type of focusEvents) {
       const handler = (e) => {
-        this.dispatchEvent(new (0, _chunkUEIZDNK7js.VectoJSEvent)(type, this, e, true));
+        this.dispatchEvent(new (0, _chunkXXU56ZNAjs.VectoJSEvent)(type, this, e, true));
       };
       this.domElement.addEventListener(type, handler, true);
       this.domListeners.push({ type, handler, capture: true });
@@ -8132,4 +8247,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkM73XB4ZKjs.WebGPUParticleSystemM
 
 
 
-exports.CanvasRenderer = _chunkM73XB4ZKjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DEFAULT_CONTENT_SEMANTIC_BUDGET = DEFAULT_CONTENT_SEMANTIC_BUDGET; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkUEIZDNK7js.Entity; exports.GlyphRasterAtlas = _chunkM73XB4ZKjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkUEIZDNK7js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SCENE_OPTION_KEYS = SCENE_OPTION_KEYS; exports.SVGEntity = _chunkUEIZDNK7js.SVGEntity; exports.SVGRenderer = _chunkM73XB4ZKjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkM73XB4ZKjs.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkUEIZDNK7js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkM73XB4ZKjs.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.contentLineInHint = _chunkUEIZDNK7js.contentLineInHint; exports.createWebGLPointRenderer = _chunkM73XB4ZKjs.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.installRendererDevTraps = _chunkM73XB4ZKjs.installRendererDevTraps; exports.isRendererDevMode = _chunkM73XB4ZKjs.isRendererDevMode; exports.isSafeUrl = _chunkM73XB4ZKjs.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkM73XB4ZKjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkM73XB4ZKjs.sanitizeUrl; exports.setRendererDevMode = _chunkM73XB4ZKjs.setRendererDevMode;
+exports.CanvasRenderer = _chunkM73XB4ZKjs.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DEFAULT_CONTENT_SEMANTIC_BUDGET = DEFAULT_CONTENT_SEMANTIC_BUDGET; exports.DOMPortalEntity = DOMPortalEntity; exports.Entity = _chunkXXU56ZNAjs.Entity; exports.GlyphRasterAtlas = _chunkM73XB4ZKjs.GlyphRasterAtlas; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.MSDFTextEntity = _chunkXXU56ZNAjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SCENE_OPTION_KEYS = SCENE_OPTION_KEYS; exports.SVGEntity = _chunkXXU56ZNAjs.SVGEntity; exports.SVGRenderer = _chunkM73XB4ZKjs.SVGRenderer; exports.Scene = Scene; exports.SplineEntity = SplineEntity; exports.TextEntity = TextEntity; exports.TextRasterCache = _chunkM73XB4ZKjs.TextRasterCache; exports.VECTO_USER_TIMING = VECTO_USER_TIMING; exports.VectoJSEvent = _chunkXXU56ZNAjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkM73XB4ZKjs.WebGPUParticleSystemManager; exports.beginVectoUserTiming = beginVectoUserTiming; exports.contentLineInHint = _chunkXXU56ZNAjs.contentLineInHint; exports.createWebGLPointRenderer = _chunkM73XB4ZKjs.createWebGLPointRenderer; exports.endVectoUserTiming = endVectoUserTiming; exports.installRendererDevTraps = _chunkM73XB4ZKjs.installRendererDevTraps; exports.isRendererDevMode = _chunkM73XB4ZKjs.isRendererDevMode; exports.isSafeUrl = _chunkM73XB4ZKjs.isSafeUrl; exports.loadSpline = loadSpline; exports.measureVectoUserTiming = measureVectoUserTiming; exports.parseColorToRGBA = _chunkM73XB4ZKjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkM73XB4ZKjs.sanitizeUrl; exports.setRendererDevMode = _chunkM73XB4ZKjs.setRendererDevMode;

package/dist/index.mjs

@@ -18,7 +18,7 @@ import {
   SVGEntity,
   VectoJSEvent,
   contentLineInHint
-} from "./chunk-VFQMETOR.mjs";
+} from "./chunk-TV4ARAC5.mjs";
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -437,7 +437,11 @@ function measureVectoUserTiming(name, durationMs) {
 }
 
 // src/tree/Scene.ts
-import { clearCssLineBoxMetrics, cssLineBoxBaseline as cssLineBoxBaseline2 } from "@vectojs/text";
+import {
+  clearCssLineBoxMetrics,
+  cssLineBoxBaseline as cssLineBoxBaseline2,
+  getSharedMeasuringContext
+} from "@vectojs/text";
 
 // src/tree/scene/a11y-dom.ts
 function isNativelyFocusable(element) {
@@ -6286,6 +6290,8 @@ var Scene = class _Scene {
             const separator = line.separatorAfter ?? (index < lines.length - 1 ? "\n" : "");
             if (line.runs && line.runs.length > 0) {
               const positioned = line.runs.some((run) => run.x !== void 0);
+              const flowRelative = positioned && line.runs.every((run) => run.x === void 0 || run.width !== void 0);
+              let runningX = line.x;
               for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
                 const run = line.runs[runIndex];
                 const runElement = document.createElement("span");
@@ -6293,8 +6299,16 @@ var Scene = class _Scene {
                 if (run.font) runElement.style.font = run.font;
                 runElement.style.lineHeight = `${lineHeight2}px`;
                 if (positioned && run.x !== void 0) {
-                  runElement.style.position = "absolute";
-                  runElement.style.left = `${run.x - line.x}px`;
+                  if (flowRelative) {
+                    runElement.style.position = "relative";
+                    runElement.style.display = "inline-block";
+                    runElement.style.left = `${run.x - runningX}px`;
+                    runElement.style.boxSizing = "border-box";
+                    runningX += run.width;
+                  } else {
+                    runElement.style.position = "absolute";
+                    runElement.style.left = `${run.x - line.x}px`;
+                  }
                   runElement.style.top = "0";
                   if (run.width !== void 0) runElement.style.width = `${run.width}px`;
                   runElement.style.whiteSpace = "pre";
@@ -6304,6 +6318,35 @@ var Scene = class _Scene {
                 }
                 lineElement.appendChild(runElement);
               }
+            } else if (line.perGraphemeCarriers && line.text.length > 0) {
+              const mctx = getSharedMeasuringContext();
+              if (mctx) {
+                mctx.font = lineFont;
+                const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+                const segments = [...segmenter.segment(line.text)];
+                let runningX = 0;
+                for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+                  const { segment, index: index2 } = segments[segIdx];
+                  const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
+                  const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
+                  const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
+                  const carrierEl = document.createElement("span");
+                  carrierEl.textContent = segment;
+                  carrierEl.style.position = "relative";
+                  carrierEl.style.display = "inline-block";
+                  carrierEl.style.left = `${canvasX - runningX}px`;
+                  carrierEl.style.width = `${canvasWidth}px`;
+                  carrierEl.style.boxSizing = "border-box";
+                  carrierEl.style.lineHeight = `${lineHeight2}px`;
+                  carrierEl.style.whiteSpace = "pre";
+                  carrierEl.style.verticalAlign = "top";
+                  carrierEl.style.unicodeBidi = "isolate";
+                  lineElement.appendChild(carrierEl);
+                  runningX += canvasWidth;
+                }
+              } else {
+                lineElement.textContent = line.text;
+              }
             } else {
               lineElement.textContent = line.text;
             }
@@ -7286,6 +7329,18 @@ var TextEntity = class extends Entity {
   isHovered = false;
   /** Bumped by {@link applyLayout}; read by `Scene` to skip an unchanged sync. */
   contentEpoch = 0;
+  /**
+   * Visual lines with real canvas geometry, rebuilt by {@link applyLayout}
+   * exactly when `this.nodes` changes.
+   *
+   * Without this the Scene placed the DOM copy at the entity origin and let the
+   * browser flow it at CSS `normal` line-height, while the canvas lays lines out
+   * at `1.5em` pitch with the baseline at `0.8em` — so every line after the
+   * first drifted further from the painted glyphs (measured ~6 px on line 0 and
+   * ~0.35 em per line for a 24 px font, Firefox). Per-line carriers pin the DOM
+   * baseline to the canvas baseline by construction, same as `ui/Text`.
+   */
+  projectionLines = [];
   constructor(text, atlas, maxWidth, fontSize = 24) {
     super();
     this.text = text;
@@ -7301,10 +7356,21 @@ var TextEntity = class extends Entity {
   /**
    * Mirror the rendered text into the DOM content layer: find-in-page, screen
    * readers, crawlers, and translation see the same string the canvas draws.
+   *
+   * Each visual line is emitted with its own y/baseline/line-height so the DOM
+   * line boxes sit exactly on the drawn glyphs instead of flowing at the
+   * browser's `normal` metrics. Line text is the LOGICAL source slice (not the
+   * per-glyph visual text), so shaped or reordered content still copies and
+   * finds in source order — the same contract `ui/Text` ships.
    */
   getContentProjection() {
     if (!this.text) return null;
-    return { text: this.text, font: `${this.fontSize}px sans-serif` };
+    return {
+      text: this.text,
+      font: `${this.fontSize}px sans-serif`,
+      lineHeight: this.fontSize * 1.5,
+      lines: this.projectionLines
+    };
   }
   getContentEpoch() {
     return this.contentEpoch;
@@ -7361,6 +7427,55 @@ var TextEntity = class extends Entity {
     this.width = result.totalWidth;
     this.height = result.totalHeight;
     this.a11yOffsetY = 0;
+    const lineQuantum = this.fontSize * 1.5;
+    const nodesByLine = /* @__PURE__ */ new Map();
+    let maxIdx = -1;
+    for (const node of this.nodes) {
+      const idx = Math.round(node.y / lineQuantum);
+      const list = nodesByLine.get(idx) ?? [];
+      list.push(node);
+      nodesByLine.set(idx, list);
+      if (idx > maxIdx) maxIdx = idx;
+    }
+    const justify = this.layout.textAlign === "justify";
+    const starts = [];
+    const ends = [];
+    let previousEnd = 0;
+    for (let i = 0; i <= maxIdx; i++) {
+      const nodes = nodesByLine.get(i) ?? [];
+      let start = nodes.length > 0 ? Math.min(...nodes.map((node) => node.sourceIndex ?? previousEnd)) : previousEnd;
+      const end = nodes.length > 0 ? Math.max(
+        ...nodes.map((node) => (node.sourceIndex ?? previousEnd) + (node.sourceLength ?? 0))
+      ) : start;
+      if (i === 0) start = 0;
+      starts.push(start);
+      ends.push(end);
+      previousEnd = Math.max(previousEnd, end);
+    }
+    const lines = [];
+    for (let i = 0; i <= maxIdx; i++) {
+      const nodes = nodesByLine.get(i) ?? [];
+      const start = starts[i];
+      const end = ends[i];
+      const nextStart = i + 1 <= maxIdx ? starts[i + 1] : this.text.length;
+      const hasRtl = nodes.some((node) => node.isRTL === true);
+      lines.push({
+        text: this.text.slice(start, Math.max(start, end)),
+        separatorAfter: this.text.slice(end, Math.max(end, nextStart)),
+        x: 0,
+        y: i * lineQuantum,
+        baseline: this.fontSize * 0.8,
+        font: `${this.fontSize}px sans-serif`,
+        lineHeight: lineQuantum,
+        // Per-grapheme carriers pin each cluster to its canvas-measured x so
+        // Gecko's grid-fit advance rounding cannot drift the find-in-page
+        // highlight off the drawn glyphs. Bidi lines must keep one text node
+        // (DOM order is logical; per-glyph carriers break caret mapping), and
+        // justify moves glyphs off their natural x, so both fall back to flow.
+        ...hasRtl || justify ? {} : { perGraphemeCarriers: true }
+      });
+    }
+    this.projectionLines = lines;
   }
   isPointInside(globalX, globalY) {
     const local = this.worldToLocal(globalX, globalY);

package/dist/text/MSDFTextEntity.d.ts

@@ -41,6 +41,12 @@ export declare class MSDFTextEntity extends Entity {
     private rgbColorCache;
     private fontStringCache;
     private layoutResult;
+    /**
+     * Visual rows rebuilt from {@link layoutResult} (see
+     * {@link rebuildProjectionLines}). Empty until a layout reply lands and the
+     * reply's shaped glyphs can be mapped back to the source text 1:1.
+     */
+    private projectionLines;
     constructor(text: string, options: MSDFTextEntityOptions);
     /**
      * Repaint once the atlas raster decodes.
@@ -91,8 +97,26 @@ export declare class MSDFTextEntity extends Entity {
     /**
      * Mirror the rendered text into the DOM content layer: find-in-page, screen
      * readers, crawlers, and translation see the same string the canvas draws.
+     *
+     * `baseline` + `lineHeight` are always emitted (they come from the font
+     * metrics, no layout reply needed), so the DOM line boxes at least land on
+     * the canvas rhythm: the first baseline at `ascender × fontSize` and every
+     * row advancing `(ascender − descender) × fontSize`. Once a layout reply is
+     * in AND its shaped glyphs map back to the source 1:1 (unshaped LTR text —
+     * bidi, shaping, soft hyphens or `\r` all fall back to the coarse branch),
+     * per-line carriers pin each row's baseline exactly to the painted glyphs.
      */
     getContentProjection(): ContentProjection | null;
+    /**
+     * Group the worker's positioned glyphs into the same visual rows the canvas
+     * draws. Only runs when the reply's glyph sequence equals the source string
+     * (one glyph per source char, no bidi reordering, no shaping, no soft
+     * hyphens, no `\r`) — only then do glyph offsets line up with source offsets
+     * byte-for-byte, which is what keeps find-in-page and the Scene's dev-mode
+     * equality check correct. Every other text falls back to the coarse branch's
+     * `baseline` + `lineHeight`, which still pins the row rhythm.
+     */
+    private rebuildProjectionLines;
     getContentEpoch(): number;
     isPointInside(globalX: number, globalY: number): boolean;
     render(renderer: any): void;

package/dist/text.js

@@ -2,11 +2,11 @@
 
 
 
-var _chunkUEIZDNK7js = require('./chunk-UEIZDNK7.js');
+var _chunkXXU56ZNAjs = require('./chunk-XXU56ZNA.js');
 
 // src/text/index.ts
 var _text = require('@vectojs/text'); _createStarExport(_text);
 
 
 
-exports.MSDFTextEntity = _chunkUEIZDNK7js.MSDFTextEntity; exports.SVGEntity = _chunkUEIZDNK7js.SVGEntity;
+exports.MSDFTextEntity = _chunkXXU56ZNAjs.MSDFTextEntity; exports.SVGEntity = _chunkXXU56ZNAjs.SVGEntity;

package/dist/text.mjs

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

package/dist/tree/Entity.d.ts

@@ -102,6 +102,20 @@ export interface ContentProjectionLine {
     lineHeight?: number;
     /** Styled text runs in visual order. */
     runs?: ContentProjectionRun[];
+    /**
+     * Emit one flow-relative carrier per grapheme cluster on this line instead
+     * of a single text node. Used by natural-order (non-bidi, non-justified) text
+     * to correct the residual ~0.3% per-character Gecko grid-fit drift that causes
+     * selection highlight boxes to lag or lead painted glyphs.
+     *
+     * Only meaningful when `runs` is absent or empty. Setting it on a line that
+     * already has positioned runs is a no-op — those lines use their own
+     * flow-relative carriers already.
+     *
+     * Must NOT be set for bidi/RTL lines: per-glyph carriers break logical caret
+     * hit-mapping when DOM order != visual order (PR #146 revert).
+     */
+    perGraphemeCarriers?: boolean;
 }
 /**
  * Advice from the {@link Scene} about which part of an entity is worth

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.34.0",
+  "version": "1.34.2",
   "publishConfig": {
     "access": "public"
   },
@@ -65,9 +65,9 @@
   },
   "dependencies": {
     "@vectojs/animation": "^0.1.1",
-    "@vectojs/layout": "^0.9.0",
+    "@vectojs/layout": "^0.9.1",
     "@vectojs/math": "^0.1.1",
-    "@vectojs/text": "^0.3.0"
+    "@vectojs/text": "^0.4.0"
   },
   "devDependencies": {
     "@guidepup/virtual-screen-reader": "0.32.1",