quicklook-pptx-renderer 0.1.0

package/dist/mapper/html-generator.d.ts

@@ -0,0 +1,13 @@
+import type { Presentation, QLBleedData } from "../model/types.js";
+import type { PptxPackage } from "../package/package.js";
+export interface MapperOptions {
+    pkg?: PptxPackage;
+    /** QL-extracted bleed data. When provided, injects bleed PDF images at the
+     *  correct z-order positions per slide. Extracted from qlmanage via extractQLBleed(). */
+    qlBleed?: QLBleedData;
+}
+export interface HtmlOutput {
+    html: string;
+    attachments: Map<string, Buffer>;
+}
+export declare function generateHtml(presentation: Presentation, options?: MapperOptions): Promise<HtmlOutput>;

package/dist/mapper/html-generator.js

@@ -0,0 +1,539 @@
+import { StyleBuilder } from "./style-builder.js";
+import { mapSlide } from "./slide-mapper.js";
+import { clearDrawableCache } from "./drawable-mapper.js";
+import { resetAttachmentCounter, nextAttachmentIndex } from "./image-mapper.js";
+import { emuToPx } from "./constants.js";
+// Global CSS matching OfficeImport's output exactly
+const GLOBAL_CSS = `div
+{
+margin-top: 0;
+margin-bottom: 0;
+font-family:Arial, sans-serif;
+}
+ p
+{
+margin-top: 0;
+margin-bottom: 0;
+word-wrap:break-word;
+}
+table
+{
+border-collapse: collapse;
+border-color: black;
+border-style: solid;
+border-width: thin;
+}
+td
+{
+word-wrap:break-word;
+font-family:Arial;
+vertical-align:top;
+border-style: solid;
+border-width: thin;
+}
+div.slide
+{
+position:relative;
+}div.slide, div.loading-slide
+{
+overflow:hidden;
+page-break-inside: avoid;
+margin-top: 5px;
+}
+div.slide:first-of-type {
+  margin-top: 0;
+}
+div.loading-slide
+{
+position: absolute;
+background:#BBBBBB;
+}
+@media screen {
+body {
+background: #ACB2BB;
+}
+div.slide
+{
+-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
+}
+div.slide, div.loading-slide
+{
+margin-left: 8px;
+margin-right: 8px;
+}}`;
+export async function generateHtml(presentation, options) {
+    const attachments = new Map();
+    resetAttachmentCounter();
+    clearDrawableCache();
+    // Derive slide pixel dimensions from the presentation's slide size (EMU → px)
+    const slideWidthPx = emuToPx(presentation.slideSize.cx);
+    const slideHeightPx = emuToPx(presentation.slideSize.cy);
+    const qlBleed = options?.qlBleed;
+    const styles = new StyleBuilder();
+    const slideParts = [];
+    let styleIndex = 0;
+    for (let i = 0; i < presentation.slides.length; i++) {
+        const slide = presentation.slides[i];
+        const master = slide.slideLayout.slideMaster;
+        const colorMap = slide.colorMapOverride
+            ?? slide.slideLayout.colorMapOverride
+            ?? master.colorMap;
+        const colorScheme = master.theme.colorScheme;
+        const fontScheme = master.theme.fontScheme;
+        const imageRels = new Map();
+        const slidePath = `ppt/slides/slide${i + 1}.xml`;
+        if (options?.pkg) {
+            try {
+                const rels = await options.pkg.getRelationships(slidePath);
+                for (const [rId, rel] of rels) {
+                    if (rel.type === "image") {
+                        const imgPath = options.pkg.resolveRelTarget(slidePath, rel.target);
+                        const buf = await options.pkg.getPartBuffer(imgPath);
+                        if (buf)
+                            imageRels.set(rId, buf);
+                    }
+                }
+                // Resolve chart/SmartArt/OLE fallback images for GraphicFrames
+                await resolveGraphicFrameFallbacks(slide, rels, slidePath, options.pkg);
+                // Resolve background image fill
+                await resolveBackgroundImageFill(slide, rels, slidePath, options.pkg);
+                // Resolve image fill blip data for shapes with picture fills
+                await resolveImageFills(slide.drawables, rels, slidePath, options.pkg);
+                // Also resolve image fills for layout and master drawables
+                // Follow slide → layout → master relationship chain
+                const layoutRel = [...rels.values()].find(r => r.type === "slideLayout");
+                if (layoutRel) {
+                    const layoutPath = options.pkg.resolveRelTarget(slidePath, layoutRel.target);
+                    try {
+                        const layoutRels = await options.pkg.getRelationships(layoutPath);
+                        await resolveImageFills(slide.slideLayout.drawables, layoutRels, layoutPath, options.pkg);
+                        const masterRel = [...layoutRels.values()].find(r => r.type === "slideMaster");
+                        if (masterRel) {
+                            const masterPath = options.pkg.resolveRelTarget(layoutPath, masterRel.target);
+                            try {
+                                const masterRels = await options.pkg.getRelationships(masterPath);
+                                await resolveImageFills(slide.slideLayout.slideMaster.drawables, masterRels, masterPath, options.pkg);
+                            }
+                            catch { /* master rels might not exist */ }
+                        }
+                    }
+                    catch { /* layout rels might not exist */ }
+                }
+            }
+            catch { /* slide rels might not exist */ }
+        }
+        styles.reset(styleIndex);
+        const ctx = {
+            colorMap, colorScheme, fontScheme,
+            styleMatrix: master.theme.styleMatrix,
+            slide, pkg: options?.pkg,
+            slideIndex: i, slidePath, imageRels,
+        };
+        let slideContent = mapSlide(slide, presentation, styles, attachments, ctx, slideWidthPx, slideHeightPx);
+        // ── QL bleed injection ──
+        // 1. Remove own elements that QL replaced with bleed
+        // 2. Insert bleed PDF <img> tags at the correct z-order positions
+        const slideRemovals = qlBleed?.removals.get(i);
+        if (slideRemovals && slideRemovals.length > 0) {
+            slideContent = removeReplacedElements(slideContent, slideRemovals, attachments);
+        }
+        const slideBleed = qlBleed?.entries.get(i);
+        if (slideBleed && slideBleed.length > 0) {
+            slideContent = injectSlideBleed(slideContent, slideBleed, qlBleed, attachments);
+        }
+        const slideStyleSheet = styles.getStyleSheet();
+        styleIndex = styles.nextIndex;
+        slideParts.push(`<style type="text/css">\n${slideStyleSheet}\n</style>` +
+            `<div class="slide" style="top:0; left:0;">${slideContent}</div>`);
+    }
+    const viewportWidth = slideWidthPx + 16; // slide + 8px margin each side
+    const sizeCss = `div.slide, div.loading-slide { width: ${slideWidthPx}; height: ${slideHeightPx};}`;
+    const html = [
+        `<html><head><meta charset="utf-8">`,
+        `<meta name="viewport" content="width=${viewportWidth}, maximum-scale=4.0">`,
+        `<style type="text/css">@media print {\ndiv.loading-slide {\ndisplay: none;\n}\n}\n${GLOBAL_CSS}</style>`,
+        `<style type="text/css">${sizeCss}</style>`,
+        `</head><body>`,
+        ...slideParts,
+        `</body></html>`,
+    ].join("");
+    return { html, attachments };
+}
+/**
+ * Resolve fallback images for chart/SmartArt/OLE GraphicFrames.
+ * QuickLook (OfficeImport) renders these using pre-generated fallback images stored in the PPTX,
+ * NOT by parsing chart XML or diagram definitions.
+ *
+ * Chart: slide rels → chart part path → chart rels → image
+ * SmartArt: slide rels → drawing part path → drawing rels → image
+ * OLE: slide rels → oleObject → embedded image (typically via mc:AlternateContent)
+ */
+async function resolveGraphicFrameFallbacks(slide, slideRels, slidePath, pkg) {
+    for (const d of allDrawables(slide.drawables)) {
+        if (d.drawableType !== "graphicFrame")
+            continue;
+        const gf = d;
+        if (gf.tableData || gf.fallbackImageData)
+            continue;
+        // Try chart fallback image, then parse chart XML
+        if (gf.chartRId) {
+            const chartRel = slideRels.get(gf.chartRId);
+            if (chartRel) {
+                const chartPath = pkg.resolveRelTarget(slidePath, chartRel.target);
+                const img = await findFallbackImage(chartPath, pkg);
+                if (img) {
+                    gf.fallbackImageData = img;
+                    continue;
+                }
+                // No fallback — parse chart XML for direct rendering
+                const chartXml = await pkg.getPartXml(chartPath);
+                if (chartXml) {
+                    const cd = parseChartData(chartXml);
+                    if (cd) {
+                        gf.chartData = cd;
+                        continue;
+                    }
+                }
+            }
+        }
+        // Try SmartArt fallback — look for the drawing (dm) relationship, then its image
+        if (gf.smartArtRId) {
+            const dmRel = slideRels.get(gf.smartArtRId);
+            if (dmRel) {
+                const dmPath = pkg.resolveRelTarget(slidePath, dmRel.target);
+                const img = await findFallbackImage(dmPath, pkg);
+                if (img) {
+                    gf.fallbackImageData = img;
+                    continue;
+                }
+            }
+        }
+        // OLE objects: look for image relationship directly in slide rels
+        if (gf.oleRId) {
+            const oleRel = slideRels.get(gf.oleRId);
+            if (oleRel) {
+                // OLE objects often have a sibling image rel
+                for (const [, rel] of slideRels) {
+                    if (rel.type === "image") {
+                        const imgPath = pkg.resolveRelTarget(slidePath, rel.target);
+                        const buf = await pkg.getPartBuffer(imgPath);
+                        if (buf) {
+                            gf.fallbackImageData = buf;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/** Find a fallback image by following the relationship chain of a part (chart/diagram). */
+async function findFallbackImage(partPath, pkg) {
+    try {
+        const rels = await pkg.getRelationships(partPath);
+        // Look for image relationship type
+        for (const [, rel] of rels) {
+            if (rel.type === "image") {
+                const imgPath = pkg.resolveRelTarget(partPath, rel.target);
+                const buf = await pkg.getPartBuffer(imgPath);
+                if (buf)
+                    return buf;
+            }
+        }
+        // Some charts store the fallback as "oleObject" or "userShapes" with an image
+        // Also check for a preview image in the chart directory
+        for (const [, rel] of rels) {
+            if ((rel.target.includes("media/") || rel.target.endsWith(".png") || rel.target.endsWith(".emf")) && !rel.target.endsWith(".xlsx")) {
+                const imgPath = pkg.resolveRelTarget(partPath, rel.target);
+                const buf = await pkg.getPartBuffer(imgPath);
+                if (buf)
+                    return buf;
+            }
+        }
+    }
+    catch { /* part rels don't exist */ }
+    return null;
+}
+/** Parse chart XML into ChartData structure. */
+function parseChartData(xml) {
+    const chart = xml.chartSpace?.chart ?? xml.chart;
+    if (!chart)
+        return null;
+    const plotArea = chart.plotArea;
+    if (!plotArea)
+        return null;
+    // Detect chart type
+    const toArray = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
+    let type = "bar";
+    let direction = "col";
+    let grouping = "clustered";
+    let chartNode = null;
+    if (plotArea.barChart) {
+        chartNode = plotArea.barChart;
+        type = "bar";
+        direction = chartNode["barDir"]?.["@_val"] ?? chartNode["@_barDir"] ?? "col";
+    }
+    else if (plotArea.bar3DChart) {
+        chartNode = plotArea.bar3DChart;
+        type = "bar";
+        direction = chartNode["barDir"]?.["@_val"] ?? "col";
+    }
+    else if (plotArea.lineChart) {
+        chartNode = plotArea.lineChart;
+        type = "line";
+    }
+    else if (plotArea.pieChart) {
+        chartNode = plotArea.pieChart;
+        type = "pie";
+    }
+    else if (plotArea.areaChart) {
+        chartNode = plotArea.areaChart;
+        type = "area";
+    }
+    else if (plotArea.scatterChart) {
+        chartNode = plotArea.scatterChart;
+        type = "scatter";
+    }
+    else
+        return null;
+    if (chartNode.grouping)
+        grouping = chartNode.grouping["@_val"] ?? chartNode.grouping ?? "clustered";
+    const serNodes = toArray(chartNode.ser);
+    if (serNodes.length === 0)
+        return null;
+    // Parse categories from first series
+    let categories = [];
+    const catRef = serNodes[0].cat;
+    if (catRef?.strRef?.strCache) {
+        categories = toArray(catRef.strRef.strCache.pt).map((pt) => String(pt.v ?? ""));
+    }
+    else if (catRef?.numRef?.numCache) {
+        categories = toArray(catRef.numRef.numCache.pt).map((pt) => String(pt.v ?? ""));
+    }
+    // Parse series
+    const series = serNodes.map((ser) => {
+        let name = "";
+        if (ser.tx?.strRef?.strCache?.pt) {
+            const pts = toArray(ser.tx.strRef.strCache.pt);
+            name = String(pts[0]?.v ?? "");
+        }
+        else if (ser.tx?.v) {
+            name = String(ser.tx.v);
+        }
+        let values = [];
+        if (ser.val?.numRef?.numCache) {
+            values = toArray(ser.val.numRef.numCache.pt).map((pt) => Number(pt.v ?? 0));
+        }
+        return { name, values };
+    });
+    // Parse legend position
+    const legend = chart.legend;
+    const legendPos = legend?.legendPos?.["@_val"];
+    return { type, direction, grouping, categories, series, legendPos };
+}
+/** Flatten all drawables including nested group children. */
+function allDrawables(drawables) {
+    const result = [];
+    for (const d of drawables) {
+        result.push(d);
+        if (d.drawableType === "grpSp") {
+            result.push(...allDrawables(d.children));
+        }
+    }
+    return result;
+}
+/** Resolve background image fill for a slide. */
+async function resolveBackgroundImageFill(slide, slideRels, slidePath, pkg) {
+    const bg = slide.background
+        ?? slide.slideLayout.background
+        ?? slide.slideLayout.slideMaster.background;
+    if (bg?.fill?.type === "image" && bg.fill.blipRId && !bg.fill.blipData) {
+        // Try slide rels first, then layout/master rels
+        const rId = bg.fill.blipRId;
+        const paths = await resolveLayoutMasterPaths(slideRels, slidePath, pkg);
+        // Try each level: slide → layout → master
+        for (const { path, rels: relsPromise } of [
+            { path: slidePath, rels: Promise.resolve(slideRels) },
+            ...(paths.layoutPath ? [{ path: paths.layoutPath, rels: pkg.getRelationships(paths.layoutPath).catch(() => new Map()) }] : []),
+            ...(paths.masterPath ? [{ path: paths.masterPath, rels: pkg.getRelationships(paths.masterPath).catch(() => new Map()) }] : []),
+        ]) {
+            const rels = await relsPromise;
+            const rel = rels.get(rId);
+            if (rel) {
+                const imgPath = pkg.resolveRelTarget(path, rel.target);
+                const buf = await pkg.getPartBuffer(imgPath);
+                if (buf) {
+                    bg.fill.blipData = buf;
+                    return;
+                }
+            }
+        }
+    }
+}
+/** Resolve image fill blipRId → blipData for shapes with picture fills. */
+async function resolveImageFills(drawables, rels, partPath, pkg) {
+    for (const d of allDrawables(drawables)) {
+        const fill = d.fill;
+        if (fill?.type === "image" && fill.blipRId && !fill.blipData) {
+            const rel = rels.get(fill.blipRId);
+            if (rel) {
+                const imgPath = pkg.resolveRelTarget(partPath, rel.target);
+                const buf = await pkg.getPartBuffer(imgPath);
+                if (buf)
+                    fill.blipData = buf;
+            }
+        }
+    }
+}
+/** Resolve layout and master paths from a slide's relationships. */
+async function resolveLayoutMasterPaths(slideRels, slidePath, pkg) {
+    const layoutRel = [...slideRels.values()].find(r => r.type === "slideLayout");
+    if (!layoutRel)
+        return {};
+    const layoutPath = pkg.resolveRelTarget(slidePath, layoutRel.target);
+    try {
+        const layoutRels = await pkg.getRelationships(layoutPath);
+        const masterRel = [...layoutRels.values()].find(r => r.type === "slideMaster");
+        if (masterRel) {
+            const masterPath = pkg.resolveRelTarget(layoutPath, masterRel.target);
+            return { layoutPath, masterPath };
+        }
+        return { layoutPath };
+    }
+    catch {
+        return { layoutPath };
+    }
+}
+/**
+ * Remove own elements that were replaced by bleed in QL output.
+ * These are elements in our HTML that QL doesn't have (cache hit replaced them).
+ */
+function removeReplacedElements(slideHtml, removals, attachments) {
+    const elements = parseTopLevelElementStrings(slideHtml);
+    const kept = [];
+    for (const el of elements) {
+        // Check if this element should be removed
+        const styleMatch = el.match(/style="([^"]+)"/);
+        if (styleMatch) {
+            const pos = parseBleedPos(styleMatch[1]);
+            if (pos) {
+                const shouldRemove = removals.some(r => Math.abs(r.pos.top - pos.top) <= 2 &&
+                    Math.abs(r.pos.left - pos.left) <= 2 &&
+                    Math.abs(r.pos.width - pos.width) <= 2 &&
+                    Math.abs(r.pos.height - pos.height) <= 2);
+                if (shouldRemove) {
+                    // Also remove the attachment file to keep numbering clean
+                    const srcMatch = el.match(/src="([^"]+)"/);
+                    if (srcMatch)
+                        attachments.delete(srcMatch[1]);
+                    continue; // skip this element
+                }
+            }
+        }
+        kept.push(el);
+    }
+    return kept.join("");
+}
+/** Parse position from style string (used by removeReplacedElements). */
+function parseBleedPos(style) {
+    const t = style.match(/top:\s*(-?\d+)/);
+    const l = style.match(/left:\s*(-?\d+)/);
+    const w = style.match(/width:\s*(-?\d+)/);
+    const h = style.match(/height:\s*(-?\d+)/);
+    if (!t || !l || !w || !h)
+        return null;
+    return { top: +t[1], left: +l[1], width: +w[1], height: +h[1] };
+}
+/**
+ * Inject bleed PDF <img> tags into a slide's rendered HTML.
+ *
+ * Bleed entries specify afterOwnElement: the number of own (non-bleed)
+ * elements after which to insert each bleed <img>.
+ *
+ * Works by parsing the slide HTML into top-level elements, inserting
+ * bleed entries at the correct positions, and reassembling.
+ */
+function injectSlideBleed(slideHtml, bleedEntries, bleedData, attachments) {
+    // Parse slide HTML into top-level element strings
+    const elements = parseTopLevelElementStrings(slideHtml);
+    // Group bleed entries by afterOwnElement position
+    const bleedByPos = new Map();
+    for (const entry of bleedEntries) {
+        const list = bleedByPos.get(entry.afterOwnElement) ?? [];
+        list.push(entry);
+        bleedByPos.set(entry.afterOwnElement, list);
+    }
+    // Rebuild with bleed injected
+    const result = [];
+    // Inject any bleeds before all own elements (afterOwnElement = 0)
+    const before = bleedByPos.get(0);
+    if (before) {
+        for (const b of before)
+            result.push(makeBleedImg(b, bleedData, attachments));
+    }
+    for (let i = 0; i < elements.length; i++) {
+        result.push(elements[i]);
+        const after = bleedByPos.get(i + 1);
+        if (after) {
+            for (const b of after)
+                result.push(makeBleedImg(b, bleedData, attachments));
+        }
+    }
+    return result.join("");
+}
+/** Create an <img> tag for a bleed entry, adding the PDF to attachments. */
+function makeBleedImg(entry, bleedData, attachments) {
+    const pdfBuf = bleedData.pdfs.get(entry.style);
+    if (!pdfBuf)
+        return "";
+    const idx = nextAttachmentIndex();
+    const name = `Attachment${idx}.pdf`;
+    attachments.set(name, pdfBuf);
+    return `<img src="${name}" style="${entry.style}">`;
+}
+/**
+ * Parse slide HTML into an array of top-level element strings.
+ * Tracks div nesting depth to find element boundaries.
+ */
+function parseTopLevelElementStrings(html) {
+    const elements = [];
+    let depth = 0;
+    let i = 0;
+    let elemStart = -1;
+    while (i < html.length) {
+        if (html[i] !== '<') {
+            i++;
+            continue;
+        }
+        if (html[i + 1] === '/') {
+            const end = html.indexOf('>', i);
+            if (end === -1)
+                break;
+            depth--;
+            if (depth === 0 && elemStart >= 0) {
+                elements.push(html.substring(elemStart, end + 1));
+                elemStart = -1;
+            }
+            i = end + 1;
+            continue;
+        }
+        const tagEnd = html.indexOf('>', i);
+        if (tagEnd === -1)
+            break;
+        const tag = html.substring(i, tagEnd + 1);
+        const selfClose = tag.startsWith('<img ') || tag.startsWith('<col ') ||
+            tag.startsWith('<br') || tag.endsWith('/>');
+        if (depth === 0) {
+            if (selfClose) {
+                elements.push(tag);
+                i = tagEnd + 1;
+                continue;
+            }
+            elemStart = i;
+        }
+        if (!selfClose)
+            depth++;
+        i = tagEnd + 1;
+    }
+    return elements;
+}

package/dist/mapper/image-mapper.d.ts

@@ -0,0 +1,14 @@
+import type { Picture, ColorMap, ColorScheme, FontScheme } from "../model/types.js";
+import type { PptxPackage } from "../package/package.js";
+import type { StyleBuilder } from "./style-builder.js";
+export interface ImageMapperContext {
+    colorMap: ColorMap;
+    colorScheme: ColorScheme;
+    fontScheme: FontScheme;
+    pkg?: PptxPackage;
+    slidePath: string;
+    imageRels: Map<string, Buffer>;
+}
+export declare function resetAttachmentCounter(): void;
+export declare function nextAttachmentIndex(): number;
+export declare function mapPicture(pic: Picture, _styles: StyleBuilder, attachments: Map<string, Buffer>, ctx: ImageMapperContext): string;

package/dist/mapper/image-mapper.js

@@ -0,0 +1,70 @@
+import { emuToPx } from "./constants.js";
+let attachmentCounter = 1; // OfficeImport starts at Attachment1 (confirmed by probes)
+export function resetAttachmentCounter() {
+    attachmentCounter = 1;
+}
+export function nextAttachmentIndex() {
+    return attachmentCounter++;
+}
+export function mapPicture(pic, _styles, attachments, ctx) {
+    const b = pic.bounds;
+    if (!b)
+        return "";
+    // Resolve image data: pre-resolved buffer or from relationships
+    const data = pic.blipData ?? (pic.blipRId ? ctx.imageRels.get(pic.blipRId) : undefined);
+    if (!data)
+        return "";
+    // Detect format from magic bytes
+    const ext = detectImageExt(data);
+    const name = `Attachment${nextAttachmentIndex()}.${ext}`;
+    attachments.set(name, data);
+    // Handle rotation — OfficeImport computes AABB for rotated pictures (same as shapes)
+    const rot = b.rot;
+    if (rot && rot !== 0) {
+        const rad = (rot / 60000) * (Math.PI / 180);
+        const cosA = Math.abs(Math.cos(rad));
+        const sinA = Math.abs(Math.sin(rad));
+        const aabbW_emu = b.cx * cosA + b.cy * sinA;
+        const aabbH_emu = b.cx * sinA + b.cy * cosA;
+        const cx_emu = b.x + b.cx / 2;
+        const cy_emu = b.y + b.cy / 2;
+        const imgX = emuToPx(cx_emu - aabbW_emu / 2);
+        const imgY = emuToPx(cy_emu - aabbH_emu / 2);
+        const imgW = emuToPx(aabbW_emu);
+        const imgH = emuToPx(aabbH_emu);
+        return `<img src="${name}" style="position:absolute; top:${imgY}; left:${imgX}; width:${imgW}; height:${imgH};">`;
+    }
+    const x = emuToPx(b.x);
+    const y = emuToPx(b.y);
+    const w = emuToPx(b.cx);
+    const h = emuToPx(b.cy);
+    // Cropping: blipFill stretch fillRect defines crop percentages (0-100000)
+    const fill = pic.fill;
+    if (fill?.type === "image" && fill.stretch?.fillRect) {
+        const cr = fill.stretch.fillRect;
+        const hasClip = (cr.l ?? 0) > 0 || (cr.t ?? 0) > 0 || (cr.r ?? 0) > 0 || (cr.b ?? 0) > 0;
+        if (hasClip) {
+            // OfficeImport applies cropping by adjusting the image bounds and using CSS clip
+            const clipL = (cr.l ?? 0) / 100000;
+            const clipT = (cr.t ?? 0) / 100000;
+            const clipR = (cr.r ?? 0) / 100000;
+            const clipB = (cr.b ?? 0) / 100000;
+            // CSS clip-path with inset
+            const clipCss = `clip-path:inset(${(clipT * 100).toFixed(1)}% ${(clipR * 100).toFixed(1)}% ${(clipB * 100).toFixed(1)}% ${(clipL * 100).toFixed(1)}%)`;
+            return `<img src="${name}" style="position:absolute; top:${y}; left:${x}; width:${w}; height:${h}; ${clipCss};">`;
+        }
+    }
+    return `<img src="${name}" style="position:absolute; top:${y}; left:${x}; width:${w}; height:${h};">`;
+}
+function detectImageExt(buf) {
+    if (buf[0] === 0x89 && buf[1] === 0x50)
+        return "png";
+    if (buf[0] === 0xFF && buf[1] === 0xD8)
+        return "jpeg";
+    if (buf[0] === 0x47 && buf[1] === 0x49)
+        return "gif";
+    if (buf.length > 4 && buf.slice(0, 4).toString("ascii") === "RIFF")
+        return "webp";
+    // SVG/EMF/WMF — treat as png for attachment purposes
+    return "png";
+}