@vectojs/core 1.7.1 → 1.9.0

package/dist/index.js

@@ -3,7 +3,7 @@
 
 
 
-var _chunkZBKKRYDHjs = require('./chunk-ZBKKRYDH.js');
+var _chunkBA5HUUDFjs = require('./chunk-BA5HUUDF.js');
 
 
 
@@ -26,12 +26,13 @@ var _chunkBPMNCGU7js = require('./chunk-BPMNCGU7.js');
 
 
 
-var _chunkDFNK6OV6js = require('./chunk-DFNK6OV6.js');
 
+var _chunkGKLTTGBRjs = require('./chunk-GKLTTGBR.js');
 
 
 
-var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
+
+var _chunk4AR425ARjs = require('./chunk-4AR425AR.js');
 
 // src/tree/ComputeParticleEntity.ts
 var PARTICLE_STRIDE_FLOATS = 8;
@@ -43,7 +44,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 _chunkDFNK6OV6js.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
@@ -317,6 +318,297 @@ function parseInlinePx(value) {
   const n = parseFloat(value);
   return Number.isFinite(n) && n > 0 ? n : null;
 }
+function collectTextNodes(root) {
+  const out = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) out.push(n);
+  return out;
+}
+var caretGraphemeSegmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+var caretWordSegmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
+function graphemeBoundaries(text) {
+  if (!caretGraphemeSegmenter) {
+    const boundaries2 = [0];
+    for (let offset = 0; offset < text.length; ) {
+      const codePoint = _nullishCoalesce(text.codePointAt(offset), () => ( 0));
+      offset += codePoint > 65535 ? 2 : 1;
+      boundaries2.push(offset);
+    }
+    return boundaries2;
+  }
+  const boundaries = [0];
+  for (const segment of caretGraphemeSegmenter.segment(text)) {
+    const end = segment.index + segment.segment.length;
+    if (end > boundaries[boundaries.length - 1]) boundaries.push(end);
+  }
+  return boundaries;
+}
+function distanceToRectSquared(rect, x, y) {
+  const dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+  const dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
+  return dx * dx + dy * dy;
+}
+function nearestOffsetForPoint(node, x, y) {
+  const boundaries = graphemeBoundaries(node.data);
+  const range = document.createRange();
+  let nearest = { offset: _nullishCoalesce(boundaries[0], () => ( 0)), distance: Infinity };
+  for (const offset of boundaries) {
+    range.setStart(node, offset);
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    const distance = distanceToRectSquared(rect, x, y);
+    if (distance < nearest.distance) nearest = { offset, distance };
+  }
+  return nearest;
+}
+function gridCellCaret(cell, localX) {
+  const node = cell.firstChild;
+  if (!(node instanceof Text)) return null;
+  const sourceLength = Number(_nullishCoalesce(cell.dataset.vectoGridSourceLength, () => ( node.data.length)));
+  const level = Number(_nullishCoalesce(cell.dataset.vectoGridLevel, () => ( 0)));
+  const cellX = Number(_nullishCoalesce(cell.dataset.vectoGridX, () => ( 0)));
+  const advance = Number(_nullishCoalesce(cell.dataset.vectoGridAdvance, () => ( 0)));
+  const caretOffsets = (_nullishCoalesce(cell.dataset.vectoGridCaretOffsets, () => ( `0,${sourceLength}`))).split(",").map(Number).filter((offset) => Number.isInteger(offset) && offset >= 0 && offset <= sourceLength);
+  const visuallyRtl = (level & 1) !== 0;
+  const visualFraction = advance > 0 ? Math.max(0, Math.min(1, (localX - cellX) / advance)) : 0;
+  const sourceFraction = visuallyRtl ? 1 - visualFraction : visualFraction;
+  const caretIndex = Math.round(sourceFraction * Math.max(0, caretOffsets.length - 1));
+  return {
+    node,
+    offset: _nullishCoalesce(caretOffsets[caretIndex], () => ( 0))
+  };
+}
+function nearestGridPositionInLine(line, localX) {
+  let nearest = null;
+  for (const cell of line.querySelectorAll("[data-vecto-grid-cell]")) {
+    const x = Number(_nullishCoalesce(cell.dataset.vectoGridX, () => ( 0)));
+    const advance = Number(_nullishCoalesce(cell.dataset.vectoGridAdvance, () => ( 0)));
+    if (localX >= x && localX <= x + advance) return gridCellCaret(cell, localX);
+    const distance = localX < x ? x - localX : localX - (x + advance);
+    if (!nearest || distance < nearest.distance) nearest = { cell, distance };
+  }
+  if (!nearest) return null;
+  return gridCellCaret(nearest.cell, localX);
+}
+function parseCssMatrix(transform) {
+  if (!transform || transform === "none") return [1, 0, 0, 1];
+  const values = transform.slice(transform.indexOf("(") + 1, transform.lastIndexOf(")")).split(",").map(Number);
+  return values.length >= 4 && values.slice(0, 4).every(Number.isFinite) ? [values[0], values[1], values[2], values[3]] : [1, 0, 0, 1];
+}
+function clientToGridLocal(contentEl, canvas, clientX, clientY) {
+  const line = contentEl.querySelector("[data-vecto-grid-line]");
+  const originMarker = _optionalChain([line, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14('[data-vecto-grid-basis="origin"]')]);
+  const xMarker = _optionalChain([line, 'optionalAccess', _15 => _15.querySelector, 'call', _16 => _16('[data-vecto-grid-basis="x"]')]);
+  const yMarker = _optionalChain([line, 'optionalAccess', _17 => _17.querySelector, 'call', _18 => _18('[data-vecto-grid-basis="y"]')]);
+  if (line && originMarker && xMarker && yMarker) {
+    const origin = originMarker.getBoundingClientRect();
+    const xPoint = xMarker.getBoundingClientRect();
+    const yPoint = yMarker.getBoundingClientRect();
+    const xx = xPoint.left - origin.left;
+    const xy = xPoint.top - origin.top;
+    const yx = yPoint.left - origin.left;
+    const yy = yPoint.top - origin.top;
+    const determinant2 = xx * yy - xy * yx;
+    if (Number.isFinite(determinant2) && Math.abs(determinant2) > 1e-9) {
+      const dx2 = clientX - origin.left;
+      const dy2 = clientY - origin.top;
+      return {
+        x: (Number.parseFloat(line.style.left) || 0) + (yy * dx2 - yx * dy2) / determinant2,
+        y: (Number.parseFloat(line.style.top) || 0) + (-xy * dx2 + xx * dy2) / determinant2
+      };
+    }
+  }
+  const [a, b, c, d] = parseCssMatrix(getComputedStyle(contentEl).transform);
+  const canvasRect = canvas.getBoundingClientRect();
+  const logicalWidth = Number.parseFloat(canvas.style.width) || canvas.clientWidth || canvas.width;
+  const logicalHeight = Number.parseFloat(canvas.style.height) || canvas.clientHeight || canvas.height;
+  const scaleX = logicalWidth > 0 ? canvasRect.width / logicalWidth : 1;
+  const scaleY = logicalHeight > 0 ? canvasRect.height / logicalHeight : 1;
+  const worldX = (clientX - canvasRect.left) / scaleX;
+  const worldY = (clientY - canvasRect.top) / scaleY;
+  const dx = worldX - (Number.parseFloat(contentEl.style.left) || 0);
+  const dy = worldY - (Number.parseFloat(contentEl.style.top) || 0);
+  const determinant = a * d - b * c;
+  if (!Number.isFinite(determinant) || Math.abs(determinant) <= 1e-9) return null;
+  return {
+    x: (d * dx - c * dy) / determinant,
+    y: (-b * dx + a * dy) / determinant
+  };
+}
+function nearestGridPosition(contentEl, canvas, clientX, clientY) {
+  const lines = [...contentEl.querySelectorAll("[data-vecto-grid-line]")];
+  if (lines.length === 0) return null;
+  const [a, b, c, d] = parseCssMatrix(getComputedStyle(contentEl).transform);
+  if (a > 0 && d > 0 && Math.abs(b) <= 1e-9 && Math.abs(c) <= 1e-9) {
+    let nearest2 = null;
+    for (const line of lines) {
+      const rect = line.getBoundingClientRect();
+      const dy = clientY < rect.top ? rect.top - clientY : clientY > rect.bottom ? clientY - rect.bottom : 0;
+      const dx = clientX < rect.left ? rect.left - clientX : clientX > rect.right ? clientX - rect.right : 0;
+      const distance = dy * 4096 + dx;
+      if (!nearest2 || distance < nearest2.distance) nearest2 = { line, distance, rect };
+    }
+    if (!nearest2) return null;
+    const localWidth = Number.parseFloat(nearest2.line.style.width) || 0;
+    const scaleX = localWidth > 0 && nearest2.rect.width > 0 ? nearest2.rect.width / localWidth : 1;
+    const localX = (clientX - nearest2.rect.left) / scaleX;
+    return nearestGridPositionInLine(nearest2.line, localX);
+  }
+  const local = clientToGridLocal(contentEl, canvas, clientX, clientY);
+  if (!local) return null;
+  let nearest = null;
+  for (const line of lines) {
+    const left = Number.parseFloat(line.style.left) || 0;
+    const top = Number.parseFloat(line.style.top) || 0;
+    const width = Number.parseFloat(line.style.width) || 0;
+    const height = Number.parseFloat(line.style.height) || 0;
+    const dy = local.y < top ? top - local.y : local.y > top + height ? local.y - top - height : 0;
+    const dx = local.x < left ? left - local.x : local.x > left + width ? local.x - left - width : 0;
+    const distance = dy * 4096 + dx;
+    if (!nearest || distance < nearest.distance) nearest = { line, distance };
+  }
+  if (!nearest) return null;
+  const lineLeft = Number.parseFloat(nearest.line.style.left) || 0;
+  return nearestGridPositionInLine(nearest.line, local.x - lineLeft);
+}
+function nearestTextPositionInLine(line, x, y) {
+  const texts = collectTextNodes(line);
+  if (texts.length === 0) return null;
+  let nearest = null;
+  for (const node of texts) {
+    const candidate = nearestOffsetForPoint(node, x, y);
+    if (!nearest || candidate.distance < nearest.distance) {
+      let { offset } = candidate;
+      while (offset > 0 && node.data[offset - 1] === "\n") offset--;
+      nearest = { position: { node, offset }, distance: candidate.distance };
+    }
+  }
+  return _nullishCoalesce(_optionalChain([nearest, 'optionalAccess', _19 => _19.position]), () => ( null));
+}
+function nearestTextPositionInProjection(contentEl, canvas, x, y, eventTarget) {
+  if (contentEl.dataset.vectoContentGrid !== void 0) {
+    return nearestGridPosition(contentEl, canvas, x, y);
+  }
+  let targetLine = eventTarget;
+  while (targetLine && targetLine.parentElement !== contentEl) {
+    if (!contentEl.contains(targetLine)) {
+      targetLine = null;
+      break;
+    }
+    targetLine = targetLine.parentElement;
+  }
+  if (_optionalChain([targetLine, 'optionalAccess', _20 => _20.parentElement]) === contentEl) {
+    return nearestTextPositionInLine(targetLine, x, y);
+  }
+  let bestLine = null;
+  let bestDist = Infinity;
+  for (let i = 0; i < contentEl.children.length; i++) {
+    const child = contentEl.children[i];
+    const rect = child.getBoundingClientRect();
+    if (rect.width <= 0 && rect.height <= 0) continue;
+    const dy = y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
+    const dx = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0;
+    const dist = dy * 4096 + dx;
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestLine = child;
+    }
+  }
+  if (bestLine) return nearestTextPositionInLine(bestLine, x, y);
+  return nearestTextPositionInLine(contentEl, x, y);
+}
+function projectionAbsoluteOffset(root, caret) {
+  let offset = 0;
+  for (const node of collectTextNodes(root)) {
+    if (node === caret.node) return offset + Math.min(caret.offset, node.data.length);
+    offset += node.data.length;
+  }
+  return null;
+}
+function projectionCaretAt(root, absoluteOffset, affinity) {
+  const nodes = collectTextNodes(root);
+  if (nodes.length === 0) return null;
+  let remaining = Math.max(0, absoluteOffset);
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index];
+    if (remaining < node.data.length || remaining === node.data.length && affinity === "backward") {
+      return { node, offset: remaining };
+    }
+    if (remaining === node.data.length && index === nodes.length - 1) {
+      return { node, offset: remaining };
+    }
+    remaining -= node.data.length;
+  }
+  const last = nodes[nodes.length - 1];
+  return { node: last, offset: last.data.length };
+}
+function selectProjectionUnit(selection, root, caret, unit) {
+  const absoluteOffset = projectionAbsoluteOffset(root, caret);
+  const text = _nullishCoalesce(root.textContent, () => ( ""));
+  if (absoluteOffset === null || text.length === 0) return false;
+  let start = absoluteOffset;
+  let end = absoluteOffset;
+  if (unit === "line") {
+    for (let index = Math.max(0, absoluteOffset - 1); index >= 0; index--) {
+      if (text[index] === "\n" || text[index] === "\r") {
+        start = index + 1;
+        if (text[index] === "\r" && text[index + 1] === "\n") start++;
+        break;
+      }
+    }
+    const cr = text.indexOf("\r", absoluteOffset);
+    const lf = text.indexOf("\n", absoluteOffset);
+    const separator = [cr, lf].filter((index) => index >= 0).sort((a, b) => a - b)[0];
+    end = separator === void 0 ? text.length : separator;
+  } else if (caretWordSegmenter) {
+    const segments = [...caretWordSegmenter.segment(text)];
+    const selected = _nullishCoalesce(_nullishCoalesce(segments.find(
+      (segment) => segment.isWordLike && absoluteOffset >= segment.index && absoluteOffset <= segment.index + segment.segment.length
+    ), () => ( segments.find((segment) => segment.isWordLike && segment.index >= absoluteOffset))), () => ( [...segments].reverse().find((segment) => segment.isWordLike)));
+    if (selected) {
+      start = selected.index;
+      end = selected.index + selected.segment.length;
+    }
+  } else {
+    const isWord = (character) => /[\p{L}\p{N}_]/u.test(character);
+    while (start > 0 && isWord(text[start - 1])) start--;
+    while (end < text.length && isWord(text[end])) end++;
+  }
+  const anchor = projectionCaretAt(root, start, "forward");
+  const focus = projectionCaretAt(root, end, "backward");
+  if (!anchor || !focus) return false;
+  selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+  return true;
+}
+function extendSelection(selection, anchor, focus) {
+  try {
+    selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+    return;
+  } catch (e3) {
+  }
+  try {
+    selection.collapse(anchor.node, anchor.offset);
+    selection.extend(focus.node, focus.offset);
+    return;
+  } catch (e4) {
+  }
+  const anchorRange = document.createRange();
+  anchorRange.setStart(anchor.node, anchor.offset);
+  anchorRange.collapse(true);
+  const focusRange = document.createRange();
+  focusRange.setStart(focus.node, focus.offset);
+  focusRange.collapse(true);
+  const range = document.createRange();
+  if (anchorRange.compareBoundaryPoints(Range.START_TO_START, focusRange) <= 0) {
+    range.setStart(anchor.node, anchor.offset);
+    range.setEnd(focus.node, focus.offset);
+  } else {
+    range.setStart(focus.node, focus.offset);
+    range.setEnd(anchor.node, anchor.offset);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
 var Scene = (_class2 = class _Scene {
   static __initStatic() {this.webglCreator = null}
   static __initStatic2() {this.webgpuManagerClass = null}
@@ -355,7 +647,7 @@ var Scene = (_class2 = class _Scene {
   __init14() {this.reducedMotionQuery = 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', _13 => _13.reducedMotionQuery, 'optionalAccess', _14 => _14.matches]);
+    return this.respectReducedMotion && !!_optionalChain([this, 'access', _21 => _21.reducedMotionQuery, 'optionalAccess', _22 => _22.matches]);
   }
   /**
    * Throttle interval (ms) for the a11y/automation shadow sync. `0` = every
@@ -373,63 +665,81 @@ var Scene = (_class2 = class _Scene {
   __init18() {this.a11yElements = /* @__PURE__ */ new Map()}
   /** DOM nodes mirroring static text content, keyed by entity id. */
   __init19() {this.contentElements = /* @__PURE__ */ new Map()}
-  __init20() {this.contentProjectionEnabled = true}
+  /** Pending cold font-calibration frame per projected grid entity. */
+  __init20() {this.contentGridCalibrationFrames = /* @__PURE__ */ new Map()}
+  /** Detached, untransformed font probes used by the cold calibration pass. */
+  __init21() {this.contentGridCalibrationProbes = /* @__PURE__ */ new Map()}
+  /** Invalidates grid font calibration after browser font availability changes. */
+  __init22() {this.contentFontEpoch = 0}
+  /** Cached Canvas-to-client scale for the current font/viewport epoch. */
+  __init23() {this.contentMetricScaleEpoch = -1}
+  __init24() {this.contentMetricScaleX = 1}
+  __init25() {this.contentProjectionEnabled = true}
+  /**
+   * True while a text-selection drag that started on a projection's blank
+   * region (no text node under the press) is being driven manually — the
+   * browser has no native anchor for it, so mousemove extends the Selection
+   * from the position we resolved ourselves.
+   */
+  __init26() {this.blankRegionSelectionDrag = false}
+  __init27() {this.contentSelectionAnchor = null}
+  __init28() {this.contentSelectionEndListener = null}
   // Animation/interactive flags collected during the render walk (tree-walk
   // fusion): the loop reads last frame's answers instead of re-walking the
   // tree up to 4× per tick. Start true so the first tick stays conservative.
-  __init21() {this.frameHadAnimation = true}
-  __init22() {this.frameHadInteractive = true}
+  __init29() {this.frameHadAnimation = true}
+  __init30() {this.frameHadInteractive = true}
   
-  __init23() {this.focusedA11yElement = null}
-  __init24() {this.caretBlinkTimer = null}
-  __init25() {this.a11yNeedsReorder = true}
-  __init26() {this.portalRoot = null}
-  __init27() {this.fullViewportElements = []}
-  __init28() {this.normalElements = []}
-  __init29() {this.activeIds = /* @__PURE__ */ new Set()}
-  __init30() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
-  __init31() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
-  __init32() {this.portalEntities = /* @__PURE__ */ new Map()}
-  __init33() {this.renderOrderCounter = 0}
+  __init31() {this.focusedA11yElement = null}
+  __init32() {this.caretBlinkTimer = null}
+  __init33() {this.a11yNeedsReorder = true}
+  __init34() {this.portalRoot = null}
+  __init35() {this.fullViewportElements = []}
+  __init36() {this.normalElements = []}
+  __init37() {this.activeIds = /* @__PURE__ */ new Set()}
+  __init38() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
+  __init39() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
+  __init40() {this.portalEntities = /* @__PURE__ */ new Map()}
+  __init41() {this.renderOrderCounter = 0}
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
-  __init34() {this.pointRenderer = null}
-  __init35() {this.glCanvas = null}
+  __init42() {this.pointRenderer = null}
+  __init43() {this.glCanvas = null}
   
   
   
-  __init36() {this.disableWindowResize = false}
+  __init44() {this.disableWindowResize = false}
   // WebGPU properties
-  __init37() {this.destroyed = false}
-  __init38() {this.device = null}
-  __init39() {this.deviceLost = false}
-  __init40() {this.particleBackend = "auto"}
-  __init41() {this._webgpuDisabled = false}
+  __init45() {this.destroyed = false}
+  __init46() {this.device = null}
+  __init47() {this.deviceLost = false}
+  __init48() {this.particleBackend = "auto"}
+  __init49() {this._webgpuDisabled = false}
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
-  __init42() {this.recoveryTimerId = null}
-  __init43() {this.manager = null}
-  __init44() {this.initializingWebGPU = false}
-  __init45() {this.gpuCanvas = null}
-  __init46() {this.gpuContext = null}
+  __init50() {this.recoveryTimerId = null}
+  __init51() {this.manager = null}
+  __init52() {this.initializingWebGPU = false}
+  __init53() {this.gpuCanvas = null}
+  __init54() {this.gpuContext = null}
   /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
-  __init47() {this.gpuHasContent = false}
-  __init48() {this.mouseX = -9999}
-  __init49() {this.mouseY = -9999}
-  __init50() {this.pointerMoveListener = null}
-  __init51() {this.pointerLeaveListener = null}
-  __init52() {this.hasWarnedZeroSize = false}
-  __init53() {this.fontLoadHandler = null}
-  constructor(canvas, options = {}) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);_class2.prototype.__init29.call(this);_class2.prototype.__init30.call(this);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);_class2.prototype.__init35.call(this);_class2.prototype.__init36.call(this);_class2.prototype.__init37.call(this);_class2.prototype.__init38.call(this);_class2.prototype.__init39.call(this);_class2.prototype.__init40.call(this);_class2.prototype.__init41.call(this);_class2.prototype.__init42.call(this);_class2.prototype.__init43.call(this);_class2.prototype.__init44.call(this);_class2.prototype.__init45.call(this);_class2.prototype.__init46.call(this);_class2.prototype.__init47.call(this);_class2.prototype.__init48.call(this);_class2.prototype.__init49.call(this);_class2.prototype.__init50.call(this);_class2.prototype.__init51.call(this);_class2.prototype.__init52.call(this);_class2.prototype.__init53.call(this);
+  __init55() {this.gpuHasContent = false}
+  __init56() {this.mouseX = -9999}
+  __init57() {this.mouseY = -9999}
+  __init58() {this.pointerMoveListener = null}
+  __init59() {this.pointerLeaveListener = null}
+  __init60() {this.hasWarnedZeroSize = false}
+  __init61() {this.fontLoadHandler = null}
+  constructor(canvas, options = {}) {;_class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);_class2.prototype.__init19.call(this);_class2.prototype.__init20.call(this);_class2.prototype.__init21.call(this);_class2.prototype.__init22.call(this);_class2.prototype.__init23.call(this);_class2.prototype.__init24.call(this);_class2.prototype.__init25.call(this);_class2.prototype.__init26.call(this);_class2.prototype.__init27.call(this);_class2.prototype.__init28.call(this);_class2.prototype.__init29.call(this);_class2.prototype.__init30.call(this);_class2.prototype.__init31.call(this);_class2.prototype.__init32.call(this);_class2.prototype.__init33.call(this);_class2.prototype.__init34.call(this);_class2.prototype.__init35.call(this);_class2.prototype.__init36.call(this);_class2.prototype.__init37.call(this);_class2.prototype.__init38.call(this);_class2.prototype.__init39.call(this);_class2.prototype.__init40.call(this);_class2.prototype.__init41.call(this);_class2.prototype.__init42.call(this);_class2.prototype.__init43.call(this);_class2.prototype.__init44.call(this);_class2.prototype.__init45.call(this);_class2.prototype.__init46.call(this);_class2.prototype.__init47.call(this);_class2.prototype.__init48.call(this);_class2.prototype.__init49.call(this);_class2.prototype.__init50.call(this);_class2.prototype.__init51.call(this);_class2.prototype.__init52.call(this);_class2.prototype.__init53.call(this);_class2.prototype.__init54.call(this);_class2.prototype.__init55.call(this);_class2.prototype.__init56.call(this);_class2.prototype.__init57.call(this);_class2.prototype.__init58.call(this);_class2.prototype.__init59.call(this);_class2.prototype.__init60.call(this);_class2.prototype.__init61.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     if (this.disableWindowResize) {
-      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _15 => _15.style, 'optionalAccess', _16 => _16.width]));
-      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _17 => _17.style, 'optionalAccess', _18 => _18.height]));
+      const styleWidth = parseInlinePx(_optionalChain([canvas, 'access', _23 => _23.style, 'optionalAccess', _24 => _24.width]));
+      const styleHeight = parseInlinePx(_optionalChain([canvas, 'access', _25 => _25.style, 'optionalAccess', _26 => _26.height]));
       this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
       this.height = _nullishCoalesce(styleHeight, () => ( (canvas.height || canvas.clientHeight || 0)));
     } else {
@@ -437,7 +747,7 @@ var Scene = (_class2 = 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', _19 => _19.env, 'optionalAccess', _20 => _20.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _21 => _21.env, 'optionalAccess', _22 => _22.VITEST]) === "true");
+    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _27 => _27.env, 'optionalAccess', _28 => _28.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _29 => _29.env, 'optionalAccess', _30 => _30.VITEST]) === "true");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
@@ -445,7 +755,7 @@ var Scene = (_class2 = class _Scene {
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-    this.root = new class RootEntity extends _chunkDFNK6OV6js.Entity {
+    this.root = new class RootEntity extends _chunkGKLTTGBRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -454,7 +764,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunkDFNK6OV6js.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkGKLTTGBRjs.Entity {
       isPointInside() {
         return false;
       }
@@ -482,16 +792,88 @@ var Scene = (_class2 = class _Scene {
       this.a11yRoot.style.zIndex = "10";
       this.a11yRoot.style.userSelect = "text";
       this.a11yRoot.addEventListener("mousedown", (e) => {
+        if (e.button !== 0) return;
         const target = e.target;
-        if (target !== this.a11yRoot && target.closest("[data-vecto-content]") && getComputedStyle(target.closest("[data-vecto-content]")).pointerEvents === "auto") {
-          this.a11yRoot.style.pointerEvents = "auto";
+        const contentEl = target.closest("[data-vecto-content]");
+        if (target === this.a11yRoot || !contentEl) return;
+        if (getComputedStyle(contentEl).pointerEvents !== "auto") return;
+        const selection = window.getSelection();
+        if (!selection) return;
+        this.a11yRoot.style.pointerEvents = "auto";
+        const resolved = nearestTextPositionInProjection(
+          contentEl,
+          this.canvas,
+          e.clientX,
+          e.clientY,
+          target
+        );
+        if (resolved) {
+          if (e.detail >= 2) {
+            selection.removeAllRanges();
+            selectProjectionUnit(selection, contentEl, resolved, e.detail >= 3 ? "line" : "word");
+            this.endContentSelectionDrag();
+            e.preventDefault();
+            return;
+          }
+          const existingAnchor = e.shiftKey && selection.anchorNode instanceof Text ? { node: selection.anchorNode, offset: selection.anchorOffset } : null;
+          const anchor = existingAnchor && this.a11yRoot.contains(existingAnchor.node) ? existingAnchor : resolved;
+          if (e.shiftKey && existingAnchor) extendSelection(selection, anchor, resolved);
+          else selection.collapse(resolved.node, resolved.offset);
+          this.contentSelectionAnchor = anchor;
+          this.blankRegionSelectionDrag = true;
+          e.preventDefault();
         }
       });
-      const endDrag = () => {
-        if (this.a11yRoot) this.a11yRoot.style.pointerEvents = "none";
-      };
+      this.a11yRoot.addEventListener("dblclick", (e) => {
+        const target = e.target;
+        const contentEl = target.closest("[data-vecto-content]");
+        if (!contentEl || getComputedStyle(contentEl).pointerEvents !== "auto") return;
+        const selection = window.getSelection();
+        const caret = nearestTextPositionInProjection(
+          contentEl,
+          this.canvas,
+          e.clientX,
+          e.clientY,
+          target
+        );
+        if (!selection || !caret) return;
+        selection.removeAllRanges();
+        selectProjectionUnit(selection, contentEl, caret, "word");
+        this.endContentSelectionDrag();
+        e.preventDefault();
+      });
+      this.a11yRoot.addEventListener("mousemove", (e) => {
+        if (!this.blankRegionSelectionDrag) return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) return;
+        const target = e.target;
+        let contentEl = target.closest("[data-vecto-content]");
+        if (!contentEl) {
+          let bestDistance = Infinity;
+          for (const candidate of this.contentElements.values()) {
+            if (getComputedStyle(candidate).pointerEvents !== "auto") continue;
+            const rect = candidate.getBoundingClientRect();
+            const dx = e.clientX < rect.left ? rect.left - e.clientX : e.clientX > rect.right ? e.clientX - rect.right : 0;
+            const dy = e.clientY < rect.top ? rect.top - e.clientY : e.clientY > rect.bottom ? e.clientY - rect.bottom : 0;
+            const distance = dx * dx + dy * dy;
+            if (distance < bestDistance) {
+              bestDistance = distance;
+              contentEl = candidate;
+            }
+          }
+        }
+        const focus = contentEl ? nearestTextPositionInProjection(contentEl, this.canvas, e.clientX, e.clientY, target) : null;
+        const anchor = this.contentSelectionAnchor;
+        if (focus && anchor) {
+          extendSelection(selection, anchor, focus);
+        }
+      });
+      const endDrag = () => this.endContentSelectionDrag();
       this.a11yRoot.addEventListener("mouseup", endDrag);
       this.a11yRoot.addEventListener("mouseleave", endDrag);
+      window.addEventListener("mouseup", endDrag);
+      window.addEventListener("blur", endDrag);
+      this.contentSelectionEndListener = endDrag;
       if (canvas.parentElement) {
         canvas.parentElement.appendChild(this.a11yRoot);
       }
@@ -533,7 +915,8 @@ var Scene = (_class2 = class _Scene {
     };
     if (typeof document !== "undefined" && document.fonts) {
       this.fontLoadHandler = () => {
-        _chunkDFNK6OV6js.clearCssLineBoxMetrics.call(void 0, );
+        _chunkGKLTTGBRjs.clearCssLineBoxMetrics.call(void 0, );
+        this.contentFontEpoch++;
         this.markDirty();
       };
       document.fonts.ready.then(this.fontLoadHandler);
@@ -541,6 +924,18 @@ var Scene = (_class2 = class _Scene {
     }
     this.setupEvents();
   }
+  endContentSelectionDrag() {
+    this.blankRegionSelectionDrag = false;
+    this.contentSelectionAnchor = null;
+    if (this.a11yRoot) this.a11yRoot.style.pointerEvents = "none";
+  }
+  releaseContentSelectionForRebuild(el) {
+    const selection = typeof window !== "undefined" && typeof window.getSelection === "function" ? window.getSelection() : null;
+    const ownsSelection = this.contentSelectionAnchor && el.contains(this.contentSelectionAnchor.node) || (_optionalChain([selection, 'optionalAccess', _31 => _31.anchorNode]) ? el.contains(selection.anchorNode) : false) || (_optionalChain([selection, 'optionalAccess', _32 => _32.focusNode]) ? el.contains(selection.focusNode) : false);
+    if (!ownsSelection) return;
+    this.endContentSelectionDrag();
+    _optionalChain([selection, 'optionalAccess', _33 => _33.removeAllRanges, 'call', _34 => _34()]);
+  }
   /**
    * Expose the underlying {@link IRenderer} for advanced direct-draw operations.
    *
@@ -551,7 +946,7 @@ var Scene = (_class2 = class _Scene {
   }
   /** Convert browser viewport coordinates into this Scene's logical coordinates. */
   clientToScene(clientX, clientY) {
-    const rect = _optionalChain([this, 'access', _23 => _23.canvas, 'access', _24 => _24.getBoundingClientRect, 'optionalCall', _25 => _25()]);
+    const rect = _optionalChain([this, 'access', _35 => _35.canvas, 'access', _36 => _36.getBoundingClientRect, 'optionalCall', _37 => _37()]);
     if (!rect) return { x: clientX, y: clientY };
     const cssWidth = rect.width || this.canvas.clientWidth || this.width;
     const cssHeight = rect.height || this.canvas.clientHeight || this.height;
@@ -571,6 +966,24 @@ var Scene = (_class2 = class _Scene {
     this.root.add(entity);
     return this;
   }
+  clearContentGridState(entityId, el) {
+    const calibrationFrame = this.contentGridCalibrationFrames.get(entityId);
+    if (calibrationFrame !== void 0 && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(calibrationFrame);
+    }
+    this.contentGridCalibrationFrames.delete(entityId);
+    _optionalChain([this, 'access', _38 => _38.contentGridCalibrationProbes, 'access', _39 => _39.get, 'call', _40 => _40(entityId), 'optionalAccess', _41 => _41.remove, 'call', _42 => _42()]);
+    this.contentGridCalibrationProbes.delete(entityId);
+    delete el.dataset.vectoGridCalibrationPending;
+    delete el.dataset.vectoGridCalibration;
+    delete el.dataset.vectoGridReady;
+    delete el.dataset.vectoContentGrid;
+    delete el.dataset.vectoGridCarriers;
+    delete el.dataset.vectoGridMaterializeMs;
+    delete el.dataset.vectoGridCalibrationSamples;
+    delete el.dataset.vectoGridCalibrationMs;
+    this.releaseContentSelectionForRebuild(el);
+  }
   removeA11yRecursively(node) {
     if (node.isDOMPortal) {
       node.domElement.remove();
@@ -580,6 +993,7 @@ var Scene = (_class2 = class _Scene {
     }
     const contentEl = this.contentElements.get(node.id);
     if (contentEl) {
+      this.clearContentGridState(node.id, contentEl);
       contentEl.remove();
       this.contentElements.delete(node.id);
       this.a11yNeedsReorder = true;
@@ -661,6 +1075,11 @@ var Scene = (_class2 = class _Scene {
     if (typeof window !== "undefined" && !this.disableWindowResize) {
       window.removeEventListener("resize", this.resizeHandler);
     }
+    if (typeof window !== "undefined" && this.contentSelectionEndListener) {
+      window.removeEventListener("mouseup", this.contentSelectionEndListener);
+      window.removeEventListener("blur", this.contentSelectionEndListener);
+      this.contentSelectionEndListener = null;
+    }
     if (typeof window !== "undefined" && this.canvas && typeof this.canvas.removeEventListener === "function") {
       if (this.pointerMoveListener) {
         this.canvas.removeEventListener("pointermove", this.pointerMoveListener);
@@ -669,15 +1088,24 @@ var Scene = (_class2 = class _Scene {
         this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
       }
     }
-    _optionalChain([this, 'access', _26 => _26.a11yRoot, 'optionalAccess', _27 => _27.remove, 'call', _28 => _28()]);
-    _optionalChain([this, 'access', _29 => _29.portalRoot, 'optionalAccess', _30 => _30.remove, 'call', _31 => _31()]);
+    _optionalChain([this, 'access', _43 => _43.a11yRoot, 'optionalAccess', _44 => _44.remove, 'call', _45 => _45()]);
+    _optionalChain([this, 'access', _46 => _46.portalRoot, 'optionalAccess', _47 => _47.remove, 'call', _48 => _48()]);
     this.a11yElements.clear();
     for (const el of this.contentElements.values()) el.remove();
     this.contentElements.clear();
-    _optionalChain([this, 'access', _32 => _32.pointRenderer, 'optionalAccess', _33 => _33.destroy, 'call', _34 => _34()]);
-    _optionalChain([this, 'access', _35 => _35.renderer, 'access', _36 => _36.dispose, 'optionalCall', _37 => _37()]);
-    _optionalChain([this, 'access', _38 => _38.glCanvas, 'optionalAccess', _39 => _39.remove, 'call', _40 => _40()]);
-    _optionalChain([this, 'access', _41 => _41.gpuCanvas, 'optionalAccess', _42 => _42.remove, 'call', _43 => _43()]);
+    if (typeof cancelAnimationFrame === "function") {
+      for (const frame of this.contentGridCalibrationFrames.values()) {
+        cancelAnimationFrame(frame);
+      }
+    }
+    this.contentGridCalibrationFrames.clear();
+    for (const probe of this.contentGridCalibrationProbes.values()) probe.remove();
+    this.contentGridCalibrationProbes.clear();
+    this.endContentSelectionDrag();
+    _optionalChain([this, 'access', _49 => _49.pointRenderer, 'optionalAccess', _50 => _50.destroy, 'call', _51 => _51()]);
+    _optionalChain([this, 'access', _52 => _52.renderer, 'access', _53 => _53.dispose, 'optionalCall', _54 => _54()]);
+    _optionalChain([this, 'access', _55 => _55.glCanvas, 'optionalAccess', _56 => _56.remove, 'call', _57 => _57()]);
+    _optionalChain([this, 'access', _58 => _58.gpuCanvas, 'optionalAccess', _59 => _59.remove, 'call', _60 => _60()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -689,7 +1117,7 @@ var Scene = (_class2 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _44 => _44.device, 'access', _45 => _45.destroy, 'optionalCall', _46 => _46()]);
+      _optionalChain([this, 'access', _61 => _61.device, 'access', _62 => _62.destroy, 'optionalCall', _63 => _63()]);
       this.device = null;
     }
   }
@@ -831,15 +1259,15 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("hover", node, e, false));
         });
         el.addEventListener("mouseleave", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.05)";
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         const releasePointer = (event) => {
@@ -855,32 +1283,32 @@ var Scene = (_class2 = class _Scene {
         };
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener("pointercancel", (e) => {
           releasePointer(e);
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointercancel", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointercancel", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -907,7 +1335,7 @@ var Scene = (_class2 = class _Scene {
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _47 => _47.start]), () => ( 0)), length: data.length };
+            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _64 => _64.start]), () => ( 0)), length: data.length };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -940,7 +1368,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -958,6 +1386,10 @@ var Scene = (_class2 = class _Scene {
       if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
         el.setAttribute("aria-label", attrs.label);
       }
+      const semanticPointerEvents = _nullishCoalesce(attrs.pointerEvents, () => ( "auto"));
+      if (el.style.pointerEvents !== semanticPointerEvents) {
+        el.style.pointerEvents = semanticPointerEvents;
+      }
       const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
       const desiredTabIndex = _nullishCoalesce(attrs.tabIndex, () => ( implicitTabIndex));
       if (desiredTabIndex === null) {
@@ -1074,6 +1506,7 @@ var Scene = (_class2 = class _Scene {
     let el = this.contentElements.get(node.id);
     if (!projection || !projection.text) {
       if (el) {
+        this.clearContentGridState(node.id, el);
         el.remove();
         this.contentElements.delete(node.id);
         this.a11yNeedsReorder = true;
@@ -1096,7 +1529,7 @@ var Scene = (_class2 = class _Scene {
       el.addEventListener(
         "wheel",
         (e2) => {
-          node.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)("wheel", node, e2));
+          node.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)("wheel", node, e2));
         },
         { passive: false }
       );
@@ -1105,13 +1538,19 @@ var Scene = (_class2 = class _Scene {
       this.a11yNeedsReorder = true;
     }
     const lines = projection.lines;
-    if (lines && lines.length > 0) {
+    if (!projection.grid && el.dataset.vectoContentGrid !== void 0) {
+      this.clearContentGridState(node.id, el);
+    }
+    if (projection.grid) {
+      this.syncContentGridProjection(node, el, projection, projection.grid);
+    } else if (lines && lines.length > 0) {
       const signature = JSON.stringify({
         lines,
         fallbackFont: _nullishCoalesce(projection.font, () => ( "")),
         fallbackLineHeight: _nullishCoalesce(projection.lineHeight, () => ( 16))
       });
       if (el.dataset.vectoProjectionLines !== signature) {
+        this.releaseContentSelectionForRebuild(el);
         el.replaceChildren();
         for (let index = 0; index < lines.length; index++) {
           const line = lines[index];
@@ -1121,7 +1560,7 @@ var Scene = (_class2 = class _Scene {
           lineElement.style.position = "absolute";
           lineElement.dir = "auto";
           lineElement.style.left = `${line.x}px`;
-          lineElement.style.top = `${line.y + line.baseline - _chunkDFNK6OV6js.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
+          lineElement.style.top = `${line.y + line.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, lineFont, lineHeight2)}px`;
           lineElement.style.whiteSpace = "pre";
           if (lineFont) lineElement.style.font = lineFont;
           lineElement.style.lineHeight = `${lineHeight2}px`;
@@ -1143,13 +1582,21 @@ var Scene = (_class2 = class _Scene {
         el.dataset.vectoProjectionLines = signature;
       }
     } else {
-      if (el.textContent !== projection.text) el.textContent = projection.text;
+      if (el.textContent !== projection.text) {
+        this.releaseContentSelectionForRebuild(el);
+        el.textContent = projection.text;
+      }
       delete el.dataset.vectoProjectionLines;
     }
     const font = _nullishCoalesce(projection.font, () => ( ""));
     if (el.style.font !== font) el.style.font = font;
     const lineHeight = projection.lineHeight !== void 0 ? `${projection.lineHeight}px` : "";
     if (el.style.lineHeight !== lineHeight) el.style.lineHeight = lineHeight;
+    const ligatures = projection.ligatures === "none" ? "none" : "";
+    if (el.style.getPropertyValue("font-variant-ligatures") !== ligatures) {
+      el.style.setProperty("font-variant-ligatures", ligatures);
+      el.style.setProperty("font-kerning", ligatures ? "none" : "");
+    }
     const hidden = node.interactive ? "true" : null;
     if (el.getAttribute("aria-hidden") !== hidden) {
       if (hidden) el.setAttribute("aria-hidden", hidden);
@@ -1165,7 +1612,7 @@ var Scene = (_class2 = class _Scene {
     const { a, b, c, d, e, f } = node.getWorldTransform();
     const contentX = _nullishCoalesce(projection.contentX, () => ( 0));
     const contentY = _nullishCoalesce(projection.contentY, () => ( 0));
-    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkDFNK6OV6js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
+    const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - _chunkGKLTTGBRjs.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
     const localY = contentY + baselineOffset;
     el.style.left = `${e + a * contentX + c * localY}px`;
     el.style.top = `${f + b * contentX + d * localY}px`;
@@ -1211,6 +1658,245 @@ var Scene = (_class2 = class _Scene {
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
   }
+  /**
+   * Materialize a prepared grid in logical source order while positioning each
+   * carrier from the shared canvas geometry. Browser font measurement happens
+   * later in one cold read/write batch, never inside projection synchronization.
+   */
+  syncContentGridProjection(node, el, projection, grid) {
+    if (grid.source !== projection.text) {
+      throw new Error("ContentProjection.grid.source must equal ContentProjection.text");
+    }
+    const signature = `${grid.revision}`;
+    if (el.dataset.vectoContentGrid !== signature) {
+      const materializeStart = typeof performance !== "undefined" ? performance.now() : 0;
+      this.clearContentGridState(node.id, el);
+      el.replaceChildren();
+      const projectionLines = _nullishCoalesce(projection.lines, () => ( []));
+      for (let lineIndex = 0; lineIndex < grid.lines.length; lineIndex++) {
+        const gridLine = grid.lines[lineIndex];
+        const projectedLine = projectionLines[lineIndex];
+        const lineHeight = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _65 => _65.lineHeight]), () => ( grid.lineHeight));
+        const baseline = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _66 => _66.baseline]), () => ( grid.baseline));
+        const lineFont = _nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _67 => _67.font]), () => ( grid.font));
+        const lineElement = document.createElement("span");
+        lineElement.dir = "ltr";
+        lineElement.dataset.vectoGridLine = `${lineIndex}`;
+        lineElement.style.position = "absolute";
+        lineElement.style.left = `${_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _68 => _68.x]), () => ( 0))}px`;
+        lineElement.style.top = `${(_nullishCoalesce(_optionalChain([projectedLine, 'optionalAccess', _69 => _69.y]), () => ( lineIndex * grid.lineHeight))) + baseline - _chunkGKLTTGBRjs.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`;
+        if (gridLine.cells.length === 0) {
+          lineElement.textContent = grid.source.slice(gridLine.sourceEnd, gridLine.nextSourceStart);
+        } 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.dataset.vectoGridCell = `${cellIndex}`;
+            cellElement.dataset.vectoGridSourceLength = `${sourceText.length}`;
+            cellElement.dataset.vectoGridSourceStart = `${cell.sourceStart}`;
+            cellElement.dataset.vectoGridSourceEnd = `${cell.sourceEnd}`;
+            cellElement.dataset.vectoGridCaretOffsets = cell.sourceCaretOffsets.join(",");
+            cellElement.dataset.vectoGridLevel = `${cell.level}`;
+            cellElement.dataset.vectoGridAdvance = `${cell.advance}`;
+            cellElement.dataset.vectoGridX = `${cell.x}`;
+            cellElement.style.position = "relative";
+            cellElement.style.display = "inline-block";
+            cellElement.style.left = `${cell.x - logicalX}px`;
+            cellElement.style.top = "0";
+            cellElement.style.width = `${cell.advance}px`;
+            cellElement.style.height = `${lineHeight}px`;
+            cellElement.style.boxSizing = "border-box";
+            cellElement.style.verticalAlign = "top";
+            cellElement.style.whiteSpace = "pre";
+            cellElement.style.font = lineFont;
+            cellElement.style.lineHeight = `${lineHeight}px`;
+            cellElement.style.transformOrigin = "0 50%";
+            lineElement.appendChild(cellElement);
+            logicalX += cell.advance;
+          }
+        }
+        if (lineIndex === 0) {
+          for (const [basis, left, top] of [
+            ["origin", 0, 0],
+            ["x", 1, 0],
+            ["y", 0, 1]
+          ]) {
+            const marker = document.createElement("span");
+            marker.dataset.vectoGridBasis = basis;
+            marker.setAttribute("aria-hidden", "true");
+            marker.style.position = "absolute";
+            marker.style.left = `${left}px`;
+            marker.style.top = `${top}px`;
+            marker.style.width = "0";
+            marker.style.height = "0";
+            marker.style.pointerEvents = "none";
+            marker.style.userSelect = "none";
+            lineElement.appendChild(marker);
+          }
+        }
+        el.appendChild(lineElement);
+      }
+      el.dataset.vectoProjectionLines = signature;
+      el.dataset.vectoContentGrid = signature;
+      el.dataset.vectoGridCarriers = `${el.querySelectorAll("[data-vecto-grid-cell]").length}`;
+      if (typeof performance !== "undefined") {
+        el.dataset.vectoGridMaterializeMs = `${performance.now() - materializeStart}`;
+      }
+      delete el.dataset.vectoGridCalibration;
+      delete el.dataset.vectoGridReady;
+    }
+    const pageScaleX = this.getContentMetricScaleX();
+    const calibrationKey = `${signature}:${this.contentFontEpoch}:${pageScaleX.toFixed(4)}`;
+    if (el.dataset.vectoGridCalibration !== calibrationKey) {
+      this.scheduleContentGridCalibration(node.id, el, calibrationKey, pageScaleX);
+    }
+  }
+  getContentMetricScaleX() {
+    if (this.contentMetricScaleEpoch === this.contentFontEpoch) {
+      return this.contentMetricScaleX;
+    }
+    const rect = this.canvas.getBoundingClientRect();
+    const inlineWidth = parseInlinePx(this.canvas.style.width);
+    const logicalWidth = _nullishCoalesce(inlineWidth, () => ( (this.canvas.clientWidth || this.width)));
+    const scale = logicalWidth > 0 ? rect.width / logicalWidth : 1;
+    this.contentMetricScaleX = Number.isFinite(scale) && scale > 0 ? scale : 1;
+    this.contentMetricScaleEpoch = this.contentFontEpoch;
+    return this.contentMetricScaleX;
+  }
+  scheduleContentGridCalibration(entityId, el, calibrationKey, pageScaleX) {
+    if (typeof requestAnimationFrame !== "function") return;
+    if (el.dataset.vectoGridCalibrationPending === calibrationKey) return;
+    const previous = this.contentGridCalibrationFrames.get(entityId);
+    if (previous !== void 0 && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(previous);
+    }
+    _optionalChain([this, 'access', _70 => _70.contentGridCalibrationProbes, 'access', _71 => _71.get, 'call', _72 => _72(entityId), 'optionalAccess', _73 => _73.remove, 'call', _74 => _74()]);
+    this.contentGridCalibrationProbes.delete(entityId);
+    const calibrationStart = typeof performance !== "undefined" ? performance.now() : 0;
+    const probe = document.createElement("div");
+    probe.setAttribute("aria-hidden", "true");
+    probe.dataset.vectoGridProbe = entityId;
+    probe.style.position = "absolute";
+    probe.style.left = "-100000px";
+    probe.style.top = "0";
+    probe.style.width = "100000px";
+    probe.style.height = "1px";
+    probe.style.visibility = "hidden";
+    probe.style.pointerEvents = "none";
+    probe.style.whiteSpace = "pre";
+    probe.style.contain = "layout style paint";
+    const probeOrigin = document.createElement("span");
+    probeOrigin.style.position = "absolute";
+    probeOrigin.style.left = "0";
+    probeOrigin.style.top = "0";
+    const probeX = document.createElement("span");
+    probeX.style.position = "absolute";
+    probeX.style.left = "1px";
+    probeX.style.top = "0";
+    probe.append(probeOrigin, probeX);
+    const measurements = [];
+    const measurementsByKey = /* @__PURE__ */ new Map();
+    for (const target of el.querySelectorAll("[data-vecto-grid-cell]")) {
+      const sourceLength = Number(_nullishCoalesce(target.dataset.vectoGridSourceLength, () => ( 0)));
+      const targetWidth = Number(_nullishCoalesce(target.dataset.vectoGridAdvance, () => ( 0)));
+      if (sourceLength <= 0 || targetWidth <= 0) continue;
+      const sourceText = _nullishCoalesce(_optionalChain([target, 'access', _75 => _75.textContent, 'optionalAccess', _76 => _76.slice, 'call', _77 => _77(0, sourceLength)]), () => ( ""));
+      if (!sourceText) continue;
+      const measurementKey = JSON.stringify([
+        target.style.font,
+        target.style.lineHeight,
+        targetWidth,
+        sourceText
+      ]);
+      const shared = measurementsByKey.get(measurementKey);
+      if (shared) {
+        shared.targets.push(target);
+        continue;
+      }
+      const carrier = document.createElement("span");
+      carrier.dir = "ltr";
+      carrier.style.position = "absolute";
+      carrier.style.left = "0";
+      carrier.style.top = "0";
+      carrier.style.whiteSpace = "pre";
+      carrier.style.font = target.style.font;
+      carrier.style.lineHeight = target.style.lineHeight;
+      carrier.style.fontVariantLigatures = "none";
+      carrier.style.fontKerning = "none";
+      const source = document.createTextNode(sourceText);
+      carrier.appendChild(source);
+      probe.appendChild(carrier);
+      const measurement = { targets: [target], targetWidth, sourceLength, source };
+      measurements.push(measurement);
+      measurementsByKey.set(measurementKey, measurement);
+    }
+    (_nullishCoalesce(_nullishCoalesce(this.a11yRoot, () => ( document.body)), () => ( document.documentElement))).appendChild(probe);
+    el.dataset.vectoGridCalibrationSamples = `${measurements.length}`;
+    this.contentGridCalibrationProbes.set(entityId, probe);
+    el.dataset.vectoGridCalibrationPending = calibrationKey;
+    delete el.dataset.vectoGridReady;
+    const readFrame = requestAnimationFrame(() => {
+      if (!el.isConnected || el.dataset.vectoGridCalibrationPending !== calibrationKey) {
+        probe.remove();
+        this.contentGridCalibrationProbes.delete(entityId);
+        this.contentGridCalibrationFrames.delete(entityId);
+        return;
+      }
+      const updates = [];
+      const probeOriginRect = probeOrigin.getBoundingClientRect();
+      const probeXRect = probeX.getBoundingClientRect();
+      const basisScale = Math.abs(probeXRect.left - probeOriginRect.left);
+      const projectionPageScaleX = Number.isFinite(basisScale) && basisScale > 0 ? basisScale : pageScaleX;
+      let valid = true;
+      for (const measurement of measurements) {
+        const range = document.createRange();
+        range.setStart(measurement.source, 0);
+        range.setEnd(measurement.source, measurement.sourceLength);
+        const natural = range.getBoundingClientRect().width;
+        if (!Number.isFinite(natural) || natural <= 0) {
+          valid = false;
+          break;
+        }
+        const scale = measurement.targetWidth * projectionPageScaleX / natural;
+        for (const element of measurement.targets) updates.push({ element, scale });
+      }
+      probe.remove();
+      this.contentGridCalibrationProbes.delete(entityId);
+      if (!valid) {
+        delete el.dataset.vectoGridCalibrationPending;
+        this.contentGridCalibrationFrames.delete(entityId);
+        return;
+      }
+      const writeFrame = requestAnimationFrame(() => {
+        if (!el.isConnected || el.dataset.vectoGridCalibrationPending !== calibrationKey) {
+          this.contentGridCalibrationFrames.delete(entityId);
+          return;
+        }
+        for (const { element, scale } of updates) {
+          element.style.transform = Math.abs(scale - 1) <= 1e-3 ? "" : `scaleX(${scale})`;
+        }
+        el.dataset.vectoGridCalibration = calibrationKey;
+        el.dataset.vectoGridReady = "true";
+        if (typeof performance !== "undefined") {
+          el.dataset.vectoGridCalibrationMs = `${performance.now() - calibrationStart}`;
+        }
+        delete el.dataset.vectoGridCalibrationPending;
+        this.contentGridCalibrationFrames.delete(entityId);
+      });
+      this.contentGridCalibrationFrames.set(entityId, writeFrame);
+    });
+    this.contentGridCalibrationFrames.set(entityId, readFrame);
+  }
   enforceA11yDomOrder() {
     if (!this.a11yRoot) return;
     this.fullViewportElements.length = 0;
@@ -1274,12 +1960,12 @@ var Scene = (_class2 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _48 => _48.canvas, 'access', _49 => _49.getBoundingClientRect, 'optionalCall', _50 => _50()]);
-    const parentRect = _optionalChain([parent, 'access', _51 => _51.getBoundingClientRect, 'optionalCall', _52 => _52()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _53 => _53.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _54 => _54.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _55 => _55.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _56 => _56.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _57 => _57.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _58 => _58.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    const canvasRect = _optionalChain([this, 'access', _78 => _78.canvas, 'access', _79 => _79.getBoundingClientRect, 'optionalCall', _80 => _80()]);
+    const parentRect = _optionalChain([parent, 'access', _81 => _81.getBoundingClientRect, 'optionalCall', _82 => _82()]);
+    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _83 => _83.width]) || this.canvas.clientWidth || this.width;
+    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _84 => _84.height]) || this.canvas.clientHeight || this.height;
+    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _85 => _85.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _86 => _86.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
+    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _87 => _87.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _88 => _88.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
     const scaleX = this.width > 0 ? cssWidth / this.width : 1;
     const scaleY = this.height > 0 ? cssHeight / this.height : 1;
     for (const root of [this.a11yRoot, this.portalRoot]) {
@@ -1404,7 +2090,7 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _59 => _59.reducedMotionQuery, 'optionalAccess', _60 => _60.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _89 => _89.reducedMotionQuery, 'optionalAccess', _90 => _90.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -1582,7 +2268,7 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _61 => _61.pointRenderer, 'optionalAccess', _62 => _62.begin, 'call', _63 => _63()]);
+      _optionalChain([this, 'access', _91 => _91.pointRenderer, 'optionalAccess', _92 => _92.begin, 'call', _93 => _93()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -1720,9 +2406,9 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _64 => _64.pointRenderer, 'optionalAccess', _65 => _65.flush, 'call', _66 => _66()]);
+      _optionalChain([this, 'access', _94 => _94.pointRenderer, 'optionalAccess', _95 => _95.flush, 'call', _96 => _96()]);
     }
-    _optionalChain([renderer, 'access', _67 => _67.present, 'optionalCall', _68 => _68()]);
+    _optionalChain([renderer, 'access', _97 => _97.present, 'optionalCall', _98 => _98()]);
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
@@ -1738,10 +2424,11 @@ var Scene = (_class2 = class _Scene {
   resize(width, height) {
     this.width = width;
     this.height = height;
+    this.contentFontEpoch++;
     if (typeof this.renderer.resize === "function") {
       this.renderer.resize(width, height);
     }
-    _optionalChain([this, 'access', _69 => _69.pointRenderer, 'optionalAccess', _70 => _70.resize, 'call', _71 => _71(width, height)]);
+    _optionalChain([this, 'access', _99 => _99.pointRenderer, 'optionalAccess', _100 => _100.resize, 'call', _101 => _101(width, height)]);
     if (this.gpuCanvas) {
       this.gpuCanvas.width = width;
       this.gpuCanvas.height = height;
@@ -1789,7 +2476,7 @@ var Scene = (_class2 = class _Scene {
       });
       pass.end();
       this.device.queue.submit([encoder.finish()]);
-    } catch (e3) {
+    } catch (e5) {
     }
     this.gpuHasContent = false;
   }
@@ -1926,27 +2613,27 @@ var Scene = (_class2 = class _Scene {
 // src/components/TextEntity.ts
 var sharedMeasurer;
 function defaultMeasurer() {
-  if (sharedMeasurer === void 0) sharedMeasurer = _chunkZBKKRYDHjs.createCanvasMeasurer.call(void 0, "sans-serif");
+  if (sharedMeasurer === void 0) sharedMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunkDFNK6OV6js.Entity {
+var TextEntity = (_class3 = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
   
-  __init54() {this.nodes = []}
+  __init62() {this.nodes = []}
   
-  __init55() {this.fillStyle = "#94a3b8"}
-  __init56() {this.strokeStyle = null}
-  __init57() {this.hoveredFillStyle = "#ffffff"}
-  __init58() {this.lineWidth = 1}
-  __init59() {this.isHovered = false}
+  __init63() {this.fillStyle = "#94a3b8"}
+  __init64() {this.strokeStyle = null}
+  __init65() {this.hoveredFillStyle = "#ffffff"}
+  __init66() {this.lineWidth = 1}
+  __init67() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init54.call(this);_class3.prototype.__init55.call(this);_class3.prototype.__init56.call(this);_class3.prototype.__init57.call(this);_class3.prototype.__init58.call(this);_class3.prototype.__init59.call(this);;
+    super();_class3.prototype.__init62.call(this);_class3.prototype.__init63.call(this);_class3.prototype.__init64.call(this);_class3.prototype.__init65.call(this);_class3.prototype.__init66.call(this);_class3.prototype.__init67.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
-    this.layout = new (0, _chunkZBKKRYDHjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
+    this.layout = new (0, _chunkBA5HUUDFjs.LayoutEngine)(maxWidth, 1e4, defaultMeasurer());
     this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
     this.applyLayout();
     this.interactive = true;
@@ -2055,17 +2742,17 @@ var TextEntity = (_class3 = class extends _chunkDFNK6OV6js.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunkDFNK6OV6js.Entity {
+var GridTextEntity = (_class4 = class extends _chunkGKLTTGBRjs.Entity {
   
-  __init60() {this.fillStyle = "#ffffff"}
-  __init61() {this.grid = []}
+  __init68() {this.fillStyle = "#ffffff"}
+  __init69() {this.grid = []}
   // Array of rows
-  __init62() {this.cols = 0}
-  __init63() {this.rows = 0}
+  __init70() {this.cols = 0}
+  __init71() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init60.call(this);_class4.prototype.__init61.call(this);_class4.prototype.__init62.call(this);_class4.prototype.__init63.call(this);;
+    super();_class4.prototype.__init68.call(this);_class4.prototype.__init69.call(this);_class4.prototype.__init70.call(this);_class4.prototype.__init71.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -2074,7 +2761,7 @@ var GridTextEntity = (_class4 = class extends _chunkDFNK6OV6js.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _72 => _72[0], 'optionalAccess', _73 => _73.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _102 => _102[0], 'optionalAccess', _103 => _103.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -2149,7 +2836,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunkDFNK6OV6js.Entity {
+var SplineEntity = (_class5 = class extends _chunkGKLTTGBRjs.Entity {
   
   
   
@@ -2157,23 +2844,23 @@ var SplineEntity = (_class5 = class extends _chunkDFNK6OV6js.Entity {
   
   
   
-  __init64() {this.offscreen = null}
-  __init65() {this.baked = false}
+  __init72() {this.offscreen = null}
+  __init73() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init66() {this.bakedWidth = 0}
-  __init67() {this.bakedHeight = 0}
+  __init74() {this.bakedWidth = 0}
+  __init75() {this.bakedHeight = 0}
   /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
   
   /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
-  __init68() {this.polylines = null}
+  __init76() {this.polylines = null}
   /**
    * When `true`, the renderer draws a rounded-rect outline of the entity's
    * local bounds after painting the curves. Useful for drag feedback and
    * debugging hit areas. Defaults to `false`.
    */
-  __init69() {this.showBounds = false}
+  __init77() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init64.call(this);_class5.prototype.__init65.call(this);_class5.prototype.__init66.call(this);_class5.prototype.__init67.call(this);_class5.prototype.__init68.call(this);_class5.prototype.__init69.call(this);;
+    super();_class5.prototype.__init72.call(this);_class5.prototype.__init73.call(this);_class5.prototype.__init74.call(this);_class5.prototype.__init75.call(this);_class5.prototype.__init76.call(this);_class5.prototype.__init77.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -2184,7 +2871,7 @@ var SplineEntity = (_class5 = class extends _chunkDFNK6OV6js.Entity {
     this.width = this.bounds.width;
     this.height = this.bounds.height;
     const isGradient = (c) => c !== null && !Array.isArray(c);
-    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _74 => _74.doc, 'access', _75 => _75.equations, 'optionalAccess', _76 => _76.some, 'call', _77 => _77((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _78 => _78.doc, 'access', _79 => _79.paths, 'optionalAccess', _80 => _80.some, 'call', _81 => _81((p) => isGradient(p.color_rgb))]), () => ( false)));
+    this.containsGradient = (_nullishCoalesce(_optionalChain([this, 'access', _104 => _104.doc, 'access', _105 => _105.equations, 'optionalAccess', _106 => _106.some, 'call', _107 => _107((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _108 => _108.doc, 'access', _109 => _109.paths, 'optionalAccess', _110 => _110.some, 'call', _111 => _111((p) => isGradient(p.color_rgb))]), () => ( false)));
     this.interactive = true;
   }
   computeBounds() {
@@ -2423,12 +3110,134 @@ async function loadSpline(url) {
   return await res.json();
 }
 
+// src/components/Rect.ts
+var Rect = class extends _chunkGKLTTGBRjs.Entity {
+  
+  
+  
+  
+  constructor(opts = {}) {
+    super();
+    this.width = _nullishCoalesce(opts.width, () => ( 0));
+    this.height = _nullishCoalesce(opts.height, () => ( 0));
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = _nullishCoalesce(opts.stroke, () => ( null));
+    this.strokeWidth = _nullishCoalesce(opts.strokeWidth, () => ( 1));
+    this.radius = _nullishCoalesce(opts.radius, () => ( 0));
+  }
+  getBounds() {
+    return { x: 0, y: 0, width: this.width, height: this.height };
+  }
+  /**
+   * Solid-fill, square-cornered, unstroked rectangles opt into the GPU
+   * instanced-rect batch (WebGL `pointBackend` only). Any stroke or corner
+   * radius needs the exact Canvas path, so return `null` to fall back to
+   * {@link render}. Read each frame, so an animated `fill` still batches.
+   */
+  getBatchRect() {
+    if (!this.fill || this.stroke || this.radius > 0) return null;
+    return { width: this.width, height: this.height, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    if (this.radius > 0) {
+      renderer.roundRect(0, 0, this.width, this.height, this.radius);
+    } else {
+      renderer.moveTo(0, 0);
+      renderer.lineTo(this.width, 0);
+      renderer.lineTo(this.width, this.height);
+      renderer.lineTo(0, this.height);
+      renderer.closePath();
+    }
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Circle.ts
+var Circle = class extends _chunkGKLTTGBRjs.Entity {
+  
+  
+  
+  
+  constructor(opts = {}) {
+    super();
+    this._radius = _nullishCoalesce(opts.radius, () => ( 0));
+    this.fill = opts.fill === void 0 ? "#38bdf8" : opts.fill;
+    this.stroke = _nullishCoalesce(opts.stroke, () => ( null));
+    this.strokeWidth = _nullishCoalesce(opts.strokeWidth, () => ( 1));
+    this.syncBox();
+  }
+  get radius() {
+    return this._radius;
+  }
+  set radius(v) {
+    this._radius = v;
+    this.syncBox();
+  }
+  /** Keep the a11y box (a square around the centered disc) in sync with radius. */
+  syncBox() {
+    this.width = this._radius * 2;
+    this.height = this._radius * 2;
+    this.a11yOffsetX = -this._radius;
+    this.a11yOffsetY = -this._radius;
+  }
+  getBounds() {
+    return {
+      x: -this._radius,
+      y: -this._radius,
+      width: this._radius * 2,
+      height: this._radius * 2
+    };
+  }
+  /**
+   * A solid-fill, unstroked circle opts into the renderer's circle batch
+   * (center = entity origin, radius scaled by world scale). A stroke needs the
+   * exact Canvas path, so return `null` there. Read each frame, so an animated
+   * `fill`/`radius` still batches.
+   */
+  getBatchCircle() {
+    if (!this.fill || this.stroke) return null;
+    return { radius: this._radius, color: this.fill };
+  }
+  isPointInside(globalX, globalY) {
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x * local.x + local.y * local.y <= this._radius * this._radius;
+  }
+  render(renderer) {
+    renderer.beginPath();
+    renderer.arc(0, 0, this._radius, 0, Math.PI * 2);
+    renderer.closePath();
+    if (this.fill) renderer.fill(this.fill);
+    if (this.stroke) renderer.stroke(this.stroke, this.strokeWidth);
+  }
+};
+
+// src/components/Group.ts
+var Group = class extends _chunkGKLTTGBRjs.Entity {
+  constructor(...children) {
+    super();
+    if (children.length > 0) this.add(...children);
+  }
+  isPointInside() {
+    return false;
+  }
+  render(_renderer) {
+  }
+};
+
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __init70() {this.grid = /* @__PURE__ */ new Map()}
-  __init71() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init70.call(this);_class6.prototype.__init71.call(this);
+  __init78() {this.grid = /* @__PURE__ */ new Map()}
+  __init79() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init78.call(this);_class6.prototype.__init79.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -2482,7 +3291,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _82 => _82.grid, 'access', _83 => _83.get, 'call', _84 => _84(key), 'optionalAccess', _85 => _85.delete, 'call', _86 => _86(id)]);
+      _optionalChain([this, 'access', _112 => _112.grid, 'access', _113 => _113.get, 'call', _114 => _114(key), 'optionalAccess', _115 => _115.delete, 'call', _116 => _116(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -2518,20 +3327,20 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
   
-  __init72() {this.isDOMPortal = true}
-  __init73() {this.domListeners = []}
-  __init74() {this.resizeObserver = null}
-  __init75() {this.cachedWidth = 100}
-  __init76() {this.cachedHeight = 100}
-  __init77() {this.lastWidth = ""}
-  __init78() {this.lastHeight = ""}
-  __init79() {this.lastTransform = ""}
-  __init80() {this.lastZIndex = ""}
-  __init81() {this.lastOpacity = ""}
+  __init80() {this.isDOMPortal = true}
+  __init81() {this.domListeners = []}
+  __init82() {this.resizeObserver = null}
+  __init83() {this.cachedWidth = 100}
+  __init84() {this.cachedHeight = 100}
+  __init85() {this.lastWidth = ""}
+  __init86() {this.lastHeight = ""}
+  __init87() {this.lastTransform = ""}
+  __init88() {this.lastZIndex = ""}
+  __init89() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init72.call(this);_class7.prototype.__init73.call(this);_class7.prototype.__init74.call(this);_class7.prototype.__init75.call(this);_class7.prototype.__init76.call(this);_class7.prototype.__init77.call(this);_class7.prototype.__init78.call(this);_class7.prototype.__init79.call(this);_class7.prototype.__init80.call(this);_class7.prototype.__init81.call(this);;
+    super(id);_class7.prototype.__init80.call(this);_class7.prototype.__init81.call(this);_class7.prototype.__init82.call(this);_class7.prototype.__init83.call(this);_class7.prototype.__init84.call(this);_class7.prototype.__init85.call(this);_class7.prototype.__init86.call(this);_class7.prototype.__init87.call(this);_class7.prototype.__init88.call(this);_class7.prototype.__init89.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -2560,7 +3369,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
       ];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2571,7 +3380,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2579,7 +3388,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkDFNK6OV6js.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunkDFNK6OV6js.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkGKLTTGBRjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2666,4 +3475,8 @@ Scene.registerWebGPUParticleSystemManager(_chunkBPMNCGU7js.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkDFNK6OV6js.Easing; exports.Entity = _chunkDFNK6OV6js.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkZBKKRYDHjs.LayoutEngine; exports.LayoutResultBuffer = _chunkZBKKRYDHjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkDFNK6OV6js.MSDFFont; exports.MSDFTextEntity = _chunkDFNK6OV6js.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.SVGEntity = _chunkDFNK6OV6js.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkDFNK6OV6js.SpringDriver; exports.SpringPhysics = _chunkDFNK6OV6js.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkDFNK6OV6js.TweenDriver; exports.VectoJSEvent = _chunkDFNK6OV6js.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkDFNK6OV6js.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkZBKKRYDHjs.computeLineSegments; exports.createCanvasMeasurer = _chunkZBKKRYDHjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkDFNK6OV6js.cssLineBoxBaseline; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkDFNK6OV6js.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;
+
+
+
+
+exports.ArabicShaper = _chunk4AR425ARjs.ArabicShaper; exports.BidiResolver = _chunk4AR425ARjs.BidiResolver; exports.CanvasRenderer = _chunkBPMNCGU7js.CanvasRenderer; exports.Circle = Circle; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkGKLTTGBRjs.Easing; exports.Entity = _chunkGKLTTGBRjs.Entity; exports.GridTextEntity = GridTextEntity; exports.Group = Group; exports.LayoutEngine = _chunkBA5HUUDFjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBA5HUUDFjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk4AR425ARjs.LayoutWorkerManager; exports.MSDFFont = _chunkGKLTTGBRjs.MSDFFont; exports.MSDFTextEntity = _chunkGKLTTGBRjs.MSDFTextEntity; exports.PARTICLE_OFFSET_LIFE = PARTICLE_OFFSET_LIFE; exports.PARTICLE_OFFSET_ORIGIN_X = PARTICLE_OFFSET_ORIGIN_X; exports.PARTICLE_OFFSET_ORIGIN_Y = PARTICLE_OFFSET_ORIGIN_Y; exports.PARTICLE_OFFSET_POSITION_X = PARTICLE_OFFSET_POSITION_X; exports.PARTICLE_OFFSET_POSITION_Y = PARTICLE_OFFSET_POSITION_Y; exports.PARTICLE_OFFSET_SIZE = PARTICLE_OFFSET_SIZE; exports.PARTICLE_OFFSET_VELOCITY_X = PARTICLE_OFFSET_VELOCITY_X; exports.PARTICLE_OFFSET_VELOCITY_Y = PARTICLE_OFFSET_VELOCITY_Y; exports.PARTICLE_STRIDE_FLOATS = PARTICLE_STRIDE_FLOATS; exports.REDUCED_MOTION_FPS = REDUCED_MOTION_FPS; exports.Rect = Rect; exports.SVGEntity = _chunkGKLTTGBRjs.SVGEntity; exports.SVGRenderer = _chunkBPMNCGU7js.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkGKLTTGBRjs.SpringDriver; exports.SpringPhysics = _chunkGKLTTGBRjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkGKLTTGBRjs.TweenDriver; exports.VectoJSEvent = _chunkGKLTTGBRjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkBPMNCGU7js.WebGPUParticleSystemManager; exports.clearCssLineBoxMetrics = _chunkGKLTTGBRjs.clearCssLineBoxMetrics; exports.computeLineSegments = _chunkBA5HUUDFjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBA5HUUDFjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkBPMNCGU7js.createWebGLPointRenderer; exports.cssLineBoxBaseline = _chunkGKLTTGBRjs.cssLineBoxBaseline; exports.isSafeUrl = _chunkBPMNCGU7js.isSafeUrl; exports.isTweenConfig = _chunkGKLTTGBRjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkBPMNCGU7js.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.prepareContentGrid = _chunkGKLTTGBRjs.prepareContentGrid; exports.sanitizeUrl = _chunkBPMNCGU7js.sanitizeUrl;