@vectojs/core 0.2.6 → 0.2.8

package/dist/index.mjs

@@ -3,7 +3,7 @@ import {
   LayoutResultBuffer,
   computeLineSegments,
   createCanvasMeasurer
-} from "./chunk-SSOP3F5F.mjs";
+} from "./chunk-FNXOS7IA.mjs";
 import {
   CanvasRenderer,
   SVGRenderer,
@@ -12,7 +12,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-PK5EYWIT.mjs";
+} from "./chunk-YBW7ECZP.mjs";
 import {
   Easing,
   Entity,
@@ -24,7 +24,7 @@ import {
   TweenDriver,
   VectoJSEvent,
   isTweenConfig
-} from "./chunk-SL654OMF.mjs";
+} from "./chunk-G6GQO7W2.mjs";
 import {
   ArabicShaper,
   BidiResolver,
@@ -296,6 +296,11 @@ var ComputeParticleEntity = class extends Entity {
 
 // src/tree/Scene.ts
 var REDUCED_MOTION_FPS = 30;
+function parseInlinePx(value) {
+  if (!value || !value.endsWith("px")) return null;
+  const n = parseFloat(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
 var Scene = class _Scene {
   static webglCreator = null;
   static webgpuManagerClass = null;
@@ -350,6 +355,14 @@ var Scene = class _Scene {
   // server-side (e.g. headless layout / vector export) without jsdom.
   a11yRoot;
   a11yElements = /* @__PURE__ */ new Map();
+  /** DOM nodes mirroring static text content, keyed by entity id. */
+  contentElements = /* @__PURE__ */ new Map();
+  contentProjectionEnabled = true;
+  // 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.
+  frameHadAnimation = true;
+  frameHadInteractive = true;
   resizeHandler;
   focusedA11yElement = null;
   caretBlinkTimer = null;
@@ -398,8 +411,10 @@ var Scene = class _Scene {
     this.debugA11y = options.debugA11y ?? false;
     this.disableWindowResize = options.disableWindowResize ?? false;
     if (this.disableWindowResize) {
-      this.width = canvas.width || canvas.clientWidth || 0;
-      this.height = canvas.height || canvas.clientHeight || 0;
+      const styleWidth = parseInlinePx(canvas.style?.width);
+      const styleHeight = parseInlinePx(canvas.style?.height);
+      this.width = styleWidth ?? (canvas.width || canvas.clientWidth || 0);
+      this.height = styleHeight ?? (canvas.height || canvas.clientHeight || 0);
     } else {
       this.width = typeof window !== "undefined" ? window.innerWidth : canvas.clientWidth || canvas.width || 800;
       this.height = typeof window !== "undefined" ? window.innerHeight : canvas.clientHeight || canvas.height || 600;
@@ -411,6 +426,7 @@ var Scene = class _Scene {
     this.autoThrottle = options.autoThrottle ?? true;
     this.particleBackend = options.particleBackend ?? "auto";
     this.a11ySyncInterval = options.a11ySyncInterval ?? 0;
+    this.contentProjectionEnabled = 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 Entity {
       isPointInside() {
@@ -564,6 +580,11 @@ var Scene = class _Scene {
    * @param entity - The subtree whose shadow nodes should be removed.
    */
   detachA11y(entity) {
+    const contentEl = this.contentElements.get(entity.id);
+    if (contentEl) {
+      contentEl.remove();
+      this.contentElements.delete(entity.id);
+    }
     this.removeA11yRecursively(entity);
   }
   /**
@@ -610,6 +631,8 @@ var Scene = class _Scene {
     this.a11yRoot?.remove();
     this.portalRoot?.remove();
     this.a11yElements.clear();
+    for (const el of this.contentElements.values()) el.remove();
+    this.contentElements.clear();
     this.pointRenderer?.destroy();
     this.renderer.dispose?.();
     this.glCanvas?.remove();
@@ -693,6 +716,18 @@ var Scene = class _Scene {
    * Essential for deterministic rendering (e.g. video export).
    * Note: You should call `scene.stop()` before using this to avoid conflict with the rAF loop.
    */
+  /**
+   * The scene-graph root entity. Exposed read-only for tooling — the devtools
+   * inspector walks it to build the Virtual Math Tree view. Mutate the graph
+   * through {@link add}/{@link remove}, not by editing this node directly.
+   */
+  get rootEntity() {
+    return this.root;
+  }
+  /** The overlay layer root (see {@link showOverlay}), read-only for tooling. */
+  get overlayRootEntity() {
+    return this.overlayRoot;
+  }
   step(dt) {
     const time = this.lastTime + dt;
     this.lastTime = time;
@@ -709,21 +744,7 @@ var Scene = class _Scene {
     this.dirty = true;
   }
   /** True when any node in the subtree has a pending animation. */
-  hasAnyPendingAnimation(node) {
-    if (node.hasPendingAnimations()) return true;
-    for (const child of node.children) {
-      if (this.hasAnyPendingAnimation(child)) return true;
-    }
-    return false;
-  }
   /** True when any node in the subtree is interactive (drives a11y sync). */
-  hasAnyInteractive(node) {
-    if (node.interactive) return true;
-    for (const child of node.children) {
-      if (this.hasAnyInteractive(child)) return true;
-    }
-    return false;
-  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
@@ -972,11 +993,96 @@ var Scene = class _Scene {
         el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
       }
     }
+    this.syncContentProjection(node);
     for (const child of node.children) this.syncA11y(child);
     if (node === this.root) {
       for (const overlay of this.overlayRoot.children) this.syncA11y(overlay);
     }
   }
+  /**
+   * Mirror one entity's static text ({@link Entity.getContentProjection}) as a
+   * transparent DOM node positioned over the drawn glyphs. Runs on the a11y
+   * sync cadence; all writes are dirty-checked. Off-viewport projections are
+   * hidden (`display: none`) so text-heavy scenes only materialize what is
+   * visible to the browser's text machinery anyway.
+   */
+  syncContentProjection(node) {
+    if (!this.contentProjectionEnabled || !this.a11yRoot) return;
+    const projection = node.getContentProjection();
+    let el = this.contentElements.get(node.id);
+    if (!projection || !projection.text) {
+      if (el) {
+        el.remove();
+        this.contentElements.delete(node.id);
+      }
+      return;
+    }
+    if (!el) {
+      el = document.createElement("div");
+      el.setAttribute("data-vecto-content", node.id);
+      const s = el.style;
+      s.position = "absolute";
+      s.transformOrigin = "0 0";
+      s.margin = "0";
+      s.padding = "0";
+      s.color = "transparent";
+      s.whiteSpace = "pre-wrap";
+      s.overflow = "hidden";
+      s.zIndex = "0";
+      el.addEventListener(
+        "wheel",
+        (e2) => {
+          node.dispatchEvent(new VectoJSEvent("wheel", node, e2));
+        },
+        { passive: false }
+      );
+      this.a11yRoot.appendChild(el);
+      this.contentElements.set(node.id, el);
+    }
+    if (el.textContent !== projection.text) el.textContent = projection.text;
+    const font = projection.font ?? "";
+    if (el.style.font !== font) el.style.font = font;
+    const lineHeight = projection.lineHeight !== void 0 ? `${projection.lineHeight}px` : "";
+    if (el.style.lineHeight !== lineHeight) el.style.lineHeight = lineHeight;
+    const hidden = node.interactive ? "true" : null;
+    if (el.getAttribute("aria-hidden") !== hidden) {
+      if (hidden) el.setAttribute("aria-hidden", hidden);
+      else el.removeAttribute("aria-hidden");
+    }
+    const selectable = projection.selectable === true;
+    const pointerEvents = selectable ? "auto" : "none";
+    if (el.style.pointerEvents !== pointerEvents) {
+      el.style.pointerEvents = pointerEvents;
+      el.style.userSelect = selectable ? "text" : "none";
+      el.style.cursor = selectable ? "text" : "";
+    }
+    const { a, b, c, d, e, f } = node.getWorldTransform();
+    el.style.left = `${e}px`;
+    el.style.top = `${f}px`;
+    if (node.width > 0) el.style.width = `${node.width}px`;
+    if (node.height > 0) el.style.height = `${node.height}px`;
+    el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
+    let visible = true;
+    if (node.width > 0 && node.height > 0) {
+      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;
+        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;
+    }
+    const display = visible ? "" : "none";
+    if (el.style.display !== display) el.style.display = display;
+  }
   enforceA11yDomOrder() {
     if (!this.a11yRoot) return;
     this.fullViewportElements.length = 0;
@@ -1173,7 +1279,7 @@ var Scene = class _Scene {
   loop(time) {
     if (!this.isRunning) return;
     let cap = this.effectiveMaxFPS();
-    const isIdle = !this.dirty && !this.hasAnyPendingAnimation(this.root) && !this.hasAnyPendingAnimation(this.overlayRoot);
+    const isIdle = !this.dirty && !this.frameHadAnimation;
     if (isIdle && this.autoThrottle && this.renderMode === "always" && this.maxFPS > 0) {
       cap = Math.min(cap, 2);
     }
@@ -1189,12 +1295,13 @@ var Scene = class _Scene {
     }
     this.dirty = false;
     this.render(this.renderer, dt, time);
-    const hasActiveAnimation = this.hasAnyPendingAnimation(this.root) || this.hasAnyPendingAnimation(this.overlayRoot);
-    const hasInteractive = this.hasAnyInteractive(this.root) || this.hasAnyInteractive(this.overlayRoot);
+    const hasActiveAnimation = this.frameHadAnimation;
+    const hasInteractive = this.frameHadInteractive;
+    const wantsContentSync = this.contentProjectionEnabled;
     const shouldSyncInterval = this.a11ySyncInterval <= 0 || time - this.lastA11ySync >= this.a11ySyncInterval;
-    if ((hasInteractive || this.a11yElements.size > 0) && (shouldSyncInterval || this.a11yPendingSyncAfterAnimation)) {
+    if ((hasInteractive || this.a11yElements.size > 0 || wantsContentSync) && (shouldSyncInterval || this.a11yPendingSyncAfterAnimation)) {
       this.lastA11ySync = time;
-      if (hasInteractive) {
+      if (hasInteractive || wantsContentSync) {
         this.syncA11y(this.root);
       }
       this.enforceA11yDomOrder();
@@ -1346,8 +1453,14 @@ var Scene = class _Scene {
     }
     const vw = this.width;
     const vh = this.height;
+    let walkHadAnimation = false;
+    let walkHadInteractive = false;
     const renderNode = (node, pa, pb, pc, pd, pe, pf, parentOpacity) => {
-      if (isMainRenderer) node.update(dt, time);
+      if (isMainRenderer) {
+        node.update(dt, time);
+        if (!walkHadAnimation && node.hasPendingAnimations()) walkHadAnimation = true;
+        if (!walkHadInteractive && node.interactive) walkHadInteractive = true;
+      }
       const cos = Math.cos(node.rotation);
       const sin = Math.sin(node.rotation);
       const te = pa * node.x + pc * node.y + pe;
@@ -1467,7 +1580,11 @@ var Scene = class _Scene {
     for (const overlay of this.overlayRoot.children) {
       renderNode(overlay, 1, 0, 0, 1, 0, 0, 1);
     }
-    if (isMainRenderer) this.reconcilePortals();
+    if (isMainRenderer) {
+      this.frameHadAnimation = walkHadAnimation;
+      this.frameHadInteractive = walkHadInteractive;
+      this.reconcilePortals();
+    }
     renderer.flush();
     if (isMainRenderer) {
       this.pointRenderer?.flush();
@@ -1699,6 +1816,14 @@ var TextEntity = class extends Entity {
     this.on("hover", () => this.isHovered = true);
     this.on("pointerleave", () => this.isHovered = false);
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return { text: this.text, font: `${this.fontSize}px sans-serif` };
+  }
   /**
    * Replace the text content. Runs the **cold** measurement pass (re-segment +
    * re-measure) since the glyphs changed, then re-lays out.
@@ -1723,6 +1848,26 @@ var TextEntity = class extends Entity {
     this.applyLayout();
     return this;
   }
+  /**
+   * Set horizontal alignment (`'justify'` stretches wrapped lines flush to
+   * the wrap width; the last line stays ragged) and reflow.
+   */
+  setTextAlign(align) {
+    this.layout.textAlign = align;
+    this.applyLayout();
+    return this;
+  }
+  /**
+   * Plug a hyphenator (word → parts). Break opportunities are baked in during
+   * the cold pass, so this re-prepares the current text. Soft hyphens
+   * (U+00AD) in the text work without one.
+   */
+  setHyphenator(fn) {
+    this.layout.hyphenate = fn;
+    this.prepared = this.layout.prepare(this.text, this.atlas, this.fontSize);
+    this.applyLayout();
+    return this;
+  }
   /** Hot pass: place the cached {@link PreparedText} and refresh the a11y box. */
   applyLayout() {
     const result = this.layout.layoutPrepared(this.prepared);

package/dist/layout/LayoutEngine.d.ts

@@ -88,6 +88,11 @@ export interface PreparedWord {
     isWordLike: boolean | undefined;
     /** Pre-computed `word.trim().length === 0`. */
     isWhitespace: boolean;
+    /**
+     * Glyph indices where the word may break with a visible hyphen — from
+     * soft hyphens (U+00AD) in the source or the engine's `hyphenate` hook.
+     */
+    breakPoints?: number[];
 }
 /** A measured paragraph; `isEmpty` marks a blank line (forced newline). */
 export interface PreparedParagraph {
@@ -107,6 +112,8 @@ export interface PreparedText {
     paragraphs: PreparedParagraph[];
     fontSize: number;
     fallbackToCanvas?: boolean;
+    /** Advance width of '-' at `fontSize`, for wrap-time hyphen insertion. */
+    hyphenWidth?: number;
 }
 /**
  * A rectangular region (in the text's local coordinate space) that text must
@@ -140,6 +147,13 @@ export declare function computeLineSegments(top: number, bottom: number, maxWidt
  */
 export declare class LayoutEngine {
     maxWidth: number;
+    /**
+     * Horizontal alignment. `'justify'` stretches inter-word spaces (or, for
+     * space-less CJK lines, inter-character gaps) so wrapped lines end flush at
+     * `maxWidth`; the last line of each paragraph stays ragged. Only applies to
+     * the object layout path without exclusion shapes.
+     */
+    textAlign: 'left' | 'justify';
     maxHeight: number;
     preserveLeadingSpaces: boolean;
     private wordSegmenter;
@@ -150,6 +164,16 @@ export declare class LayoutEngine {
     private richParagraphCache;
     private lastAtlas;
     private measurer;
+    private _hyphenate;
+    /**
+     * Optional hyphenator: given a word, return its break parts (e.g.
+     * `['hyphen', 'ation']`). Used at wrap time when a word doesn't fit; a
+     * visible '-' is drawn at the chosen break. Soft hyphens (U+00AD) in the
+     * source work without any hyphenator. Setting this clears the prepared
+     * caches (break opportunities are baked in during prepare()).
+     */
+    get hyphenate(): ((word: string) => string[]) | null;
+    set hyphenate(fn: ((word: string) => string[]) | null);
     constructor(maxWidth: number, maxHeight: number, measurer?: GlyphMeasurer | null);
     private getWordSegments;
     /**

package/dist/layout.js

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

package/dist/layout.mjs

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

package/dist/renderer.js

@@ -4,11 +4,11 @@
 
 
 
-var _chunkGADBN53Zjs = require('./chunk-GADBN53Z.js');
+var _chunkXB3ZY5MFjs = require('./chunk-XB3ZY5MF.js');
 
 
 
 
 
 
-exports.CanvasRenderer = _chunkGADBN53Zjs.CanvasRenderer; exports.SVGRenderer = _chunkGADBN53Zjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkGADBN53Zjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkGADBN53Zjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkGADBN53Zjs.parseColorToRGBA;
+exports.CanvasRenderer = _chunkXB3ZY5MFjs.CanvasRenderer; exports.SVGRenderer = _chunkXB3ZY5MFjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkXB3ZY5MFjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkXB3ZY5MFjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkXB3ZY5MFjs.parseColorToRGBA;

package/dist/renderer.mjs

@@ -4,7 +4,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-PK5EYWIT.mjs";
+} from "./chunk-YBW7ECZP.mjs";
 export {
   CanvasRenderer,
   SVGRenderer,

package/dist/text/MSDFTextEntity.d.ts

@@ -1,4 +1,4 @@
-import { Entity } from '../tree/Entity';
+import { Entity, type ContentProjection } from '../tree/Entity';
 import { MSDFFont } from './MSDFFont';
 export interface MSDFTextEntityOptions {
     font: MSDFFont;
@@ -33,6 +33,11 @@ export declare class MSDFTextEntity extends Entity {
     setMaxWidth(maxWidth: number): void;
     setText(text: string): void;
     private queueLayout;
+    /**
+     * Mirror the rendered text into the DOM content layer: find-in-page, screen
+     * readers, crawlers, and translation see the same string the canvas draws.
+     */
+    getContentProjection(): ContentProjection | null;
     isPointInside(globalX: number, globalY: number): boolean;
     render(renderer: any): void;
     destroy(): void;

package/dist/text.js

@@ -2,7 +2,7 @@
 
 
 
-var _chunk4BO5XBJLjs = require('./chunk-4BO5XBJL.js');
+var _chunkXRWZS2DMjs = require('./chunk-XRWZS2DM.js');
 
 
 
@@ -13,4 +13,4 @@ var _chunkCTZQOM5Zjs = require('./chunk-CTZQOM5Z.js');
 
 
 
-exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.MSDFFont = _chunk4BO5XBJLjs.MSDFFont; exports.MSDFTextEntity = _chunk4BO5XBJLjs.MSDFTextEntity; exports.SVGEntity = _chunk4BO5XBJLjs.SVGEntity;
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.MSDFFont = _chunkXRWZS2DMjs.MSDFFont; exports.MSDFTextEntity = _chunkXRWZS2DMjs.MSDFTextEntity; exports.SVGEntity = _chunkXRWZS2DMjs.SVGEntity;

package/dist/text.mjs

@@ -2,7 +2,7 @@ import {
   MSDFFont,
   MSDFTextEntity,
   SVGEntity
-} from "./chunk-SL654OMF.mjs";
+} from "./chunk-G6GQO7W2.mjs";
 import {
   ArabicShaper,
   BidiResolver

package/dist/tree/Entity.d.ts

@@ -52,6 +52,26 @@ export interface BatchRect {
     /** CSS fill color. */
     color: string;
 }
+/**
+ * Static text an {@link Entity} exposes for DOM content projection, returned
+ * from {@link Entity.getContentProjection}. The Scene mirrors it as a
+ * transparent, position-synced DOM node so browser-native text machinery —
+ * find-in-page, screen readers, SEO crawlers, translation, `#:~:text=`
+ * fragments — operates on canvas-rendered text.
+ */
+export interface ContentProjection {
+    /** The plain text content as rendered (line breaks as `\n`). */
+    text: string;
+    /** CSS font shorthand matching the drawn glyphs, e.g. `'24px sans-serif'`. */
+    font?: string;
+    /** Line height in px, when it differs from the font's default. */
+    lineHeight?: number;
+    /**
+     * Allow native mouse selection on the projected text. Off by default so the
+     * projection never intercepts pointer input meant for the canvas.
+     */
+    selectable?: boolean;
+}
 /**
  * Semantic attributes an {@link Entity} can project into the accessibility /
  * automation shadow layer maintained by {@link Scene}.
@@ -453,6 +473,17 @@ export declare abstract class Entity {
      * @returns The rectangle to batch, or `null` for the normal render path.
      */
     getBatchRect(): BatchRect | null;
+    /**
+     * Opt into DOM content projection for entities that render static text.
+     * The {@link Scene} mirrors the returned text as a transparent DOM node
+     * positioned over the drawn glyphs, making canvas text findable (Ctrl+F),
+     * readable by screen readers and crawlers, translatable, and — when
+     * `selectable` is set — natively selectable. Returns `null` by default.
+     * Read on the a11y sync cadence, so text changes propagate automatically.
+     *
+     * @returns The projection descriptor, or `null` to project nothing.
+     */
+    getContentProjection(): ContentProjection | null;
     /**
      * Whether this entity still has a queued/running tween animation, or an
      * active {@link setTransition}/{@link animateTo}/{@link springTo} property

package/dist/tree/Scene.d.ts

@@ -75,6 +75,14 @@ export interface SceneOptions {
      * and not marked dirty) to save power/CPU. Default is `true`.
      */
     autoThrottle?: boolean;
+    /**
+     * Mirror static text from entities implementing
+     * {@link Entity.getContentProjection} as transparent, position-synced DOM
+     * nodes, so find-in-page, screen readers, crawlers, and translation work on
+     * canvas-rendered text. Default is `true`; disable for purely decorative
+     * scenes to skip the sync walk.
+     */
+    contentProjection?: boolean;
 }
 /** Frame-rate the loop is capped to when the OS requests reduced motion. */
 export declare const REDUCED_MOTION_FPS = 30;
@@ -147,6 +155,11 @@ export declare class Scene {
     private a11yPendingSyncAfterAnimation;
     private a11yRoot;
     private a11yElements;
+    /** DOM nodes mirroring static text content, keyed by entity id. */
+    private contentElements;
+    private contentProjectionEnabled;
+    private frameHadAnimation;
+    private frameHadInteractive;
     private resizeHandler;
     private focusedA11yElement;
     private caretBlinkTimer;
@@ -256,6 +269,14 @@ export declare class Scene {
      * Essential for deterministic rendering (e.g. video export).
      * Note: You should call `scene.stop()` before using this to avoid conflict with the rAF loop.
      */
+    /**
+     * The scene-graph root entity. Exposed read-only for tooling — the devtools
+     * inspector walks it to build the Virtual Math Tree view. Mutate the graph
+     * through {@link add}/{@link remove}, not by editing this node directly.
+     */
+    get rootEntity(): Entity;
+    /** The overlay layer root (see {@link showOverlay}), read-only for tooling. */
+    get overlayRootEntity(): Entity;
     step(dt: number): void;
     /**
      * Mark the scene as needing a redraw on the next frame.
@@ -265,10 +286,16 @@ export declare class Scene {
      */
     markDirty(): void;
     /** True when any node in the subtree has a pending animation. */
-    private hasAnyPendingAnimation;
     /** True when any node in the subtree is interactive (drives a11y sync). */
-    private hasAnyInteractive;
     private syncA11y;
+    /**
+     * Mirror one entity's static text ({@link Entity.getContentProjection}) as a
+     * transparent DOM node positioned over the drawn glyphs. Runs on the a11y
+     * sync cadence; all writes are dirty-checked. Off-viewport projections are
+     * hidden (`display: none`) so text-heavy scenes only materialize what is
+     * visible to the browser's text machinery anyway.
+     */
+    private syncContentProjection;
     private enforceA11yDomOrder;
     /** Keep DOM/WebGL overlay layers aligned with the canvas's CSS box. */
     private syncOverlayGeometry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -53,7 +53,8 @@
   ],
   "scripts": {
     "build": "node scripts/build-worker.js && tsup && tsc -p tsconfig.build.json",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "bun e2e/hidpi.e2e.ts"
   },
   "dependencies": {},
   "devDependencies": {
@@ -61,6 +62,7 @@
     "esbuild": "^0.21.5",
     "jsdom": "^29.1.1",
     "tsup": "^8.3.5",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.9",
+    "puppeteer-core": "^22.12.1"
   }
 }