@vectojs/core 0.2.5 → 0.2.7

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

@@ -41,9 +41,9 @@ export interface SceneOptions {
     debugA11y?: boolean;
     /**
      * Cap the render loop to at most this many frames per second (power saving —
-     * e.g. a quieter fan in a library). `0` (default) means uncapped (native
-     * refresh rate). Continuous animations still run, just less often. Also
-     * settable later via {@link Scene.maxFPS}.
+     * e.g. a quieter fan in a library). `0` means uncapped (native refresh
+     * rate). Defaults to `60` (`0` under test runners). Continuous animations
+     * still run, just less often. Also settable later via {@link Scene.maxFPS}.
      */
     maxFPS?: number;
     /**
@@ -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;
@@ -177,6 +188,8 @@ export declare class Scene {
     private initializingWebGPU;
     private gpuCanvas;
     private gpuContext;
+    /** True while the GPU canvas holds a presented particle frame (needs clearing when they leave). */
+    private gpuHasContent;
     private mouseX;
     private mouseY;
     private pointerMoveListener;
@@ -267,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;
@@ -308,6 +329,8 @@ export declare class Scene {
      * Finds the topmost interactive entity at the given coordinates.
      */
     findEntityAt(x: number, y: number): Entity | null;
+    /** Submit one transparent clear pass when particle content lingers on the GPU canvas. */
+    private clearGPUCanvasIfStale;
     private initWebGPUContext;
     private setupDeviceLostHandler;
     private recreateWebGPUDeviceWithRetry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "0.2.5",
+  "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"
   }
 }