@boxpdf/html-writer 0.1.17 → 0.1.18

package/dist/index.js

@@ -1,6 +1,64 @@
 // src/index.ts
 import { structurePage as structurePage2, tableToHtml } from "@boxpdf/reader/structure";
 
+// src/semantic-caption.ts
+function isClearMediaCaption(media, block, pageWidth, pageHeight, pageLines) {
+  if (block.type !== "paragraph" || block.lines.length === 0) return false;
+  const bounds2 = unionLines(block.lines);
+  const lineHeight = median(block.lines.map((line) => line.bounds.height));
+  if (media.bounds.width < pageWidth * 0.2 || media.bounds.height < lineHeight * 10) return false;
+  if (media.bounds.x < -2 || media.bounds.y < -2 || media.bounds.x + media.bounds.width > pageWidth + 2 || media.bounds.y + media.bounds.height > pageHeight + 2)
+    return false;
+  const gap = media.bounds.y - (bounds2.y + bounds2.height);
+  if (gap < -lineHeight * 0.15 || gap > lineHeight * 1.25) return false;
+  const mediaCenter = media.bounds.x + media.bounds.width / 2;
+  const captionCenter = bounds2.x + bounds2.width / 2;
+  if (Math.abs(mediaCenter - captionCenter) > Math.max(3, media.bounds.width * 0.03)) return false;
+  if (bounds2.width < media.bounds.width * 0.45 || bounds2.width > media.bounds.width * 1.06) {
+    return false;
+  }
+  const first = block.lines.flatMap((line) => line.spans).find((span) => /\S/u.test(span.text));
+  if (!first) return false;
+  const otherLines = pageLines.filter((line) => !block.lines.includes(line));
+  return fontSignature(first) !== dominantFontSignature(otherLines);
+}
+function clearMediaCaptionAssociations(media, blocks, pageWidth, pageHeight, pageLines) {
+  const associations = /* @__PURE__ */ new Map();
+  for (const item of media) {
+    const candidates = blocks.filter((block) => isClearMediaCaption(item, block, pageWidth, pageHeight, pageLines)).filter((block) => !associations.has(block)).sort((left, right) => captionGap(item, left) - captionGap(item, right));
+    const caption = candidates[0];
+    if (caption) associations.set(caption, item);
+  }
+  return associations;
+}
+function captionGap(media, block) {
+  if (block.type !== "paragraph") return Number.POSITIVE_INFINITY;
+  const bounds2 = unionLines(block.lines);
+  return Math.abs(media.bounds.y - bounds2.y - bounds2.height);
+}
+function unionLines(lines) {
+  const x = Math.min(...lines.map((line) => line.bounds.x));
+  const y = Math.min(...lines.map((line) => line.bounds.y));
+  const right = Math.max(...lines.map((line) => line.bounds.x + line.bounds.width));
+  const top = Math.max(...lines.map((line) => line.bounds.y + line.bounds.height));
+  return { x, y, width: right - x, height: top - y };
+}
+function dominantFontSignature(lines) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const span of lines.flatMap((line) => line.spans)) {
+    const signature = fontSignature(span);
+    counts.set(signature, (counts.get(signature) ?? 0) + Math.max(1, [...span.text].length));
+  }
+  return [...counts].sort((left, right) => right[1] - left[1])[0]?.[0] ?? "";
+}
+function fontSignature(span) {
+  return `${(span.fontFamily ?? span.fontName ?? "").toLocaleLowerCase("en")}|${Math.round(span.fontSize * 2) / 2}|${span.color ?? ""}`;
+}
+function median(values) {
+  const ordered = [...values].sort((left, right) => left - right);
+  return ordered[Math.floor(ordered.length / 2)] ?? 1;
+}
+
 // src/semantic-document.ts
 import {
   structurePage,
@@ -76,6 +134,85 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
 
+// src/vector-svg.ts
+function vectorFillSvg(fill) {
+  if (!isCssHexColor(fill.color)) return "";
+  const points = fill.points.map(([x, y]) => `${number(x)},${number(y)}`).join(" ");
+  const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
+  return `<polygon points="${points}" fill="${fill.color}"${opacity}/>`;
+}
+function vectorPathSvg(path, pageNumber, pathIndex) {
+  if (!isSvgPath(path.d)) return "";
+  const fill = isCssHexColor(path.fill) ? path.fill : "none";
+  const stroke = isCssHexColor(path.stroke) ? path.stroke : "none";
+  const width = finiteNonnegative(path.strokeWidth) ? ` stroke-width="${number(path.strokeWidth)}"` : "";
+  const fillOpacity = isUnitInterval(path.fillOpacity) ? ` fill-opacity="${number(path.fillOpacity)}"` : "";
+  const strokeOpacity = isUnitInterval(path.strokeOpacity) ? ` stroke-opacity="${number(path.strokeOpacity)}"` : "";
+  const dash = path.strokeDasharray?.every(finiteNonnegative) ? ` stroke-dasharray="${path.strokeDasharray.map(number).join(" ")}"` : "";
+  const dashoffset = Number.isFinite(path.strokeDashoffset) ? ` stroke-dashoffset="${number(path.strokeDashoffset ?? 0)}"` : "";
+  const linecap = path.strokeLinecap ? ` stroke-linecap="${path.strokeLinecap}"` : "";
+  const linejoin = path.strokeLinejoin ? ` stroke-linejoin="${path.strokeLinejoin}"` : "";
+  const rule = path.fillRule ? ` fill-rule="${path.fillRule}"` : "";
+  let output = `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}${fillOpacity}${strokeOpacity}${dash}${dashoffset}${linecap}${linejoin}${rule}/>`;
+  for (let index = (path.clips?.length ?? 0) - 1; index >= 0; index -= 1) {
+    output = `<g clip-path="url(#${vectorPathClipId(pageNumber, pathIndex, index)})">${output}</g>`;
+  }
+  return output;
+}
+function vectorPathClipDefinitions(paths, pageNumber) {
+  return paths.flatMap(
+    ({ path, index: pathIndex }) => (path.clips ?? []).map((clip, clipIndex) => {
+      if (!isSvgPath(clip.d)) return "";
+      const rule = clip.fillRule ? ` clip-rule="${clip.fillRule}"` : "";
+      return `<clipPath id="${vectorPathClipId(pageNumber, pathIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}"${rule}/></clipPath>`;
+    })
+  ).join("");
+}
+function vectorPathBounds(path) {
+  if (!isSvgPath(path.d)) return void 0;
+  const values = [...path.d.matchAll(/[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi)].map(
+    (match) => Number(match[0])
+  );
+  if (values.length < 2) return void 0;
+  const xs = [];
+  const ys = [];
+  for (let index = 0; index + 1 < values.length; index += 2) {
+    xs.push(values[index] ?? 0);
+    ys.push(values[index + 1] ?? 0);
+  }
+  return bounds(xs, ys);
+}
+function vectorFillBounds(fill) {
+  if (fill.points.length === 0) return void 0;
+  return bounds(
+    fill.points.map(([x]) => x),
+    fill.points.map(([, y]) => y)
+  );
+}
+function isSvgPath(value) {
+  return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
+}
+function bounds(xs, ys) {
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function vectorPathClipId(pageNumber, pathIndex, clipIndex) {
+  return `boxpdf-path-clip-${pageNumber}-${pathIndex}-${clipIndex}`;
+}
+function isCssHexColor(value) {
+  return typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value);
+}
+function finiteNonnegative(value) {
+  return value !== void 0 && Number.isFinite(value) && value >= 0;
+}
+function isUnitInterval(value) {
+  return value !== void 0 && Number.isFinite(value) && value >= 0 && value <= 1;
+}
+function number(value) {
+  return Number(value.toFixed(4)).toString();
+}
+
 // src/visual-font.ts
 function visualFontAliases(pageNumber, fonts) {
   return new Map(
@@ -125,46 +262,90 @@ function base64(bytes) {
 // src/semantic-media.ts
 function semanticMedia(page) {
   const output = (page.images ?? []).map((image) => rasterMedia(image));
-  const vector = vectorMedia(page);
-  if (vector) output.push(vector);
+  output.push(...vectorMedia(page));
   return output.sort((left, right) => right.bounds.y - left.bounds.y);
 }
 function rasterMedia(image) {
-  const bounds = transformedUnitBounds(image.transform);
+  const bounds2 = transformedUnitBounds(image.transform);
   const mime = image.format === "jpeg" ? "image/jpeg" : "image/bmp";
   const data = image.format === "jpeg" ? image.data : rgbBmp(image);
-  const opacity = unitInterval(image.opacity) ? `;opacity:${number(image.opacity)}` : "";
+  const opacity = unitInterval(image.opacity) ? `;opacity:${number2(image.opacity)}` : "";
   return {
-    bounds,
-    html: `<img class="pdf-semantic-media" src="data:${mime};base64,${base64(data)}" width="${number(bounds.width)}" height="${number(bounds.height)}" alt="" style="max-width:100%;height:auto${opacity}">`
+    bounds: bounds2,
+    html: `<img class="pdf-semantic-media" src="data:${mime};base64,${base64(data)}" width="${number2(bounds2.width)}" height="${number2(bounds2.height)}" alt="" style="max-width:100%;height:auto${opacity}">`
   };
 }
 function vectorMedia(page) {
-  const paths = (page.paths ?? []).filter((path) => safePath(path.d));
-  const fills = page.fills ?? [];
-  const bounds = unionBounds([
-    ...paths.map((path) => pathBounds(path.d)),
-    ...fills.map(fillBounds)
-  ]);
-  if (!bounds || bounds.width <= 0 || bounds.height <= 0) return void 0;
+  const primitives = [
+    ...(page.paths ?? []).flatMap((path, index) => {
+      const bounds2 = vectorPathBounds(path);
+      return bounds2 ? [{ type: "path", value: path, index, bounds: bounds2 }] : [];
+    }),
+    ...(page.fills ?? []).flatMap((fill) => {
+      const bounds2 = vectorFillBounds(fill);
+      return bounds2 && !isPageBackground(fill, bounds2, page) ? [{ type: "fill", value: fill, bounds: bounds2 }] : [];
+    })
+  ];
+  const components = vectorComponents(primitives, Math.min(36, page.width * 0.06)).filter(
+    (component) => component.primitives.length >= 2 || component.bounds.width * component.bounds.height >= page.width * page.height * 2e-3
+  );
   const aliases = visualFontAliases(page.number, page.fonts ?? []);
   const visualCodeFonts = new Set(
     (page.fonts ?? []).filter((font) => font.format === "truetype" && font.visualCodeMapping).map((font) => font.id)
   );
-  const visualSpans = page.visualSpans ?? page.spans;
-  const overlay = visualSpans.filter(
-    (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds)
-  );
-  const consumedSpans = page.spans.filter(
-    (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds)
-  );
-  const fontIds = new Set(overlay.map((span) => span.fontAssetId));
-  const fontFaces = (page.fonts ?? []).filter((font) => fontIds.has(font.id)).map((font) => visualFontFace(font, aliases)).join("");
-  return {
-    bounds,
-    html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number(bounds.x)} ${number(page.height - bounds.y - bounds.height)} ${number(bounds.width)} ${number(bounds.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true">${fontFaces ? `<style>${fontFaces}</style>` : ""}<g transform="translate(0 ${number(page.height)}) scale(1 -1)">${fills.map(vectorFill).join("") + paths.map((path) => vectorPath(path)).join("")}</g>${overlay.map((span) => vectorText(span, page.height, aliases)).join("")}</svg>`,
-    ...consumedSpans.length > 0 ? { consumedSpans } : {}
-  };
+  return components.map((component) => {
+    const bounds2 = component.bounds;
+    const paths = component.primitives.flatMap(
+      (primitive) => primitive.type === "path" ? [{ path: primitive.value, index: primitive.index }] : []
+    );
+    const fills = component.primitives.flatMap(
+      (primitive) => primitive.type === "fill" ? [primitive.value] : []
+    );
+    const visualSpans = page.visualSpans ?? page.spans;
+    const overlay = visualSpans.filter(
+      (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds2)
+    );
+    const consumedSpans = page.spans.filter(
+      (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds2)
+    );
+    const fontIds = new Set(overlay.map((span) => span.fontAssetId));
+    const fontFaces = (page.fonts ?? []).filter((font) => fontIds.has(font.id)).map((font) => visualFontFace(font, aliases)).join("");
+    return {
+      bounds: bounds2,
+      html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number2(bounds2.x)} ${number2(page.height - bounds2.y - bounds2.height)} ${number2(bounds2.width)} ${number2(bounds2.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true">${fontFaces ? `<style>${fontFaces}</style>` : ""}${paths.length ? `<defs>${vectorPathClipDefinitions(paths, page.number)}</defs>` : ""}<g transform="translate(0 ${number2(page.height)}) scale(1 -1)">${fills.map(vectorFillSvg).join("") + paths.map(({ path, index }) => vectorPathSvg(path, page.number, index)).join("")}</g>${overlay.map((span) => vectorText(span, page.height, aliases)).join("")}</svg>`,
+      ...consumedSpans.length > 0 ? { consumedSpans } : {}
+    };
+  });
+}
+function vectorComponents(primitives, padding) {
+  const components = [];
+  for (const primitive of primitives) {
+    const matches = components.filter(
+      (component) => nearby(component.bounds, primitive.bounds, padding)
+    );
+    if (matches.length === 0) {
+      components.push({ bounds: primitive.bounds, primitives: [primitive] });
+      continue;
+    }
+    const target = matches[0];
+    target.primitives.push(primitive);
+    target.bounds = unionBounds([target.bounds, primitive.bounds]);
+    for (const component of matches.slice(1)) {
+      target.primitives.push(...component.primitives);
+      target.bounds = unionBounds([target.bounds, component.bounds]);
+      components.splice(components.indexOf(component), 1);
+    }
+  }
+  return components;
+}
+function nearby(left, right, padding) {
+  return !(left.x + left.width + padding < right.x || right.x + right.width + padding < left.x || left.y + left.height + padding < right.y || right.y + right.height + padding < left.y);
+}
+function isPageBackground(fill, bounds2, page) {
+  if (!/^#f{6}$/i.test(fill.color)) return false;
+  const outside = bounds2.x < 0 || bounds2.y < 0 || bounds2.x + bounds2.width > page.width || bounds2.y + bounds2.height > page.height;
+  const large = bounds2.width * bounds2.height > page.width * page.height * 0.2;
+  return outside || large;
 }
 function withoutSemanticMediaSpans(page, media) {
   const consumed = new Set(media.flatMap((item) => item.consumedSpans ?? []));
@@ -174,7 +355,7 @@ function vectorText(span, pageHeight, aliases) {
   if (span.renderingMode === 3 || span.renderingMode === 7) return "";
   const styles2 = [
     cssColor(span.color) ? `fill:${span.color}` : "",
-    unitInterval(span.fillOpacity) ? `fill-opacity:${number(span.fillOpacity)}` : "",
+    unitInterval(span.fillOpacity) ? `fill-opacity:${number2(span.fillOpacity)}` : "",
     ...visualFontStyles(
       span.fontFamily,
       span.fontAssetId ? aliases.get(span.fontAssetId) : void 0
@@ -182,33 +363,16 @@ function vectorText(span, pageHeight, aliases) {
   ].filter(Boolean).join(";");
   const anchorY = pageHeight - span.bounds.y;
   const transform = span.transform;
-  const position = transform ? ` x="0" y="0" transform="matrix(${transform.map(number).join(" ")} ${number(span.bounds.x)} ${number(anchorY)})"` : ` x="${number(span.bounds.x)}" y="${number(anchorY)}"`;
+  const position = transform ? ` x="0" y="0" transform="matrix(${transform.map(number2).join(" ")} ${number2(span.bounds.x)} ${number2(anchorY)})"` : ` x="${number2(span.bounds.x)}" y="${number2(anchorY)}"`;
   const extent = span.direction === "ttb" ? span.bounds.height : span.bounds.width;
-  const length = extent > 0 ? ` textLength="${number(extent)}" lengthAdjust="spacingAndGlyphs"` : "";
-  return `<text${position} font-size="${number(span.fontSize)}"${length}${styles2 ? ` style="${styles2}"` : ""}>${escapeHtml2(span.text)}</text>`;
+  const length = extent > 0 ? ` textLength="${number2(extent)}" lengthAdjust="spacingAndGlyphs"` : "";
+  return `<text${position} font-size="${number2(span.fontSize)}"${length}${styles2 ? ` style="${styles2}"` : ""}>${escapeHtml2(span.text)}</text>`;
 }
 function centerInside(inner, outer) {
   const x = inner.x + inner.width / 2;
   const y = inner.y + inner.height / 2;
   return x >= outer.x && x <= outer.x + outer.width && y >= outer.y && y <= outer.y + outer.height;
 }
-function vectorFill(fill) {
-  const points = fill.points.map(([x, y]) => `${number(x)},${number(y)}`).join(" ");
-  const opacity = unitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
-  return cssColor(fill.color) ? `<polygon points="${points}" fill="${fill.color}"${opacity}/>` : "";
-}
-function vectorPath(path) {
-  const fill = cssColor(path.fill) ? path.fill : "none";
-  const stroke = cssColor(path.stroke) ? path.stroke : "none";
-  const width = finiteNonnegative(path.strokeWidth) ? ` stroke-width="${number(path.strokeWidth)}"` : "";
-  const fillOpacity = unitInterval(path.fillOpacity) ? ` fill-opacity="${number(path.fillOpacity)}"` : "";
-  const strokeOpacity = unitInterval(path.strokeOpacity) ? ` stroke-opacity="${number(path.strokeOpacity)}"` : "";
-  const dash = path.strokeDasharray?.every(finiteNonnegative) ? ` stroke-dasharray="${path.strokeDasharray.map(number).join(" ")}"` : "";
-  const linecap = path.strokeLinecap ? ` stroke-linecap="${path.strokeLinecap}"` : "";
-  const linejoin = path.strokeLinejoin ? ` stroke-linejoin="${path.strokeLinejoin}"` : "";
-  const rule = path.fillRule ? ` fill-rule="${path.fillRule}"` : "";
-  return `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}${fillOpacity}${strokeOpacity}${dash}${linecap}${linejoin}${rule}/>`;
-}
 function transformedUnitBounds([a, b, c, d, e, f]) {
   const points = [
     [e, f],
@@ -222,31 +386,8 @@ function transformedUnitBounds([a, b, c, d, e, f]) {
   const minY = Math.min(...ys);
   return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
 }
-function pathBounds(path) {
-  const values = [...path.matchAll(/[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi)].map(
-    (match) => Number(match[0])
-  );
-  if (values.length < 2) return void 0;
-  const xs = [];
-  const ys = [];
-  for (let index = 0; index + 1 < values.length; index += 2) {
-    xs.push(values[index] ?? 0);
-    ys.push(values[index + 1] ?? 0);
-  }
-  const minX = Math.min(...xs);
-  const minY = Math.min(...ys);
-  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
-}
-function fillBounds(fill) {
-  if (fill.points.length === 0) return void 0;
-  const xs = fill.points.map(([x]) => x);
-  const ys = fill.points.map(([, y]) => y);
-  const minX = Math.min(...xs);
-  const minY = Math.min(...ys);
-  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
-}
-function unionBounds(bounds) {
-  const values = bounds.filter((value) => Boolean(value));
+function unionBounds(bounds2) {
+  const values = bounds2.filter((value) => Boolean(value));
   if (values.length === 0) return void 0;
   const x = Math.min(...values.map((value) => value.x));
   const y = Math.min(...values.map((value) => value.y));
@@ -277,19 +418,16 @@ function rgbBmp(image) {
   }
   return output;
 }
-function safePath(value) {
-  return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
-}
 function cssColor(value) {
   return /^#[\da-f]{6}$/i.test(value ?? "");
 }
-function finiteNonnegative(value) {
+function finiteNonnegative2(value) {
   return Number.isFinite(value) && (value ?? -1) >= 0;
 }
 function unitInterval(value) {
-  return finiteNonnegative(value) && value <= 1;
+  return finiteNonnegative2(value) && value <= 1;
 }
-function number(value) {
+function number2(value) {
   return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
 }
 function escapeHtml2(value) {
@@ -341,18 +479,38 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
   const emitPage = async (page, future) => {
     const defaultColor = dominantTextColor(page.structured.lines);
     let mediaIndex = 0;
+    const captions = clearMediaCaptionAssociations(
+      page.media,
+      page.structured.blocks,
+      page.width,
+      page.height,
+      page.structured.lines
+    );
+    const captionedMedia = new Set(captions.values());
     const futureFurniture = new Set(future.flatMap((candidate) => marginSignatures(candidate)));
     const repeatedFurniture = /* @__PURE__ */ new Set([...seenFurniture, ...futureFurniture]);
     for (const [blockIndex, block] of page.structured.blocks.entries()) {
       const nextBlock = page.structured.blocks[blockIndex + 1];
       const blockY = semanticBlockY(block);
+      let emittedAsCaption = false;
       while ((page.media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
         await flushPendingParagraph();
-        const html = `<div class="pdf-semantic-visual">${page.media[mediaIndex]?.html}</div>`;
+        const item = page.media[mediaIndex];
+        if (item && captions.get(block) === item && block.type === "paragraph") {
+          const html2 = `<figure class="pdf-semantic-figure">${item.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`;
+          if (activeTable) pendingMedia.push(html2);
+          else await write(html2);
+          mediaIndex += 1;
+          emittedAsCaption = true;
+          break;
+        }
+        if (item && captionedMedia.has(item)) break;
+        const html = `<div class="pdf-semantic-visual">${item?.html}</div>`;
         if (activeTable) pendingMedia.push(html);
         else await write(html);
         mediaIndex += 1;
       }
+      if (emittedAsCaption) continue;
       if (isRepeatedFurniture(block, page, repeatedFurniture)) {
         stats.suppressedFurniture += 1;
         continue;
@@ -583,6 +741,14 @@ function financialSummaryRow(entry, columns) {
   return `<tr><th scope="row"${colspan}>${escapeHtml3(entry.term)}</th><td>${escapeHtml3(entry.description)}</td></tr>`;
 }
 function semanticBlockHtml(block, defaultColor = "#000000") {
+  if (block.type === "insetGroup") {
+    return `<div class="pdf-semantic-inset" style="margin-inline-start:${block.indentEm}em">${block.blocks.map((item) => semanticBlockHtml(item, defaultColor)).join("")}</div>`;
+  }
+  if (block.type === "table") {
+    const rows = tableToRows(block.table);
+    const header = tableHeader(rows);
+    return `<table>${rows.map((row, index) => tableRow(row, Boolean(header && index === 0))).join("")}</table>`;
+  }
   if (block.type === "heading")
     return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${block.level}>`;
   if (block.type === "paragraph")
@@ -698,7 +864,7 @@ async function writePositionedPage(page, write, options) {
   const displayWidth = quarterTurn ? page.height : page.width;
   const displayHeight = quarterTurn ? page.width : page.height;
   await write(
-    `<section class="pdf-page pdf-page--visual pdf-page--positioned" data-page="${page.number}" data-rotate="${page.rotate}" style="width:${number2(displayWidth)}pt;height:${number2(displayHeight)}pt">`
+    `<section class="pdf-page pdf-page--visual pdf-page--positioned" data-page="${page.number}" data-rotate="${page.rotate}" style="width:${number3(displayWidth)}pt;height:${number3(displayHeight)}pt">`
   );
   const fontAliases = visualFontAliases(page.number, page.fonts ?? []);
   const type3Fonts = new Map(
@@ -710,44 +876,26 @@ async function writePositionedPage(page, write, options) {
     );
   }
   await write(
-    `<div class="pdf-page-content pdf-page-content--${page.rotate}" style="width:${number2(page.width)}pt;height:${number2(page.height)}pt${rotationTransform(page)}">`
+    `<div class="pdf-page-content pdf-page-content--${page.rotate}" style="width:${number3(page.width)}pt;height:${number3(page.height)}pt${rotationTransform(page)}">`
   );
   await write(
-    `<svg class="pdf-visual-text" xmlns="http://www.w3.org/2000/svg" width="${number2(page.width)}pt" height="${number2(page.height)}pt" viewBox="0 0 ${number2(page.width)} ${number2(page.height)}">`
+    `<svg class="pdf-visual-text" xmlns="http://www.w3.org/2000/svg" width="${number3(page.width)}pt" height="${number3(page.height)}pt" viewBox="0 0 ${number3(page.width)} ${number3(page.height)}">`
+  );
+  const clipDefinitions = imageClipDefinitions(page.images ?? [], page.number, page.height) + vectorPathClipDefinitions(
+    (page.paths ?? []).map((path, index) => ({ path, index })),
+    page.number
   );
-  const clipDefinitions = imageClipDefinitions(page.images ?? [], page.number, page.height) + pathClipDefinitions(page.paths ?? [], page.number);
   if (clipDefinitions) await write(`<defs>${clipDefinitions}</defs>`);
   if (reflectedOverlay) {
     for (const [index, image] of (page.images ?? []).entries()) {
       await write(visualImage(image, page.height, page.number, index));
     }
   }
-  for (const fill of page.fills ?? []) {
-    const points = fill.points.map(([x, y]) => `${number2(x)},${number2(page.height - y)}`).join(" ");
-    if (isCssHexColor(fill.color)) {
-      const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number2(fill.opacity)}"` : "";
-      await write(`<polygon points="${points}" fill="${fill.color}"${opacity}/>`);
-    }
-  }
-  if (page.paths?.length) {
-    await write(`<g transform="translate(0 ${number2(page.height)}) scale(1 -1)">`);
-    for (const [pathIndex, path] of page.paths.entries()) {
-      if (!isSvgPath(path.d)) continue;
-      const fill = isCssHexColor(path.fill) ? path.fill : "none";
-      const stroke = isCssHexColor(path.stroke) ? path.stroke : "none";
-      const strokeWidth = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number2(path.strokeWidth)}"` : "";
-      const fillRule = path.fillRule ? ` fill-rule="${path.fillRule}"` : "";
-      const fillOpacity = isUnitInterval(path.fillOpacity) ? ` fill-opacity="${number2(path.fillOpacity)}"` : "";
-      const strokeOpacity = isUnitInterval(path.strokeOpacity) ? ` stroke-opacity="${number2(path.strokeOpacity)}"` : "";
-      const dasharray = path.strokeDasharray?.every((value) => Number.isFinite(value) && value >= 0) ? ` stroke-dasharray="${path.strokeDasharray.map(number2).join(" ")}"` : "";
-      const dashoffset = Number.isFinite(path.strokeDashoffset) ? ` stroke-dashoffset="${number2(path.strokeDashoffset ?? 0)}"` : "";
-      const linecap = path.strokeLinecap ? ` stroke-linecap="${path.strokeLinecap}"` : "";
-      const linejoin = path.strokeLinejoin ? ` stroke-linejoin="${path.strokeLinejoin}"` : "";
-      let output = `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${strokeWidth}${fillOpacity}${strokeOpacity}${dasharray}${dashoffset}${linecap}${linejoin}${fillRule}/>`;
-      for (let index = (path.clips?.length ?? 0) - 1; index >= 0; index -= 1) {
-        output = `<g clip-path="url(#${pathClipId(page.number, pathIndex, index)})">${output}</g>`;
-      }
-      await write(output);
+  if (page.fills?.length || page.paths?.length) {
+    await write(`<g transform="translate(0 ${number3(page.height)}) scale(1 -1)">`);
+    for (const fill of page.fills ?? []) await write(vectorFillSvg(fill));
+    for (const [pathIndex, path] of (page.paths ?? []).entries()) {
+      await write(vectorPathSvg(path, page.number, pathIndex));
     }
     await write("</g>");
   }
@@ -777,8 +925,8 @@ function usesReflectedVisualOverlay(page, spans) {
 }
 function visualImage(image, pageHeight, pageNumber, imageIndex) {
   const [a, b, c, d, e, f] = image.transform;
-  const transform = [a, -b, -c, d, c + e, pageHeight - d - f].map(number2).join(" ");
-  const opacity = isUnitInterval(image.opacity) ? ` opacity="${number2(image.opacity)}"` : "";
+  const transform = [a, -b, -c, d, c + e, pageHeight - d - f].map(number3).join(" ");
+  const opacity = isUnitInterval2(image.opacity) ? ` opacity="${number3(image.opacity)}"` : "";
   const mime = image.format === "jpeg" ? "image/jpeg" : "image/bmp";
   const data = image.format === "jpeg" ? image.data : rgbBmp2(image);
   let output = `<image width="1" height="1" preserveAspectRatio="none" transform="matrix(${transform})" href="data:${mime};base64,${base64(data)}"${opacity}/>`;
@@ -792,25 +940,13 @@ function imageClipDefinitions(images, pageNumber, pageHeight) {
     (image, imageIndex) => (image.clips ?? []).map((clip, clipIndex) => {
       if (!isSvgPath(clip.d)) return "";
       const fillRule = clip.fillRule ? ` clip-rule="${clip.fillRule}"` : "";
-      return `<clipPath id="${imageClipId(pageNumber, imageIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}" transform="translate(0 ${number2(pageHeight)}) scale(1 -1)"${fillRule}/></clipPath>`;
+      return `<clipPath id="${imageClipId(pageNumber, imageIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}" transform="translate(0 ${number3(pageHeight)}) scale(1 -1)"${fillRule}/></clipPath>`;
     })
   ).join("");
 }
 function imageClipId(pageNumber, imageIndex, clipIndex) {
   return `boxpdf-clip-${pageNumber}-${imageIndex}-${clipIndex}`;
 }
-function pathClipDefinitions(paths, pageNumber) {
-  return paths.flatMap(
-    (path, pathIndex) => (path.clips ?? []).map((clip, clipIndex) => {
-      if (!isSvgPath(clip.d)) return "";
-      const fillRule = clip.fillRule ? ` clip-rule="${clip.fillRule}"` : "";
-      return `<clipPath id="${pathClipId(pageNumber, pathIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}"${fillRule}/></clipPath>`;
-    })
-  ).join("");
-}
-function pathClipId(pageNumber, pathIndex, clipIndex) {
-  return `boxpdf-path-clip-${pageNumber}-${pathIndex}-${clipIndex}`;
-}
 function rgbBmp2(image) {
   const stride = Math.ceil(image.width * 3 / 4) * 4;
   const output = new Uint8Array(54 + stride * image.height);
@@ -839,11 +975,11 @@ function rgbBmp2(image) {
 function rotationTransform(page) {
   switch (page.rotate) {
     case 90:
-      return `;transform:translate(${number2(page.height)}pt,0) rotate(90deg)`;
+      return `;transform:translate(${number3(page.height)}pt,0) rotate(90deg)`;
     case 180:
-      return `;transform:translate(${number2(page.width)}pt,${number2(page.height)}pt) rotate(180deg)`;
+      return `;transform:translate(${number3(page.width)}pt,${number3(page.height)}pt) rotate(180deg)`;
     case 270:
-      return `;transform:translate(0,${number2(page.width)}pt) rotate(270deg)`;
+      return `;transform:translate(0,${number3(page.width)}pt) rotate(270deg)`;
     default:
       return "";
   }
@@ -851,13 +987,13 @@ function rotationTransform(page) {
 function positionedSpan(span, fontAliases) {
   const direction = directionAttribute([span]);
   const style = [
-    `left:${number2(span.bounds.x)}pt`,
-    `bottom:${number2(span.bounds.y)}pt`,
-    `width:${number2(span.bounds.width)}pt`,
-    `height:${number2(span.bounds.height)}pt`,
-    `font-size:${number2(span.fontSize)}pt`,
-    ...isCssHexColor(span.color) ? [`color:${span.color}`] : [],
-    ...isUnitInterval(span.fillOpacity) ? [`opacity:${number2(span.fillOpacity)}`] : [],
+    `left:${number3(span.bounds.x)}pt`,
+    `bottom:${number3(span.bounds.y)}pt`,
+    `width:${number3(span.bounds.width)}pt`,
+    `height:${number3(span.bounds.height)}pt`,
+    `font-size:${number3(span.fontSize)}pt`,
+    ...isCssHexColor2(span.color) ? [`color:${span.color}`] : [],
+    ...isUnitInterval2(span.fillOpacity) ? [`opacity:${number3(span.fillOpacity)}`] : [],
     ...visualFontStyles(
       span.fontFamily,
       span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
@@ -870,15 +1006,35 @@ async function writeFlowPage(page, write) {
   const structured = structurePage2(withoutSemanticMediaSpans(page, media));
   const defaultColor = dominantTextColor(structured.lines);
   let mediaIndex = 0;
+  const captions = clearMediaCaptionAssociations(
+    media,
+    structured.blocks,
+    page.width,
+    page.height,
+    structured.lines
+  );
+  const captionedMedia = new Set(captions.values());
   await write(
     `<section class="pdf-page pdf-page--semantic pdf-page--flow" data-page="${page.number}">`
   );
   for (const block of structured.blocks) {
     const blockY = semanticBlockY2(block);
+    let emittedAsCaption = false;
     while ((media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
-      await write(`<div class="pdf-semantic-visual">${media[mediaIndex]?.html}</div>`);
+      const item = media[mediaIndex];
+      if (item && captions.get(block) === item && block.type === "paragraph") {
+        await write(
+          `<figure class="pdf-semantic-figure">${item.html}<figcaption>${semanticTextHtml(block.text, block.lines, defaultColor)}</figcaption></figure>`
+        );
+        mediaIndex += 1;
+        emittedAsCaption = true;
+        break;
+      }
+      if (item && captionedMedia.has(item)) break;
+      await write(`<div class="pdf-semantic-visual">${item?.html}</div>`);
       mediaIndex += 1;
     }
+    if (emittedAsCaption) continue;
     if (block.type === "table") await write(tableToHtml(block.table));
     else if (block.type === "heading") {
       await write(
@@ -918,6 +1074,10 @@ async function writeFlowPage(page, write) {
       await write(
         `<section><h3>${escapeHtml4(block.role)}</h3><p>${escapeHtml4(block.organization)}</p><p>${escapeHtml4(block.date)}</p></section>`
       );
+    } else if (block.type === "insetGroup") {
+      await write(
+        `<div class="pdf-semantic-inset" style="margin-inline-start:${number3(block.indentEm)}em">${block.blocks.map((item) => nestedSemanticBlockHtml(item, defaultColor)).join("")}</div>`
+      );
     } else {
       const tag = block.ordered ? "ol" : "ul";
       await write(`<${tag}>`);
@@ -933,6 +1093,33 @@ async function writeFlowPage(page, write) {
   }
   await write("</section>");
 }
+function nestedSemanticBlockHtml(block, defaultColor) {
+  if (block.type === "insetGroup") {
+    return `<div class="pdf-semantic-inset" style="margin-inline-start:${number3(block.indentEm)}em">${block.blocks.map((item) => nestedSemanticBlockHtml(item, defaultColor)).join("")}</div>`;
+  }
+  if (block.type === "table") return tableToHtml(block.table);
+  if (block.type === "heading") {
+    return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${block.level}>`;
+  }
+  if (block.type === "paragraph") {
+    return `<p>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`;
+  }
+  if (block.type === "preformatted") return `<pre>${escapeHtml4(block.text)}</pre>`;
+  if (block.type === "definitionList") {
+    return `<dl>${block.entries.map((entry) => `<div><dt>${escapeHtml4(entry.term)}</dt><dd>${escapeHtml4(entry.description)}</dd></div>`).join("")}</dl>`;
+  }
+  if (block.type === "cardList") {
+    return `<div class="pdf-semantic-cards">${block.items.map((item) => `<article><h3>${escapeHtml4(item.title)}</h3>${item.details.map((detail) => `<p>${escapeHtml4(detail)}</p>`).join("")}</article>`).join("")}</div>`;
+  }
+  if (block.type === "sectionGroup") {
+    return `<div class="pdf-semantic-sections">${block.items.map((item) => `<section><h3>${escapeHtml4(item.label)}</h3>${item.content.map((content) => `<p>${escapeHtml4(content)}</p>`).join("")}</section>`).join("")}</div>`;
+  }
+  if (block.type === "employment") {
+    return `<section><h3>${escapeHtml4(block.role)}</h3><p>${escapeHtml4(block.organization)}</p><p>${escapeHtml4(block.date)}</p></section>`;
+  }
+  const tag = block.ordered ? "ol" : "ul";
+  return `<${tag}>${block.items.map((item) => `<li>${semanticTextHtml(item.text, item.lines, defaultColor)}</li>`).join("")}</${tag}>`;
+}
 function semanticBlockY2(block) {
   const lines = block.type === "list" ? block.items.flatMap((item) => item.lines) : block.lines;
   return Math.max(...lines.map((line) => line.bounds.y + line.bounds.height));
@@ -945,15 +1132,15 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
     span.fontFamily,
     span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
   ).join(";");
-  const stroke = isCssHexColor(span.strokeColor) ? `stroke:${span.strokeColor}` : "";
-  const strokeWidth = stroke && Number.isFinite(span.strokeWidth) && (span.strokeWidth ?? -1) >= 0 ? `stroke-width:${number2(span.strokeWidth ?? 0)}` : "";
+  const stroke = isCssHexColor2(span.strokeColor) ? `stroke:${span.strokeColor}` : "";
+  const strokeWidth = stroke && Number.isFinite(span.strokeWidth) && (span.strokeWidth ?? -1) >= 0 ? `stroke-width:${number3(span.strokeWidth ?? 0)}` : "";
   const strokeOnly = span.renderingMode === 1 || span.renderingMode === 5;
-  const fillOpacity = isUnitInterval(span.fillOpacity) ? `fill-opacity:${number2(span.fillOpacity)}` : "";
-  const strokeOpacity = isUnitInterval(span.strokeOpacity) ? `stroke-opacity:${number2(span.strokeOpacity)}` : "";
+  const fillOpacity = isUnitInterval2(span.fillOpacity) ? `fill-opacity:${number3(span.fillOpacity)}` : "";
+  const strokeOpacity = isUnitInterval2(span.strokeOpacity) ? `stroke-opacity:${number3(span.strokeOpacity)}` : "";
   const style = [
     isHebrewPaintOrder(span) ? "unicode-bidi:bidi-override;direction:ltr" : "",
     span.direction === "ttb" ? "writing-mode:vertical-rl" : "",
-    strokeOnly ? "fill:none" : isCssHexColor(span.color) ? `fill:${span.color}` : "",
+    strokeOnly ? "fill:none" : isCssHexColor2(span.color) ? `fill:${span.color}` : "",
     stroke,
     strokeWidth,
     fillOpacity,
@@ -961,7 +1148,7 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
     font
   ].filter(Boolean).join(";");
   const textExtent = span.direction === "ttb" ? span.bounds.height : span.bounds.width;
-  const textLength = textExtent > 0 && !isHebrewPaintOrder(span) ? ` textLength="${number2(textExtent)}" lengthAdjust="${span.direction === "ttb" || usesSpacingAdjustment(span) ? "spacing" : "spacingAndGlyphs"}"` : "";
+  const textLength = textExtent > 0 && !isHebrewPaintOrder(span) ? ` textLength="${number3(textExtent)}" lengthAdjust="${span.direction === "ttb" || usesSpacingAdjustment(span) ? "spacing" : "spacingAndGlyphs"}"` : "";
   const transform = counterRotateReflectedText && span.transform ? [
     span.transform[0],
     span.transform[1],
@@ -974,8 +1161,8 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
   const basisY = transform?.[1] ?? 0;
   const anchorX = span.bounds.x + basisX * rtlOffset;
   const anchorY = pageHeight - span.bounds.y + basisY * rtlOffset;
-  const position = transformed ? ` x="0" y="0" transform="matrix(${transform?.map(number2).join(" ")} ${number2(anchorX)} ${number2(anchorY)})"` : ` x="${number2(anchorX)}" y="${number2(anchorY)}"`;
-  return `<text${direction}${position} font-size="${number2(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml4(span.text)}</text>`;
+  const position = transformed ? ` x="0" y="0" transform="matrix(${transform?.map(number3).join(" ")} ${number3(anchorX)} ${number3(anchorY)})"` : ` x="${number3(anchorX)}" y="${number3(anchorY)}"`;
+  return `<text${direction}${position} font-size="${number3(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml4(span.text)}</text>`;
 }
 function isAdobeCjkFont(fontFamily) {
   return /^Adobe(?:Heiti|Song|Kaiti|Ming|Gothic|Mincho)Std-/i.test(fontFamily ?? "");
@@ -987,16 +1174,16 @@ function visualType3Text(span, font, pageHeight) {
   const totalAdvance = sequence.reduce((total, glyph) => total + (glyph?.advance ?? 0), 0);
   if (totalAdvance <= 0 || span.bounds.width <= 0 || span.fontSize <= 0) return "";
   const transform = span.transform ?? [1, 0, 0, 1];
-  const outer = `matrix(${transform.map(number2).join(" ")} ${number2(span.bounds.x)} ${number2(pageHeight - span.bounds.y)})`;
+  const outer = `matrix(${transform.map(number3).join(" ")} ${number3(span.bounds.x)} ${number3(pageHeight - span.bounds.y)})`;
   const xScale = span.bounds.width / totalAdvance;
   let offset = 0;
   let content = "";
   for (const glyph of sequence) {
     if (!glyph) continue;
-    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph, span.color)}</g>`;
+    content += `<g transform="translate(${number3(offset)} 0)">${type3Glyph(glyph, span.color)}</g>`;
     offset += glyph.advance;
   }
-  return `<g transform="${outer}"><g transform="scale(${number2(xScale)} ${number2(-span.fontSize)})">${content}</g></g>`;
+  return `<g transform="${outer}"><g transform="scale(${number3(xScale)} ${number3(-span.fontSize)})">${content}</g></g>`;
 }
 function isHebrewPaintOrder(span) {
   return span.direction === "ltr" && /[\u0590-\u05ff]/u.test(span.text);
@@ -1007,30 +1194,27 @@ function usesSpacingAdjustment(span) {
 function type3Glyph(glyph, textColor) {
   let output = "";
   for (const fill of glyph.fills ?? []) {
-    const color = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : fill.color;
-    if (!isCssHexColor(color)) continue;
-    const points = fill.points.map(([x, y]) => `${number2(x)},${number2(y)}`).join(" ");
-    const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number2(fill.opacity)}"` : "";
+    const color = glyph.usesTextColor && isCssHexColor2(textColor) ? textColor : fill.color;
+    if (!isCssHexColor2(color)) continue;
+    const points = fill.points.map(([x, y]) => `${number3(x)},${number3(y)}`).join(" ");
+    const opacity = isUnitInterval2(fill.opacity) ? ` fill-opacity="${number3(fill.opacity)}"` : "";
     output += `<polygon points="${points}" fill="${color}"${opacity}/>`;
   }
   for (const path of glyph.paths ?? []) {
     if (!isSvgPath(path.d)) continue;
-    const fill = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : isCssHexColor(path.fill) ? path.fill : "none";
-    const stroke = glyph.usesTextColor && isCssHexColor(textColor) && path.stroke ? textColor : isCssHexColor(path.stroke) ? path.stroke : "none";
-    const width = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number2(path.strokeWidth)}"` : "";
+    const fill = glyph.usesTextColor && isCssHexColor2(textColor) ? textColor : isCssHexColor2(path.fill) ? path.fill : "none";
+    const stroke = glyph.usesTextColor && isCssHexColor2(textColor) && path.stroke ? textColor : isCssHexColor2(path.stroke) ? path.stroke : "none";
+    const width = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number3(path.strokeWidth)}"` : "";
     output += `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}/>`;
   }
   return (glyph.fills?.length ?? 0) > 64 && glyph.advance > 2 ? `<g shape-rendering="crispEdges">${output}</g>` : output;
 }
-function isCssHexColor(value) {
+function isCssHexColor2(value) {
   return /^#[\da-f]{6}$/i.test(value ?? "");
 }
-function isUnitInterval(value) {
+function isUnitInterval2(value) {
   return Number.isFinite(value) && (value ?? -1) >= 0 && (value ?? 2) <= 1;
 }
-function isSvgPath(value) {
-  return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
-}
 function isMonospace(fontFamily) {
   return /courier|mono/i.test(fontFamily ?? "");
 }
@@ -1048,7 +1232,7 @@ function directionAttribute(spans) {
   if (vertical > rtl && vertical * 2 >= spans.length) return ' data-direction="ttb"';
   return rtl * 2 >= spans.length && spans.length > 0 ? ' dir="rtl"' : "";
 }
-function number2(value) {
+function number3(value) {
   return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
 }
 function escapeAttribute(value) {