@vectojs/core 1.13.0 → 1.14.0

package/dist/index.js

@@ -720,73 +720,76 @@ var Scene = (_class2 = class _Scene {
   __init29() {this.contentMetricScaleEpoch = -1}
   __init30() {this.contentMetricScaleX = 1}
   __init31() {this.contentProjectionEnabled = true}
+  // Virtualization margin (px) for content projection; `undefined` → one
+  // viewport height, resolved at sync time. `Infinity` = materialize everything.
+  __init32() {this.contentProjectionMargin = void 0}
   /**
    * 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.
    */
-  __init32() {this.blankRegionSelectionDrag = false}
-  __init33() {this.contentSelectionAnchor = null}
-  __init34() {this.contentSelectionEndListener = null}
+  __init33() {this.blankRegionSelectionDrag = false}
+  __init34() {this.contentSelectionAnchor = null}
+  __init35() {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.
-  __init35() {this.frameHadAnimation = true}
-  __init36() {this.frameHadInteractive = true}
+  __init36() {this.frameHadAnimation = true}
+  __init37() {this.frameHadInteractive = true}
   
-  __init37() {this.focusedA11yElement = null}
-  __init38() {this.caretBlinkTimer = null}
-  __init39() {this.a11yNeedsReorder = true}
-  __init40() {this.portalRoot = null}
-  __init41() {this.fullViewportElements = []}
-  __init42() {this.normalElements = []}
-  __init43() {this.activeIds = /* @__PURE__ */ new Set()}
-  __init44() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
-  __init45() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
-  __init46() {this.portalEntities = /* @__PURE__ */ new Map()}
-  __init47() {this.renderOrderCounter = 0}
+  __init38() {this.focusedA11yElement = null}
+  __init39() {this.caretBlinkTimer = null}
+  __init40() {this.a11yNeedsReorder = true}
+  __init41() {this.portalRoot = null}
+  __init42() {this.fullViewportElements = []}
+  __init43() {this.normalElements = []}
+  __init44() {this.activeIds = /* @__PURE__ */ new Set()}
+  __init45() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
+  __init46() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
+  __init47() {this.portalEntities = /* @__PURE__ */ new Map()}
+  __init48() {this.renderOrderCounter = 0}
   /**
    * Authoritative paint order for semantic nodes discovered during the main
    * render. A node may not have a DOM projection until the following a11y
    * sync, so retaining the order prevents a newly opened overlay from spending
    * its first frame below previously projected controls.
    */
-  __init48() {this.a11yRenderOrders = /* @__PURE__ */ new Map()}
+  __init49() {this.a11yRenderOrders = /* @__PURE__ */ new Map()}
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
-  __init49() {this.pointRenderer = null}
-  __init50() {this.glCanvas = null}
+  __init50() {this.pointRenderer = null}
+  __init51() {this.glCanvas = null}
   
   
   
-  __init51() {this.disableWindowResize = false}
+  __init52() {this.disableWindowResize = false}
   /** See {@link SceneOptions.maxDPR}. `undefined` = uncapped (real DPR). */
   
   // WebGPU properties
-  __init52() {this.destroyed = false}
-  __init53() {this.device = null}
-  __init54() {this.deviceLost = false}
-  __init55() {this.particleBackend = "auto"}
-  __init56() {this._webgpuDisabled = false}
+  __init53() {this.destroyed = false}
+  __init54() {this.device = null}
+  __init55() {this.deviceLost = false}
+  __init56() {this.particleBackend = "auto"}
+  __init57() {this._webgpuDisabled = false}
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
-  __init57() {this.recoveryTimerId = null}
-  __init58() {this.manager = null}
-  __init59() {this.initializingWebGPU = false}
-  __init60() {this.gpuCanvas = null}
-  __init61() {this.gpuContext = null}
+  __init58() {this.recoveryTimerId = null}
+  __init59() {this.manager = null}
+  __init60() {this.initializingWebGPU = false}
+  __init61() {this.gpuCanvas = null}
+  __init62() {this.gpuContext = null}
   /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
-  __init62() {this.gpuHasContent = false}
-  __init63() {this.mouseX = -9999}
-  __init64() {this.mouseY = -9999}
-  __init65() {this.pointerMoveListener = null}
-  __init66() {this.pointerLeaveListener = null}
-  __init67() {this.hasWarnedZeroSize = false}
-  __init68() {this.fontLoadHandler = null}
+  __init63() {this.gpuHasContent = false}
+  __init64() {this.mouseX = -9999}
+  __init65() {this.mouseY = -9999}
+  __init66() {this.pointerMoveListener = null}
+  __init67() {this.pointerLeaveListener = null}
+  __init68() {this.hasWarnedZeroSize = false}
+  __init69() {this.fontLoadHandler = null}
   // ── Dev-mode warning infrastructure ──────────────────────────────
   //
   // Enable with `Scene.devMode = true` or by setting `globalThis.__DEV__`.
@@ -804,7 +807,7 @@ var Scene = (_class2 = class _Scene {
     return false;
   }
   
-  __init69() {this._devFrameCount = 0}
+  __init70() {this._devFrameCount = 0}
   _devWarn(message) {
     if (!this._devActive) return;
     console.warn(`[vectojs/dev] ${message}`);
@@ -848,7 +851,7 @@ var Scene = (_class2 = class _Scene {
     };
     walkProjections(this.root);
   }
-  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);_class2.prototype.__init62.call(this);_class2.prototype.__init63.call(this);_class2.prototype.__init64.call(this);_class2.prototype.__init65.call(this);_class2.prototype.__init66.call(this);_class2.prototype.__init67.call(this);_class2.prototype.__init68.call(this);_class2.prototype.__init69.call(this);
+  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);_class2.prototype.__init62.call(this);_class2.prototype.__init63.call(this);_class2.prototype.__init64.call(this);_class2.prototype.__init65.call(this);_class2.prototype.__init66.call(this);_class2.prototype.__init67.call(this);_class2.prototype.__init68.call(this);_class2.prototype.__init69.call(this);_class2.prototype.__init70.call(this);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
@@ -870,6 +873,7 @@ var Scene = (_class2 = class _Scene {
     this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
     this.a11ySyncInterval = _nullishCoalesce(options.a11ySyncInterval, () => ( 0));
     this.contentProjectionEnabled = _nullishCoalesce(options.contentProjection, () => ( true));
+    this.contentProjectionMargin = options.contentProjectionMargin;
     this._devActive = _Scene._devModeDetected();
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
     this.root = new class RootEntity extends _chunk2Z23LTH3js.Entity {
@@ -1661,6 +1665,56 @@ var Scene = (_class2 = class _Scene {
    * hidden (`display: none`) so text-heavy scenes only materialize what is
    * visible to the browser's text machinery anyway.
    */
+  /**
+   * Whether `node`'s world-space box, expanded by `margin` px on every side,
+   * overlaps the scene viewport AND every `clipChildren` ancestor's box. Used
+   * both to virtualize content projection (materialize only near-viewport text,
+   * at `margin = contentProjectionMargin`) and for the exact `display:none`
+   * visibility test (`margin = 0`). Boundless nodes (width/height 0) opt out of
+   * culling and always count as visible, matching the legacy behavior.
+   */
+  projectionBoxVisible(node, tf, margin) {
+    if (!(node.width > 0 && node.height > 0)) return true;
+    const { a, b, c, d, e, f } = tf;
+    const worldCorners = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < 4; i++) {
+      const lx = i & 1 ? node.width : 0;
+      const ly = i & 2 ? node.height : 0;
+      const wx = a * lx + c * ly + e;
+      const wy = b * lx + d * ly + f;
+      worldCorners.push({ x: wx, y: wy });
+      if (wx < minX) minX = wx;
+      if (wx > maxX) maxX = wx;
+      if (wy < minY) minY = wy;
+      if (wy > maxY) maxY = wy;
+    }
+    if (!(maxX >= -margin && minX <= this.width + margin && maxY >= -margin && minY <= this.height + margin)) {
+      return false;
+    }
+    for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+      if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+      let localMinX = Infinity;
+      let localMinY = Infinity;
+      let localMaxX = -Infinity;
+      let localMaxY = -Infinity;
+      for (const corner of worldCorners) {
+        const local = ancestor.worldToLocal(corner.x, corner.y);
+        if (!local) continue;
+        localMinX = Math.min(localMinX, local.x);
+        localMinY = Math.min(localMinY, local.y);
+        localMaxX = Math.max(localMaxX, local.x);
+        localMaxY = Math.max(localMaxY, local.y);
+      }
+      if (!(localMaxX >= -margin && localMinX <= ancestor.width + margin && localMaxY >= -margin && localMinY <= ancestor.height + margin)) {
+        return false;
+      }
+    }
+    return true;
+  }
   syncContentProjection(node) {
     if (!this.contentProjectionEnabled || !this.a11yRoot) return;
     const projection = node.getContentProjection();
@@ -1674,6 +1728,17 @@ var Scene = (_class2 = class _Scene {
       }
       return;
     }
+    const worldTf = node.getWorldTransform();
+    const margin = _nullishCoalesce(this.contentProjectionMargin, () => ( this.height));
+    if (Number.isFinite(margin) && !this.projectionBoxVisible(node, worldTf, margin)) {
+      if (el) {
+        this.clearContentGridState(node.id, el);
+        el.remove();
+        this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
+      }
+      return;
+    }
     if (!el) {
       el = document.createElement("div");
       el.setAttribute("data-vecto-content", node.id);
@@ -1770,7 +1835,7 @@ var Scene = (_class2 = class _Scene {
       el.style.userSelect = selectable ? "text" : "none";
       el.style.cursor = selectable ? "text" : "";
     }
-    const { a, b, c, d, e, f } = node.getWorldTransform();
+    const { a, b, c, d, e, f } = worldTf;
     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 - _chunk2Z23LTH3js.cssLineBoxBaseline.call(void 0, font, _nullishCoalesce(projection.lineHeight, () => ( 16)));
@@ -1780,42 +1845,7 @@ var Scene = (_class2 = 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)`;
-    let visible = true;
-    if (node.width > 0 && node.height > 0) {
-      const worldCorners = [];
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      for (let i = 0; i < 4; i++) {
-        const lx = i & 1 ? node.width : 0;
-        const ly = i & 2 ? node.height : 0;
-        const wx = a * lx + c * ly + e;
-        const wy = b * lx + d * ly + f;
-        worldCorners.push({ x: wx, y: wy });
-        if (wx < minX) minX = wx;
-        if (wx > maxX) maxX = wx;
-        if (wy < minY) minY = wy;
-        if (wy > maxY) maxY = wy;
-      }
-      visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
-      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
-        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
-        let localMinX = Infinity;
-        let localMinY = Infinity;
-        let localMaxX = -Infinity;
-        let localMaxY = -Infinity;
-        for (const corner of worldCorners) {
-          const local = ancestor.worldToLocal(corner.x, corner.y);
-          if (!local) continue;
-          localMinX = Math.min(localMinX, local.x);
-          localMinY = Math.min(localMinY, local.y);
-          localMaxX = Math.max(localMaxX, local.x);
-          localMaxY = Math.max(localMaxY, local.y);
-        }
-        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
-      }
-    }
+    const visible = this.projectionBoxVisible(node, worldTf, 0);
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
   }
@@ -2818,15 +2848,15 @@ var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
-  __init70() {this.nodes = []}
+  __init71() {this.nodes = []}
   
-  __init71() {this.fillStyle = "#94a3b8"}
-  __init72() {this.strokeStyle = null}
-  __init73() {this.hoveredFillStyle = "#ffffff"}
-  __init74() {this.lineWidth = 1}
-  __init75() {this.isHovered = false}
+  __init72() {this.fillStyle = "#94a3b8"}
+  __init73() {this.strokeStyle = null}
+  __init74() {this.hoveredFillStyle = "#ffffff"}
+  __init75() {this.lineWidth = 1}
+  __init76() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init70.call(this);_class3.prototype.__init71.call(this);_class3.prototype.__init72.call(this);_class3.prototype.__init73.call(this);_class3.prototype.__init74.call(this);_class3.prototype.__init75.call(this);;
+    super();_class3.prototype.__init71.call(this);_class3.prototype.__init72.call(this);_class3.prototype.__init73.call(this);_class3.prototype.__init74.call(this);_class3.prototype.__init75.call(this);_class3.prototype.__init76.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
@@ -2941,15 +2971,15 @@ var TextEntity = (_class3 = class extends _chunk2Z23LTH3js.Entity {
 // src/components/GridTextEntity.ts
 var GridTextEntity = (_class4 = class extends _chunk2Z23LTH3js.Entity {
   
-  __init76() {this.fillStyle = "#ffffff"}
-  __init77() {this.grid = []}
+  __init77() {this.fillStyle = "#ffffff"}
+  __init78() {this.grid = []}
   // Array of rows
-  __init78() {this.cols = 0}
-  __init79() {this.rows = 0}
+  __init79() {this.cols = 0}
+  __init80() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init76.call(this);_class4.prototype.__init77.call(this);_class4.prototype.__init78.call(this);_class4.prototype.__init79.call(this);;
+    super();_class4.prototype.__init77.call(this);_class4.prototype.__init78.call(this);_class4.prototype.__init79.call(this);_class4.prototype.__init80.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -3041,23 +3071,23 @@ var SplineEntity = (_class5 = class extends _chunk2Z23LTH3js.Entity {
   
   
   
-  __init80() {this.offscreen = null}
-  __init81() {this.baked = false}
+  __init81() {this.offscreen = null}
+  __init82() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init82() {this.bakedWidth = 0}
-  __init83() {this.bakedHeight = 0}
+  __init83() {this.bakedWidth = 0}
+  __init84() {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. */
-  __init84() {this.polylines = null}
+  __init85() {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`.
    */
-  __init85() {this.showBounds = false}
+  __init86() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init80.call(this);_class5.prototype.__init81.call(this);_class5.prototype.__init82.call(this);_class5.prototype.__init83.call(this);_class5.prototype.__init84.call(this);_class5.prototype.__init85.call(this);;
+    super();_class5.prototype.__init81.call(this);_class5.prototype.__init82.call(this);_class5.prototype.__init83.call(this);_class5.prototype.__init84.call(this);_class5.prototype.__init85.call(this);_class5.prototype.__init86.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -3432,9 +3462,9 @@ var Group = class extends _chunk2Z23LTH3js.Entity {
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __init86() {this.grid = /* @__PURE__ */ new Map()}
-  __init87() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init86.call(this);_class6.prototype.__init87.call(this);
+  __init87() {this.grid = /* @__PURE__ */ new Map()}
+  __init88() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init87.call(this);_class6.prototype.__init88.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -3526,18 +3556,18 @@ var SpatialHashGrid = (_class6 = class {
 // src/tree/DOMPortalEntity.ts
 var DOMPortalEntity = (_class7 = class extends _chunk2Z23LTH3js.Entity {
   
-  __init88() {this.isDOMPortal = true}
-  __init89() {this.domListeners = []}
-  __init90() {this.resizeObserver = null}
-  __init91() {this.cachedWidth = 100}
-  __init92() {this.cachedHeight = 100}
-  __init93() {this.lastWidth = ""}
-  __init94() {this.lastHeight = ""}
-  __init95() {this.lastTransform = ""}
-  __init96() {this.lastZIndex = ""}
-  __init97() {this.lastOpacity = ""}
+  __init89() {this.isDOMPortal = true}
+  __init90() {this.domListeners = []}
+  __init91() {this.resizeObserver = null}
+  __init92() {this.cachedWidth = 100}
+  __init93() {this.cachedHeight = 100}
+  __init94() {this.lastWidth = ""}
+  __init95() {this.lastHeight = ""}
+  __init96() {this.lastTransform = ""}
+  __init97() {this.lastZIndex = ""}
+  __init98() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init88.call(this);_class7.prototype.__init89.call(this);_class7.prototype.__init90.call(this);_class7.prototype.__init91.call(this);_class7.prototype.__init92.call(this);_class7.prototype.__init93.call(this);_class7.prototype.__init94.call(this);_class7.prototype.__init95.call(this);_class7.prototype.__init96.call(this);_class7.prototype.__init97.call(this);;
+    super(id);_class7.prototype.__init89.call(this);_class7.prototype.__init90.call(this);_class7.prototype.__init91.call(this);_class7.prototype.__init92.call(this);_class7.prototype.__init93.call(this);_class7.prototype.__init94.call(this);_class7.prototype.__init95.call(this);_class7.prototype.__init96.call(this);_class7.prototype.__init97.call(this);_class7.prototype.__init98.call(this);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));

package/dist/index.mjs

@@ -720,6 +720,9 @@ var Scene = class _Scene {
   contentMetricScaleEpoch = -1;
   contentMetricScaleX = 1;
   contentProjectionEnabled = true;
+  // Virtualization margin (px) for content projection; `undefined` → one
+  // viewport height, resolved at sync time. `Infinity` = materialize everything.
+  contentProjectionMargin = void 0;
   /**
    * 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
@@ -870,6 +873,7 @@ var Scene = class _Scene {
     this.particleBackend = options.particleBackend ?? "auto";
     this.a11ySyncInterval = options.a11ySyncInterval ?? 0;
     this.contentProjectionEnabled = options.contentProjection ?? true;
+    this.contentProjectionMargin = options.contentProjectionMargin;
     this._devActive = _Scene._devModeDetected();
     this.reducedMotionQuery = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
     this.root = new class RootEntity extends Entity {
@@ -1661,6 +1665,56 @@ var Scene = class _Scene {
    * hidden (`display: none`) so text-heavy scenes only materialize what is
    * visible to the browser's text machinery anyway.
    */
+  /**
+   * Whether `node`'s world-space box, expanded by `margin` px on every side,
+   * overlaps the scene viewport AND every `clipChildren` ancestor's box. Used
+   * both to virtualize content projection (materialize only near-viewport text,
+   * at `margin = contentProjectionMargin`) and for the exact `display:none`
+   * visibility test (`margin = 0`). Boundless nodes (width/height 0) opt out of
+   * culling and always count as visible, matching the legacy behavior.
+   */
+  projectionBoxVisible(node, tf, margin) {
+    if (!(node.width > 0 && node.height > 0)) return true;
+    const { a, b, c, d, e, f } = tf;
+    const worldCorners = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < 4; i++) {
+      const lx = i & 1 ? node.width : 0;
+      const ly = i & 2 ? node.height : 0;
+      const wx = a * lx + c * ly + e;
+      const wy = b * lx + d * ly + f;
+      worldCorners.push({ x: wx, y: wy });
+      if (wx < minX) minX = wx;
+      if (wx > maxX) maxX = wx;
+      if (wy < minY) minY = wy;
+      if (wy > maxY) maxY = wy;
+    }
+    if (!(maxX >= -margin && minX <= this.width + margin && maxY >= -margin && minY <= this.height + margin)) {
+      return false;
+    }
+    for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+      if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
+      let localMinX = Infinity;
+      let localMinY = Infinity;
+      let localMaxX = -Infinity;
+      let localMaxY = -Infinity;
+      for (const corner of worldCorners) {
+        const local = ancestor.worldToLocal(corner.x, corner.y);
+        if (!local) continue;
+        localMinX = Math.min(localMinX, local.x);
+        localMinY = Math.min(localMinY, local.y);
+        localMaxX = Math.max(localMaxX, local.x);
+        localMaxY = Math.max(localMaxY, local.y);
+      }
+      if (!(localMaxX >= -margin && localMinX <= ancestor.width + margin && localMaxY >= -margin && localMinY <= ancestor.height + margin)) {
+        return false;
+      }
+    }
+    return true;
+  }
   syncContentProjection(node) {
     if (!this.contentProjectionEnabled || !this.a11yRoot) return;
     const projection = node.getContentProjection();
@@ -1674,6 +1728,17 @@ var Scene = class _Scene {
       }
       return;
     }
+    const worldTf = node.getWorldTransform();
+    const margin = this.contentProjectionMargin ?? this.height;
+    if (Number.isFinite(margin) && !this.projectionBoxVisible(node, worldTf, margin)) {
+      if (el) {
+        this.clearContentGridState(node.id, el);
+        el.remove();
+        this.contentElements.delete(node.id);
+        this.a11yNeedsReorder = true;
+      }
+      return;
+    }
     if (!el) {
       el = document.createElement("div");
       el.setAttribute("data-vecto-content", node.id);
@@ -1770,7 +1835,7 @@ var Scene = class _Scene {
       el.style.userSelect = selectable ? "text" : "none";
       el.style.cursor = selectable ? "text" : "";
     }
-    const { a, b, c, d, e, f } = node.getWorldTransform();
+    const { a, b, c, d, e, f } = worldTf;
     const contentX = projection.contentX ?? 0;
     const contentY = projection.contentY ?? 0;
     const baselineOffset = lines && lines.length > 0 ? 0 : projection.baseline === void 0 ? 0 : projection.baseline - cssLineBoxBaseline(font, projection.lineHeight ?? 16);
@@ -1780,42 +1845,7 @@ 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)`;
-    let visible = true;
-    if (node.width > 0 && node.height > 0) {
-      const worldCorners = [];
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      for (let i = 0; i < 4; i++) {
-        const lx = i & 1 ? node.width : 0;
-        const ly = i & 2 ? node.height : 0;
-        const wx = a * lx + c * ly + e;
-        const wy = b * lx + d * ly + f;
-        worldCorners.push({ x: wx, y: wy });
-        if (wx < minX) minX = wx;
-        if (wx > maxX) maxX = wx;
-        if (wy < minY) minY = wy;
-        if (wy > maxY) maxY = wy;
-      }
-      visible = maxX >= 0 && minX <= this.width && maxY >= 0 && minY <= this.height;
-      for (let ancestor = node.parent; visible && ancestor; ancestor = ancestor.parent) {
-        if (!ancestor.clipChildren || ancestor.width <= 0 || ancestor.height <= 0) continue;
-        let localMinX = Infinity;
-        let localMinY = Infinity;
-        let localMaxX = -Infinity;
-        let localMaxY = -Infinity;
-        for (const corner of worldCorners) {
-          const local = ancestor.worldToLocal(corner.x, corner.y);
-          if (!local) continue;
-          localMinX = Math.min(localMinX, local.x);
-          localMinY = Math.min(localMinY, local.y);
-          localMaxX = Math.max(localMaxX, local.x);
-          localMaxY = Math.max(localMaxY, local.y);
-        }
-        visible = localMaxX >= 0 && localMinX <= ancestor.width && localMaxY >= 0 && localMinY <= ancestor.height;
-      }
-    }
+    const visible = this.projectionBoxVisible(node, worldTf, 0);
     const display = visible ? "" : "none";
     if (el.style.display !== display) el.style.display = display;
   }

package/dist/tree/Scene.d.ts

@@ -98,6 +98,18 @@ export interface SceneOptions {
      * scenes to skip the sync walk.
      */
     contentProjection?: boolean;
+    /**
+     * How far outside the viewport (in CSS px, each side) content projections are
+     * materialized as DOM. Projections whose box is farther than this are not
+     * created — and are removed when they scroll past it — so a document taller
+     * than the viewport keeps only a bounded, near-viewport set of DOM nodes
+     * instead of one element (plus a `<span>` per line) per block for the whole
+     * document. A larger margin keeps more off-screen text ready for native
+     * find-in-page / selection at the cost of more DOM; `Infinity` restores the
+     * legacy "materialize the entire document" behavior. Default: one viewport
+     * height (`undefined` → resolved to `Scene.height` at sync time).
+     */
+    contentProjectionMargin?: number;
 }
 /** Frame-rate the loop is capped to when the OS requests reduced motion. */
 export declare const REDUCED_MOTION_FPS = 30;
@@ -216,6 +228,7 @@ export declare class Scene {
     private contentMetricScaleEpoch;
     private contentMetricScaleX;
     private contentProjectionEnabled;
+    private contentProjectionMargin;
     /**
      * 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
@@ -402,6 +415,15 @@ export declare class Scene {
      * hidden (`display: none`) so text-heavy scenes only materialize what is
      * visible to the browser's text machinery anyway.
      */
+    /**
+     * Whether `node`'s world-space box, expanded by `margin` px on every side,
+     * overlaps the scene viewport AND every `clipChildren` ancestor's box. Used
+     * both to virtualize content projection (materialize only near-viewport text,
+     * at `margin = contentProjectionMargin`) and for the exact `display:none`
+     * visibility test (`margin = 0`). Boundless nodes (width/height 0) opt out of
+     * culling and always count as visible, matching the legacy behavior.
+     */
+    private projectionBoxVisible;
     private syncContentProjection;
     /**
      * Materialize a prepared grid in logical source order while positioning each

package/package.json

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