@openpresentation/opf-render 0.11.5 → 0.11.7

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 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.
+**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. Faces a host serves itself load the same way: `loadBrowserFontRegistry(startup, { extraLazyFonts: [{ family, weight, italic, url, sha256 }] })` adds them to the lazy list (`registry.lazyFonts`, `package: "host"`), so the registry can start with Roboto Regular only (`splitStartupFaces(faces)` splits a manifest into the startup face and the rest) and a document draws, fetches and verifies just the faces it needs, vendored and host faces in one `ensureLazyFonts` call. `sha256` is mandatory, loads are all or nothing, `dispose()` removes the faces, and, like the vendored ones, host faces are `embed: "used"`: they are not in `registry.embeddedFonts` (only the startup faces are), and a standalone SVG embeds one only when passed explicitly through `registry.selectEmbeddedFonts` and the slide's text uses its family. `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.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.11.7 lets a browser registry load the host's own faces on demand (`extraLazyFonts`, `splitStartupFaces`: a registry can start with Roboto Regular only; additive, `registry.lazyFonts` still lists the 94 vendored faces plus the host's). 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.
 
@@ -250,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

@@ -68,6 +68,15 @@ 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: faces the host serves itself, loaded on demand like the vendored ones: hash-verified, all or nothing, in the same
+     * `lazyFacesNeeded` pass (a document that draws a vendored and an extra face fetches both in one `ensureLazyFonts`), removed
+     * by `dispose()`. They appear in `registry.lazyFonts` with `package: "host"`. Typically the faces of a manifest that
+     * `splitStartupFaces` left out of the startup set. Like the vendored faces they are `embed: "used"`: not in `registry.embeddedFonts` (only the startup faces are);
+     * pass `registry.selectEmbeddedFonts(...)` to embed them in a standalone SVG, and then only when a slide's text uses their family.
+     * A missing or malformed `sha256`, a duplicate `url` or an invalid family throws `invalid-font-source`.
+     */
+    extraLazyFonts?: readonly ExtraLazyFont[];
     /**
      * 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
@@ -85,7 +94,15 @@ export declare function scriptFontEntries(
 /** Every vendored face of this package: family, style, package-relative file, sha256. */
 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 })[];
+export declare function lazyFontEntries(options: { baseUrl?: string }, list?: readonly LazyFont[]): (BrowserFontInput & { url: string; family: string; weight: number; italic: boolean; sha256: string; package: string })[];
+/** A face the host serves itself and loads on demand (FF-41): `sha256` is mandatory, the registry verifies the bytes before use. */
+export interface ExtraLazyFont { family: string; weight: number; italic?: boolean; url: string; sha256: string; license?: string }
+/**
+ * Split faces (a host's manifest, `registry.embeddedFonts`) into the ones a registry starts with and the rest, to pass as
+ * `extraLazyFonts`. The default startup set is Roboto Regular (the renderer's fallback family); `startup` chooses other faces, for
+ * example the ones `presentationFaces` says the first deck draws. Order is kept.
+ */
+export declare function splitStartupFaces<T extends { family: string; weight: number; italic?: boolean }>(faces: readonly T[], options?: { startup?: (face: T) => boolean }): { startup: T[]; rest: T[] };
 /**
  * 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`

package/dist/fonts-browser.js

@@ -1,9 +1,9 @@
 import { createFontRegistry, OPFFontError } from "./fonts.js";
-import { lazyFontEntries, lazyFontList } from "./lazy-font-list.js";
+import { lazyFontEntries, lazyFontList, normalizeExtraLazyFonts } from "./lazy-font-list.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 { lazyFontEntries, lazyFontList, splitStartupFaces } from "./lazy-font-list.js";
 export { lazyFacesNeeded, lazyFontsFor, presentationFaces, presentationFamilies } from "./lazy-fonts.js";
 
 async function verifyDigest(entry, data, subtle) {
@@ -22,6 +22,8 @@ async function verifyDigest(entry, data, subtle) {
 
 /** Fetch only host-selected font files, then use those exact bytes for shaping and CSS. */
 export async function loadBrowserFontRegistry(entries, options = {}) {
+  // Validate the host's extra faces first: a bad list must not leave startup faces registered in the document with no registry to dispose.
+  const extraLazy = normalizeExtraLazyFonts(options.extraLazyFonts);
   const documentRef = options.document ?? globalThis.document;
   const FontFaceRef = documentRef?.defaultView?.FontFace ?? globalThis.FontFace;
   if (!documentRef?.fonts || !FontFaceRef)
@@ -182,7 +184,9 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
   // FF-31: vendored faces (the open families and Intos) load on demand, once a document needs them. They share the
   // script loader's queue and disposed state, and the same all-or-nothing order: fetch and verify, load every FontFace,
   // then add them to the document and the registry together.
-  const lazy = lazyFontList(), lazyLoaded = new Set();
+  // FF-41: the host's extra lazy faces (`options.extraLazyFonts`, validated above) load like the vendored ones, from their own urls,
+  // hash-verified, in the same `lazyFacesNeeded` pass, so a document that draws both fetches both in one call.
+  const lazy = Object.freeze([...lazyFontList(), ...extraLazy]), lazyLoaded = new Set();
   const policy = options.substitutionPolicy ?? "none";
   const aliasTargets = new Map(Object.entries(options.aliases ?? {}).map(([from, to]) => [from.toLowerCase(), to]));
   // Face level (FF-41): the faces the document draws, resolved as the registry resolves them with every vendored face loaded.
@@ -194,7 +198,7 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
     return options.lazyFontsBaseUrl;
   };
   Object.assign(registry, {
-    /** Every vendored face a host can load on demand: family, style, package-relative file and pinned sha256. */
+    /** Every face a host can load on demand: the vendored ones (family, style, package-relative file, pinned sha256) and the host's `extraLazyFonts` (`package: "host"`, `file` and `url` the url it serves them from). */
     lazyFonts: lazy,
     /**
      * Load the vendored faces the presentation draws (FF-41: only the faces, by family, weight and style, that the renderer
@@ -211,7 +215,9 @@ export async function loadBrowserFontRegistry(entries, options = {}) {
         callOptions.signal?.throwIfAborted?.();
         const pending = neededLazy(presentation, callOptions);
         if (!pending.length) return [];
-        const fetched = (await fetchFaces(lazyFontEntries({ baseUrl: lazyBaseUrl() }, pending), callOptions.signal)).map((entry) => ({ ...entry, embed: "used" }));
+        // The vendored faces need lazyFontsBaseUrl; the host's own faces carry their url. Both are embed "used": not in registry.embeddedFonts.
+        const entries = lazyFontEntries({ baseUrl: pending.some((face) => face.package !== "host") ? lazyBaseUrl() : undefined }, pending);
+        const fetched = (await fetchFaces(entries, callOptions.signal)).map((entry) => ({ ...entry, embed: "used" }));
         let browserFaces;
         try {
           browserFaces = await Promise.all(fetched.map(async (entry) => {

package/dist/fonts-node.d.ts

@@ -36,7 +36,7 @@ export interface ScriptPackOptions {
   onDiagnostic?: (diagnostic: {code: string; message: string; script?: string; package?: string; scripts?: string[]}) => void;
 }
 /** A vendored face that an SVG embeds only when its text names the family (the open families and Intos), and that browser hosts load on demand from a separate hash-pinned file. */
-export interface LazyFont { readonly package: string; readonly family: string; readonly weight: number; readonly italic: boolean; /** Path relative to the package root, for example fonts/intos/Intos-Regular.ttf. */ readonly file: string; readonly sha256: string; readonly license: string; readonly renamedFrom?: string }
+export interface LazyFont { readonly package: string; readonly family: string; readonly weight: number; readonly italic: boolean; /** Path relative to the package root, for example fonts/intos/Intos-Regular.ttf. */ readonly file: string; readonly sha256: string; readonly license: string; readonly renamedFrom?: string; /** Set on a host's extra lazy face (`extraLazyFonts`, `package: "host"`): where the host serves the file from. */ readonly url?: string }
 export type ScriptFontRegistry = FontRegistry & {fontFiles:string[]; /** Set for `scripts: "auto"`. */ scriptSelection?: AppliedScriptSelection};
 export type NodeFontRegistry = ScriptFontRegistry & {/** The embed "used" faces this registry holds, with the files a host copies to serve them itself. */ lazyFonts: readonly LazyFont[]};
 export declare function loadBundledFontRegistry(options?: FontRegistryOptions & ScriptPackOptions): Promise<NodeFontRegistry>;

package/dist/lazy-font-list.js

@@ -13,11 +13,55 @@ export function lazyFontList(manifest = BUNDLED_FONT_MANIFEST) {
   }))));
 }
 
-/** Hash-pinned browser entries for the vendored faces, served by the host from `baseUrl` at their package-relative paths. */
+/**
+ * Hash-pinned browser entries for the vendored faces, served by the host from `baseUrl` at their package-relative paths. A face
+ * that carries its own `url` (a host's extra lazy face, FF-41) keeps it; `baseUrl` is then needed only for the faces without one.
+ */
 export function lazyFontEntries(options, list = lazyFontList()) {
   const baseUrl = options?.baseUrl;
-  if (typeof baseUrl !== "string" || !baseUrl) throw new OPFFontError("invalid-font-source", "lazyFontEntries needs a baseUrl, where the host serves the package's fonts directory.");
-  const base = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
-  return list.map(face => ({ url: `${base}${face.file}`, family: face.family, weight: face.weight, italic: face.italic, sha256: face.sha256, package: face.package }));
+  const needsBase = list.some(face => typeof face.url !== "string");
+  if (needsBase && (typeof baseUrl !== "string" || !baseUrl)) throw new OPFFontError("invalid-font-source", "lazyFontEntries needs a baseUrl, where the host serves the package's fonts directory.");
+  const base = needsBase ? (baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`) : "";
+  return list.map(face => ({ url: typeof face.url === "string" ? face.url : `${base}${face.file}`, family: face.family, weight: face.weight, italic: face.italic, sha256: face.sha256, package: face.package, ...(face.license ? { license: face.license } : {}) }));
+}
+
+/** Roboto Regular, the renderer's fallback family: the face a browser registry starts with. */
+const isRobotoRegular = face => face?.family === "Roboto" && face.weight === 400 && !face.italic;
+
+/**
+ * Split a list of faces (a host's manifest, `registry.embeddedFonts`) into the ones a registry starts with and the rest, which a
+ * host passes as `extraLazyFonts` so they load on demand. By default the startup set is Roboto Regular, the fallback family; pass
+ * `startup` to choose other faces (for example the ones `presentationFaces` says the first deck draws). Order is kept.
+ * @template {{family: string, weight: number, italic?: boolean}} T
+ * @param {readonly T[]} faces
+ * @param {{startup?: (face: T) => boolean}} [options]
+ * @returns {{startup: T[], rest: T[]}}
+ */
+export function splitStartupFaces(faces, options = {}) {
+  const test = options.startup ?? isRobotoRegular;
+  if (typeof test !== "function") throw new OPFFontError("invalid-font-source", "splitStartupFaces: startup must be a function.");
+  const startup = [], rest = [];
+  for (const face of faces) (test(face) ? startup : rest).push(face);
+  return { startup, rest };
+}
+
+/**
+ * Validate a host's extra lazy faces (`{family, weight, italic, url, sha256, license?}`) and shape them like the vendored ones
+ * (`package: "host"`, `file` = `url`). The SHA-256 is mandatory: the registry verifies every byte it adds.
+ */
+export function normalizeExtraLazyFonts(faces) {
+  if (faces === undefined) return [];
+  if (!Array.isArray(faces)) throw new OPFFontError("invalid-font-source", "extraLazyFonts must be an array of {family, weight, italic, url, sha256} entries.");
+  const seen = new Set();
+  return faces.map((face, index) => {
+    const label = `extraLazyFonts[${index}]`;
+    if (typeof face?.family !== "string" || !face.family.trim() || /[\u0000-\u001f"'\\<>;]/.test(face.family)) throw new OPFFontError("invalid-font-source", `${label} needs a plain family name.`);
+    if (!Number.isInteger(face.weight) || face.weight < 1 || face.weight > 1000) throw new OPFFontError("invalid-font-source", `${label} needs a weight between 1 and 1000.`);
+    if (typeof face.url !== "string" || !face.url) throw new OPFFontError("invalid-font-source", `${label} needs the url the host serves the font file from.`);
+    if (typeof face.sha256 !== "string" || !/^[0-9a-f]{64}$/i.test(face.sha256)) throw new OPFFontError("invalid-font-source", `${label} needs the font file's SHA-256 (64 hex digits): extra faces are verified before use.`);
+    if (seen.has(face.url)) throw new OPFFontError("invalid-font-source", `${label} repeats url ${face.url}.`);
+    seen.add(face.url);
+    return Object.freeze({ package: "host", family: face.family, weight: face.weight, italic: face.italic === true, file: face.url, url: face.url, sha256: face.sha256.toLowerCase(), ...(typeof face.license === "string" ? { license: face.license } : {}) });
+  });
 }
 

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.5",
+  "version": "0.11.7",
   "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-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 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",
+    "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/extra-lazy-fonts.mjs && node --check test/extra-lazy-fonts-browser.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-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/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",
+    "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/extra-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",
@@ -79,6 +79,7 @@
     "test:aptos-preview-browser": "node test/aptos-preview-browser.mjs artifacts/aptos-preview-browser.json",
     "test:lazy-face-fallback-browser": "node test/lazy-face-fallback-browser.mjs artifacts/lazy-face-fallback",
     "test:lazy-fonts-browser": "node test/lazy-fonts-browser.mjs artifacts/lazy-fonts",
+    "test:extra-lazy-fonts-browser": "node test/extra-lazy-fonts-browser.mjs artifacts/extra-lazy-fonts",
     "test:script-fonts-browser": "node test/script-fonts-browser.mjs artifacts/script-fonts-browser.json",
     "test:script-fonts-auto-browser": "node test/script-fonts-auto-browser.mjs artifacts/script-fonts-auto",
     "test:text": "node test/font-outlines.mjs && node test/accepted-text.mjs",
@@ -96,7 +97,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",