@openpresentation/opf-render 0.5.1 → 0.7.0

package/README.md

@@ -1,9 +1,11 @@
 # OPF Render
 
-Version 0.5.1 reserves quote attribution/source space before fitting long text. See [quote layout and real-browser evidence](docs/quote-footer-0.5.1.md) for regression coverage and overflow behavior.
+Version 0.7.0 requires core 0.9.0 and renders accepted quote and code geometry without fitting it again. Code filename/language/body parts preserve source whitespace, literal tabs and metadata case and expose trace targets for editing. The [43 reviewed code raster changes](docs/evidence/shared-code/raster-review.json) retain the other 762 corpus hashes. Planned coordinated releases PPTX 0.7.0 and editor 0.6.0 will add native source recovery and editing. Glyph containment and separation do not establish native pixel equivalence.
 
 Deterministic local renderer for Open Presentation Format documents. The shared SVG core implements validation, catalog resolution, placeholder binding and text layout. Node APIs additionally convert SVG to PNG and raster-backed PDF.
 
+Code strings that [XML 1.0 cannot represent](https://www.w3.org/TR/xml/#charsets) reject rendering with `invalid-code-text`, the OPF field path and UTF-16 offset. Input JSON stays unchanged. Tabs, line endings and valid supplementary Unicode remain accepted; schema validity and XML serialization do not certify font coverage or native fidelity.
+
 ## Scope
 
 - Package: `@openpresentation/opf-render`
@@ -34,7 +36,7 @@ const pdf = await svgToPdf(svgs, { scale: 1 });
 
 `svgToPng` returns PNG bytes for one SVG. `svgToPdf` accepts one SVG or an array of SVGs and returns PDF bytes with one slide per page. The SVG page `width`/`height` or `viewBox` determines the PDF page size; `scale` controls raster density only.
 
-## Browser preview and fonts (preview APIs)
+## Browser preview and fonts
 
 Use `@openpresentation/opf-render/svg` for browser rendering without Node dependencies. Browser-aware bundlers also select this shared SVG implementation for the root import; Node's root import retains PNG/PDF conversion.
 
@@ -51,7 +53,7 @@ container.innerHTML = renderSvg(presentation, {
 
 Each entry contains `url` or `data: Uint8Array`, with optional `family`, `weight`, `italic` and `license`. The loader registers browser FontFaces using the same bytes used for measurement. It fetches only URLs supplied by the host, supports an AbortSignal and custom fetch, and awaits font loading. Use pinned static faces and retain their licenses. For standalone SVG export also pass `embeddedFonts: fonts.embeddedFonts`; embedding is unnecessary for each live draft after browser fonts are loaded.
 
-The new entries require coordinated preview builds of OPF and the toolkit. The sibling OPF repository's `pnpm pack:ecosystem` prepares local npm tarballs; older registry releases do not include these APIs. See `opf/docs/live-editor.md` for installation and the fidelity contract. Identical SVG geometry does not guarantee identical raster pixels across browser engines or PowerPoint.
+These browser entrypoints are included in the published package. For coordinated development, the sibling OPF repository's `pnpm pack:ecosystem` prepares local npm tarballs. See the core repository's [live editor guide](https://github.com/OpenPresentation/opf/blob/main/docs/live-editor.md) for installation and the fidelity contract. Identical SVG geometry does not guarantee identical raster pixels across browser engines or PowerPoint.
 
 ## Runtime Policy
 

package/dist/svg.js

@@ -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";
@@ -626,7 +628,7 @@ function renderSlideContent(bound, width, height, options) {
 }
 
 function reportDiagnostic(diagnostic, options) {
-  const key = `${diagnostic.code}:${diagnostic.path}`;
+  const key = `${diagnostic.code}:${diagnostic.path}:${diagnostic.reason ?? ''}`;
   if (options._diagnosticPaths.has(key)) return;
   options._diagnosticPaths.add(key);
   options.onDiagnostic?.(diagnostic);
@@ -768,8 +770,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,27 +788,28 @@ 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) {
@@ -832,34 +841,16 @@ function renderMetric(item, box, bound, options) {
 }
 
 function renderQuote(item, box, bound, options) {
-  const quote = isPlainObject(item.value) ? item.value : { text: item.value };
-  const attribution = [quote.attribution, quote.source].filter(Boolean).join(" - ");
-  const body = inset(box, 18);
-  // Reserve the attribution footer before fitting the quote; it is not an overlay.
-  if (attribution) body.height = Math.max(1, box.height - 94);
-  const children = [
-    renderTextBox(`"${quote.text ?? ""}"`, body, bound, {
-      path: `${item.path}.text`,
-      fontSize: 28,
-      fontFamily: bound.design.fonts.heading,
-      fontWeight: 600,
-      fill: bound.design.colors.text,
-      options
-    }),
-    renderTextBox(attribution, {
-      x: box.x + 18,
-      y: box.y + box.height - 58,
-      width: box.width - 36,
-      height: 40
-    }, bound, {
-      path: item.path,
-      fontSize: 17,
-      fontFamily: bound.design.fonts.body,
-      fontWeight: 500,
-      fill: bound.design.colors.mutedText,
-      options
-    })
-  ];
+  const layout = item.quoteLayout;
+  if (!layout) throw new OPFRenderError('missing-quote-layout', 'Quote rendering requires a coordinated core build with shared quote geometry.', {path:item.path});
+  const children = layout.parts.map(part => {
+    if (!part.fit) throw new OPFRenderError('layout-overflow', 'Quote content has no usable internal space; increase its cell size before rendering.', {path:part.path,issues:layout.diagnostics});
+    return renderTextBox(part.text,part.box,bound,{
+      path:part.path,fit:part.fit,textStyle:part.style,fontFamily:part.requestedStyle.fontFamily,
+      fill:part.role==='footer'?bound.design.colors.mutedText:bound.design.colors.text,
+      diagnosticsHandled:true,options,
+    });
+  });
   return tag("g", traceAttrs(options, item.path), children.join("\n"));
 }
 
@@ -1223,7 +1214,7 @@ function renderTextBox(text, box, bound, config) {
   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,
     ((bound.composition ?? bound.geometry.composition).minFontSize ?? 16) * scale, textWidthMeasurer(style,config.options.textMeasurement));
-  if (fit.overflow) {
+  if (fit.overflow && !config.diagnosticsHandled) {
     const diagnostic = { code: "text-overflow", path: config.path,
       message: "Text exceeds its cell at the minimum font size; shorten it, increase its space, or split the slide." };
     reportDiagnostic(diagnostic, config.options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
@@ -57,13 +57,16 @@
     "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",
     "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/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/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"
   },
   "dependencies": {
     "@expo-google-fonts/arimo": "0.4.3",
@@ -74,7 +77,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.7.0",
+    "@openpresentation/opf": "^0.9.0",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
     "pdf-lib": "^1.17.1",