@openpresentation/opf-render 0.26.10 → 0.28.0

package/dist/charts.js

@@ -4,14 +4,15 @@
 // 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, chartSeriesPalette as coreChartSeriesPalette, chartTextSize, formatDataNumber, maxIntervalsFor, niceScale, stackCategoryValues, numberFormatError, resolveChartData, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
+import { chartHighlightColors, chartHighlightMarks, chartLeadFromScheme, chartNumber, chartPaletteForFill, chartSeriesPalette as coreChartSeriesPalette, chartTextSize, CHART_MAX_INTERVALS, chartIntervalsFor, 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";
 
 // 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.
+// WI-5 (P18, D3): series 1 from the scheme reaches 4.5:1 on a dark panel (an authored `colors[0]` keeps its colour).
 export function chartSeriesPalette(surface, colorScheme, colors, context) {
-  return chartPaletteForFill(surface, coreChartSeriesPalette(colorScheme, colors, context));
+  return chartPaletteForFill(surface, coreChartSeriesPalette(colorScheme, colors, context), { legibleLead: chartLeadFromScheme(colors, colorScheme, context) });
 }
 
 // FA-14: chart.highlight. Core resolves which series and categories are named (chartHighlightMarks) and the two colours
@@ -116,7 +117,8 @@ export function renderCatalogChart(item, box, bound, options, svg) {
   const data = render ? chartData(item, bound) : null;
   if (!data || !data.rows.length || data.columns.length < (CHARTEX_KINDS.has(spec.kind) ? 1 : 2)) return null;
   const c = chartContext(item, box, bound, options, svg, data);
-  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);
+  // WI-5 (P19): the panel is a fill only; the axes and gridlines draw the plot, so there is no outer frame (the PPTX chart area has no line either).
+  c.mark("rect", { x: box.x, y: box.y, width: box.width, height: box.height, fill: c.surface }, item.path);
   // 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);
@@ -633,7 +635,7 @@ function categoryScale(c, dataMin, dataMax, length, labelExtent, percent) {
     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 });
+  return niceScale(dataMin, dataMax, chartIntervalsFor(length, labelExtent, c.u), { percent });
 }
 
 function renderCategoryChart(c, spec) {
@@ -860,7 +862,7 @@ function renderComboChart(c, spec) {
   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 intervals = chartIntervalsFor(height, c.lineHeight * 1.2, c.u);
     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;
@@ -1004,12 +1006,12 @@ function renderScatterChart(c) {
   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 yScale = niceScale(ys.length ? Math.min(...ys) : 0, ys.length ? Math.max(...ys) : 1, chartIntervalsFor(height, c.lineHeight * 1.2, c.u));
   const tickWidth = Math.max(...yScale.ticks.map((tick) => c.width(formatTick(tick, false, yFormat)))) + 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, false, xFormat)), c.width(formatTick(xs.length ? Math.min(...xs) : 0, false, xFormat))) + fontPx;
-  const scaleForX = (w) => niceScale(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1, maxIntervalsFor(w, xLabelWidth));
+  const scaleForX = (w) => niceScale(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1, chartIntervalsFor(w, xLabelWidth, c.u));
   let xScale = scaleForX(plot.width);
   // RR-54: a formatted X axis keeps its end labels inside the chart.
   if (xFormat !== undefined) ({ x: plot.x, width: plot.width, scale: xScale } = insetForEndLabels(c, plot.x, plot.width, xFormat, scaleForX));
@@ -1193,6 +1195,12 @@ export function histogramBins(values) {
   }
 }
 
+// WI-5: the plot is laid out before its axis is fitted, so the tick-label column is sized from the labels any of the axes the plot could end up with
+// (one to CHART_MAX_INTERVALS intervals) would draw, not from a ten-interval scale that the final, sparser axis may exceed ("100" after "90").
+function probeTicks(dataMin, dataMax) {
+  return [...new Set(Array.from({ length: CHART_MAX_INTERVALS }, (_, index) => niceScale(dataMin, dataMax, index + 1).ticks).flat())];
+}
+
 // Vertical layout shared by the axis-bearing constructs: category labels below,
 // value ticks on the left (and a percentage axis on the right for pareto).
 function chartexPlot(c, { categories, legendWidth = 0, tickLabels = [], percentAxis = false }) {
@@ -1238,9 +1246,9 @@ function renderHistogramChart(c, spec) {
   const total = bars.reduce((sum, bar) => sum + Math.max(0, bar.value), 0);
   if (!Number.isFinite(total)) throw chartAggregateError(c.path, "cumulative total");
   const dataMax = bars.length ? Math.max(...bars.map((bar) => bar.value)) : 1, dataMin = bars.length ? Math.min(0, ...bars.map((bar) => bar.value)) : 0;
-  const probe = niceScale(dataMin, dataMax, 10);
+  const probe = { ticks: probeTicks(dataMin, dataMax) };
   const { plot, band } = chartexPlot(c, { categories: bars.map((bar) => ({ name: bar.name, path: bar.labelPath })), tickLabels: probe.ticks.map((tick) => formatTick(tick, false, format)), percentAxis: pareto });
-  const scale = niceScale(dataMin, dataMax, maxIntervalsFor(plot.height, c.lineHeight * 1.2));
+  const scale = niceScale(dataMin, dataMax, chartIntervalsFor(plot.height, c.lineHeight * 1.2, c.u));
   const { at, crossing } = valueAxis(c, plot, scale, format);
   const width = band / 1.06, offset = (band - width) / 2;
   bars.forEach((bar, i) => {
@@ -1254,7 +1262,7 @@ function renderHistogramChart(c, spec) {
   });
   if (pareto && bars.length) {
     // Percentage axis on the right, 0-100%, and the cumulative line through the bar centres.
-    const percent = niceScale(0, 1, maxIntervalsFor(plot.height, c.lineHeight * 1.2), { percent: true });
+    const percent = niceScale(0, 1, chartIntervalsFor(plot.height, c.lineHeight * 1.2, c.u), { percent: true });
     const right = plot.x + plot.width;
     axisLine(c, right, plot.y, right, plot.y + plot.height);
     for (const tick of percent.ticks) {
@@ -1285,9 +1293,9 @@ function renderWaterfallChart(c) {
   }).filter(Boolean);
   const extents = bars.flatMap((bar) => [bar.from, bar.to]);
   const dataMin = extents.length ? Math.min(0, ...extents) : 0, dataMax = extents.length ? Math.max(0, ...extents) : 1;
-  const probe = niceScale(dataMin, dataMax, 10);
+  const probe = { ticks: probeTicks(dataMin, dataMax) };
   const { plot, band } = chartexPlot(c, { categories: categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` })), tickLabels: probe.ticks.map((tick) => formatTick(tick, false, format)) });
-  const scale = niceScale(dataMin, dataMax, maxIntervalsFor(plot.height, c.lineHeight * 1.2));
+  const scale = niceScale(dataMin, dataMax, chartIntervalsFor(plot.height, c.lineHeight * 1.2, c.u));
   const { at } = valueAxis(c, plot, scale, format);
   const width = band / 1.5, offset = (band - width) / 2;
   bars.forEach((bar, k) => {
@@ -1443,9 +1451,9 @@ function renderBoxWhiskerChart(c) {
   const all = boxes.flat().flatMap((entry) => entry.stats ? [entry.stats.low, entry.stats.high, ...entry.stats.outliers] : []);
   const dataMin = all.length ? Math.min(...all) : 0, dataMax = all.length ? Math.max(...all) : 1;
   const legendWidth = seriesLegend(c, series);
-  const probe = niceScale(dataMin, dataMax, 10);
+  const probe = { ticks: probeTicks(dataMin, dataMax) };
   const { plot, band } = chartexPlot(c, { categories: groups.map((group) => ({ name: group.name, path: lone ? c.path : `${c.path}.data.rows.${group.first}.0` })), legendWidth, tickLabels: probe.ticks.map((tick) => formatTick(tick, false, format)) });
-  const scale = niceScale(dataMin, dataMax, maxIntervalsFor(plot.height, c.lineHeight * 1.2));
+  const scale = niceScale(dataMin, dataMax, chartIntervalsFor(plot.height, c.lineHeight * 1.2, c.u));
   const { at } = valueAxis(c, plot, scale, format);
   const group = band / 2, width = group / series.length, offset = (band - group) / 2;
   series.forEach((s, j) => {

package/dist/svg.js

@@ -3,7 +3,7 @@
 import {
   layoutTable, fitList, fitRichText, composeSlide, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill,
   resolveColorRef as resolveCoreColorRef, resolveScriptFonts, paragraphDirection, physicalAlignment, patternRuns,
-  metricTrendMark as coreMetricTrendMark, tokenizeCode, codeLineRuns, codeSyntaxPaletteForRoles, readableSchemeColor, resolveChartData,
+  metricTrendMark as coreMetricTrendMark, metricValueColor, 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
@@ -13,14 +13,15 @@ import {
 import {
   hasContentVariables,
   isTemplate,
+  resolveDrawnFontFamilies,
   resolveSlideContext,
   resolveVariables,
   validate
 } from "@openpresentation/opf";
 import { adjustedFontSize, baselineShift, createScriptFonts } from "./script-fonts.js";
-import { disabledFeaturesStyle } from "./font-compatibility.js";
 import { isSymbolEncodedFamily } from "./symbol-fonts.js";
 import { fontPolicyFor } from "@openpresentation/opf/font-policy";
+import { disabledFeaturesStyle } from "./font-compatibility.js";
 import { isDatasetChart, isDatasetTable, renderCatalogChart } from "./charts.js";
 import { renderCaption, renderFootnotes } from "./annotations.js";
 import { drawnFaces } from "./drawn-faces.js";
@@ -598,10 +599,9 @@ function bindSlide(presentation, index, context) {
   // A symbol-encoded family (Symbol, Wingdings, Webdings; FF-45) keeps its name too: each run resolves it again and the script-font planner
   // maps the run's private-use codes through the symbol table (symbol-fonts.js), as it does for a symbol run. Resolving the role to the open
   // symbol face here would drop the encoding, and the codes would reach a face with no glyph for them (missing-glyph).
-  for (const role of ["heading","body","code","accent"]) if (design.fonts[role] !== undefined) {
-    const named = design.fonts[role], resolved = resolveTextStyle({fontFamily:named,fontWeight:role === "heading" ? 700 : 400},textMeasurement).fontFamily;
-    design.fonts[role] = isSymbolEncodedFamily(named) || fontPolicyFor(named)?.replacement?.weight !== undefined && resolved.toLowerCase() !== named.toLowerCase() ? named : resolved;
-  }
+  // The rule is core's resolveDrawnFontFamilies, which validate and paginate compose with too (WI-1, P24); the renderer decides
+  // the two exceptions from the font policy and symbol tables it already holds.
+  design.fonts = resolveDrawnFontFamilies(design.fonts, textMeasurement, (named, resolved) => isSymbolEncodedFamily(named) || fontPolicyFor(named)?.replacement?.weight !== undefined && resolved.toLowerCase() !== named.toLowerCase());
   const geometry = composeSlide(slide, { ...slideContext.options, fontFamilies: design.fonts, textRasterPadding:context.options.textRasterPadding, textMeasurement });
   return {
     scriptFonts,
@@ -1001,7 +1001,8 @@ function listEntriesSvg(item, fit, bound, options) {
   // design.listBullet=image: core attaches the icon logo as item.bulletImage and its box (entry.bulletBox: 0.65 em, as PowerPoint draws a:buBlip). An icon that cannot be drawn keeps the glyph marker.
   const bullet=item.bulletImage?resolveBulletImage(item.bulletImage,bound,options):undefined;
   for(const entry of fit.listEntries){
-    if(bullet){const box=entry.bulletBox??{x:entry.marker.x,y:entry.marker.y-entry.marker.fontSize*.65,width:entry.marker.fontSize*.65,height:entry.marker.fontSize*.65};children.push(tag('image',{x:stableNumber(box.x),y:stableNumber(box.y),width:stableNumber(box.width),height:stableNumber(box.height),href:bullet,preserveAspectRatio:'xMidYMid meet','aria-hidden':'true',...(options.trace?{'data-opf-generated':'true'}:{})}));}
+    if(entry.marker.none){/* design.listBullet: none draws no marker */}
+    else if(bullet){const box=entry.bulletBox??{x:entry.marker.x,y:entry.marker.y-entry.marker.fontSize*.65,width:entry.marker.fontSize*.65,height:entry.marker.fontSize*.65};children.push(tag('image',{x:stableNumber(box.x),y:stableNumber(box.y),width:stableNumber(box.width),height:stableNumber(box.height),href:bullet,preserveAspectRatio:'xMidYMid meet','aria-hidden':'true',...(options.trace?{'data-opf-generated':'true'}:{})}));}
     else children.push(tag('text',{x:stableNumber(entry.marker.x),y:stableNumber(entry.marker.y),'font-family':fontStack(entry.marker.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(entry.marker.fontSize),...numberMarkerStyle(entry.marker),fill:bound.design.colors.text,'aria-hidden':'true',...(entry.marker.anchor==='end'?{'text-anchor':'end'}:{})},escapeText(entry.marker.text)));
     const config={path:entry.textPath,align:'left',fill:bound.design.colors.text,rich:Array.isArray(entry.value),options};
     children.push(renderRichLines(typeof entry.value==='string'?[entry.value]:entry.value,entry.text,entry.textBox,bound,config));
@@ -1390,7 +1391,7 @@ function renderMetric(item, box, bound, options) {
   const children=[];
   // RR-07: a trend draws an arrow beside its word and colours the trend and delta text, from core's accepted geometry.
   const trendMark=metricTrendMark(layout,bound,options);
-  const partFill=part=>trendMark&&(part.role==='trend'||part.role==='delta')?trendMark.color:part.role==='value'?bound.design.colors.primary:bound.design.colors.text;
+  const partFill=part=>trendMark&&(part.role==='trend'||part.role==='delta')?trendMark.color:part.role==='value'?metricValueColor(bound.design.colors.primary,bound.design.backgroundColor??bound.design.colors.background):bound.design.colors.text;
   for (const part of layout.parts) {
     const invalid=/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/u.exec(part.text);
     if (invalid) throw new OPFRenderError('invalid-metric-text',`Metric text contains U+${invalid[0].codePointAt(0).toString(16).toUpperCase().padStart(4,'0')} at UTF-16 offset ${invalid.index}, which XML cannot represent; edit that character before rendering.`,{path:part.path});
@@ -1494,7 +1495,8 @@ function renderTable(item, box, bound, options) {
   const children = [];
   // RR-54: a dataset table has no rows or columns of its own to point at; every cell reports the table's authored path.
   const own = isDatasetTable(item, bound) ? () => item.path : (path) => path;
-  const separateBorders = layout.rows.some(row => row.cells.some(cell => cell.style?.borders));
+  // WI-5 (P20): a table draws horizontal rules only by default (the header rule and a rule under every row, as the PPTX export writes them).
+  // A vertical edge is drawn only where a cell sets that border; an explicit border always wins over the default for its edge.
   const defaultEdges = [], explicitEdges = [];
   for (const row of layout.rows) for (const cell of row.cells) {
     const style = cell.style ?? {};
@@ -1511,15 +1513,16 @@ function renderTable(item, box, bound, options) {
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
       fill,
-      stroke: separateBorders ? undefined : bound.design.colors.border, "stroke-width":separateBorders ? undefined : 1,
       ...traceAttrs(options, own(cell.sourcePath ?? cell.path))
     }));
-    if (separateBorders) {
+    {
       const {x, y, width, height} = cell.box;
       const edges = {top:[x,y,x+width,y],right:[x+width,y,x+width,y+height],bottom:[x,y+height,x+width,y+height],left:[x,y,x,y+height]};
       for (const [edge, coordinates] of Object.entries(edges)) {
         const border = style.borders?.[edge];
-        (border ? explicitEdges : defaultEdges).push({coordinates, border, path:own(`${cell.sourcePath ?? cell.path}.style.borders.${edge}`)});
+        // Default rules: under every cell, and over the first row only (a lower row's top edge is the rule under the row above).
+        if (!border && (edge === "left" || edge === "right" || (edge === "top" && cell.row !== 0))) continue;
+        (border ? explicitEdges : defaultEdges).push({coordinates, border, path:own(border ? `${cell.sourcePath ?? cell.path}.style.borders.${edge}` : (cell.sourcePath ?? cell.path))});
       }
     }
     // Core layout has already applied vertical alignment to cell.textBox.y.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.26.10",
+  "version": "0.28.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -92,9 +92,9 @@
   "dependencies": {
     "bidi-js": "1.1.0",
     "fontkit": "^2.0.4",
-    "harfbuzzjs": "1.6.3",
+    "harfbuzzjs": "1.6.4",
     "pako": "3.0.2",
-    "@openpresentation/opf": "^0.26.10"
+    "@openpresentation/opf": "^0.28.0"
   },
   "peerDependencies": {
     "@expo-google-fonts/arimo": "0.4.3",
@@ -335,15 +335,15 @@
     "@expo-google-fonts/tinos": "0.4.2",
     "@hyzyla/pdfium": "2.1.13",
     "@jspawn/qpdf-wasm": "0.0.2",
-    "@napi-rs/canvas": "1.0.11",
+    "@napi-rs/canvas": "1.0.13",
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.14.0",
     "esbuild": "0.28.2",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
-    "playwright": "1.64.0",
+    "playwright": "1.64.1",
     "sharp": "0.35.5",
-    "@openpresentation/gallery": "0.26.10"
+    "@openpresentation/gallery": "0.28.0"
   },
   "bin": {
     "opf-preview-fonts": "./dist/preview-fonts-cli.js"
@@ -399,5 +399,5 @@
     "test:preview-a11y-browser": "node test/preview-a11y-browser.mjs",
     "test:forced-colors-browser": "node test/forced-colors-browser.mjs artifacts/forced-colors"
   },
-  "gitHead": "da3f869f6f3a152a0d7d5cb42eeb2843d302a46a"
+  "gitHead": "abc56634a584db38a305a27edc3bc76b4116637b"
 }