@openpresentation/opf-render 0.15.0 → 0.16.0

package/dist/fonts-node.js

@@ -25,10 +25,24 @@ async function verifiedFile(file, expected, details) {
 // The default Latin, Cyrillic and Greek glyph-fallback face (the office pack always loads it, fallback-only).
 const FALLBACK_PACKAGE = "@expo-google-fonts/noto-sans";
 
+// RR-63: every `@expo-google-fonts/*` package is an optional peer dependency, so a host installs only the faces it uses. A request that
+// needs packages that are not installed fails once, naming all of them and the install command, instead of one package at a time.
+function requireInstalled(packages, what) {
+  const missing = packages.filter(pkg => {
+    if (pkg.vendored) return false;
+    try { require.resolve(`${pkg.name}/package.json`); return false; } catch { return true; }
+  });
+  if (!missing.length) return;
+  const install = `npm install ${missing.map(pkg => `${pkg.name}@${pkg.version}`).join(" ")}`;
+  throw new OPFFontError("font-resource-unavailable", `${what} needs font packages that are not installed (optional peer dependencies of @openpresentation/opf-render): run \`${install}\`.`, {packages: missing.map(pkg => pkg.name), install});
+}
+
 // `skipped`: an optional npm package that is not installed is recorded there instead of failing (scripts: 'auto').
 // `fallbackOnly`: the faces serve glyph fallback and requests by their own name, never a replacement for another family.
-async function loadPackages(packages, skipped, {fallbackOnly = false} = {}) {
+// `what`: how the request is named in the error for a package that is not installed, for example "The 'office' font pack".
+async function loadPackages(packages, skipped, {fallbackOnly = false, what = "This font request"} = {}) {
   const entries = [], fontFiles = [];
+  if (!skipped) requireInstalled(packages, what);
   for (const pkg of packages) {
     if (pkg.vendored) {
       // FF-31: vendored faces ship inside this package (pkg.vendored, for example fonts/carlito), hash-pinned like the npm packs. The open pack is
@@ -53,7 +67,7 @@ async function loadPackages(packages, skipped, {fallbackOnly = false} = {}) {
       installed = JSON.parse(await readFile(manifestPath, "utf8"));
     } catch (error) {
       if (skipped) { skipped.push({package: pkg.name, version: pkg.version, scripts: [...pkg.scripts]}); continue; }
-      throw new OPFFontError("font-resource-unavailable", `Install ${pkg.name}@${pkg.version} to use this offline font pack.`, {package:pkg.name, cause:error.code});
+      throw new OPFFontError("font-resource-unavailable", `Install ${pkg.name}@${pkg.version} to use ${what}.`, {package:pkg.name, cause:error.code});
     }
     if (installed.version !== pkg.version) throw new OPFFontError("font-version-mismatch", `Expected ${pkg.name}@${pkg.version}; reinstall the pinned package.`, {package:pkg.name, expected:pkg.version, actual:installed.version});
     const directory = path.dirname(manifestPath);
@@ -73,7 +87,7 @@ async function loadPackages(packages, skipped, {fallbackOnly = false} = {}) {
 const renamedAliases = () => Object.fromEntries(BUNDLED_FONT_MANIFEST.packages.filter(item => item.pack === "open" && item.renamedFrom).map(item => [item.renamedFrom, item.faces[0].family]));
 // The vendored faces this registry holds that are embed "used": a host that serves fonts itself lists them to copy their files.
 const lazyOf = registry => lazyFontList().filter(face => registry.describeFaces().some(held => held.family === face.family && held.weight === face.weight && held.italic === face.italic));
-const loadPack = pack => loadPackages(BUNDLED_FONT_MANIFEST.packages.filter(item => item.pack === pack));
+const loadPack = pack => loadPackages(BUNDLED_FONT_MANIFEST.packages.filter(item => item.pack === pack), undefined, {what: `The '${pack}' font pack`});
 
 /**
  * Adds the script pack. `scripts` is 'all', ISO 15924 codes, or 'auto' (FF-19): detect the scripts the
@@ -86,7 +100,7 @@ async function withScripts(loaded, scripts, {presentation, onDiagnostic, renderO
   // A package the registry already loaded (the default Noto Sans fallback) is never loaded twice.
   const notLoaded = list => list.filter(pkg => !loaded.packages?.includes(pkg.name));
   if (scripts !== "auto") {
-    const extra = await loadPackages(notLoaded(scriptFontPackages(scripts)));
+    const extra = await loadPackages(notLoaded(scriptFontPackages(scripts)), undefined, {what: `The requested script fonts (${Array.isArray(scripts) ? scripts.join(", ") : scripts})`});
     return {...loaded, entries:[...loaded.entries, ...embedUsed(extra.entries)], fontFiles:[...loaded.fontFiles, ...extra.fontFiles], packages:[...(loaded.packages ?? []), ...extra.packages]};
   }
   if (presentation === null || typeof presentation !== "object") throw new OPFFontError("invalid-font-scripts", "scripts: 'auto' needs the presentation whose text decides the scripts.", {scripts});
@@ -160,6 +174,11 @@ async function withFaces(loaded, faces) {
  */
 async function buildRegistry(pack, {scripts, faces, presentation, onDiagnostic, renderOptions, ...options}) {
   let loaded, registryOptions = options;
+  // RR-63: name every npm font package the pack needs at once, before loading any of them.
+  if (pack === "base" || pack === "office") {
+    const packs = pack === "base" ? ["base"] : ["office", ...(options.includeBaseFonts === false ? [] : ["base"])];
+    requireInstalled([...BUNDLED_FONT_MANIFEST.packages.filter(item => packs.includes(item.pack)), ...(pack === "office" ? scriptFontPackages(["Latn"]) : [])], `The '${pack}' font pack`);
+  }
   if (pack === "office") {
     const {entries, fontFiles, packages} = await loadPack("office");
     for (const [include, name] of [[options.includeOpenFonts, "open"], [options.includeBaseFonts, "base"]]) {
@@ -177,7 +196,7 @@ async function buildRegistry(pack, {scripts, faces, presentation, onDiagnostic,
     // an explicit list does; a presentation that does not select Latn keeps it fallback-only.
     const requested = scripts === "auto" && presentation !== null && typeof presentation === "object" ? scriptFontPackages(autoScriptSelection(presentation, renderOptions).scripts).map(pkg => pkg.name)
       : scripts === undefined || scripts === "auto" || (Array.isArray(scripts) && !scripts.length) ? [] : scriptFontPackages(scripts).map(pkg => pkg.name);
-    const fallback = await loadPackages(scriptFontPackages(["Latn"]).filter(pkg => !requested.includes(pkg.name)), undefined, {fallbackOnly:true});
+    const fallback = await loadPackages(scriptFontPackages(["Latn"]).filter(pkg => !requested.includes(pkg.name)), undefined, {fallbackOnly:true, what: "The 'office' font pack (its default glyph-fallback face)"});
     fontFiles.push(...fallback.fontFiles);
     entries.push(...fallback.entries);
     packages.push(...fallback.packages);

package/dist/fonts.d.ts

@@ -8,8 +8,8 @@ export type { FontPolicyEntry } from "@openpresentation/opf/font-policy";
 export { isSymbolEncodedFamily, mapSymbolText, symbolCodeOf } from "@openpresentation/opf/symbol-font-encodings";
 export { scriptFontRole } from "@openpresentation/opf/composition";
 export type { ScriptRole } from "@openpresentation/opf/composition";
-export interface FontFaceInput { data: Uint8Array; family?: string; weight?: number; italic?: boolean; postscriptName?: string; license?: string; /** Serves glyph fallback and requests by its own family only; never a replacement for another family. */ fallbackOnly?: boolean; /** "used" embeds the face in an SVG only when the slide's text names its family (the open pack, FF-31). Default "always". */ embed?: "always" | "used"; /** ISO 15924 scripts a designated script replacement face serves (FF-19). */ scripts?: string[] }
-export interface EmbeddedFont { family: string; weight: number; italic?: boolean; dataUrl: string; license?: string; embed?: "used" }
+export interface FontFaceInput { data: Uint8Array; family?: string; weight?: number; italic?: boolean; postscriptName?: string; license?: string; /** Serves glyph fallback and requests by its own family only; never a replacement for another family. */ fallbackOnly?: boolean; /** Every face is embedded in an SVG only when the slide's text draws it (RR-61). "used" also leaves the face out of the eager `registry.embeddedFonts` list (the open pack, FF-31); "always" embeds it in every SVG. */ embed?: "always" | "used"; /** ISO 15924 scripts a designated script replacement face serves (FF-19). */ scripts?: string[] }
+export interface EmbeddedFont { family: string; weight: number; italic?: boolean; dataUrl: string; license?: string; /** "always": written into every SVG; otherwise only into an SVG whose text draws the face (RR-61). */ embed?: "always" | "used" }
 export type FontCompatibility = "exact" | "metric" | "visual" | "generic";
 export interface FontReplacementMeasurement { replacement:string; meanAbsWidthDelta:number; meanWidthDelta:number; maxAbsWidthDelta:number; styles:number; reference:string }
 export interface FontResolution {
@@ -41,7 +41,7 @@ export declare const EXPERIMENTAL_FONT_CANDIDATES: readonly Readonly<{requestedF
 export interface RenderFonts {
   /** Measures text with the real faces. Without it layout uses core's portable estimate. */
   textMeasurement?: TextMeasurement;
-  /** Faces `renderSvg` writes into each SVG as @font-face data; a face flagged `embed: "used"` only when a slide draws its family. */
+  /** Faces `renderSvg` may write into an SVG as @font-face data: each only into the SVGs whose text draws it (its family, weight and style), unless flagged `embed: "always"` (RR-61). */
   embeddedFonts?: readonly EmbeddedFont[];
   /** Font files the Node raster and PDF conversions draw with. */
   fontFiles?: readonly string[];

package/dist/index.d.ts

@@ -54,10 +54,12 @@ export interface RenderSvgOptions {
   skipHidden?: boolean;
   /**
    * The fonts the deck is laid out and drawn with: the handle `loadFonts()` returns (from `@openpresentation/opf-render/fonts-node` or
-   * `/fonts-browser`), or any object with a `textMeasurement` and, to embed faces in each SVG, an `embeddedFonts` list. Without it layout uses
+   * `/fonts-browser`), or any object with a `textMeasurement` and, to embed faces, an `embeddedFonts` list (each SVG carries only the faces its text draws). Without it layout uses
    * core's portable width estimate and the SVG names the design fonts without embedding them.
    */
   fonts?: RenderFonts;
+  /** `false` writes no `@font-face` data into the SVG (RR-61): the fonts handle still measures and the SVG still names the families, for a host whose page already has the faces (a browser `loadFonts` handle adds them to the document). Default true: each SVG embeds the faces of `fonts.embeddedFonts` its own text draws. */
+  embedFonts?: boolean;
   /** `"chain"` (default): a character the resolved face lacks is drawn with the first bundled face that has it, and reported as `font-glyph-fallback`. `"none"`: exact faces, a missing glyph raises `missing-glyph`. */
   glyphFallback?: "chain" | "none";
   /** Unscaled reference-pixel clearance around supplied vector text outlines; default 1. */

package/dist/pdf-vector.js

@@ -724,6 +724,8 @@ class Converter {
         result = { resource, object, width: info.width, height: info.height };
       }
     } catch (error) {
+      // A missing converter is the host's install, not a bad picture: say so instead of writing a PDF without its pictures.
+      if (error?.code === "converter-missing") throw error;
       this.unsupported("pdf-image-skipped", `An embedded image could not be decoded and is not drawn: ${error instanceof Error ? error.message : String(error)}`, { path: tracePath });
     }
     this.images.set(digest, result);

package/dist/pdf.d.ts

@@ -0,0 +1,2 @@
+export { svgToPdf } from "./index.js";
+export type { SvgToPdfOptions, PdfDiagnostic, PdfMetadata } from "./index.js";

package/dist/pdf.js

@@ -0,0 +1,4 @@
+// RR-63: the PDF format entry (Node). The default vector `svgToPdf` needs no converter for text and shapes; it loads the optional peer
+// `sharp` for pictures and `@resvg/resvg-js` for the rare element it rasterizes, and `mode: "raster"` also loads `pdf-lib`. A converter
+// that is not installed rejects with `OPFRenderError` code `converter-missing`. For a page use `@openpresentation/opf-render/export-browser`.
+export { svgToPdf } from "./raster.js";

package/dist/player.d.ts

@@ -7,7 +7,8 @@ import type { RenderSvgOptions } from "./svg.js";
  */
 export declare class DeckError extends Error {
   readonly code: string;
-  constructor(code: string, message: string, options?: { cause?: unknown });
+  readonly details?: {source: string; status?: number; contentType?: string};
+  constructor(code: string, message: string, options?: { cause?: unknown; source?: string; status?: number; contentType?: string });
 }
 
 /** The slide that is showing, in the sequence that plays (hidden slides are not counted). `notes` is plain text. */

package/dist/png.d.ts

@@ -0,0 +1,2 @@
+export { svgToPng } from "./index.js";
+export type { SvgToPngOptions } from "./index.js";

package/dist/png.js

@@ -0,0 +1,4 @@
+// RR-63: the PNG format entry (Node). `svgToPng` loads the optional peers `@resvg/resvg-js` (and `sharp` for WebP and rotated JPEG
+// pictures) on first use and rejects with `OPFRenderError` code `converter-missing` when they are not installed. For a page use
+// `@openpresentation/opf-render/export-browser`.
+export { svgToPng } from "./raster.js";

package/dist/preview-fonts-node.js

@@ -1,7 +1,7 @@
 // RR-28: fill a self-hosted font root (the layout of `preview-fonts.js`) from the installed packages, for hosts that serve
 // `<opf-deck fonts="/opf-fonts/">`. Node only. Every file is copied unmodified and checked against its pinned SHA-256 and
 // every license notice travels with it (LICENSES.txt). Nothing is downloaded: the faces come from this package's `fonts`
-// directory and the installed `@expo-google-fonts/*` packages.
+// directory and the installed `@expo-google-fonts/*` packages (optional peer dependencies of this package: install the ones you copy).
 import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
@@ -50,7 +50,7 @@ export function copyPreviewFonts({ outDir, scripts = false, cwd, manifest = BUND
     const sourceDirectory = pkg.vendored ? within(rendererRoot, pkg.vendored) : resolvePackageDirectory(pkg.name, cwd);
     if (!sourceDirectory || !fs.existsSync(sourceDirectory)) {
       if (pkg.pack === "scripts") { missing.push(pkg.name); continue; }
-      throw new Error(`${pkg.name} is not installed: reinstall @openpresentation/opf-render.`);
+      throw new Error(`${pkg.name} is not installed: it is an optional peer dependency of @openpresentation/opf-render, so run "npm install ${pkg.name}@${pkg.version}".`);
     }
     if (!pkg.vendored) {
       const installed = JSON.parse(fs.readFileSync(path.join(sourceDirectory, "package.json"), "utf8"));

package/dist/raster-images.js

@@ -1,4 +1,5 @@
 import {OPFRenderError} from './svg.js';
+import {isConverterMissing,loadConverter} from './converters.js';
 
 // Resvg does not decode WebP or apply JPEG EXIF orientation, and draws no text of an SVG used as an image (its nested
 // document has no fonts). Replace only affected embedded image hrefs in the private
@@ -27,6 +28,7 @@ export async function prepareRasterImages(svg, {nestedSvg} = {}) {
       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) {
+      if (isConverterMissing(error)) throw 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;
@@ -74,7 +76,7 @@ async function prepareRasterImage(uri) {
   } 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 {default:sharp}=await loadConverter('sharp');
   const decoder=sharp(bytes,{limitInputPixels:40_000_000,animated:false,failOn:'warning'});
   if (!webp) {
     const {orientation}=await decoder.metadata();

package/dist/raster.js

@@ -3,6 +3,7 @@ import {OPFRenderError,packageName} from './svg.js';
 import {separateLigatures} from './font-compatibility.js';
 import {monochromeColorFonts,rasterFontFiles} from './color-fonts.js';
 import {pinScriptClusters} from './raster-text.js';
+import {loadConverter} from './converters.js';
 const DEFAULT_DIMENSIONS = { width: 1280, height: 720 };
 const DEFAULT_RASTER_SCALE = 1;
 const DEFAULT_RASTER_BACKGROUND = "#FFFFFF";
@@ -100,7 +101,7 @@ async function vectorPdf(inputs, options) {
 // The picture decoder of the Node vector export (the browser entry passes a canvas one). sharp loads on first use.
 function sharpImageCodec() {
   let loaded;
-  const sharp = () => (loaded ??= import("sharp").then((module) => module.default));
+  const sharp = () => (loaded ??= loadConverter("sharp").then((module) => module.default));
   return {
     metadata: async (bytes) => (await sharp())(bytes, { limitInputPixels: 40_000_000, animated: false }).metadata(),
     rgba: async (bytes, { orient }) => {
@@ -162,25 +163,8 @@ async function rasterizeSvg(svgInput, options) {
   }
 }
 
-async function loadResvg() {
-  try {
-    return await import("@resvg/resvg-js");
-  } catch (error) {
-    throw new OPFRenderError("png-renderer-unavailable", "PNG/PDF conversion requires the Node runtime dependency @resvg/resvg-js.", {
-      cause: error instanceof Error ? error.message : String(error)
-    });
-  }
-}
-
-async function loadPdfLib() {
-  try {
-    return await import("pdf-lib");
-  } catch (error) {
-    throw new OPFRenderError("pdf-writer-unavailable", "PDF conversion requires the runtime dependency pdf-lib.", {
-      cause: error instanceof Error ? error.message : String(error)
-    });
-  }
-}
+const loadResvg = () => loadConverter("@resvg/resvg-js");
+const loadPdfLib = () => loadConverter("pdf-lib");
 
 async function bundledFontFiles() {
   if (!bundledFontFilesCache) {

package/dist/svg.d.ts

@@ -54,10 +54,12 @@ export interface RenderSvgOptions {
   skipHidden?: boolean;
   /**
    * The fonts the deck is laid out and drawn with: the handle `loadFonts()` returns (from `@openpresentation/opf-render/fonts-node` or
-   * `/fonts-browser`), or any object with a `textMeasurement` and, to embed faces in each SVG, an `embeddedFonts` list. Without it layout uses
+   * `/fonts-browser`), or any object with a `textMeasurement` and, to embed faces, an `embeddedFonts` list (each SVG carries only the faces its text draws). Without it layout uses
    * core's portable width estimate and the SVG names the design fonts without embedding them.
    */
   fonts?: RenderFonts;
+  /** `false` writes no `@font-face` data into the SVG (RR-61): the fonts handle still measures and the SVG still names the families, for a host whose page already has the faces (a browser `loadFonts` handle adds them to the document). Default true: each SVG embeds the faces of `fonts.embeddedFonts` its own text draws. */
+  embedFonts?: boolean;
   /** `"chain"` (default): a character the resolved face lacks is drawn with the first bundled face that has it, and reported as `font-glyph-fallback`. `"none"`: exact faces, a missing glyph raises `missing-glyph`. */
   glyphFallback?: "chain" | "none";
   /** Unscaled reference-pixel clearance around supplied vector text outlines; default 1. */

package/dist/svg.js

@@ -635,10 +635,11 @@ function bindSlide(presentation, slide, index, context) {
 }
 
 // `options.fonts` is the handle `loadFonts()` returns (or any object with a `textMeasurement` and, to embed faces in the SVG, an
-// `embeddedFonts` list). The renderer reads the two as plain options from here on.
+// `embeddedFonts` list). The renderer reads the two as plain options from here on. `embedFonts: false` (RR-61) keeps the
+// measurement and drops the faces, for a host whose page already holds them.
 function normalizeOptions(options) {
-  const { fonts, ...rest } = options ?? {};
-  return { ...rest, textMeasurement: fonts?.textMeasurement, embeddedFonts: fonts?.embeddedFonts };
+  const { fonts, embedFonts, ...rest } = options ?? {};
+  return { ...rest, textMeasurement: fonts?.textMeasurement, embeddedFonts: embedFonts === false ? undefined : fonts?.embeddedFonts };
 }
 
 /**
@@ -720,7 +721,9 @@ function renderResolvedSlide(resolved, slideIndex, options) {
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
+      // FA-30: a labelled container, not an image: role="img" makes every text node inside presentational.
+      role: "group",
+      "aria-roledescription": "slide",
       "aria-label": title,
       viewBox: `0 0 ${width} ${height}`,
       width,
@@ -756,6 +759,7 @@ function renderBackground(bound, width, height, options) {
         y2: `${50+dy}%`
       }, stopTags.join(""))),
       tag("rect", {
+        ...HIDDEN,
         x: 0,
         y: 0,
         width,
@@ -773,9 +777,10 @@ function renderBackground(bound, width, height, options) {
     const runs=patternRuns(preset);
     const mark=runs?tag('path',{d:runs.map(run=>`M${run.x} ${run.y}h${run.width}v1h-${run.width}z`).join(''),fill:color,'shape-rendering':'crispEdges'}):'';
     if(!mark)reportDiagnostic({code:'unsupported-pattern',path:`${bound.path}.design.background.pattern.preset`,message:`Pattern ${preset} is not implemented by the SVG preview.`},options);
-    return tag('g',{opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
+    return tag('g',{...HIDDEN,opacity:background.opacity??1},tag('rect',{width,height,fill:bound.design.backgroundColor??'#FFFFFF'})+tag('defs',{},tag('pattern',{id,width:8,height:8,patternUnits:'userSpaceOnUse'},mark))+tag('rect',{width,height,fill:`url(#${id})`}));
   }
   return tag("rect", {
+    ...HIDDEN,
     x: 0,
     y: 0,
     width,
@@ -792,9 +797,9 @@ function renderBackground(bound, width, height, options) {
 // and stretch use the shared fit math with the focus point; tile repeats the picture at its intrinsic size (1 picture px = 1
 // reference px) from the canvas top-left. alt is the picture's accessible name; without alt the picture is decorative.
 function renderBackgroundImage(background, bound, width, height, options) {
-  const canvas = tag("rect", { x: 0, y: 0, width, height, fill: bound.design.backgroundColor ?? bound.design.colors.background, ...traceAttrs(options, `${bound.path}.design.background`) });
+  const canvas = tag("rect", { ...HIDDEN, x: 0, y: 0, width, height, fill: bound.design.backgroundColor ?? bound.design.colors.background, ...traceAttrs(options, `${bound.path}.design.background`) });
   const item = { value: background.alt === undefined ? background.src : { src: background.src, alt: background.alt }, path: background.path };
-  const drawOptions = { ...options, imageDecorative: background.alt === undefined };
+  const drawOptions = { ...options, imageDecorative: background.alt === undefined || background.alt === "" };
   const picture = background.fit === "tile"
     ? renderTiledImage(item, background.box, bound, drawOptions)
     : renderImage(item, background.box, bound, { ...drawOptions, imageFit: background.fit, imageFocus: background.focus, imagePicture: background.picture });
@@ -838,7 +843,7 @@ function renderImageBlock(item, bound, options) {
   const children = [defs.length ? tag("defs", {}, defs.join("")) : "", pixels];
   if (image.border) {
     const paint = imagePaint(image.border.color, bound, bound.design.colors.border);
-    children.push(tag("path", { d: shape?.path ?? rectanglePath(image.box), fill: "none", stroke: paint.color, "stroke-opacity": paint.alpha < 1 ? preciseNumber(paint.alpha) : undefined, "stroke-width": stableNumber(image.border.width), "stroke-linejoin": "miter", "stroke-miterlimit": 8 }));
+    children.push(tag("path", { ...HIDDEN, d: shape?.path ?? rectanglePath(image.box), fill: "none", stroke: paint.color, "stroke-opacity": paint.alpha < 1 ? preciseNumber(paint.alpha) : undefined, "stroke-width": stableNumber(image.border.width), "stroke-linejoin": "miter", "stroke-miterlimit": 8 }));
   }
   if (image.overlay) children.push(renderImageOverlay(image.overlay, bound, options));
   if (children.length === 2 && !children[0] && !Object.keys(trace).length) return pixels;
@@ -849,7 +854,7 @@ function renderImageBlock(item, bound, options) {
 // overlay opacity.
 function renderImageOverlay(overlay, bound, options) {
   const paint = imagePaint(overlay.color, bound, bound.design.colors.text);
-  return tag("path", { d: overlay.shape?.path ?? rectanglePath(overlay.box), fill: paint.color, "fill-opacity": preciseNumber(paint.alpha * overlay.opacity), ...(options.trace ? { "data-opf-image-overlay": overlay.path } : {}) });
+  return tag("path", { ...HIDDEN, d: overlay.shape?.path ?? rectanglePath(overlay.box), fill: paint.color, "fill-opacity": preciseNumber(paint.alpha * overlay.opacity), ...(options.trace ? { "data-opf-image-overlay": overlay.path } : {}) });
 }
 
 // The placeholder renderImage draws for a source it cannot resolve.
@@ -885,7 +890,7 @@ function renderSlideContent(bound, width, height, options) {
   for (const diagnostic of [...bound.design.diagnostics, ...bound.geometry.diagnostics]) reportDiagnostic(diagnostic, options);
   return bound.geometry.items.map(item => {
     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,...traceAttrs(options,item.path)}) : '';
+    const surface=frame ? tag('rect',{...HIDDEN,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,...traceAttrs(options,item.path)}) : '';
     // RR-34: a captioned item draws its media in item.box and its caption band after it (src/annotations.js).
     return surface+renderPayload(item, item.box, { ...bound, composition: item.composition }, options)+(item.caption?renderCaption(item,{ ...bound, composition: item.composition },options,drawHelpers):'');
   });
@@ -900,11 +905,13 @@ function reportDiagnostic(diagnostic, options) {
   options.onDiagnostic?.(diagnostic);
 }
 
-// FA-09: Chart.alt is the chart's accessible name: a role="img" group with aria-label, which also makes the drawn marks and labels
-// inside presentational. An empty alt marks the chart decorative (aria-hidden). Without alt the SVG is unchanged.
-function chartText(chart, alt) {
-  if (typeof alt !== "string" || !chart) return chart;
-  return alt === "" ? tag("g", { "aria-hidden": "true" }, chart) : tag("g", { role: "img", "aria-label": alt }, chart);
+// FA-09, FA-27: Chart.alt and Table.alt name the drawn payload with an aria-label on a wrapping group. A chart is a picture: role="img",
+// which also makes its marks and labels presentational. A table's alt is a summary (the cells are real text and stay readable, as in
+// PowerPoint, where descr on a table frame hides nothing): role="group" names it without hiding its children. An empty alt marks the payload
+// decorative (aria-hidden) for both. Without alt the SVG is unchanged.
+function altText(drawn, alt, role) {
+  if (typeof alt !== "string" || !drawn) return drawn;
+  return alt === "" ? tag("g", { "aria-hidden": "true" }, drawn) : tag("g", { role, "aria-label": alt }, drawn);
 }
 
 function renderPayload(item, box, bound, options) {
@@ -912,9 +919,9 @@ function renderPayload(item, box, bound, options) {
   if (item.field === "items" || item.field === "bullets") return renderList(item, box, bound, options);
   switch (item.type) {
     case "chart":
-      return chartText(renderChart(item, box, bound, options), item.value?.alt);
+      return altText(renderChart(item, box, bound, options), item.value?.alt, "img");
     case "table":
-      return renderTable(item, box, bound, options);
+      return altText(renderTable(item, box, bound, options), item.value?.alt, "group");
     case "image":
       return renderImageBlock(item, bound, options);
     case "video":
@@ -999,10 +1006,17 @@ function resolveImageSource(item, bound, options) {
   return { asset, source: svg ?? source, drawable, missingReference };
 }
 
+// FA-30: purely decorative drawing is hidden from assistive technology so the slide's text and real pictures are what a reader meets
+// (background, overlays, card frames, dividers, table cell fills and borders, accent shapes). SVG-AAM already leaves an unnamed shape
+// out of the tree; the attribute states the intent for the readers that do not.
+const HIDDEN = Object.freeze({ "aria-hidden": "true" });
+
 // The accessible name of a drawn picture: its alt text, else the caller's label; a decorative picture (an image background
 // without alt) is hidden from assistive technology.
 function imageAccessibility(asset, options) {
-  if (options.imageDecorative) return { "aria-hidden": "true" };
+  // An empty alt marks the picture decorative (FA-30), as it does a chart; a picture that is only furniture (a header or footer
+  // logo repeated on every slide) is decorative unless the author named it.
+  if (options.imageDecorative || asset.alt === "" || (options.imageUnlabelled && asset.alt === undefined)) return HIDDEN;
   return { role: "img", "aria-label": asset.alt ?? options.imageLabel ?? "Image" };
 }
 
@@ -1227,6 +1241,7 @@ function renderMedia(item, box, bound, options) {
   const iconBox = centeredBox(box, 72, 72);
   const children = [
     tag("rect", {
+      ...HIDDEN,
       x: box.x,
       y: box.y,
       width: box.width,
@@ -1237,6 +1252,7 @@ function renderMedia(item, box, bound, options) {
       ...traceAttrs(options, item.path)
     }),
     tag("circle", {
+      ...HIDDEN,
       cx: iconBox.x + iconBox.width / 2,
       cy: iconBox.y + iconBox.height / 2,
       r: 36,
@@ -1244,6 +1260,7 @@ function renderMedia(item, box, bound, options) {
       ...traceAttrs(options, item.path)
     }),
     tag("path", {
+      ...HIDDEN,
       d: trianglePath(iconBox.x + 28, iconBox.y + 22, 28, 28),
       fill: "#FFFFFF",
       ...traceAttrs(options, item.path)
@@ -1274,6 +1291,7 @@ function renderCode(item, box, bound, options) {
   const highlight = codeHighlight(item, layout, bound);
   const children = [
     tag("rect", {
+      ...HIDDEN,
       x: box.x,
       y: box.y,
       width: box.width,
@@ -1290,6 +1308,7 @@ function renderCode(item, box, bound, options) {
     const body = layout.parts.find(part => part.role === "body");
     for (const band of highlight.bands) {
       children.push(tag("rect", {
+        ...HIDDEN,
         x: stableNumber(box.x + 1), y: stableNumber(body.box.y + band.first * body.fit.lineHeight), width: stableNumber(box.width - 2),
         height: stableNumber((band.last - band.first + 1) * body.fit.lineHeight), fill: highlight.colors.band,
         ...(options.trace ? { "data-opf-code-highlight": "true" } : {})
@@ -1405,16 +1424,16 @@ function renderTimeline(item, box, bound, options) {
   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)})];
+  const children=[tag('line',{...HIDDEN,...layout.connector,stroke:bound.design.colors.border,'stroke-width':3*scale,...traceAttrs(options,item.path)})];
   // FA-11: status colors come from the deck (core's timelineMarkerShapes / timelineTextColor); a marker with no status draws the plain primary circle.
   const background=bound.design.backgroundColor??bound.design.colors.background;
   const statusColors={background,primary:bound.design.colors.primary,text:bound.design.colors.text,mutedText:bound.design.colors.mutedText};
   for(const marker of layout.markers){
     if(!marker.status){
-      children.push(tag('circle',{cx:marker.x,cy:marker.y,r:marker.radius,fill:bound.design.colors.primary,...traceAttrs(options,marker.path)}));
+      children.push(tag('circle',{...HIDDEN,cx:marker.x,cy:marker.y,r:marker.radius,fill:bound.design.colors.primary,...traceAttrs(options,marker.path)}));
       continue;
     }
-    for(const shape of timelineMarkerShapes(marker,statusColors))children.push(tag('circle',{cx:shape.cx,cy:shape.cy,r:shape.radius,fill:shape.fill??'none',...(shape.stroke?{stroke:shape.stroke.color,'stroke-width':shape.stroke.width}:{}),...traceAttrs(options,marker.path),...(options.trace?{'data-opf-timeline-status':marker.status,'data-opf-timeline-shape':shape.role}:{})}));
+    for(const shape of timelineMarkerShapes(marker,statusColors))children.push(tag('circle',{...HIDDEN,cx:shape.cx,cy:shape.cy,r:shape.radius,fill:shape.fill??'none',...(shape.stroke?{stroke:shape.stroke.color,'stroke-width':shape.stroke.width}:{}),...traceAttrs(options,marker.path),...(options.trace?{'data-opf-timeline-status':marker.status,'data-opf-timeline-shape':shape.role}:{})}));
   }
   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,diagnostics:layout.diagnostics});
@@ -1445,6 +1464,7 @@ function renderTable(item, box, bound, options) {
       ? defaultText
       : resolveColorRef(style.color, bound, defaultText);
     children.push(tag("rect", {
+      ...HIDDEN,
       x: stableNumber(cell.box.x), y: stableNumber(cell.box.y),
       width: stableNumber(cell.box.width), height: stableNumber(cell.box.height),
       fill,
@@ -1500,6 +1520,7 @@ function renderTableBorders(defaultEdges, explicitEdges, scale, bound, options)
       ? defaultColor
       : resolveColorRef(border.color, bound, defaultColor);
     return [tag('line', {
+      ...HIDDEN,
       x1:stableNumber(x1), y1:stableNumber(y1), x2:stableNumber(x2), y2:stableNumber(y2),
       stroke, 'stroke-width':stableNumber(width),
       'stroke-dasharray':border?.dash === 'dash' ? `${width*4} ${width*3}` : border?.dash === 'dot' ? `${width} ${width*2}` : undefined,
@@ -1637,7 +1658,7 @@ function renderFurniture(bound, presentation, width, height, options, kind) {
   }
   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'}));
+    if(part.type==='image')return tag('g',trace,renderImage({value:part.image,path:part.path},part.box,bound,{...options,imageFit:'contain',imageUnlabelled:true}));
     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(''));
 }
@@ -1650,12 +1671,13 @@ function renderBranding(bound,presentation,width,height,options) {
     if(mark){
       const opacity=typeof design.watermark.opacity==='number'&&Number.isFinite(design.watermark.opacity)?Math.min(1,Math.max(0,design.watermark.opacity)):.08;
       const cx=width/2,cy=height/2;
-      pieces.push(tag('g',{opacity:stableNumber(opacity),transform:`rotate(${stableNumber(mark.rotation)} ${stableNumber(cx)} ${stableNumber(cy)})`,...traceAttrs(options,rootFor('watermark'))},
+      pieces.push(tag('g',{...HIDDEN,opacity:stableNumber(opacity),transform:`rotate(${stableNumber(mark.rotation)} ${stableNumber(cx)} ${stableNumber(cy)})`,...traceAttrs(options,rootFor('watermark'))},
         tag('text',{x:stableNumber(cx),y:stableNumber(cy+mark.fontSize*.35),'text-anchor':'middle','font-family':fontStack(mark.style.fontFamily,bound.design.fontScheme.type),'font-size':stableNumber(mark.fontSize),'font-weight':mark.fontWeight,
           fill:bound.design.colors.text,'xml:space':'preserve','text-rendering':'geometricPrecision'},escapeText(mark.text))));
     }
   } else 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,imageFit:'contain'})));
+    // The group keeps its bare opacity attribute (opf-pptx's watermark parity test reads it); the picture itself is hidden.
+    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',imageDecorative:true})));
   }
   // Cover and section slides: the deck logo core composed at the top-left of the free area, anchored left.
   const logo=bound.geometry.logo;
@@ -1798,21 +1820,26 @@ function codeSyntax(item, layout, bound, options) {
   return { tokens, palette: codeSyntaxPaletteForScheme(bound.design.colorScheme) };
 }
 
-// Faces flagged embed:"used" (the vendored open, Intos and script-pack faces) are embedded only when the slide's own markup draws
-// them: the family in a font-family list, at a font-weight and font-style some text of the slide takes (attributes are
-// inherited down the element tree, as in SVG). A used family none of whose faces matches a drawn weight and style keeps all
-// its faces, so the browser can always choose. Every other face (the npm packs) is embedded as before.
+// RR-61: a face is embedded only when the slide's own markup draws it: the family in a font-family list, at a font-weight and
+// font-style some text of the slide takes (attributes are inherited down the element tree, as in SVG). A drawn family none of
+// whose faces matches a drawn weight and style keeps all its faces, so the browser can always choose. A face no font-family of
+// the SVG names is one the browser can never select, so leaving it out changes no pixel. Only a face flagged embed:"always" is
+// embedded in every SVG. RR-59: each drawn style is checked on its own, so a family keeps an exactly matched face and, for
+// a drawn style none of its faces matches (a weight the family lacks), every face the browser could choose from.
 function embeddedFontsFor(fonts = [], content) {
-  if (!fonts.some(font => font?.embed === "used")) return fonts;
+  if (!fonts.length) return fonts;
+  fonts.forEach(assertEmbeddableFont);
   const drawn = drawnFaces(content.join("\n"));
   const wanted = font => {
     const triples = drawn.get(String(font.family).toLowerCase());
     if (!triples) return false;
-    const family = fonts.filter(other => other?.embed === "used" && String(other.family).toLowerCase() === String(font.family).toLowerCase());
-    const matching = family.filter(other => triples.has(`${other.weight}|${other.italic ? "italic" : "normal"}`));
-    return matching.length ? matching.includes(font) : true;
+    const family = fonts.filter(other => String(other?.family).toLowerCase() === String(font.family).toLowerCase());
+    return [...triples].some(triple => {
+      const matching = family.filter(other => triple === `${other.weight}|${other.italic ? "italic" : "normal"}`);
+      return matching.length ? matching.includes(font) : true;
+    });
   };
-  return fonts.filter(font => font?.embed !== "used" || wanted(font));
+  return fonts.filter(font => font?.embed === "always" || wanted(font));
 }
 
 const FONT_WEIGHT_KEYWORDS = { normal: "400", bold: "700" };
@@ -1841,10 +1868,21 @@ function drawnFaces(markup) {
   return drawn;
 }
 
+// Every supplied face is checked, drawn or not, so a bad entry fails on any slide. The data URI check is remembered per face
+// object while its dataUrl is unchanged: the handle's list holds the same objects on every slide, and its URIs run to tens of
+// megabytes.
+const checkedDataUrls = new WeakMap();
+function assertEmbeddableFont(font) {
+  const valid = typeof font?.family === "string" && !/[\u0000-\u001f"'\\<>;]/.test(font.family) && Number.isInteger(font.weight) && font.weight >= 1 && font.weight <= 1000
+    && (checkedDataUrls.get(font) === font.dataUrl || /^data:font\/(ttf|otf|woff|woff2);base64,[A-Za-z0-9+/=]+$/.test(font.dataUrl));
+  if (!valid) throw new OPFRenderError("invalid-embedded-font", "Embedded fonts require a plain family name, valid weight, and a font data URI.");
+  checkedDataUrls.set(font, font.dataUrl);
+}
+
 function renderEmbeddedFonts(fonts = []) {
   if (!fonts.length) return "";
   const css = fonts.map(font => {
-    if (typeof font.family !== "string" || /[\u0000-\u001f"'\\<>;]/.test(font.family) || !/^data:font\/(ttf|otf|woff|woff2);base64,[A-Za-z0-9+/=]+$/.test(font.dataUrl) || !Number.isInteger(font.weight) || font.weight < 1 || font.weight > 1000) throw new OPFRenderError("invalid-embedded-font", "Embedded fonts require a plain family name, valid weight, and a font data URI.");
+    assertEmbeddableFont(font);
     return `@font-face{font-family:"${font.family}";font-weight:${font.weight};font-style:${font.italic ? "italic" : "normal"};src:url("${font.dataUrl}")}`;
   }).join("\n");
   const licenses = [...new Set(fonts.map(font=>font.license).filter(Boolean))];