@openpresentation/opf-render 0.8.0 → 0.9.0

package/README.md

@@ -1,5 +1,11 @@
 # OPF Render
 
+Version 0.9.0 requires `@openpresentation/opf` ^0.11.0 and resolves content ColorRef / `variables` through core `resolveColorRef()`. Authored `#RRGGBB` paint stays authored. It retains the existing rendering APIs.
+
+Version 0.8.1 required core 0.10.1, including metric, quote and timeline layout placeholders and the corrected text-bullet contract.
+
+Unfinished prepared shaping work is preserved in the [September 15 roadmap](docs/roadmap-shaping-20260915.md); it is not part of the published runtime.
+
 Version 0.8.0 and this checkout require Node 24 (`24.x`). Use `.nvmrc` for local development. Earlier published versions retain their original engine declarations. Browser entrypoints remain browser-safe; native application compatibility is verified separately.
 
 Version 0.8.0 adds optional font-registry vector outlines and shared heading/scalar/rich line placement. Pass identical `textMeasurement` and `textRasterPadding` options to preview, pagination and export; padding defaults to one scaled reference pixel. SVG consumes accepted origins without remeasuring. See the [source contract and limits](https://github.com/OpenPresentation/opf/blob/f94125a1ff95bf0974a055fe1c081d348dad54f2/docs/plans/text-placement.md). Native raster certification remains separate.

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export interface RenderSvgOptions {
   strictAssets?: boolean;
   imageResolver?: (src: string | undefined, context: { asset: unknown; path: string }) => string | null | undefined;
   onDiagnostic?: (diagnostic: RenderDiagnostic) => void;
+  validate?: boolean;
   slideIndex?: number;
   trace?: boolean;
   catalogs?: Record<string, { records?: unknown[] } | unknown[]>;

package/dist/svg.d.ts

@@ -54,6 +54,8 @@ export interface RenderSvgOptions {
   strictAssets?: boolean;
   imageResolver?: (src: string | undefined, context: { asset: unknown; path: string }) => string | null | undefined;
   onDiagnostic?: (diagnostic: RenderDiagnostic) => void;
+  /** When false, skip AJV boundary validation. Default true. */
+  validate?: boolean;
   slideIndex?: number;
   trace?: boolean;
   catalogs?: Record<string, { records?: unknown[] } | unknown[]>;

package/dist/svg.js

@@ -1,6 +1,7 @@
 import { layoutTable, fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill } from "@openpresentation/opf/composition";
 import {
   catalogs as bundledCatalogs,
+  resolveColorRef as resolveCoreColorRef,
   validatePresentation
 } from "@openpresentation/opf";
 
@@ -291,6 +292,32 @@ function normalizeColor(value, fallback) {
   return fallback;
 }
 
+/** Resolve content ColorRef via core; keep authored #RRGGBB / #RRGGBBAA casing. */
+function resolveColorRef(value, bound, fallback) {
+  if (value == null || value === "") return fallback;
+  if (typeof value !== "string") return fallback;
+  const trimmed = value.trim();
+  // Core normalizeHexColor uppercases literals and strips #RRGGBBAA alpha.
+  // Packed-browser editor checks keep toolbar hex like #2563eb as authored.
+  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(trimmed)) return trimmed;
+  if (/^#[0-9a-fA-F]{3}$/.test(trimmed)) return normalizeColor(trimmed, fallback);
+  const colors = bound.design.colors ?? {};
+  return resolveCoreColorRef(trimmed, {
+    colorScheme: bound.design.colorScheme ?? {},
+    roles: {
+      primary: colors.primary,
+      secondary: colors.secondary,
+      accent: colors.accent,
+      background: colors.background,
+      surface: colors.surface,
+      text: colors.text,
+      textSecondary: colors.mutedText
+    },
+    variables: bound.design.variables,
+    fallback
+  });
+}
+
 function resolveBackground(background, colorScheme) {
   if (!background) return colorFromScheme(colorScheme, "light1", "#FFFFFF");
   if (typeof background === "string") return colorFromScheme(colorScheme, background, "#FFFFFF");
@@ -346,6 +373,7 @@ function resolveDesign(presentation, slide, context) {
     colorScheme,
     fontScheme,
     dimensions,
+    variables: presentation.variables ?? {},
     background: backgroundDefinition,
     backgroundColor,
     colors: {
@@ -485,7 +513,7 @@ function bindSlide(presentation, slide, layout, index, context) {
 
   const design = resolveDesign(presentation, slide, context);
   for (const role of ["heading","body","code"]) design.fonts[role] = resolveTextStyle({fontFamily:design.fonts[role],fontWeight:role === "heading" ? 700 : 400},context.options.textMeasurement).fontFamily;
-  const geometry = composeSlide(slide, { ...design.dimensions, layout, slideIndex: index, fonts: design.fonts, contentAlignment:design.contentAlignment, titleAlignment:design.titleAlignment, textRasterPadding:context.options.textRasterPadding, contentBox:design.contentBox, textMeasurement: context.options.textMeasurement });
+  const geometry = composeSlide(slide, { ...design.dimensions, layout, presentation, slideIndex: index, fonts: design.fonts, contentAlignment:design.contentAlignment, titleAlignment:design.titleAlignment, textRasterPadding:context.options.textRasterPadding, contentBox:design.contentBox, textMeasurement: context.options.textMeasurement });
   return {
     geometry,
     assets: presentation.assets ?? {},
@@ -502,7 +530,9 @@ function bindSlide(presentation, slide, layout, index, context) {
 
 export function resolvePresentation(input, options = {}) {
   const presentation = parseInput(input);
-  assertValidBoundary(presentation);
+  if (options.validate !== false) {
+    assertValidBoundary(presentation);
+  }
 
   const context = { presentation, options };
   const slides = presentation.slides.map((slide, index) => {
@@ -903,7 +933,14 @@ function renderTable(item, box, bound, options) {
   const defaultEdges = [], explicitEdges = [];
   for (const row of layout.rows) for (const cell of row.cells) {
     const style = cell.style ?? {};
-    const fill = style.fill ?? (cell.header ? bound.design.colors.primary : bound.design.colors.surface);
+    const defaultFill = cell.header ? bound.design.colors.primary : bound.design.colors.surface;
+    const fill = style.fill == null
+      ? defaultFill
+      : resolveColorRef(style.fill, bound, defaultFill);
+    const defaultText = textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text);
+    const textFill = style.color == null
+      ? defaultText
+      : resolveColorRef(style.color, bound, defaultText);
     children.push(tag("rect", {
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
@@ -923,17 +960,18 @@ function renderTable(item, box, bound, options) {
     children.push((cell.rich ? renderRichTextBox : renderTextBox)(cell.rich ? cell.value : flattenText(cell.value ?? ""), cell.textBox, bound, {
       path:cell.path, fontSize:15, fontFamily:bound.design.fonts.body,
       fontWeight:cell.header ? 700 : 400, textStyle:cell.textStyle, fit:cell.fit,
-      fill:style.color ?? textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text), align:style.align, options
+      fill:textFill, align:style.align, options
     }));
   }
 
-  return tag("g", traceAttrs(options, item.path), [...children, ...renderTableBorders(defaultEdges, explicitEdges, scale, bound.design.colors.border, options)].join("\n"));
+  return tag("g", traceAttrs(options, item.path), [...children, ...renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)].join("\n"));
 }
 
 // Explicit edges own their shared segment, including invisible/zero-width edges.
 // Split implicit neighbors at merge boundaries so they cannot fill dashed gaps,
 // cover alpha strokes, or reintroduce a border the author removed.
-function renderTableBorders(defaultEdges, explicitEdges, scale, defaultColor, options) {
+function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options) {
+  const defaultColor = bound.design.colors.border;
   const epsilon = 1e-7;
   const segment = ({coordinates:[x1,y1,x2,y2]}) => y1 === y2
     ? {horizontal:true, fixed:y1, start:x1, end:x2}
@@ -955,9 +993,12 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, defaultColor, op
   return [...defaults,...explicitEdges].flatMap(({coordinates:[x1,y1,x2,y2],border,path}) => {
     const width = border ? border.width * scale : 1;
     if (width === 0) return [];
+    const stroke = border?.color == null
+      ? defaultColor
+      : resolveColorRef(border.color, bound, defaultColor);
     return [tag('line', {
       x1:stableNumber(x1), y1:stableNumber(y1), x2:stableNumber(x2), y2:stableNumber(y2),
-      stroke:border?.color ?? defaultColor, 'stroke-width':stableNumber(width),
+      stroke, 'stroke-width':stableNumber(width),
       'stroke-dasharray':border?.dash === 'dash' ? `${width*4} ${width*3}` : border?.dash === 'dot' ? `${width} ${width*2}` : undefined,
       ...traceAttrs(options,path)
     })];
@@ -1138,20 +1179,16 @@ function inlineChartRows(data) {
 }
 
 function renderFurniture(bound, presentation, width, height, options, kind) {
-  const local=bound.slide.design?.[kind] !== undefined;
-  const furniture=local?bound.slide.design[kind]:presentation.design?.[kind];
-  if(!furniture)return "";
-  const root=local?`${bound.path}.design.${kind}`:`design.${kind}`;
-  const organizations=Array.isArray(presentation.organization)?presentation.organization:[presentation.organization];
-  const organization=organizations.find(item=>item?.role==='primary')??organizations.find(Boolean);
-  return tag('g',traceAttrs(options,root),['left','center','right'].map((zone,index)=>{
-    const item=furniture[zone];if(!item)return '';
-    const box={x:width*(.07+index*.3),y:kind==='header'?height*.025:height*.925,width:width*.26,height:height*.05};
-    if(item.image)return renderImage({value:item.image,path:`${root}.${zone}.image`},box,bound,{...options,imageFit:'contain'});
-    const pieces=[item.text,item.organization?organization?.name:null,item.section?bound.slide.section:null,item.slideNumber?String(bound.index+1):null,typeof item.date==='string'?item.date:null].filter(value=>value!==undefined&&value!==null&&value!=='');
-    if(item.date===true)reportDiagnostic({code:'date-needs-value',path:`${root}.${zone}.date`,message:'Use a literal date string for a reproducible preview; the document does not define a presentation date.'},options);
-    const anchor=['start','middle','end'][index],x=index===0?width*.07:index===1?width/2:width*.93;
-    return tag('text',{x:stableNumber(x),y:stableNumber(kind==='header'?height*.05:height-28),'text-anchor':anchor,'font-family':fontStack(bound.design.fonts.body,bound.design.fontScheme.type),'font-size':13,fill:bound.design.colors.mutedText,...traceAttrs(options,`${root}.${zone}`)},escapeText(pieces.join(' · ')));
+  const layout=bound.geometry.furniture;
+  if(!layout){
+    const value=bound.slide.design?.[kind]!==undefined?bound.slide.design[kind]:presentation.design?.[kind];
+    if(value)throw new OPFRenderError('missing-furniture-layout','Header/footer rendering requires coordinated core furniture geometry.',{path:bound.path});
+    return '';
+  }
+  return tag('g',{},layout.parts.filter(part=>part.kind===kind).map(part=>{
+    const trace=options.trace?{'data-opf-furniture-kind':kind,'data-opf-furniture-field':part.field,'data-opf-furniture-generated':String(part.generated),'data-opf-furniture-editable':!part.generated?'true':undefined,'data-opf-furniture-source':part.sourcePath}:{};
+    if(part.type==='image')return tag('g',trace,renderImage({value:part.image,path:part.path},part.box,bound,{...options,imageFit:'contain'}));
+    return tag('g',trace,renderTextBox(part.text,part.box,bound,{path:part.path,fit:part.fit,textStyle:part.style,fontFamily:part.style.fontFamily,align:part.alignment,fill:bound.design.colors.mutedText,diagnosticsHandled:true,options}));
   }).join(''));
 }
 function renderBranding(bound,presentation,width,height,options) {
@@ -1201,7 +1238,10 @@ function renderRichLines(value,fit,box,bound,config) {
     // avoids hinted browser advances; textLength also removes fractional-size
     // quantization drift. Height and baseline retain the selected font size.
     const position=flow?{'baseline-shift':fragment.baselineShift?stableNumber(-fragment.baselineShift):undefined}:{x:stableNumber((placed?.x??box.x+offset)+fragment.x),y:stableNumber((placed?.baseline??box.y+line.baseline)+fragment.baselineShift)};
-    const rendered=tag(flow?'tspan':'text',{...(config.options.trace?{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end}:{}),...position,'xml:space':'preserve','text-rendering':flow?undefined:'geometricPrecision',textLength:placed&&fragment.width>0?stableNumber(fragment.width):undefined,lengthAdjust:placed&&fragment.width>0?'spacingAndGlyphs':undefined,'font-family':fontStack(fragment.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(fragment.fontSize),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':flow?'normal':undefined,'text-decoration':[run.underline?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(run.color??'')?run.color:config.fill},escapeText(fragment.text));
+    const runFill = run.color == null
+      ? config.fill
+      : resolveColorRef(run.color, bound, config.fill);
+    const rendered=tag(flow?'tspan':'text',{...(config.options.trace?{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end}:{}),...position,'xml:space':'preserve','text-rendering':flow?undefined:'geometricPrecision',textLength:placed&&fragment.width>0?stableNumber(fragment.width):undefined,lengthAdjust:placed&&fragment.width>0?'spacingAndGlyphs':undefined,'font-family':fontStack(fragment.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(fragment.fontSize),'font-weight':fragment.style.fontWeight,'font-style':fragment.style.italic?'italic':flow?'normal':undefined,'text-decoration':[run.underline?'underline':'',run.strikethrough?'line-through':''].filter(Boolean).join(' ')||undefined,fill:runFill},escapeText(fragment.text));
     if(run.link&&/^(https?:|mailto:)/i.test(run.link))return tag('a',{href:run.link,target:'_blank',rel:'noopener noreferrer'},rendered);
     return rendered;
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -55,9 +55,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/styled-table.mjs && node --check test/chart-colors.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs",
+    "typecheck": "node --check src/index.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/golden.mjs && node --check src/fonts.js && node --check src/fonts-node.js && node --check src/font-compatibility.js && node --check test/office-fonts.mjs && node --check src/fonts-browser.js && node --check test/fonts-browser.mjs && node --check src/svg.js && node --check src/raster.js && node --check src/raster-images.js && node --check test/webp.mjs && node --check test/jpeg-orientation.mjs && node --check scripts/build-browser-check.mjs && node --check test/jpeg-browser.js && node --check test/rich-table.mjs && node --check test/styled-table.mjs && node --check test/color-references.mjs && node --check test/chart-colors.mjs && node --check test/image-placeholders.mjs && node --check test/image-placeholders-browser.mjs && node --check test/accepted-text.mjs && node --check test/accepted-text-fixtures.mjs && node --check test/accepted-text-browser.mjs && node --check test/rich-spacing-browser.mjs && node --check test/rich-flow-browser.mjs && node --check test/rich-flow-review-sheets.mjs && node --check test/furniture.mjs",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/chart-colors.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/design-preview.mjs && npm run build:browser-check && npm run test:styled-table",
+    "test": "npm run build && node test/furniture.mjs && node test/font-outlines.mjs && node test/accepted-text.mjs && node test/image-placeholders.mjs && node test/chart-colors.mjs && node test/smoke.mjs && node test/webp.mjs && node test/jpeg-orientation.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/timeline.mjs && node test/quote-footer.mjs && node test/shared-quote.mjs && node test/rich-trace.mjs && node test/rich-table.mjs && node test/color-references.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/design-preview.mjs && npm run build:browser-check && npm run test:styled-table",
     "test:golden": "npm run build && node test/golden.mjs",
     "test:packed": "node test/packed-install.mjs",
     "test:browser": "npm run build:browser-check && node test/browser-check.mjs",
@@ -88,7 +88,7 @@
     "@expo-google-fonts/roboto": "0.4.3",
     "@expo-google-fonts/roboto-mono": "0.4.2",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf": "^0.10.0",
+    "@openpresentation/opf": "^0.11.0",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",