@openpresentation/opf-render 0.11.4 → 0.11.6

package/README.md

@@ -1,8 +1,8 @@
 # OPF Render
 
-**Aptos previews with Intos.** The Office pack includes Intos, Intos Display, Intos Narrow and Intos Serif (16 faces, about 12 MB, vendored under `fonts/intos/`, SIL OFL 1.1, pinned to upstream commit fef9315c14da9e4b23b4c3cac8e718998d4e4736 and per-file SHA-256, unmodified from the upstream files). They are the metric-compatible previews for Aptos, Aptos Display, Aptos Narrow and Aptos Serif, the default `aptos` font scheme: 0.000% mean and maximum width difference against Aptos 2.01 in all four styles, with equal vertical metrics. The letter shapes are Intos's own, not Aptos's. The exported PPTX still names Aptos; no Aptos file is bundled or embedded. A registry built without these faces (the base pack) has no Aptos substitute: visual policy falls back to Roboto or Carlito. Like the open families, Intos is `embed: "used"`: it is not in `registry.embeddedFonts` (the 33 eager npm faces), `prepareNodeFonts().options.embeddedFonts` supplies it, and an SVG embeds only the Intos faces its text draws. `registry.lazyFonts` lists the 51 vendored faces (35 open, 16 Intos) with package-relative file and sha256, and `loadBrowserFontRegistry(faces, {lazyFontsBaseUrl})` loads them on demand: `await registry.ensureLazyFonts(presentation)` fetches and verifies only the files the document's font families resolve to (the default Aptos scheme: Intos and Intos Display, 8 files, 5.9 MB), then adds them to the document and the registry together so measurement and painting never disagree. Hosts copy the vendored directories next to the page.
+**Aptos previews with Intos.** The Office pack includes Intos, Intos Display, Intos Narrow and Intos Serif (16 faces, about 12 MB, vendored under `fonts/intos/`, SIL OFL 1.1, pinned to upstream commit fef9315c14da9e4b23b4c3cac8e718998d4e4736 and per-file SHA-256, unmodified from the upstream files). They are the metric-compatible previews for Aptos, Aptos Display, Aptos Narrow and Aptos Serif, the default `aptos` font scheme: 0.000% mean and maximum width difference against Aptos 2.01 in all four styles, with equal vertical metrics. The letter shapes are Intos's own, not Aptos's. The exported PPTX still names Aptos; no Aptos file is bundled or embedded. A registry built without these faces (the base pack) has no Aptos substitute: visual policy falls back to Roboto or Carlito. Like the open families, Intos is `embed: "used"`: it is not in `registry.embeddedFonts` (the 33 eager npm faces), `prepareNodeFonts().options.embeddedFonts` supplies it, and an SVG embeds only the Intos faces its text draws. `registry.lazyFonts` lists the 51 vendored faces (35 open, 16 Intos) with package-relative file and sha256, and `loadBrowserFontRegistry(faces, {lazyFontsBaseUrl})` loads them on demand: `await registry.ensureLazyFonts(presentation)` fetches and verifies only the faces the document draws, by family, weight and style (a plain Aptos deck: Intos Display Bold and Intos Regular, 2 files, 1.5 MB; an italic run adds Intos Italic, a bold run Intos Bold; the code face only when a slide has code), then adds them to the document and the registry together so measurement and painting never disagree. `registry.pendingLazyFonts(presentation)` is the synchronous check hosts gate rendering on, and after an edit it reports just the newly needed faces. The faces are those the renderer itself measures and draws (`presentationFaces(presentation, options, registry)`, one layout-and-paint run with a recording measurement), resolved by the registry's own face selection over the faces it holds plus the vendored ones, so the browser loads exactly what Node draws with every vendored face loaded. A document resolves with the `renderSvg` options the host renders with: pass them as `loadBrowserFontRegistry(entries, { renderOptions: { catalogs } })`, or per call (`pendingLazyFonts(presentation, { catalogs })`, `ensureLazyFonts(presentation, { signal, catalogs })`), so a layout or font scheme id that only the host's catalogs know resolves here too; a document that does not resolve throws (rejects) what `renderSvg` throws for it instead of reporting nothing. Node's `prepareNodeFonts` and `loadOfficeFontRegistry` keep loading the whole open pack and Intos eagerly, so nothing there is face level; with `scripts: 'auto'` they accept `renderOptions: { catalogs }` too. Hosts copy the vendored directories next to the page.
 
-Version 0.11.4 previews the seven chartex chart types natively (the world map as a non-geographic tile grid), keeps the Latin Noto Sans replacement for script schemes under `scripts: 'auto'` in Node, shapes Noto Sans Mongolian again and bundles Raleway and Playfair Display (`registry.lazyFonts` lists 94 faces; no API change). Version 0.11.3 previews the classic chart types natively, draws deprecated chart ids as their replacement and scales value axes like Office (no API change; the preview of chart slides changes). Version 0.11.2 makes `scripts: 'auto'` load the script faces a font scheme names and adds `details.loadedFaceHasGlyph` to `missing-glyph` (no export change). Version 0.11.1 adds the open replacement font families the policy routes to and complete Red Hat styles (no API change). Version 0.11.0 requires `@openpresentation/opf` ^0.11.2 (cover centering, Intos Aptos previews, lazy font loading, automatic script fonts and glyph fallback); use it with PPTX 0.11.0 and editor 0.10.0 so preview and export resolve the same core. Version 0.10.0 required `@openpresentation/opf` ^0.11.1 (font policy table, script fonts and right-to-left paragraphs, socials, slide-image treatments, formatted slide-number and date furniture with the host `date` option, per-item alignment). See the changelog for the intentional preview-output changes.
+Version 0.11.6 makes the category-axis labels of chart previews rotate and skip instead of wrapping mid-word (no API change; the preview of dense-axis chart slides changes) and requires `@openpresentation/opf` ^0.11.3 (the 70 legacy gallery layout ids and their geometry); use it with PPTX 0.11.4 and editor 0.10.4 so preview and export resolve the same core. Version 0.11.5 loads vendored preview fonts by face, not by family, and lets the font loaders resolve documents with the host's render options (`presentationFaces`, `lazyFacesNeeded`; `pendingLazyFonts`, `ensureLazyFonts`, `pendingScripts` and `ensureScripts` take `catalogs` and throw or reject with the `renderSvg` error for a document that does not resolve; `registry.lazyFonts` still lists 94 faces). Version 0.11.4 previews the seven chartex chart types natively (the world map as a non-geographic tile grid), keeps the Latin Noto Sans replacement for script schemes under `scripts: 'auto'` in Node, shapes Noto Sans Mongolian again and bundles Raleway and Playfair Display (`registry.lazyFonts` lists 94 faces; no API change). Version 0.11.3 previews the classic chart types natively, draws deprecated chart ids as their replacement and scales value axes like Office (no API change; the preview of chart slides changes). Version 0.11.2 makes `scripts: 'auto'` load the script faces a font scheme names and adds `details.loadedFaceHasGlyph` to `missing-glyph` (no export change). Version 0.11.1 adds the open replacement font families the policy routes to and complete Red Hat styles (no API change). Version 0.11.0 requires `@openpresentation/opf` ^0.11.2 (cover centering, Intos Aptos previews, lazy font loading, automatic script fonts and glyph fallback); use it with PPTX 0.11.0 and editor 0.10.0 so preview and export resolve the same core. Version 0.10.0 required `@openpresentation/opf` ^0.11.1 (font policy table, script fonts and right-to-left paragraphs, socials, slide-image treatments, formatted slide-number and date furniture with the host `date` option, per-item alignment). See the changelog for the intentional preview-output changes.
 
 Version 0.9.0 required `@openpresentation/opf` ^0.11.0 and resolved content ColorRef / `variables` through core `resolveColorRef()`. Authored `#RRGGBB` paint stays authored. It retains the existing rendering APIs.
 
@@ -189,6 +189,8 @@ registry.scriptSelection; // { detected, scripts, unavailable, packages, notInst
 const fonts = await loadBrowserFontRegistry(baseEntries, { substitutionPolicy: 'visual', fallbackFamily: 'Roboto', scriptBaseUrl: '/script-fonts/' });
 if (fonts.pendingScripts(presentation).length) await fonts.ensureScripts(presentation); // resolves { detected, scripts, unavailable, loaded }
 // pendingScripts is synchronous: empty means nothing is missing, so render at once.
+// Text decides, so the analysis does not resolve layouts or catalogs. Pass the render options (renderOptions: { catalogs } to
+// loadBrowserFontRegistry, or per call) so a font scheme only the host's catalogs have and that names a script font (Yu Gothic) counts.
 ```
 
 Where the renderer has per-character glyph fallback (`glyphFallbackFamilies`), auto also loads Noto Sans when the text has Greek or Cyrillic (the chosen Latin face may lack it), and the next CJK face of the fallback chain when a drawn Han, kana or Hangul character is missing from the loaded ones (a Simplified-only hanzi in Japanese text, hanja). That is capped at one fallback package beyond the packages the text's own scripts need: a character no CJK face covers never pulls in all four (10 to 20 MiB each); it is listed in `ensureScripts().uncovered` (Node: `script-glyph-uncovered`, `registry.scriptSelection.uncovered`) and the renderer reports `missing-glyph`. Browser loads are all or nothing per package: a failed fetch, hash check or `FontFace.load()` leaves the registry, the document and `loadedScriptPackages` unchanged and the package pending. One failing package does not lose the others: `ensureScripts` loads every package it can, then rejects with an `OPFFontError` whose `details` are `{ loaded, failed: [{package, code, message}] }`, and the next call retries only the failures. `ensureScripts(presentation, { signal })` and `loadScripts(scripts, { signal })` take a per-call `AbortSignal` (the creation signal is not reused), and `dispose()` during a load leaves no face behind and rejects with `font-registry-disposed`. Script faces carry `embed: "used"`, like the open families: the eager `registry.embeddedFonts` leaves them out, and when you pass them explicitly (`registry.selectEmbeddedFonts(face => face.scripts)`) an SVG embeds one only when the slide's text uses its family, so a Latin slide never carries a CJK face.
@@ -248,6 +250,8 @@ Chartex chart previews (FF-22b) draw the constructs opf-pptx exports as Office 2
 
 Classic chart previews keep finite axis coordinates for subnormal values and values up to `Number.MAX_VALUE`, including mixed positive/negative ranges. At these limits, available numeric precision can merge adjacent axis ticks or prevent extra headroom. Authored values are unchanged. Stacked, percentage or pie/doughnut totals that overflow the finite numeric range are still unsupported: rendering throws a `RangeError` naming the chart path and asking the caller to rescale the values. It does not substitute an empty chart or silently discard the overflowing values.
 
+Category-axis labels follow PowerPoint's automatic labelling instead of wrapping inside a band (column, bar, line and area charts, including stacked and 100%, and the chartex histogram, pareto, waterfall, funnel and box-and-whisker previews). A label is never broken inside a word: it stays on one line, or splits at its spaces onto two lines when a band is too narrow, so `Category 1` cannot become `Ca` over `t 1`. When the labels do not fit horizontally they turn to -45 degrees, then -90 degrees (the plot area shrinks to make room, by at most 40% of the chart height, and a slanted first label must stay inside the chart), and when even that collides the axis draws every n-th label (Office's automatic `tickLblSkip`): n is the smallest interval that leaves no two drawn labels overlapping, the first label is always drawn, and ties go to the less rotated arrangement. In horizontal bar charts and funnels, where the category axis is vertical, rows shorter than a line of text are skipped the same way, and the label gutter grows with the longest label up to 30% of the chart width. Only a label wider than that gutter (or wider than the whole chart on a horizontal axis) is ellipsized, and then the renderer reports one `chart-label-truncated` diagnostic per chart with the affected label paths in `labels`; nothing is shortened silently, and no arrangement raises `text-overflow` for an axis label. Radar spoke labels use the same one-line, two-line or ellipsis rule and leave out a spoke label that would collide with one already drawn. Rotated labels are wrapped in a `<g transform="rotate(...)">` around their usual text group, so the traced `data-opf-box-*` attributes describe the unrotated box. PowerPoint applies its own automatic rotation and skip to the exported chart: opf-pptx writes an automatic axis text body (`<a:bodyPr/>`, no `rot`) and no `tickLblSkip` for these axes, so nothing forces a wrap, and the preview and the export make the same kind of choice, not identical ones (the export uses 9 pt labels, the preview the readability floor).
+
 ## Development
 
 ```sh

package/dist/charts.js

@@ -156,6 +156,10 @@ function chartContext(item, box, bound, options, svg, rows, columns) {
     pt: u * 4 / 3,
     pad: 10 * u,
     lineHeight: fontPx * 1.5,
+    // One text line as renderTextBox lays it out (fitText line height), and the
+    // clear space kept between neighbouring category labels.
+    textHeight: fontPx * 1.22,
+    labelGap: fontPx * 0.1,
     colors: CHART_SERIES_COLORS.map((color) => chartColorForFill(surface, color)),
     gridColor: bound.design.colors.border,
     axisColor: "#888888",
@@ -168,12 +172,16 @@ function chartContext(item, box, bound, options, svg, rows, columns) {
       for (const [key, value] of Object.entries(attrs)) out[key] = numericAttrs.has(key) && typeof value === "number" ? n(value) : value;
       children.push(svg.tag(name, { ...out, ...(path ? svg.traceAttrs(options, path) : {}) }));
     },
-    text(value, rect, path, align = "center") {
-      if (!(rect.width > 0 && rect.height > 0)) return;
-      children.push(svg.renderTextBox(String(value), rect, bound, {
+    textElement(value, rect, path, align = "center") {
+      if (!(rect.width > 0 && rect.height > 0)) return "";
+      return svg.renderTextBox(String(value), rect, bound, {
         path, fontSize: requested, fontFamily: bound.design.fonts.body, fontWeight: 400,
         fill: labelColor, options, align, verticalAlign: "middle"
-      }));
+      });
+    },
+    text(value, rect, path, align = "center") {
+      const element = c.textElement(value, rect, path, align);
+      if (element) children.push(element);
     },
     series(first = 1) {
       return columns.slice(first).map((name, offset) => ({
@@ -324,6 +332,202 @@ function maxIntervalsFor(length, labelExtent) {
   return Math.max(1, Math.min(10, Math.floor(length / Math.max(1, labelExtent))));
 }
 
+// ---------------------------------------------------------------------------
+// Category-axis labels. PowerPoint labels a category axis automatically: a label
+// stays on one line unless it has spaces and fits two lines in its category
+// band; when the labels do not fit horizontally it rotates them (-45 degrees,
+// then vertical) and shrinks the plot area to make room; when even that does not
+// fit it draws every n-th label (tickLblSkip auto, first label always kept).
+// The helpers below reproduce that policy deterministically:
+//
+//   1. A label is never broken inside a word. It is one line, or (when it has
+//      whitespace) the best two-line split, or an ellipsized single line.
+//   2. Horizontal labels (single, or two-line where a band is too narrow) win
+//      when no two labels collide. Otherwise -45 degree, then -90 degree labels
+//      are tried while their footprint fits `maxReserve` (at most 40% of the
+//      chart height), each drawn with the fewest labels that avoid overlap.
+//   3. When no arrangement shows every label, the arrangement with the smallest
+//      skip interval n wins (ties: horizontal, then -45, then -90); labels
+//      0, n, 2n, ... are drawn, so the first label is always drawn.
+//   4. Only a label wider than the whole chart area (or wider than a horizontal
+//      bar chart's label gutter, which grows to 30% of the chart width) is
+//      ellipsized; that is reported once per chart as `chart-label-truncated`.
+//      No arrangement raises `text-overflow`.
+
+const ELLIPSIS = "…";
+// Whitespace that may split a label; no-break spaces stay inside their word.
+const BREAKABLE = /[^\S  ]+/u;
+
+// Labels lay out as one line of text; authored line breaks read as spaces.
+const flatLabel = (name) => String(name ?? "").replace(/[\r\n]+/g, " ");
+
+function labelCandidates(c, entries) {
+  return entries.map((entry) => {
+    const text = flatLabel(entry.name);
+    return { ...entry, text, width: text ? c.width(text) : 0 };
+  });
+}
+
+// The two-line split with the narrowest widest line, or null for one word.
+function twoLines(c, label) {
+  if (label.two !== undefined) return label.two;
+  const words = label.text.split(BREAKABLE).filter(Boolean);
+  let best = null;
+  for (let split = 1; split < words.length; split++) {
+    const first = words.slice(0, split).join(" "), second = words.slice(split).join(" ");
+    const width = Math.max(c.width(first), c.width(second));
+    if (!best || width < best.width - 1e-9) best = { text: `${first}\n${second}`, width };
+  }
+  return label.two = best;
+}
+
+// Longest prefix that fits `limit` once the ellipsis is appended.
+function ellipsize(c, text, limit) {
+  const chars = Array.from(text);
+  const fits = (length) => c.width(chars.slice(0, length).join("").trimEnd() + ELLIPSIS) <= limit;
+  let low = 0, high = chars.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (fits(middle)) low = middle; else high = middle - 1;
+  }
+  const out = chars.slice(0, low).join("").trimEnd() + ELLIPSIS;
+  return { text: out, width: c.width(out) };
+}
+
+function reportTruncatedLabels(c, paths) {
+  if (!paths.length) return;
+  const many = paths.length !== 1;
+  c.svg.reportDiagnostic?.({
+    code: "chart-label-truncated", reason: "category-axis", path: c.path, labels: paths,
+    message: `${paths.length} category label${many ? "s are" : " is"} wider than the space the axis can give ${many ? "them" : "it"} and ${many ? "were" : "was"} shortened with an ellipsis; shorten the label or enlarge the chart.`
+  }, c.options);
+}
+
+// A horizontal category axis (labels below the plot). Returns the arrangement
+// with the space it needs under the plot: { angle, n, reserve, labels }.
+function planBottomLabels(c, entries, plot, maxReserve, { minX, maxX, rotatedMinX }) {
+  const labels = labelCandidates(c, entries);
+  const count = labels.length;
+  if (!count) return { angle: 0, n: 1, reserve: c.lineHeight, labels: [] };
+  const band = plot.width / count, gap = c.labelGap, lineH = c.textHeight;
+  const limit = Math.max(1, maxX - minX);
+  const allowTwo = maxReserve >= c.lineHeight + lineH - 0.01;
+
+  const horizontal = (n) => {
+    const slot = n * band - gap, placed = [];
+    let prevRight = -Infinity, rows = 1;
+    for (let i = 0; i < count; i += n) {
+      const label = labels[i];
+      let { text, width } = label, lines = 1, truncated = false;
+      if (width > slot && allowTwo) {
+        const two = twoLines(c, label);
+        if (two && two.width <= slot) ({ text, width } = two), lines = 2;
+      }
+      if (width > limit) ({ text, width } = ellipsize(c, label.text, limit)), lines = 1, truncated = true;
+      const cx = plot.x + (i + 0.5) * band;
+      const left = Math.min(Math.max(cx - width / 2, minX), maxX - width);
+      if (left < prevRight + gap - 1e-6) return null;
+      prevRight = left + width;
+      rows = Math.max(rows, lines);
+      placed.push({ i, text, width, lines, left, cx, truncated });
+    }
+    return { angle: 0, n, reserve: c.lineHeight + (rows - 1) * lineH, labels: placed };
+  };
+  let plain = null;
+  for (let n = 1; n <= count && !plain; n++) plain = horizontal(n);
+  // One label always fits by itself (it is clamped and ellipsized to the chart).
+  plain ??= { angle: 0, n: count, reserve: c.lineHeight, labels: [] };
+
+  const rotated = (angle) => {
+    const sin = angle === 90 ? 1 : Math.SQRT1_2, cos = angle === 90 ? 0 : Math.SQRT1_2;
+    const n = Math.max(1, Math.ceil(lineH / sin / band - 1e-9)), topGap = c.fontPx * 0.25;
+    let extent = 0;
+    const placed = [];
+    for (let i = 0; i < count; i += n) {
+      const { text, width } = labels[i], cx = plot.x + (i + 0.5) * band;
+      if (cx - width * cos - lineH * sin / 2 < rotatedMinX - 1e-6) return null;
+      extent = Math.max(extent, width * sin + lineH * cos);
+      placed.push({ i, text, width, lines: 1, cx, truncated: false });
+    }
+    const reserve = Math.max(c.lineHeight, topGap + extent);
+    return reserve > maxReserve + 1e-6 ? null : { angle, n, reserve, labels: placed, topGap };
+  };
+  const options = [plain, rotated(45), rotated(90)].filter(Boolean);
+  return options.find((option) => option.n === 1) ?? options.reduce((best, option) => option.n < best.n ? option : best);
+}
+
+// Lay out the plot for a horizontal category axis. `geometry(reserve)` returns
+// { plot, ...whatever else depends on the height }, the plot leaving `reserve`
+// under it for the labels; rotated labels shrink the plot as Office does.
+function planCategoryAxis(c, entries, geometry) {
+  const cap = Math.max(c.lineHeight + c.textHeight, c.box.height * 0.4);
+  const bounds = (plot) => ({ minX: plot.x - c.fontPx * 0.5, maxX: plot.x + plot.width + c.fontPx * 0.5, rotatedMinX: c.box.x + c.pad });
+  // The space under the plot only grows (a smaller plot can change the value-tick
+  // width and so the band, and the arrangement with it); it stops once the plan
+  // fits the space that shaped the plot.
+  let reserve = c.lineHeight, axis = geometry(reserve), plan = planBottomLabels(c, entries, axis.plot, cap, bounds(axis.plot));
+  for (let pass = 0; pass < 3 && plan.reserve > reserve + 0.5; pass++) {
+    reserve = plan.reserve;
+    axis = geometry(reserve);
+    plan = planBottomLabels(c, entries, axis.plot, cap, bounds(axis.plot));
+  }
+  if (plan.reserve > reserve + 0.5) plan = planBottomLabels(c, entries, axis.plot, reserve, bounds(axis.plot));
+  return { ...axis, plan };
+}
+
+function drawBottomLabels(c, plan, plot, entries) {
+  const y = plot.y + plot.height, band = plot.width / Math.max(1, entries.length), lineH = c.textHeight;
+  for (const label of plan.labels) {
+    const path = entries[label.i].path;
+    if (plan.angle) {
+      // Rotated labels end at their tick (Office -45 / -90 degree text).
+      const cos = plan.angle === 90 ? 0 : Math.SQRT1_2;
+      const px = label.cx, py = y + plan.topGap + lineH * cos / 2, width = label.width + 2;
+      const text = c.textElement(label.text, { x: px - width, y: py - lineH * 0.55, width, height: lineH * 1.1 }, path, "right");
+      if (text) c.children.push(c.svg.tag("g", { transform: `rotate(${-plan.angle} ${c.num(px)} ${c.num(py)})` }, text));
+      continue;
+    }
+    const centred = Math.abs(label.left - (label.cx - label.width / 2)) < 1e-6;
+    const rect = plan.n === 1 && centred && label.width <= band
+      ? { x: plot.x + label.i * band, y, width: band, height: plan.reserve }
+      : { x: label.left - 1, y, width: label.width + 2, height: plan.reserve };
+    c.text(label.text, rect, path);
+  }
+  reportTruncatedLabels(c, plan.labels.filter((label) => label.truncated).map((label) => entries[label.i].path));
+}
+
+// A vertical category axis (labels to the left of horizontal bars and funnels).
+// Labels stay on one line inside the gutter, wrap at spaces onto two lines when
+// their rows are tall enough, else are ellipsized; every n-th row is labelled
+// when the rows are shorter than a line of text.
+function planRowLabels(c, entries, band, gutter) {
+  const labels = labelCandidates(c, entries);
+  const n = Math.max(1, Math.ceil(c.textHeight / band - 1e-9));
+  const canWrap = n * band >= 2 * c.textHeight - 0.01;
+  const placed = [];
+  for (let i = 0; i < labels.length; i += n) {
+    const label = labels[i];
+    let text = label.text, truncated = false;
+    if (label.width > gutter + 0.01) {
+      const two = canWrap ? twoLines(c, label) : null;
+      if (two && two.width <= gutter + 0.01) text = two.text;
+      else ({ text } = ellipsize(c, label.text, gutter)), truncated = true;
+    }
+    placed.push({ i, text, truncated });
+  }
+  return { n, labels: placed };
+}
+
+// `rowTop(i)` is the top of category i's row; rows are `band` tall.
+function drawRowLabels(c, plan, entries, band, gutter, x, rowTop) {
+  const span = plan.n * band;
+  for (const label of plan.labels) {
+    const middle = rowTop(label.i) + band / 2;
+    c.text(label.text, { x, y: middle - span / 2, width: gutter, height: span }, entries[label.i].path, "right");
+  }
+  reportTruncatedLabels(c, plan.labels.filter((label) => label.truncated).map((label) => entries[label.i].path));
+}
+
 // ---------------------------------------------------------------------------
 // Category charts: column, bar, line and area (standard, stacked, 100%).
 
@@ -380,26 +584,28 @@ function renderCategoryChart(c, spec) {
   const top = box.y + pad + c.lineHeight / 2;
   let plot, scale;
   if (horizontal) {
-    const categoryWidth = Math.min(box.width * 0.3, Math.max(0, ...categories.map(c.width)) + fontPx * 0.5);
+    const categoryWidth = Math.min(box.width * 0.3, Math.max(0, ...categories.map((name) => c.width(flatLabel(name)))) + fontPx * 0.5);
     const x = box.x + pad + categoryWidth + c.pad / 2;
     const bottom = box.y + box.height - pad - c.lineHeight;
     const width = Math.max(1, right - x - fontPx);
     const tickWidth = Math.max(c.width(formatTick(dataMax, percent)), c.width(formatTick(dataMin, percent)), c.width("100%")) + fontPx;
     scale = niceScale(dataMin, dataMax, maxIntervalsFor(width, tickWidth), { percent });
     plot = { x, y: top, width, height: Math.max(1, bottom - top) };
-    categories.forEach((name, i) => {
-      const band = plot.height / count;
-      c.text(name, { x: box.x + pad, y: plot.y + plot.height - (i + 1) * band, width: categoryWidth, height: band }, `${c.path}.data.rows.${i}.0`, "right");
-    });
+    // Office bar charts draw the first category nearest the origin (bottom).
+    const entries = categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` }));
+    const rowBand = plot.height / count;
+    drawRowLabels(c, planRowLabels(c, entries, rowBand, categoryWidth), entries, rowBand, categoryWidth, box.x + pad, (i) => plot.y + plot.height - (i + 1) * rowBand);
   } else {
-    const bottom = box.y + box.height - pad - c.lineHeight;
-    const height = Math.max(1, bottom - top);
-    scale = niceScale(dataMin, dataMax, maxIntervalsFor(height, c.lineHeight * 1.2), { percent });
-    const tickWidth = Math.max(...scale.ticks.map((tick) => c.width(formatTick(tick, percent)))) + fontPx * 0.5;
-    const x = box.x + pad + tickWidth;
-    plot = { x, y: top, width: Math.max(1, right - x - fontPx / 2), height };
-    const band = plot.width / count;
-    categories.forEach((name, i) => c.text(name, { x: plot.x + i * band, y: plot.y + plot.height, width: band, height: c.lineHeight }, `${c.path}.data.rows.${i}.0`));
+    const entries = categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` }));
+    const axis = planCategoryAxis(c, entries, (reserve) => {
+      const height = Math.max(1, box.y + box.height - pad - reserve - top);
+      const fitted = niceScale(dataMin, dataMax, maxIntervalsFor(height, c.lineHeight * 1.2), { percent });
+      const tickWidth = Math.max(...fitted.ticks.map((tick) => c.width(formatTick(tick, percent)))) + fontPx * 0.5;
+      const x = box.x + pad + tickWidth;
+      return { scale: fitted, plot: { x, y: top, width: Math.max(1, right - x - fontPx / 2), height } };
+    });
+    ({ plot, scale } = axis);
+    drawBottomLabels(c, axis.plan, plot, entries);
   }
   const at = (value) => horizontal ? plot.x + axisFraction(value, scale) * plot.width : plot.y + axisFraction(value, scale, true) * plot.height;
   // Category axis crosses at zero when zero is on the axis (autoZero).
@@ -600,10 +806,15 @@ function renderRadarChart(c, spec) {
   const count = categories.length;
   const values = series.flatMap((s) => s.values).filter((v) => v !== null);
   const legendWidth = seriesLegend(c, series, spec.style === "filled" ? undefined : "line", spec.markers);
-  const labelWidth = Math.min(box.width * 0.2, Math.max(0, ...categories.map(c.width)) + fontPx * 0.5);
+  const labelWidth = Math.min(box.width * 0.2, Math.max(0, ...categories.map((name) => c.width(flatLabel(name)))) + fontPx * 0.5);
+  // Spoke labels follow the same rules as other category labels (never broken
+  // inside a word; one line, two lines at spaces, or an ellipsis). A chart with
+  // two-line spoke labels keeps room for the second line above and below.
+  const spokeLabels = labelCandidates(c, categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` })));
+  const wraps = spokeLabels.some((label) => label.width > labelWidth + 0.01 && (twoLines(c, label)?.width ?? Infinity) <= labelWidth + 0.01);
   const area = { x: box.x + pad, y: box.y + pad, width: Math.max(1, box.width - 2 * pad - legendWidth), height: Math.max(1, box.height - 2 * pad) };
   const cx = area.x + area.width / 2, cy = area.y + area.height / 2;
-  const radius = Math.max(1, Math.min(area.width / 2 - labelWidth, area.height / 2 - c.lineHeight));
+  const radius = Math.max(1, Math.min(area.width / 2 - labelWidth, area.height / 2 - c.lineHeight - (wraps ? c.textHeight : 0)));
   const scale = niceScale(values.length ? Math.min(...values) : 0, values.length ? Math.max(...values) : 1, maxIntervalsFor(radius, c.lineHeight));
   const angle = (i) => -Math.PI / 2 + i / count * Math.PI * 2;
   const rAt = (v) => axisFraction(Math.min(scale.max, Math.max(scale.min, v)), scale) * radius;
@@ -614,19 +825,38 @@ function renderRadarChart(c, spec) {
     const ring = categories.map((_, i) => point(i, tick).map(n).join(" "));
     c.mark("path", { d: `M ${ring.join(" L ")} Z`, fill: "none", stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
   }
+  // A spoke label that would collide with one already drawn is left out; the first is always kept.
+  const drawn = [], truncated = [];
   categories.forEach((name, i) => {
     const [x, y] = polar(cx, cy, radius, angle(i));
     axisLine(c, cx, cy, x, y);
     const [lx, ly] = polar(cx, cy, radius + fontPx * 0.4, angle(i));
     const cos = Math.cos(angle(i)), sin = Math.sin(angle(i));
     const align = Math.abs(cos) < 0.2 ? "center" : cos > 0 ? "left" : "right";
+    const label = spokeLabels[i];
+    let { text, width } = label, lines = 1, shortened = false;
+    if (width > labelWidth + 0.01) {
+      const two = twoLines(c, label);
+      if (two && two.width <= labelWidth + 0.01) ({ text, width } = two), lines = 2;
+      else ({ text, width } = ellipsize(c, label.text, labelWidth)), lines = 1, shortened = true;
+    }
+    const height = c.lineHeight + (lines - 1) * c.textHeight;
     const rect = {
       x: align === "center" ? lx - labelWidth / 2 : align === "left" ? lx : lx - labelWidth,
-      y: Math.abs(sin) < 0.2 ? ly - c.lineHeight / 2 : sin < 0 ? ly - c.lineHeight : ly,
-      width: labelWidth, height: c.lineHeight
+      y: Math.abs(sin) < 0.2 ? ly - height / 2 : sin < 0 ? ly - height : ly,
+      width: labelWidth, height
     };
-    c.text(name, rect, `${c.path}.data.rows.${i}.0`, align);
+    const left = align === "center" ? rect.x + (labelWidth - width) / 2 : align === "left" ? rect.x : rect.x + labelWidth - width;
+    const ink = { left, right: left + width, top: rect.y + (height - lines * c.textHeight) / 2, bottom: rect.y + (height + lines * c.textHeight) / 2 };
+    const gap = c.labelGap;
+    if (drawn.some((other) => ink.left < other.right + gap && other.left < ink.right + gap && ink.top < other.bottom && other.top < ink.bottom)) {
+      return;
+    }
+    if (shortened) truncated.push(label.path);
+    drawn.push(ink);
+    c.text(text, rect, label.path, align);
   });
+  reportTruncatedLabels(c, truncated);
   series.forEach((s, j) => {
     const color = c.colors[j % c.colors.length], path = `${c.path}.data.columns.${s.column}`;
     if (spec.style === "filled") {
@@ -721,15 +951,14 @@ export function histogramBins(values) {
 function chartexPlot(c, { categories, legendWidth = 0, tickLabels = [], percentAxis = false }) {
   const { box, pad, fontPx } = c;
   const top = box.y + pad + c.lineHeight / 2;
-  const bottom = box.y + box.height - pad - c.lineHeight;
-  const height = Math.max(1, bottom - top);
   const tickWidth = Math.max(0, ...tickLabels.map((label) => c.width(label))) + fontPx * 0.5;
   const x = box.x + pad + tickWidth;
   const right = box.x + box.width - pad - legendWidth - (percentAxis ? c.width("100%") + fontPx : fontPx / 2);
-  const plot = { x, y: top, width: Math.max(1, right - x), height };
-  const band = plot.width / Math.max(1, categories.length);
-  categories.forEach((entry, i) => c.text(entry.name, { x: plot.x + i * band, y: plot.y + plot.height, width: band, height: c.lineHeight }, entry.path));
-  return { plot, band };
+  const { plot, plan } = planCategoryAxis(c, categories, (reserve) => ({
+    plot: { x, y: top, width: Math.max(1, right - x), height: Math.max(1, box.y + box.height - pad - reserve - top) }
+  }));
+  drawBottomLabels(c, plan, plot, categories);
+  return { plot, band: plot.width / Math.max(1, categories.length) };
 }
 
 function valueAxis(c, plot, scale) {
@@ -820,12 +1049,13 @@ function renderFunnelChart(c) {
   const { column, values, categories } = chartexValues(c.rows, c.columns);
   const count = categories.length;
   const max = Math.max(0, ...values.filter((value) => value !== null));
-  const labelWidth = Math.min(box.width * 0.3, Math.max(0, ...categories.map(c.width)) + fontPx * 0.5);
+  const labelWidth = Math.min(box.width * 0.3, Math.max(0, ...categories.map((name) => c.width(flatLabel(name)))) + fontPx * 0.5);
   const plot = { x: box.x + pad + labelWidth + pad / 2, y: box.y + pad, width: Math.max(1, box.width - 2 * pad - labelWidth - pad / 2), height: Math.max(1, box.height - 2 * pad) };
   const band = plot.height / count, height = band / 1.06, offset = (band - height) / 2;
+  const entries = categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` }));
+  drawRowLabels(c, planRowLabels(c, entries, band, labelWidth), entries, band, labelWidth, box.x + pad, (i) => plot.y + i * band);
   categories.forEach((name, i) => {
     const y = plot.y + i * band;
-    c.text(name, { x: box.x + pad, y, width: labelWidth, height: band }, `${c.path}.data.rows.${i}.0`, "right");
     const value = values[i];
     if (value === null || !(max > 0) || value <= 0) return;
     const width = plot.width * Math.min(1, value / max);

package/dist/fonts-browser.d.ts

@@ -4,6 +4,7 @@ import type {
   FontRegistryOptions,
 } from "./fonts.js";
 import type { AutoScriptSelection, BundledFontPackage, LazyFont, ScriptSelection } from "./fonts-node.js";
+import type { RenderSvgOptions } from "./svg.js";
 export type { LazyFont } from "./fonts-node.js";
 export type { AutoScriptSelection } from "./fonts-node.js";
 export { detectPresentationScripts, autoScriptSelection } from "./fonts-node.js";
@@ -18,15 +19,22 @@ export interface BrowserFontRegistry extends FontRegistry {
   /** Every vendored face a host can load on demand: family, style, package-relative file and pinned sha256. */
   readonly lazyFonts: readonly LazyFont[];
   /**
-   * Load the vendored faces (for example Intos for the default Aptos scheme) the presentation's font families resolve to
-   * under the registry's `substitutionPolicy` (nothing is downloaded for a family the policy would not resolve), once
-   * each, from `lazyFontsBaseUrl`. Fetches and verifies every file, then adds the faces to the document and the registry
-   * together; on failure nothing changes and the call can be retried. Call it before measuring a document. After
-   * `dispose()` it rejects with `font-registry-disposed`.
+   * Load the vendored faces (for example Intos Display 700 and Intos 400 for a plain deck in the default Aptos scheme) the
+   * presentation draws, resolved as the registry resolves them under its `substitutionPolicy` (nothing is downloaded for a
+   * family the policy would not resolve, nor for a weight or style nothing draws), once each, from `lazyFontsBaseUrl`.
+   * Fetches and verifies every file, then adds the faces to the document and the registry together; on failure nothing
+   * changes and the call can be retried. Call it before measuring a document, and again after edits: an edit that adds a
+   * bold or italic run loads just that face. Besides `signal`, the call takes the `renderSvg` options the document resolves
+   * with (`catalogs`, ...) over the loader's `renderOptions`. A document that does not resolve rejects with the error
+   * `renderSvg` throws for it. After `dispose()` it rejects with `font-registry-disposed`.
+   */
+  ensureLazyFonts(presentation: unknown, options?: { signal?: AbortSignal } & Partial<RenderSvgOptions>): Promise<LazyFont[]>;
+  /**
+   * Synchronous: the vendored faces the presentation draws under the registry's policy that are not loaded yet. Empty means
+   * `ensureLazyFonts` fetches nothing. `renderOptions` are the `renderSvg` options the document resolves with (`catalogs`, ...)
+   * over the loader's `renderOptions`. Throws what `renderSvg` throws for a document that does not resolve.
    */
-  ensureLazyFonts(presentation: unknown, options?: { signal?: AbortSignal }): Promise<LazyFont[]>;
-  /** Synchronous: the vendored faces the presentation needs under the registry's policy that are not loaded yet. Empty means `ensureLazyFonts` fetches nothing. */
-  pendingLazyFonts(presentation: unknown): LazyFont[];
+  pendingLazyFonts(presentation: unknown, renderOptions?: Partial<RenderSvgOptions>): LazyFont[];
 
   /** Load script faces for ISO 15924 codes (or "all") from `scriptBaseUrl`. Resolves with the newly loaded package names. */
   loadScripts(scripts: ScriptSelection, options?: { signal?: AbortSignal }): Promise<string[]>;
@@ -39,9 +47,9 @@ export interface BrowserFontRegistry extends FontRegistry {
    * OPFFontError whose `details` are `{ loaded: string[]; failed: {package, code, message}[] }`. A failed call (fetch, hash, FontFace load) leaves nothing loaded and can be retried; after
    * `dispose()` it rejects with `font-registry-disposed`.
    */
-  ensureScripts(presentation: unknown, options?: { signal?: AbortSignal }): Promise<AutoScriptSelection & { loaded: string[]; uncovered: string[] }>;
-  /** Synchronous: package names the presentation needs that are not loaded yet. Empty means `ensureScripts` fetches nothing, so a host can render immediately. */
-  pendingScripts(presentation: unknown): string[];
+  ensureScripts(presentation: unknown, options?: { signal?: AbortSignal } & Partial<RenderSvgOptions>): Promise<AutoScriptSelection & { loaded: string[]; uncovered: string[] }>;
+  /** Synchronous: package names the presentation needs that are not loaded yet. Empty means `ensureScripts` fetches nothing, so a host can render immediately. Text decides, so a document is analyzed without resolving its layouts; `renderOptions.catalogs` matter for font schemes only the host's catalogs have (FF-41). */
+  pendingScripts(presentation: unknown, renderOptions?: Partial<RenderSvgOptions>): string[];
   /** Names of the script-pack packages loaded so far. */
   readonly loadedScriptPackages: string[];
 }
@@ -60,6 +68,12 @@ export declare function loadBrowserFontRegistry(
     scriptBaseUrl?: string;
     /** Where the host serves this package's `fonts` directory, so vendored faces (Intos, the open families) load on demand from `<base>/<package-relative file>` (fonts/intos/..., fonts/<family>/...). */
     lazyFontsBaseUrl?: string;
+    /**
+     * FF-41: the `renderSvg` options the documents resolve with (`catalogs` above all), the default for `pendingLazyFonts`,
+     * `ensureLazyFonts`, `pendingScripts` and `ensureScripts`. A layout or font scheme id that only the host's catalogs have
+     * resolves the same way here as it does when the host renders. A call's own options win.
+     */
+    renderOptions?: Partial<RenderSvgOptions>;
   },
 ): Promise<BrowserFontRegistry>;
 export declare function scriptFontPackages(scripts: ScriptSelection): BundledFontPackage[];
@@ -72,10 +86,37 @@ export declare function scriptFontEntries(
 export declare function lazyFontList(): readonly LazyFont[];
 /** Hash-pinned browser entries for the vendored faces, served by the host from `baseUrl` at their package-relative paths. */
 export declare function lazyFontEntries(options: { baseUrl: string }, list?: readonly LazyFont[]): (BrowserFontInput & { url: string; family: string; weight: number; italic: boolean; sha256: string; package: string })[];
-/** The font families a presentation's slides resolve (heading, body and code roles); empty for a document that does not resolve. */
-export declare function presentationFamilies(presentation: unknown): Set<string>;
 /**
- * The vendored faces a set of resolved families needs that the registry does not hold, following the registry's own order and
+ * The font families a presentation's slides resolve (heading, body and code roles of every slide). `options` are the
+ * `renderSvg` options the document resolves with (`catalogs`, ...). A document that does not resolve throws what `renderSvg`
+ * throws for it (FF-41: it no longer returns an empty set). This is the role families, not what is drawn: see `presentationFaces`.
+ */
+export declare function presentationFamilies(presentation: unknown, options?: Partial<RenderSvgOptions>): Set<string>;
+/** A face request or a drawn face: a family, a weight and a style. */
+export interface FaceRequest { family: string; weight: number; italic: boolean }
+/**
+ * The faces a preview of the presentation draws (FF-41), sorted by family, style and weight: the renderer's own layout and
+ * painting with a recording measurement, so heading and body roles, bold and italic runs, tables, furniture, chart labels and
+ * the code role (only where code is drawn), per-slide overrides and script slots are all followed. Without `registry` the
+ * faces are the styles as the document names them. With `registry` (`{faces, policy, aliases, fallbackFamily}`: the faces a
+ * registry holds or could hold and its substitution options) every style resolves as that registry resolves it, in the two
+ * steps drawing takes (role family, then weight within it), and the result is the faces the registry paints.
+ * `options` are the `renderSvg` options the document resolves with; a document that does not resolve throws what `renderSvg`
+ * throws for it.
+ */
+export declare function presentationFaces(presentation: unknown, options?: Partial<RenderSvgOptions>, registry?: { faces: Iterable<FaceRequest>; policy?: "none" | "metric" | "visual"; aliases?: ReadonlyMap<string, string>; fallbackFamily?: string }): FaceRequest[];
+/**
+ * The vendored faces (of `lazy`) a presentation draws that the registry does not hold. `held` is `registry.describeFaces()`,
+ * `loaded` the lazy files already loaded; `policy`, `aliases` and `fallbackFamily` are the registry's. Face level: only the
+ * drawn faces, so an edit adding a bold run adds one face.
+ */
+export declare function lazyFacesNeeded(presentation: unknown, renderOptions: Partial<RenderSvgOptions> | undefined, context: { lazy: readonly LazyFont[]; held: Iterable<FaceRequest>; loaded?: ReadonlySet<string>; policy?: "none" | "metric" | "visual"; aliases?: ReadonlyMap<string, string>; fallbackFamily?: string }): LazyFont[];
+/**
+ * The vendored faces a list of requests needs that the registry does not hold, following the registry's own order and
  * `policy` (default "visual"): the family itself, an alias target, the declared replacement, then its alternates.
+ * Entries are face requests (`presentationFaces`), resolved as the registry resolves them with every vendored face loaded
+ * over `held` (`registry.describeFaces()`), so only the faces asked for are returned and a partially loaded family still
+ * loads its missing faces; or family names, which mean every face of the family. Without `held` a face request falls back to
+ * family level with `hasFamily`.
  */
-export declare function lazyFontsFor(families: Iterable<string>, context: { lazy: readonly LazyFont[]; hasFamily(family: string): boolean; loaded?: ReadonlySet<string>; policy?: "none" | "metric" | "visual"; aliases?: ReadonlyMap<string, string> }): LazyFont[];
+export declare function lazyFontsFor(entries: Iterable<string | { family: string; weight?: number; italic?: boolean }>, context: { lazy: readonly LazyFont[]; held?: Iterable<FaceRequest>; hasFamily?: (family: string) => boolean; loaded?: ReadonlySet<string>; policy?: "none" | "metric" | "visual"; aliases?: ReadonlyMap<string, string>; fallbackFamily?: string }): LazyFont[];

package/dist/fonts-browser.js

@@ -1,10 +1,10 @@
 import { createFontRegistry, OPFFontError } from "./fonts.js";
 import { lazyFontEntries, lazyFontList } from "./lazy-font-list.js";
-import { lazyFontsFor, presentationFamilies } from "./lazy-fonts.js";
+import { lazyFacesNeeded } from "./lazy-fonts.js";
 import { analyzePresentationScripts, nextFallbackPackage, scriptFontPackages, scriptPackageEntries, scriptSelectionOf, uncoveredCjkCharacters } from "./script-font-pack.js";
 export { autoScriptSelection, detectPresentationScripts, scriptFontEntries, scriptFontPackages } from "./script-font-pack.js";
 export { lazyFontEntries, lazyFontList } from "./lazy-font-list.js";
-export { lazyFontsFor, presentationFamilies } from "./lazy-fonts.js";
+export { lazyFacesNeeded, lazyFontsFor, presentationFaces, presentationFamilies } from "./lazy-fonts.js";
 
 async function verifyDigest(entry, data, subtle) {
   if (entry.sha256 === undefined) return;
@@ -91,6 +91,9 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
   // Script faces (FF-19) are loaded lazily, once a document needs them, and only for the scripts it uses.
   const scriptPackages = new Set();
   let queue = Promise.resolve(), disposed = false;
+  // FF-41: the `renderSvg` options a document resolves with (`catalogs`, ...). `options.renderOptions` are the defaults; a call's own
+  // options (everything but `signal`) are added over them, so a host that passes its canvas options gets the same resolution here.
+  const renderOptionsFor = (callOptions) => { const { signal: _signal, ...own } = callOptions ?? {}; return { ...options.renderOptions, ...own }; };
   const gone = () => new OPFFontError("font-registry-disposed", "The font registry was disposed.");
   const baseUrl = () => {
     if (typeof options.scriptBaseUrl !== "string" || !options.scriptBaseUrl)
@@ -142,14 +145,15 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
      * fallback needs for characters the loaded faces lack. Cheap when nothing new is needed; call it after edits and
      * render again afterwards. Resolves with the detected scripts, the packages loaded by this call, the scripts no
      * pinned font serves and `uncovered`, drawn CJK characters no loaded face covers (the renderer reports
-     * `missing-glyph` for them). Each package loads all or nothing. If some package fails, the others still load: the
+     * `missing-glyph` for them). Besides `signal`, the call takes the `renderSvg` options the document resolves with
+     * (`catalogs`, ...) over the loader's `renderOptions`. Each package loads all or nothing. If some package fails, the others still load: the
      * call then rejects with an OPFFontError (the first failure's code) whose `details` hold `loaded` (packages this
      * call did load) and `failed` (`{package, code, message}` per failed package); nothing is lost and a later call
      * retries only the failures. `signal` aborts this call's fetches.
      */
     async ensureScripts(presentation, callOptions) {
       if (disposed) throw gone();
-      const analysis = analyzePresentationScripts(presentation), selection = scriptSelectionOf(analysis);
+      const analysis = analyzePresentationScripts(presentation, undefined, renderOptionsFor(callOptions)), selection = scriptSelectionOf(analysis);
       const loadedNow = [], failed = [];
       const attempt = async (item) => {
         try { loadedNow.push(...(await loadPackageList([item], callOptions))); }
@@ -166,9 +170,9 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
       }
       return { ...selection, loaded: loadedNow, uncovered: uncoveredCjkCharacters(analysis, { covers }) };
     },
-    /** Synchronous: script-pack packages the presentation needs that are not loaded yet. Empty means `ensureScripts` would fetch nothing. */
-    pendingScripts(presentation) {
-      const analysis = analyzePresentationScripts(presentation);
+    /** Synchronous: script-pack packages the presentation needs that are not loaded yet. Empty means `ensureScripts` would fetch nothing. `renderOptions` are the `renderSvg` options the document resolves with (`catalogs`, ...). */
+    pendingScripts(presentation, renderOptions) {
+      const analysis = analyzePresentationScripts(presentation, undefined, renderOptionsFor(renderOptions));
       const primary = scriptFontPackages(scriptSelectionOf(analysis).scripts).map((item) => item.name).filter((name) => !scriptPackages.has(name));
       if (primary.length) return primary;
       const next = nextFallbackPackage(analysis, { covers, loaded: scriptPackages });
@@ -181,8 +185,9 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
   const lazy = lazyFontList(), lazyLoaded = new Set();
   const policy = options.substitutionPolicy ?? "none";
   const aliasTargets = new Map(Object.entries(options.aliases ?? {}).map(([from, to]) => [from.toLowerCase(), to]));
-  const hasFamily = (family) => registry.describeFaces().some((face) => face.family.toLowerCase() === String(family).toLowerCase());
-  const neededLazy = (presentation) => lazyFontsFor(presentationFamilies(presentation), { lazy, hasFamily, loaded: lazyLoaded, policy, aliases: aliasTargets });
+  // Face level (FF-41): the faces the document draws, resolved as the registry resolves them with every vendored face loaded.
+  // A document that does not resolve throws what `renderSvg` throws for it.
+  const neededLazy = (presentation, callOptions) => lazyFacesNeeded(presentation, renderOptionsFor(callOptions), { lazy, held: registry.describeFaces(), loaded: lazyLoaded, policy, aliases: aliasTargets, fallbackFamily: options.fallbackFamily });
   const lazyBaseUrl = () => {
     if (typeof options.lazyFontsBaseUrl !== "string" || !options.lazyFontsBaseUrl)
       throw new OPFFontError("invalid-font-source", "Loading vendored fonts requires lazyFontsBaseUrl, where the host serves the package's fonts directory.");
@@ -192,16 +197,19 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
     /** Every vendored face a host can load on demand: family, style, package-relative file and pinned sha256. */
     lazyFonts: lazy,
     /**
-     * Load the vendored faces the presentation's font families resolve to under the registry's substitution policy (nothing
-     * is downloaded for a family the policy would not resolve), once each. All or nothing: on any failure (fetch, hash,
-     * FontFace.load, registry) the document and registry are unchanged and the call can be retried. Cheap when nothing is
-     * needed. Call it before measuring a document, and again after edits that change fonts. Resolves with the faces added.
+     * Load the vendored faces the presentation draws (FF-41: only the faces, by family, weight and style, that the renderer
+     * draws; a bold or italic run added by an edit adds just that face) as the registry resolves them under its substitution
+     * policy (nothing is downloaded for a family the policy would not resolve), once each. All or nothing: on any failure
+     * (fetch, hash, FontFace.load, registry) the document and registry are unchanged and the call can be retried. Cheap when
+     * nothing is needed. Call it before measuring a document, and again after edits that change fonts. Resolves with the faces
+     * added. Besides `signal`, the call takes the `renderSvg` options the document resolves with (`catalogs`, ...) over the
+     * loader's `renderOptions`; a document that does not resolve rejects with what `renderSvg` throws for it.
      */
     ensureLazyFonts(presentation, callOptions = {}) {
       const result = queue.then(async () => {
         if (disposed) throw gone();
         callOptions.signal?.throwIfAborted?.();
-        const pending = neededLazy(presentation);
+        const pending = neededLazy(presentation, callOptions);
         if (!pending.length) return [];
         const fetched = (await fetchFaces(lazyFontEntries({ baseUrl: lazyBaseUrl() }, pending), callOptions.signal)).map((entry) => ({ ...entry, embed: "used" }));
         let browserFaces;
@@ -229,8 +237,8 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
       queue = result.catch(() => {});
       return result;
     },
-    /** Synchronous: the vendored faces the presentation needs under the registry's policy that are not loaded yet. Empty means `ensureLazyFonts` fetches nothing. */
-    pendingLazyFonts: (presentation) => neededLazy(presentation),
+    /** Synchronous: the vendored faces the presentation draws under the registry's policy that are not loaded yet. Empty means `ensureLazyFonts` fetches nothing. `renderOptions` are the `renderSvg` options the document resolves with (`catalogs`, ...). */
+    pendingLazyFonts: (presentation, renderOptions) => neededLazy(presentation, renderOptions),
   });
   /** Names of the script-pack packages loaded so far. */
   Object.defineProperty(registry, "loadedScriptPackages", { get: () => [...scriptPackages], enumerable: true });

package/dist/fonts-node.d.ts

@@ -1,4 +1,5 @@
 import type {FontRegistry,FontRegistryOptions,EmbeddedFont,FontFaceInput,ScriptFontProfile} from "./fonts.js";
+import type {RenderSvgOptions} from "./svg.js";
 /** A caller-supplied face (FF-31), for example a licensed copy of the real font. Node callers may pass a file path. */
 export type CallerFontFace = FontFaceInput | (Omit<FontFaceInput, "data"> & {path: string});
 /** "all" or ISO 15924 codes (`Jpan`, `Hans`, `Hant`, `Kore`, `Arab`, `Hebr`, `Deva`, `Thai`, ...). */
@@ -15,8 +16,9 @@ export interface AutoScriptSelection {
 /** Script-pack packages that `scripts: "auto"` loaded or found not installed. */
 export interface AppliedScriptSelection extends AutoScriptSelection { packages: string[]; notInstalled: string[]; /** Drawn CJK characters no loaded face covers (glyph fallback stopped at its cap). */ uncovered?: string[] }
 /** Script keys whose faces a preview of the presentation needs: text decides, the document language only tells Han scripts apart. */
-export declare function detectPresentationScripts(presentation: unknown, options?: { profile?: ScriptFontProfile }): string[];
-export declare function autoScriptSelection(presentation: unknown, options?: { profile?: ScriptFontProfile }): AutoScriptSelection;
+/** `options` may also carry the `renderSvg` options the document resolves with (`catalogs`): a font scheme that exists only in the host's catalogs and names a script font selects that font's script (FF-41). */
+export declare function detectPresentationScripts(presentation: unknown, options?: { profile?: ScriptFontProfile } & Partial<RenderSvgOptions>): string[];
+export declare function autoScriptSelection(presentation: unknown, options?: { profile?: ScriptFontProfile } & Partial<RenderSvgOptions>): AutoScriptSelection;
 export interface ScriptPackOptions {
   /** Caller-supplied faces, loaded first so a licensed real font resolves as an exact face (FF-31). */
   faces?: readonly CallerFontFace[];
@@ -28,6 +30,8 @@ export interface ScriptPackOptions {
   scripts?: ScriptSelection | "auto";
   /** The presentation whose text decides `scripts: "auto"`. */
   presentation?: unknown;
+  /** The `renderSvg` options the presentation resolves with (`catalogs`, ...), for the font schemes `scripts: "auto"` reads (FF-41). */
+  renderOptions?: Partial<RenderSvgOptions>;
   /** Receives `script-font-unavailable` and `script-font-not-installed` for `scripts: "auto"`. */
   onDiagnostic?: (diagnostic: {code: string; message: string; script?: string; package?: string; scripts?: string[]}) => void;
 }

package/dist/fonts-node.js

@@ -78,9 +78,10 @@ const loadPack = pack => loadPackages(BUNDLED_FONT_MANIFEST.packages.filter(item
 /**
  * Adds the script pack. `scripts` is 'all', ISO 15924 codes, or 'auto' (FF-19): detect the scripts the
  * `presentation` draws and load only their faces. Auto never fails on a missing optional package or a
- * script no pinned font serves; it reports them through `onDiagnostic` and `selection`.
+ * script no pinned font serves; it reports them through `onDiagnostic` and `selection`. `renderOptions` are the host's `renderSvg`
+ * options (see `analyzePresentationScripts`).
  */
-async function withScripts(loaded, scripts, {presentation, onDiagnostic} = {}) {
+async function withScripts(loaded, scripts, {presentation, onDiagnostic, renderOptions} = {}) {
   if (scripts === undefined || (Array.isArray(scripts) && !scripts.length)) return loaded;
   // A package the registry already loaded (the default Noto Sans fallback) is never loaded twice.
   const notLoaded = list => list.filter(pkg => !loaded.packages?.includes(pkg.name));
@@ -89,7 +90,7 @@ async function withScripts(loaded, scripts, {presentation, onDiagnostic} = {}) {
     return {...loaded, entries:[...loaded.entries, ...embedUsed(extra.entries)], fontFiles:[...loaded.fontFiles, ...extra.fontFiles], packages:[...(loaded.packages ?? []), ...extra.packages]};
   }
   if (presentation === null || typeof presentation !== "object") throw new OPFFontError("invalid-font-scripts", "scripts: 'auto' needs the presentation whose text decides the scripts.", {scripts});
-  const selection = scriptSelectionOf(analyzePresentationScripts(presentation)), skipped = [];
+  const selection = scriptSelectionOf(analyzePresentationScripts(presentation, undefined, renderOptions)), skipped = [];
   const extra = await loadPackages(notLoaded(scriptFontPackages(selection.scripts)), skipped);
   for (const script of selection.unavailable) onDiagnostic?.({code: "script-font-unavailable", script, message: `No pinned open font serves script '${script}'; that text uses the design font.`});
   for (const item of skipped) onDiagnostic?.({code: "script-font-not-installed", package: item.package, scripts: item.scripts, message: `Install ${item.package}@${item.version} to preview ${item.scripts.join(", ")} text with its designated open font.`});
@@ -102,12 +103,12 @@ async function withScripts(loaded, scripts, {presentation, onDiagnostic} = {}) {
  * has (Japanese-only kanji in a Simplified Chinese run, hanja) needs the next CJK face along the fallback chain.
  * Adds those packages to the registry and its fontFiles until every such character is covered or the chain ends.
  */
-async function completeFallback(registry, presentation, loaded, onDiagnostic) {
+async function completeFallback(registry, presentation, loaded, onDiagnostic, renderOptions) {
   const selection = loaded.selection;
   if (!selection) return;
   const seen = new Set([...selection.packages, ...selection.notInstalled]);
   for (;;) {
-    const analysis = analyzePresentationScripts(presentation), covers = character => registry.scriptFacesCover(character);
+    const analysis = analyzePresentationScripts(presentation, undefined, renderOptions), covers = character => registry.scriptFacesCover(character);
     const next = nextFallbackPackage(analysis, {covers, loaded: seen});
     if (!next) {
       const uncovered = uncoveredCjkCharacters(analysis, {covers, limit: 8});
@@ -152,17 +153,17 @@ async function withFaces(loaded, faces) {
 }
 
 /** Bundled, openly licensed faces. No system font discovery or network requests. */
-export async function loadBundledFontRegistry({scripts, faces, presentation, onDiagnostic, ...options} = {}) {
-  const {entries, fontFiles, selection} = await withFaces(await withScripts(await loadPack("base"), scripts, {presentation, onDiagnostic}), faces);
+export async function loadBundledFontRegistry({scripts, faces, presentation, onDiagnostic, renderOptions, ...options} = {}) {
+  const {entries, fontFiles, selection} = await withFaces(await withScripts(await loadPack("base"), scripts, {presentation, onDiagnostic, renderOptions}), faces);
   const registry = Object.assign(createFontRegistry(entries,options),{fontFiles, ...(selection ? {scriptSelection: selection} : {})});
   registry.lazyFonts = lazyOf(registry);
-  await completeFallback(registry, presentation, {fontFiles, selection}, onDiagnostic);
+  await completeFallback(registry, presentation, {fontFiles, selection}, onDiagnostic, renderOptions);
   return registry;
 }
 
 /** Office substitutes plus the open families that font schemes select (FF-31),
  * optionally alongside the base Roboto pack. `includeOpenFonts: false` leaves the open families out. */
-export async function loadOfficeFontRegistry({scripts, faces, presentation, onDiagnostic, ...options} = {}) {
+export async function loadOfficeFontRegistry({scripts, faces, presentation, onDiagnostic, renderOptions, ...options} = {}) {
   const {entries, fontFiles, packages} = await loadPack("office");
   for (const [include, pack] of [[options.includeOpenFonts, "open"], [options.includeBaseFonts, "base"]]) {
     if (include === false) continue;
@@ -177,17 +178,17 @@ export async function loadOfficeFontRegistry({scripts, faces, presentation, onDi
   // caller asked for it with scripts it is fallback-only, so no other family's preview changes. "auto" counts as asking for it when the
   // presentation itself selects Latn (a Sylfaen scheme: Noto Sans is its designated replacement, which a fallback-only face never is), as
   // an explicit list does; a presentation that does not select Latn keeps it fallback-only.
-  const requested = scripts === "auto" && presentation !== null && typeof presentation === "object" ? scriptFontPackages(autoScriptSelection(presentation).scripts).map(pkg => pkg.name)
+  const requested = scripts === "auto" && presentation !== null && typeof presentation === "object" ? scriptFontPackages(autoScriptSelection(presentation, renderOptions).scripts).map(pkg => pkg.name)
     : scripts === undefined || scripts === "auto" || (Array.isArray(scripts) && !scripts.length) ? [] : scriptFontPackages(scripts).map(pkg => pkg.name);
   const fallback = await loadPackages(scriptFontPackages(["Latn"]).filter(pkg => !requested.includes(pkg.name)), undefined, {fallbackOnly:true});
   fontFiles.push(...fallback.fontFiles);
   entries.push(...fallback.entries);
   packages.push(...fallback.packages);
-  const loaded = await withFaces(await withScripts({entries, fontFiles, packages}, scripts, {presentation, onDiagnostic}), faces);
+  const loaded = await withFaces(await withScripts({entries, fontFiles, packages}, scripts, {presentation, onDiagnostic, renderOptions}), faces);
   const aliases = options.includeOpenFonts === false ? options.aliases : {...renamedAliases(), ...options.aliases};
   const registry = Object.assign(createFontRegistry(loaded.entries,{substitutionPolicy:"metric",...options,...(aliases?{aliases}:{})}),{fontFiles:loaded.fontFiles, ...(loaded.selection ? {scriptSelection: loaded.selection} : {})});
   registry.lazyFonts = lazyOf(registry);
-  await completeFallback(registry, presentation, loaded, onDiagnostic);
+  await completeFallback(registry, presentation, loaded, onDiagnostic, renderOptions);
   return registry;
 }
 

package/dist/fonts.js

@@ -66,6 +66,62 @@ function skipUndecodableLookups(font) {
   return guarded;
 }
 
+/**
+ * The face a registry draws for `family` (a validated concrete family: theme tokens are already resolved) in `style`, chosen
+ * from `faces` ({family, familyGroup, weight, italic, fallbackOnly?, scripts?}) under the substitution policy, aliases and
+ * fallback family, or an OPFFontError when none applies. Shared by the registry's resolution and by the lazy loader's face
+ * planning (lazy-fonts.js), so the browser loads exactly the faces Node would draw with everything loaded.
+ */
+export function pickFace(faces, family, style, {policy = "none", aliases = new Map(), fallbackFamily} = {}) {
+  const findFamily = name => faces.filter(face=>face.family.toLowerCase()===name.toLowerCase() || face.familyGroup.toLowerCase()===name.toLowerCase());
+  const weight = style.fontWeight ?? 400;
+  let matching = findFamily(family), compatibility = "exact", rule, targetWeight = weight, styleFallback = false, via = "family";
+  const encodedSymbol = /^(wingdings(?: [23])?|webdings|symbol)$/i.test(family);
+  if (!matching.length && encodedSymbol) throw new OPFFontError("font-encoding-required", `Font '${family}' requires character mapping before substitution.`, {path:style.path,fontFamily:family});
+  if (!matching.length && aliases.has(family.toLowerCase())) {
+    matching = findFamily(aliases.get(family.toLowerCase())); compatibility = "visual"; via = "alias";
+  }
+  if (!matching.length && policy!=="none") {
+    const candidate = FONT_COMPATIBILITY.find(entry=>entry.requestedFamily.toLowerCase()===family.toLowerCase());
+    const tier = candidate?.compatibility==="metric" && !candidate.weights.includes(weight) ? "visual" : candidate?.compatibility;
+    // A declared visual replacement is used in visual mode, and in metric mode only when the
+    // policy keeps it as a metric-mode fallback (Cambria -> Caladea); it is still reported visual.
+    // In metric mode the fallback applies only where the pre-FF-31 metric rule did: the declared
+    // replacement at weights 400 and 700, normal or italic, with an exact face weight.
+    const metricFallback = policy!=="visual" && candidate?.metricModeFallback===true && [400,700].includes(weight);
+    const allowVisual = policy==="visual" || metricFallback;
+    if (candidate && (allowVisual || tier==="metric")) {
+      // A family that names its weight (Segoe UI Semibold, Arial Black) selects that weight in
+      // the replacement; its bold style link still selects bold (FF-31).
+      const wanted = candidate.weight ? (weight>=600 ? Math.max(candidate.weight,700) : candidate.weight) : weight;
+      for (const [index, substitute] of candidate.substitutes.entries()) {
+        // Only the declared replacement can carry the row's metric claim; an alternate is visual.
+        const substituteTier = index===0 ? tier : "visual";
+        if (substituteTier==="visual" && !(policy==="visual" || metricFallback && index===0)) continue;
+        const exactWeight = substituteTier==="metric" || policy!=="visual";
+        const pool = findFamily(substitute).filter(face=>!face.fallbackOnly && (!exactWeight || face.weight===weight));
+        let available = pool.filter(face=>face.italic===!!style.italic);
+        // Visual replacements without the requested style draw the other one and say so.
+        if (!available.length && substituteTier==="visual" && policy==="visual" && pool.length) { available = pool.filter(face=>!face.italic); styleFallback = available.length>0; }
+        if (available.length) { matching=available; compatibility=substituteTier; rule={...candidate, substituteIndex:index}; targetWeight=wanted; via="replacement"; break; }
+      }
+    }
+  }
+  // Equations require an explicit math-aware choice; never fall through to body text.
+  if (!matching.length && /^(cambria math|stix two math|noto sans math)$/i.test(family)) throw new OPFFontError("math-font-required", `Supply '${family}' or an explicit math-font alias.`, {path:style.path});
+  if (!matching.length && fallbackFamily) { matching=findFamily(fallbackFamily); compatibility="generic"; via="fallback"; }
+  if (!matching.length) throw unavailableFontError(family, style, policy);
+  const styled = styleFallback ? matching : matching.filter(face=>face.italic===!!style.italic);
+  // Script replacement faces have no italics; use upright glyphs and advances.
+  if (!styled.length && style.italic && matching.length && matching.every(face=>face.scripts)) { if (compatibility!=="generic") compatibility="visual"; }
+  else matching = styled;
+  if (!matching.length) throw new OPFFontError("font-style-unavailable", `No ${style.italic ? "italic" : "upright"} face for '${family}'.`, {path:style.path});
+  matching.sort((a,b)=>Math.abs(a.weight-targetWeight)-Math.abs(b.weight-targetWeight) || a.weight-b.weight);
+  const face = matching[0];
+  if ((face.weight!==targetWeight || styleFallback) && compatibility!=="generic") compatibility="visual";
+  return {face, compatibility, rule, styleFallback, via};
+}
+
 export function createFontRegistry(entries, options = {}) {
   if (!Array.isArray(entries) || !entries.length) throw new OPFFontError("empty-font-registry", "Supply at least one font file.");
   const makeFace = entry => {
@@ -127,7 +183,6 @@ export function createFontRegistry(entries, options = {}) {
   const policy = options.substitutionPolicy ?? "none";
   if (!["none","metric","visual"].includes(policy)) throw new OPFFontError("invalid-font-policy", "substitutionPolicy must be none, metric, or visual.");
   if (options.fallbackFamily) validFamily(options.fallbackFamily);
-  const findFamily = family => faces.filter(face=>face.family.toLowerCase()===family.toLowerCase() || face.familyGroup.toLowerCase()===family.toLowerCase());
   const resolve = style => {
     const requested = validFamily(style?.fontFamily);
     const weight = style.fontWeight ?? 400;
@@ -138,50 +193,7 @@ export function createFontRegistry(entries, options = {}) {
     const family = themeKey ? options.themeFonts?.[themeKey] : requested;
     if (!family || family.startsWith("+")) throw new OPFFontError("unresolved-theme-font", `Supply a concrete theme family for '${requested}'.`, {path:style.path});
     validFamily(family);
-    let matching = findFamily(family), compatibility = "exact", rule, targetWeight = weight, styleFallback = false, via = "family";
-    const encodedSymbol = /^(wingdings(?: [23])?|webdings|symbol)$/i.test(family);
-    if (!matching.length && encodedSymbol) throw new OPFFontError("font-encoding-required", `Font '${family}' requires character mapping before substitution.`, {path:style.path,fontFamily:family});
-    if (!matching.length && aliases.has(family.toLowerCase())) {
-      matching = findFamily(aliases.get(family.toLowerCase())); compatibility = "visual"; via = "alias";
-    }
-    if (!matching.length && policy!=="none") {
-      const candidate = FONT_COMPATIBILITY.find(entry=>entry.requestedFamily.toLowerCase()===family.toLowerCase());
-      const tier = candidate?.compatibility==="metric" && !candidate.weights.includes(weight) ? "visual" : candidate?.compatibility;
-      // A declared visual replacement is used in visual mode, and in metric mode only when the
-      // policy keeps it as a metric-mode fallback (Cambria -> Caladea); it is still reported visual.
-      // In metric mode the fallback applies only where the pre-FF-31 metric rule did: the declared
-      // replacement at weights 400 and 700, normal or italic, with an exact face weight.
-      const metricFallback = policy!=="visual" && candidate?.metricModeFallback===true && [400,700].includes(weight);
-      const allowVisual = policy==="visual" || metricFallback;
-      if (candidate && (allowVisual || tier==="metric")) {
-        // A family that names its weight (Segoe UI Semibold, Arial Black) selects that weight in
-        // the replacement; its bold style link still selects bold (FF-31).
-        const wanted = candidate.weight ? (weight>=600 ? Math.max(candidate.weight,700) : candidate.weight) : weight;
-        for (const [index, substitute] of candidate.substitutes.entries()) {
-          // Only the declared replacement can carry the row's metric claim; an alternate is visual.
-          const substituteTier = index===0 ? tier : "visual";
-          if (substituteTier==="visual" && !(policy==="visual" || metricFallback && index===0)) continue;
-          const exactWeight = substituteTier==="metric" || policy!=="visual";
-          const faces = findFamily(substitute).filter(face=>!face.fallbackOnly && (!exactWeight || face.weight===weight));
-          let available = faces.filter(face=>face.italic===!!style.italic);
-          // Visual replacements without the requested style draw the other one and say so.
-          if (!available.length && substituteTier==="visual" && policy==="visual" && faces.length) { available = faces.filter(face=>!face.italic); styleFallback = available.length>0; }
-          if (available.length) { matching=available; compatibility=substituteTier; rule={...candidate, substituteIndex:index}; targetWeight=wanted; via="replacement"; break; }
-        }
-      }
-    }
-    // Equations require an explicit math-aware choice; never fall through to body text.
-    if (!matching.length && /^(cambria math|stix two math|noto sans math)$/i.test(family)) throw new OPFFontError("math-font-required", `Supply '${family}' or an explicit math-font alias.`, {path:style.path});
-    if (!matching.length && options.fallbackFamily) { matching=findFamily(options.fallbackFamily); compatibility="generic"; via="fallback"; }
-    if (!matching.length) throw unavailableFontError(family, style, policy);
-    const styled = styleFallback ? matching : matching.filter(face=>face.italic===!!style.italic);
-    // Script replacement faces have no italics; use upright glyphs and advances.
-    if (!styled.length && style.italic && matching.length && matching.every(face=>face.scripts)) { if (compatibility!=="generic") compatibility="visual"; }
-    else matching = styled;
-    if (!matching.length) throw new OPFFontError("font-style-unavailable", `No ${style.italic ? "italic" : "upright"} face for '${family}'.`, {path:style.path});
-    matching.sort((a,b)=>Math.abs(a.weight-targetWeight)-Math.abs(b.weight-targetWeight) || a.weight-b.weight);
-    const face = matching[0];
-    if ((face.weight!==targetWeight || styleFallback) && compatibility!=="generic") compatibility="visual";
+    const {face, compatibility, rule, styleFallback, via} = pickFace(faces, family, style, {policy, aliases, fallbackFamily:options.fallbackFamily});
     // FF-31: `substitute` is true whenever the face is not the chosen family itself (policy
     // replacement, alias, script replacement or fallback). Exporters keep writing sourceFamily.
     const substitute = via!=="family", policyRow = substitute ? fontPolicyFor(family) : undefined;

package/dist/lazy-fonts.js

@@ -1,52 +1,180 @@
 import { fontPolicyFor } from "./font-policy.js";
-import { resolvePresentation } from "./svg.js";
+import { pickFace } from "./fonts.js";
+import { renderSvgDeck, resolvePresentation } from "./svg.js";
 export { lazyFontEntries, lazyFontList } from "./lazy-font-list.js";
 
 /**
  * FF-31: the vendored faces (the open families and Intos) are not in a registry's eager list. Browser hosts load them
- * on demand, from separate hash-pinned files, when a document's font families resolve to them. This module holds the
- * pure parts (which faces exist, which a presentation needs); fonts-browser.js does the fetching.
+ * on demand, from separate hash-pinned files, when a document draws them. This module holds the pure parts (which faces
+ * exist, which a presentation needs); fonts-browser.js does the fetching.
+ *
+ * FF-41: the analysis is face level. `presentationFaces` lists the {family, weight, italic} the renderer draws (resolved as a
+ * registry resolves them, on request), `lazyFacesNeeded` picks the vendored faces among them a registry lacks, and
+ * `lazyFontsFor` selects the vendored faces a list of face requests resolves to; none of them loads whole families.
  */
 
 const lc = value => String(value).trim().toLowerCase();
 
-/** The font families a presentation's slides resolve (heading, body and code roles), or an empty set for a document that does not resolve. */
-export function presentationFamilies(presentation) {
+/**
+ * Render options that decide how a document resolves (catalogs, validate, date, ...) are forwarded from the host's
+ * `renderSvg` options. The analysis supplies its own measurement and reports nothing: callbacks, the host's registry
+ * measurement, embedded fonts, asset resolution and tracing are dropped.
+ */
+const NOT_RESOLVE_OPTIONS = new Set(["textMeasurement", "embeddedFonts", "fontFiles", "useBundledFonts", "loadSystemFonts", "onDiagnostic", "trace", "glyphFallback", "imageResolver", "strictAssets", "slideIndex", "signal"]);
+function resolveOptionsOf(options) {
+  return Object.fromEntries(Object.entries(options ?? {}).filter(([key]) => !NOT_RESOLVE_OPTIONS.has(key)));
+}
+
+/**
+ * The font families a presentation's slides resolve (heading, body and code roles of every slide, including per-slide
+ * design overrides), as `renderSvg` resolves them with the same `options` (`catalogs`, ...). This is the role families,
+ * not what is drawn: use `presentationFaces` for that.
+ *
+ * A document that does not resolve throws the error `renderSvg` throws for it (an OPFRenderError such as
+ * `catalog-resolution-failed` for a layout id no catalog has, or `invalid-opf`), never an empty set: a document whose layout comes only from
+ * `options.catalogs` needs those catalogs here too.
+ */
+export function presentationFamilies(presentation, options = {}) {
   const families = new Set();
-  let resolved;
-  try { resolved = resolvePresentation(presentation, {}); } catch { return families; }
+  const resolved = resolvePresentation(presentation, resolveOptionsOf(options));
   for (const slide of resolved.slides) for (const family of Object.values(slide.design?.fonts ?? {})) if (typeof family === "string" && family) families.add(family);
   return families;
 }
 
+// A measurement that costs nothing to overflow: text is measured as very narrow, so layout never fails on text that
+// only the real faces would fit. Only the styles it is asked about matter.
+const RECORDED_EM = 0.01;
+
+/** The registry's view with faces added: what a registry holding `faces` resolves families to (`pickFace`, its own selection). */
+function registryView({ faces, policy = "none", aliases = new Map(), fallbackFamily }) {
+  const pool = [...faces].map(face => ({ ...face, familyGroup: face.familyGroup ?? face.family }));
+  return style => {
+    const family = style?.fontFamily;
+    const { face } = pickFace(pool, family, style, { policy, aliases, fallbackFamily });
+    return { ...style, fontFamily: face.family, fontWeight: face.weight, italic: face.italic };
+  };
+}
+
+/**
+ * The faces a preview of the presentation draws, as `[{family, weight, italic}]`, sorted by family, style and weight. It is
+ * the renderer's own layout and painting run with a recording measurement, so it follows exactly what `renderSvg` measures
+ * and draws: the heading and body roles of every slide that draws them, bold and italic runs of rich text, table and cell
+ * styles, header and footer furniture, chart labels, metrics, quotes and timelines, the code role only where code is
+ * drawn, per-slide design overrides, font scheme and theme resolution, and script slots (a script run is requested in its
+ * slot's family). A role the document does not draw is not requested.
+ *
+ * Without `registry` the faces are the styles as the document names them: the family a role resolves to, with the weight
+ * a use asks for (700 for headings and bold runs, 400 for body, 500 to 800 where a design asks).
+ *
+ * With `registry` (`{faces, policy, aliases, fallbackFamily}`: the faces a registry holds or could hold, `{family, weight,
+ * italic}`, and its substitution options) every style resolves as that registry resolves it (`pickFace`, the registry's own
+ * selection: the family or its alias or policy replacement, italic before weight, the nearest weight, ties to the
+ * lighter), in the two steps drawing takes: a role's family resolves first, then each use's weight resolves within the
+ * family found. The result is the faces the registry paints, for example `Intos 700` for a 600-weight label of an Aptos
+ * deck. A style the registry cannot resolve is left as named (drawing reports it).
+ *
+ * `options` are the `renderSvg` options the document resolves with (`catalogs`, `date`, `validate`, ...). A document that
+ * does not resolve throws what `renderSvg` throws for it.
+ * @param {unknown} presentation
+ * @param {object} [options]
+ * @param {{faces: Iterable<{family: string, weight: number, italic: boolean}>, policy?: "none"|"metric"|"visual", aliases?: ReadonlyMap<string, string>, fallbackFamily?: string}} [registry]
+ * @returns {{family: string, weight: number, italic: boolean}[]}
+ */
+export function presentationFaces(presentation, options = {}, registry) {
+  const seen = new Map();
+  const resolve = registry ? registryView(registry) : undefined;
+  const settle = style => {
+    if (!resolve) return { ...style };
+    try { return resolve(style); } catch { return { ...style }; }
+  };
+  const record = style => {
+    const family = style?.fontFamily;
+    if (typeof family !== "string" || !family.trim() || family.startsWith("+")) return;
+    const weight = Number.isFinite(style.fontWeight) ? style.fontWeight : 400, italic = style.italic === true;
+    const key = `${lc(family)}\u0000${weight}\u0000${italic}`;
+    if (!seen.has(key)) seen.set(key, { family, weight, italic });
+  };
+  const textMeasurement = {
+    measure(text, size, style) { if (text !== "") record(settle(style)); return String(text).length * size * RECORDED_EM; },
+    resolveStyle: settle,
+  };
+  renderSvgDeck(presentation, { ...resolveOptionsOf(options), textMeasurement });
+  return [...seen.values()].sort((a, b) => a.family < b.family ? -1 : a.family > b.family ? 1 : Number(a.italic) - Number(b.italic) || a.weight - b.weight);
+}
+
+/**
+ * The vendored faces (of `lazy`) a presentation draws that the registry does not hold: what a registry loads before it can
+ * paint the document as Node paints it with every vendored face loaded. `held` lists the registry's faces
+ * (`registry.describeFaces()`), `loaded` the lazy files already loaded; `policy`, `aliases` and `fallbackFamily` are the
+ * registry's. `renderOptions` are the `renderSvg` options the document resolves with (`catalogs`, ...), and a document that
+ * does not resolve throws what `renderSvg` throws for it. Face level: a bold or italic run added by an edit adds just that face.
+ */
+export function lazyFacesNeeded(presentation, renderOptions, { lazy, held, loaded = new Set(), policy = "none", aliases = new Map(), fallbackFamily }) {
+  const heldFaces = [...held], heldKeys = new Set(heldFaces.map(faceKeyOf));
+  const missing = lazy.filter(face => !heldKeys.has(faceKeyOf(face)) && !loaded.has(face.file));
+  const drawn = new Set(presentationFaces(presentation, renderOptions, { faces: [...heldFaces, ...missing], policy, aliases, fallbackFamily }).map(faceKeyOf));
+  return missing.filter(face => drawn.has(faceKeyOf(face)));
+}
+function faceKeyOf(face) { return `${lc(face.family)}\u0000${face.weight}\u0000${!!face.italic}`; }
+
 /**
  * The vendored faces a document needs that the registry does not hold, following the registry's own order and substitution
  * policy: the family itself, an alias target, then (unless the policy is "none") the declared replacement and, under
- * "visual", its alternates. The first candidate the registry already has ends the search (it will resolve to that); the
- * first vendored candidate is needed, whole family, so the browser resolves exactly what Node resolves with everything
- * loaded, and nothing is downloaded for a family the policy would not resolve.
- * @param {Iterable<string>} families families the document resolves
- * @param {{lazy: readonly object[], hasFamily: (family: string) => boolean, loaded?: ReadonlySet<string>, policy?: "none"|"metric"|"visual", aliases?: ReadonlyMap<string, string>}} context
+ * "visual", its alternates.
+ *
+ * Entries are face requests `{family, weight, italic}` (from `presentationFaces`) or family names. A face request is
+ * resolved exactly as the registry resolves it with every vendored face loaded (`pickFace`, the registry's own selection,
+ * over the faces it holds plus the vendored ones): the vendored face it lands on is needed if the registry does not hold
+ * it, so a partially loaded family still loads its missing faces, and a face is never fetched for a weight or style the
+ * document does not draw. A family name means every face of the family the route resolves to (the whole family, as
+ * before FF-41). Nothing is downloaded for a family the policy would not resolve.
+ * @param {Iterable<string | {family: string, weight?: number, italic?: boolean}>} entries
+ * @param {{lazy: readonly object[], held?: Iterable<{family: string, weight: number, italic: boolean}>, hasFamily?: (family: string) => boolean, loaded?: ReadonlySet<string>, policy?: "none"|"metric"|"visual", aliases?: ReadonlyMap<string, string>, fallbackFamily?: string}} context
+ * `held` lists the registry's faces (`registry.describeFaces()`); it is what makes the check face level. Without it a face
+ * request falls back to family level with `hasFamily` (a held family needs nothing).
  */
-export function lazyFontsFor(families, { lazy, hasFamily, loaded = new Set(), policy = "visual", aliases = new Map() }) {
+export function lazyFontsFor(entries, { lazy, held, hasFamily, loaded = new Set(), policy = "visual", aliases = new Map(), fallbackFamily }) {
   const byFamily = new Map();
   for (const face of lazy) { const list = byFamily.get(lc(face.family)) ?? []; list.push(face); byFamily.set(lc(face.family), list); }
-  const needed = new Set();
-  for (const family of families) {
-    if (hasFamily(family)) continue;
-    if (byFamily.has(lc(family))) { needed.add(lc(family)); continue; }
+  const heldFaces = held === undefined ? undefined : [...held];
+  const faceKey = face => `${lc(face.family)}\u0000${face.weight}\u0000${!!face.italic}`;
+  const heldKeys = new Set((heldFaces ?? []).map(faceKey));
+  const has = hasFamily ?? (family => (heldFaces ?? []).some(face => lc(face.family) === lc(family)));
+  const needed = new Set(), neededFiles = new Set();
+  // Whole families (a family name, or a face request without a face-level registry view).
+  const addFamily = family => {
+    // A family the registry holds only in part still needs its other vendored faces (face level, when the registry's faces are known).
+    if (has(family)) { if (heldFaces && byFamily.has(lc(family))) needed.add(lc(family)); return; }
+    if (byFamily.has(lc(family))) { needed.add(lc(family)); return; }
     const target = aliases.get(lc(family));
-    if (target && (hasFamily(target) || byFamily.has(lc(target)))) { if (!hasFamily(target)) needed.add(lc(target)); continue; }
-    if (policy === "none") continue;
+    if (target && (has(target) || byFamily.has(lc(target)))) { if (byFamily.has(lc(target)) && (!has(target) || heldFaces)) needed.add(lc(target)); return; }
+    if (policy === "none") return;
     const row = fontPolicyFor(family), replacement = row?.replacement;
     const route = [];
     // Metric mode uses a metric replacement, or a visual one its policy row keeps as a metric-mode fallback; alternates are visual only.
     if (replacement && (policy === "visual" || replacement.compatibility === "metric" || replacement.metricModeFallback)) route.push(replacement.family);
     if (policy === "visual") route.push(...(row?.alternates ?? []));
     for (const candidate of route) {
-      if (hasFamily(candidate)) break;
+      if (has(candidate)) { if (heldFaces && byFamily.has(lc(candidate))) needed.add(lc(candidate)); break; }
       if (byFamily.has(lc(candidate))) { needed.add(lc(candidate)); break; }
     }
+  };
+  // The registry's view with every vendored face added: what Node draws with everything loaded.
+  let pool;
+  const universe = () => pool ??= [
+    ...heldFaces.map(face => ({ ...face, familyGroup: face.family })),
+    ...lazy.filter(face => !heldKeys.has(faceKey(face)) && !loaded.has(face.file)).map(face => ({ family: face.family, familyGroup: face.family, weight: face.weight, italic: !!face.italic, lazy: face })),
+  ];
+  for (const entry of entries) {
+    if (typeof entry === "string") { addFamily(entry); continue; }
+    if (heldFaces === undefined) { addFamily(entry.family); continue; }
+    let picked;
+    try { picked = pickFace(universe(), entry.family, { fontFamily: entry.family, fontWeight: entry.weight ?? 400, italic: entry.italic === true }, { policy, aliases, fallbackFamily }); }
+    // A face the registry cannot resolve even with every vendored face (unknown family, symbol font, ...) needs nothing here: drawing reports it.
+    catch { continue; }
+    if (picked.face.lazy) neededFiles.add(picked.face.lazy.file);
   }
-  return [...needed].flatMap(family => byFamily.get(family)).filter(face => !loaded.has(face.file));
+  const all = [...needed].flatMap(family => byFamily.get(family) ?? []);
+  for (const face of lazy) if (neededFiles.has(face.file)) all.push(face);
+  return [...new Set(all)].filter(face => !loaded.has(face.file) && !heldKeys.has(faceKey(face)));
 }

package/dist/script-font-pack.js

@@ -7,6 +7,7 @@ import * as scriptFontModule from "./script-fonts.js";
 import { scriptOfCharacter, scriptsOfText } from "./script-fonts.js";
 // Optional core exports are read from the namespace so an older published core still loads.
 import * as opfCore from "@openpresentation/opf";
+import { presentationFamilies } from "./lazy-fonts.js";
 
 const SCRIPT_ALIASES = Object.freeze({Hira: "Jpan", Kana: "Jpan", Hrkt: "Jpan", Hang: "Kore", Hani: "Hans", Zyyy: "Latn"});
 
@@ -121,8 +122,12 @@ function scriptOfFamily(family) {
  * open replacement, so the face is needed even when no drawn character has the script. A slide may override the
  * scheme (`slide.design`), so each such slide is resolved too. `han` is the CJK script the scheme names, which tells
  * Han-only text apart when the language does not (a Yu Gothic deck whose language is English).
+ *
+ * `renderOptions` are the host's `renderSvg` options. Core resolves a font scheme id from the document and its bundled catalogs
+ * only, while the renderer also reads `renderOptions.catalogs`; when a host passes catalogs the families the renderer resolves
+ * per slide count too, so a scheme that exists only in the host's catalogs and names a script font still loads that font.
  */
-function designScripts(presentation, profile) {
+function designScripts(presentation, profile, renderOptions) {
   const scripts = new Set();
   let han;
   const note = resolved => {
@@ -140,6 +145,9 @@ function designScripts(presentation, profile) {
       try { note(opfCore.resolveScriptFonts(presentation, { slideIndex })); } catch { /* the renderer reports it when it draws the slide */ }
     });
   }
+  if (renderOptions?.catalogs) {
+    for (const family of presentationFamilies(presentation, renderOptions)) note({ heading: { latin: family }, body: { latin: family } });
+  }
   return { scripts: [...scripts].sort(), han };
 }
 
@@ -147,10 +155,13 @@ function designScripts(presentation, profile) {
  * What a preview of the presentation draws: its script profile, the scripts of its text (the renderer's own
  * itemization, so language-dependent punctuation counts), the scripts its font schemes need (`design`, for example
  * Jpan for a Yu Gothic scheme) and the CJK characters that a glyph fallback might have to draw with another CJK face.
+ * The text decides, so a document is analyzed without resolving its layouts and catalogs; `renderOptions` (the host's
+ * `renderSvg` options) matter only for font schemes the host supplies in `renderOptions.catalogs`, which then resolve
+ * like the renderer resolves them; a document that then does not resolve throws what `renderSvg` throws for it.
  */
-export function analyzePresentationScripts(presentation, profile = presentationScriptProfile(presentation)) {
+export function analyzePresentationScripts(presentation, profile = presentationScriptProfile(presentation), renderOptions) {
   const scripts = new Set(), cjk = new Set();
-  const design = designScripts(presentation, profile);
+  const design = designScripts(presentation, profile, renderOptions);
   // Han-only text in a deck whose language is not CJK draws with the scheme's own CJK face when the scheme names one.
   const itemizing = design.han && !cjkKeys.includes(profile?.script) ? { ...profile, script: design.han } : profile;
   for (const text of drawnStrings(presentation)) {
@@ -166,10 +177,10 @@ export function analyzePresentationScripts(presentation, profile = presentationS
  * (Japanese, Korean, Simplified or Traditional Chinese) and makes curly quotes, dashes and the ellipsis
  * East Asian. Text the preview never draws (ids, alt text, sources, assets, catalogs, notes) is ignored.
  * Greek and Cyrillic add nothing: the office registry always carries Noto Sans (the glyph-fallback face) and Roboto covers them.
- * Pass `profile` to reuse a resolved profile.
+ * Pass `profile` to reuse a resolved profile. Other options are the host's `renderSvg` options (`catalogs`, see `analyzePresentationScripts`).
  */
-export function detectPresentationScripts(presentation, { profile } = {}) {
-  return analyzePresentationScripts(presentation, profile).detected;
+export function detectPresentationScripts(presentation, { profile, ...renderOptions } = {}) {
+  return analyzePresentationScripts(presentation, profile, renderOptions).detected;
 }
 
 /** The scripts of an analysis that a pinned pack serves (`scripts`, the input for `scriptFontPackages`) and those it does not. */
@@ -186,7 +197,8 @@ export function scriptSelectionOf(analysis) {
  * Cherokee or Tifinagh, which draw with whatever the design font covers).
  */
 export function autoScriptSelection(presentation, options) {
-  return scriptSelectionOf(analyzePresentationScripts(presentation, options?.profile));
+  const { profile, ...renderOptions } = options ?? {};
+  return scriptSelectionOf(analyzePresentationScripts(presentation, profile, renderOptions));
 }
 
 /**

package/dist/svg.js

@@ -1221,7 +1221,7 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)
 function renderChart(item, box, bound, options) {
   // Catalog chart types (kept, deprecated and aliased ids) preview the native
   // construct opf-pptx exports; other ids keep the legacy single-series preview.
-  const rendered = renderCatalogChart(item, box, bound, options, { tag, traceAttrs, stableNumber, renderTextBox });
+  const rendered = renderCatalogChart(item, box, bound, options, { tag, traceAttrs, stableNumber, renderTextBox, reportDiagnostic });
   if (rendered) return rendered;
   const chart = item.value ?? {};
   const chartType = chart.type ?? engineDefaults.chartTypes[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -56,9 +56,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/script-fonts.js && node --check src/script-font-pack.js && node --check test/script-fonts.mjs && node --check test/glyph-fallback.mjs && node --check test/script-fonts-browser.mjs && node --check test/script-fonts-auto.mjs && node --check test/script-fonts-auto-robust.mjs && node --check test/mongolian-shaping.mjs && node --check test/script-fonts-auto-browser.mjs && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check test/font-policy.mjs && node --check test/open-fonts.mjs && node --check test/aptos-preview.mjs && node --check test/aptos-preview-browser.mjs && node --check test/lazy-fonts.mjs && node --check test/lazy-fonts-browser.mjs && node --check test/lazy-face-fallback.mjs && node --check test/lazy-face-fallback-browser.mjs && node --check src/font-policy.js && node --check scripts/update-font-policy.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/rich-tab.mjs && node --check test/rich-tab-browser.mjs && node --check test/rich-tab-estimated-browser.mjs && node --check test/styled-table.mjs && node --check test/color-references.mjs && node --check test/default-font-scheme.mjs && node --check test/chart-colors.mjs && node --check test/chart-axis.mjs && node --check src/charts.js && node --check test/chart-types.mjs && node --check test/chart-scale.mjs && node --check test/chart-catalog.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs && node --check test/furniture.mjs && node --check test/socials.mjs && node --check test/slide-image.mjs && node --check test/slide-image-treatments.mjs && node --check test/item-alignment.mjs && node --check test/cover-centering.mjs && node --check scripts/font-license.mjs && node --check test/font-licenses.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs",
+    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/script-fonts.js && node --check src/script-font-pack.js && node --check test/script-fonts.mjs && node --check test/theme-slots.mjs && node --check test/glyph-fallback.mjs && node --check test/script-fonts-browser.mjs && node --check test/script-fonts-auto.mjs && node --check test/script-fonts-auto-robust.mjs && node --check test/mongolian-shaping.mjs && node --check test/script-fonts-auto-browser.mjs && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check test/font-policy.mjs && node --check test/open-fonts.mjs && node --check test/aptos-preview.mjs && node --check test/aptos-preview-browser.mjs && node --check test/lazy-fonts.mjs && node --check test/lazy-faces.mjs && node --check test/lazy-fonts-browser.mjs && node --check test/lazy-face-fallback.mjs && node --check test/lazy-face-fallback-browser.mjs && node --check src/font-policy.js && node --check scripts/update-font-policy.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/rich-tab.mjs && node --check test/rich-tab-browser.mjs && node --check test/rich-tab-estimated-browser.mjs && node --check test/styled-table.mjs && node --check test/color-references.mjs && node --check test/default-font-scheme.mjs && node --check test/chart-colors.mjs && node --check test/chart-axis.mjs && node --check test/chart-category-labels.mjs && node --check src/charts.js && node --check test/chart-types.mjs && node --check test/chart-scale.mjs && node --check test/chart-catalog.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs && node --check test/furniture.mjs && node --check test/socials.mjs && node --check test/slide-image.mjs && node --check test/slide-image-treatments.mjs && node --check test/item-alignment.mjs && node --check test/cover-centering.mjs && node --check scripts/font-license.mjs && node --check test/font-licenses.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check test/gallery-layout-alignment.mjs",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && npm run check:fonts && node test/furniture.mjs && node test/socials.mjs && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/slide-image.mjs && node test/slide-image-treatments.mjs && node test/chart-colors.mjs && node test/chart-axis.mjs && node test/chart-types.mjs && node test/chart-scale.mjs && node test/chart-catalog.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/font-policy.mjs && node test/open-fonts.mjs && node test/aptos-preview.mjs && node test/lazy-fonts.mjs && node test/lazy-face-fallback.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/rich-tab.mjs && node test/color-references.mjs && node test/default-font-scheme.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/script-fonts.mjs && node test/glyph-fallback.mjs && node test/script-fonts-auto.mjs && node test/script-fonts-auto-robust.mjs && node test/mongolian-shaping.mjs && node test/design-preview.mjs && node test/item-alignment.mjs && node test/cover-centering.mjs && npm run build:browser-check && npm run test:styled-table",
+    "test": "npm run build && npm run check:fonts && node test/furniture.mjs && node test/socials.mjs && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/slide-image.mjs && node test/slide-image-treatments.mjs && node test/chart-colors.mjs && node test/chart-axis.mjs && node test/chart-category-labels.mjs && node test/chart-types.mjs && node test/chart-scale.mjs && node test/chart-catalog.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/font-policy.mjs && node test/open-fonts.mjs && node test/aptos-preview.mjs && node test/lazy-fonts.mjs && node test/lazy-faces.mjs && node test/lazy-face-fallback.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/rich-tab.mjs && node test/color-references.mjs && node test/default-font-scheme.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/script-fonts.mjs && node test/theme-slots.mjs && node test/glyph-fallback.mjs && node test/script-fonts-auto.mjs && node test/script-fonts-auto-robust.mjs && node test/mongolian-shaping.mjs && node test/design-preview.mjs && node test/item-alignment.mjs && node test/gallery-layout-alignment.mjs && node test/cover-centering.mjs && npm run build:browser-check && npm run test:styled-table",
     "check:fonts": "node test/font-licenses.mjs && npm run check:font-hotlinks",
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "test:golden": "npm run build && node test/golden.mjs",
@@ -96,7 +96,7 @@
     "@expo-google-fonts/roboto": "0.4.3",
     "@expo-google-fonts/roboto-mono": "0.4.2",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf": "^0.11.2",
+    "@openpresentation/opf": "^0.11.3",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",