@openpresentation/opf-render 0.13.1 → 0.14.0

package/dist/deck-runtime.js

@@ -1,8 +1,8 @@
 // RR-28: the part of the slideshow player and the <opf-deck> element that has no DOM of its own. It reads an OPF document,
-// decides which slides play (hidden ones do not), renders each slide once with the renderer's own SVG output (renderSvg:
+// decides which slides play (hidden ones do not), renders each slide once with the renderer's own SVG output (renderSlideSvg:
 // there is no second layout engine) behind a face-level font gate, and synchronizes windows over a BroadcastChannel.
 // Nothing here fetches anything but the font files the host's font root serves.
-import { renderSvg } from "./svg.js";
+import { renderSlideSvg } from "./svg.js";
 
 /** Error raised for a deck that cannot be read, rendered or loaded. */
 export class DeckError extends Error {
@@ -173,38 +173,24 @@ export function localIsoDate(now = new Date()) {
 
 // --- font gate -----------------------------------------------------------------------------------------------------
 
-const MAX_FONT_ROUNDS = 4;
-
 /**
- * The gate every render goes through: nothing draws a document before the faces it needs are loaded. `registry` is a browser
- * font registry (`loadBrowserFontRegistry`); one without the lazy loaders gates nothing. Face level: only the vendored and
- * script faces the document draws are fetched, each hash-verified by the registry.
+ * The gate every render goes through: nothing draws a document before the faces it needs are loaded. `fonts` is a browser
+ * fonts handle (`loadFonts` from `/fonts-browser`); one without `pending` and `ensure` gates nothing. Face level: only the
+ * vendored and script faces the document draws are fetched, each hash-verified by the registry behind the handle.
  */
-export function createFontGate(registry) {
-  const sources = (document, options) => {
-    let lazy = [], scripts = [];
-    try { scripts = registry?.pendingScripts?.(document, options) ?? []; } catch { /* the renderer reports the document itself */ }
-    try { lazy = (registry?.pendingLazyFonts?.(document, options) ?? []).map((face) => face?.file ?? String(face)); } catch { /* likewise */ }
-    return { lazy, scripts };
-  };
+export function createFontGate(fonts) {
+  // A document that does not resolve has nothing to load here: the renderer reports it when it draws.
+  const pending = (document, options) => { try { return fonts?.pending?.(document, options) ?? []; } catch { return []; } };
   return {
-    pending(document, options) { const { lazy, scripts } = sources(document, options); return [...lazy, ...scripts]; },
+    pending,
     async ensure(document, { signal, renderOptions } = {}) {
-      const call = { ...renderOptions, signal };
-      try {
-        for (let round = 0; round < MAX_FONT_ROUNDS; round++) {
-          const { lazy, scripts } = sources(document, renderOptions);
-          if (!lazy.length && !scripts.length) return;
-          signal?.throwIfAborted?.();
-          if (lazy.length) await registry.ensureLazyFonts?.(document, call);
-          if (scripts.length) await registry.ensureScripts?.(document, call);
-        }
-      } catch (cause) {
+      if (!pending(document, renderOptions).length) return;
+      try { await fonts.ensure(document, { ...renderOptions, signal }); } catch (cause) {
         if (signal?.aborted) throw cause;
         throw new DeckError("fonts-unavailable", `Fonts for this deck could not be loaded: ${cause?.message ?? cause}`, { cause });
       }
-      const left = sources(document, renderOptions);
-      if (left.lazy.length || left.scripts.length) throw new DeckError("fonts-unavailable", `Fonts for this deck did not finish loading: ${[...left.lazy, ...left.scripts].join(", ")}.`);
+      const left = pending(document, renderOptions);
+      if (left.length) throw new DeckError("fonts-unavailable", `Fonts for this deck did not finish loading: ${left.join(", ")}.`);
     },
   };
 }
@@ -213,9 +199,9 @@ export function createFontGate(registry) {
 
 /**
  * One deck's rendering, shared by the element, the full-screen player and the speaker view: font loading once, each slide
- * rendered once by `renderSvg` and kept, so moving between slides never draws twice and every surface shows the same markup.
+ * rendered once by `renderSlideSvg` and kept, so moving between slides never draws twice and every surface shows the same markup.
  *
- * `fonts` is a browser font registry (or nothing: layout then uses estimated widths and the visitor's system sans-serif).
+ * `fonts` is a browser fonts handle (or nothing: layout then uses estimated widths and the visitor's system sans-serif).
  */
 export function createDeckStore({ document, fonts, renderOptions = {}, date } = {}) {
   const deck = parseDeckDocument(document);
@@ -224,7 +210,8 @@ export function createDeckStore({ document, fonts, renderOptions = {}, date } =
   const diagnostics = [];
   const options = () => ({
     ...renderOptions,
-    ...(fonts?.textMeasurement ? { textMeasurement: fonts.textMeasurement } : {}),
+    // Inline slides use the page's own faces (the registry added them to the document), so only the measurement is passed: nothing is embedded.
+    ...(fonts?.textMeasurement ? { fonts: { textMeasurement: fonts.textMeasurement } } : {}),
     ...(renderOptions.date === undefined && date !== undefined ? { date } : {}),
     onDiagnostic(diagnostic) { diagnostics.push(diagnostic); renderOptions.onDiagnostic?.(diagnostic); },
   });
@@ -243,12 +230,12 @@ export function createDeckStore({ document, fonts, renderOptions = {}, date } =
       let svg = cache.get(index);
       if (svg === undefined) {
         try {
-          svg = renderSvg(deck, { ...options(), slideIndex: index, validate: !validated });
+          svg = renderSlideSvg(deck, index, { ...options(), validate: !validated });
         } catch (cause) {
           if (cause instanceof DeckError) throw cause;
-          // A document the schema rejects says where: the first issue's path and message.
-          const issue = cause?.code === "invalid-opf" ? (cause.details?.issues ?? cause.issues)?.[0] : undefined;
-          const where = issue ? ` (${issue.path || "/"}: ${issue.message})` : "";
+          // A document the schema rejects says where: the first finding's path and message.
+          const finding = cause?.code === "invalid-opf" ? cause.findings?.[0] : undefined;
+          const where = finding ? ` (${finding.path || "/"}: ${finding.message})` : "";
           throw new DeckError(cause?.code === "invalid-opf" ? "invalid-document" : "render-failed", `${cause?.message ?? "The slide could not be drawn."}${where}`, { cause });
         }
         validated = true;

package/dist/element.d.ts

@@ -1,4 +1,5 @@
-import type { BrowserFontRegistry } from "./fonts-browser.js";
+import type { BrowserFontsHandle } from "./fonts-browser.js";
+import type { RenderFonts } from "./fonts.js";
 import type { RenderSvgOptions } from "./svg.js";
 import type { PlayerSession, PresentOptions, PlayerSlideChange } from "./player.js";
 export { DeckError } from "./player.js";
@@ -32,10 +33,13 @@ export interface OpfDeckElement extends HTMLElement {
   /** The 1-based number of the showing slide in the sequence that plays; set it to navigate. */
   slide: number;
   readonly total: number;
-  fonts: string;
-  /** A browser font registry the page already has. Wins over `fonts`. */
-  fontRegistry: BrowserFontRegistry | undefined;
-  /** Extra `renderSvg` options (catalogs, imageResolver, date, ...). Set before the deck loads, or call `reload()`. */
+  /**
+   * The fonts the deck draws with: the URL of the self-hosted font root (the `fonts` attribute), or a browser fonts handle the page
+   * already has (`loadFonts` from `/fonts-browser`), which wins over the attribute. The getter returns the handle when one is set, else the
+   * attribute's URL (an empty string without either).
+   */
+  fonts: string | BrowserFontsHandle;
+  /** Extra `renderSlideSvg` options (catalogs, imageResolver, date, ...). Set before the deck loads, or call `reload()`. */
   renderOptions: Partial<RenderSvgOptions>;
   includeHidden: boolean;
   thumbnails: boolean;
@@ -65,7 +69,8 @@ export interface RenderDeckHtmlOptions {
   includeHidden?: boolean;
   src?: string;
   slide?: number;
-  fonts?: string;
+  /** A string is the font root URL written to the tag's `fonts` attribute; an object (a `loadFonts()` handle, or any `RenderFonts`) draws the markup with those fonts and writes no attribute. */
+  fonts?: string | RenderFonts;
   label?: string;
   thumbnails?: boolean;
   present?: boolean;

package/dist/element.js

@@ -6,7 +6,7 @@ import {
   prepareSlideSvg, sanitizeSvgTree, slideInfo, slideLabel, svgDimensions, plainText,
 } from "./deck-runtime.js";
 import { loadPreviewFonts } from "./preview-fonts.js";
-import { renderSvg } from "./svg.js";
+import { renderSlideSvg } from "./svg.js";
 
 export { DeckError } from "./deck-runtime.js";
 export { loadPreviewFonts, previewBaseFaces, previewFontLayout } from "./preview-fonts.js";
@@ -74,7 +74,7 @@ function createElementClass() {
   return class OpfDeckElement extends Base {
     static get observedAttributes() { return ["src", "slide", "fonts", "thumbnails", "controls", "present", "include-hidden", "label", "keyboard"]; }
 
-    #root; #parts = {}; #built = false; #store; #cursor; #deck; #generation = 0; #abort; #documentValue; #fontRegistry; #renderOptions = {};
+    #root; #parts = {}; #built = false; #store; #cursor; #deck; #generation = 0; #abort; #documentValue; #fonts; #renderOptions = {};
     #readyPromise = Promise.resolve(); #state = "idle"; #error; #observer; #thumbsBuilt = false; #pointer; #session; #announce = false;
     #slideAttribute; #sheet;
 
@@ -124,13 +124,20 @@ function createElementClass() {
     /** Number of slides in the sequence that plays. */
     get total() { return this.#cursor?.total ?? 0; }
 
-    /** URL of the self-hosted font root (see the package README). Without it, layout uses estimated widths and system fonts. */
-    get fonts() { return this.getAttribute("fonts") ?? ""; }
-    set fonts(value) { if (value) this.setAttribute("fonts", String(value)); else this.removeAttribute("fonts"); }
-
-    /** A browser font registry the page already has (`loadBrowserFontRegistry`). Wins over `fonts`. */
-    get fontRegistry() { return this.#fontRegistry; }
-    set fontRegistry(value) { this.#fontRegistry = value || undefined; if (this.isConnected && this.#built) this.#start(); }
+    /**
+     * The fonts the deck draws with: the URL of the self-hosted font root (the `fonts` attribute; see the package README), or a
+     * browser fonts handle the page already has (`loadFonts` from `/fonts-browser`), which wins over the attribute. Without either,
+     * layout uses estimated widths and system fonts.
+     */
+    get fonts() { return this.#fonts ?? this.getAttribute("fonts") ?? ""; }
+    set fonts(value) {
+      if (value && typeof value === "object") { this.#fonts = value; if (this.isConnected && this.#built) this.#start(); return; }
+      const had = this.#fonts !== undefined, before = this.getAttribute("fonts");
+      this.#fonts = undefined;
+      if (value) this.setAttribute("fonts", String(value)); else this.removeAttribute("fonts");
+      // Dropping a handle changes what draws even when the attribute keeps its value.
+      if (had && before === this.getAttribute("fonts") && this.isConnected && this.#built) this.#start();
+    }
 
     /** Extra `renderSvg` options (catalogs, imageResolver, date, ...). Set before the deck loads, or call `reload()`. */
     get renderOptions() { return this.#renderOptions; }
@@ -165,7 +172,7 @@ function createElementClass() {
       if (!this.#store || !this.#cursor) throw new DeckError("not-ready", "The deck is not loaded yet.");
       const { present } = await import("./player.js");
       const session = await present(this.#deck, {
-        store: this.#store, fonts: this.#fontRegistry ?? this.#resolvedRegistry, renderOptions: this.#renderOptions,
+        store: this.#store, fonts: this.#fonts ?? this.#resolvedFonts, renderOptions: this.#renderOptions,
         includeHidden: this.includeHidden, startSlide: this.#cursor.number, returnFocus: this.#parts.viewport, ...options,
       });
       this.#session = session;
@@ -182,7 +189,7 @@ function createElementClass() {
 
     // --- loading ----------------------------------------------------------------------------------------------------
 
-    #resolvedRegistry;
+    #resolvedFonts;
 
     #start() {
       this.#abort?.abort();
@@ -202,22 +209,22 @@ function createElementClass() {
         const deck = await this.#readDocument(signal);
         if (stale()) return;
         parseDeckDocument(deck);
-        let registry = this.#fontRegistry;
-        const root = this.fonts;
+        let registry = this.#fonts;
+        const root = this.getAttribute("fonts");
         if (!registry && root) {
           try { registry = await loadPreviewFonts(root, { signal }); } catch (cause) {
             if (stale()) return;
             this.#report(new DeckError("fonts-unavailable", `The fonts at ${root} could not be loaded; the deck draws with estimated layout and system fonts.`, { cause }), false);
           }
         }
-        this.#resolvedRegistry = registry;
+        this.#resolvedFonts = registry;
         const date = this.#renderOptions.date ?? localIsoDate();
         let store = createDeckStore({ document: deck, fonts: registry, renderOptions: this.#renderOptions, date });
         try { await store.ready(signal); } catch (cause) {
           if (stale()) return;
           if (!registry) throw cause;
           this.#report(cause, false);
-          this.#resolvedRegistry = undefined;
+          this.#resolvedFonts = undefined;
           store = createDeckStore({ document: deck, renderOptions: this.#renderOptions, date });
         }
         if (stale()) return;
@@ -491,7 +498,9 @@ const escapeHtml = (value) => String(value).replace(/&/g, "&amp;").replace(/</g,
 /**
  * Server-side markup for a deck: the slides as inline SVG inside the tag, which a page that has not loaded JavaScript (or a
  * crawler, or a reader) shows as it is, and which the element replaces with its own shadow DOM when it upgrades. Pure and
- * synchronous; layout uses estimated widths unless you pass `renderOptions.textMeasurement` (and `embeddedFonts`).
+ * synchronous; layout uses estimated widths unless you pass a fonts handle as `fonts` (an object: `loadFonts()` from
+ * `/fonts-browser`, or one with a `textMeasurement` and `embeddedFonts`). A `fonts` string is the font root URL written to the
+ * element's `fonts` attribute.
  *
  * `slides`: `"first"` (default: the first slide plus a list of titles), `"all"` or a list of 1-based slide numbers.
  * `embed` puts the document in an `application/opf+json` script child, so the element upgrades without a request.
@@ -502,13 +511,14 @@ export function renderDeckHtml(input, options = {}) {
   const sequence = presentableIndexes(deck, { includeHidden: options.includeHidden });
   const wanted = options.slides ?? "first";
   const shown = wanted === "all" ? sequence.map((_, position) => position) : wanted === "first" ? [0] : wanted.map((number) => number - 1).filter((position) => position >= 0 && position < sequence.length);
-  const attributes = { src: options.src, slide: options.slide, fonts: options.fonts, label: options.label, ...options.attributes };
+  const handle = options.fonts !== null && typeof options.fonts === "object" ? options.fonts : undefined;
+  const attributes = { src: options.src, slide: options.slide, fonts: handle ? undefined : options.fonts, label: options.label, ...options.attributes };
   const attributeText = Object.entries(attributes).filter(([, value]) => value !== undefined && value !== false).map(([name, value]) => (value === true ? ` ${name}` : ` ${name}="${escapeHtml(value)}"`)).join("")
     + (options.thumbnails ? " thumbnails" : "") + (options.present ? " present" : "") + (options.includeHidden ? " include-hidden" : "");
   const date = options.renderOptions?.date ?? options.date;
   const figures = shown.map((position) => {
     const index = sequence[position];
-    const svg = renderSvg(deck, { ...options.renderOptions, ...(date ? { date } : {}), slideIndex: index });
+    const svg = renderSlideSvg(deck, index, { ...options.renderOptions, ...(handle ? { fonts: handle } : {}), ...(date ? { date } : {}) });
     const { width, height } = svgDimensions(svg);
     const prepared = prepareSlideSvg(svg).replace(/^<svg\b/, `<svg style="display:block;width:100%;height:auto;aspect-ratio:${width} / ${height}"`);
     const label = slideLabel(slideInfo(deck, index), position + 1, sequence.length);

package/dist/export-browser.d.ts

@@ -1,4 +1,5 @@
 import type { PdfDiagnostic, PdfMetadata, SvgToPdfOptions } from "./index.js";
+import type { FontsHandle } from "./fonts.js";
 export type { PdfDiagnostic, PdfMetadata } from "./index.js";
 
 export interface BrowserSvgToPngOptions {
@@ -12,7 +13,12 @@ export interface BrowserSvgToPngOptions {
 export interface BrowserSvgToPdfOptions extends Pick<SvgToPdfOptions, "mode" | "background" | "serifFamily" | "metadata" | "tagged" | "compress" | "strict" | "rasterFallbackScale" | "defaultFontFamily" | "sansSerifFamily" | "monospaceFamily" | "onDiagnostic"> {
   /** Raster mode: pixel density of each page image (default 2). */
   scale?: number;
-  /** Extra font faces as bytes (TrueType outlines). Faces an SVG embeds as `@font-face` data (renderSvg's `embeddedFonts`) need no entry here. */
+  /**
+   * The browser fonts handle (`loadFonts` from `/fonts-browser`): every face it holds can be embedded in the PDF, including script faces
+   * a standalone SVG does not carry. Faces an SVG embeds as `@font-face` data (the `embeddedFonts` of the handle `renderSvg` was given) need no entry.
+   */
+  fonts?: FontsHandle;
+  /** Extra font faces as bytes (TrueType outlines) when there is no handle. */
   fontData?: Array<{ data: Uint8Array; family?: string }>;
   /** Checked between pages; an abort rejects with the signal's reason (an `AbortError`). */
   signal?: AbortSignal;

package/dist/export-browser.js

@@ -5,8 +5,9 @@ import { OPFRenderError, packageName } from "./svg.js";
 // has the same two names for a page. It uses the same vector PDF converter as Node (fontkit, bidi-js and pako, all pure
 // JavaScript) over the SVG the preview draws, so the text stays real text in the same embedded subsets. What differs from
 // Node is only how pixels are made: a canvas decodes pictures and draws PNGs. No system font is read (a browser has no way
-// to hand one over) and nothing is fetched: faces come from the SVG's own @font-face data (renderSvg's `embeddedFonts`) or
-// from `fontData`.
+// to hand one over) and nothing is fetched: faces come from the SVG's own @font-face data (the `embeddedFonts` of the fonts handle
+// `renderSvg` was given), from the faces the `fonts` handle holds (`loadFonts` from `/fonts-browser`, so script faces the SVG does not
+// embed reach the PDF too), or from `fontData`.
 
 const DEFAULT_DIMENSIONS = { width: 1280, height: 720 };
 const MAX_PIXELS = 40_000_000;
@@ -31,21 +32,21 @@ export async function svgToPng(svg, options = {}) {
  * Convert SVG slides to a PDF, one slide per page (1 SVG pixel is 1 PDF point, as in Node). `mode: "vector"` (default) writes
  * real text, paths, gradients and images; `"raster"` draws each slide as an image (`scale`, default 2). Takes the options of
  * the Node `svgToPdf` that make sense here (`metadata`, `tagged`, `strict`, `compress`, `onDiagnostic`, the generic family
- * names, `rasterFallbackScale`) and `fontData` (`[{ data, family? }]`, extra face bytes), `signal` (an AbortSignal, checked between
- * pages) and `onProgress({ page, pages })`.
+ * names, `rasterFallbackScale`), `fonts` (the handle `loadFonts()` returns: every face it holds can be embedded), `fontData`
+ * (`[{ data, family? }]`, extra face bytes without a handle), `signal` (an AbortSignal, checked between pages) and
+ * `onProgress({ page, pages })`.
  */
 export async function svgToPdf(svgs, options = {}) {
   const inputs = (Array.isArray(svgs) ? svgs : [svgs]).map(svgText);
   if (!inputs.length) throw new OPFRenderError("empty-pdf", "svgToPdf requires at least one SVG slide.");
   const mode = options.mode ?? "vector";
   if (mode !== "vector" && mode !== "raster") throw new OPFRenderError("invalid-conversion-option", 'mode must be "vector" or "raster".', { option: "mode", value: mode });
-  if (options.loadSystemFonts === true) throw new OPFRenderError("pdf-system-fonts-unsupported", "A browser cannot hand system fonts to the PDF export: supply faces as @font-face data or `fontData`.", { option: "loadSystemFonts" });
   if (mode === "raster") return rasterPdf(inputs, options);
   const scale = positive(options.rasterFallbackScale, "rasterFallbackScale", 2);
   const fontCss = fontFaceCss(inputs);
   return svgsToVectorPdf(inputs, {
     fontFiles: [], fontDirs: [],
-    fontData: Array.isArray(options.fontData) ? options.fontData : [],
+    fontData: [...(options.fonts?.registry?.exportFaces?.() ?? []), ...(Array.isArray(options.fontData) ? options.fontData : [])],
     imageCodec: canvasImageCodec(),
     defaultFontFamily: options.defaultFontFamily ?? "Roboto",
     sansSerifFamily: options.sansSerifFamily ?? options.defaultFontFamily ?? "Roboto",

package/dist/font-compatibility.js

@@ -1,8 +1,8 @@
-import { FONT_POLICY } from "./font-policy.js";
+import { FONT_POLICY } from "@openpresentation/opf/font-policy";
 /** Curated substitution policy. Metric means upstream intent, not universal pixel identity. */
 const metric = (requestedFamily, substitutes, source, note = "Standard regular, bold, italic and bold italic styles; verify coverage and font versions.") => ({requestedFamily, substitutes, compatibility:"metric", weights:[400,700], source, note});
 const visual = (requestedFamily, substitutes, note = "Approximate appearance; measure again and expect reflow.") => ({requestedFamily, substitutes, compatibility:"visual", note});
-// Rules before FF-31. Families that the OPF font policy table (src/font-policy.js) lists take their
+// Rules before FF-31. Families that the OPF font policy table (core `FONT_POLICY`) lists take their
 // rule from the table below; the remaining legacy rules keep working for other families.
 const LEGACY = [
   metric("Calibri",["Carlito"],"https://github.com/googlefonts/carlito"),
@@ -58,7 +58,7 @@ const describe = replacement => replacement.measured
  * preview never needs a download. Replacements drive measurement and drawing only; exporters keep
  * writing the chosen family.
  */
-const FROM_POLICY = FONT_POLICY.filter(row => row.replacement).map(row => ({
+const FROM_POLICY = FONT_POLICY.families.filter(row => row.replacement).map(row => ({
   requestedFamily: row.family,
   substitutes: [row.replacement.family, ...(row.alternates ?? [])],
   compatibility: row.replacement.compatibility,
@@ -80,7 +80,7 @@ export const FONT_COMPATIBILITY = Object.freeze([...FROM_POLICY, ...LEGACY.filte
 // The row's metric claim is measured that way, so the renderer must shape (fonts.js) and draw (svg.js)
 // the face that way too. Keyed by the replacement family: a Georgia deck is measured and drawn with
 // Gelasio, and Gelasio requested by name is treated identically, so measurement and drawing never disagree.
-const DISABLED_FEATURES = new Map(FONT_POLICY.filter(row => row.replacement?.disabledFeatures?.length).map(row => [row.replacement.family.toLowerCase(), Object.freeze([...row.replacement.disabledFeatures])]));
+const DISABLED_FEATURES = new Map(FONT_POLICY.families.filter(row => row.replacement?.disabledFeatures?.length).map(row => [row.replacement.family.toLowerCase(), Object.freeze([...row.replacement.disabledFeatures])]));
 /** OpenType feature tags to turn off for a preview face, from the font policy; undefined when none. */
 export function disabledFeaturesFor(family) {
   return typeof family === "string" ? DISABLED_FEATURES.get(family.trim().toLowerCase()) : undefined;