@openpresentation/opf-editor 0.10.0 → 0.10.1

package/README.md

@@ -2,7 +2,7 @@
 
 Unfinished prepared shaping work is preserved in the [September 15 roadmap](docs/roadmap-shaping-20260915.md); it is not part of the published runtime.
 
-Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
+Version 0.10.1 adds the opt-in font gate (`createFontGate`, FF-41) and keeps the 0.10.0 requirements; develop and test it against renderer 0.11.2 and PPTX 0.11.1. Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
 
 Version 0.8.0 required `@openpresentation/opf` ^0.11.0, renderer ^0.9.0, and PPTX ^0.9.0. Named ColorRefs (scheme slots, roles, and `var:<id>`) paint through the published renderer and hex-resolve on export. Payload ids share the slide id namespace for pagination and transfer. Native `schemeClr`, theme write, and `p:hf` remain out of scope.
 
@@ -74,6 +74,18 @@ await canvas.ready;
 
 Load the same font bytes into the browser using `loadBrowserFontRegistry` from `@openpresentation/opf-render/fonts-browser` before mounting. The host owns font URLs, storage and collaboration. For non-Latin documents, pass the pinned script pack's location as `scriptBaseUrl` and call `fonts.ensureScripts(document)` after edits (renderer with `scripts: 'auto'`, FF-19): only the faces for the scripts a document draws are fetched, once, hash-verified, for example Noto Sans JP for Japanese; a Latin-only document fetches none. The playground does this from `./script-fonts/`, which `npm run build:playground` fills with the pinned faces. `onDraft` provides live document drafts; the session only changes on commit. Escape cancels. Concurrent edits to the selected payload cancel a stale draft.
 
+Fonts load before pixels (FF-41). A document can need faces the browser registry has not loaded yet: script faces for the languages it draws and vendored preview faces for the font families it resolves (Intos for Aptos, Open Sans, Barlow). Pass a font gate as `fonts` and the canvas never renders such a document early: on every path (editor changes, undo and redo, imports, dimension switches, slide changes, in-progress edits) it shows "Loading fonts…", loads the faces and then renders. A load that fails is reported through `onFonts`/`onError` and offers a retry button; nothing retries by itself, and the failed document is not drawn.
+
+```js
+import { createCanvasEditor, createFontGate } from '@openpresentation/opf-editor/canvas';
+
+const fonts = createFontGate(fontRegistry); // a registry without the lazy loaders gates nothing
+const canvas = createCanvasEditor(container, { document, fonts, renderOptions: { textMeasurement: fontRegistry.textMeasurement } });
+// Other renders of your own: fonts.run(document, { ready: draw, failed: showError, loading: showSpinner })
+```
+
+Note that `session.composeSlide()` and `session.paginateSlide()` measure with the plain `textMeasurement` you pass, which is strict: for a document with a script the design font lacks (Japanese under Aptos) pass `createScriptTextMeasurement(fontRegistry.textMeasurement, resolveScriptFonts(document, { slideIndex }))` from `@openpresentation/opf-render/fonts`, as `renderSvg` does internally.
+
 These APIs were introduced in 0.1.0. Version 0.7.0 requires core 0.10.0 and renderer 0.8.0 for the canvas, including shared accepted geometry, styled/merged cells, rich table values, headers and content-aware row heights. See the OPF repository’s `docs/live-editor.md` for setup, the support matrix and roadmap. `pnpm pack:ecosystem` in that repository also prepares local preview tarballs for coordinated development.
 
 The canvas retains canonical SVG glyphs while a transparent native input supplies the caret. Advanced shaping, freeform object positioning, all chart/media treatments, and cross-engine pixel identity remain work in progress. The Source dialog in the playground now provides a live JSON preview; changes are validated before committing.
@@ -247,7 +259,7 @@ Public npm package publication is handled by `.github/workflows/release.yml` thr
 
 The current checkout uses `@openpresentation/opf/composition` for portable geometry. Slides can select `auto`, `row`, `column`, or `grid`, set weighted tracks, and request path-specific overflow diagnostics. See the sibling OPF repo's `docs/dynamic-composition.md` for the complete contract.
 
-Version 0.10.0 requires `@openpresentation/opf@^0.11.2`. The optional renderer peer requires `@openpresentation/opf-render@^0.11.0`. Coordinated playground export uses `@openpresentation/opf-pptx@^0.11.0`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
+Version 0.10.1 requires `@openpresentation/opf@^0.11.2`. The optional renderer peer requires `@openpresentation/opf-render@^0.11.0` (the font gate gates nothing on a registry without the lazy loaders). Development and coordinated playground export use renderer 0.11.2 and `@openpresentation/opf-pptx@^0.11.1`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
 
 ## Local interactive demo
 

package/dist/canvas.d.ts

@@ -1,6 +1,35 @@
 import type { EditorSession } from "./index.js";
 import type { RenderSvgOptions } from "@openpresentation/opf-render";
 import type { SlideComposition } from "@openpresentation/opf/composition";
+/** Faces a document needs (script packages and vendored files) that are not loaded yet, and the way to load them. */
+export interface FontGate {
+  /** Synchronous. Empty means the document can render now. Never throws. */
+  pending(document: unknown): string[];
+  /** Load every pending face (vendored faces first, then script faces). Rejects with a `fonts-unavailable` error; never retries by itself. */
+  ensure(document: unknown, options?: { signal?: AbortSignal }): Promise<void>;
+  /** `whenFontsReady` on this gate. */
+  run(document: unknown, handlers?: FontGateHandlers): Promise<void>;
+}
+export interface FontGateHandlers {
+  /** Return false once the document was superseded; the late result is then dropped. */
+  isCurrent?: () => boolean;
+  loading?: (pending: string[]) => void;
+  ready?: () => void;
+  failed?: (error: Error) => void;
+}
+export declare const FONTS_PENDING: "fonts-pending";
+export declare const FONTS_UNAVAILABLE: "fonts-unavailable";
+/** Wrap a browser font registry (`loadBrowserFontRegistry`). Registries without the lazy loaders gate nothing. */
+export declare function createFontGate(registry: object): FontGate;
+/**
+ * Ensure fonts for a document, then run `ready` (synchronously when nothing is pending). The one
+ * "ensure fonts, then render" helper: load failures and exceptions from `ready` go to `failed`.
+ */
+export declare function whenFontsReady(
+  gate: Pick<FontGate, "pending" | "ensure"> | undefined,
+  document: unknown,
+  handlers?: FontGateHandlers,
+): Promise<void>;
 export interface CanvasEditorOptions {
   editor?: EditorSession;
   document?: unknown;
@@ -8,6 +37,12 @@ export interface CanvasEditorOptions {
   /** Show keyboard-accessible dividers for resizing composition tracks. */
   layoutEditing?: boolean;
   renderOptions?: RenderSvgOptions;
+  /**
+   * A font gate (`createFontGate(registry)`). With one, the canvas never renders a document whose faces are still
+   * loading: it shows "Loading fonts…", loads them and then renders, on every path (editor changes, undo/redo,
+   * imports, dimension switches, slide changes, drafts). Without one every document renders at once.
+   */
+  fonts?: Pick<FontGate, "pending" | "ensure">;
   /** Optional empty host for property forms; defaults to a floating canvas panel. */
   propertiesContainer?: HTMLElement;
   onSelect?: (selection: {
@@ -24,6 +59,8 @@ export interface CanvasEditorOptions {
   onCommit?: (event: { path: string; editor: EditorSession }) => void;
   onCancel?: (event: { path?: string }) => void;
   onError?: (error: Error) => void;
+  /** Font loading progress of the canvas: `loading`, `error` (a face could not be loaded; the canvas offers a retry) and `ready`. */
+  onFonts?: (event: { state: "loading"; pending: string[] } | { state: "error"; error: Error } | { state: "ready" }) => void;
   onRender?: (event: {
     document: unknown;
     slideIndex: number;

package/dist/canvas.js

@@ -19,7 +19,9 @@ import { createBlockControls } from "./block-controls.js";
 import { createLayoutHandles } from "./layout-handles.js";
 import { createRichTextInput } from "./rich-text-input.js";
 import { createRichTextToolbar } from "./rich-text-toolbar.js";
+import { FONTS_PENDING, fontsPendingError, whenFontsReady } from "./font-gate.js";
 export { getEditableFields } from "./canvas-fields.js";
+export { createFontGate, whenFontsReady, FONTS_PENDING, FONTS_UNAVAILABLE } from "./font-gate.js";
 
 /** Allocated placeholder or internal-part bounds for the selection outline, not glyph ink. */
 export function allocatedSelectionBox(node, item) {
@@ -62,8 +64,13 @@ export function createCanvasEditor(container, options = {}) {
   const editor =
     options.editor ??
     createEditorSession(options.document, { rejectInvalid: true });
+  // `options.fonts` is a font gate (createFontGate): a document whose faces are not loaded yet is never rendered. The canvas
+  // loads them first and shows "Loading fonts…" meanwhile; without a gate every document renders at once, as before.
+  const fonts = options.fonts;
   let slideIndex = options.slideIndex ?? 0,
     renderOptions = options.renderOptions ?? {},
+    showToken = 0,
+    fontsShown = false,
     active = null,
     selectedPath = null,
     disposed = false,
@@ -100,12 +107,12 @@ export function createCanvasEditor(container, options = {}) {
     onTyping: beginEdit,
     onProperties(path) { if (commit()) openProperties(path, editor.get(path)); },
     validateChange(path, value) {
-      renderSvg(createCanvasDraft(editor.document, path, value), {...renderOptions, slideIndex});
+      validateRender(createCanvasDraft(editor.document, path, value));
     },
     onChange(path) { clearNotice(); options.onCommit?.({path, editor}); }
   });
   const layoutHandles = createLayoutHandles(root, {
-    editor, enabled: options.layoutEditing, render, beforeEdit: commit,
+    editor, enabled: options.layoutEditing, render: renderFor, beforeEdit: commit,
     isTextEditing: () => !!active,
     clearError: clearNotice, onError: report,
     onDraft: value => options.onDraft?.(value),
@@ -113,9 +120,9 @@ export function createCanvasEditor(container, options = {}) {
     onCancel: value => { clearNotice(); options.onCancel?.(value); },
   });
   const blockControls = createBlockControls(root, {
-    editor, render, beforeEdit: () => {if(!commit())return false;richToolbar.hide();return true;}, enabled: () => layoutHandles.enabled,
+    editor, render: renderFor, beforeEdit: () => {if(!commit())return false;richToolbar.hide();return true;}, enabled: () => layoutHandles.enabled,
     isEditing: () => !!active || !!layoutHandles.editingPath, slideIndex: () => slideIndex,
-    validate: document => renderSvg(document, {...renderOptions, slideIndex}),
+    validate: document => validateRender(document),
     clearError: clearNotice, onError: report,
     onMove: path => choose(splitOpfPath(path).join(".")),
     onCommit: value => options.onCommit?.(value),
@@ -142,8 +149,75 @@ export function createCanvasEditor(container, options = {}) {
       editor,
     });
   }
+  const pendingMessage = "Loading fonts for this document…";
+  // A synchronous render or validation of a document whose faces are still loading fails with a clear "fonts-pending"
+  // error and starts the load, so the next attempt succeeds. It never draws glyphs the registry cannot provide.
+  function requireFonts(document) {
+    const pending = fonts?.pending(document) ?? [];
+    if (!pending.length) return;
+    notice.hidden = false;
+    notice.textContent = pendingMessage;
+    fonts.ensure(document).then(
+      () => { if (!disposed && notice.textContent === pendingMessage) clearNotice(); },
+      (error) => { if (!disposed) report(error); },
+    );
+    throw fontsPendingError(pending);
+  }
+  function validateRender(document) {
+    requireFonts(document);
+    return renderSvg(document, {...renderOptions, slideIndex});
+  }
+  function fontsState(kind, detail) {
+    fontsShown = true;
+    const size = preview.firstElementChild?.getBoundingClientRect?.().height || 0;
+    layoutHandles.hide();
+    blockControls.hide();
+    richToolbar.hide();
+    const box = doc.createElement("div");
+    box.className = "opf-canvas-fonts";
+    box.setAttribute("role", kind === "error" ? "alert" : "status");
+    box.style.cssText = `box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:${Math.max(160, Math.round(size))}px;padding:16px;text-align:center;font:14px/1.4 system-ui;background:rgba(127,127,127,.12);border-radius:4px`;
+    const message = doc.createElement("span");
+    message.textContent = kind === "error" ? detail.message : "Loading fonts…";
+    box.append(message);
+    if (kind === "error") {
+      const retry = doc.createElement("button");
+      retry.type = "button";
+      retry.textContent = "Retry loading fonts";
+      retry.addEventListener("click", () => show());
+      box.append(retry);
+    }
+    preview.replaceChildren(box);
+    if (kind === "error") options.onError?.(detail);
+    options.onFonts?.(kind === "error" ? { state: "error", error: detail } : { state: "loading", pending: detail });
+  }
+  // Render a document the canvas did not draw itself (an editor change, a slide or option change) once its fonts are loaded.
+  function show(target) {
+    if (disposed) return;
+    const token = ++showToken;
+    return whenFontsReady(fonts, target ?? editor.document, {
+      isCurrent: () => !disposed && token === showToken,
+      loading: (pending) => fontsState("loading", pending),
+      ready: () => {
+        try {
+          render(target);
+        } catch (error) {
+          if (error?.code === FONTS_PENDING) show(target);
+          else report(error);
+        }
+      },
+      failed: (error) => fontsState("error", error),
+    });
+  }
+  // Renders now when the document's fonts are loaded (errors throw to the caller), otherwise after loading them.
+  function renderFor(document) {
+    if (fonts?.pending(document ?? editor.document).length) show(document);
+    else render(document);
+  }
   function render(document = editor.document) {
     if (disposed) return;
+    requireFonts(document);
+    showToken++;
     const slides = document.slides ?? [];
     slideIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
     const svgText = renderSvg(document, {
@@ -233,6 +307,10 @@ export function createCanvasEditor(container, options = {}) {
     blockControls.update(document, geometry);
     if (active?.kind === "text") positionInput();
     if (active?.kind === "rich-text") active.rich?.update();
+    if (fontsShown) {
+      fontsShown = false;
+      options.onFonts?.({ state: "ready" });
+    }
     options.onRender?.({
       document,
       slideIndex,
@@ -241,6 +319,22 @@ export function createCanvasEditor(container, options = {}) {
       draft: !!active || !!layoutHandles.editingPath,
     });
   }
+  // An in-progress edit whose text needs faces that are not loaded yet waits for them, then draws again.
+  function deferDraft(draft) {
+    if (!fonts?.pending(draft).length) return false;
+    active.valid = false;
+    notice.hidden = false;
+    notice.textContent = pendingMessage;
+    fonts.ensure(draft).then(
+      () => {
+        if (disposed) return;
+        if (notice.textContent === pendingMessage) clearNotice();
+        if (active) queueDraft();
+      },
+      (error) => { if (!disposed) report(error); },
+    );
+    return true;
+  }
   function queueDraft() {
     if (frame) win.cancelAnimationFrame(frame);
     frame = win.requestAnimationFrame(() => {
@@ -249,6 +343,7 @@ export function createCanvasEditor(container, options = {}) {
       if (active.kind === "properties") {
         try {
           const draft = propertyDraft(active);
+          if (deferDraft(draft)) return;
           clearNotice();
           render(draft);
           options.onDraft?.({
@@ -264,6 +359,7 @@ export function createCanvasEditor(container, options = {}) {
       try {
         const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type, active.originalValue);
         const draft = createCanvasDraft(editor.document, active.path, value);
+        if (deferDraft(draft)) return;
         clearNotice();
         active.valid = true;
         active.draft = draft;
@@ -659,7 +755,7 @@ export function createCanvasEditor(container, options = {}) {
         value = parseCanvasValue(edit.input.value, edit.type, edit.originalValue);
       else value = propertyDraft(edit);
       if (edit.kind === "text" || edit.kind === "rich-text")
-        renderSvg(createCanvasDraft(editor.document, edit.path, value), {...renderOptions,slideIndex});
+        validateRender(createCanvasDraft(editor.document, edit.path, value));
       committing = true;
       if ((edit.kind === "text" || edit.kind === "rich-text") && JSON.stringify(value) !== edit.base)
         editor.set(edit.path, value, { source: "canvas", rejectInvalid: true });
@@ -725,11 +821,7 @@ export function createCanvasEditor(container, options = {}) {
       queueDraft();
       return;
     }
-    try {
-      render();
-    } catch (error) {
-      report(error);
-    }
+    show();
   });
   const resize = new win.ResizeObserver(() => {
     if (active?.kind === "text") positionInput();
@@ -748,7 +840,7 @@ export function createCanvasEditor(container, options = {}) {
     }
   });
   try {
-    render();
+    renderFor();
   } catch (error) {
     unsubscribe();
     resize.disconnect();
@@ -759,7 +851,7 @@ export function createCanvasEditor(container, options = {}) {
     throw error;
   }
   const ready = Promise.resolve(doc.fonts?.ready).then(() => {
-    if (!disposed && !active) render();
+    if (!disposed && !active) show();
   });
   return {
     editor,
@@ -795,21 +887,21 @@ export function createCanvasEditor(container, options = {}) {
       if (!Number.isInteger(index) || !editor.document.slides?.[index])
         throw new RangeError("Slide index is out of range.");
       if (index === slideIndex) {
-        if (!active) render();
+        if (!active) renderFor();
         return true;
       }
       if (!commit()) return false;
       richToolbar.hide();
       slideIndex = index;
       selectedPath = null;
-      render();
+      renderFor();
       return true;
     },
     setRenderOptions(next) {
       if (!commit()) return false;
       richToolbar.hide();
       renderOptions = next;
-      render();
+      renderFor();
       return true;
     },
     destroy() {

package/dist/font-gate.js

@@ -0,0 +1,107 @@
+// Fonts before pixels. A document can need faces the browser font registry has not loaded yet: script faces for the
+// languages it draws (Japanese, Arabic, ...) and vendored preview faces for the font families it resolves (Intos for
+// Aptos, Open Sans, Barlow, ...). The renderer cannot draw such a document until those faces are loaded (a deck that
+// sets Aptos and contains Japanese fails with "Intos Display cannot display U+65E5"), so nothing may render or measure
+// a new document before `ensure` resolves. This module is the one gate every document-replacing path goes through.
+
+/** Error code of a document whose required faces are still loading. */
+export const FONTS_PENDING = "fonts-pending";
+/** Error code of a document whose required faces could not be loaded. */
+export const FONTS_UNAVAILABLE = "fonts-unavailable";
+
+// A load that cannot finish (a face the registry never reports as loaded) stops after this many rounds.
+const MAX_ROUNDS = 4;
+
+/**
+ * Wrap a browser font registry (`loadBrowserFontRegistry` from `@openpresentation/opf-render/fonts-browser`).
+ * Registries without the lazy loaders (renderer 0.10.0 and older) gate nothing and keep the fonts they have.
+ *
+ * - `pending(document)` lists the faces (script packages and vendored files) the document needs that are not loaded.
+ *   Synchronous; empty means the document can render now. Never throws: a document the renderer rejects for other
+ *   reasons reports nothing pending and fails with its own validation message when rendered.
+ * - `ensure(document, { signal })` loads vendored faces first (script fallback depends on them), then script faces,
+ *   and repeats until nothing is pending. It makes a bounded number of rounds and rejects with a `fonts-unavailable`
+ *   error (the registry's error is its `cause`); it never retries by itself, a later call is a new attempt.
+ * - `run(document, handlers)` is `whenFontsReady` on this gate.
+ */
+export function createFontGate(registry) {
+  const pending = (document) => {
+    try {
+      const scripts = registry?.pendingScripts?.(document) ?? [];
+      const lazy = (registry?.pendingLazyFonts?.(document) ?? []).map((face) => face?.file ?? String(face));
+      return [...lazy, ...scripts];
+    } catch {
+      return [];
+    }
+  };
+  const gate = {
+    pending,
+    async ensure(document, options = {}) {
+      const { signal } = options;
+      try {
+        for (let round = 0; round < MAX_ROUNDS && pending(document).length; round++) {
+          signal?.throwIfAborted?.();
+          await registry.ensureLazyFonts?.(document, { signal });
+          await registry.ensureScripts?.(document, { signal });
+        }
+      } catch (cause) {
+        if (signal?.aborted) throw cause;
+        throw fontsUnavailable(cause?.message ?? String(cause), cause);
+      }
+      const left = pending(document);
+      if (left.length) throw fontsUnavailable(`${left.join(", ")} did not finish loading.`);
+    },
+  };
+  gate.run = (document, handlers) => whenFontsReady(gate, document, handlers);
+  return gate;
+}
+
+function fontsUnavailable(message, cause) {
+  const error = new Error(`Fonts for this document could not be loaded: ${message}`, cause ? { cause } : undefined);
+  error.code = FONTS_UNAVAILABLE;
+  return error;
+}
+
+/** The error a synchronous render raises when it is asked to draw a document whose faces are pending. */
+export function fontsPendingError(pending) {
+  const error = new Error("Loading fonts for this document…");
+  error.code = FONTS_PENDING;
+  error.pending = pending;
+  return error;
+}
+
+/**
+ * Ensure fonts for a document, then run `ready`: the one "ensure fonts, then render" helper.
+ * With nothing pending, `ready` runs synchronously, so documents in already-loaded fonts render at once. Otherwise
+ * `loading(pending)` runs, the faces load and `ready` runs after them. `isCurrent()` is checked after the wait, so a
+ * result for a superseded document is dropped. A load failure, and an exception thrown by `ready`, go to `failed(error)`
+ * (they are rethrown when there is no `failed`). `gate` is any object with `pending(document)` and `ensure(document)`;
+ * without one the document is treated as ready. Resolves once `ready` or `failed` has run.
+ */
+export function whenFontsReady(gate, document, { isCurrent = () => true, loading, ready, failed } = {}) {
+  const finish = () => {
+    try {
+      ready?.();
+    } catch (error) {
+      if (!failed) throw error;
+      failed(error);
+    }
+  };
+  const left = gate?.pending?.(document) ?? [];
+  if (!left.length) {
+    finish();
+    return Promise.resolve();
+  }
+  loading?.(left);
+  return Promise.resolve(gate.ensure(document)).then(
+    () => {
+      if (isCurrent()) finish();
+    },
+    (error) => {
+      if (isCurrent()) {
+        if (!failed) throw error;
+        failed(error);
+      }
+    },
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -87,15 +87,15 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs",
-    "test": "npm run build && npm run check:font-hotlinks && node test/accepted-text.mjs && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/gallery-font-roles.mjs && node test/default-font-scheme.mjs && node test/presentation-ids.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs && node test/json-source.mjs && node test/json-options.mjs && node test/switches.mjs && node test/switches-export.mjs && node test/placeholder-selection.mjs && node test/exact-source.mjs",
+    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs && node --check src/font-gate.js && node --check test/font-gate.mjs && node --check test/playground-ensure-fonts.mjs && node --check test/canvas-fonts-browser.mjs",
+    "test": "npm run build && npm run check:font-hotlinks && node test/accepted-text.mjs && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/gallery-font-roles.mjs && node test/default-font-scheme.mjs && node test/presentation-ids.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs && node test/json-source.mjs && node test/json-options.mjs && node test/switches.mjs && node test/switches-export.mjs && node test/placeholder-selection.mjs && node test/exact-source.mjs && node test/font-gate.mjs",
     "validate": "node scripts/validate-package.mjs",
     "test:packed": "node test/packed-install.mjs",
     "prepack": "npm run build",
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "check:font-hotlinks:built": "node scripts/check-font-hotlinks.mjs --built dist artifacts/playground",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-source.mjs",
+    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-source.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
     "test:metric-browser": "node test/metric-browser.mjs",
@@ -156,8 +156,8 @@
     "@expo-google-fonts/noto-sans-thai": "0.4.2",
     "@expo-google-fonts/noto-serif-hebrew": "0.4.2",
     "@expo-google-fonts/noto-serif-tibetan": "0.4.2",
-    "@openpresentation/opf-pptx": "^0.11.0",
-    "@openpresentation/opf-render": "^0.11.0",
+    "@openpresentation/opf-pptx": "^0.11.1",
+    "@openpresentation/opf-render": "^0.11.2",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }