@openpresentation/opf-render 0.22.1 → 0.23.0

package/README.md

@@ -596,6 +596,8 @@ Combo charts (FA-15): `type: "combo"` draws clustered columns with line series (
 
 Chart options (RR-35): a chart's optional `axisTitles`, `legend` and `dataLabels` (core `docs/chart-options.md`) are drawn. A named legend position is carved from the chart box before the plot is laid out, axis titles sit beside the axes (the value title rotated 270 degrees), and data labels follow the content (category, value, percent), position and separator the chart type supports. An option a type cannot show is dropped with a `chart-option-adapted` diagnostic; a chart without the fields draws as before.
 
+Chart colours, text and value axis (RR-89, RR-90, RR-92; need core 0.22.0: `chartSeriesPalette`, `chartTextSize` and the composed `chart.valueAxis`): series are drawn in core's `chartSeriesPalette` of the deck's resolved colour scheme (`accent1` to `accent6`, then the same accents tinted toward white), adjusted per chart panel by `chartPaletteForFill`, so `design.colorScheme` recolours charts; chart axis, legend, category and data-label text is core's `chartTextSize` (20 px, shrunk only for a small chart box, never below `minFontSize`); and a column, bar, line or area chart draws the value axis (`min`, `max`, `majorUnit`) core composes for its box, the axis the PPTX export writes. Other chart types keep their own scale.
+
 Chart emphasis (FA-14): `chart.highlight` names the series (data columns) and categories (row labels) that carry the message. Highlighted marks are filled with the deck primary and every other mark with a muted neutral derived from the chart panel and text colors (core `chartHighlightColors`; core `chartHighlightMarks` decides which marks are named: a mark is highlighted when its series or its category is). It colors columns, bars, line series and (for a category highlight) line points, areas, scatter and radar series, and pie and doughnut slices, with legend keys and data label contrast following; the chartex constructs draw as before and the `chart-option-adapted` diagnostic names the dropped part. Series keep their order and a chart without `highlight` draws the same SVG as before.
 
 Chart and table data (RR-54, needs the core release with `resolveChartData`; core `docs/chart-table-data.md`): every chart path plots the data core resolves, so `DataColumn` headers, `{ dataset, fields }` references to the top-level `datasets` map and `chart.mapping` (category, scatter X and series by column name) all draw, and a series is labelled with its column `name`. Chart numbers are core's strict `chartNumber` (`"12%"`, `"(5)"` and `"Q1"` are gaps, `"1e6"` is 1000000). A column's number `format` shapes its data labels and the value-axis tick labels (the first plotted series' format; the scatter X axis follows the X column; percent axes and pie percent labels stay percent; a 100% stacked chart's data labels show the values in their own format, as PowerPoint does), and table cells draw the formatted text. A formatted horizontal axis (horizontal bars, the scatter X axis) pulls its plot in until the first and last tick labels stay inside the chart; a General axis keeps its placement. A dataset chart or table draws exactly its inline equivalent and traces every part to its authored `slides.N.chart` or `slides.N.table` path; a chart with `mapping` traces each part to the authored column. The legacy sketch (a chart type outside the catalog) plots a gap as nothing. A document without the new fields draws byte for byte as before; a data source by file or asset (the removed `ChartDataSource`) is an `invalid-opf` error.
@@ -604,6 +606,16 @@ Classic chart previews keep finite axis coordinates for subnormal values and val
 
 Category-axis labels follow PowerPoint's automatic labelling instead of wrapping inside a band (column, bar, line and area charts, including stacked and 100%, and the chartex histogram, pareto, waterfall, funnel and box-and-whisker previews). A label is never broken inside a word: it stays on one line, or splits at its spaces onto two lines when a band is too narrow, so `Category 1` cannot become `Ca` over `t 1`. When the labels do not fit horizontally they turn to -45 degrees, then -90 degrees (the plot area shrinks to make room, by at most 40% of the chart height, and a slanted first label must stay inside the chart), and when even that collides the axis draws every n-th label (Office's automatic `tickLblSkip`): n is the smallest interval that leaves no two drawn labels overlapping, the first label is always drawn, and ties go to the less rotated arrangement. In horizontal bar charts and funnels, where the category axis is vertical, rows shorter than a line of text are skipped the same way, and the label gutter grows with the longest label up to 30% of the chart width. Only a label wider than that gutter (or wider than the whole chart on a horizontal axis) is ellipsized, and then the renderer reports one `chart-label-truncated` diagnostic per chart with the affected label paths in `labels`; nothing is shortened silently, and no arrangement raises `text-overflow` for an axis label. Radar spoke labels use the same one-line, two-line or ellipsis rule and leave out a spoke label that would collide with one already drawn. Rotated labels are wrapped in a `<g transform="rotate(...)">` around their usual text group, so the traced `data-opf-box-*` attributes describe the unrotated box. PowerPoint applies its own automatic rotation and skip to the exported chart: opf-pptx writes an automatic axis text body (`<a:bodyPr/>`, no `rot`) and no `tickLblSkip` for these axes, so nothing forces a wrap, and the preview and the export make the same kind of choice, not identical ones (the export uses 9 pt labels, the preview the readability floor).
 
+### Chart previews and opf-pptx 0.22: same colors, axis and text (since 0.22.2)
+
+Since 0.22.2 the classic chart preview draws what `@openpresentation/opf-pptx` 0.22.0 exports, so a chart looks alike in the preview, PowerPoint and Keynote in these three respects (the paragraph above lists the core functions involved):
+
+- **Series colors.** The preview draws core's palette of the deck's color scheme (`accent1` to `accent6`, then tints) with the chart's `chart.colors` over it, adjusted for contrast against the chart panel; `chart.highlight` still wins. opf-pptx writes the same colors, as theme colors (`a:schemeClr`) where the deck theme holds them, so re-theming a deck recolors both. Before 0.22.2 the preview drew a fixed twelve-color palette and ignored `design.colorScheme` and `chart.colors`.
+- **Value axis.** Column, bar, line and area charts draw the axis core composes for the chart's box (`min`, `max`, `majorUnit`), and opf-pptx writes the same three numbers (`c:min`, `c:max`, `c:majorUnit`), so the gridlines agree. On a short or narrow plot core's estimate of the plot (from the box, without measuring text) can take one larger step than the old fit to the laid-out plot did. Other chart types keep their own scale in the preview, and opf-pptx leaves their axis to the application.
+- **Chart text.** Axis, legend, category and data-label text is 20 px (15 pt) in a roomy box, shrunk only for a small one and never below the minimum font size; before 0.22.2 it was 14 px floored at 16 px (12 pt). The axis core composes is estimated for this size.
+
+Chart previews are still not pixel-identical to PowerPoint or Keynote.
+
 ## Long-lived workers: measured memory and latency (opf-render#171)
 
 A render or export service keeps one fonts handle per worker process and reuses it ("load fonts once per worker"). `npm run bench:soak` (`scripts/soak.mjs`; manual or scheduled, never part of the default CI gate) measures that pattern. Each worker process holds one `loadFonts({ pack: 'office', substitutionPolicy: 'visual', scripts: 'auto' })` handle for its whole life, blocks the network (a guard counts and refuses any attempt) and repeats jobs: `fonts.ensure(deck)`, `toSvg`, `toPng` of those SVGs and `toPptx` (opf-pptx 0.18.0, which is not a dependency of this package: `npm install --no-save @openpresentation/opf-pptx@0.18.0` and run with `--link-renderer`, since opf-pptx imports the renderer as an optional peer; without opf-pptx the PPTX leg is skipped). The jobs take the 127 core example decks in rotation (5 jobs in 6) and a 30-slide script deck built from the script corpora (every sixth job; one slide per script from Latin to Tibetan, with CJK, Arabic and Indic text, so `ensure` loads the script faces), 500 jobs per worker at concurrency 1 and 4. Memory is sampled after every job following a forced garbage collection (`heapUsed`, the retained heap, and `rss`).

package/dist/charts.js

@@ -4,19 +4,14 @@
 // 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 { chartHighlightColors, chartHighlightMarks, chartNumber, chartPaletteForFill, chartSeriesPalette as coreChartSeriesPalette, chartTextSize, formatDataNumber, maxIntervalsFor, niceScale, stackCategoryValues, 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
-// per-surface adjustment (`chartPaletteForFill`: contrast against the card, without letting two series merge).
-export const CHART_SERIES_COLORS = Object.freeze([
-  "#2874A6", "#1B4F72", "#5499C7", "#7BDBB2", "#3AC67A", "#24A89E",
-  "#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).
-export function chartSeriesPalette(surface) {
-  return chartPaletteForFill(surface, CHART_SERIES_COLORS);
+// The series colours for a chart panel: core's `chartSeriesPalette` (the deck colour scheme's accents, RR-89, with the chart's own
+// `colors` entries replacing their positions) adjusted by core's `chartPaletteForFill` (contrast against the panel without letting
+// two series merge). The PPTX export and the validator use the same pair, so the preview draws the colours they write.
+export function chartSeriesPalette(surface, colorScheme, colors, context) {
+  return chartPaletteForFill(surface, coreChartSeriesPalette(colorScheme, colors, context));
 }
 
 // FA-14: chart.highlight. Core resolves which series and categories are named (chartHighlightMarks) and the two colours
@@ -191,8 +186,15 @@ function tracePaths(item, bound, resolved) {
 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;
+  // RR-90: core's chart text size (20 px, shrunk only for a small box, never below minFontSize), the size core's value-axis density assumes.
+  const requested = chartTextSize({ width: box.width, height: box.height, scale: u, minFontSize: composition.minFontSize }), fontPx = requested * u;
   const surface = bound.design.colors.surface;
+  // RR-96: every neutral comes from the slide's variant (core `roles.neutrals`: tx1 mixed into bg1, the colours the PPTX export writes as
+// scheme colours): chart text, gridlines, axis lines and the outline between marks (bg1).
+const neutrals = bound.design.roles.neutrals;
+  // The quiet colour of axis, legend and category text; `labelColor` stays the full text colour (highlight mutes toward it and labels inside
+  // marks contrast against it, as the PPTX export draws them).
+  const chartTextColor = textColorForFill(surface, neutrals.chartText.hex);
   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);
@@ -206,7 +208,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, combo, children, u, fontPx, surface, labelColor,
+    item, box, bound, options, svg, rows, columns, formats, combo, children, u, fontPx, surface, labelColor, chartTextColor,
     path: item.path,
     pt: u * 4 / 3,
     pad: 10 * u,
@@ -215,9 +217,12 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
     // clear space kept between neighbouring category labels.
     textHeight: fontPx * 1.22,
     labelGap: fontPx * 0.1,
-    colors: chartSeriesPalette(surface),
-    gridColor: bound.design.colors.border,
-    axisColor: "#888888",
+    colors: chartSeriesPalette(surface, bound.design.colorScheme, item.value?.colors, { accents: bound.design.roles.map.accents, roles: bound.design.colors, variables: bound.design.variables }),
+    // RR-92: the value axis core composed for a column, bar, line or area chart ({ min, max, majorUnit }); absent for the other types.
+    valueAxis: item.chart?.valueAxis,
+    gridColor: neutrals.gridline.hex,
+    axisColor: neutrals.axisLine.hex,
+    outlineColor: neutrals.outline.hex,
     number: chartNumber,
     label: (value) => value === null || value === undefined ? "" : String(value),
     width: (value) => measure(String(value), fontPx),
@@ -227,7 +232,7 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
       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, tracePath(path)) : {}) }));
     },
-    textElement(value, rect, path, align = "center", fill = labelColor) {
+    textElement(value, rect, path, align = "center", fill = chartTextColor) {
       if (!(rect.width > 0 && rect.height > 0)) return "";
       return svg.renderTextBox(String(value), rect, bound, {
         path: tracePath(path), fontSize: requested, fontFamily: bound.design.fonts.body, fontWeight: 400,
@@ -262,60 +267,6 @@ export function formatChartValue(value, format) {
 // ---------------------------------------------------------------------------
 // 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) {
@@ -327,10 +278,6 @@ function axisFraction(value, scale, reverse = false) {
   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);
@@ -466,17 +413,13 @@ function seriesLegend(c, series, key, marker = false) {
 }
 
 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 });
+  c.mark("line", { x1, y1, x2, y2, stroke: c.gridColor, "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-axis labels. PowerPoint labels a category axis automatically: a label
 // stays on one line unless it has spaces and fits two lines in its category
@@ -676,40 +619,23 @@ function drawRowLabels(c, plan, entries, band, gutter, x, rowTop) {
 // ---------------------------------------------------------------------------
 // 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.`);
 }
 
+// RR-92: a column, bar, line or area chart draws the value axis core composed for its box (c.valueAxis), the one the PPTX export
+// writes. Without it (a chart the composition has no axis for) the scale is fitted to the plot's length as before.
+// A range so wide that min + n x majorUnit leaves Number's range (finite data up to Number.MAX_VALUE) has no ticks to rebuild from the
+// three numbers; it takes the saturating scale `niceScale` computes.
+function categoryScale(c, dataMin, dataMax, length, labelExtent, percent) {
+  const axis = c.valueAxis;
+  if (axis && Number.isFinite(axis.max - axis.min) && (axis.max - axis.min) / axis.majorUnit <= 1000) {
+    const scale = scaleFrom(axis.min, axis.max, axis.majorUnit);
+    if (scale.ticks.every(Number.isFinite)) return scale;
+  }
+  return niceScale(dataMin, dataMax, maxIntervalsFor(length, labelExtent), { percent });
+}
+
 function renderCategoryChart(c, spec) {
   const { box, pad, fontPx } = c;
   const horizontal = spec.kind === "bar" && spec.dir === "bar";
@@ -738,7 +664,7 @@ function renderCategoryChart(c, spec) {
     const bottom = box.y + box.height - pad - c.lineHeight;
     let width = Math.max(1, right - x - fontPx);
     const tickWidth = Math.max(c.width(formatTick(dataMax, percent, valueFormat)), c.width(formatTick(dataMin, percent, valueFormat)), c.width("100%")) + fontPx;
-    const scaleFor = (w) => niceScale(dataMin, dataMax, maxIntervalsFor(w, tickWidth), { percent });
+    const scaleFor = (w) => categoryScale(c, dataMin, dataMax, w, tickWidth, percent);
     scale = scaleFor(width);
     // RR-54: a formatted value axis keeps its end labels inside the chart.
     if (valueFormat !== undefined && !percent) ({ x, width, scale } = insetForEndLabels(c, x, width, valueFormat, scaleFor));
@@ -752,7 +678,7 @@ function renderCategoryChart(c, spec) {
     if (rtl) entries.reverse();
     const axis = planCategoryAxis(c, entries, (reserve) => {
       const height = Math.max(1, box.y + box.height - pad - reserve - top);
-      const fitted = niceScale(dataMin, dataMax, maxIntervalsFor(height, c.lineHeight * 1.2), { percent });
+      const fitted = categoryScale(c, dataMin, dataMax, height, c.lineHeight * 1.2, percent);
       const tickWidth = Math.max(...fitted.ticks.map((tick) => c.width(formatTick(tick, percent, valueFormat)))) + fontPx * 0.5;
       if (rtl) {
         const x = box.x + pad + fontPx / 2;
@@ -1014,7 +940,7 @@ function renderCircularChart(c, spec) {
     c.text("No positive chart values", area, c.path);
     return;
   }
-  const border = { stroke: "#F9F9F9", "stroke-width": 0.75 * c.pt };
+  const border = { stroke: c.outlineColor, "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;
@@ -1140,7 +1066,7 @@ function renderRadarChart(c, spec) {
   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 });
+    c.mark("path", { d: `M ${ring.join(" L ")} Z`, fill: "none", stroke: c.gridColor, "stroke-width": c.pt });
   }
   // A spoke label that would collide with one already drawn is left out; the first is always kept.
   const drawn = [], truncated = [];
@@ -1466,7 +1392,7 @@ function renderTreemapChart(c) {
   const rects = squarify(items, area.x, area.y, area.width, area.height);
   rects.forEach((rect, i) => {
     if (!rect || !(rect.width > 0) || !(rect.height > 0)) return;
-    c.mark("rect", { x: rect.x, y: rect.y, width: rect.width, height: rect.height, fill: c.colors[i % c.colors.length], stroke: "#FFFFFF", "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
+    c.mark("rect", { x: rect.x, y: rect.y, width: rect.width, height: rect.height, fill: c.colors[i % c.colors.length], stroke: c.outlineColor, "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
     // RR-35: the treemap labels its tiles with category names by default; dataLabels picks the content, false removes them. PowerPoint
     // draws the label at the bottom left of its tile whatever the position attribute says (native check 2026-10-01), so the preview does.
     if (!c.dataLabelsOff && rect.width >= fontPx * 2 && rect.height >= c.lineHeight) {
@@ -1567,12 +1493,12 @@ function renderRegionMapChart(c) {
   const tileWidth = area.width / columns, tileHeight = area.height / rowsCount;
   const finite = values.filter((value) => value !== null);
   const min = finite.length ? Math.min(...finite) : 0, max = finite.length ? Math.max(...finite) : 0;
-  const light = mixHex(/^#[0-9A-Fa-f]{6}$/.test(c.surface) ? c.surface : "#FFFFFF", c.colors[0], 0.15);
+  const light = mixHex(/^#[0-9A-Fa-f]{6}$/.test(c.surface) ? c.surface : c.outlineColor, c.colors[0], 0.15);
   categories.forEach((name, i) => {
     const value = values[i];
     const t = value === null ? 0 : max > min ? axisFraction(value, {min, max}) : 1;
     const x = area.x + (i % columns) * tileWidth, y = area.y + Math.floor(i / columns) * tileHeight;
-    c.mark("rect", { x, y, width: tileWidth, height: tileHeight, fill: value === null ? c.surface : mixHex(light, c.colors[0], t), stroke: "#FFFFFF", "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
+    c.mark("rect", { x, y, width: tileWidth, height: tileHeight, fill: value === null ? c.surface : mixHex(light, c.colors[0], t), stroke: c.outlineColor, "stroke-width": c.pt }, `${c.path}.data.rows.${i}.${column}`);
     const inset = { x: x + fontPx * 0.25, width: Math.max(1, tileWidth - fontPx * 0.5) };
     if (tileHeight >= c.lineHeight * 2) {
       c.text(name, { ...inset, y: y + tileHeight / 2 - c.lineHeight, height: c.lineHeight }, `${c.path}.data.rows.${i}.0`);

package/dist/svg.js

@@ -3,8 +3,8 @@
 import {
   layoutTable, fitList, fitRichText, composeSlide, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill,
   resolveColorRef as resolveCoreColorRef, resolveScriptFonts, paragraphDirection, physicalAlignment, patternRuns,
-  metricTrendMark as coreMetricTrendMark, tokenizeCode, codeLineRuns, codeSyntaxPaletteForScheme, resolveChartData,
-  resolveColorRoles, defaultSlideBackground, timelineMarkerShapes, timelineTextColor, layoutWatermark,
+  metricTrendMark as coreMetricTrendMark, tokenizeCode, codeLineRuns, codeSyntaxPaletteForRoles, readableSchemeColor, resolveChartData,
+  timelineMarkerShapes, timelineTextColor, layoutWatermark,
   codeHighlightLines, codeLineNumbers, codeHighlightBands, codeHighlightColors, fitImage, intrinsicImageAspect, intrinsicImageSize,
   ENGINE_DEFAULT_THEME, ENGINE_DEFAULT_COLOR_SCHEME, ENGINE_DEFAULT_FONT_SCHEME, ENGINE_DEFAULT_CHART_TYPES
 } from "@openpresentation/opf/composition";
@@ -299,18 +299,18 @@ const IMAGE_BACKGROUND_SOURCE = /^(asset:|https:\/\/|data:|\.\/|\.\.\/)/;
 
 // The slide's single background color, or null when there is none (a gradient, or no color the engine can read).
 // With no definition, or a picture, the scheme's default slide background (core defaultSlideBackground) is the canvas.
-function resolveBackground(background, colorScheme, design) {
-  const canvas = defaultSlideBackground(colorScheme);
+function resolveBackground(background, colorScheme, design, canvas) {
   if (!background) return canvas;
   if (typeof background === "string") return IMAGE_BACKGROUND_SOURCE.test(background) ? canvas : colorFromScheme(colorScheme, background, canvas);
   if (background.type === "theme") return colorFromScheme(colorScheme, background.slot, canvas);
-  if (background.type === "solid") return resolveBackgroundColor(background.color, design, "#FFFFFF");
+  if (background.type === "solid") return resolveBackgroundColor(background.color, design, canvas);
   if (background.type === "gradient") return null;
-  if (background.type === "pattern") return resolveBackgroundColor(background.pattern?.backgroundColor, design, "#FFFFFF");
+  if (background.type === "pattern") return resolveBackgroundColor(background.pattern?.backgroundColor, design, canvas);
   return canvas;
 }
 
 
+// An unparseable colour measures as white: this is a luminance for the contrast tests below, never a colour that is drawn.
 function colorLuminance(color) {
   const hex = normalizeColor(color, "#FFFFFF").replace("#", "");
   const channels = [0, 2, 4].map(offset => {
@@ -342,6 +342,13 @@ const LINK_URL = /^(https?:|mailto:|tel:)/i;
 // sorted keys, so the output does not depend on the order a catalog lists a field in. A reference that resolves nowhere never
 // throws (unless `strictReferences`): the context falls back to core's engine defaults (ENGINE_DEFAULT_THEME, _COLOR_SCHEME,
 // _FONT_SCHEME; a layout to automatic composition) and reports `unresolved-reference`, which is forwarded as a render diagnostic.
+function drawnBackground(levels) {
+  for (const level of levels) {
+    if (level.variant !== undefined) return level.background;
+    if (level.background !== undefined && level.background !== null && level.background !== false) return level.background;
+  }
+  return undefined;
+}
 function resolveDesign(presentation, slide, slideContext) {
   const deckDesign = presentation.design ?? {};
   const slideDesign = slide.design ?? {};
@@ -350,14 +357,13 @@ function resolveDesign(presentation, slide, slideContext) {
   const colorScheme = cloneWithSortedKeys(resolved.colorScheme);
   const fontScheme = cloneWithSortedKeys(resolved.fontScheme);
   const dimensions = { width: composeOptions.width, height: composeOptions.height };
-  const backgroundDefinition = slideDesign.background ?? deckDesign.background ?? theme.background;
-  const { primary, secondary, accent } = resolveColorRoles(colorScheme);
+  // RR-96: core resolves the slide's roles (its variant's map over the scheme, the accents in order, the scheme-derived neutrals) once, in
+  // the slide context every engine shares. A variant hides the background of a less specific level (the slide is then the variant's bg1).
+  const roles = resolved.roles;
+  const backgroundDefinition = drawnBackground([slideDesign, deckDesign, theme]);
   const variables = presentation.variables ?? {};
-  // background/surface/text roles depend on the background itself, so a background reference sees only the scheme and the three accent roles.
-  const backgroundColor = resolveBackground(backgroundDefinition, colorScheme, { colorScheme, colors: { primary, secondary, accent }, variables });
-  // One resolution for every role (core resolveColorRoles), shared with the PPTX export and the validator. Whether the background is dark
-  // (relative luminance under 0.179) is core's decision in the slide context, the one composition uses for logos and bullets.
-  const roles = resolveColorRoles(colorScheme, { background: backgroundColor });
+  // A background reference sees only the scheme and the three accent roles; a picture or no background is the variant's bg1.
+  const backgroundColor = resolveBackground(backgroundDefinition, colorScheme, { colorScheme, colors: { primary: roles.primary, secondary: roles.secondary, accent: roles.accent }, variables }, roles.background);
   const darkBackground = composeOptions.darkBackground === true;
 
   return {
@@ -371,17 +377,20 @@ function resolveDesign(presentation, slide, slideContext) {
     background: backgroundDefinition,
     backgroundColor,
     colors: {
-      background: roles.background,
+      // The slide's drawn single-colour background, else the variant's bg1 (a picture, gradient or none).
+      background: backgroundColor ?? roles.background,
       surface: roles.surface,
       text: roles.text,
       mutedText: roles.textSecondary,
-      primary,
-      secondary,
-      accent,
+      primary: roles.primary,
+      secondary: roles.secondary,
+      accent: roles.accent,
       hyperlink: roles.hyperlink,
       followedHyperlink: roles.followedHyperlink,
       border: roles.border
     },
+    // RR-96: the variant's map, accent order and scheme-derived neutrals (gridline, axis line, chart text, outline, trend, code panel).
+    roles,
     fonts: { ...composeOptions.fontFamilies },
     darkBackground,
     diagnostics: diagnostics.map((entry) => ({ ...entry }))
@@ -766,7 +775,7 @@ function renderBackground(bound, width, height, options) {
     const runs=patternRuns(preset);
     const mark=runs?tag('path',{d:runs.map(run=>`M${run.x} ${run.y}h${run.width}v1h-${run.width}z`).join(''),fill:color,'shape-rendering':'crispEdges'}):'';
     if(!mark)reportDiagnostic({code:'unsupported-pattern',path:`${bound.path}.design.background.pattern.preset`,message:`Pattern ${preset} is not implemented by the SVG preview.`},options);
-    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
+    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??bound.design.colors.background})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
   }
   return tag("rect", {
     ...HIDDEN,
@@ -797,7 +806,17 @@ function renderBackgroundImage(background, bound, width, height, options) {
   const id = `opf-s${bound.index + 1}-background`, matrix = imageRecolorMatrix(background.recolor, bound);
   const defs = matrix ? tag("defs", {}, tag("filter", { id: `${id}-recolor`, "color-interpolation-filters": "sRGB" }, tag("feColorMatrix", { type: "matrix", values: matrix }))) : "";
   const pixels = matrix || background.opacity !== undefined ? tag("g", { filter: matrix ? `url(#${id}-recolor)` : undefined, opacity: background.opacity === undefined ? undefined : preciseNumber(background.opacity) }, picture) : picture;
-  return [canvas, defs, pixels, background.overlay ? renderImageOverlay(background.overlay, bound, options) : ""].filter(Boolean).join("\n");
+  return [canvas, defs, pixels, background.overlay ? renderImageOverlay(background.overlay, bound, options) : toneOverlay(bound, width, height, options)].filter(Boolean).join("\n");
+}
+
+// RR-96: a picture that names its tone (`dark` or `light`) is a picture the text must read on: with no overlay of its own, the slide
+// background colour (bg1 of the tone's variant, so dark text colours get a dark scrim and light ones a light one) covers it at 40%.
+// Core resolves the variant from the tone but exposes no overlay for it, so this scrim is the renderer's own (reported in RR-96).
+const TONE_OVERLAY_OPACITY = 0.4;
+function toneOverlay(bound, width, height, options) {
+  const tone = isPlainObject(bound.design.background) ? bound.design.background.tone : undefined;
+  if (tone !== "dark" && tone !== "light") return "";
+  return tag("rect", { ...HIDDEN, x: 0, y: 0, width, height, fill: bound.design.colors.background, opacity: TONE_OVERLAY_OPACITY, ...(options.trace ? { "data-opf-tone-overlay": tone } : {}) });
 }
 
 // tile: a pattern cell of the picture's intrinsic size, anchored at the canvas origin.
@@ -868,7 +887,7 @@ function imageRecolorMatrix(recolor, bound) {
   if (!recolor) return undefined;
   const weights = [0.299, 0.587, 0.114];
   const channels = recolor.type === 'duotone'
-    ? [imagePaint(recolor.dark, bound, '#000000'), imagePaint(recolor.light, bound, '#FFFFFF')].map(paint => [1, 3, 5].map(at => parseInt(paint.color.slice(at, at + 2), 16) / 255))
+    ? [imagePaint(recolor.dark, bound, bound.design.colorScheme.dark1 ?? ENGINE_DEFAULT_COLOR_SCHEME.dark1), imagePaint(recolor.light, bound, bound.design.colorScheme.light1 ?? ENGINE_DEFAULT_COLOR_SCHEME.light1)].map(paint => [1, 3, 5].map(at => parseInt(paint.color.slice(at, at + 2), 16) / 255))
     : [[0, 0, 0], [1, 1, 1]];
   const [dark, light] = channels;
   const rows = [0, 1, 2].map(channel => [...weights.map(weight => preciseNumber((light[channel] - dark[channel]) * weight)), 0, preciseNumber(dark[channel])].join(' '));
@@ -1274,7 +1293,8 @@ function renderMedia(item, box, bound, options) {
     tag("path", {
       ...HIDDEN,
       d: trianglePath(iconBox.x + 28, iconBox.y + 22, 28, 28),
-      fill: "#FFFFFF",
+      // The play triangle sits on the primary circle: bg1 or tx1, whichever reads better on it (core readableSchemeColor).
+      fill: readableSchemeColor(bound.design.colors.primary, bound.design.roles).hex,
       ...traceAttrs(options, item.path)
     }),
     renderTextBox(asset.title || asset.src || "Media", { ...box, y: iconBox.y + iconBox.height + 20, height: 50 }, bound, {
@@ -1308,8 +1328,8 @@ function renderCode(item, box, bound, options) {
       y: box.y,
       width: box.width,
       height: box.height,
-      fill: "#111827",
-      stroke: "#334155",
+      fill: bound.design.roles.neutrals.codePanel.hex,
+      stroke: bound.design.colors.border,
       "stroke-width": 1,
       ...traceAttrs(options, item.path)
     })
@@ -1335,7 +1355,7 @@ function renderCode(item, box, bound, options) {
       x:stableNumber(part.box.x),y:stableNumber(part.box.y+part.fit.fontSize+index*part.fit.lineHeight),
       'text-anchor':'start','font-family':fontStack(part.style.fontFamily,'monospace'),
       'font-size':stableNumber(part.fit.fontSize),'font-weight':part.style.fontWeight,'font-style':part.style.italic?'italic':undefined,
-      'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='body'?(lineColors?.plain??'#E5E7EB'):'#93C5FD',
+      'xml:space':'preserve',style:'white-space:pre','text-rendering':'geometricPrecision',fill:part.role==='body'?(lineColors?.plain??syntax?.palette.plain??bound.design.roles.neutrals.codeText.hex):codeLabelColor(bound),
       ...traceAttrs(options,part.path),...(options.trace?{'data-opf-code-role':part.role,'data-opf-generated':part.generated?'true':undefined,
         'data-opf-text-start':line.start,'data-opf-text-end':line.end,'data-opf-text-next-start':line.nextStart,'data-opf-line-boundary':line.boundary}:{}),
     },line.segments.map(segment=>segmentSpan({
@@ -1402,7 +1422,7 @@ function renderMetric(item, box, bound, options) {
 
 // The trend arrow and colour for a laid-out metric (core metricTrendMark); undefined without a trend.
 function metricTrendMark(layout,bound,options) {
-  return coreMetricTrendMark(layout,{background:bound.design.backgroundColor??bound.design.colors.background});
+  return coreMetricTrendMark(layout,{background:bound.design.backgroundColor??bound.design.colors.background,neutral:bound.design.roles.neutrals.trendNeutral.hex});
 }
 
 function renderQuote(item, box, bound, options) {
@@ -1471,7 +1491,7 @@ function renderTable(item, box, bound, options) {
     const fill = style.fill == null
       ? defaultFill
       : resolveColorRef(style.fill, bound, defaultFill);
-    const defaultText = textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text);
+    const defaultText = cell.header ? readableSchemeColor(fill, bound.design.roles).hex : textColorForFill(fill, bound.design.colors.text);
     const textFill = style.color == null
       ? defaultText
       : resolveColorRef(style.color, bound, defaultText);
@@ -1855,7 +1875,13 @@ function codeHighlight(item, layout, bound) {
   if (!body?.fit) return undefined;
   const lines = codeHighlightLines(highlight, body.text).lines;
   if (!lines.length) return undefined;
-  return { marked: new Set(lines), numbers: codeLineNumbers(body.fit.sourceLines), bands: codeHighlightBands(body.fit.sourceLines, lines), colors: codeHighlightColors(bound.design.colorScheme) };
+  const palette = codeSyntaxPaletteForRoles(bound.design.roles);
+  return { marked: new Set(lines), numbers: codeLineNumbers(body.fit.sourceLines), bands: codeHighlightBands(body.fit.sourceLines, lines), colors: codeHighlightColors(bound.design.colorScheme, palette, bound.design.roles.neutrals.codePanel.hex) };
+}
+
+// The code language / filename label: the first accent of the variant, legible on the code panel (RR-96).
+function codeLabelColor(bound) {
+  return codeSyntaxPaletteForRoles(bound.design.roles).keyword;
 }
 
 // Token ranges of the code body and the palette to paint them with; undefined for plain code (an unknown language,
@@ -1866,7 +1892,7 @@ function codeSyntax(item, layout, bound, options) {
   if (!body || !language) return undefined;
   const tokens = tokenizeCode(body.text, language);
   if (!tokens.length) return undefined;
-  return { tokens, palette: codeSyntaxPaletteForScheme(bound.design.colorScheme) };
+  return { tokens, palette: codeSyntaxPaletteForRoles(bound.design.roles) };
 }
 
 // RR-61: a face is embedded only when the slide's own markup draws it: the family in a font-family list, at a font-weight and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -142,7 +142,7 @@
     "test:forced-colors-browser": "node test/forced-colors-browser.mjs artifacts/forced-colors"
   },
   "dependencies": {
-    "@openpresentation/opf": "^0.22.0",
+    "@openpresentation/opf": "^0.23.0",
     "bidi-js": "1.1.0",
     "fontkit": "^2.0.4",
     "harfbuzzjs": "1.6.3",