@openpresentation/opf-render 0.6.0 → 0.8.0

package/dist/svg.js

@@ -1,4 +1,4 @@
-import { layoutTable, fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText } from "@openpresentation/opf/composition";
+import { layoutTable, fitList, fitRichText, composeSlide, resolveCanvasDimensions, resolveFontFamilies, resolveTextStyle, textWidthMeasurer, fitText, textColorForFill, chartColorForFill } from "@openpresentation/opf/composition";
 import {
   catalogs as bundledCatalogs,
   validatePresentation
@@ -370,7 +370,9 @@ function inferLayoutId(slide) {
   if (slide.table) return "table-1x";
   if (slide.image) return "image-1x";
   if (slide.video) return "media-1x";
-  if (slide.code) return "code-1x";
+  // Unspecified code layout uses the same automatic flow as core pagination
+  // and PPTX export. An explicit code-1x preset still reserves its own slots.
+  if (slide.code !== undefined) return "blank";
   if (slide.items || slide.bullets) return "list-1x";
   if (slide.text || slide.metric || slide.quote || slide.timeline) return "text-1x";
   if (slide.subtitle) return "title-subtitle";
@@ -483,7 +485,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, textMeasurement: context.options.textMeasurement });
+  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 });
   return {
     geometry,
     assets: presentation.assets ?? {},
@@ -620,7 +622,8 @@ function renderBackground(bound, width, height, options) {
 function renderSlideContent(bound, width, height, options) {
   for (const diagnostic of bound.geometry.diagnostics) reportDiagnostic(diagnostic, options);
   return bound.geometry.items.map(item => {
-    const surface=bound.design.contentBox && !['title','subtitle','tag'].includes(item.field) ? tag('rect',{x:item.box.x,y:item.box.y,width:item.box.width,height:item.box.height,rx:8,fill:bound.design.colors.surface,stroke:bound.design.colors.border}) : '';
+    const frame=item.frameBox;
+    const surface=frame ? tag('rect',{x:frame.x,y:frame.y,width:frame.width,height:frame.height,rx:8*Math.min(width,height)/720,fill:bound.design.colors.surface,stroke:bound.design.colors.border}) : '';
     return surface+renderPayload(item, item.box, { ...bound, composition: item.composition }, options);
   });
 }
@@ -667,6 +670,9 @@ function renderTextPayload(item, box, bound, options) {
     fontFamily: item.field === "title" ? bound.design.fonts.heading : bound.design.fonts.body,
     fontWeight: item.field === "title" ? 700 : 400,
     fill: bound.design.colors.text,
+    fit: item.text,
+    textStyle: item.textStyle,
+    diagnosticsHandled: Boolean(item.text),
     options
   });
 }
@@ -687,11 +693,14 @@ function renderList(item, box, bound, options) {
 function renderImage(item, box, bound, options) {
   let asset = normalizeAsset(item.value);
   const seen = new Set();
+  let missingReference;
   while (asset.src?.startsWith("asset:")) {
     const id = asset.src.slice(6);
     if (seen.has(id)) throw new OPFRenderError("invalid-asset-reference", "Circular asset reference.", { path: item.path });
     seen.add(id);
-    asset = normalizeAsset(bound.assets[id]);
+    if (!Object.hasOwn(bound.assets,id)) { missingReference=id; break; }
+    const {src:_source,...overrides}=asset;
+    asset = {...normalizeAsset(bound.assets[id]),...overrides};
   }
   const source = options.imageResolver?.(asset.src, { asset, path: item.path }) ?? asset.src;
   if (typeof source === "string" && /^data:image\/(png|jpeg|gif|webp);base64,/i.test(source)) {
@@ -699,8 +708,18 @@ function renderImage(item, box, bound, options) {
       href: source, preserveAspectRatio: (options.imageFit ?? (bound.design.imageFill === "crop" ? "cover" : "contain")) === "cover" ? "xMidYMid slice" : "xMidYMid meet", role: "img", "aria-label": asset.alt ?? "Image",
       ...traceAttrs(options, item.path) });
   }
-  if (options.strictAssets) throw new OPFRenderError("unresolved-asset", "Image requires an embedded raster data URI or a host imageResolver.", { path: item.path });
+  const reason=missingReference?'missing-reference':!asset.src?'missing-source':'unsupported-source';
+  const message=missingReference?`Image asset ${missingReference} is missing; supply the referenced asset or resolve it in the host.`:'Image requires an embedded raster data URI or a host imageResolver.';
+  if (options.strictAssets) throw new OPFRenderError("unresolved-asset", message, { path: item.path,reason });
   const fill = bound.design.colors.surface;
+  const scale=Math.min(bound.design.dimensions.width,bound.design.dimensions.height)/720;
+  const padding=Math.min(24*scale,box.width*.06,box.height*.1),inner=inset(box,padding);
+  const description=asset.alt??asset.title??'Image';
+  const label=`Image unavailable\n${description}`;
+  const style=resolveTextStyle({fontFamily:bound.design.fonts.body,fontWeight:600,path:item.path},options.textMeasurement);
+  const fit=fitText(label,inner,20*scale,((bound.composition??bound.geometry.composition).minFontSize??16)*scale,textWidthMeasurer(style,options.textMeasurement));
+  const textColor=textColorForFill(fill,bound.design.colors.text);
+  reportDiagnostic({code:'unresolved-asset',path:item.path,message,reason,source:asset.src,assetId:missingReference,description,placeholder:fit.overflow?'icon':'label'},options);
   const children = [
     tag("rect", {
       x: box.x,
@@ -711,21 +730,28 @@ function renderImage(item, box, bound, options) {
       fill,
       stroke: bound.design.colors.border,
       "stroke-width": 1,
+      "stroke-dasharray": "4 3",
       ...traceAttrs(options, item.path)
-    }),
-    renderTextBox(asset.alt || asset.title || asset.src || "Image", inset(box, 24), bound, {
+    })
+  ];
+  if(!fit.overflow)children.push(renderTextBox(label, inner, bound, {
       path: item.path,
       fontSize: 20,
-      fontFamily: bound.design.fonts.body,
+      fontFamily: style.fontFamily,
       fontWeight: 600,
-      fill: bound.design.colors.mutedText,
+      textStyle:style,fit,diagnosticsHandled:true,
+      fill: textColor,
       options,
       align: "center",
       verticalAlign: "middle"
-    })
-  ];
-
-  return tag("g", traceAttrs(options, item.path), children.join("\n"));
+    }));
+  else {
+    // This is a status indicator, not shortened authored content. The complete
+    // description remains in the accessible name and the path-specific diagnostic.
+    const size=Math.max(0,Math.min(inner.width,inner.height,24*scale)),icon=centeredBox(inner,size,size);
+    children.push(tag('path',{d:`M ${icon.x} ${icon.y} L ${icon.x+size} ${icon.y+size} M ${icon.x+size} ${icon.y} L ${icon.x} ${icon.y+size}`,fill:'none',stroke:textColor,'stroke-width':Math.min(2*scale,size/8),'aria-hidden':'true'}));
+  }
+  return tag("g", {...traceAttrs(options,item.path),'data-opf-asset-status':'unresolved',role:'img','aria-label':`Image unavailable: ${description}`},children.join("\n"));
 }
 
 function renderMedia(item, box, bound, options) {
@@ -768,8 +794,14 @@ function renderMedia(item, box, bound, options) {
 }
 
 function renderCode(item, box, bound, options) {
-  const code = typeof item.value === "string" ? item.value : item.value?.source ?? stableJson(item.value);
-  const label = typeof item.value === "object" && item.value?.language ? String(item.value.language) : "code";
+  const layout = item.codeLayout;
+  if (!layout) throw new OPFRenderError('missing-code-layout', 'Code rendering requires a coordinated core build with shared code geometry.', {path:item.path});
+  for (const part of layout.parts) {
+    // XML 1.0 Char excludes controls and unpaired UTF-16 surrogates. The u flag
+    // keeps valid supplementary characters (surrogate pairs) accepted.
+    const invalid = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/u.exec(part.text);
+    if (invalid) throw new OPFRenderError('invalid-code-text', `Code 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});
+  }
   const children = [
     tag("rect", {
       x: box.x,
@@ -780,55 +812,57 @@ function renderCode(item, box, bound, options) {
       stroke: "#334155",
       "stroke-width": 1,
       ...traceAttrs(options, item.path)
-    }),
-    tag("text", {
-      x: box.x + 18,
-      y: box.y + 28,
-      fill: "#93C5FD",
-      "font-family": fontStack(bound.design.fonts.code, "monospace"),
-      "font-size": 14,
-      "font-weight": 700,
-      ...traceAttrs(options, item.path)
-    }, escapeText(label.toUpperCase())),
-    renderTextBox(code, { x: box.x + 18, y: box.y + 46, width: box.width - 36, height: box.height - 64 }, bound, {
-      path: item.path,
-      fontSize: 18,
-      fontFamily: bound.design.fonts.code,
-      fontWeight: 400,
-      fill: "#E5E7EB",
-      options,
-      preserveNewlines: true
     })
   ];
-  return tag("g", traceAttrs(options, item.path), children.join("\n"));
+  for (const part of layout.parts) {
+    if (!part.fit) throw new OPFRenderError('layout-overflow', 'Code content has no usable internal space; increase its cell size before rendering.', {path:part.path,issues:layout.diagnostics});
+    const lines=part.fit.sourceLines.map((line,index)=>tag('text',{
+      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'?'#E5E7EB':'#93C5FD',
+      ...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=>tag('tspan',{
+      x:stableNumber(part.box.x+segment.x),
+      // SVG's CSS tab-size does not place literal tabs at their measured stops.
+      ...(segment.kind==='tab'?{textLength:stableNumber(segment.width),lengthAdjust:'spacingAndGlyphs'}:{}),
+      ...(options.trace?{'data-opf-segment':segment.kind,'data-opf-text-start':segment.start,'data-opf-text-end':segment.end}:{}),
+    },escapeText(part.text.slice(segment.start,segment.end)))).join('')));
+    children.push(tag('g',{...traceAttrs(options,part.path),...(options.trace?{'data-opf-code-role':part.role,'data-opf-generated':part.generated?'true':undefined,
+      'data-opf-box-x':part.box.x,'data-opf-box-y':part.box.y,'data-opf-box-width':part.box.width,'data-opf-box-height':part.box.height}:{}),
+      ...(part.fit.overflow?{'data-opf-overflow':'true'}:{})},lines.join('\n')));
+  }
+  return tag("g", {...traceAttrs(options,item.path),...(options.trace?{'data-opf-code-container':'true'}:{})}, children.join("\n"));
 }
 
 function renderMetric(item, box, bound, options) {
-  const metric = isPlainObject(item.value) ? item.value : { value: item.value };
-  const children = [
-    renderTextBox(String(metric.value ?? ""), { ...box, height: box.height * 0.45 }, bound, {
-      path: `${item.path}.value`,
-      fontSize: Math.min(76, box.height * 0.28),
-      fontFamily: bound.design.fonts.heading,
-      fontWeight: 800,
-      fill: bound.design.colors.primary,
-      options
-    }),
-    renderTextBox([metric.label, metric.description, metric.delta].filter(Boolean).join("\n"), {
-      x: box.x,
-      y: box.y + box.height * 0.45,
-      width: box.width,
-      height: box.height * 0.55
-    }, bound, {
-      path: item.path,
-      fontSize: 23,
-      fontFamily: bound.design.fonts.body,
-      fontWeight: 500,
-      fill: bound.design.colors.text,
-      options
-    })
-  ];
-  return tag("g", traceAttrs(options, item.path), children.join("\n"));
+  const layout=item.metricLayout;
+  if (!layout) throw new OPFRenderError('missing-metric-layout','Metric rendering requires coordinated core metric geometry.',{path:item.path});
+  const children=[];
+  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});
+    if (!part.visible) continue;
+    if (!part.fit||part.linePositions?.length!==part.fit.sourceLines.length) throw new OPFRenderError('layout-overflow','Metric content has no accepted internal line positions; increase its cell size or coordinate package versions.',{path:part.path,issues:layout.diagnostics});
+    const lines=part.fit.sourceLines.map((line,index)=>{
+      const origin=part.linePositions[index];
+      return tag('text',{x:stableNumber(origin.x),y:stableNumber(origin.baseline),'text-anchor':'start',
+        'font-family':fontStack(part.style.fontFamily,bound.design.fontScheme.type),'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==='value'?bound.design.colors.primary:bound.design.colors.text,
+        ...traceAttrs(options,part.path),...(options.trace?{'data-opf-metric-role':part.role,'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=>tag('tspan',{x:stableNumber(origin.x+segment.x),
+        ...(segment.kind==='tab'?{textLength:stableNumber(segment.width),lengthAdjust:'spacingAndGlyphs'}:{}),
+        ...(options.trace?{'data-opf-segment':segment.kind,'data-opf-text-start':segment.start,'data-opf-text-end':segment.end}:{}),
+      },escapeText(part.text.slice(segment.start,segment.end)))).join(''));
+    });
+    children.push(tag('g',{...traceAttrs(options,part.path),...(options.trace?{'data-opf-metric-role':part.role,
+      'data-opf-box-x':part.box.x,'data-opf-box-y':part.box.y,'data-opf-box-width':part.box.width,'data-opf-box-height':part.box.height}:{}),
+      ...(part.fit.overflow?{'data-opf-overflow':'true'}:{})},lines.join('\n')));
+  }
+  return tag('g',{...traceAttrs(options,item.path),...(options.trace?{'data-opf-metric-container':'true'}:{})},children.join('\n'));
 }
 
 function renderQuote(item, box, bound, options) {
@@ -846,53 +880,19 @@ function renderQuote(item, box, bound, options) {
 }
 
 function renderTimeline(item, box, bound, options) {
-  const timeline = Array.isArray(item.value) ? { events: item.value } : item.value;
-  const events = Array.isArray(timeline?.events) ? timeline.events : [];
-  if (!events.length) return "";
-  const labelWidth = box.width / Math.max(2, events.length);
-  const gap = (box.width - labelWidth) / Math.max(1, events.length - 1);
-  const start = events.length === 1 ? box.x + box.width / 2 : box.x + labelWidth / 2;
-  const end = events.length === 1 ? start : box.x + box.width - labelWidth / 2;
-  const y = box.y + box.height * 0.46;
-  const children = [
-    tag("line", {
-      x1: start,
-      x2: end,
-      y1: y,
-      y2: y,
-      stroke: bound.design.colors.border,
-      "stroke-width": 3,
-      ...traceAttrs(options, item.path)
-    })
-  ];
-
-  events.forEach((event, index) => {
-    const x = start + index * gap;
-    const eventPath = `${item.path}.events.${index}`;
-    children.push(tag("circle", {
-      cx: x,
-      cy: y,
-      r: Math.min(9, labelWidth / 5, box.height * 0.04),
-      fill: bound.design.colors.primary,
-      ...traceAttrs(options, eventPath)
-    }));
-    children.push(renderTextBox([event.when, event.what, event.description].filter(Boolean).join("\n"), {
-      x: x - labelWidth / 2,
-      y: index % 2 === 0 ? box.y : y + 24,
-      width: labelWidth,
-      height: box.height * 0.38
-    }, bound, {
-      path: eventPath,
-      fontSize: 16,
-      fontFamily: bound.design.fonts.body,
-      fontWeight: 500,
-      fill: bound.design.colors.text,
-      options,
-      align: "center"
-    }));
-  });
-
-  return tag("g", traceAttrs(options, item.path), children.join("\n"));
+  const layout=item.timelineLayout;
+  if(!layout)throw new OPFRenderError('missing-timeline-layout','Timeline rendering requires a coordinated core build with shared timeline geometry.',{path:item.path});
+  const scale=Math.min(bound.design.dimensions.width,bound.design.dimensions.height)/720;
+  const children=[tag('line',{...layout.connector,stroke:bound.design.colors.border,'stroke-width':3*scale,...traceAttrs(options,item.path)})];
+  for(const marker of layout.markers)children.push(tag('circle',{cx:marker.x,cy:marker.y,r:marker.radius,fill:bound.design.colors.primary,...traceAttrs(options,marker.path)}));
+  for(const part of layout.parts){
+    if(!part.fit)throw new OPFRenderError('layout-overflow','Timeline field has no usable space; change the arrangement or paginate events.',{path:part.path,issues:layout.diagnostics});
+    children.push(tag('g',options.trace?{'data-opf-timeline-role':part.role}:{},renderTextBox(part.text,part.box,bound,{
+      path:part.path,fit:part.fit,textStyle:part.style,fontFamily:part.requestedStyle.fontFamily,align:part.alignment,
+      fill:bound.design.colors.text,diagnosticsHandled:true,options,
+    })));
+  }
+  return tag('g',{...traceAttrs(options,item.path),...(options.trace?{'data-opf-timeline-arrangement':layout.arrangement}:{})},children.join('\n'));
 }
 
 function renderTable(item, box, bound, options) {
@@ -903,10 +903,11 @@ 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);
     children.push(tag("rect", {
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
-      fill: style.fill ?? (cell.header ? bound.design.colors.primary : bound.design.colors.surface),
+      fill,
       stroke: separateBorders ? undefined : bound.design.colors.border, "stroke-width":separateBorders ? undefined : 1,
       ...traceAttrs(options, cell.sourcePath ?? cell.path)
     }));
@@ -922,7 +923,7 @@ 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 ?? (cell.header ? "#FFFFFF" : bound.design.colors.text), align:style.align, options
+      fill:style.color ?? textColorForFill(fill, cell.header ? "#FFFFFF" : bound.design.colors.text), align:style.align, options
     }));
   }
 
@@ -967,9 +968,10 @@ function renderImportedChart(item, box, bound, options) {
   const chart=item.value, rows=chart.data?.rows??[], columns=chart.data?.columns??[];
   if(!rows.length||columns.length<2)return null;
   const kind=chart.type, circular=['pie','donut','doughnut'].includes(kind);
-  const colors=[bound.design.colors.primary,bound.design.colors.secondary,'#9B6BCC','#D98944','#429B85','#CB5D79'];
+  const colors=[bound.design.colors.primary,bound.design.colors.secondary,'#9B6BCC','#D98944','#429B85','#CB5D79'].map(color=>chartColorForFill(bound.design.colors.surface,color));
   const children=[];
-  const text=(value,rect,path,size=16,align='center')=>renderTextBox(String(value),rect,bound,{path,fontSize:size,fontFamily:bound.design.fonts.body,fontWeight:400,fill:bound.design.colors.text,options,align,verticalAlign:'middle'});
+  const labelColor=textColorForFill(bound.design.colors.surface,bound.design.colors.text);
+  const text=(value,rect,path,size=16,align='center')=>renderTextBox(String(value),rect,bound,{path,fontSize:size,fontFamily:bound.design.fonts.body,fontWeight:400,fill:labelColor,options,align,verticalAlign:'middle'});
   const number=value=>typeof value==='number'&&Number.isFinite(value)?value:typeof value==='string'&&value.trim()&&Number.isFinite(Number(value))?Number(value):null;
   const series=columns.slice(1).map((name,j)=>({name,values:rows.map(row=>number(row[j+1]))}));
   children.push(tag('rect',{x:box.x,y:box.y,width:box.width,height:box.height,fill:bound.design.colors.surface,stroke:bound.design.colors.border,...traceAttrs(options,item.path)}));
@@ -1021,7 +1023,7 @@ function renderImportedChart(item, box, bound, options) {
         });
       }
     });
-    children.push(tag('line',{x1:horizontal?zero:plot.x,x2:horizontal?zero:plot.x+plot.width,y1:horizontal?plot.y:zero,y2:horizontal?plot.y+plot.height:zero,stroke:bound.design.colors.text,'stroke-width':1}));
+    children.push(tag('line',{x1:horizontal?zero:plot.x,x2:horizontal?zero:plot.x+plot.width,y1:horizontal?plot.y:zero,y2:horizontal?plot.y+plot.height:zero,stroke:labelColor,'stroke-width':1}));
   }
   return tag('g',traceAttrs(options,item.path),children.join('\n'));
 }
@@ -1036,13 +1038,17 @@ function renderChart(item, box, bound, options) {
   const data = inlineChartRows(chart.data);
   const plot = inset(box, 28);
   const max = Math.max(1, ...data.map((row) => Math.abs(row.value)));
+  const panelFill = bound.design.colors.surface;
+  const labelColor = textColorForFill(panelFill, bound.design.colors.text);
+  const primary = chartColorForFill(panelFill, bound.design.colors.primary);
+  const secondary = chartColorForFill(panelFill, bound.design.colors.secondary);
   const children = [
     tag("rect", {
       x: box.x,
       y: box.y,
       width: box.width,
       height: box.height,
-      fill: "#FFFFFF",
+      fill: panelFill,
       stroke: bound.design.colors.border,
       "stroke-width": 1,
       ...traceAttrs(options, item.path)
@@ -1055,7 +1061,7 @@ function renderChart(item, box, bound, options) {
       fontSize: 20,
       fontFamily: bound.design.fonts.body,
       fontWeight: 500,
-      fill: bound.design.colors.mutedText,
+      fill: labelColor,
       options,
       align: "center",
       verticalAlign: "middle"
@@ -1072,7 +1078,7 @@ function renderChart(item, box, bound, options) {
     children.push(tag("polyline", {
       points: points.map(([x, y]) => `${stableNumber(x)},${stableNumber(y)}`).join(" "),
       fill: "none",
-      stroke: bound.design.colors.primary,
+      stroke: primary,
       "stroke-width": 4,
       ...traceAttrs(options, `${item.path}.data`)
     }));
@@ -1080,7 +1086,7 @@ function renderChart(item, box, bound, options) {
       cx: stableNumber(x),
       cy: stableNumber(y),
       r: 5,
-      fill: bound.design.colors.primary,
+      fill: primary,
       ...traceAttrs(options, `${item.path}.data.rows.${index}`)
     })));
   } else {
@@ -1095,7 +1101,7 @@ function renderChart(item, box, bound, options) {
         y: stableNumber(y),
         width: stableNumber(barWidth),
         height: stableNumber(barHeight),
-        fill: index % 2 === 0 ? bound.design.colors.primary : bound.design.colors.secondary,
+        fill: index % 2 === 0 ? primary : secondary,
         ...traceAttrs(options, `${item.path}.data.rows.${index}`)
       }));
     });
@@ -1111,7 +1117,7 @@ function renderChart(item, box, bound, options) {
     fontSize: 12,
     fontFamily: bound.design.fonts.body,
     fontWeight: 400,
-    fill: bound.design.colors.mutedText,
+    fill: labelColor,
     options,
     align: "center"
   }));
@@ -1141,7 +1147,7 @@ function renderFurniture(bound, presentation, width, height, options, kind) {
   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);
+    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;
@@ -1152,7 +1158,7 @@ function renderBranding(bound,presentation,width,height,options) {
   const design={...presentation.design,...bound.slide.design}, pieces=[];
   const rootFor=key=>bound.slide.design?.[key]!==undefined?`${bound.path}.design.${key}`:`design.${key}`;
   if(design.watermark){
-    pieces.push(tag('g',{opacity:typeof design.watermark==='object'?design.watermark.opacity??.08:.08},renderImage({value:design.watermark,path:rootFor('watermark')},{x:width*.3,y:height*.3,width:width*.4,height:height*.4},bound,options)));
+    pieces.push(tag('g',{opacity:typeof design.watermark==='object'?design.watermark.opacity??.08:.08},renderImage({value:design.watermark,path:rootFor('watermark')},{x:width*.3,y:height*.3,width:width*.4,height:height*.4},bound,{...options,imageFit:'contain'})));
   }
   return pieces.join('');
 }
@@ -1175,32 +1181,50 @@ function renderEmbeddedFonts(fonts = []) {
 function renderRichTextBox(value, box, bound, config) {
   const scale=Math.min(bound.design.dimensions.width,bound.design.dimensions.height)/720;
   const fit=config.fit??fitRichText(value,box,config.fontSize*scale,((bound.composition??bound.geometry.composition).minFontSize??16)*scale,{style:{fontFamily:config.fontFamily,fontWeight:config.fontWeight??400,path:config.path},textMeasurement:config.options.textMeasurement});
-  if(fit.overflow){const diagnostic={code:'text-overflow',path:config.path,message:'Mixed-style text exceeds its cell at the minimum font size.'};reportDiagnostic(diagnostic,config.options);if((bound.composition??bound.geometry.composition).overflow==='error')throw new OPFRenderError('layout-overflow',diagnostic.message,{issues:[diagnostic]});}
+  if(fit.overflow&&!config.diagnosticsHandled){const diagnostic={code:'text-overflow',path:config.path,message:'Mixed-style text exceeds its cell at the minimum font size.'};reportDiagnostic(diagnostic,config.options);if((bound.composition??bound.geometry.composition).overflow==='error')throw new OPFRenderError('layout-overflow',diagnostic.message,{issues:[diagnostic]});}
   return renderRichLines(value,fit,box,bound,config);
 }
 
 function renderRichLines(value,fit,box,bound,config) {
-  const alignment=config.align??bound.design.contentAlignment;
+  const alignment=fit.placement?.alignment??config.align??bound.design.contentAlignment;
   let textOffset=0;
   const runOffsets=value.map(run=>{const start=textOffset;textOffset+=(typeof run==='string'?run:run.text).length;return start;});
-  const content=fit.richLines.flatMap(line=>line.fragments.map(fragment=>{
+  // With no measurement provider, fragment advances are estimates. Let SVG
+  // shape adjacent runs naturally inside each estimated line instead of turning
+  // those estimates into visible gaps. Supplied measurements keep exact origins.
+  const flow=!config.options.textMeasurement?.measure&&!fit.placement;
+  const content=fit.richLines.map((line,lineIndex)=>{
+    const fragments=line.fragments.map(fragment=>{
     const run=fragment.run,offset=alignment==='right'?box.width-line.width:alignment==='center'?(box.width-line.width)/2:0;
-    const rendered=tag('text',{...(config.options.trace?{'data-opf-text-start':runOffsets[fragment.runIndex]+fragment.start,'data-opf-text-end':runOffsets[fragment.runIndex]+fragment.end}:{}),x:stableNumber(box.x+offset+fragment.x),y:stableNumber(box.y+line.baseline+fragment.baselineShift),'xml:space':'preserve','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':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 placed=fit.placement?.lines[lineIndex];
+    // Accepted outline placement owns the horizontal advance. Geometric precision
+    // 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));
     if(run.link&&/^(https?:|mailto:)/i.test(run.link))return tag('a',{href:run.link,target:'_blank',rel:'noopener noreferrer'},rendered);
     return rendered;
-  }));
+    });
+    if(!flow)return fragments.join('\n');
+    const x=alignment==='right'?box.x+box.width:alignment==='center'?box.x+box.width/2:box.x;
+    const first=line.fragments[0];
+    return tag('text',{x:stableNumber(x),y:stableNumber(box.y+line.baseline),'text-anchor':alignment==='right'?'end':alignment==='center'?'middle':'start','xml:space':'preserve','font-family':fontStack(first?.style.fontFamily??config.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(first?.fontSize??fit.fontSize),'font-weight':first?.style.fontWeight??config.fontWeight??400,'font-style':first?.style.italic?'italic':undefined},fragments.join(''));
+  });
   let cursor=0;
   const whole=value.map(run=>typeof run==='string'?run:run.text).join('');
   const lineTrace=config.options.trace?fit.richLines.map((line,index)=>{
     if(index){const newline=/^(\r\n|\r|\n)/.exec(whole.slice(cursor));if(newline)cursor+=newline[0].length;}
     const start=cursor;cursor+=(fit.lines[index]??'').length;
     const offset=alignment==='right'?box.width-line.width:alignment==='center'?(box.width-line.width)/2:0;
-    return {start,end:cursor,x:box.x+offset,y:box.y+line.y,height:line.height};
+    const placed=fit.placement?.lines[index];
+    return {start,end:cursor,x:placed?.x??box.x+offset,y:placed?.y??box.y+line.y,height:placed?.height??line.height};
   }):undefined;
-  return tag('g',{...traceAttrs(config.options,config.path),...(config.options.trace?{'data-opf-box-width':box.width,'data-opf-rich-text':config.rich===false?undefined:'true','data-opf-rich-lines':JSON.stringify(lineTrace)}:{}),...(fit.overflow?{'data-opf-overflow':'true'}:{})},content.join('\n'));
+  return tag('g',{...traceAttrs(config.options,config.path),...(config.options.trace?{'data-opf-box-width':box.width,'data-opf-rich-text':config.rich===false?undefined:'true','data-opf-rich-lines':JSON.stringify(lineTrace),'data-opf-rich-spacing':flow?'natural':'measured'}:{}),...(fit.overflow?{'data-opf-overflow':'true'}:{})},content.join('\n'));
 }
 
 function renderTextBox(text, box, bound, config) {
+  const invalid=/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/u.exec(String(text??''));
+  if(invalid)throw new OPFRenderError('invalid-text',`Text contains U+${invalid[0].codePointAt(0).toString(16).toUpperCase().padStart(4,'0')} at UTF-16 offset ${invalid.index}, which SVG XML cannot represent.`,{path:config.path});
   const scale = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
   const style = config.textStyle ?? resolveTextStyle({fontFamily:config.fontFamily,fontWeight:config.fontWeight ?? 400,italic:config.italic ?? false,path:config.path},config.options.textMeasurement);
   const fit = config.fit ?? fitText(String(text ?? ""), box, config.fontSize * scale,
@@ -1215,16 +1239,30 @@ function renderTextBox(text, box, bound, config) {
   const totalHeight = fit.lines.length * fit.lineHeight;
   const startY = config.verticalAlign === "middle"
     ? box.y + Math.max(0, (box.height - totalHeight) / 2) + size : box.y + size;
-  const alignment=config.align??bound.design.contentAlignment;
+  const alignment=fit.placement?.alignment??config.align??bound.design.contentAlignment;
   const anchor = alignment === "center" ? "middle" : alignment === "right" ? "end" : "start";
   const x = alignment === "center" ? box.x + box.width / 2 : alignment === "right" ? box.x + box.width : box.x;
-  const lines = fit.lines.map((line, index) => tag("text", {
-    x: stableNumber(x), y: stableNumber(startY + index * fit.lineHeight),
-    "text-anchor": anchor, "font-family": fontStack(style.fontFamily, config.fontFamily === bound.design.fonts.code ? "monospace" : bound.design.fontScheme.type),
+  const lines = fit.lines.map((line, index) => {
+    const sourceLine=fit.sourceLines?.[index],placed=fit.placement?.lines[index],factor=alignment==='right'?1:alignment==='center'?.5:0;
+    const origin=placed?.x??x-(sourceLine?.width??0)*factor;
+    const tabs=sourceLine?.segments.some(segment=>segment.kind==='tab');
+    const content=tabs?sourceLine.segments.map(segment=>tag('tspan',{
+      x:stableNumber(origin+segment.x),textLength:segment.kind==='tab'||placed?stableNumber(segment.width):undefined,
+      lengthAdjust:segment.kind==='tab'||placed?'spacingAndGlyphs':undefined,
+      ...(config.options.trace?{'data-opf-source-start':segment.start,'data-opf-source-end':segment.end,'data-opf-segment':segment.kind}:{}),
+    },escapeText(line.slice(segment.start-sourceLine.start,segment.end-sourceLine.start)))).join(''):escapeText(line);
+    return tag("text", {
+    x: stableNumber(tabs?origin:placed?placed.x+placed.width*factor:x), y: stableNumber(placed?.baseline??startY + index * fit.lineHeight),
+    "text-anchor": tabs?'start':anchor, "font-family": fontStack(style.fontFamily, config.fontFamily === bound.design.fonts.code ? "monospace" : bound.design.fontScheme.type),
     "font-size": stableNumber(size), "font-weight": style.fontWeight, "font-style": style.italic ? "italic" : undefined, fill: config.fill,
-    ...traceAttrs(config.options, config.path)
-  }, escapeText(line)));
+    'xml:space':'preserve',style:'white-space:pre','text-rendering':config.options.textMeasurement?.measure?'geometricPrecision':undefined,
+    textLength:!tabs&&placed?.width>0?stableNumber(placed.width):undefined,lengthAdjust:!tabs&&placed?.width>0?'spacingAndGlyphs':undefined,
+    ...traceAttrs(config.options, config.path),
+    ...(config.options.trace&&sourceLine?{'data-opf-source-start':sourceLine.start,'data-opf-source-end':sourceLine.end,'data-opf-source-next-start':sourceLine.nextStart,'data-opf-line-boundary':sourceLine.boundary}:{}),
+  }, content);
+  });
   return tag("g", { ...traceAttrs(config.options, config.path),
+    ...(config.options.trace&&fit.sourceLines?{'data-opf-source-text':'true','data-opf-box-x':box.x,'data-opf-box-y':box.y,'data-opf-box-width':box.width,'data-opf-box-height':box.height}:{}),
     ...(fit.overflow ? { "data-opf-overflow": "true" } : {}) }, lines.join("\n"));
 }
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
   "private": false,
   "engines": {
-    "node": ">=20.9.0"
+    "node": "24.x"
   },
   "repository": {
     "type": "git",
@@ -55,16 +55,29 @@
   "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",
+    "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",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && 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/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: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",
     "golden:update": "npm run build && node test/golden.mjs --update",
     "prepack": "npm run build",
     "build:browser-check": "node scripts/build-browser-check.mjs",
-    "test:styled-table": "node test/styled-table.mjs"
+    "test:styled-table": "node test/styled-table.mjs",
+    "test:code": "node test/shared-code.mjs",
+    "test:code-browser": "node test/shared-code-browser.mjs",
+    "test:metric": "node test/shared-metric.mjs",
+    "test:images-browser": "node test/image-placeholders-browser.mjs",
+    "test:font-preparation": "node test/font-preparation.mjs artifacts/font-preparation.json",
+    "test:font-preparation-browser": "node test/font-preparation-browser.mjs artifacts/font-preparation-browser.json",
+    "test:font-variants": "node test/font-variants.mjs",
+    "test:font-variants-browser": "node test/font-variants-browser.mjs",
+    "test:text": "node test/font-outlines.mjs && node test/accepted-text.mjs",
+    "test:text-browser": "node test/accepted-text-browser.mjs",
+    "test:rich-spacing-browser": "node test/rich-spacing-browser.mjs",
+    "test:rich-flow-browser": "node test/rich-flow-browser.mjs",
+    "test:plain-whitespace-browser": "node test/plain-whitespace-browser.mjs"
   },
   "dependencies": {
     "@expo-google-fonts/arimo": "0.4.3",
@@ -72,10 +85,10 @@
     "@expo-google-fonts/carlito": "0.4.1",
     "@expo-google-fonts/cousine": "0.4.3",
     "@expo-google-fonts/gelasio": "0.4.1",
-    "@expo-google-fonts/roboto": "^0.4.3",
-    "@expo-google-fonts/roboto-mono": "^0.4.2",
+    "@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.8.0",
+    "@openpresentation/opf": "^0.10.0",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",