@openpresentation/opf-render 0.11.1 → 0.11.3

package/README.md

@@ -2,7 +2,7 @@
 
 **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.
 
-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.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.
 
@@ -176,7 +176,7 @@ const png = await svgToPng(slides[0], options);
 
 ### Load only the script faces a document uses (`scripts: 'auto'`)
 
-Hosts do not need to detect scripts themselves. `scripts: 'auto'` reads the presentation's drawn text and loads only the faces for the scripts it uses: a Latin, Greek or Cyrillic deck loads none, a Japanese deck loads Noto Sans JP, an Arabic deck the three Arabic packages. Text decides, so a deck whose `language` is `ja` but whose text is Latin still loads nothing. The document language only tells Han text apart (through core `resolveScriptFonts`, the same profile the renderer plans with; a core without it treats Han as Simplified Chinese, as the renderer does). Only drawn text counts (titles, text, list items, runs, table cells, chart labels, code, quotes, metrics, furniture); ids, image alt text and sources, URLs, assets, catalogs, speaker notes, `extensions`, a slide's `beat` and the deck's own name, description, filename, author, speaker, audience, purpose, tone, takeaway, duration, tags and narrative are ignored. The organization and a slide's `section` count only when a design turns on that generated header or footer field. Detection itemizes text exactly as drawing does, so with an East Asian language the curly quotes, dashes and ellipsis count as East Asian. `detectPresentationScripts(presentation)` and `autoScriptSelection(presentation)` (from `/fonts-node` and `/fonts-browser`) return the decision.
+Hosts do not need to detect scripts themselves. `scripts: 'auto'` reads the presentation's drawn text and loads only the faces for the scripts it uses: a Latin, Greek or Cyrillic deck loads none, a Japanese deck loads Noto Sans JP, an Arabic deck the three Arabic packages. Text decides, so a deck whose `language` is `ja` but whose text is Latin still loads nothing. The one exception is a font scheme that names a script font (Yu Gothic, Meiryo, Malgun Gothic, Microsoft YaHei, Arabic Typesetting, Mangal or a pinned Noto family, on the deck or on a slide's `design`): its Latin text previews with that font's open replacement, so its face loads whatever the text, and Han-only text in such a deck draws with the scheme's CJK face. `detected` still lists only what the text draws; `scripts` is what to load. The document language only tells Han text apart (through core `resolveScriptFonts`, the same profile the renderer plans with; a core without it treats Han as Simplified Chinese, as the renderer does). Only drawn text counts (titles, text, list items, runs, table cells, chart labels, code, quotes, metrics, furniture); ids, image alt text and sources, URLs, assets, catalogs, speaker notes, `extensions`, a slide's `beat` and the deck's own name, description, filename, author, speaker, audience, purpose, tone, takeaway, duration, tags and narrative are ignored. The organization and a slide's `section` count only when a design turns on that generated header or footer field. Detection itemizes text exactly as drawing does, so with an East Asian language the curly quotes, dashes and ellipsis count as East Asian. `detectPresentationScripts(presentation)` and `autoScriptSelection(presentation)` (from `/fonts-node` and `/fonts-browser`) return the decision.
 
 ```js
 // Node: pass the presentation with scripts: 'auto'. Auto never fails on a package that is not installed
@@ -244,6 +244,8 @@ Dependency policy:
 
 Browser support boundary: `renderSvg`, `renderSvgDeck`, and `resolvePresentation` are browser-importable pure JavaScript APIs. `svgToPng` and `svgToPdf` are Node APIs in this package version because they depend on the Node build of resvg.
 
+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.
+
 ## Development
 
 ```sh

package/dist/charts.js

@@ -0,0 +1,644 @@
+// Chart previews for the OPF chart type catalog (FF-22).
+//
+// The core catalog keeps one chart type per Office chart construct and
+// deprecates the rest with a replacement id (`deprecation.replacedBy`,
+// `mappings.openxml`). The tables below are carried here so the preview stays
+// synchronous and self-contained; test/chart-catalog.mjs checks them against
+// the installed core catalog. Kept ids render the construct PowerPoint shows
+// for the exported chart; deprecated ids render exactly like their replacement;
+// any other id returns null so the caller keeps its legacy single-series preview.
+import { chartColorForFill, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
+
+// Ordered series palette written by opf-pptx (`CHART_COLORS`), before the same
+// per-surface contrast adjustment (`chartColorForFill`).
+export const CHART_SERIES_COLORS = Object.freeze([
+  "#2874A6", "#1B4F72", "#5499C7", "#7BDBB2", "#3AC67A", "#24A89E",
+  "#F59E0B", "#EF4444", "#8B5CF6", "#14B8A6", "#0F172A", "#64748B"
+]);
+
+const bar = (dir, grouping) => ({ kind: "bar", dir, grouping });
+const line = (grouping, markers) => ({ kind: "line", grouping, markers });
+const area = (grouping) => ({ kind: "area", grouping });
+const radar = (style) => ({ kind: "radar", style, markers: style === "marker" });
+
+export const CHART_TYPES = Object.freeze({
+  column: bar("col", "clustered"),
+  "stacked-column-3x": bar("col", "stacked"),
+  "100pct-stacked-column-3x": bar("col", "percentStacked"),
+  bar: bar("bar", "clustered"),
+  "stacked-bar-3x": bar("bar", "stacked"),
+  "100pct-stacked-bar-3x": bar("bar", "percentStacked"),
+  line: line("standard", false),
+  "line-with-markers": line("standard", true),
+  "stacked-line-3x": line("stacked", false),
+  "stacked-line-with-markers-3x": line("stacked", true),
+  area: area("standard"),
+  "stacked-area-3x": area("stacked"),
+  "100pct-stacked-area-3x": area("percentStacked"),
+  pie: { kind: "pie" },
+  doughnut: { kind: "doughnut" },
+  scatter: { kind: "scatter" },
+  radar: radar("standard"),
+  "radar-with-markers": radar("marker"),
+  "filled-radar": radar("filled"),
+  treemap: { kind: "treemap" },
+  histogram: { kind: "histogram" },
+  pareto: { kind: "pareto" },
+  "box-and-whisker": { kind: "box" },
+  waterfall: { kind: "waterfall" },
+  funnel: { kind: "funnel" },
+  world: { kind: "map" }
+});
+
+const variants = (base, target) => Object.fromEntries([base, `${base}-2x`, `${base}-3x`].map((id) => [id, target]));
+const suffixes = (base, target) => Object.fromEntries(["", "-2x", "-3x", "-4x", "-5x", "-6x"].map((suffix) => [`${base}${suffix}`, target]));
+
+// Deprecated core ids -> kept replacement (core spec/catalogs/chart-types `deprecation.replacedBy`).
+export const DEPRECATED_CHART_TYPES = Object.freeze({
+  ...variants("100pct-bullet-bar", "100pct-stacked-bar-3x"),
+  "100pct-progress-bar": "100pct-stacked-bar-3x",
+  "100pct-stacked-bar-2x": "100pct-stacked-bar-3x",
+  ...variants("100pct-bullet-column", "100pct-stacked-column-3x"),
+  "100pct-stacked-column-2x": "100pct-stacked-column-3x",
+  "100pct-stacked-area-2x": "100pct-stacked-area-3x",
+  australia: "world",
+  canada: "world",
+  "united-kingdom": "world",
+  "united-states": "world",
+  "box-and-whisker-2x": "box-and-whisker",
+  "box-and-whisker-3x": "box-and-whisker",
+  ...variants("bullet-bar", "bar"),
+  "clustered-bar-2x": "bar",
+  ...variants("bullet-column", "column"),
+  "clustered-column": "column",
+  ...suffixes("dot-plot", "scatter"),
+  dumbbell: "scatter",
+  "line-2x": "line",
+  "line-3x": "line",
+  "line-with-high-low": "line",
+  ...suffixes("sparkline", "line"),
+  "line-with-high-low-and-markers": "line-with-markers",
+  "line-with-markers-2x": "line-with-markers",
+  "line-with-markers-3x": "line-with-markers",
+  "stacked-area-2x": "stacked-area-3x",
+  "stacked-bar-2x": "stacked-bar-3x",
+  "stacked-column-2x": "stacked-column-3x",
+  "stacked-line-2x": "stacked-line-3x",
+  "stacked-line-with-markers-2x": "stacked-line-with-markers-3x",
+  "treemap-2x": "treemap",
+  "treemap-3x": "treemap"
+});
+
+const ALIASES = Object.freeze({ donut: "doughnut" });
+
+/** Resolve a chart type id to its kept catalog id, or null for ids outside the catalog. */
+export function resolveChartType(type) {
+  const raw = String(type ?? "").trim().toLowerCase();
+  const id = ALIASES[raw] ?? DEPRECATED_CHART_TYPES[raw] ?? raw;
+  return Object.hasOwn(CHART_TYPES, id) ? id : null;
+}
+
+const RENDERERS = {
+  bar: renderCategoryChart,
+  line: renderCategoryChart,
+  area: renderCategoryChart,
+  pie: renderCircularChart,
+  doughnut: renderCircularChart,
+  scatter: renderScatterChart,
+  radar: renderRadarChart
+};
+
+/**
+ * Render a catalog chart. Returns null when the id is outside the catalog, has
+ * no preview renderer, or carries no inline category-major data, so the caller
+ * can keep its legacy output ("No chart data" for unresolved sources).
+ */
+export function renderCatalogChart(item, box, bound, options, svg) {
+  const id = resolveChartType(item.value?.type);
+  const spec = id && CHART_TYPES[id];
+  const render = spec && RENDERERS[spec.kind];
+  const data = item.value?.data;
+  const rows = Array.isArray(data?.rows) ? data.rows.map((row) => Array.isArray(row) ? row : [row]) : [];
+  const columns = Array.isArray(data?.columns) ? data.columns : [];
+  if (!render || !rows.length || columns.length < 2) return null;
+  const c = chartContext(item, box, bound, options, svg, rows, columns);
+  c.mark("rect", { x: box.x, y: box.y, width: box.width, height: box.height, fill: c.surface, stroke: bound.design.colors.border, "stroke-width": 1 }, item.path);
+  render(c, spec);
+  return svg.tag("g", { ...svg.traceAttrs(options, item.path), "data-opf-chart": options.trace ? id : undefined }, c.children.join("\n"));
+}
+
+function chartContext(item, box, bound, options, svg, rows, columns) {
+  const u = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
+  const composition = bound.composition ?? bound.geometry.composition ?? {};
+  const requested = 14, fontPx = Math.max(requested, composition.minFontSize ?? 16) * u;
+  const surface = bound.design.colors.surface;
+  const labelColor = textColorForFill(surface, bound.design.colors.text);
+  const style = resolveTextStyle({ fontFamily: bound.design.fonts.body, fontWeight: 400, italic: false, path: item.path }, options.textMeasurement);
+  const measure = textWidthMeasurer(style, options.textMeasurement);
+  const children = [];
+  const n = svg.stableNumber;
+  const numericAttrs = new Set(["x", "y", "width", "height", "cx", "cy", "r", "x1", "x2", "y1", "y2", "stroke-width"]);
+  const c = {
+    item, box, bound, options, svg, rows, columns, children, u, fontPx, surface, labelColor,
+    path: item.path,
+    pt: u * 4 / 3,
+    pad: 10 * u,
+    lineHeight: fontPx * 1.5,
+    colors: CHART_SERIES_COLORS.map((color) => chartColorForFill(surface, color)),
+    gridColor: bound.design.colors.border,
+    axisColor: "#888888",
+    number: chartNumber,
+    label: (value) => value === null || value === undefined ? "" : String(value),
+    width: (value) => measure(String(value), fontPx),
+    num: n,
+    mark(name, attrs, path) {
+      const out = {};
+      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, {
+        path, fontSize: requested, fontFamily: bound.design.fonts.body, fontWeight: 400,
+        fill: labelColor, options, align, verticalAlign: "middle"
+      }));
+    },
+    series(first = 1) {
+      return columns.slice(first).map((name, offset) => ({
+        name: c.label(name), column: first + offset, index: offset,
+        values: rows.map((row) => chartNumber(row[first + offset]))
+      }));
+    }
+  };
+  return c;
+}
+
+export function chartNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Shared axis and legend helpers
+
+/**
+ * Office-like automatic value axis: include zero unless every value sits in
+ * the top sixth of the range, add 5% headroom, then choose the smallest
+ * 1/2/5 x 10^k major unit that fits `maxIntervals`.
+ */
+export function niceScale(dataMin, dataMax, maxIntervals = 10, { percent = false } = {}) {
+  const limit = Number.isFinite(maxIntervals) ? Math.max(1, Math.floor(maxIntervals)) : 10;
+  if (percent) {
+    const min = dataMin < -1e-9 ? -1 : 0, max = dataMax > 1e-9 || min === 0 ? 1 : 0;
+    return scaleFrom(min, max, pickStep(min, max, limit, [0.1, 0.2, 0.25, 0.5, 1]));
+  }
+  if (!Number.isFinite(dataMin) || !Number.isFinite(dataMax)) { dataMin = 0; dataMax = 1; }
+  let lo = Math.min(dataMin, 0), hi = Math.max(dataMax, 0);
+  if (dataMin > 0 && dataMax - dataMin < dataMax / 6) lo = dataMin;
+  if (dataMax < 0 && dataMax - dataMin < -dataMin / 6) hi = dataMax;
+  if (hi === lo) {
+    if (hi === 0) hi = 1;
+    else if (hi > 0) lo = 0;
+    else hi = 0;
+  }
+  const span = hi - lo;
+  const top = hi > 0 ? hi + span / 20 : hi;
+  const bottom = lo < 0 ? lo - span / 20 : lo > 0 ? Math.max(0, lo - span / 20) : lo;
+  const raw = (top - bottom) / limit;
+  if (!(raw > 0) || !Number.isFinite(raw)) return normalizedScale(dataMin, dataMax, limit);
+  let exponent = Math.floor(Math.log10(raw)) - 1;
+  for (; exponent <= 308; exponent++) {
+    for (const mantissa of [1, 2, 5]) {
+      const step = mantissa * 10 ** exponent;
+      if (!(step > 0) || !Number.isFinite(step)) continue;
+      const min = Math.floor(bottom / step + 1e-9) * step, max = Math.ceil(top / step - 1e-9) * step;
+      if (Number.isFinite(min) && Number.isFinite(max) && Math.round((max - min) / step) <= limit) return scaleFrom(clean(min), clean(max), step);
+    }
+  }
+  return normalizedScale(dataMin, dataMax, limit);
+}
+
+// Work in representable units when headroom or a tick step exceeds Number's
+// range. Only axis bounds/ticks saturate at the representable endpoints; data
+// values keep their actual positions. Subnormal rounding may merge ticks.
+function normalizedScale(dataMin, dataMax, limit) {
+  const magnitude = Math.max(Math.abs(dataMin), Math.abs(dataMax));
+  const unit = 10 ** Math.floor(Math.log10(magnitude)) || Number.MIN_VALUE;
+  const normalized = niceScale(dataMin / unit, dataMax / unit, limit);
+  const restore = (value) => {
+    const scaled = value * unit;
+    return Number.isFinite(scaled) ? scaled : Math.sign(value) * Number.MAX_VALUE;
+  };
+  const min = Math.min(restore(normalized.min), dataMin);
+  const max = Math.max(restore(normalized.max), dataMax);
+  const ticks = [...new Set([min, ...normalized.ticks.map(restore), max])].sort((a, b) => a - b);
+  return { min, max, step: restore(normalized.step) || Number.MIN_VALUE, ticks };
+}
+
+// Keep ordinary arithmetic unchanged. A range spanning both finite endpoints
+// can overflow even though every value/bound is finite; divide before subtracting.
+function axisFraction(value, scale, reverse = false) {
+  const range = scale.max - scale.min;
+  const distance = reverse ? scale.max - value : value - scale.min;
+  if (Number.isFinite(range) && Number.isFinite(distance)) return distance / (range || 1);
+  const unit = Math.max(Math.abs(scale.min), Math.abs(scale.max));
+  const min = scale.min / unit, max = scale.max / unit, position = value / unit;
+  return (reverse ? max - position : position - min) / (max - min);
+}
+
+function pickStep(min, max, limit, steps) {
+  return steps.find((step) => Math.round((max - min) / step) <= limit) ?? max - min;
+}
+
+function scaleFrom(min, max, step) {
+  const ticks = [];
+  const count = Math.round((max - min) / step);
+  for (let index = 0; index <= count; index++) ticks.push(clean(min + index * step));
+  return { min, max, step, ticks };
+}
+
+function clean(value) {
+  const rounded = Number(value.toPrecision(12));
+  return Object.is(rounded, -0) ? 0 : rounded;
+}
+
+/** Office General / 0% tick labels. */
+export function formatTick(value, percent = false) {
+  if (percent) return `${clean(value * 100)}%`;
+  return String(clean(value));
+}
+
+function legendEntries(c, entries) {
+  // PowerPoint places the exported legend on the right (PptxGenJS legendPos r).
+  if (!entries.length) return 0;
+  const swatch = c.fontPx * 0.6, gap = c.fontPx * 0.4, keyWidth = entries.some((entry) => entry.key === "line") ? c.fontPx * 1.4 : swatch;
+  const textWidth = Math.max(...entries.map((entry) => c.width(entry.name)));
+  const width = Math.min(c.box.width * 0.45, keyWidth + gap + textWidth + c.fontPx * 0.5);
+  const rowHeight = Math.min(c.lineHeight, (c.box.height - 2 * c.pad) / entries.length);
+  const x = c.box.x + c.box.width - c.pad - width;
+  let y = c.box.y + Math.max(c.pad, (c.box.height - rowHeight * entries.length) / 2);
+  for (const entry of entries) {
+    const middle = y + rowHeight / 2;
+    // Legend keys follow the series format: a line (with marker) for line/radar
+    // series, a marker for scatter series, a filled square otherwise.
+    if (entry.key === "line") c.mark("polyline", { points: `${c.num(x)},${c.num(middle)} ${c.num(x + keyWidth)},${c.num(middle)}`, fill: "none", stroke: entry.color, "stroke-width": 2 * c.pt }, entry.path);
+    if (entry.key === "marker" || (entry.key === "line" && entry.marker)) c.mark("circle", { cx: x + keyWidth / 2, cy: middle, r: 3 * c.pt, fill: entry.color, stroke: entry.color, "stroke-width": 0.75 * c.pt }, entry.path);
+    if (!entry.key) c.mark("rect", { x, y: middle - swatch / 2, width: swatch, height: swatch, fill: entry.color }, entry.path);
+    c.text(entry.name, { x: x + keyWidth + gap, y, width: Math.max(1, width - keyWidth - gap), height: rowHeight }, entry.path, "left");
+    y += rowHeight;
+  }
+  return width + c.pad;
+}
+
+function seriesLegend(c, series, key, marker = false) {
+  return series.length > 1
+    ? legendEntries(c, series.map((s) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, key, marker })))
+    : 0;
+}
+
+function gridline(c, x1, y1, x2, y2) {
+  c.mark("line", { x1, y1, x2, y2, stroke: c.gridColor, "stroke-opacity": 0.7, "stroke-width": c.pt });
+}
+
+function axisLine(c, x1, y1, x2, y2) {
+  c.mark("line", { x1, y1, x2, y2, stroke: c.axisColor, "stroke-width": c.pt });
+}
+
+function maxIntervalsFor(length, labelExtent) {
+  return Math.max(1, Math.min(10, Math.floor(length / Math.max(1, labelExtent))));
+}
+
+// ---------------------------------------------------------------------------
+// Category charts: column, bar, line and area (standard, stacked, 100%).
+
+/**
+ * Plotted extents per series point. Bars stack positive and negative values
+ * separately; lines and areas accumulate the signed sum. 100% groupings divide
+ * by the category's sum of absolute values first.
+ */
+export function stackCategoryValues(series, count, kind, grouping, path = "chart") {
+  const percent = grouping === "percentStacked";
+  const stacked = grouping === "stacked" || percent;
+  const totals = Array.from({ length: count }, (_, i) => series.reduce((sum, s) => sum + Math.abs(s.values[i] ?? 0), 0));
+  if (percent && totals.some((total) => !Number.isFinite(total))) throw chartAggregateError(path, "percentage total");
+  const positive = new Array(count).fill(0), negative = new Array(count).fill(0), running = new Array(count).fill(0);
+  return series.map((s) => s.values.map((raw, i) => {
+    if (raw === null && kind !== "area") return null;
+    let value = raw ?? 0;
+    if (percent) value = totals[i] ? value / totals[i] : 0;
+    if (!stacked) return { value, from: 0, to: value };
+    if (kind === "bar") {
+      const base = value >= 0 ? positive : negative;
+      const from = base[i];
+      base[i] += value;
+      if (!Number.isFinite(base[i])) throw chartAggregateError(path, "stacked total");
+      return { value, from, to: base[i] };
+    }
+    const from = running[i];
+    running[i] += value;
+    if (!Number.isFinite(running[i])) throw chartAggregateError(path, "stacked total");
+    return { value, from, to: running[i] };
+  }));
+}
+
+function chartAggregateError(path, aggregate) {
+  return new RangeError(`Cannot render ${path}: ${aggregate} exceeds the finite numeric range. Rescale the chart values before rendering.`);
+}
+
+function renderCategoryChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const horizontal = spec.kind === "bar" && spec.dir === "bar";
+  const percent = spec.grouping === "percentStacked";
+  const series = c.series();
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const count = categories.length;
+  const stacks = stackCategoryValues(series, count, spec.kind, spec.grouping, c.path);
+  // The scale follows the plotted values. Only stacked bars and areas plot from a
+  // base (the running total below them); an unstacked series has a synthetic zero
+  // `from`, which must not force zero onto the axis, and a line plots `to` alone.
+  const stackedGrouping = spec.grouping === "stacked" || percent;
+  const extents = stacks.flat().filter(Boolean).flatMap((point) => spec.kind === "line" || !stackedGrouping ? [point.to] : [point.from, point.to]);
+  const dataMin = extents.length ? Math.min(...extents) : 0, dataMax = extents.length ? Math.max(...extents) : 1;
+  const legendWidth = seriesLegend(c, series, spec.kind === "line" ? "line" : undefined, spec.markers);
+  const right = box.x + box.width - pad - legendWidth;
+  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 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");
+    });
+  } 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 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).
+  const crossing = at(Math.min(scale.max, Math.max(scale.min, 0)));
+  for (const tick of scale.ticks) {
+    const position = at(tick), label = formatTick(tick, percent);
+    if (horizontal) {
+      gridline(c, position, plot.y, position, plot.y + plot.height);
+      const width = c.width(label) + fontPx;
+      c.text(label, { x: position - width / 2, y: plot.y + plot.height, width, height: c.lineHeight }, c.path);
+    } else {
+      gridline(c, plot.x, position, plot.x + plot.width, position);
+      c.text(label, { x: box.x + pad, y: position - c.lineHeight / 2, width: plot.x - box.x - pad - fontPx * 0.35, height: c.lineHeight }, c.path, "right");
+    }
+  }
+  const band = (horizontal ? plot.height : plot.width) / count;
+  if (spec.kind === "bar") drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale });
+  else if (spec.kind === "line") drawLines(c, spec, series, stacks, { plot, band, at });
+  else drawAreas(c, series, stacks, { plot, band, at, crossing });
+  if (horizontal) {
+    axisLine(c, crossing, plot.y, crossing, plot.y + plot.height);
+    axisLine(c, plot.x, plot.y + plot.height, plot.x + plot.width, plot.y + plot.height);
+  } else {
+    axisLine(c, plot.x, plot.y, plot.x, plot.y + plot.height);
+    axisLine(c, plot.x, crossing, plot.x + plot.width, crossing);
+  }
+}
+
+// PptxGenJS gap widths: clustered 150%, stacked 50% (overlap 100).
+export function barGeometry(band, seriesCount, grouping) {
+  if (grouping === "clustered") {
+    const group = band / 2.5;
+    return { group, width: group / seriesCount, offset: (band - group) / 2, clustered: true };
+  }
+  const width = band / 1.5;
+  return { group: width, width, offset: (band - width) / 2, clustered: false };
+}
+
+function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale }) {
+  // Bars grow from zero, or from the axis minimum (maximum, for all-negative data) when zero is off the axis.
+  const base = (value) => Math.min(scale.max, Math.max(scale.min, value));
+  const geometry = barGeometry(band, series.length, spec.grouping);
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    stacks[j].forEach((point, i) => {
+      if (!point) return;
+      const slot = geometry.clustered ? j * geometry.width : 0;
+      const a = at(base(point.from)), b = at(point.to);
+      const path = `${c.path}.data.rows.${i}.${s.column}`;
+      if (horizontal) {
+        // Office bar charts draw the first category and first series nearest the origin (bottom).
+        const y = plot.y + plot.height - i * band - geometry.offset - slot - geometry.width;
+        c.mark("rect", { x: Math.min(a, b), y, width: Math.abs(b - a), height: geometry.width, fill: color }, path);
+      } else {
+        const x = plot.x + i * band + geometry.offset + slot;
+        c.mark("rect", { x, y: Math.min(a, b), width: geometry.width, height: Math.abs(b - a), fill: color }, path);
+      }
+    });
+  });
+}
+
+function drawLines(c, spec, series, stacks, { plot, band, at }) {
+  const radius = 3 * c.pt;
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    let run = [];
+    const flush = () => {
+      if (run.length > 1) c.mark("polyline", { points: run.map(([x, y]) => `${c.num(x)},${c.num(y)}`).join(" "), fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, `${c.path}.data.columns.${s.column}`);
+      run = [];
+    };
+    stacks[j].forEach((point, i) => {
+      if (!point) { flush(); return; }
+      run.push([plot.x + (i + 0.5) * band, at(point.to)]);
+    });
+    flush();
+    if (spec.markers) stacks[j].forEach((point, i) => {
+      if (point) c.mark("circle", { cx: plot.x + (i + 0.5) * band, cy: at(point.to), r: radius, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  });
+}
+
+function drawAreas(c, series, stacks, { plot, band, at, crossing }) {
+  series.forEach((s, j) => {
+    const points = stacks[j].map((point, i) => ({ x: plot.x + (i + 0.5) * band, from: point.from, to: point.to }));
+    const upper = points.map((p) => `${c.num(p.x)} ${c.num(at(p.to))}`);
+    const lower = points.slice().reverse().map((p) => `${c.num(p.x)} ${c.num(p.from === 0 ? crossing : at(p.from))}`);
+    c.mark("path", { d: `M ${upper.join(" L ")} L ${lower.join(" L ")} Z`, fill: c.colors[j % c.colors.length] }, `${c.path}.data.columns.${s.column}`);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Pie and doughnut: first series only, clockwise from 12 o'clock, one colour per category.
+
+function renderCircularChart(c, spec) {
+  const { box, pad } = c;
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const values = c.rows.map((row) => Math.abs(chartNumber(row[1]) ?? 0));
+  const legendWidth = legendEntries(c, categories.map((name, i) => ({
+    name, color: c.colors[i % c.colors.length], path: `${c.path}.data.rows.${i}.0`
+  })));
+  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 r = Math.max(1, Math.min(area.width, area.height) / 2 * 0.9);
+  const inner = spec.kind === "doughnut" ? r * 0.5 : 0;
+  const total = values.reduce((sum, value) => sum + value, 0);
+  if (!Number.isFinite(total)) throw chartAggregateError(c.path, "slice total");
+  if (!total) {
+    c.text("No positive chart values", area, c.path);
+    return;
+  }
+  const border = { stroke: "#F9F9F9", "stroke-width": 0.75 * c.pt };
+  let angle = -Math.PI / 2;
+  values.forEach((value, i) => {
+    const delta = value / total * Math.PI * 2, end = angle + delta;
+    const fill = c.colors[i % c.colors.length], path = `${c.path}.data.rows.${i}.1`;
+    if (delta >= Math.PI * 2 - 1e-9) {
+      if (inner) c.mark("path", { d: `${circlePath(c, cx, cy, r)} ${circlePath(c, cx, cy, inner)}`, fill, "fill-rule": "evenodd", ...border }, path);
+      else c.mark("circle", { cx, cy, r, fill, ...border }, path);
+    } else if (delta > 0) {
+      c.mark("path", { d: slicePath(c, cx, cy, r, inner, angle, end), fill, ...border }, path);
+    }
+    angle = end;
+  });
+}
+
+function polar(cx, cy, r, angle) {
+  return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+}
+
+function circlePath(c, cx, cy, r) {
+  const n = c.num;
+  return `M ${n(cx - r)} ${n(cy)} A ${n(r)} ${n(r)} 0 1 0 ${n(cx + r)} ${n(cy)} A ${n(r)} ${n(r)} 0 1 0 ${n(cx - r)} ${n(cy)} Z`;
+}
+
+function slicePath(c, cx, cy, r, inner, start, end) {
+  const n = c.num, large = end - start > Math.PI ? 1 : 0;
+  const [x1, y1] = polar(cx, cy, r, start), [x2, y2] = polar(cx, cy, r, end);
+  if (!inner) return `M ${n(cx)} ${n(cy)} L ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 ${large} 1 ${n(x2)} ${n(y2)} Z`;
+  const [x3, y3] = polar(cx, cy, inner, end), [x4, y4] = polar(cx, cy, inner, start);
+  return `M ${n(x1)} ${n(y1)} A ${n(r)} ${n(r)} 0 ${large} 1 ${n(x2)} ${n(y2)} L ${n(x3)} ${n(y3)} A ${n(inner)} ${n(inner)} 0 ${large} 0 ${n(x4)} ${n(y4)} Z`;
+}
+
+// ---------------------------------------------------------------------------
+// Scatter: X from columns[1], Y series from columns[2..], markers only.
+
+export function scatterSeries(rows, columns) {
+  const numericX = columns.length > 2;
+  const xs = rows.map((row, i) => numericX ? chartNumber(row[1]) : i + 1);
+  const first = numericX ? 2 : 1;
+  const series = columns.slice(first).map((name, offset) => ({
+    name: name === null || name === undefined ? "" : String(name), column: first + offset, index: offset,
+    points: rows.map((row, i) => ({ row: i, x: xs[i], y: chartNumber(row[first + offset]) })).filter((p) => p.x !== null && p.y !== null)
+  }));
+  return { series, xs };
+}
+
+function renderScatterChart(c) {
+  const { box, pad, fontPx } = c;
+  const { series } = scatterSeries(c.rows, c.columns);
+  const points = series.flatMap((s) => s.points);
+  const xs = points.map((p) => p.x), ys = points.map((p) => p.y);
+  const legendWidth = seriesLegend(c, series, "marker");
+  const top = box.y + pad + c.lineHeight / 2, bottom = box.y + box.height - pad - c.lineHeight;
+  const height = Math.max(1, bottom - top);
+  const yScale = niceScale(ys.length ? Math.min(...ys) : 0, ys.length ? Math.max(...ys) : 1, maxIntervalsFor(height, c.lineHeight * 1.2));
+  const tickWidth = Math.max(...yScale.ticks.map((tick) => c.width(formatTick(tick)))) + fontPx * 0.5;
+  const plot = { x: box.x + pad + tickWidth, y: top, height };
+  plot.width = Math.max(1, box.x + box.width - pad - legendWidth - fontPx - plot.x);
+  const xLabelWidth = Math.max(c.width(formatTick(xs.length ? Math.max(...xs) : 1)), c.width(formatTick(xs.length ? Math.min(...xs) : 0))) + fontPx;
+  const xScale = niceScale(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1, maxIntervalsFor(plot.width, xLabelWidth));
+  const xAt = (v) => plot.x + axisFraction(v, xScale) * plot.width;
+  const yAt = (v) => plot.y + axisFraction(v, yScale, true) * plot.height;
+  for (const tick of yScale.ticks) {
+    const y = yAt(tick);
+    gridline(c, plot.x, y, plot.x + plot.width, y);
+    c.text(formatTick(tick), { x: box.x + pad, y: y - c.lineHeight / 2, width: plot.x - box.x - pad - fontPx * 0.35, height: c.lineHeight }, c.path, "right");
+  }
+  for (const tick of xScale.ticks) {
+    const label = formatTick(tick), width = c.width(label) + fontPx;
+    c.text(label, { x: xAt(tick) - width / 2, y: plot.y + plot.height, width, height: c.lineHeight }, c.path);
+  }
+  const yCross = yAt(Math.min(yScale.max, Math.max(yScale.min, 0))), xCross = xAt(Math.min(xScale.max, Math.max(xScale.min, 0)));
+  axisLine(c, xCross, plot.y, xCross, plot.y + plot.height);
+  axisLine(c, plot.x, yCross, plot.x + plot.width, yCross);
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length];
+    for (const point of s.points) c.mark("circle", { cx: xAt(point.x), cy: yAt(point.y), r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${point.row}.${s.column}`);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Radar: categories clockwise from 12 o'clock, value axis on the vertical spoke.
+
+function renderRadarChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const series = c.series();
+  const categories = c.rows.map((row) => c.label(row[0]));
+  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 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 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;
+  const point = (i, v) => polar(cx, cy, rAt(v), angle(i));
+  const n = c.num;
+  for (const tick of scale.ticks) {
+    if (tick === scale.min) continue;
+    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 });
+  }
+  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 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
+    };
+    c.text(name, rect, `${c.path}.data.rows.${i}.0`, align);
+  });
+  series.forEach((s, j) => {
+    const color = c.colors[j % c.colors.length], path = `${c.path}.data.columns.${s.column}`;
+    if (spec.style === "filled") {
+      const outline = s.values.map((v, i) => point(i, v ?? scale.min).map(n).join(" "));
+      c.mark("path", { d: `M ${outline.join(" L ")} Z`, fill: color }, path);
+      return;
+    }
+    const at = (i) => point(i, s.values[i]).map(n).join(" ");
+    let d = "";
+    if (s.values.every((v) => v !== null)) d = `M ${s.values.map((_, i) => at(i)).join(" L ")}${count > 2 ? " Z" : ""}`;
+    else for (let i = 0; i < count; i++) {
+      const next = (i + 1) % count;
+      if (s.values[i] !== null && s.values[next] !== null && next !== i) d += `${d ? " " : ""}M ${at(i)} L ${at(next)}`;
+    }
+    if (d) c.mark("path", { d, fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, path);
+    if (spec.markers) s.values.forEach((v, i) => {
+      if (v === null) return;
+      const [x, y] = point(i, v);
+      c.mark("circle", { cx: x, cy: y, r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  });
+  // Value axis labels sit on top of filled series, as in PowerPoint.
+  for (const tick of scale.ticks) {
+    const label = formatTick(tick), width = c.width(label) + fontPx * 0.5;
+    c.text(label, { x: cx - width - fontPx * 0.2, y: cy - rAt(tick) - c.lineHeight / 2, width, height: c.lineHeight }, c.path, "right");
+  }
+}

package/dist/fonts.js

@@ -187,7 +187,12 @@ export function createFontRegistry(entries, options = {}) {
     if (value===undefined) {
       if (options.strictGlyphs!==false) for(const character of text) {
         if (/\p{Default_Ignorable_Code_Point}/u.test(character)) continue;
-        if (!face.font.hasGlyphForCodePoint(character.codePointAt(0))) throw new OPFFontError("missing-glyph", `Font '${face.family}' cannot display U+${character.codePointAt(0).toString(16).toUpperCase()}.`, {path:style.path,fontFamily:face.family,character});
+        const code=character.codePointAt(0);
+        if (!face.font.hasGlyphForCodePoint(code)) {
+          // No loaded face has it: the script faces for this text are not loaded (glyph fallback needs a face to fall back to).
+          const loadedElsewhere=faces.some(other=>other!==face&&other.font.hasGlyphForCodePoint(code));
+          throw new OPFFontError("missing-glyph", `Font '${face.family}' cannot display U+${code.toString(16).toUpperCase()}.${loadedElsewhere?"":" No loaded font has it, so glyph fallback has no face to fall back to; if it is a script character, load that script's font (prepareNodeFonts scripts: 'auto' with the presentation, or registry.ensureScripts(presentation) in a browser)."}`, {path:style.path,fontFamily:face.family,character,...(loadedElsewhere?{}:{loadedFaceHasGlyph:false})});
+        }
       }
     }
     if(value===undefined||includeOutline&&!Object.hasOwn(value,'outline')) {

package/dist/script-font-pack.js

@@ -106,18 +106,58 @@ const cjkCharacters = new Set(["Hani", "Hira", "Kana", "Hang", "Bopo"]);
 /** True when the renderer has per-character glyph fallback (FF-19 glyphFallbackFamilies). */
 const hasGlyphFallback = () => typeof scriptFontModule.glyphFallbackFamilies === "function";
 
+/** ISO 15924 script whose pinned face a family resolves to: a proprietary script font (Yu Gothic: Jpan) or a pinned face itself (Noto Sans JP: Jpan). */
+function scriptOfFamily(family) {
+  const name = String(family ?? "").toLowerCase();
+  if (!name) return undefined;
+  const rule = scriptFontModule.SCRIPT_FONT_REPLACEMENTS.find(item => item.requestedFamily.toLowerCase() === name);
+  if (rule) return rule.script;
+  return BUNDLED_FONT_MANIFEST.packages.find(item => item.pack === "scripts" && item.faces.some(face => face.family.toLowerCase() === name))?.scripts[0];
+}
+
+/**
+ * The scripts whose faces the deck's font schemes need in order to resolve at all. A scheme that names a script font
+ * (Yu Gothic, Malgun Gothic, Arabic Typesetting or a pinned Noto family) previews its Latin text with that font's
+ * 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).
+ */
+function designScripts(presentation, profile) {
+  const scripts = new Set();
+  let han;
+  const note = resolved => {
+    for (const family of [resolved?.heading?.latin, resolved?.body?.latin]) {
+      const script = scriptOfFamily(family);
+      if (!script) continue;
+      scripts.add(script);
+      if (!han && cjkKeys.includes(script)) han = script;
+    }
+  };
+  note(profile);
+  if (typeof opfCore.resolveScriptFonts === "function" && Array.isArray(presentation?.slides)) {
+    presentation.slides.forEach((slide, slideIndex) => {
+      if (!slide || typeof slide !== "object" || !slide.design || typeof slide.design !== "object") return;
+      try { note(opfCore.resolveScriptFonts(presentation, { slideIndex })); } catch { /* the renderer reports it when it draws the slide */ }
+    });
+  }
+  return { scripts: [...scripts].sort(), han };
+}
+
 /**
  * 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), and the CJK characters that a glyph fallback might
- * have to draw with another CJK face.
+ * 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.
  */
 export function analyzePresentationScripts(presentation, profile = presentationScriptProfile(presentation)) {
   const scripts = new Set(), cjk = new Set();
+  const design = designScripts(presentation, profile);
+  // 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)) {
-    for (const script of scriptsOfText(text, profile)) scripts.add(script);
+    for (const script of scriptsOfText(text, itemizing)) scripts.add(script);
     for (const character of text) if (character.codePointAt(0) > 0x2E7F && cjkCharacters.has(scriptOfCharacter(character))) cjk.add(character);
   }
-  return { profile, detected: [...scripts].sort(), cjk };
+  return { profile, detected: [...scripts].sort(), design: design.scripts, cjk };
 }
 
 /**
@@ -135,7 +175,9 @@ export function detectPresentationScripts(presentation, { profile } = {}) {
 /** The scripts of an analysis that a pinned pack serves (`scripts`, the input for `scriptFontPackages`) and those it does not. */
 export function scriptSelectionOf(analysis) {
   const served = servedScripts();
-  return { detected: analysis.detected, scripts: analysis.detected.filter(script => served.has(script)), unavailable: analysis.detected.filter(script => !served.has(script)) };
+  // `scripts` are the faces to load: the text's scripts and the ones its font schemes need; `detected` stays what the text draws.
+  const needed = [...new Set([...analysis.detected, ...(analysis.design ?? [])])].sort();
+  return { detected: analysis.detected, scripts: needed.filter(script => served.has(script)), unavailable: analysis.detected.filter(script => !served.has(script)) };
 }
 
 /**
@@ -160,7 +202,7 @@ export function autoScriptSelection(presentation, options) {
 export function nextFallbackPackage(analysis, { covers, loaded }) {
   if (!hasGlyphFallback()) return undefined;
   const packages = BUNDLED_FONT_MANIFEST.packages.filter(item => item.pack === "scripts" && item.scripts.some(script => cjkKeys.includes(script)));
-  const primary = analysis.detected.filter(script => cjkKeys.includes(script)).length;
+  const primary = new Set([...analysis.detected, ...(analysis.design ?? [])].filter(script => cjkKeys.includes(script))).size;
   if (packages.filter(item => loaded.has(item.name)).length >= primary + 1) return undefined;
   for (const character of analysis.cjk) {
     if (covers(character)) continue;

package/dist/svg.js

@@ -9,6 +9,7 @@ import {
 import * as opfCore from "@openpresentation/opf";
 import { createScriptFonts } from "./script-fonts.js";
 import { disabledFeaturesStyle } from "./font-compatibility.js";
+import { renderCatalogChart } from "./charts.js";
 
 export const packageName = "@openpresentation/opf-render";
 
@@ -1217,88 +1218,11 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)
   });
 }
 
-function renderImportedChart(item, box, bound, options) {
-  const chart=item.value, rows=chart.data?.rows??[], columns=chart.data?.columns??[];
-  if(!rows.length||columns.length<2)return null;
-  const kind=chart.type, circular=['pie','donut','doughnut'].includes(kind);
-  const colors=[bound.design.colors.primary,bound.design.colors.secondary,'#9B6BCC','#D98944','#429B85','#CB5D79'].map(color=>chartColorForFill(bound.design.colors.surface,color));
-  const children=[];
-  const labelColor=textColorForFill(bound.design.colors.surface,bound.design.colors.text);
-  const text=(value,rect,path,size=16,align='center')=>renderTextBox(String(value),rect,bound,{path,fontSize:size,fontFamily:bound.design.fonts.body,fontWeight:400,fill:labelColor,options,align,verticalAlign:'middle'});
-  const number=value=>typeof value==='number'&&Number.isFinite(value)?value:typeof value==='string'&&value.trim()&&Number.isFinite(Number(value))?Number(value):null;
-  const series=columns.slice(1).map((name,j)=>({name,values:rows.map(row=>number(row[j+1]))}));
-  children.push(tag('rect',{x:box.x,y:box.y,width:box.width,height:box.height,fill:bound.design.colors.surface,stroke:bound.design.colors.border,...traceAttrs(options,item.path)}));
-  if(circular){
-    if(series.length!==1||series[0].values.some(v=>v!==null&&v<0)){
-      children.push(text('Pie charts need one nonnegative series',box,item.path,18));return tag('g',traceAttrs(options,item.path),children.join('\n'));
-    }
-    const values=series[0].values,total=values.reduce((sum,v)=>sum+(v??0),0),cx=box.x+box.width*.35,cy=box.y+box.height*.5,r=Math.max(1,Math.min(box.width*.3,box.height*.42));
-    if(!total){children.push(text('No positive chart values',box,item.path,18));return tag('g',traceAttrs(options,item.path),children.join('\n'));}
-    let angle=-Math.PI/2;
-    values.forEach((v,i)=>{
-      const delta=(v??0)/total*Math.PI*2,end=angle+delta,color=colors[i%colors.length];
-      if(delta>=Math.PI*2-1e-8)children.push(tag('circle',{cx,cy,r,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.1`)}));
-      else if(delta>0)children.push(tag('path',{d:`M ${cx} ${cy} L ${cx+r*Math.cos(angle)} ${cy+r*Math.sin(angle)} A ${r} ${r} 0 ${delta>Math.PI?1:0} 1 ${cx+r*Math.cos(end)} ${cy+r*Math.sin(end)} Z`,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.1`)}));
-      angle=end;
-      const y=box.y+15+i*Math.min(30,(box.height-30)/rows.length);
-      children.push(tag('rect',{x:box.x+box.width*.69,y:y+6,width:12,height:12,fill:color}));
-      children.push(text(`${rows[i][0]}: ${v??'—'}`,{x:box.x+box.width*.69+20,y,width:box.width*.29-20,height:28},`${item.path}.data.rows.${i}`,14,'left'));
-    });
-    if(kind!=='pie')children.push(tag('circle',{cx,cy,r:r*.57,fill:bound.design.colors.surface}));
-  }else{
-    const horizontal=kind==='bar',legendHeight=series.length>1?34:8;
-    const plot={x:box.x+(horizontal?100:64),y:box.y+legendHeight+14,width:Math.max(1,box.width-(horizontal?124:84)),height:Math.max(1,box.height-legendHeight-62)};
-    const values=series.flatMap(s=>s.values).filter(v=>v!==null),min=Math.min(0,...values),rawMax=Math.max(0,...values),max=rawMax===min?min+1:rawMax,range=max-min;
-    const fraction=(v,reverse=false)=>{
-      const distance=reverse?max-v:v-min;
-      if(Number.isFinite(range)&&Number.isFinite(distance))return distance/range;
-      // Finite endpoints can overflow during subtraction. Keep ordinary
-      // arithmetic unchanged and normalize only that exceptional range.
-      const unit=Math.max(Math.abs(min),Math.abs(max)),low=min/unit,high=max/unit,position=v/unit;
-      return (reverse?high-position:position-low)/(high-low);
-    };
-    const xValue=v=>plot.x+fraction(v)*plot.width,yValue=v=>plot.y+fraction(v,true)*plot.height;
-    const zero=horizontal?xValue(0):yValue(0);
-    for(let tick=0;tick<=4;tick++){
-      const direct=min+range*tick/4;
-      const value=Number.isFinite(direct)?direct:min*(1-tick/4)+max*(tick/4);
-      const at=horizontal?xValue(value):yValue(value),rounded=Number(value.toPrecision(4));
-      // Rounding MAX_VALUE to four digits can overflow although the tick is
-      // finite. Its exact shortest decimal remains truthful and parseable.
-      const label=Number.isFinite(rounded)?rounded:String(value);
-      children.push(tag('line',{x1:horizontal?at:plot.x,x2:horizontal?at:plot.x+plot.width,y1:horizontal?plot.y:at,y2:horizontal?plot.y+plot.height:at,stroke:bound.design.colors.border,'stroke-width':1}));
-      children.push(text(label,horizontal?{x:at-32,y:plot.y+plot.height+6,width:64,height:26}:{x:box.x+4,y:at-12,width:52,height:24},item.path,13,horizontal?'center':'right'));
-    }
-    if(series.length>1)series.forEach((s,j)=>{
-      const width=(box.width-24)/series.length,x=box.x+12+j*width;
-      children.push(tag('rect',{x,y:box.y+12,width:12,height:12,fill:colors[j%colors.length]}));
-      children.push(text(s.name,{x:x+18,y:box.y+5,width:Math.max(1,width-22),height:28},`${item.path}.data.columns.${j+1}`,14,'left'));
-    });
-    const categorySize=(horizontal?plot.height:plot.width)/rows.length;
-    rows.forEach((row,i)=>children.push(text(row[0],horizontal?{x:box.x+4,y:plot.y+i*categorySize,width:88,height:categorySize}:{x:plot.x+i*categorySize,y:plot.y+plot.height+7,width:categorySize,height:30},`${item.path}.data.rows.${i}.0`,14,horizontal?'right':'center')));
-    series.forEach((s,j)=>{
-      const color=colors[j%colors.length];
-      if(kind==='line'||kind==='area'){
-        let points=[];
-        const flush=()=>{if(!points.length)return;const pairs=points.map(p=>p.join(',')).join(' ');if(kind==='area')children.push(tag('polygon',{points:`${points[0][0]},${zero} ${pairs} ${points.at(-1)[0]},${zero}`,fill:color,'fill-opacity':.18}));children.push(tag('polyline',{points:pairs,fill:'none',stroke:color,'stroke-width':3,...traceAttrs(options,`${item.path}.data`)}));points=[];};
-        s.values.forEach((v,i)=>{if(v===null){flush();return;}const x=plot.x+(i+.5)*categorySize,y=yValue(v);points.push([x,y]);children.push(tag('circle',{cx:x,cy:y,r:4,fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}));});flush();
-      }else{
-        const bar=categorySize*.8/series.length;
-        s.values.forEach((v,i)=>{if(v===null)return;const at=(horizontal?plot.y:plot.x)+i*categorySize+categorySize*.1+j*bar;
-          children.push(tag('rect',horizontal?{x:Math.min(zero,xValue(v)),y:at,width:Math.abs(xValue(v)-zero),height:Math.max(.1,bar*.9),fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}:{x:at,y:Math.min(zero,yValue(v)),width:Math.max(.1,bar*.9),height:Math.abs(yValue(v)-zero),fill:color,...traceAttrs(options,`${item.path}.data.rows.${i}.${j+1}`)}));
-        });
-      }
-    });
-    children.push(tag('line',{x1:horizontal?zero:plot.x,x2:horizontal?zero:plot.x+plot.width,y1:horizontal?plot.y:zero,y2:horizontal?plot.y+plot.height:zero,stroke:labelColor,'stroke-width':1}));
-  }
-  return tag('g',traceAttrs(options,item.path),children.join('\n'));
-}
-
 function renderChart(item, box, bound, options) {
-  if (["column","bar","line","area","pie","donut","doughnut"].includes(item.value?.type)) {
-    const rendered = renderImportedChart(item, box, bound, options);
-    if (rendered) return rendered;
-  }
+  // 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 });
+  if (rendered) return rendered;
   const chart = item.value ?? {};
   const chartType = chart.type ?? engineDefaults.chartTypes[0];
   const data = inlineChartRows(chart.data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "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/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 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/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/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/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",
     "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/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/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/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-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/design-preview.mjs && node test/item-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",
@@ -77,6 +77,7 @@
     "test:font-variants": "node test/font-variants.mjs",
     "test:font-variants-browser": "node test/font-variants-browser.mjs",
     "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: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",