@vectojs/core 1.33.0 → 1.34.0

package/dist/index.js

@@ -469,6 +469,21 @@ function rebaseChildBox(parent, parentOriginX, parentOriginY, child, childOrigin
   return REBASED_BOX;
 }
 
+// src/tree/scene/content-break-carrier.ts
+var HARD_BREAK_ONLY = /^[\r\n]+$/;
+function appendContentBreak(owner, breakText) {
+  if (!breakText) return;
+  if (!HARD_BREAK_ONLY.test(breakText)) {
+    owner.appendChild(document.createTextNode(breakText));
+    return;
+  }
+  const span = document.createElement("span");
+  span.textContent = breakText;
+  span.style.fontSize = "0";
+  span.style.lineHeight = "0";
+  owner.appendChild(span);
+}
+
 // src/tree/scene/content-line-window.ts
 function projectionLineWindow(lines, band, fallbackLineHeight) {
   const all = {
@@ -529,7 +544,8 @@ var ContentGridProjector = class {
       throw new Error("ContentProjection.grid.source must equal ContentProjection.text");
     }
     const gridWindow = projectionGridLineWindow(grid, projection.lines, lineBand);
-    const signature = gridWindow.gated ? `${grid.revision}:${gridWindow.start}-${gridWindow.end}` : `${grid.revision}`;
+    const originSignature = _nullishCoalesce(_optionalChain([projection, 'access', _27 => _27.lines, 'optionalAccess', _28 => _28.find, 'call', _29 => _29((line) => line !== void 0), 'optionalAccess', _30 => _30.x]), () => ( 0));
+    const signature = gridWindow.gated ? `${grid.revision}:${gridWindow.start}-${gridWindow.end}:${originSignature}` : `${grid.revision}:${originSignature}`;
     if (el.dataset.vectoContentGrid !== signature) {
       const materializeStart = typeof performance !== "undefined" ? performance.now() : 0;
       this.contentProjection.clearGridState(entityId, el, false);
@@ -560,9 +576,9 @@ var ContentGridProjector = class {
         const domIndex = lineIndex - gridWindow.start;
         const gridLine = grid.lines[lineIndex];
         const projectedLine = projectionLines[lineIndex];
-        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _27 => _27.lineHeight]), () => ( grid.lineHeight));
-        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _28 => _28.baseline]), () => ( grid.baseline));
-        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _29 => _29.font]), () => ( grid.font));
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _31 => _31.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _32 => _32.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _33 => _33.font]), () => ( grid.font));
         const lineSignature = contentGridLineSignature(
           grid,
           gridLine,
@@ -582,24 +598,24 @@ var ContentGridProjector = class {
         lineElement.dir = "ltr";
         lineElement.dataset.vectoGridLine = `${lineIndex}`;
         lineElement.style.position = "absolute";
-        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _30 => _30.x]), () => ( 0))}px`;
-        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _31 => _31.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _34 => _34.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _35 => _35.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _text.cssLineBoxBaseline.call(void 0, lineFont, lineHeight)}px`;
         lineElement.style.width = `${gridLine.width}px`;
         lineElement.style.height = `${lineHeight}px`;
         lineElement.style.whiteSpace = "pre";
         lineElement.style.font = lineFont;
         lineElement.style.lineHeight = `${lineHeight}px`;
+        const breakText = grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart);
         if (gridLine.cells.length === 0) {
-          lineElement.textContent = grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart);
+          appendContentBreak(lineElement, breakText);
         } else {
           let logicalX = 0;
           for (let cellIndex = 0; cellIndex < gridLine.cells.length; cellIndex++) {
             const cell = gridLine.cells[cellIndex];
             const cellElement = document.createElement("span");
             cellElement.dir = "ltr";
-            const separator = cellIndex === gridLine.cells.length - 1 ? grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart) : "";
             const sourceText = grid.source.slice(cell.sourceStart, cell.sourceEnd);
-            cellElement.textContent = sourceText + separator;
+            cellElement.textContent = sourceText;
             cellElement.dataset.vectoGridCell = `${cellIndex}`;
             cellElement.dataset.vectoGridSourceLength = `${sourceText.length}`;
             cellElement.dataset.vectoGridSourceStart = `${cell.sourceStart}`;
@@ -625,6 +641,7 @@ var ContentGridProjector = class {
             lineElement.appendChild(cellElement);
             logicalX += cell.advance;
           }
+          appendContentBreak(lineElement, breakText);
         }
         if (lineIndex === 0) {
           for (const [basis, left, top] of [
@@ -651,7 +668,7 @@ var ContentGridProjector = class {
       }
       const windowLength = gridWindow.end - gridWindow.start;
       while (el.children.length > windowLength) {
-        _optionalChain([el, 'access', _32 => _32.lastElementChild, 'optionalAccess', _33 => _33.remove, 'call', _34 => _34()]);
+        _optionalChain([el, 'access', _36 => _36.lastElementChild, 'optionalAccess', _37 => _37.remove, 'call', _38 => _38()]);
       }
       if (rebuiltSelectionLine) {
         this.contentProjection.restoreGridSelection(el, selectionSnapshot);
@@ -691,8 +708,8 @@ var ContentGridProjector = class {
 function contentGridLineSignature(grid, line, projected, lineHeight, baseline, font, isFirstLine) {
   const parts = [
     // Line box: position, size, and the font that resolves its baseline.
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _35 => _35.x]), () => ( 0))}`,
-    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _36 => _36.y]), () => ( ""))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _39 => _39.x]), () => ( 0))}`,
+    `${_nullishCoalesce(_optionalChain([projected, 'optionalAccess', _40 => _40.y]), () => ( ""))}`,
     `${lineHeight}`,
     `${baseline}`,
     font,
@@ -860,7 +877,7 @@ var A11yProjectionManager = (_class2 = class {constructor() { _class2.prototype.
         if (!selectionSnapshotTaken) {
           selectionSnapshotTaken = true;
           const live = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
-          if (_optionalChain([live, 'optionalAccess', _37 => _37.anchorNode]) && live.focusNode) {
+          if (_optionalChain([live, 'optionalAccess', _41 => _41.anchorNode]) && live.focusNode) {
             selection = live;
             selAnchorNode = live.anchorNode;
             selFocusNode = live.focusNode;
@@ -995,7 +1012,7 @@ var CanvasGeometry = (_class3 = class {
   }
   /** Convert browser viewport coordinates into the scene's logical coordinates. */
   clientToScene(clientX, clientY, width, height) {
-    const rect = _optionalChain([this, 'access', _38 => _38.canvas, 'access', _39 => _39.getBoundingClientRect, 'optionalCall', _40 => _40()]);
+    const rect = _optionalChain([this, 'access', _42 => _42.canvas, 'access', _43 => _43.getBoundingClientRect, 'optionalCall', _44 => _44()]);
     if (!rect) return { x: clientX, y: clientY };
     const cssWidth = rect.width || this.canvas.clientWidth || width;
     const cssHeight = rect.height || this.canvas.clientHeight || height;
@@ -1033,16 +1050,18 @@ var CanvasGeometry = (_class3 = class {
   syncOverlay(width, height, glCanvas, gpuCanvas) {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _41 => _41.canvas, 'access', _42 => _42.getBoundingClientRect, 'optionalCall', _43 => _43()]);
-    const parentRect = _optionalChain([parent, 'access', _44 => _44.getBoundingClientRect, 'optionalCall', _45 => _45()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _46 => _46.width]) || this.canvas.clientWidth || width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _47 => _47.height]) || this.canvas.clientHeight || height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _48 => _48.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _49 => _49.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _50 => _50.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _51 => _51.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _45 => _45.canvas, 'access', _46 => _46.getBoundingClientRect, 'optionalCall', _47 => _47()]);
+    const parentRect = _optionalChain([parent, 'access', _48 => _48.getBoundingClientRect, 'optionalCall', _49 => _49()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _50 => _50.width]) || this.canvas.clientWidth || width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _51 => _51.height]) || this.canvas.clientHeight || height;
+    const canvasPosition = typeof getComputedStyle === "function" ? getComputedStyle(this.canvas).position : "";
+    const position = canvasPosition === "fixed" ? "fixed" : "absolute";
+    const left = position === "fixed" ? _nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _52 => _52.left]), () => ( 0)) : (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _53 => _53.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _54 => _54.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = position === "fixed" ? _nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _55 => _55.top]), () => ( 0)) : (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _56 => _56.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _57 => _57.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = width > 0 ? cssWidth / width : 1;
     const scaleY = height > 0 ? cssHeight / height : 1;
     const prev = this.overlayGeometry;
-    if (prev !== null && prev.left === left && prev.top === top && prev.cssWidth === cssWidth && prev.cssHeight === cssHeight && prev.width === width && prev.height === height) {
+    if (prev !== null && prev.left === left && prev.top === top && prev.cssWidth === cssWidth && prev.cssHeight === cssHeight && prev.width === width && prev.height === height && prev.position === position) {
       return;
     }
     this.overlayGeometry = {
@@ -1051,10 +1070,12 @@ var CanvasGeometry = (_class3 = class {
       cssWidth,
       cssHeight,
       width,
-      height
+      height,
+      position
     };
     for (const root of [this.a11yRoot, this.portalRoot]) {
       if (!root) continue;
+      root.style.position = position;
       root.style.left = `${left}px`;
       root.style.top = `${top}px`;
       root.style.width = `${width}px`;
@@ -1064,6 +1085,7 @@ var CanvasGeometry = (_class3 = class {
     }
     for (const canvas of [glCanvas, gpuCanvas]) {
       if (!canvas) continue;
+      canvas.style.position = position;
       canvas.style.left = `${left}px`;
       canvas.style.top = `${top}px`;
       canvas.style.width = `${cssWidth}px`;
@@ -1601,7 +1623,7 @@ var HitTester = (_class6 = class {
         const idx = cell[k];
         if (x < minx[idx] || x > maxx[idx] || y < miny[idx] || y > maxy[idx]) continue;
         const entity = this.slotEntity[idx];
-        if (_optionalChain([entity, 'optionalAccess', _52 => _52.isPointInside, 'call', _53 => _53(x, y)]) && this.isHitEligible(entity, x, y)) {
+        if (_optionalChain([entity, 'optionalAccess', _58 => _58.isPointInside, 'call', _59 => _59(x, y)]) && this.isHitEligible(entity, x, y)) {
           bestIndex = idx;
           bestEntity = entity;
           break;
@@ -1665,6 +1687,7 @@ var HitTester = (_class6 = class {
 }, _class6);
 
 // src/tree/scene/ContentProjectionManager.ts
+var PAGE_SCALE_BASIS_PX = 256;
 var ContentProjectionManager = (_class7 = class {
   /**
    * `a11yRoot` doubles as the projection root: carriers are appended to it, and
@@ -1756,16 +1779,16 @@ var ContentProjectionManager = (_class7 = class {
    * to the live DOM selection.
    */
   gridSelectionLine(el) {
-    const candidates = [_optionalChain([this, 'access', _54 => _54.anchor, 'optionalAccess', _55 => _55.node])];
+    const candidates = [_optionalChain([this, 'access', _60 => _60.anchor, 'optionalAccess', _61 => _61.node])];
     if (typeof window !== "undefined" && typeof window.getSelection === "function") {
       const selection = window.getSelection();
-      candidates.push(_optionalChain([selection, 'optionalAccess', _56 => _56.anchorNode]), _optionalChain([selection, 'optionalAccess', _57 => _57.focusNode]));
+      candidates.push(_optionalChain([selection, 'optionalAccess', _62 => _62.anchorNode]), _optionalChain([selection, 'optionalAccess', _63 => _63.focusNode]));
     }
     for (const candidate of candidates) {
       if (!candidate || !el.contains(candidate)) continue;
       let cursor = candidate;
       while (cursor && cursor.parentNode !== el) cursor = cursor.parentNode;
-      const lineIndex = _optionalChain([cursor, 'optionalAccess', _58 => _58.dataset, 'optionalAccess', _59 => _59.vectoGridLine]);
+      const lineIndex = _optionalChain([cursor, 'optionalAccess', _64 => _64.dataset, 'optionalAccess', _65 => _65.vectoGridLine]);
       if (lineIndex !== void 0) return Number(lineIndex);
     }
     return null;
@@ -1790,10 +1813,10 @@ var ContentProjectionManager = (_class7 = class {
   releaseSelectionForRebuild(el) {
     if (!this.anchor && !this.selectionPresent()) return;
     const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
-    const ownsSelection = this.anchor && el.contains(this.anchor.node) || (_optionalChain([selection, 'optionalAccess', _60 => _60.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _61 => _61.focusNode]) ? el.contains(selection.focusNode) : false);
+    const ownsSelection = this.anchor && el.contains(this.anchor.node) || (_optionalChain([selection, 'optionalAccess', _66 => _66.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _67 => _67.focusNode]) ? el.contains(selection.focusNode) : false);
     if (!ownsSelection) return;
     this.endDrag();
-    _optionalChain([selection, 'optionalAccess', _62 => _62.removeAllRanges, 'call', _63 => _63()]);
+    _optionalChain([selection, 'optionalAccess', _68 => _68.removeAllRanges, 'call', _69 => _69()]);
     this.presentThisSync = null;
   }
   /**
@@ -1868,7 +1891,7 @@ var ContentProjectionManager = (_class7 = class {
     let cursor = node;
     while (cursor && cursor !== el) {
       const cell = cursor;
-      const start = _optionalChain([cell, 'access', _64 => _64.dataset, 'optionalAccess', _65 => _65.vectoGridSourceStart]);
+      const start = _optionalChain([cell, 'access', _70 => _70.dataset, 'optionalAccess', _71 => _71.vectoGridSourceStart]);
       if (start !== void 0) {
         const sourceStart = Number(start);
         const sourceLength = Number(_nullishCoalesce(cell.dataset.vectoGridSourceLength, () => ( 0)));
@@ -1962,7 +1985,7 @@ var ContentProjectionManager = (_class7 = class {
       cancelAnimationFrame(calibrationFrame);
     }
     this.calibrationFrameHandles.delete(entityId);
-    _optionalChain([this, 'access', _66 => _66.calibrationProbes, 'access', _67 => _67.get, 'call', _68 => _68(entityId), 'optionalAccess', _69 => _69.remove, 'call', _70 => _70()]);
+    _optionalChain([this, 'access', _72 => _72.calibrationProbes, 'access', _73 => _73.get, 'call', _74 => _74(entityId), 'optionalAccess', _75 => _75.remove, 'call', _76 => _76()]);
     this.calibrationProbes.delete(entityId);
     delete el.dataset.vectoGridCalibrationPending;
     delete el.dataset.vectoGridCalibration;
@@ -2026,7 +2049,7 @@ var ContentProjectionManager = (_class7 = class {
     if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
       cancelAnimationFrame(previous);
     }
-    _optionalChain([this, 'access', _71 => _71.calibrationProbes, 'access', _72 => _72.get, 'call', _73 => _73(entityId), 'optionalAccess', _74 => _74.remove, 'call', _75 => _75()]);
+    _optionalChain([this, 'access', _77 => _77.calibrationProbes, 'access', _78 => _78.get, 'call', _79 => _79(entityId), 'optionalAccess', _80 => _80.remove, 'call', _81 => _81()]);
     this.calibrationProbes.delete(entityId);
     const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
     const probe = document.createElement("div");
@@ -2047,7 +2070,7 @@ var ContentProjectionManager = (_class7 = class {
     probeOrigin.style.top = "0";
     const probeX = document.createElement("span");
     probeX.style.position = "absolute";
-    probeX.style.left = "1px";
+    probeX.style.left = `${PAGE_SCALE_BASIS_PX}px`;
     probeX.style.top = "0";
     probe.append(probeOrigin, probeX);
     const measurements = [];
@@ -2060,7 +2083,7 @@ var ContentProjectionManager = (_class7 = class {
         target.dataset.vectoGridCalib = generation;
         continue;
       }
-      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _76 => _76.textContent, 'optionalAccess', _77 => _77.slice, 'call', _78 => _78(0, sourceLength)]), () => ( ""));
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _82 => _82.textContent, 'optionalAccess', _83 => _83.slice, 'call', _84 => _84(0, sourceLength)]), () => ( ""));
       if (!sourceText) {
         target.dataset.vectoGridCalib = generation;
         continue;
@@ -2120,7 +2143,7 @@ var ContentProjectionManager = (_class7 = class {
       const updates = [];
       const probeOriginRect = probeOrigin.getBoundingClientRect();
       const probeXRect = probeX.getBoundingClientRect();
-      const basisScale = Math.abs(probeXRect.left - probeOriginRect.left);
+      const basisScale = Math.abs(probeXRect.left - probeOriginRect.left) / PAGE_SCALE_BASIS_PX;
       const projectionPageScaleX = Number.isFinite(basisScale) && basisScale > 0 ? basisScale : pageScaleX;
       let valid = true;
       for (const measurement of measurements) {
@@ -3456,9 +3479,9 @@ function parseCssMatrix(transform) {
 }
 function clientToGridLocal(contentEl, canvas, clientX, clientY) {
   const line = contentEl.querySelector("[data-vecto-grid-line]");
-  const originMarker = _optionalChain([line, 'optionalAccess', _79 => _79.querySelector, 'call', _80 => _80('[data-vecto-grid-basis="origin"]')]);
-  const xMarker = _optionalChain([line, 'optionalAccess', _81 => _81.querySelector, 'call', _82 => _82('[data-vecto-grid-basis="x"]')]);
-  const yMarker = _optionalChain([line, 'optionalAccess', _83 => _83.querySelector, 'call', _84 => _84('[data-vecto-grid-basis="y"]')]);
+  const originMarker = _optionalChain([line, 'optionalAccess', _85 => _85.querySelector, 'call', _86 => _86('[data-vecto-grid-basis="origin"]')]);
+  const xMarker = _optionalChain([line, 'optionalAccess', _87 => _87.querySelector, 'call', _88 => _88('[data-vecto-grid-basis="x"]')]);
+  const yMarker = _optionalChain([line, 'optionalAccess', _89 => _89.querySelector, 'call', _90 => _90('[data-vecto-grid-basis="y"]')]);
   if (line && originMarker && xMarker && yMarker) {
     const origin = originMarker.getBoundingClientRect();
     const xPoint = xMarker.getBoundingClientRect();
@@ -3542,7 +3565,7 @@ function nearestTextPositionInLine(line, x, y) {
       nearest = { position: { node, offset }, distance: candidate.distance };
     }
   }
-  return _nullishCoalesce(_optionalChain([nearest, 'optionalAccess', _85 => _85.position]), () => ( null));
+  return _nullishCoalesce(_optionalChain([nearest, 'optionalAccess', _91 => _91.position]), () => ( null));
 }
 function nearestTextPositionInProjection(contentEl, canvas, x, y, eventTarget) {
   if (contentEl.dataset.vectoContentGrid !== void 0) {
@@ -3556,7 +3579,7 @@ function nearestTextPositionInProjection(contentEl, canvas, x, y, eventTarget) {
     }
     targetLine = targetLine.parentElement;
   }
-  if (_optionalChain([targetLine, 'optionalAccess', _86 => _86.parentElement]) === contentEl) {
+  if (_optionalChain([targetLine, 'optionalAccess', _92 => _92.parentElement]) === contentEl) {
     return nearestTextPositionInLine(targetLine, x, y);
   }
   let bestLine = null;
@@ -3809,7 +3832,7 @@ var Scene = (_class15 = class _Scene {
   __init102() {this.forcedColorsChangeHandler = null}
   /** True when the OS asks for reduced motion and we respect it. Read by the animation drivers. */
   get prefersReducedMotion() {
-    return this.respectReducedMotion && !!_optionalChain([this, 'access', _87 => _87.reducedMotionQuery, 'optionalAccess', _88 => _88.matches]);
+    return this.respectReducedMotion && !!_optionalChain([this, 'access', _93 => _93.reducedMotionQuery, 'optionalAccess', _94 => _94.matches]);
   }
   /**
    * True when the OS is in a forced-colors mode (Windows High Contrast, and the
@@ -3820,7 +3843,7 @@ var Scene = (_class15 = class _Scene {
    * when the setting toggles.
    */
   get forcedColors() {
-    return !!_optionalChain([this, 'access', _89 => _89.forcedColorsQuery, 'optionalAccess', _90 => _90.matches]);
+    return !!_optionalChain([this, 'access', _95 => _95.forcedColorsQuery, 'optionalAccess', _96 => _96.matches]);
   }
   // --- domain: a11y-projection — sync throttle and shadow-DOM state ---
   /**
@@ -4520,7 +4543,7 @@ var Scene = (_class15 = class _Scene {
    * active.
    */
   get webglDrawStats() {
-    return _nullishCoalesce(_optionalChain([this, 'access', _91 => _91.pointRenderer, 'optionalAccess', _92 => _92.stats, 'optionalCall', _93 => _93()]), () => ( null));
+    return _nullishCoalesce(_optionalChain([this, 'access', _97 => _97.pointRenderer, 'optionalAccess', _98 => _98.stats, 'optionalCall', _99 => _99()]), () => ( null));
   }
   /**
    * Whether a WebGPU device is currently live for particle compute.
@@ -4589,8 +4612,8 @@ var Scene = (_class15 = class _Scene {
   static _devModeDetected() {
     if (_Scene._devMode) return true;
     const gp = typeof globalThis !== "undefined" ? globalThis : void 0;
-    if (_optionalChain([gp, 'optionalAccess', _94 => _94.__DEV__])) return true;
-    if (_optionalChain([gp, 'optionalAccess', _95 => _95.process, 'optionalAccess', _96 => _96.env, 'optionalAccess', _97 => _97.NODE_ENV]) === "development") return true;
+    if (_optionalChain([gp, 'optionalAccess', _100 => _100.__DEV__])) return true;
+    if (_optionalChain([gp, 'optionalAccess', _101 => _101.process, 'optionalAccess', _102 => _102.env, 'optionalAccess', _103 => _103.NODE_ENV]) === "development") return true;
     return false;
   }
   
@@ -4652,9 +4675,9 @@ var Scene = (_class15 = class _Scene {
     let checked = 0;
     const walkProjections = (node) => {
       if (checked > 10) return;
-      const proj = _optionalChain([node, 'access', _98 => _98.getContentProjection, 'optionalCall', _99 => _99()]);
-      if (_optionalChain([proj, 'optionalAccess', _100 => _100.text]) && proj.selectable !== false) {
-        const el = _optionalChain([this, 'access', _101 => _101.contentElements, 'optionalAccess', _102 => _102.get, 'call', _103 => _103(node.id)]);
+      const proj = _optionalChain([node, 'access', _104 => _104.getContentProjection, 'optionalCall', _105 => _105()]);
+      if (_optionalChain([proj, 'optionalAccess', _106 => _106.text]) && proj.selectable !== false) {
+        const el = _optionalChain([this, 'access', _107 => _107.contentElements, 'optionalAccess', _108 => _108.get, 'call', _109 => _109(node.id)]);
         if (el) {
           const projectedText = el.textContent || "";
           const windowed = el.dataset.vectoProjectionWindow !== void 0;
@@ -4678,8 +4701,8 @@ var Scene = (_class15 = class _Scene {
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     this.maxDPR = options.maxDPR;
     if (this.disableWindowResize) {
-      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _104 => _104.style, 'optionalAccess', _105 => _105.width]));
-      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _106 => _106.style, 'optionalAccess', _107 => _107.height]));
+      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _110 => _110.style, 'optionalAccess', _111 => _111.width]));
+      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _112 => _112.style, 'optionalAccess', _113 => _113.height]));
       this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
       this.height = _nullishCoalesce(styleHeight, () => ( (canvas.height || canvas.clientHeight || 0)));
     } else {
@@ -4687,7 +4710,7 @@ var Scene = (_class15 = class _Scene {
       this.height = typeof window !== "undefined" ? window.innerHeight : canvas.clientHeight || canvas.height || 600;
     }
     const globalProcess = typeof globalThis !== "undefined" ? globalThis.process : void 0;
-    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _108 => _108.env, 'optionalAccess', _109 => _109.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _110 => _110.env, 'optionalAccess', _111 => _111.VITEST]) === "true");
+    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _114 => _114.env, 'optionalAccess', _115 => _115.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _116 => _116.env, 'optionalAccess', _117 => _117.VITEST]) === "true");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
@@ -4707,7 +4730,7 @@ var Scene = (_class15 = class _Scene {
     if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
       this.forcedColorsQuery = window.matchMedia("(forced-colors: active)");
       this.forcedColorsChangeHandler = () => this.markDirty();
-      _optionalChain([this, 'access', _112 => _112.forcedColorsQuery, 'access', _113 => _113.addEventListener, 'optionalCall', _114 => _114("change", this.forcedColorsChangeHandler)]);
+      _optionalChain([this, 'access', _118 => _118.forcedColorsQuery, 'access', _119 => _119.addEventListener, 'optionalCall', _120 => _120("change", this.forcedColorsChangeHandler)]);
     }
     this.root = new class RootEntity extends _chunkUEIZDNK7js.Entity {
       isPointInside() {
@@ -4738,9 +4761,9 @@ var Scene = (_class15 = class _Scene {
         this.maxDPR
       );
     }
-    _optionalChain([this, 'access', _115 => _115.renderer, 'access', _116 => _116.onContextRestored, 'optionalCall', _117 => _117(() => {
+    _optionalChain([this, 'access', _121 => _121.renderer, 'access', _122 => _122.onContextRestored, 'optionalCall', _123 => _123(() => {
       this.markDirty();
-      if (_optionalChain([this, 'access', _118 => _118.renderer, 'access', _119 => _119.isContextLost, 'optionalCall', _120 => _120()]) !== true) this.render(this.renderer);
+      if (_optionalChain([this, 'access', _124 => _124.renderer, 'access', _125 => _125.isContextLost, 'optionalCall', _126 => _126()]) !== true) this.render(this.renderer);
     })]);
     if (typeof document !== "undefined") {
       this.a11yRoot = document.createElement("div");
@@ -4913,16 +4936,16 @@ var Scene = (_class15 = class _Scene {
   watchDevicePixelRatio() {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     if (this.dprMediaQuery && this.dprChangeHandler) {
-      _optionalChain([this, 'access', _121 => _121.dprMediaQuery, 'access', _122 => _122.removeEventListener, 'optionalCall', _123 => _123("change", this.dprChangeHandler)]);
+      _optionalChain([this, 'access', _127 => _127.dprMediaQuery, 'access', _128 => _128.removeEventListener, 'optionalCall', _129 => _129("change", this.dprChangeHandler)]);
     }
     const dpr = window.devicePixelRatio || 1;
     const query = window.matchMedia(`(resolution: ${dpr}dppx)`);
     const handler = () => {
       this.resize(this.width, this.height);
-      if (_optionalChain([this, 'access', _124 => _124.renderer, 'access', _125 => _125.isContextLost, 'optionalCall', _126 => _126()]) !== true) this.render(this.renderer);
+      if (_optionalChain([this, 'access', _130 => _130.renderer, 'access', _131 => _131.isContextLost, 'optionalCall', _132 => _132()]) !== true) this.render(this.renderer);
       this.watchDevicePixelRatio();
     };
-    _optionalChain([query, 'access', _127 => _127.addEventListener, 'optionalCall', _128 => _128("change", handler)]);
+    _optionalChain([query, 'access', _133 => _133.addEventListener, 'optionalCall', _134 => _134("change", handler)]);
     this.dprMediaQuery = query;
     this.dprChangeHandler = handler;
   }
@@ -4942,7 +4965,7 @@ var Scene = (_class15 = class _Scene {
     if (typeof gl.addEventListener !== "function") return;
     this.glContextLostHandler = (e) => {
       e.preventDefault();
-      _optionalChain([this, 'access', _129 => _129.pointRenderer, 'optionalAccess', _130 => _130.destroy, 'call', _131 => _131()]);
+      _optionalChain([this, 'access', _135 => _135.pointRenderer, 'optionalAccess', _136 => _136.destroy, 'call', _137 => _137()]);
       this.pointRenderer = null;
     };
     this.glContextRestoredHandler = () => {
@@ -5143,12 +5166,12 @@ var Scene = (_class15 = class _Scene {
       this.canvasResizeObserver = null;
     }
     if (this.dprMediaQuery && this.dprChangeHandler) {
-      _optionalChain([this, 'access', _132 => _132.dprMediaQuery, 'access', _133 => _133.removeEventListener, 'optionalCall', _134 => _134("change", this.dprChangeHandler)]);
+      _optionalChain([this, 'access', _138 => _138.dprMediaQuery, 'access', _139 => _139.removeEventListener, 'optionalCall', _140 => _140("change", this.dprChangeHandler)]);
       this.dprMediaQuery = null;
       this.dprChangeHandler = null;
     }
     if (this.forcedColorsQuery && this.forcedColorsChangeHandler) {
-      _optionalChain([this, 'access', _135 => _135.forcedColorsQuery, 'access', _136 => _136.removeEventListener, 'optionalCall', _137 => _137("change", this.forcedColorsChangeHandler)]);
+      _optionalChain([this, 'access', _141 => _141.forcedColorsQuery, 'access', _142 => _142.removeEventListener, 'optionalCall', _143 => _143("change", this.forcedColorsChangeHandler)]);
       this.forcedColorsQuery = null;
       this.forcedColorsChangeHandler = null;
     }
@@ -5166,9 +5189,9 @@ var Scene = (_class15 = class _Scene {
       }
       this.pointerEventTarget = null;
     }
-    _optionalChain([this, 'access', _138 => _138.a11yRoot, 'optionalAccess', _139 => _139.remove, 'call', _140 => _140()]);
+    _optionalChain([this, 'access', _144 => _144.a11yRoot, 'optionalAccess', _145 => _145.remove, 'call', _146 => _146()]);
     this.focusSentinel = null;
-    _optionalChain([this, 'access', _141 => _141.portalRoot, 'optionalAccess', _142 => _142.remove, 'call', _143 => _143()]);
+    _optionalChain([this, 'access', _147 => _147.portalRoot, 'optionalAccess', _148 => _148.remove, 'call', _149 => _149()]);
     this.a11yElements.clear();
     for (const el of this.contentElements.values()) el.remove();
     this.contentElements.clear();
@@ -5184,10 +5207,10 @@ var Scene = (_class15 = class _Scene {
     }
     this.glContextLostHandler = null;
     this.glContextRestoredHandler = null;
-    _optionalChain([this, 'access', _144 => _144.pointRenderer, 'optionalAccess', _145 => _145.destroy, 'call', _146 => _146()]);
-    _optionalChain([this, 'access', _147 => _147.renderer, 'access', _148 => _148.dispose, 'optionalCall', _149 => _149()]);
-    _optionalChain([this, 'access', _150 => _150.glCanvas, 'optionalAccess', _151 => _151.remove, 'call', _152 => _152()]);
-    _optionalChain([this, 'access', _153 => _153.gpuCanvas, 'optionalAccess', _154 => _154.remove, 'call', _155 => _155()]);
+    _optionalChain([this, 'access', _150 => _150.pointRenderer, 'optionalAccess', _151 => _151.destroy, 'call', _152 => _152()]);
+    _optionalChain([this, 'access', _153 => _153.renderer, 'access', _154 => _154.dispose, 'optionalCall', _155 => _155()]);
+    _optionalChain([this, 'access', _156 => _156.glCanvas, 'optionalAccess', _157 => _157.remove, 'call', _158 => _158()]);
+    _optionalChain([this, 'access', _159 => _159.gpuCanvas, 'optionalAccess', _160 => _160.remove, 'call', _161 => _161()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -5199,7 +5222,7 @@ var Scene = (_class15 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _156 => _156.device, 'access', _157 => _157.destroy, 'optionalCall', _158 => _158()]);
+      _optionalChain([this, 'access', _162 => _162.device, 'access', _163 => _163.destroy, 'optionalCall', _164 => _164()]);
       this.device = null;
     }
   }
@@ -5523,7 +5546,7 @@ var Scene = (_class15 = class _Scene {
     if (this.mouseX > -9e3 && !this.projectsSelectableText(node)) {
       if (node.isPointInside(this.mouseX, this.mouseY)) return true;
     }
-    const existing = _optionalChain([this, 'access', _159 => _159.a11yElements, 'optionalAccess', _160 => _160.get, 'call', _161 => _161(node.id)]);
+    const existing = _optionalChain([this, 'access', _165 => _165.a11yElements, 'optionalAccess', _166 => _166.get, 'call', _167 => _167(node.id)]);
     if (existing && typeof document !== "undefined" && document.activeElement === existing) {
       return true;
     }
@@ -5537,8 +5560,8 @@ var Scene = (_class15 = class _Scene {
    * selection.
    */
   projectsSelectableText(node) {
-    const projection = _optionalChain([node, 'access', _162 => _162.getContentProjection, 'optionalCall', _163 => _163()]);
-    return !!_optionalChain([projection, 'optionalAccess', _164 => _164.text]) && projection.selectable !== false;
+    const projection = _optionalChain([node, 'access', _168 => _168.getContentProjection, 'optionalCall', _169 => _169()]);
+    return !!_optionalChain([projection, 'optionalAccess', _170 => _170.text]) && projection.selectable !== false;
   }
   /**
    * Keep `entity`'s a11y shadow node projected while it has
@@ -5736,7 +5759,7 @@ var Scene = (_class15 = class _Scene {
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
             composition = {
-              start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _165 => _165.start]), () => ( 0)),
+              start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _171 => _171.start]), () => ( 0)),
               length: data.length
             };
             forward();
@@ -5978,7 +6001,7 @@ var Scene = (_class15 = class _Scene {
         const display = visible ? "" : "none";
         if (el.style.display !== display) el.style.display = display;
       }
-      _optionalChain([emitInitialScroll, 'optionalCall', _166 => _166()]);
+      _optionalChain([emitInitialScroll, 'optionalCall', _172 => _172()]);
     }
     if (this.phases.enabled) {
       const projectionStart = performance.now();
@@ -6267,7 +6290,7 @@ var Scene = (_class15 = class _Scene {
               for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
                 const run = line.runs[runIndex];
                 const runElement = document.createElement("span");
-                runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
+                runElement.textContent = run.text;
                 if (run.font) runElement.style.font = run.font;
                 runElement.style.lineHeight = `${lineHeight2}px`;
                 if (positioned && run.x !== void 0) {
@@ -6283,8 +6306,9 @@ var Scene = (_class15 = class _Scene {
                 lineElement.appendChild(runElement);
               }
             } else {
-              lineElement.textContent = line.text + separator;
+              lineElement.textContent = line.text;
             }
+            appendContentBreak(lineElement, separator);
             el.appendChild(lineElement);
           }
         });
@@ -6335,6 +6359,9 @@ var Scene = (_class15 = class _Scene {
     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)`;
+    const clipToBounds = projection.clipToBounds === true;
+    const clipPath = clipToBounds && node.width > 0 && node.height > 0 ? `inset(${-localY}px ${contentX}px ${localY}px ${-contentX}px)` : "";
+    if (el.style.clipPath !== clipPath) el.style.clipPath = clipPath;
     const residentTier = semanticMargin > interactionMargin;
     const display = visible || residentTier && !this.projectionBoxVisible(node, worldTf, 0, true) ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
@@ -6373,8 +6400,8 @@ var Scene = (_class15 = class _Scene {
       next.f = f2;
       next.tier = tier;
       next.hasBand = lineBand !== null;
-      next.bandMin = _nullishCoalesce(_optionalChain([lineBand, 'optionalAccess', _167 => _167.minY]), () => ( 0));
-      next.bandMax = _nullishCoalesce(_optionalChain([lineBand, 'optionalAccess', _168 => _168.maxY]), () => ( 0));
+      next.bandMin = _nullishCoalesce(_optionalChain([lineBand, 'optionalAccess', _173 => _173.minY]), () => ( 0));
+      next.bandMax = _nullishCoalesce(_optionalChain([lineBand, 'optionalAccess', _174 => _174.maxY]), () => ( 0));
       next.visible = visible;
       next.width = node.width;
       next.height = node.height;
@@ -6560,7 +6587,7 @@ var Scene = (_class15 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _169 => _169.reducedMotionQuery, 'optionalAccess', _170 => _170.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _175 => _175.reducedMotionQuery, 'optionalAccess', _176 => _176.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -6655,7 +6682,7 @@ var Scene = (_class15 = class _Scene {
    * @param time - Current absolute time in milliseconds (default 0).
    */
   render(renderer, dt = 0, time = 0) {
-    if (_optionalChain([renderer, 'access', _171 => _171.isContextLost, 'optionalCall', _172 => _172()])) return;
+    if (_optionalChain([renderer, 'access', _177 => _177.isContextLost, 'optionalCall', _178 => _178()])) return;
     const isMainRenderer = renderer === this.renderer;
     if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
       const parentStyle = this.canvas.parentElement.style;
@@ -6804,7 +6831,7 @@ var Scene = (_class15 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _173 => _173.pointRenderer, 'optionalAccess', _174 => _174.begin, 'call', _175 => _175()]);
+      _optionalChain([this, 'access', _179 => _179.pointRenderer, 'optionalAccess', _180 => _180.begin, 'call', _181 => _181()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -7018,9 +7045,9 @@ var Scene = (_class15 = class _Scene {
     const flushT0 = this.phases.enabled ? performance.now() : 0;
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _176 => _176.pointRenderer, 'optionalAccess', _177 => _177.flush, 'call', _178 => _178()]);
+      _optionalChain([this, 'access', _182 => _182.pointRenderer, 'optionalAccess', _183 => _183.flush, 'call', _184 => _184()]);
     }
-    _optionalChain([renderer, 'access', _179 => _179.present, 'optionalCall', _180 => _180()]);
+    _optionalChain([renderer, 'access', _185 => _185.present, 'optionalCall', _186 => _186()]);
     if (this.phases.enabled) this.phases.record("flush", performance.now() - flushT0);
     if (flushTiming) endVectoUserTiming(flushTiming);
     if (this._devActive) {
@@ -7397,7 +7424,7 @@ var GridTextEntity = (_class17 = class extends _chunkUEIZDNK7js.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _181 => _181[0], 'optionalAccess', _182 => _182.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _187 => _187[0], 'optionalAccess', _188 => _188.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -7548,7 +7575,7 @@ var SplineEntity = (_class18 = class extends _chunkUEIZDNK7js.Entity {
    */
   computeContainsGradient() {
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    return (_nullishCoalesce(_optionalChain([this, 'access', _183 => _183._doc, 'access', _184 => _184.equations, 'optionalAccess', _185 => _185.some, 'call', _186 => _186((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _187 => _187._doc, 'access', _188 => _188.paths, 'optionalAccess', _189 => _189.some, 'call', _190 => _190((p) => isGradient(p.color_rgb))]), () => ( false)));
+    return (_nullishCoalesce(_optionalChain([this, 'access', _189 => _189._doc, 'access', _190 => _190.equations, 'optionalAccess', _191 => _191.some, 'call', _192 => _192((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _193 => _193._doc, 'access', _194 => _194.paths, 'optionalAccess', _195 => _195.some, 'call', _196 => _196((p) => isGradient(p.color_rgb))]), () => ( false)));
   }
   /** Clear cached baked canvas and hit-test polylines. */
   invalidateCache() {

package/dist/index.mjs

@@ -468,6 +468,21 @@ function rebaseChildBox(parent, parentOriginX, parentOriginY, child, childOrigin
   return REBASED_BOX;
 }
 
+// src/tree/scene/content-break-carrier.ts
+var HARD_BREAK_ONLY = /^[\r\n]+$/;
+function appendContentBreak(owner, breakText) {
+  if (!breakText) return;
+  if (!HARD_BREAK_ONLY.test(breakText)) {
+    owner.appendChild(document.createTextNode(breakText));
+    return;
+  }
+  const span = document.createElement("span");
+  span.textContent = breakText;
+  span.style.fontSize = "0";
+  span.style.lineHeight = "0";
+  owner.appendChild(span);
+}
+
 // src/tree/scene/content-line-window.ts
 function projectionLineWindow(lines, band, fallbackLineHeight) {
   const all = {
@@ -528,7 +543,8 @@ var ContentGridProjector = class {
       throw new Error("ContentProjection.grid.source must equal ContentProjection.text");
     }
     const gridWindow = projectionGridLineWindow(grid, projection.lines, lineBand);
-    const signature = gridWindow.gated ? `${grid.revision}:${gridWindow.start}-${gridWindow.end}` : `${grid.revision}`;
+    const originSignature = projection.lines?.find((line) => line !== void 0)?.x ?? 0;
+    const signature = gridWindow.gated ? `${grid.revision}:${gridWindow.start}-${gridWindow.end}:${originSignature}` : `${grid.revision}:${originSignature}`;
     if (el.dataset.vectoContentGrid !== signature) {
       const materializeStart = typeof performance !== "undefined" ? performance.now() : 0;
       this.contentProjection.clearGridState(entityId, el, false);
@@ -588,17 +604,17 @@ var ContentGridProjector = class {
         lineElement.style.whiteSpace = "pre";
         lineElement.style.font = lineFont;
         lineElement.style.lineHeight = `${lineHeight}px`;
+        const breakText = grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart);
         if (gridLine.cells.length === 0) {
-          lineElement.textContent = grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart);
+          appendContentBreak(lineElement, breakText);
         } else {
           let logicalX = 0;
           for (let cellIndex = 0; cellIndex < gridLine.cells.length; cellIndex++) {
             const cell = gridLine.cells[cellIndex];
             const cellElement = document.createElement("span");
             cellElement.dir = "ltr";
-            const separator = cellIndex === gridLine.cells.length - 1 ? grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart) : "";
             const sourceText = grid.source.slice(cell.sourceStart, cell.sourceEnd);
-            cellElement.textContent = sourceText + separator;
+            cellElement.textContent = sourceText;
             cellElement.dataset.vectoGridCell = `${cellIndex}`;
             cellElement.dataset.vectoGridSourceLength = `${sourceText.length}`;
             cellElement.dataset.vectoGridSourceStart = `${cell.sourceStart}`;
@@ -624,6 +640,7 @@ var ContentGridProjector = class {
             lineElement.appendChild(cellElement);
             logicalX += cell.advance;
           }
+          appendContentBreak(lineElement, breakText);
         }
         if (lineIndex === 0) {
           for (const [basis, left, top] of [
@@ -1036,12 +1053,14 @@ var CanvasGeometry = class {
     const parentRect = parent.getBoundingClientRect?.();
     const cssWidth = canvasRect?.width || this.canvas.clientWidth || width;
     const cssHeight = canvasRect?.height || this.canvas.clientHeight || height;
-    const left = (canvasRect?.left ?? 0) - (parentRect?.left ?? 0) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (canvasRect?.top ?? 0) - (parentRect?.top ?? 0) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasPosition = typeof getComputedStyle === "function" ? getComputedStyle(this.canvas).position : "";
+    const position = canvasPosition === "fixed" ? "fixed" : "absolute";
+    const left = position === "fixed" ? canvasRect?.left ?? 0 : (canvasRect?.left ?? 0) - (parentRect?.left ?? 0) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = position === "fixed" ? canvasRect?.top ?? 0 : (canvasRect?.top ?? 0) - (parentRect?.top ?? 0) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = width > 0 ? cssWidth / width : 1;
     const scaleY = height > 0 ? cssHeight / height : 1;
     const prev = this.overlayGeometry;
-    if (prev !== null && prev.left === left && prev.top === top && prev.cssWidth === cssWidth && prev.cssHeight === cssHeight && prev.width === width && prev.height === height) {
+    if (prev !== null && prev.left === left && prev.top === top && prev.cssWidth === cssWidth && prev.cssHeight === cssHeight && prev.width === width && prev.height === height && prev.position === position) {
       return;
     }
     this.overlayGeometry = {
@@ -1050,10 +1069,12 @@ var CanvasGeometry = class {
       cssWidth,
       cssHeight,
       width,
-      height
+      height,
+      position
     };
     for (const root of [this.a11yRoot, this.portalRoot]) {
       if (!root) continue;
+      root.style.position = position;
       root.style.left = `${left}px`;
       root.style.top = `${top}px`;
       root.style.width = `${width}px`;
@@ -1063,6 +1084,7 @@ var CanvasGeometry = class {
     }
     for (const canvas of [glCanvas, gpuCanvas]) {
       if (!canvas) continue;
+      canvas.style.position = position;
       canvas.style.left = `${left}px`;
       canvas.style.top = `${top}px`;
       canvas.style.width = `${cssWidth}px`;
@@ -1664,6 +1686,7 @@ var HitTester = class {
 };
 
 // src/tree/scene/ContentProjectionManager.ts
+var PAGE_SCALE_BASIS_PX = 256;
 var ContentProjectionManager = class {
   /**
    * `a11yRoot` doubles as the projection root: carriers are appended to it, and
@@ -2046,7 +2069,7 @@ var ContentProjectionManager = class {
     probeOrigin.style.top = "0";
     const probeX = document.createElement("span");
     probeX.style.position = "absolute";
-    probeX.style.left = "1px";
+    probeX.style.left = `${PAGE_SCALE_BASIS_PX}px`;
     probeX.style.top = "0";
     probe.append(probeOrigin, probeX);
     const measurements = [];
@@ -2119,7 +2142,7 @@ var ContentProjectionManager = class {
       const updates = [];
       const probeOriginRect = probeOrigin.getBoundingClientRect();
       const probeXRect = probeX.getBoundingClientRect();
-      const basisScale = Math.abs(probeXRect.left - probeOriginRect.left);
+      const basisScale = Math.abs(probeXRect.left - probeOriginRect.left) / PAGE_SCALE_BASIS_PX;
       const projectionPageScaleX = Number.isFinite(basisScale) && basisScale > 0 ? basisScale : pageScaleX;
       let valid = true;
       for (const measurement of measurements) {
@@ -6266,7 +6289,7 @@ var Scene = class _Scene {
               for (let runIndex = 0; runIndex < line.runs.length; runIndex++) {
                 const run = line.runs[runIndex];
                 const runElement = document.createElement("span");
-                runElement.textContent = run.text + (runIndex === line.runs.length - 1 ? separator : "");
+                runElement.textContent = run.text;
                 if (run.font) runElement.style.font = run.font;
                 runElement.style.lineHeight = `${lineHeight2}px`;
                 if (positioned && run.x !== void 0) {
@@ -6282,8 +6305,9 @@ var Scene = class _Scene {
                 lineElement.appendChild(runElement);
               }
             } else {
-              lineElement.textContent = line.text + separator;
+              lineElement.textContent = line.text;
             }
+            appendContentBreak(lineElement, separator);
             el.appendChild(lineElement);
           }
         });
@@ -6334,6 +6358,9 @@ var Scene = class _Scene {
     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)`;
+    const clipToBounds = projection.clipToBounds === true;
+    const clipPath = clipToBounds && node.width > 0 && node.height > 0 ? `inset(${-localY}px ${contentX}px ${localY}px ${-contentX}px)` : "";
+    if (el.style.clipPath !== clipPath) el.style.clipPath = clipPath;
     const residentTier = semanticMargin > interactionMargin;
     const display = visible || residentTier && !this.projectionBoxVisible(node, worldTf, 0, true) ? "" : "none";
     if (el.style.display !== display) el.style.display = display;

package/dist/tree/Entity.d.ts

@@ -178,6 +178,20 @@ export interface ContentProjection {
      * shaping, and bidi boundaries cannot drift between the two surfaces.
      */
     grid?: PreparedContentGrid;
+    /**
+     * Confine the projected text's paint to the projection element's own box.
+     *
+     * Opt in when the entity's `render()` clips its own drawing, so the two
+     * surfaces agree on where the content ends. Without it the canvas clips and
+     * the DOM copy does not, and a selection highlight over content wider than
+     * the box paints past the entity onto whatever is drawn beside it — the
+     * defect a horizontally scrollable code block exhibits.
+     *
+     * Off by default, because the projection element is deliberately unclipped:
+     * `Scene` relies on that so selection can start in an entity's blank/padding
+     * regions and extend beyond its bounds.
+     */
+    clipToBounds?: boolean;
 }
 /** Typography for a native input projected by the accessibility layer. */
 export interface TextInputStyle {

package/dist/tree/scene/CanvasGeometry.d.ts

@@ -16,8 +16,9 @@
  *
  * - {@link clientToScene} — browser viewport coordinates to logical ones.
  * - {@link syncOverlay} — keeps the a11y, portal, WebGL and WebGPU layers
- *   aligned with the canvas box, including the memo that makes an unchanged
- *   frame write nothing.
+ *   aligned with the canvas box, including the `position` that layers share with
+ *   the canvas so a scroll needs no JS compensation, and the memo that makes an
+ *   unchanged frame write nothing.
  * - {@link effectiveDPR} and {@link sizeGpuCanvas} — the DPR clamp and the
  *   backing-store sizing that follows from it.
  *
@@ -74,6 +75,16 @@ export interface OverlayGeometry {
     cssHeight: number;
     width: number;
     height: number;
+    /**
+     * `position` written to the overlay layers, mirroring the canvas's own.
+     *
+     * Part of the memo because it is part of the written state: a canvas that
+     * becomes `fixed` after the first sync (a scroll-driven CSS class, a
+     * full-screen toggle) changes nothing else in here — same box, same logical
+     * size — so without this the memo would short-circuit and leave the overlay
+     * positioned the old way.
+     */
+    position: 'absolute' | 'fixed';
 }
 export declare class CanvasGeometry {
     private readonly canvas;

package/dist/tree/scene/content-break-carrier.d.ts

@@ -0,0 +1,77 @@
+/**
+ * How a projected line carries its trailing hard break.
+ *
+ * A projected line must hold its own line break in the DOM: copy, find-in-page
+ * and screen readers all read the projection, and a block whose lines are
+ * separate absolutely-positioned carriers has no flow structure a browser could
+ * synthesize a newline from. So the break character is written out explicitly.
+ *
+ * Writing it as an ordinary inline character is what this module exists to stop.
+ * The carriers are `white-space: pre`, so a trailing `\n` is a real preserved
+ * character in an inline context, and a browser gives it a selection rectangle
+ * of **zero width and full line height** at the end of the line. Chrome paints
+ * that rectangle, so selecting a line drew a caret-like vertical bar just past
+ * the last glyph — ink the canvas never drew, at a position no glyph occupies.
+ *
+ * Measured in real headed Chrome (DPR 1.76) on a live page, selecting one
+ * paragraph line of `1. 极致的性能与定制化：\n`: four selection rects, the last
+ * `x 495.18, w 0, h 31.82`. The same line with the break character removed
+ * produced one rect and no bar. Both projection paths were affected — a
+ * `CodeBlock` fixture reported one such rect on every line that owned a break
+ * (3 of 4 rows, including the empty row whose entire content is the break).
+ *
+ * ## Why the character stays in the DOM
+ *
+ * Deleting it fixes the bar and breaks copy: measured on the same page,
+ * stripping the trailing `\n` from every line of a block made
+ * `getSelection().toString()` return the block as one unbroken run. The break
+ * has to remain selectable text; it merely must not paint.
+ *
+ * `font-size: 0` is what separates those two. A zero font size leaves the
+ * character in the text content and in the selected string, while collapsing the
+ * line box it would otherwise contribute — measured on the same block, the
+ * zero-width full-height rect became `w 0, h 0` and the selected string still
+ * ended in `\n`.
+ *
+ * Rejected alternatives, each measured on the same live block:
+ *
+ * - **An absolutely positioned zero-size box** (`position: absolute; width: 0;
+ *   height: 0; overflow: hidden`) still produced the full-height rect, *and*
+ *   dropped the newline from the selected string — out of flow, the break no
+ *   longer serialises. Worse on both counts.
+ * - **Removing the character** and relying on the carriers' own box structure.
+ *   The line carriers do compute to `display: block`, so it is a reasonable
+ *   guess that the browser would synthesize the break — it does not. Copy came
+ *   back unbroken (see above).
+ *
+ * ## Why a shared module
+ *
+ * Both projection branches own break text and both had the defect:
+ * `Scene.syncContentProjection`'s carrier branch (plain and positioned-run
+ * lines) and {@link ContentGridProjector.syncGrid} (the last cell of a line, and
+ * an empty line's whole content). This follows the `content-line-window`
+ * precedent — a stateless helper both sides of the grid cut call, rather than a
+ * member on either — so the two cannot drift into disagreeing about how a break
+ * is represented, which would make copy fidelity depend on which branch drew a
+ * given block.
+ *
+ * Stateless by design: no `Scene`, no entities, no state beyond the node passed
+ * in.
+ */
+/**
+ * Append `breakText` to `owner`, suppressing its paint only if it is a hard
+ * break.
+ *
+ * A no-op for empty text, so callers can pass a separator that may legitimately
+ * be absent (the document's last line owns no break) without branching.
+ *
+ * A hard break goes into a `font-size: 0` span: still selectable, copyable and
+ * announced, but contributing no line box. Any other separator — a soft-wrap
+ * space — is appended as a plain text node, because its width is part of the
+ * line the canvas drew.
+ *
+ * The span is deliberately **not** `aria-hidden` and does **not** set
+ * `user-select: none`: the break is real content that a screen reader and a copy
+ * both want. Only its painted geometry is suppressed.
+ */
+export declare function appendContentBreak(owner: Node, breakText: string): void;

package/package.json

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