@openpresentation/opf-render 0.1.0 → 0.2.0

package/README.md

@@ -104,8 +104,28 @@ This repo does not require an npm automation token when Trusted Publishing is co
 
 The current checkout uses `@openpresentation/opf/composition` for portable geometry. Slides can select `auto`, `row`, `column`, or `grid`, set weighted tracks, and request path-specific overflow diagnostics. See the sibling OPF repo's `docs/dynamic-composition.md` for the complete contract.
 
-Version 0.1.0 requires the published `@openpresentation/opf@^0.4.0` for composition, pagination and measured text. A clean `npm ci && npm test` uses registry packages and runs the full raster corpus without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` checks editing, rendering, editable PowerPoint geometry and import together.
+Version 0.2.x requires the published `@openpresentation/opf@^0.4.1` for composition, pagination and measured text. A clean `npm ci && npm test` uses registry packages and runs the full raster corpus without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` checks editing, rendering, editable PowerPoint geometry and import together.
 
 For actual font measurement, load `loadBundledFontRegistry()` from `@openpresentation/opf-render/fonts-node`, then pass its `textMeasurement` to rendering and its `embeddedFonts` to SVG export. Pass its `fontFiles` to PNG/PDF conversion. The browser-safe `@openpresentation/opf-render/fonts` entry accepts local font bytes. Missing fonts/glyphs fail explicitly; aliases and fallback are opt-in and recorded in `registry.substitutions`. Bundled font license notices travel with embedded SVG fonts.
 
 Raster updates produce an HTML gallery and `artifacts/golden/candidate.json`; they never overwrite the approved baseline automatically. See [baseline review and known limitations](test/golden/README.md).
+
+Version 0.1.1 adds rich-text line offsets and measured boxes to opt-in SVG tracing, including blank lines, for editor caret placement. Normal SVG/PNG output is unchanged.
+
+## Embedded WebP in PNG/PDF output (unreleased)
+
+PNG and PDF conversion now decode embedded WebP image data URIs to static PNG before rasterization. This preserves fit/crop, transparency, EXIF orientation and the first animation frame. The source SVG and OPF document remain unchanged; browser SVG output keeps the original embedded image. Both href and legacy xlink:href are supported, including base64 and percent-encoded data. This step does not resolve local filenames, download remote images or change the existing host imageResolver contract.
+
+The Node-only raster path lazily loads pinned Sharp 0.35.4, requiring Node 20.9 or later and normal installation of its optional platform binaries. Browser exports do not include the decoder. Malformed embedded WebP produces image-conversion-failed with its data-opf-path when present, otherwise svg.images.N. Decoding has a 40-megapixel limit. PNG/PDF are static outputs; animation beyond the first frame and original image metadata are not retained.
+
+Regression checks compare six fixtures against independent Pillow pixels, verify fit/crop, inspect actual PDF image streams and transparency masks, and exercise input encodings and diagnostics. All 805 existing raster baselines remain unchanged. Test fixtures are project-authored and MIT licensed; the decoder and its bundled codecs retain their upstream licenses.
+
+## JPEG EXIF orientation in raster output (unreleased)
+
+PNG/PDF raster preparation now honors all eight JPEG EXIF orientations. JPEGs with orientation 2–8 are decoded to oriented PNG pixels for rasterization; JPEGs with orientation 1 or no orientation keep their original SVG attribute spelling and compressed bytes. This does not modify the source document or the browser SVG output. The Node path reads JPEG metadata through the same lazy Sharp dependency used for WebP.
+
+Twenty-four cases verify fit/crop, PNG pixels and actual PDF image streams against independent Pillow references (maximum two channel values of decoder difference). Sixteen browser OPF-SVG checks verify orientation and fit/crop with an explicitly incorrect-orientation control. Browser JPEG/PNG scaling differs around high-contrast edges: measured average channel error is below 0.62, but individual differences reach 49. These checks therefore establish geometry/orientation agreement, not pixel-identical output across engines.
+
+`npm test` also builds the browser comparison and rejects native raster modules in browser output. Serve this repository and open `/artifacts/jpeg/browser/index.html` to run it. The harness permits mean channel error up to 1 and at most 2% of channels differing by more than 10; a deliberately unrotated image must fail that criterion.
+
+Version 0.2.0 requires Node 20.9 or later for native image decoding. Browser bundles continue using browser-safe entrypoints.

package/dist/raster-images.js

@@ -0,0 +1,85 @@
+import {OPFRenderError} from './svg.js';
+
+// Resvg does not decode WebP or apply JPEG EXIF orientation. Replace only
+// affected embedded image hrefs in the private
+// rasterization copy; preserve SVG text, attributes, comments and source bytes.
+export async function prepareRasterImages(svg) {
+  if (!/webp|jpeg|&#/i.test(svg)) return svg;
+  const cache = new Map();
+  let output = '', end = 0, imageIndex = 0;
+  const tokens = /<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<(?:"[^"]*"|'[^']*'|[^'">])*>/g;
+  for (const match of svg.matchAll(tokens)) {
+    let tag = match[0];
+    if (!/^<(?:[A-Za-z_][\w.-]*:)?image(?=[\s/>])/.test(tag)) continue;
+    const index = imageIndex++;
+    const href = /\shref\s*=\s*(["'])([\s\S]*?)\1/.exec(tag)
+      ?? /\sxlink:href\s*=\s*(["'])([\s\S]*?)\1/.exec(tag);
+    if (!href) continue;
+    const uri = xmlText(href[2]);
+    if (!/^data:image\/(?:webp|jpeg)(?:;|,)/i.test(uri)) continue;
+    const trace = /\sdata-opf-path\s*=\s*(["'])([\s\S]*?)\1/.exec(tag);
+    const path = trace ? xmlText(trace[2]) : `svg.images.${index}`;
+    try {
+      if (!cache.has(uri)) cache.set(uri, prepareRasterImage(uri));
+      const png = await cache.get(uri);
+      if (png === null) continue;
+      const replacement = href[0].slice(0, href[0].indexOf(href[1]) + 1) + png + href[1];
+      tag = tag.slice(0, href.index) + replacement + tag.slice(href.index + href[0].length);
+    } catch (error) {
+      throw new OPFRenderError('image-conversion-failed', 'Embedded raster image could not be prepared for PNG/PDF output.', {path, cause:error instanceof Error ? error.message : String(error)});
+    }
+    output += svg.slice(end, match.index) + tag;
+    end = match.index + match[0].length;
+  }
+  return output + svg.slice(end);
+}
+
+async function prepareRasterImage(uri) {
+  const comma = uri.indexOf(',');
+  const header = uri.slice(0, comma), data = uri.slice(comma + 1);
+  let bytes;
+  if (/;base64$/i.test(header)) {
+    const encoded = decodeURIComponent(data).replace(/\s/g, '');
+    if (!/^[A-Za-z0-9+/]*={0,2}$/.test(encoded) || encoded.length % 4 === 1) throw new Error('Invalid base64 image data.');
+    bytes = Buffer.from(encoded, 'base64');
+  } else {
+    const result = [];
+    for (let index=0; index<data.length;) {
+      if (data[index]==='%') {
+        if (!/^[0-9a-f]{2}$/i.test(data.slice(index+1,index+3))) throw new Error('Invalid percent-encoded image data.');
+        result.push(parseInt(data.slice(index+1,index+3),16)); index+=3;
+      } else {
+        const point=String.fromCodePoint(data.codePointAt(index));
+        result.push(...new TextEncoder().encode(point)); index+=point.length;
+      }
+    }
+    bytes=Uint8Array.from(result);
+  }
+  const webp=/^data:image\/webp(?:;|,)/i.test(uri);
+  if (webp) {
+    if (bytes.length < 12 || Buffer.from(bytes.subarray(0,4)).toString('ascii') !== 'RIFF' || Buffer.from(bytes.subarray(8,12)).toString('ascii') !== 'WEBP') throw new Error('Embedded data is not a WebP image.');
+  } else if (bytes.length < 4 || bytes[0] !== 0xff || bytes[1] !== 0xd8 || bytes[2] !== 0xff) {
+    throw new Error('Embedded data is not a JPEG image.');
+  }
+  const {default:sharp}=await import('sharp');
+  const decoder=sharp(bytes,{limitInputPixels:40_000_000,animated:false,failOn:'warning'});
+  if (!webp) {
+    const {orientation}=await decoder.metadata();
+    // Keep unoriented JPEGs on the existing resvg path, including their
+    // original compressed bytes and established color/raster behavior.
+    if (!(orientation >= 2 && orientation <= 8)) return null;
+  }
+  const png=await decoder.autoOrient().toColourspace('srgb').ensureAlpha()
+    .png({compressionLevel:9,adaptiveFiltering:false}).toBuffer();
+  return 'data:image/png;base64,'+png.toString('base64');
+}
+
+function xmlText(value) {
+  return value.replace(/&(#x[0-9a-f]+|#\d+|amp|quot|apos|lt|gt);/gi, (entity, code) => {
+    if (code[0]==='#') {
+      const point=code[1].toLowerCase()==='x'?parseInt(code.slice(2),16):parseInt(code.slice(1),10);
+      return point>0&&point<=0x10ffff?String.fromCodePoint(point):entity;
+    }
+    return {amp:'&',quot:'"',apos:"'",lt:'<',gt:'>'}[code] ?? entity;
+  });
+}

package/dist/raster.js

@@ -1,3 +1,4 @@
+import {prepareRasterImages} from './raster-images.js';
 import {OPFRenderError,packageName} from './svg.js';
 const DEFAULT_DIMENSIONS = { width: 1280, height: 720 };
 const DEFAULT_RASTER_SCALE = 1;
@@ -39,7 +40,7 @@ export async function svgToPdf(svgs, options = {}) {
 
 async function rasterizeSvg(svgInput, options) {
   const { Resvg } = await loadResvg();
-  const svg = normalizeSvgInput(svgInput);
+  const svg = await prepareRasterImages(normalizeSvgInput(svgInput));
   const scale = positiveNumber(options.scale, "scale", DEFAULT_RASTER_SCALE);
   const fontFiles = [
     ...(options.useBundledFonts === false ? [] : await bundledFontFiles()),

package/dist/svg.js

@@ -1182,7 +1182,15 @@ function renderRichLines(value,fit,box,bound,config) {
     if(run.link&&/^(https?:|mailto:)/i.test(run.link))return tag('a',{href:run.link,target:'_blank',rel:'noopener noreferrer'},rendered);
     return rendered;
   }));
-  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'}:{}),...(fit.overflow?{'data-opf-overflow':'true'}:{})},content.join('\n'));
+  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};
+  }):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'));
 }
 
 function renderTextBox(text, box, bound, config) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@openpresentation/opf-render",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Deterministic local OPF renderer for SVG, PNG, and PDF output.",
   "license": "MIT",
   "type": "module",
   "private": false,
   "engines": {
-    "node": ">=20"
+    "node": ">=20.9.0"
   },
   "repository": {
     "type": "git",
@@ -55,12 +55,13 @@
   "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",
+    "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",
     "validate": "node scripts/validate-package.mjs",
-    "test": "npm run build && node test/smoke.mjs && node test/fonts.mjs && node test/office-fonts.mjs && node test/timeline.mjs && node test/golden-gate.mjs && node test/golden.mjs && node test/fonts-browser.mjs && node test/design-preview.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/rich-trace.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",
     "test:golden": "npm run build && node test/golden.mjs",
     "golden:update": "npm run build && node test/golden.mjs --update",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "build:browser-check": "node scripts/build-browser-check.mjs"
   },
   "dependencies": {
     "@expo-google-fonts/arimo": "0.4.3",
@@ -71,9 +72,13 @@
     "@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.4.0",
+    "@openpresentation/opf": "^0.4.1",
     "@resvg/resvg-js": "^2.6.2",
     "fontkit": "^2.0.4",
-    "pdf-lib": "^1.17.1"
+    "pdf-lib": "^1.17.1",
+    "sharp": "0.35.4"
+  },
+  "devDependencies": {
+    "esbuild": "0.28.2"
   }
 }