@openpresentation/opf-render 0.13.1 → 0.15.0

package/dist/charts.js

@@ -1,15 +1,10 @@
-// Chart previews for the OPF chart type catalog (FF-22).
+// Chart previews for the OPF chart types (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";
-// chartPaletteForFill ships with core RR-29 (opf#270); an older published core still loads and clamps each colour on its own.
-import * as opfComposition from "@openpresentation/opf/composition";
+// OPF 0.15 makes chart.type an engine vocabulary: core's schema enum and CHART_TYPES, one type per Office chart construct.
+// The table below is carried here so the preview stays synchronous and self-contained; test/chart-catalog.mjs checks it
+// against core's CHART_TYPES. Each type renders the construct PowerPoint shows for the exported chart; any other value
+// returns null so the caller keeps its legacy single-series preview.
+import { chartHighlightColors, chartHighlightMarks, chartNumber, chartPaletteForFill, formatDataNumber, numberFormatError, resolveChartData, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
 import { drawAxisTitles, drawBarLabel, drawCenteredLabel, drawPointLabel, drawSliceLabel, labelString, outsideLabelReserve, reportOptionDiagnostics, reserveAxisTitles, resolveOptions } from "./chart-options.js";
 
 // Ordered series palette written by opf-pptx (`CHART_COLORS`), before the same
@@ -19,12 +14,34 @@ export const CHART_SERIES_COLORS = Object.freeze([
   "#F59E0B", "#EF4444", "#8B5CF6", "#14B8A6", "#0F172A", "#64748B"
 ]);
 
-// The series colours for a chart panel: core's `chartPaletteForFill` (contrast against the panel without letting two series merge)
-// when the installed core has it, else each colour clamped on its own.
+// The series colours for a chart panel: core's `chartPaletteForFill` (contrast against the panel without letting two series merge).
 export function chartSeriesPalette(surface) {
-  return typeof opfComposition.chartPaletteForFill === "function"
-    ? opfComposition.chartPaletteForFill(surface, CHART_SERIES_COLORS)
-    : CHART_SERIES_COLORS.map((color) => chartColorForFill(surface, color));
+  return chartPaletteForFill(surface, CHART_SERIES_COLORS);
+}
+
+// FA-14: chart.highlight. Core resolves which series and categories are named (chartHighlightMarks) and the two colours
+// (chartHighlightColors); a highlighted mark takes the accent, every other mark the muted neutral. A chart without a
+// highlight has no `c.highlight`, and every colour below is the palette colour it always was.
+function highlightFor(c, resolved, spec, data) {
+  if (!resolved.highlight) return undefined;
+  const marks = chartHighlightMarks(resolved.highlight, { columns: data.columns, hasX: spec.kind === "scatter" && data.columns.length > 2, rows: data.rows });
+  if (!marks) return undefined;
+  return { ...marks, ...chartHighlightColors(c.surface, c.bound.design.colors.primary, c.labelColor) };
+}
+
+/** The colour of series `j` as a whole (a line, an area, a legend key): the accent when highlighted, else muted. */
+function seriesColor(c, j) {
+  return c.highlight ? (c.highlight.series[j] ? c.highlight.accent : c.highlight.muted) : c.colors[j % c.colors.length];
+}
+
+/** The colour of the mark of series `j` at row `i`: highlighted when its series or its category is named. */
+function markColor(c, j, i) {
+  return c.highlight ? (c.highlight.series[j] || c.highlight.categories[i] ? c.highlight.accent : c.highlight.muted) : c.colors[j % c.colors.length];
+}
+
+/** The colour of the pie or doughnut slice of row `i`. */
+function sliceColor(c, i) {
+  return c.highlight ? (c.highlight.categories[i] ? c.highlight.accent : c.highlight.muted) : c.colors[i % c.colors.length];
 }
 
 const bar = (dir, grouping) => ({ kind: "bar", dir, grouping });
@@ -34,18 +51,18 @@ 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"),
+  "stacked-column": bar("col", "stacked"),
+  "100pct-stacked-column": bar("col", "percentStacked"),
   bar: bar("bar", "clustered"),
-  "stacked-bar-3x": bar("bar", "stacked"),
-  "100pct-stacked-bar-3x": bar("bar", "percentStacked"),
+  "stacked-bar": bar("bar", "stacked"),
+  "100pct-stacked-bar": 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),
+  "stacked-line": line("stacked", false),
+  "stacked-line-with-markers": line("stacked", true),
   area: area("standard"),
-  "stacked-area-3x": area("stacked"),
-  "100pct-stacked-area-3x": area("percentStacked"),
+  "stacked-area": area("stacked"),
+  "100pct-stacked-area": area("percentStacked"),
   pie: { kind: "pie" },
   doughnut: { kind: "doughnut" },
   scatter: { kind: "scatter" },
@@ -58,54 +75,14 @@ export const CHART_TYPES = Object.freeze({
   "box-and-whisker": { kind: "box" },
   waterfall: { kind: "waterfall" },
   funnel: { kind: "funnel" },
-  world: { kind: "map" }
+  world: { kind: "map" },
+  // FA-15: clustered columns with line series (markers), the lines optionally on a secondary value axis (core resolves the plan).
+  combo: { kind: "combo", dir: "col", grouping: "clustered", markers: true }
 });
 
-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. */
+/** Resolve a chart type (core's CHART_TYPES vocabulary, OPF 0.15) to its preview spec id, or null for any other value. */
 export function resolveChartType(type) {
-  const raw = String(type ?? "").trim().toLowerCase();
-  const id = ALIASES[raw] ?? DEPRECATED_CHART_TYPES[raw] ?? raw;
+  const id = String(type ?? "").trim().toLowerCase();
   return Object.hasOwn(CHART_TYPES, id) ? id : null;
 }
 
@@ -124,7 +101,8 @@ const RENDERERS = {
   box: renderBoxWhiskerChart,
   waterfall: renderWaterfallChart,
   funnel: renderFunnelChart,
-  map: renderRegionMapChart
+  map: renderRegionMapChart,
+  combo: renderComboChart
 };
 
 // Chartex constructs also accept a lone value column (the exporter plots it
@@ -132,7 +110,7 @@ const RENDERERS = {
 const CHARTEX_KINDS = new Set(["treemap", "histogram", "pareto", "box", "waterfall", "funnel", "map"]);
 
 /**
- * Render a catalog chart. Returns null when the id is outside the catalog, has
+ * Render a chart of a known type. Returns null when the type is outside CHART_TYPES, 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).
  */
@@ -147,6 +125,9 @@ export function renderCatalogChart(item, box, bound, options, svg) {
   // RR-35: a chart with axis titles, a legend position or data labels reserves their space before the plot is laid out. A chart
   // with none of them skips this block entirely, so its output is unchanged.
   const resolved = resolveOptions(item.value, spec);
+  // FA-14: a highlight changes colours only (no space is reserved), so it is resolved whether or not an option is active.
+  c.highlight = highlightFor(c, resolved, spec, data);
+  if (!resolved.active) reportOptionDiagnostics(c, resolved);
   if (resolved.active) {
     reportOptionDiagnostics(c, resolved);
     c.dataLabels = resolved.dataLabels;
@@ -162,20 +143,13 @@ export function renderCatalogChart(item, box, bound, options, svg) {
 // RR-54: the chart's data as the renderers plot it, from core's resolveChartData: inline columns (names or DataColumn objects),
 // a dataset reference and chart.mapping all resolve to one positional table, [category, (x,) ...series], with each column's number
 // format. Series cells have already gone through core's strict chartNumber. Returns null when the data does not resolve (an
-// external data source, an unknown dataset, no rows or columns), so the caller keeps its placeholder. A core without the resolver
-// reads the inline data as before.
+// external data source, an unknown dataset, no rows or columns), so the caller keeps its placeholder.
 export function chartData(item, bound) {
   const chart = item.value;
-  if (typeof opfComposition.resolveChartData === "function") {
-    const resolved = opfComposition.resolveChartData(chart, bound?.presentation, { path: item.path });
-    if (!resolved.ok) return null;
-    const formats = resolved.formats.map((format) => typeof format === "string" && format !== "" && !opfComposition.numberFormatError?.(format) ? format : undefined);
-    return { columns: resolved.columns, rows: resolved.rows, formats, trace: tracePaths(item, bound, resolved) };
-  }
-  const data = chart?.data;
-  const rows = Array.isArray(data?.rows) ? data.rows.map((row) => Array.isArray(row) ? row : [row]) : [];
-  const columns = Array.isArray(data?.columns) ? data.columns : [];
-  return { columns, rows, formats: [], trace: null };
+  const resolved = resolveChartData(chart, bound?.presentation, { path: item.path });
+  if (!resolved.ok) return null;
+  const formats = resolved.formats.map((format) => typeof format === "string" && format !== "" && !numberFormatError(format) ? format : undefined);
+  return { columns: resolved.columns, rows: resolved.rows, formats, trace: tracePaths(item, bound, resolved), ...(resolved.combo ? { combo: resolved.combo } : {}) };
 }
 
 // The authored object at a composed path ("slides.0.blocks.1.chart"), or undefined.
@@ -202,19 +176,19 @@ export function isDatasetTable(item, bound) {
 }
 
 // Where a mark's trace path points. A dataset-backed chart has no `data.rows` or `data.columns` of its own, so every part reports
-// the chart's authored path; a chart with `mapping` reports the authored column index of each plotted column (the resolved
-// order is category, X, then the mapped series).
+// the chart's authored path; a chart with `mapping` (or a combo chart, whose column series come before its lines) reports the
+// authored column index of each plotted column (the resolved order is category, X, then the mapped series).
 function tracePaths(item, bound, resolved) {
   if (isDatasetChart(item, bound)) return { collapse: true };
   const authored = authoredAt(bound?.presentation, item.path);
   const authoredData = authored && typeof authored === "object" ? authored.data : undefined;
-  if (!authored || typeof authored !== "object" || !authored.mapping || !Array.isArray(authoredData?.columns)) return null;
+  if (!authored || typeof authored !== "object" || (!authored.mapping && !resolved.combo) || !Array.isArray(authoredData?.columns)) return null;
   const names = authoredData.columns.map((column) => column !== null && typeof column === "object" ? column.name : column);
   const columnMap = resolved.columns.map((name, index) => { const found = names.indexOf(name); return found < 0 ? index : found; });
   return columnMap.every((column, index) => column === index) ? null : { columnMap };
 }
 
-function chartContext(item, box, bound, options, svg, { rows, columns, formats, trace }) {
+function chartContext(item, box, bound, options, svg, { rows, columns, formats, trace, combo }) {
   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;
@@ -232,7 +206,7 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
     return path.replace(/^(.*\.data\.(?:columns\.|rows\.\d+\.))(\d+)$/, (whole, head, column) => `${head}${trace.columnMap[Number(column)] ?? column}`);
   };
   const c = {
-    item, box, bound, options, svg, rows, columns, formats, children, u, fontPx, surface, labelColor,
+    item, box, bound, options, svg, rows, columns, formats, combo, children, u, fontPx, surface, labelColor,
     path: item.path,
     pt: u * 4 / 3,
     pad: 10 * u,
@@ -276,21 +250,13 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
 }
 
 // RR-54: core's strict chart number (finite numbers and strict decimal strings; everything else is a gap), so the preview, the PPTX
-// export and the validator agree on which cells are numbers. A core without it keeps the previous lenient read.
-export function chartNumber(value) {
-  if (typeof opfComposition.chartNumber === "function") return opfComposition.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;
-}
+// export and the validator agree on which cells are numbers.
+export { chartNumber };
 
 /** A number as its column's format shows it (core's formatDataNumber); without a format, the General form the preview always drew. */
 export function formatChartValue(value, format) {
-  if (format === undefined || typeof opfComposition.formatDataNumber !== "function") return String(clean(value));
-  return opfComposition.formatDataNumber(clean(value), format);
+  if (format === undefined) return String(clean(value));
+  return formatDataNumber(clean(value), format);
 }
 
 // ---------------------------------------------------------------------------
@@ -435,16 +401,17 @@ function legendEntries(c, entries) {
 
 // RR-35: the legend entries of a chart whatever the series count (an explicit legend position shows a single series too).
 function legendSource(c, spec) {
-  const fromSeries = (series, key, marker = false) => series.map((s) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, key, marker }));
+  const fromSeries = (series, key, marker = false) => series.map((s) => ({ name: s.name, color: seriesColor(c, s.index), path: `${c.path}.data.columns.${s.column}`, key, marker }));
   switch (spec.kind) {
     case "pie":
-    case "doughnut": return c.rows.map((row, i) => ({ name: c.label(row[0]), color: c.colors[i % c.colors.length], path: `${c.path}.data.rows.${i}.0` }));
+    case "doughnut": return c.rows.map((row, i) => ({ name: c.label(row[0]), color: sliceColor(c, i), path: `${c.path}.data.rows.${i}.0` }));
     case "scatter": return fromSeries(scatterSeries(c.rows, c.columns, c.formats).series, "marker");
     case "line": return fromSeries(c.series(), "line", spec.markers);
     case "radar": return fromSeries(c.series(), spec.style === "filled" ? undefined : "line", spec.markers);
     case "box": return fromSeries(c.columns.length === 1 ? [{ name: c.label(c.columns[0]), column: 0, index: 0 }] : c.series());
     case "bar":
     case "area": return fromSeries(c.series());
+    case "combo": return comboLegendEntries(c, c.series());
     default: return [];
   }
 }
@@ -494,7 +461,7 @@ function placeLegend(c, spec, position) {
 
 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 })))
+    ? legendEntries(c, series.map((s) => ({ name: s.name, color: seriesColor(c, s.index), path: `${c.path}.data.columns.${s.column}`, key, marker })))
     : 0;
 }
 
@@ -845,9 +812,9 @@ function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale,
   const geometry = barGeometry(band, series.length, spec.grouping);
   const labels = [];
   series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length];
     stacks[j].forEach((point, i) => {
       if (!point) return;
+      const color = markColor(c, j, i);
       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}`;
@@ -871,8 +838,8 @@ function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale,
 
 function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i) => i }) {
   const radius = 3 * c.pt;
-  series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length];
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j);
     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}`);
@@ -883,10 +850,13 @@ function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i)
       run.push([plot.x + (categorySlot(i) + 0.5) * band, at(point.to)]);
     });
     flush();
-    if (spec.markers) stacks[j].forEach((point, i) => {
-      if (point) c.mark("circle", { cx: plot.x + (categorySlot(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}`);
+    // FA-14: with a highlight each point takes its own colour, and a line without markers marks the highlighted categories' points.
+    if (spec.markers || c.highlight?.categories.some(Boolean)) stacks[j].forEach((point, i) => {
+      if (!point || (!spec.markers && !c.highlight.categories[i])) return;
+      const fill = markColor(c, j, i);
+      c.mark("circle", { cx: plot.x + (categorySlot(i) + 0.5) * band, cy: at(point.to), r: radius, fill, stroke: fill, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
     });
-  });
+  }
   // RR-35: data labels sit beside each point, over every line.
   if (c.dataLabels) series.forEach((s, j) => stacks[j].forEach((point, i) => {
     if (point) drawPointLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), [plot.x + (i + 0.5) * band, at(point.to)], `${c.path}.data.rows.${i}.${s.column}`);
@@ -894,20 +864,133 @@ function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i)
 }
 
 function drawAreas(c, series, stacks, { plot, band, at, crossing, categorySlot = (i) => i }) {
-  series.forEach((s, j) => {
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j];
     const points = stacks[j].map((point, i) => ({ x: plot.x + (categorySlot(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}`);
-  });
+    c.mark("path", { d: `M ${upper.join(" L ")} L ${lower.join(" L ")} Z`, fill: seriesColor(c, j) }, `${c.path}.data.columns.${s.column}`);
+  }
   // RR-35: an area's label sits in the area at each category, halfway between its lower and upper edge.
   if (c.dataLabels) series.forEach((s, j) => stacks[j].forEach((point, i) => {
     if (!point) return;
     const lowerEdge = point.from === 0 ? crossing : at(point.from);
-    drawCenteredLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), plot.x + (i + 0.5) * band, (lowerEdge + at(point.to)) / 2, `${c.path}.data.rows.${i}.${s.column}`, c.colors[j % c.colors.length]);
+    drawCenteredLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), plot.x + (i + 0.5) * band, (lowerEdge + at(point.to)) / 2, `${c.path}.data.rows.${i}.${s.column}`, seriesColor(c, j));
   }));
 }
 
+// ---------------------------------------------------------------------------
+// Combo (FA-15): clustered columns and line series with markers in one plot. Core's resolveChartData orders the series
+// (column series first, then lines) and says which lines use the secondary value axis. That axis sits at the right (the left,
+// right to left) with its own scale and its tick labels in the first secondary series' number format; the gridlines follow
+// the primary axis, whose ticks take the first column series' format. The PPTX export writes the same plan natively.
+
+/** The combo plan of a chart: core's, or (a core without it) every series a column except the last, a line, all on the primary axis. */
+function comboPlan(c, series) {
+  if (Array.isArray(c.combo) && c.combo.length === series.length) return c.combo;
+  return series.map((_, index) => ({ role: series.length > 1 && index === series.length - 1 ? "line" : "bar", axis: "primary" }));
+}
+
+/** Legend entries in series order: a square key for a column series, a line with a marker for a line series. */
+function comboLegendEntries(c, series) {
+  const plan = comboPlan(c, series);
+  return series.map((s, index) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, ...(plan[index].role === "line" ? { key: "line", marker: true } : {}) }));
+}
+
+function renderComboChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const series = c.series();
+  const plan = comboPlan(c, series);
+  const bars = series.filter((_, index) => plan[index].role === "bar");
+  const lines = series.filter((_, index) => plan[index].role === "line");
+  const onSecondary = (s) => plan[s.index].axis === "secondary";
+  const primaryLines = lines.filter((s) => !onSecondary(s)), secondaryLines = lines.filter(onSecondary);
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const count = categories.length;
+  // Right to left (RR-05): the categories run from the right, the primary value axis moves to the right and the secondary one to the left.
+  const rtl = c.bound.geometry?.direction === "rtl";
+  const categorySlot = (i) => rtl ? count - 1 - i : i;
+  const extent = (list) => {
+    const values = list.flatMap((s) => s.values).filter((value) => value !== null);
+    return values.length ? [Math.min(...values), Math.max(...values)] : [0, 1];
+  };
+  const [primaryMin, primaryMax] = extent([...bars, ...primaryLines]);
+  const [secondaryMin, secondaryMax] = extent(secondaryLines);
+  const primaryFormat = (bars[0] ?? primaryLines[0])?.format, secondaryFormat = secondaryLines[0]?.format;
+  // The default legend sits at the far right, outside a right axis title (the secondary axis title, or right to left the primary
+  // one), as PowerPoint places it: the legend is laid out against the box before the title band was carved, and the title moves in.
+  const rightTitle = c.axisTitleBands?.some((band) => band.side === "right") && !c.legendManaged;
+  let legendWidth = 0;
+  if (series.length > 1) {
+    const inner = c.box;
+    if (rightTitle) c.box = { ...inner, width: inner.width + c.lineHeight };
+    legendWidth = legendEntries(c, comboLegendEntries(c, series));
+    c.box = inner;
+    if (rightTitle) c.axisTitleRightInset = legendWidth + c.pad / 2;
+  }
+  const right = box.x + box.width - pad - legendWidth;
+  const top = box.y + pad + c.lineHeight / 2;
+  const entries = categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` }));
+  if (rtl) entries.reverse();
+  const tickWidthOf = (scale, format) => Math.max(...scale.ticks.map((tick) => c.width(formatTick(tick, false, format)))) + fontPx * 0.5;
+  const axis = planCategoryAxis(c, entries, (reserve) => {
+    const height = Math.max(1, box.y + box.height - pad - reserve - top);
+    const intervals = maxIntervalsFor(height, c.lineHeight * 1.2);
+    const scale = niceScale(primaryMin, primaryMax, intervals);
+    const secondary = secondaryLines.length ? niceScale(secondaryMin, secondaryMax, intervals) : null;
+    const primaryWidth = tickWidthOf(scale, primaryFormat), secondaryWidth = secondary ? tickWidthOf(secondary, secondaryFormat) : 0;
+    const leftWidth = rtl ? secondaryWidth : primaryWidth, rightWidth = rtl ? primaryWidth : secondaryWidth;
+    const x = box.x + pad + (leftWidth || fontPx / 2);
+    const plotRight = right - (rightWidth || fontPx / 2);
+    return { scale, secondary, primaryWidth, secondaryWidth, plot: { x, y: top, width: Math.max(1, plotRight - x), height } };
+  });
+  const { plot, scale, secondary } = axis;
+  drawBottomLabels(c, axis.plan, plot, entries);
+  c.plotArea = plot;
+  const valueAt = (axisScale) => (value) => plot.y + axisFraction(value, axisScale, true) * plot.height;
+  const at = valueAt(scale), atSecondary = secondary ? valueAt(secondary) : at;
+  const crossing = at(Math.min(scale.max, Math.max(scale.min, 0)));
+  const tickLabel = (label, position, side, width) => side === "left"
+    ? c.text(label, { x: box.x + pad, y: position - c.lineHeight / 2, width: Math.max(1, plot.x - box.x - pad - fontPx * 0.35), height: c.lineHeight }, c.path, "right")
+    : c.text(label, { x: plot.x + plot.width + fontPx * 0.35, y: position - c.lineHeight / 2, width: Math.max(1, width - fontPx * 0.35), height: c.lineHeight }, c.path, "left");
+  for (const tick of scale.ticks) {
+    const position = at(tick);
+    gridline(c, plot.x, position, plot.x + plot.width, position);
+    tickLabel(formatTick(tick, false, primaryFormat), position, rtl ? "right" : "left", axis.primaryWidth);
+  }
+  if (secondary) for (const tick of secondary.ticks) tickLabel(formatTick(tick, false, secondaryFormat), atSecondary(tick), rtl ? "left" : "right", axis.secondaryWidth);
+  const band = plot.width / count;
+  // Column series come first in core's order, so a column's palette index is its series index.
+  if (bars.length) drawBars(c, spec, bars, stackCategoryValues(bars, count, "bar", "clustered", c.path), { plot, band, at, horizontal: false, scale, categorySlot });
+  const point = (s, i, value) => [plot.x + (categorySlot(i) + 0.5) * band, (onSecondary(s) ? atSecondary : at)(value)];
+  const radius = 3 * c.pt;
+  for (const s of lines) {
+    const color = c.colors[s.index % 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 = [];
+    };
+    s.values.forEach((value, i) => { if (value === null) flush(); else run.push(point(s, i, value)); });
+    flush();
+    s.values.forEach((value, i) => {
+      if (value === null) return;
+      const [cx, cy] = point(s, i, value);
+      c.mark("circle", { cx, cy, r: radius, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  }
+  // Line labels sit beside each point at the combo's line position (core: above unless a point position was asked for).
+  if (c.dataLabels) for (const s of lines) s.values.forEach((value, i) => {
+    if (value === null) return;
+    const category = c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]);
+    drawPointLabel(c, labelString(c, { category, value, format: s.format }), point(s, i, value), `${c.path}.data.rows.${i}.${s.column}`, c.dataLabels.linePosition ?? "above");
+  });
+  const primaryX = rtl ? plot.x + plot.width : plot.x, secondaryX = rtl ? plot.x : plot.x + plot.width;
+  axisLine(c, primaryX, plot.y, primaryX, plot.y + plot.height);
+  if (secondary) axisLine(c, secondaryX, plot.y, secondaryX, plot.y + plot.height);
+  axisLine(c, plot.x, crossing, plot.x + plot.width, crossing);
+}
+
 // ---------------------------------------------------------------------------
 // Pie and doughnut: first series only, clockwise from 12 o'clock, one colour per category.
 
@@ -916,7 +999,7 @@ function renderCircularChart(c, spec) {
   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`
+    name, color: sliceColor(c, i), 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;
@@ -936,7 +1019,7 @@ function renderCircularChart(c, spec) {
   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`;
+    const fill = sliceColor(c, i), 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);
@@ -949,7 +1032,7 @@ function renderCircularChart(c, spec) {
     let start = -Math.PI / 2;
     values.forEach((value, i) => {
       const delta = value / total * Math.PI * 2;
-      if (delta > 0) drawSliceLabel(c, sliceTexts[i], { cx, cy, r, inner, mid: start + delta / 2 }, `${c.path}.data.rows.${i}.1`, c.colors[i % c.colors.length]);
+      if (delta > 0) drawSliceLabel(c, sliceTexts[i], { cx, cy, r, inner, mid: start + delta / 2 }, `${c.path}.data.rows.${i}.1`, sliceColor(c, i));
       start += delta;
     });
   }
@@ -1020,10 +1103,10 @@ function renderScatterChart(c) {
   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 (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j);
     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}`);
-  });
+  }
   // RR-35: a scatter label shows the Y value, and the X value as its category.
   if (c.dataLabels) series.forEach((s) => {
     for (const point of s.points) drawPointLabel(c, labelString(c, { category: formatChartValue(point.x, xFormat), value: point.y, format: s.format }), [xAt(point.x), yAt(point.y)], `${c.path}.data.rows.${point.row}.${s.column}`);
@@ -1092,12 +1175,12 @@ function renderRadarChart(c, spec) {
     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}`;
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j), 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;
+      continue;
     }
     const at = (i) => point(i, s.values[i]).map(n).join(" ");
     let d = "";
@@ -1112,7 +1195,7 @@ function renderRadarChart(c, spec) {
       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, false, valueFormat), width = c.width(label) + fontPx * 0.5;

package/dist/deck-runtime.js

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