@vectojs/core 0.2.6 → 0.2.7

package/dist/{chunk-4BO5XBJL.js → chunk-DWMQYHNC.js}

@@ -892,6 +892,19 @@ var Entity = (_class4 = class {
   getBatchRect() {
     return 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() {
+    return null;
+  }
   /**
    * Whether this entity still has a queued/running tween animation, or an
    * active {@link setTransition}/{@link animateTo}/{@link springTo} property
@@ -1067,6 +1080,18 @@ var MSDFTextEntity = (_class6 = class extends Entity {
       }
     });
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return {
+      text: this.text,
+      font: `${this.fontSize}px ${this.fallbackFont}`,
+      lineHeight: this.lineHeight
+    };
+  }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
     const local = this.worldToLocal(globalX, globalY);

package/dist/{chunk-GADBN53Z.js → chunk-GTQRCY6W.js}

@@ -34,6 +34,10 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
     this.height = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _2 => _2.height]), () => ( (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0)));
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
+    if (canvas.style) {
+      canvas.style.width = `${this.width}px`;
+      canvas.style.height = `${this.height}px`;
+    }
     const ctx = canvas.getContext("2d");
     this.ctx = ctx;
     if (ctx) ctx.scale(dpr, dpr);

package/dist/{chunk-PK5EYWIT.mjs → chunk-HVJHXIKW.mjs}

@@ -34,6 +34,10 @@ var CanvasRenderer = class _CanvasRenderer {
     this.height = size?.height ?? (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0);
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
+    if (canvas.style) {
+      canvas.style.width = `${this.width}px`;
+      canvas.style.height = `${this.height}px`;
+    }
     const ctx = canvas.getContext("2d");
     this.ctx = ctx;
     if (ctx) ctx.scale(dpr, dpr);

package/dist/{chunk-SL654OMF.mjs → chunk-YVN3PJRC.mjs}

@@ -892,6 +892,19 @@ var Entity = class {
   getBatchRect() {
     return 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() {
+    return null;
+  }
   /**
    * Whether this entity still has a queued/running tween animation, or an
    * active {@link setTransition}/{@link animateTo}/{@link springTo} property
@@ -1067,6 +1080,18 @@ var MSDFTextEntity = class extends Entity {
       }
     });
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return {
+      text: this.text,
+      font: `${this.fontSize}px ${this.fallbackFont}`,
+      lineHeight: this.lineHeight
+    };
+  }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
     const local = this.worldToLocal(globalX, globalY);

package/dist/components/TextEntity.d.ts

@@ -1,4 +1,4 @@
-import { Entity } from '../tree/Entity';
+import { Entity, type ContentProjection } from '../tree/Entity';
 import { IRenderer } from '../renderer/IRenderer';
 export declare class TextEntity extends Entity {
     text: string;
@@ -13,6 +13,11 @@ export declare class TextEntity extends Entity {
     lineWidth: number;
     private isHovered;
     constructor(text: string, atlas: any, maxWidth: number, fontSize?: number);
+    /**
+     * Mirror the rendered text into the DOM content layer: find-in-page, screen
+     * readers, crawlers, and translation see the same string the canvas draws.
+     */
+    getContentProjection(): ContentProjection | null;
     /**
      * Replace the text content. Runs the **cold** measurement pass (re-segment +
      * re-measure) since the glyphs changed, then re-lays out.

package/dist/index.js

@@ -12,7 +12,7 @@ var _chunkBWLNEJJWjs = require('./chunk-BWLNEJJW.js');
 
 
 
-var _chunkGADBN53Zjs = require('./chunk-GADBN53Z.js');
+var _chunkGTQRCY6Wjs = require('./chunk-GTQRCY6W.js');
 
 
 
@@ -24,7 +24,7 @@ var _chunkGADBN53Zjs = require('./chunk-GADBN53Z.js');
 
 
 
-var _chunk4BO5XBJLjs = require('./chunk-4BO5XBJL.js');
+var _chunkDWMQYHNCjs = require('./chunk-DWMQYHNC.js');
 
 
 
@@ -41,7 +41,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 _chunk4BO5XBJLjs.Entity {
+var ComputeParticleEntity = (_class = class extends _chunkDWMQYHNCjs.Entity {
   
   
   
@@ -296,6 +296,11 @@ var ComputeParticleEntity = (_class = class extends _chunk4BO5XBJLjs.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 = (_class2 = class _Scene {
   static __initStatic() {this.webglCreator = null}
   static __initStatic2() {this.webgpuManagerClass = null}
@@ -350,69 +355,75 @@ var Scene = (_class2 = class _Scene {
   // server-side (e.g. headless layout / vector export) without jsdom.
   
   __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}
   
-  __init19() {this.focusedA11yElement = null}
-  __init20() {this.caretBlinkTimer = null}
-  __init21() {this.a11yNeedsReorder = true}
-  __init22() {this.portalRoot = null}
-  __init23() {this.fullViewportElements = []}
-  __init24() {this.normalElements = []}
-  __init25() {this.activeIds = /* @__PURE__ */ new Set()}
-  __init26() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
-  __init27() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
-  __init28() {this.portalEntities = /* @__PURE__ */ new Map()}
-  __init29() {this.renderOrderCounter = 0}
+  __init21() {this.focusedA11yElement = null}
+  __init22() {this.caretBlinkTimer = null}
+  __init23() {this.a11yNeedsReorder = true}
+  __init24() {this.portalRoot = null}
+  __init25() {this.fullViewportElements = []}
+  __init26() {this.normalElements = []}
+  __init27() {this.activeIds = /* @__PURE__ */ new Set()}
+  __init28() {this.activePortalsThisFrame = /* @__PURE__ */ new Set()}
+  __init29() {this.activePortalsPrevFrame = /* @__PURE__ */ new Set()}
+  __init30() {this.portalEntities = /* @__PURE__ */ new Map()}
+  __init31() {this.renderOrderCounter = 0}
   // Optional WebGL point-cloud layer (see SceneOptions.pointBackend).
-  __init30() {this.pointRenderer = null}
-  __init31() {this.glCanvas = null}
+  __init32() {this.pointRenderer = null}
+  __init33() {this.glCanvas = null}
   
   
   
-  __init32() {this.disableWindowResize = false}
+  __init34() {this.disableWindowResize = false}
   // WebGPU properties
-  __init33() {this.destroyed = false}
-  __init34() {this.device = null}
-  __init35() {this.deviceLost = false}
-  __init36() {this.particleBackend = "auto"}
-  __init37() {this._webgpuDisabled = false}
+  __init35() {this.destroyed = false}
+  __init36() {this.device = null}
+  __init37() {this.deviceLost = false}
+  __init38() {this.particleBackend = "auto"}
+  __init39() {this._webgpuDisabled = false}
   get webgpuDisabled() {
     return this._webgpuDisabled || this.particleBackend === "cpu";
   }
   set webgpuDisabled(value) {
     this._webgpuDisabled = value;
   }
-  __init38() {this.recoveryTimerId = null}
-  __init39() {this.manager = null}
-  __init40() {this.initializingWebGPU = false}
-  __init41() {this.gpuCanvas = null}
-  __init42() {this.gpuContext = null}
+  __init40() {this.recoveryTimerId = null}
+  __init41() {this.manager = null}
+  __init42() {this.initializingWebGPU = false}
+  __init43() {this.gpuCanvas = null}
+  __init44() {this.gpuContext = null}
   /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
-  __init43() {this.gpuHasContent = false}
-  __init44() {this.mouseX = -9999}
-  __init45() {this.mouseY = -9999}
-  __init46() {this.pointerMoveListener = null}
-  __init47() {this.pointerLeaveListener = null}
-  __init48() {this.hasWarnedZeroSize = false}
-  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);
+  __init45() {this.gpuHasContent = false}
+  __init46() {this.mouseX = -9999}
+  __init47() {this.mouseY = -9999}
+  __init48() {this.pointerMoveListener = null}
+  __init49() {this.pointerLeaveListener = null}
+  __init50() {this.hasWarnedZeroSize = false}
+  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);
     this.canvas = canvas;
     this.debugA11y = _nullishCoalesce(options.debugA11y, () => ( false));
     this.disableWindowResize = _nullishCoalesce(options.disableWindowResize, () => ( false));
     if (this.disableWindowResize) {
-      this.width = canvas.width || canvas.clientWidth || 0;
-      this.height = canvas.height || canvas.clientHeight || 0;
+      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]));
+      this.width = _nullishCoalesce(styleWidth, () => ( (canvas.width || canvas.clientWidth || 0)));
+      this.height = _nullishCoalesce(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;
     }
     const globalProcess = typeof globalThis !== "undefined" ? globalThis.process : void 0;
-    const isTest = globalProcess && (_optionalChain([globalProcess, 'access', _15 => _15.env, 'optionalAccess', _16 => _16.NODE_ENV]) === "test" || _optionalChain([globalProcess, 'access', _17 => _17.env, 'optionalAccess', _18 => _18.VITEST]) === "true");
+    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");
     this.maxFPS = _nullishCoalesce(options.maxFPS, () => ( (isTest ? 0 : 60)));
     this.respectReducedMotion = _nullishCoalesce(options.respectReducedMotion, () => ( true));
     this.autoThrottle = _nullishCoalesce(options.autoThrottle, () => ( true));
     this.particleBackend = _nullishCoalesce(options.particleBackend, () => ( "auto"));
     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 _chunk4BO5XBJLjs.Entity {
+    this.root = new class RootEntity extends _chunkDWMQYHNCjs.Entity {
       isPointInside() {
         return false;
       }
@@ -421,7 +432,7 @@ var Scene = (_class2 = class _Scene {
       }
     }("root");
     this.root._scene = this;
-    this.overlayRoot = new class OverlayRoot extends _chunk4BO5XBJLjs.Entity {
+    this.overlayRoot = new class OverlayRoot extends _chunkDWMQYHNCjs.Entity {
       isPointInside() {
         return false;
       }
@@ -432,7 +443,7 @@ var Scene = (_class2 = class _Scene {
     if (options.renderer) {
       this.renderer = options.renderer;
     } else {
-      this.renderer = new (0, _chunkGADBN53Zjs.CanvasRenderer)(
+      this.renderer = new (0, _chunkGTQRCY6Wjs.CanvasRenderer)(
         canvas,
         this.disableWindowResize ? { width: this.width, height: this.height } : void 0
       );
@@ -498,7 +509,7 @@ var Scene = (_class2 = class _Scene {
   }
   /** Convert browser viewport coordinates into this Scene's logical coordinates. */
   clientToScene(clientX, clientY) {
-    const rect = _optionalChain([this, 'access', _19 => _19.canvas, 'access', _20 => _20.getBoundingClientRect, 'optionalCall', _21 => _21()]);
+    const rect = _optionalChain([this, 'access', _23 => _23.canvas, 'access', _24 => _24.getBoundingClientRect, 'optionalCall', _25 => _25()]);
     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;
@@ -564,6 +575,11 @@ var Scene = (_class2 = 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);
   }
   /**
@@ -607,13 +623,15 @@ var Scene = (_class2 = class _Scene {
         this.canvas.removeEventListener("pointerleave", this.pointerLeaveListener);
       }
     }
-    _optionalChain([this, 'access', _22 => _22.a11yRoot, 'optionalAccess', _23 => _23.remove, 'call', _24 => _24()]);
-    _optionalChain([this, 'access', _25 => _25.portalRoot, 'optionalAccess', _26 => _26.remove, 'call', _27 => _27()]);
+    _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()]);
     this.a11yElements.clear();
-    _optionalChain([this, 'access', _28 => _28.pointRenderer, 'optionalAccess', _29 => _29.destroy, 'call', _30 => _30()]);
-    _optionalChain([this, 'access', _31 => _31.renderer, 'access', _32 => _32.dispose, 'optionalCall', _33 => _33()]);
-    _optionalChain([this, 'access', _34 => _34.glCanvas, 'optionalAccess', _35 => _35.remove, 'call', _36 => _36()]);
-    _optionalChain([this, 'access', _37 => _37.gpuCanvas, 'optionalAccess', _38 => _38.remove, 'call', _39 => _39()]);
+    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()]);
     this.gpuCanvas = null;
     this.gpuContext = null;
     if (this.recoveryTimerId) {
@@ -625,7 +643,7 @@ var Scene = (_class2 = class _Scene {
       this.manager = null;
     }
     if (this.device) {
-      _optionalChain([this, 'access', _40 => _40.device, 'access', _41 => _41.destroy, 'optionalCall', _42 => _42()]);
+      _optionalChain([this, 'access', _44 => _44.device, 'access', _45 => _45.destroy, 'optionalCall', _46 => _46()]);
       this.device = null;
     }
   }
@@ -769,42 +787,42 @@ var Scene = (_class2 = class _Scene {
           el.style.background = "transparent";
         }
         el.addEventListener("click", (e) => {
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("click", node, e));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("click", node, e));
         });
         el.addEventListener("mouseenter", (e) => {
           if (this.debugA11y) el.style.backgroundColor = "rgba(56, 189, 248, 0.2)";
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("hover", node, e, false));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.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, _chunk4BO5XBJLjs.VectoJSEvent)("pointerleave", node, e, false));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("pointerleave", node, e, false));
         });
         const capEl = el;
         el.addEventListener("pointerdown", (e) => {
           if (typeof capEl.setPointerCapture === "function") capEl.setPointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointerdown", node, e));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("pointerdown", node, e));
         });
         el.addEventListener("pointerup", (e) => {
           if (typeof capEl.releasePointerCapture === "function")
             capEl.releasePointerCapture(e.pointerId);
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointerup", node, e));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("pointerup", node, e));
         });
         el.addEventListener(
           "pointermove",
-          (e) => node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("pointermove", node, e))
+          (e) => node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("pointermove", node, e))
         );
         el.addEventListener(
           "wheel",
           (e) => {
-            node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("wheel", node, e));
+            node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("wheel", node, e));
           },
           { passive: false }
         );
         el.addEventListener("keydown", (e) => {
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("keydown", node, e));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("keydown", node, e));
         });
         el.addEventListener("keyup", (e) => {
-          node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("keyup", node, e));
+          node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("keyup", node, e));
         });
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           const input = el;
@@ -831,7 +849,7 @@ var Scene = (_class2 = class _Scene {
           });
           el.addEventListener("compositionupdate", (e) => {
             const data = _nullishCoalesce(e.data, () => ( ""));
-            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _43 => _43.start]), () => ( 0)), length: data.length };
+            composition = { start: _nullishCoalesce(_optionalChain([composition, 'optionalAccess', _47 => _47.start]), () => ( 0)), length: data.length };
             forward();
           });
           el.addEventListener("compositionend", () => {
@@ -877,7 +895,7 @@ var Scene = (_class2 = class _Scene {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              node.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)("click", node, e));
+              node.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)("click", node, e));
             }
           });
         }
@@ -902,7 +920,7 @@ var Scene = (_class2 = class _Scene {
         if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
       }
       if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = _chunkGADBN53Zjs.sanitizeUrl.call(void 0, attrs.href);
+        const safeHref = _chunkGTQRCY6Wjs.sanitizeUrl.call(void 0, attrs.href);
         if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
       }
       if (el instanceof HTMLImageElement) {
@@ -972,11 +990,96 @@ var Scene = (_class2 = 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 (0, _chunkDWMQYHNCjs.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 = _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 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;
@@ -1035,12 +1138,12 @@ var Scene = (_class2 = class _Scene {
   syncOverlayGeometry() {
     const parent = this.canvas.parentElement;
     if (!parent) return;
-    const canvasRect = _optionalChain([this, 'access', _44 => _44.canvas, 'access', _45 => _45.getBoundingClientRect, 'optionalCall', _46 => _46()]);
-    const parentRect = _optionalChain([parent, 'access', _47 => _47.getBoundingClientRect, 'optionalCall', _48 => _48()]);
-    const cssWidth = _optionalChain([canvasRect, 'optionalAccess', _49 => _49.width]) || this.canvas.clientWidth || this.width;
-    const cssHeight = _optionalChain([canvasRect, 'optionalAccess', _50 => _50.height]) || this.canvas.clientHeight || this.height;
-    const left = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _51 => _51.left]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _52 => _52.left]), () => ( 0))) - (parent.clientLeft || 0) + parent.scrollLeft;
-    const top = (_nullishCoalesce(_optionalChain([canvasRect, 'optionalAccess', _53 => _53.top]), () => ( 0))) - (_nullishCoalesce(_optionalChain([parentRect, 'optionalAccess', _54 => _54.top]), () => ( 0))) - (parent.clientTop || 0) + parent.scrollTop;
+    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 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]) {
@@ -1165,7 +1268,7 @@ var Scene = (_class2 = class _Scene {
    * (and {@link respectReducedMotion} is on). `0` means uncapped.
    */
   effectiveMaxFPS() {
-    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _55 => _55.reducedMotionQuery, 'optionalAccess', _56 => _56.matches]);
+    const reduced = this.respectReducedMotion && !!_optionalChain([this, 'access', _59 => _59.reducedMotionQuery, 'optionalAccess', _60 => _60.matches]);
     if (reduced)
       return this.maxFPS > 0 ? Math.min(this.maxFPS, REDUCED_MOTION_FPS) : REDUCED_MOTION_FPS;
     return this.maxFPS;
@@ -1191,10 +1294,11 @@ var Scene = (_class2 = class _Scene {
     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 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();
@@ -1342,7 +1446,7 @@ var Scene = (_class2 = class _Scene {
     }
     renderer.clear();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _57 => _57.pointRenderer, 'optionalAccess', _58 => _58.begin, 'call', _59 => _59()]);
+      _optionalChain([this, 'access', _61 => _61.pointRenderer, 'optionalAccess', _62 => _62.begin, 'call', _63 => _63()]);
     }
     const vw = this.width;
     const vh = this.height;
@@ -1470,15 +1574,15 @@ var Scene = (_class2 = class _Scene {
     if (isMainRenderer) this.reconcilePortals();
     renderer.flush();
     if (isMainRenderer) {
-      _optionalChain([this, 'access', _60 => _60.pointRenderer, 'optionalAccess', _61 => _61.flush, 'call', _62 => _62()]);
+      _optionalChain([this, 'access', _64 => _64.pointRenderer, 'optionalAccess', _65 => _65.flush, 'call', _66 => _66()]);
     }
-    _optionalChain([renderer, 'access', _63 => _63.present, 'optionalCall', _64 => _64()]);
+    _optionalChain([renderer, 'access', _67 => _67.present, 'optionalCall', _68 => _68()]);
   }
   /**
    * Export the current scene state to a lightweight, flat SVG XML string.
    */
   toSVG() {
-    const renderer = new (0, _chunkGADBN53Zjs.SVGRenderer)(this.width, this.height);
+    const renderer = new (0, _chunkGTQRCY6Wjs.SVGRenderer)(this.width, this.height);
     this.render(renderer, 0, 0);
     return renderer.toXMLString();
   }
@@ -1491,7 +1595,7 @@ var Scene = (_class2 = class _Scene {
     if (typeof this.renderer.resize === "function") {
       this.renderer.resize(width, height);
     }
-    _optionalChain([this, 'access', _65 => _65.pointRenderer, 'optionalAccess', _66 => _66.resize, 'call', _67 => _67(width, height)]);
+    _optionalChain([this, 'access', _69 => _69.pointRenderer, 'optionalAccess', _70 => _70.resize, 'call', _71 => _71(width, height)]);
     if (this.gpuCanvas) {
       this.gpuCanvas.width = width;
       this.gpuCanvas.height = height;
@@ -1535,7 +1639,7 @@ var Scene = (_class2 = class _Scene {
       });
       pass.end();
       this.device.queue.submit([encoder.finish()]);
-    } catch (e2) {
+    } catch (e3) {
     }
     this.gpuHasContent = false;
   }
@@ -1675,20 +1779,20 @@ function defaultMeasurer() {
   if (sharedMeasurer === void 0) sharedMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer.call(void 0, "sans-serif");
   return sharedMeasurer;
 }
-var TextEntity = (_class3 = class extends _chunk4BO5XBJLjs.Entity {
+var TextEntity = (_class3 = class extends _chunkDWMQYHNCjs.Entity {
   
   
   
   
-  __init49() {this.nodes = []}
+  __init51() {this.nodes = []}
   
-  __init50() {this.fillStyle = "#94a3b8"}
-  __init51() {this.strokeStyle = null}
-  __init52() {this.hoveredFillStyle = "#ffffff"}
-  __init53() {this.lineWidth = 1}
-  __init54() {this.isHovered = false}
+  __init52() {this.fillStyle = "#94a3b8"}
+  __init53() {this.strokeStyle = null}
+  __init54() {this.hoveredFillStyle = "#ffffff"}
+  __init55() {this.lineWidth = 1}
+  __init56() {this.isHovered = false}
   constructor(text, atlas, maxWidth, fontSize = 24) {
-    super();_class3.prototype.__init49.call(this);_class3.prototype.__init50.call(this);_class3.prototype.__init51.call(this);_class3.prototype.__init52.call(this);_class3.prototype.__init53.call(this);_class3.prototype.__init54.call(this);;
+    super();_class3.prototype.__init51.call(this);_class3.prototype.__init52.call(this);_class3.prototype.__init53.call(this);_class3.prototype.__init54.call(this);_class3.prototype.__init55.call(this);_class3.prototype.__init56.call(this);;
     this.text = text;
     this.atlas = atlas;
     this.fontSize = fontSize;
@@ -1699,6 +1803,14 @@ var TextEntity = (_class3 = class extends _chunk4BO5XBJLjs.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.
@@ -1773,17 +1885,17 @@ var TextEntity = (_class3 = class extends _chunk4BO5XBJLjs.Entity {
 }, _class3);
 
 // src/components/GridTextEntity.ts
-var GridTextEntity = (_class4 = class extends _chunk4BO5XBJLjs.Entity {
+var GridTextEntity = (_class4 = class extends _chunkDWMQYHNCjs.Entity {
   
-  __init55() {this.fillStyle = "#ffffff"}
-  __init56() {this.grid = []}
+  __init57() {this.fillStyle = "#ffffff"}
+  __init58() {this.grid = []}
   // Array of rows
-  __init57() {this.cols = 0}
-  __init58() {this.rows = 0}
+  __init59() {this.cols = 0}
+  __init60() {this.rows = 0}
   
   
   constructor(_atlas, fontSize = 10) {
-    super();_class4.prototype.__init55.call(this);_class4.prototype.__init56.call(this);_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);;
+    super();_class4.prototype.__init57.call(this);_class4.prototype.__init58.call(this);_class4.prototype.__init59.call(this);_class4.prototype.__init60.call(this);;
     this.fontSize = fontSize;
     this.charWidth = fontSize * 1;
     this.charHeight = fontSize * 1.1;
@@ -1792,7 +1904,7 @@ var GridTextEntity = (_class4 = class extends _chunk4BO5XBJLjs.Entity {
   updateGrid(ascii) {
     this.grid = ascii;
     this.rows = ascii.length;
-    this.cols = _optionalChain([ascii, 'access', _68 => _68[0], 'optionalAccess', _69 => _69.length]) || 0;
+    this.cols = _optionalChain([ascii, 'access', _72 => _72[0], 'optionalAccess', _73 => _73.length]) || 0;
   }
   isPointInside(_globalX, _globalY) {
     return false;
@@ -1867,7 +1979,7 @@ function distSqToSegment(px, py, x1, y1, x2, y2) {
   const ey = py - cy;
   return ex * ex + ey * ey;
 }
-var SplineEntity = (_class5 = class extends _chunk4BO5XBJLjs.Entity {
+var SplineEntity = (_class5 = class extends _chunkDWMQYHNCjs.Entity {
   
   
   
@@ -1875,23 +1987,23 @@ var SplineEntity = (_class5 = class extends _chunk4BO5XBJLjs.Entity {
   
   
   
-  __init59() {this.offscreen = null}
-  __init60() {this.baked = false}
+  __init61() {this.offscreen = null}
+  __init62() {this.baked = false}
   /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
-  __init61() {this.bakedWidth = 0}
-  __init62() {this.bakedHeight = 0}
+  __init63() {this.bakedWidth = 0}
+  __init64() {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. */
-  __init63() {this.polylines = null}
+  __init65() {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`.
    */
-  __init64() {this.showBounds = false}
+  __init66() {this.showBounds = false}
   constructor(doc, opts = {}) {
-    super();_class5.prototype.__init59.call(this);_class5.prototype.__init60.call(this);_class5.prototype.__init61.call(this);_class5.prototype.__init62.call(this);_class5.prototype.__init63.call(this);_class5.prototype.__init64.call(this);;
+    super();_class5.prototype.__init61.call(this);_class5.prototype.__init62.call(this);_class5.prototype.__init63.call(this);_class5.prototype.__init64.call(this);_class5.prototype.__init65.call(this);_class5.prototype.__init66.call(this);;
     this.doc = doc;
     this.lineWidth = _nullishCoalesce(opts.lineWidth, () => ( 2));
     this.cache = _nullishCoalesce(opts.cache, () => ( true));
@@ -1902,7 +2014,7 @@ var SplineEntity = (_class5 = class extends _chunk4BO5XBJLjs.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', _70 => _70.doc, 'access', _71 => _71.equations, 'optionalAccess', _72 => _72.some, 'call', _73 => _73((eq) => isGradient(eq.color_rgb))]), () => ( false))) || (_nullishCoalesce(_optionalChain([this, 'access', _74 => _74.doc, 'access', _75 => _75.paths, 'optionalAccess', _76 => _76.some, 'call', _77 => _77((p) => isGradient(p.color_rgb))]), () => ( false)));
+    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.interactive = true;
   }
   computeBounds() {
@@ -2144,9 +2256,9 @@ async function loadSpline(url) {
 // src/math/SpatialHashGrid.ts
 var SpatialHashGrid = (_class6 = class {
   
-  __init65() {this.grid = /* @__PURE__ */ new Map()}
-  __init66() {this.entityCells = /* @__PURE__ */ new Map()}
-  constructor(cellSize = 64) {;_class6.prototype.__init65.call(this);_class6.prototype.__init66.call(this);
+  __init67() {this.grid = /* @__PURE__ */ new Map()}
+  __init68() {this.entityCells = /* @__PURE__ */ new Map()}
+  constructor(cellSize = 64) {;_class6.prototype.__init67.call(this);_class6.prototype.__init68.call(this);
     this.cellSize = cellSize;
   }
   hash(cx, cy) {
@@ -2200,7 +2312,7 @@ var SpatialHashGrid = (_class6 = class {
     const keys = this.entityCells.get(id);
     if (!keys) return;
     for (const key of keys) {
-      _optionalChain([this, 'access', _78 => _78.grid, 'access', _79 => _79.get, 'call', _80 => _80(key), 'optionalAccess', _81 => _81.delete, 'call', _82 => _82(id)]);
+      _optionalChain([this, 'access', _82 => _82.grid, 'access', _83 => _83.get, 'call', _84 => _84(key), 'optionalAccess', _85 => _85.delete, 'call', _86 => _86(id)]);
     }
     this.entityCells.delete(id);
   }
@@ -2236,20 +2348,20 @@ var SpatialHashGrid = (_class6 = class {
 }, _class6);
 
 // src/tree/DOMPortalEntity.ts
-var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
+var DOMPortalEntity = (_class7 = class extends _chunkDWMQYHNCjs.Entity {
   
-  __init67() {this.isDOMPortal = true}
-  __init68() {this.domListeners = []}
-  __init69() {this.resizeObserver = null}
-  __init70() {this.cachedWidth = 100}
-  __init71() {this.cachedHeight = 100}
-  __init72() {this.lastWidth = ""}
-  __init73() {this.lastHeight = ""}
-  __init74() {this.lastTransform = ""}
-  __init75() {this.lastZIndex = ""}
-  __init76() {this.lastOpacity = ""}
+  __init69() {this.isDOMPortal = true}
+  __init70() {this.domListeners = []}
+  __init71() {this.resizeObserver = null}
+  __init72() {this.cachedWidth = 100}
+  __init73() {this.cachedHeight = 100}
+  __init74() {this.lastWidth = ""}
+  __init75() {this.lastHeight = ""}
+  __init76() {this.lastTransform = ""}
+  __init77() {this.lastZIndex = ""}
+  __init78() {this.lastOpacity = ""}
   constructor(domElement, width, height, id) {
-    super(id);_class7.prototype.__init67.call(this);_class7.prototype.__init68.call(this);_class7.prototype.__init69.call(this);_class7.prototype.__init70.call(this);_class7.prototype.__init71.call(this);_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);;
+    super(id);_class7.prototype.__init69.call(this);_class7.prototype.__init70.call(this);_class7.prototype.__init71.call(this);_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);;
     this.domElement = domElement;
     this.width = _nullishCoalesce(width, () => ( 0));
     this.height = _nullishCoalesce(height, () => ( 0));
@@ -2271,7 +2383,7 @@ var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
       const events = ["click", "pointerdown", "pointerup", "pointermove", "wheel"];
       for (const type of events) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(type, this, e));
+          this.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)(type, this, e));
         };
         this.domElement.addEventListener(type, handler);
         this.domListeners.push({ type, handler, capture: false });
@@ -2282,7 +2394,7 @@ var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
       ];
       for (const { native, vecto } of hoverEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(vecto, this, e, false));
+          this.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)(vecto, this, e, false));
         };
         this.domElement.addEventListener(native, handler);
         this.domListeners.push({ type: native, handler, capture: false });
@@ -2290,7 +2402,7 @@ var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
       const focusEvents = ["focus", "blur"];
       for (const type of focusEvents) {
         const handler = (e) => {
-          this.dispatchEvent(new (0, _chunk4BO5XBJLjs.VectoJSEvent)(type, this, e, true));
+          this.dispatchEvent(new (0, _chunkDWMQYHNCjs.VectoJSEvent)(type, this, e, true));
         };
         this.domElement.addEventListener(type, handler, true);
         this.domListeners.push({ type, handler, capture: true });
@@ -2329,8 +2441,8 @@ var DOMPortalEntity = (_class7 = class extends _chunk4BO5XBJLjs.Entity {
 }, _class7);
 
 // src/index.ts
-Scene.registerWebGLPointRendererCreator(_chunkGADBN53Zjs.createWebGLPointRenderer);
-Scene.registerWebGPUParticleSystemManager(_chunkGADBN53Zjs.WebGPUParticleSystemManager);
+Scene.registerWebGLPointRendererCreator(_chunkGTQRCY6Wjs.createWebGLPointRenderer);
+Scene.registerWebGPUParticleSystemManager(_chunkGTQRCY6Wjs.WebGPUParticleSystemManager);
 
 
 
@@ -2375,4 +2487,4 @@ Scene.registerWebGPUParticleSystemManager(_chunkGADBN53Zjs.WebGPUParticleSystemM
 
 
 
-exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkGADBN53Zjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunk4BO5XBJLjs.Easing; exports.Entity = _chunk4BO5XBJLjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkBWLNEJJWjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBWLNEJJWjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunk4BO5XBJLjs.MSDFFont; exports.MSDFTextEntity = _chunk4BO5XBJLjs.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 = _chunk4BO5XBJLjs.SVGEntity; exports.SVGRenderer = _chunkGADBN53Zjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunk4BO5XBJLjs.SpringDriver; exports.SpringPhysics = _chunk4BO5XBJLjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunk4BO5XBJLjs.TweenDriver; exports.VectoJSEvent = _chunk4BO5XBJLjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkGADBN53Zjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkBWLNEJJWjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkGADBN53Zjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkGADBN53Zjs.isSafeUrl; exports.isTweenConfig = _chunk4BO5XBJLjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkGADBN53Zjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkGADBN53Zjs.sanitizeUrl;
+exports.ArabicShaper = _chunkCTZQOM5Zjs.ArabicShaper; exports.BidiResolver = _chunkCTZQOM5Zjs.BidiResolver; exports.CanvasRenderer = _chunkGTQRCY6Wjs.CanvasRenderer; exports.ComputeParticleEntity = ComputeParticleEntity; exports.DOMPortalEntity = DOMPortalEntity; exports.Easing = _chunkDWMQYHNCjs.Easing; exports.Entity = _chunkDWMQYHNCjs.Entity; exports.GridTextEntity = GridTextEntity; exports.LayoutEngine = _chunkBWLNEJJWjs.LayoutEngine; exports.LayoutResultBuffer = _chunkBWLNEJJWjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkCTZQOM5Zjs.LayoutWorkerManager; exports.MSDFFont = _chunkDWMQYHNCjs.MSDFFont; exports.MSDFTextEntity = _chunkDWMQYHNCjs.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 = _chunkDWMQYHNCjs.SVGEntity; exports.SVGRenderer = _chunkGTQRCY6Wjs.SVGRenderer; exports.Scene = Scene; exports.SpatialHashGrid = SpatialHashGrid; exports.SplineEntity = SplineEntity; exports.SpringDriver = _chunkDWMQYHNCjs.SpringDriver; exports.SpringPhysics = _chunkDWMQYHNCjs.SpringPhysics; exports.TextEntity = TextEntity; exports.TweenDriver = _chunkDWMQYHNCjs.TweenDriver; exports.VectoJSEvent = _chunkDWMQYHNCjs.VectoJSEvent; exports.WebGPUParticleSystemManager = _chunkGTQRCY6Wjs.WebGPUParticleSystemManager; exports.computeLineSegments = _chunkBWLNEJJWjs.computeLineSegments; exports.createCanvasMeasurer = _chunkBWLNEJJWjs.createCanvasMeasurer; exports.createWebGLPointRenderer = _chunkGTQRCY6Wjs.createWebGLPointRenderer; exports.isSafeUrl = _chunkGTQRCY6Wjs.isSafeUrl; exports.isTweenConfig = _chunkDWMQYHNCjs.isTweenConfig; exports.loadSpline = loadSpline; exports.parseColorToRGBA = _chunkGTQRCY6Wjs.parseColorToRGBA; exports.polySegmentToBezier = polySegmentToBezier; exports.sanitizeUrl = _chunkGTQRCY6Wjs.sanitizeUrl;

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   isSafeUrl,
   parseColorToRGBA,
   sanitizeUrl
-} from "./chunk-PK5EYWIT.mjs";
+} from "./chunk-HVJHXIKW.mjs";
 import {
   Easing,
   Entity,
@@ -24,7 +24,7 @@ import {
   TweenDriver,
   VectoJSEvent,
   isTweenConfig
-} from "./chunk-SL654OMF.mjs";
+} from "./chunk-YVN3PJRC.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,9 @@ 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;
   resizeHandler;
   focusedA11yElement = null;
   caretBlinkTimer = null;
@@ -398,8 +406,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 +421,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 +575,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 +626,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();
@@ -972,11 +990,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;
@@ -1191,10 +1294,11 @@ var Scene = class _Scene {
     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 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();
@@ -1699,6 +1803,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.

package/dist/renderer.js

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

package/dist/renderer.mjs

@@ -4,7 +4,7 @@ import {
   WebGPUParticleSystemManager,
   createWebGLPointRenderer,
   parseColorToRGBA
-} from "./chunk-PK5EYWIT.mjs";
+} from "./chunk-HVJHXIKW.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 _chunkDWMQYHNCjs = require('./chunk-DWMQYHNC.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 = _chunkDWMQYHNCjs.MSDFFont; exports.MSDFTextEntity = _chunkDWMQYHNCjs.MSDFTextEntity; exports.SVGEntity = _chunkDWMQYHNCjs.SVGEntity;

package/dist/text.mjs

@@ -2,7 +2,7 @@ import {
   MSDFFont,
   MSDFTextEntity,
   SVGEntity
-} from "./chunk-SL654OMF.mjs";
+} from "./chunk-YVN3PJRC.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,9 @@ 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 resizeHandler;
     private focusedA11yElement;
     private caretBlinkTimer;
@@ -269,6 +280,14 @@ export declare class Scene {
     /** 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.7",
   "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"
   }
 }