@glissade/backend-dom 0.22.0-pre.3 → 0.22.0-pre.5

package/README.md

@@ -108,11 +108,17 @@ base bundle is absent or a different version (never a cryptic `undefined`).
 
 ### Documented divergences (preview/non-parity)
 
-- **Text line-breaking** is the browser's layout engine, **not** the canvas/Skia
-  rasterizer — so line breaks can differ from `gs render`. Intended.
 - **Text line-breaking** uses the browser's layout engine, so it can differ from
-  the canvas/Skia rasterizer; the measuring span is mounted in the live document
-  so wrapping reflects the real font (a detached host would measure 0).
+  the canvas/Skia rasterizer (intended). The measuring span is mounted in the live
+  document so wrapping reflects the real font (a detached host would measure 0).
+  **Web fonts load async**, so text first measured before its font loads wraps on
+  the fallback estimate. Pass **`onReflow`** and re-render in it — the backend
+  fires it when `document.fonts` becomes ready (and on later `@font-face` batches),
+  so the host re-evaluates and text re-wraps with the loaded font:
+
+  ```js
+  const backend = new DomBackend(stage, { onReflow: () => frame(currentTime) });
+  ```
 - **`measureText`** measures `width` via a hidden DOM element (matching what this
   backend draws). `ascent`/`descent` are **estimates** (`0.8`/`0.2 × fontSize`),
   not real font metrics — fine for layout composition, not for exact vertical

package/dist/index.d.ts

@@ -2,7 +2,18 @@ import { BackendCaps, DisplayList, FontSpec, RenderBackend, TextMetricsLite, Vid
 import { NodeIdStream } from "@glissade/scene/identity";
 
 //#region src/index.d.ts
-
+/** Construction options for {@link DomBackend}. */
+interface DomBackendOptions {
+  /**
+   * Called when web fonts finish loading (and on later lazy `@font-face`
+   * batches). **Re-render in this callback** so text re-wraps with the loaded
+   * fonts — wrapping is computed upstream in the scene from this backend's
+   * `measureText`, so a caption measured before its font loaded can render
+   * unwrapped at first paint. Typically `() => drive(currentTime)` in a host's
+   * draw loop. No-op where `document.fonts` is absent (e.g. jsdom).
+   */
+  onReflow?: () => void;
+}
 /**
  * A DOM/SVG `RenderBackend`. Construct with a host element (renders into it) or a
  * bare `Document` (builds a detached `root` you read off `backend.root`). Each
@@ -13,7 +24,7 @@ import { NodeIdStream } from "@glissade/scene/identity";
 declare class DomBackend implements RenderBackend {
   #private;
   readonly root: HTMLElement;
-  constructor(target: HTMLElement | Document);
+  constructor(target: HTMLElement | Document, opts?: DomBackendOptions);
   readonly caps: BackendCaps;
   /** Supply the out-of-band id stream (S1 `emitWithIds().ids`) the next
    * `render()` stamps as `data-node-id`. Positional by command index. */
@@ -26,4 +37,4 @@ declare class DomBackend implements RenderBackend {
   dispose(): void;
 }
 //#endregion
-export { DomBackend };
+export { DomBackend, DomBackendOptions };

package/dist/index.js

@@ -157,13 +157,14 @@ var DomBackend = class {
 	#recon = /* @__PURE__ */ new WeakMap();
 	#owned = /* @__PURE__ */ new WeakMap();
 	#ids = [];
+	#onReflow;
 	#measureSpan = null;
 	#warnedMeasure = false;
 	#warnedMesh = false;
 	#warnedGradientInterp = false;
 	#warnedShader = false;
 	#warnedUnbalanced = false;
-	constructor(target) {
+	constructor(target, opts = {}) {
 		const isDoc = target.nodeType === 9;
 		this.#doc = isDoc ? target : target.ownerDocument ?? target;
 		this.#host = isDoc ? null : target;
@@ -172,6 +173,26 @@ var DomBackend = class {
 		this.root.style.position = "relative";
 		this.root.style.overflow = "hidden";
 		if (this.#host) this.#host.appendChild(this.root);
+		this.#onReflow = opts.onReflow;
+		this.#wireFontReflow();
+	}
+	/**
+	* When web fonts finish loading, fire `onReflow` so the HOST re-renders. Text
+	* wrapping is computed UPSTREAM in the scene (from this backend's `measureText`),
+	* so a caption measured before its font loaded wraps on the fallback-font
+	* estimate and can render unwrapped at first paint. The backend can't re-wrap
+	* alone — the line breaks already live in the DisplayList the scene produced —
+	* so per the passive-sink contract it SIGNALS, and the host re-evaluates with
+	* the now-loaded fonts. No-op when no `onReflow` is given or the environment
+	* has no `document.fonts` (e.g. jsdom).
+	*/
+	#wireFontReflow() {
+		const reflow = this.#onReflow;
+		if (!reflow) return;
+		const fonts = this.#doc.fonts;
+		if (!fonts) return;
+		fonts.ready?.then?.(() => reflow())?.catch?.(() => {});
+		fonts.addEventListener?.("loadingdone", () => reflow());
 	}
 	caps = {
 		filters: ALL_FILTER_KINDS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-dom",
-  "version": "0.22.0-pre.3",
+  "version": "0.22.0-pre.5",
   "description": "glissade DOM render backend: DisplayList -> HTML/SVG elements. A preview / non-parity realtime tier (accessibility, selectable text, CSS-native embedding) — NOT a Skia-export twin.",
   "license": "Apache-2.0",
   "engines": {
@@ -18,8 +18,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.22.0-pre.3",
-    "@glissade/scene": "0.22.0-pre.3"
+    "@glissade/core": "0.22.0-pre.5",
+    "@glissade/scene": "0.22.0-pre.5"
   },
   "repository": {
     "type": "git",