quicklook-pptx-renderer 0.1.0

package/dist/mapper/shape-mapper.js

@@ -0,0 +1,2384 @@
+import { resolveColor } from "../resolve/color-resolver.js";
+import { emuToPx } from "./constants.js";
+import { mapTextBody } from "./text-mapper.js";
+import { nextAttachmentIndex } from "./image-mapper.js";
+// Fixed padding OfficeImport adds around PDF shape renders (20px each side)
+export const PDF_PADDING = 20;
+// Geometry presets supported by CMCanonicalShapeBuilder (from runtime dump).
+// Unsupported presets (cloud, heart, etc.) are silently skipped by OfficeImport.
+// All geometry presets that CMCanonicalShapeBuilder supports.
+// OfficeImport renders ALL of these as PDF (except rect without rotation which is CSS).
+// Unsupported presets not in this set are silently skipped.
+// Exactly 60 presets verified via runtime probing of CMCanonicalShapeBuilder.copyShapeWithTransform:
+// Shapes NOT in this set are silently skipped by OfficeImport (nil CGPathRef → no <img> tag).
+export const SUPPORTED_GEOMETRIES = new Set([
+    // Basic shapes (20)
+    "rect", "roundRect", "ellipse", "diamond", "triangle", "rtTriangle",
+    "parallelogram", "trapezoid", "hexagon", "octagon", "plus", "pentagon",
+    "chevron", "homePlate", "cube", "can",
+    // Stars (7)
+    "star4", "star5", "star6", "star7", "star8",
+    "star10", "star12", "star16", "star24", "star32",
+    // Callouts (4) — only wedge callouts + borderCallout1; all others → nil
+    "wedgeRectCallout", "wedgeRoundRectCallout", "wedgeEllipseCallout",
+    "borderCallout1", "cloudCallout",
+    // Block arrows (15) — no bent/curved/striped/notched/uturn
+    "rightArrow", "leftArrow", "upArrow", "downArrow",
+    "leftRightArrow", "upDownArrow", "quadArrow", "leftRightUpArrow",
+    "circularArrow",
+    "rightArrowCallout", "leftArrowCallout", "upArrowCallout", "downArrowCallout",
+    "leftRightArrowCallout", "upDownArrowCallout", "quadArrowCallout",
+    // Flowchart (2) — only these two; all others → nil
+    "flowChartAlternateProcess", "flowChartDecision",
+    // Connectors (10)
+    "line", "straightConnector1",
+    "bentConnector2", "bentConnector3", "bentConnector4", "bentConnector5",
+    "curvedConnector2", "curvedConnector3", "curvedConnector4", "curvedConnector5",
+    // Scrolls (1) — only verticalScroll; horizontalScroll → nil
+    "verticalScroll",
+]);
+export function mapShape(shape, styles, attachments, ctx) {
+    const b = shape.bounds;
+    if (!b)
+        return "";
+    const x = emuToPx(b.x);
+    const y = emuToPx(b.y);
+    const w = emuToPx(b.cx);
+    const h = emuToPx(b.cy);
+    const fill = shape.fill;
+    const geom = shape.geometry?.preset ?? "rect";
+    // CSS path: only rect with no rotation. Everything else → PDF.
+    // (Disassembly showed roundRect/ellipse as CSS-eligible, but empirical tests confirm
+    // OfficeImport always renders them as PDF in practice — the CSS check must fail internally.)
+    const isCssPath = geom === "rect" && !(b.rot && b.rot !== 0);
+    const hasText = shape.textBody && shape.textBody.paragraphs.some((p) => p.runs.some((r) => r.type !== "br" && "text" in r && String(r.text ?? "").trim() !== ""));
+    // PDF path: non-rect geometry, or rect with rotation
+    if (!isCssPath) {
+        if (!SUPPORTED_GEOMETRIES.has(geom))
+            return "";
+        const pdfHtml = renderAsPdf(shape, b, attachments, ctx);
+        if (hasText && shape.textBody) {
+            const tb = shapeTextBox(b, geom, shape.geometry?.adjustValues);
+            // OfficeImport swaps text overlay w/h for rotations where the shape's
+            // dominant axis flips (45°-135° mod 180), recomputing position from center.
+            const rotDeg = ((b.rot ?? 0) / 60000) % 180;
+            if (rotDeg >= 45 && rotDeg <= 135) {
+                const cxEmu = tb.x + tb.cx / 2;
+                const cyEmu = tb.y + tb.cy / 2;
+                const newCx = tb.cy; // swap
+                const newCy = tb.cx;
+                tb.x = cxEmu - newCx / 2;
+                tb.y = cyEmu - newCy / 2;
+                tb.cx = newCx;
+                tb.cy = newCy;
+            }
+            const textCtx = { ...ctx, placeholderType: shape.placeholder?.type, fontRefColor: shape.shapeStyle?.fontRef?.color };
+            const textHtml = mapTextBody(shape.textBody, tb, styles, textCtx);
+            const tx = emuToPx(tb.x), ty = emuToPx(tb.y), tw = emuToPx(tb.cx), th = emuToPx(tb.cy);
+            return pdfHtml + `<div style="position:absolute; top:${ty}; left:${tx}; width:${tw}; height:${th};">${textHtml}</div>`;
+        }
+        return pdfHtml;
+    }
+    // Build common style parts for CSS path (rect, roundRect, ellipse without effects)
+    const styleParts = [`position:absolute`, `top:${y}`, `left:${x}`, `width:${w}`, `height:${h}`];
+    const fillCss = fillToCss(fill, ctx, attachments);
+    if (fillCss)
+        styleParts.push(fillCss);
+    // OfficeImport CSS path: renders stroke as thin solid border with actual stroke color.
+    // QL uses the keyword "black" for #000000 in border-color.
+    // Note: QL concatenates border props without space separators
+    // Check explicit stroke first, then fall back to theme lnRef.
+    // Only use theme if shape has NO explicit stroke at all (undefined).
+    // An explicit empty <a:ln/> (stroke set but no fill) overrides theme — no border.
+    if (shape.stroke?.fill?.type === "solid") {
+        const c = rgbaToColor(resolveColor(shape.stroke.fill.color, ctx.colorMap, ctx.colorScheme));
+        const borderColor = c === "#000000" ? "black" : c;
+        styleParts.push(`border-style:solid;border-width:thin;border-color:${borderColor}`);
+    }
+    else if (!shape.stroke && resolveThemeStroke(shape, ctx)) {
+        // OfficeImport CSS path always renders theme-resolved borders as thin/solid/black
+        styleParts.push(`border-style:solid;border-width:thin;border-color:black`);
+    }
+    const style = styleParts.join("; ") + ";";
+    // Text shape
+    if (hasText && shape.textBody) {
+        const textCtx = { ...ctx, placeholderType: shape.placeholder?.type, fontRefColor: shape.shapeStyle?.fontRef?.color };
+        const textHtml = mapTextBody(shape.textBody, b, styles, textCtx);
+        return `<div style="${style}">${textHtml}</div>`;
+    }
+    // Simple filled rect (no text)
+    if (fill && fill.type !== "noFill" && fillCss) {
+        const marginCss = "margin-top:3px; margin-left:7px; margin-bottom:3px; margin-right:7px;";
+        const innerClass = styles.addClass(marginCss);
+        return `<div style="${style}"><div class="${innerClass}"></div></div>`;
+    }
+    // noFill with no text: emit positioned div with margin inner div (matches OfficeImport)
+    const marginCss = "margin-top:3px; margin-left:7px; margin-bottom:3px; margin-right:7px;";
+    const innerClass = styles.addClass(marginCss);
+    return `<div style="${style}"><div class="${innerClass}"></div></div>`;
+}
+function renderAsPdf(shape, bounds, attachments, ctx) {
+    const rot = bounds.rot;
+    let imgX, imgY, imgW, imgH;
+    if (rot && rot !== 0) {
+        // Compute AABB in EMU space, then convert to px — matches OfficeImport precision
+        const rad = (rot / 60000) * (Math.PI / 180);
+        const cosA = Math.abs(Math.cos(rad));
+        const sinA = Math.abs(Math.sin(rad));
+        const aabbW_emu = bounds.cx * cosA + bounds.cy * sinA;
+        const aabbH_emu = bounds.cx * sinA + bounds.cy * cosA;
+        const cx_emu = bounds.x + bounds.cx / 2;
+        const cy_emu = bounds.y + bounds.cy / 2;
+        const aabbX_emu = cx_emu - aabbW_emu / 2;
+        const aabbY_emu = cy_emu - aabbH_emu / 2;
+        // OfficeImport uses round for position, trunc for dimensions
+        imgX = Math.round(aabbX_emu / 12700) - PDF_PADDING;
+        imgY = Math.round(aabbY_emu / 12700) - PDF_PADDING;
+        imgW = emuToPx(aabbW_emu) + PDF_PADDING * 2;
+        imgH = emuToPx(aabbH_emu) + PDF_PADDING * 2;
+    }
+    else {
+        // Compute tight AABB for geometry presets (stars don't fill full bounds)
+        const preset = shape.geometry?.preset ?? "rect";
+        const aabb = geometryAABB(preset);
+        const pathXEmu = bounds.x + aabb.minX * bounds.cx;
+        const pathYEmu = bounds.y + aabb.minY * bounds.cy;
+        const pathWEmu = (aabb.maxX - aabb.minX) * bounds.cx;
+        const pathHEmu = (aabb.maxY - aabb.minY) * bounds.cy;
+        // OfficeImport computes img bounds using exact EMU→pt values:
+        // imgPos = trunc(pos_pt - pad), imgDim = trunc(dim_pt + 2*pad)
+        const pathX_pt = pathXEmu / 12700;
+        const pathY_pt = pathYEmu / 12700;
+        const pathW_pt = pathWEmu / 12700;
+        const pathH_pt = pathHEmu / 12700;
+        imgX = Math.trunc(pathX_pt - PDF_PADDING);
+        imgY = Math.trunc(pathY_pt - PDF_PADDING);
+        imgW = Math.trunc(pathW_pt + PDF_PADDING * 2);
+        imgH = Math.trunc(pathH_pt + PDF_PADDING * 2);
+    }
+    // Generate minimal PDF with the shape rendered
+    const fillColor = fillToColor(shape.fill, ctx) ?? "#000000";
+    const adjustValues = shape.geometry?.adjustValues;
+    // OfficeImport's CMDrawingContext always uses fill+stroke (B operator).
+    // Explicit <a:ln><a:solidFill> → declared color; empty <a:ln/> → thin black default.
+    const strokeInfo = resolveStrokeForPdf(shape, ctx);
+    const shapeRot = bounds.rot ?? 0;
+    // OfficeImport uses exact EMU→pt float dimensions for geometry, not truncated integers
+    const w_pt = bounds.cx / 12700;
+    const h_pt = bounds.cy / 12700;
+    const pdf = generateShapePdf(w_pt, h_pt, shape.geometry?.preset ?? "rect", fillColor, adjustValues, strokeInfo, shapeRot !== 0 ? shapeRot : undefined);
+    const idx = nextAttachmentIndex();
+    const name = `Attachment${idx}.pdf`;
+    attachments.set(name, pdf);
+    return `<img src="${name}" style="position:absolute; top:${imgY}; left:${imgX}; width:${imgW}; height:${imgH};">`;
+}
+/** Generate a minimal PDF buffer containing the shape. */
+function generateShapePdf(w, h, preset, fillColor, adjustValues, stroke, rotation) {
+    const pad = PDF_PADDING;
+    const rad = rotation ? (rotation / 60000) * (Math.PI / 180) : 0;
+    // OfficeImport uses exact EMU→pt float values for MediaBox dimensions.
+    // The img tag uses trunc() of these values, causing a tiny mismatch that's invisible.
+    let pageW, pageH;
+    if (rad !== 0) {
+        const cosA = Math.abs(Math.cos(rad));
+        const sinA = Math.abs(Math.sin(rad));
+        pageW = w * cosA + h * sinA + pad * 2;
+        pageH = w * sinA + h * cosA + pad * 2;
+    }
+    else {
+        pageW = w + pad * 2;
+        pageH = h + pad * 2;
+    }
+    // Draw shape at origin in its own coordinate system (pad, w, h)
+    const shapeH = h + pad * 2;
+    const drawCmd = getShapeDrawCmd(pad, w, h, shapeH, preset, adjustValues);
+    const fHex = fillColor.replace("#", "");
+    const fr = parseInt(fHex.slice(0, 2), 16) / 255;
+    const fg = parseInt(fHex.slice(2, 4), 16) / 255;
+    const fb = parseInt(fHex.slice(4, 6), 16) / 255;
+    // OfficeImport uses B (fill+stroke) with a graphics state that makes the default stroke
+    // sub-pixel invisible. We can't replicate the exact graphics state, so:
+    // - Explicit <a:ln><a:solidFill>: use B with declared color/width
+    // - No explicit stroke: use f (fill-only) which matches the visual output
+    let colorSetup = `${fr.toFixed(3)} ${fg.toFixed(3)} ${fb.toFixed(3)} rg\n`;
+    let finalDrawCmd = drawCmd;
+    if (stroke) {
+        const sr = parseInt(stroke.color.replace("#", "").slice(0, 2), 16) / 255;
+        const sg = parseInt(stroke.color.replace("#", "").slice(2, 4), 16) / 255;
+        const sb = parseInt(stroke.color.replace("#", "").slice(4, 6), 16) / 255;
+        colorSetup = `${sr.toFixed(3)} ${sg.toFixed(3)} ${sb.toFixed(3)} RG\n${stroke.width.toFixed(1)} w\n` + colorSetup;
+        finalDrawCmd = drawCmd.replace(/\bf\b/g, "B");
+    }
+    let stream;
+    if (rad !== 0) {
+        // Rotation CTM: PPTX rotation is CW in screen coords (Y-down).
+        // In PDF coords (Y-up), CW = negative angle, so we negate rad.
+        // Combined: translate(page_center) · rotate(-rad) · translate(-shape_center)
+        const cx = pageW / 2;
+        const cy = pageH / 2;
+        const cosR = Math.cos(-rad);
+        const sinR = Math.sin(-rad);
+        const ox = -(w + pad * 2) / 2;
+        const oy = -(h + pad * 2) / 2;
+        // PDF CTM [a b c d e f]: x' = ax + cy + e, y' = bx + dy + f
+        const a = cosR, b = sinR, c = -sinR, d = cosR;
+        const e = cx + cosR * ox - sinR * oy;
+        const f = cy + sinR * ox + cosR * oy;
+        stream = `q\n${a.toFixed(6)} ${b.toFixed(6)} ${c.toFixed(6)} ${d.toFixed(6)} ${e.toFixed(3)} ${f.toFixed(3)} cm\n${colorSetup}${finalDrawCmd}\nQ`;
+    }
+    else {
+        stream = `${colorSetup}${finalDrawCmd}`;
+    }
+    return buildPdf(pageW, pageH, stream);
+}
+/**
+ * Generate PDF path drawing commands for a shape.
+ * pad = uniform offset from (0,0) where the shape starts in screen coords.
+ * totalH = total height of the coordinate space (needed for Y-flipping).
+ * For standalone shapes: pad=PDF_PADDING, totalH=h+2*pad.
+ * For group children: pad=0, totalH=h (shape draws at origin, caller uses cm to translate).
+ */
+export function getShapeDrawCmd(pad, w, h, totalH, preset, adjustValues) {
+    // Helpers for polygon paths in PDF coordinates (Y flipped: pdfY = totalH - screenY)
+    const py = (sy) => totalH - sy; // screen Y → PDF Y
+    const polyPath = (pts) => {
+        const [first, ...rest] = pts;
+        return [`${first[0]} ${py(first[1])} m`, ...rest.map(([x, y]) => `${x} ${py(y)} l`), "f"].join("\n");
+    };
+    // Like polyPath but returns array of line commands without closing "f" — for composing multi-subpath shapes
+    const polyPathLines = (pts) => {
+        const [first, ...rest] = pts;
+        return [`${first[0]} ${py(first[1])} m`, ...rest.map(([x, y]) => `${x} ${py(y)} l`)];
+    };
+    // Ellipse drawing commands (reusable for shapes that are circles/ellipses)
+    const ellipseCmd = (_pad, _w, _h, _totalH) => {
+        const cx = _pad + _w / 2, cy = _pad + _h / 2;
+        const rx = _w / 2, ry = _h / 2;
+        const k = 0.5522847498;
+        return [
+            `${cx + rx} ${_totalH - cy} m`,
+            `${cx + rx} ${_totalH - (cy - ry * k)} ${cx + rx * k} ${_totalH - (cy - ry)} ${cx} ${_totalH - (cy - ry)} c`,
+            `${cx - rx * k} ${_totalH - (cy - ry)} ${cx - rx} ${_totalH - (cy - ry * k)} ${cx - rx} ${_totalH - cy} c`,
+            `${cx - rx} ${_totalH - (cy + ry * k)} ${cx - rx * k} ${_totalH - (cy + ry)} ${cx} ${_totalH - (cy + ry)} c`,
+            `${cx + rx * k} ${_totalH - (cy + ry)} ${cx + rx} ${_totalH - (cy + ry * k)} ${cx + rx} ${_totalH - cy} c`,
+            "f",
+        ].join("\n");
+    };
+    // Build drawing commands based on geometry
+    // OfficeImport uses fill+stroke (B operator) with a coordinate transform
+    let drawCmd;
+    if (preset === "ellipse") {
+        // Approximate ellipse with bezier curves
+        const cx = pad + w / 2;
+        const cy = pad + h / 2;
+        const rx = w / 2;
+        const ry = h / 2;
+        const k = 0.5522847498; // kappa for circle approximation
+        drawCmd = [
+            `${cx + rx} ${totalH - cy} m`,
+            `${cx + rx} ${totalH - (cy - ry * k)} ${cx + rx * k} ${totalH - (cy - ry)} ${cx} ${totalH - (cy - ry)} c`,
+            `${cx - rx * k} ${totalH - (cy - ry)} ${cx - rx} ${totalH - (cy - ry * k)} ${cx - rx} ${totalH - cy} c`,
+            `${cx - rx} ${totalH - (cy + ry * k)} ${cx - rx * k} ${totalH - (cy + ry)} ${cx} ${totalH - (cy + ry)} c`,
+            `${cx + rx * k} ${totalH - (cy + ry)} ${cx + rx} ${totalH - (cy + ry * k)} ${cx + rx} ${totalH - cy} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "roundRect") {
+        // Corner radius: use adjustValue 'adj' (default 16667 = 16.667% of min dimension)
+        const adjVal = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 16667;
+        const radius = Math.min(w, h) * adjVal / 100000;
+        const x0 = pad, y0 = totalH - pad - h;
+        const x1 = pad + w, y1 = totalH - pad;
+        const rr = radius;
+        drawCmd = [
+            `${x0 + rr} ${y0} m`,
+            `${x1 - rr} ${y0} l`,
+            `${x1} ${y0} ${x1} ${y0 + rr} v`,
+            `${x1} ${y1 - rr} l`,
+            `${x1} ${y1} ${x1 - rr} ${y1} v`,
+            `${x0 + rr} ${y1} l`,
+            `${x0} ${y1} ${x0} ${y1 - rr} v`,
+            `${x0} ${y0 + rr} l`,
+            `${x0} ${y0} ${x0 + rr} ${y0} v`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "diamond") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        drawCmd = polyPath([[cx, pad], [pad + w, cy], [cx, pad + h], [pad, cy]]);
+    }
+    else if (preset === "triangle") {
+        drawCmd = polyPath([[pad + w / 2, pad], [pad + w, pad + h], [pad, pad + h]]);
+    }
+    else if (preset === "rtTriangle") {
+        drawCmd = polyPath([[pad, pad], [pad + w, pad + h], [pad, pad + h]]);
+    }
+    else if (preset === "pentagon") {
+        // Regular pentagon: top vertex at center-top, others at ±54° and ±126° from top
+        const cx = pad + w / 2, top = pad, bot = pad + h;
+        const mid = pad + h * 0.382; // ~38.2% down
+        const pts = [
+            [cx, top],
+            [pad + w, mid],
+            [pad + w * 0.809, bot],
+            [pad + w * 0.191, bot],
+            [pad, mid],
+        ];
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "hexagon") {
+        const adjVal = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const inset = w * adjVal / 100000;
+        const cy = pad + h / 2;
+        drawCmd = polyPath([
+            [pad + inset, pad],
+            [pad + w - inset, pad],
+            [pad + w, cy],
+            [pad + w - inset, pad + h],
+            [pad + inset, pad + h],
+            [pad, cy],
+        ]);
+    }
+    else if (preset === "octagon") {
+        // OfficeImport's CMCanonicalShapeBuilder: uses ss (min dim) for equal-angle cuts
+        // Default adj matches 25000 (ss/4), not OOXML's 29289 (1-1/√2)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const ss = Math.min(w, h);
+        const inset = ss * adj / 100000;
+        drawCmd = polyPath([
+            [pad + inset, pad],
+            [pad + w - inset, pad],
+            [pad + w, pad + inset],
+            [pad + w, pad + h - inset],
+            [pad + w - inset, pad + h],
+            [pad + inset, pad + h],
+            [pad, pad + h - inset],
+            [pad, pad + inset],
+        ]);
+    }
+    else if (preset === "parallelogram") {
+        // OfficeImport's CMCanonicalShapeBuilder: shift = w * adj / 200000 (half of OOXML spec)
+        // Top edge shifted right: top-left at (shift, 0), bottom-left at (0, h)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const shift = w * adj / 200000;
+        drawCmd = polyPath([
+            [pad + shift, pad],
+            [pad + w, pad],
+            [pad + w - shift, pad + h],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "trapezoid") {
+        // OOXML trapezoid: wide at bottom, narrow at top (inset applied to top edge)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const inset = w * adj / 100000;
+        drawCmd = polyPath([
+            [pad + inset, pad],
+            [pad + w - inset, pad],
+            [pad + w, pad + h],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "plus") {
+        // OfficeImport's CMCanonicalShapeBuilder: uses ss (min dim) for both axes
+        // to create square-armed cross regardless of aspect ratio
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const ss = Math.min(w, h);
+        const inset = ss * adj / 100000;
+        const cx1 = pad + inset, cx2 = pad + w - inset;
+        const cy1 = pad + inset, cy2 = pad + h - inset;
+        drawCmd = polyPath([
+            [cx1, pad], [cx2, pad],
+            [cx2, cy1], [pad + w, cy1],
+            [pad + w, cy2], [cx2, cy2],
+            [cx2, pad + h], [cx1, pad + h],
+            [cx1, cy2], [pad, cy2],
+            [pad, cy1], [cx1, cy1],
+        ]);
+    }
+    else if (preset === "star4") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 12500;
+        const ix = w * adj / 100000, iy = h * adj / 100000;
+        drawCmd = polyPath([
+            [cx, pad],
+            [cx + ix, cy - iy], [pad + w, cy],
+            [cx + ix, cy + iy], [cx, pad + h],
+            [cx - ix, cy + iy], [pad, cy],
+            [cx - ix, cy - iy],
+        ]);
+    }
+    else if (preset === "star5") {
+        const cx = pad + w / 2, top = pad, bot = pad + h;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 19098;
+        const innerR_x = outerR_x * adj / 50000;
+        const innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 5; i++) {
+            const outerA = (Math.PI * (-0.5 + i * 2 / 5));
+            pts.push([cx + Math.cos(outerA) * outerR_x, pad + outerR_y + Math.sin(outerA) * outerR_y]);
+            const innerA = (Math.PI * (-0.5 + (i * 2 + 1) / 5));
+            pts.push([cx + Math.cos(innerA) * innerR_x, pad + outerR_y + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star6") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 28868;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 6; i++) {
+            const outerA = Math.PI * (-0.5 + i / 3);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 6);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star8") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 37500;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 8; i++) {
+            const outerA = Math.PI * (-0.5 + i / 4);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 8);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "chevron") {
+        // OfficeImport's CMCanonicalShapeBuilder: notch depth = w * adj / 400000
+        // (quartered vs OOXML spec: both arrow point and notch use this value)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 50000;
+        const notch = w * adj / 400000;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + w - notch, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - notch, pad + h],
+            [pad, pad + h],
+            [pad + notch, pad + h / 2],
+        ]);
+    }
+    else if (preset === "homePlate") {
+        // OfficeImport's CMCanonicalShapeBuilder: arrow start at w*adj/200000 from left
+        // (halved vs OOXML spec), arrow tip at right edge
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 50000;
+        const flat = w * adj / 200000;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + flat, pad],
+            [pad + w, pad + h / 2],
+            [pad + flat, pad + h],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "rightArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        drawCmd = polyPath([
+            [pad, stemTop],
+            [pad + w - headW, stemTop],
+            [pad + w - headW, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h],
+            [pad + w - headW, stemBot],
+            [pad, stemBot],
+        ]);
+    }
+    else if (preset === "leftArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        drawCmd = polyPath([
+            [pad + headW, stemTop],
+            [pad + w, stemTop],
+            [pad + w, stemBot],
+            [pad + headW, stemBot],
+            [pad + headW, pad + h],
+            [pad, pad + h / 2],
+            [pad + headW, pad],
+        ]);
+    }
+    else if (preset === "upArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w, pad + headH],
+            [stemR, pad + headH],
+            [stemR, pad + h],
+            [stemL, pad + h],
+            [stemL, pad + headH],
+            [pad, pad + headH],
+        ]);
+    }
+    else if (preset === "downArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        drawCmd = polyPath([
+            [stemL, pad],
+            [stemR, pad],
+            [stemR, pad + h - headH],
+            [pad + w, pad + h - headH],
+            [pad + w / 2, pad + h],
+            [pad, pad + h - headH],
+            [stemL, pad + h - headH],
+        ]);
+    }
+    else if (preset === "can") {
+        // Cylinder: rectangle body with elliptical top and bottom
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const capH = h * adj / 200000;
+        const k = 0.5522847498;
+        const cx = pad + w / 2, rx = w / 2;
+        // Body rectangle
+        const bodyTop = pad + capH, bodyBot = pad + h - capH;
+        // Bottom ellipse, top ellipse arcs
+        drawCmd = [
+            // Start at left of body top
+            `${pad} ${py(bodyTop)} m`,
+            `${pad} ${py(bodyBot)} l`,
+            // Bottom ellipse (half)
+            `${pad} ${py(bodyBot + capH * k)} ${cx - rx * k} ${py(pad + h)} ${cx} ${py(pad + h)} c`,
+            `${cx + rx * k} ${py(pad + h)} ${pad + w} ${py(bodyBot + capH * k)} ${pad + w} ${py(bodyBot)} c`,
+            `${pad + w} ${py(bodyTop)} l`,
+            // Top ellipse (half, going back)
+            `${pad + w} ${py(bodyTop - capH * k)} ${cx + rx * k} ${py(pad)} ${cx} ${py(pad)} c`,
+            `${cx - rx * k} ${py(pad)} ${pad} ${py(bodyTop - capH * k)} ${pad} ${py(bodyTop)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "cube") {
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const d = Math.min(w, h) * adj / 100000;
+        // Front face + top face + right face as single path
+        drawCmd = polyPath([
+            [pad, pad + d],
+            [pad + d, pad],
+            [pad + w, pad],
+            [pad + w, pad + h - d],
+            [pad + w - d, pad + h],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "wedgeRectCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : -20833;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 62500;
+        const tx = pad + w / 2 + w * adj1 / 100000;
+        const ty = pad + h / 2 + h * adj2 / 100000;
+        const cx = pad + w / 2;
+        drawCmd = polyPath([
+            [pad, pad], [cx - w * 0.05, pad], [tx, ty], [cx + w * 0.05, pad],
+            [pad + w, pad], [pad + w, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "wedgeRoundRectCallout") {
+        // Simplified as rect callout (the rounded corners would need bezier curves)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : -20833;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 62500;
+        const tx = pad + w / 2 + w * adj1 / 100000;
+        const ty = pad + h / 2 + h * adj2 / 100000;
+        const cx = pad + w / 2;
+        drawCmd = polyPath([
+            [pad, pad], [cx - w * 0.05, pad], [tx, ty], [cx + w * 0.05, pad],
+            [pad + w, pad], [pad + w, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "wedgeEllipseCallout") {
+        // Ellipse body with pointer — simplified as ellipse + triangle pointer
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : -20833;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 62500;
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const rx = w / 2, ry = h / 2;
+        const k = 0.5522847498;
+        // Just render as ellipse (pointer is complex to combine in single path)
+        drawCmd = [
+            `${cx + rx} ${totalH - cy} m`,
+            `${cx + rx} ${totalH - (cy - ry * k)} ${cx + rx * k} ${totalH - (cy - ry)} ${cx} ${totalH - (cy - ry)} c`,
+            `${cx - rx * k} ${totalH - (cy - ry)} ${cx - rx} ${totalH - (cy - ry * k)} ${cx - rx} ${totalH - cy} c`,
+            `${cx - rx} ${totalH - (cy + ry * k)} ${cx - rx * k} ${totalH - (cy + ry)} ${cx} ${totalH - (cy + ry)} c`,
+            `${cx + rx * k} ${totalH - (cy + ry)} ${cx + rx} ${totalH - (cy + ry * k)} ${cx + rx} ${totalH - cy} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartAlternateProcess") {
+        // Rounded rectangle (like roundRect with fixed radius)
+        const radius = Math.min(w, h) * 0.16667;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0 + radius} ${y0} m`, `${x1 - radius} ${y0} l`,
+            `${x1} ${y0} ${x1} ${y0 + radius} v`, `${x1} ${y1 - radius} l`,
+            `${x1} ${y1} ${x1 - radius} ${y1} v`, `${x0 + radius} ${y1} l`,
+            `${x0} ${y1} ${x0} ${y1 - radius} v`, `${x0} ${y0 + radius} l`,
+            `${x0} ${y0} ${x0 + radius} ${y0} v`, "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartDecision") {
+        // Diamond shape
+        const cx = pad + w / 2, cy = pad + h / 2;
+        drawCmd = polyPath([[cx, pad], [pad + w, cy], [cx, pad + h], [pad, cy]]);
+    }
+    else if (preset === "flowChartDocument") {
+        // Rectangle with wavy bottom
+        const waveH = h * 0.1;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + w, pad],
+            [pad + w, pad + h - waveH],
+            [pad + w * 0.75, pad + h],
+            [pad + w * 0.5, pad + h - waveH],
+            [pad + w * 0.25, pad + h - waveH * 2],
+            [pad, pad + h - waveH],
+        ]);
+    }
+    else if (preset === "leftRightArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        drawCmd = polyPath([
+            [pad + headW, pad],
+            [pad, pad + h / 2],
+            [pad + headW, pad + h],
+            [pad + headW, stemBot],
+            [pad + w - headW, stemBot],
+            [pad + w - headW, pad + h],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad],
+            [pad + w - headW, stemTop],
+            [pad + headW, stemTop],
+        ]);
+    }
+    else if (preset === "upDownArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w, pad + headH],
+            [stemR, pad + headH],
+            [stemR, pad + h - headH],
+            [pad + w, pad + h - headH],
+            [pad + w / 2, pad + h],
+            [pad, pad + h - headH],
+            [stemL, pad + h - headH],
+            [stemL, pad + headH],
+            [pad, pad + headH],
+        ]);
+    }
+    else if (preset === "notchedRightArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        const notchX = pad + headW; // notch depth matches head width
+        drawCmd = polyPath([
+            [pad, stemTop],
+            [pad + w - headW, stemTop],
+            [pad + w - headW, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h],
+            [pad + w - headW, stemBot],
+            [pad, stemBot],
+            [notchX, pad + h / 2],
+        ]);
+    }
+    else if (preset === "stripedRightArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        // Stripes at tail (simplified as solid arrow body — stripes are decorative)
+        const stripeW = w * 0.05;
+        drawCmd = polyPath([
+            [pad + stripeW * 2, stemTop],
+            [pad + w - headW, stemTop],
+            [pad + w - headW, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h],
+            [pad + w - headW, stemBot],
+            [pad + stripeW * 2, stemBot],
+        ]);
+    }
+    else if (preset === "decagon") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const pts = [];
+        for (let i = 0; i < 10; i++) {
+            const a = Math.PI * (-0.5 + 2 * i / 10);
+            pts.push([cx + Math.cos(a) * w / 2, cy + Math.sin(a) * h / 2]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "heptagon") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const pts = [];
+        for (let i = 0; i < 7; i++) {
+            const a = Math.PI * (-0.5 + 2 * i / 7);
+            pts.push([cx + Math.cos(a) * w / 2, cy + Math.sin(a) * h / 2]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "dodecagon") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const pts = [];
+        for (let i = 0; i < 12; i++) {
+            const a = Math.PI * (-0.5 + 2 * i / 12);
+            pts.push([cx + Math.cos(a) * w / 2, cy + Math.sin(a) * h / 2]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star10") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 42533;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 10; i++) {
+            const outerA = Math.PI * (-0.5 + i / 5);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 10);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star12") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 37500;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 12; i++) {
+            const outerA = Math.PI * (-0.5 + i / 6);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 12);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star16") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 37500;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 16; i++) {
+            const outerA = Math.PI * (-0.5 + i / 8);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 16);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star24") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 37500;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 24; i++) {
+            const outerA = Math.PI * (-0.5 + i / 12);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 24);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "star32") {
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 37500;
+        const outerR_x = w / 2, outerR_y = h / 2;
+        const innerR_x = outerR_x * adj / 50000, innerR_y = outerR_y * adj / 50000;
+        const pts = [];
+        for (let i = 0; i < 32; i++) {
+            const outerA = Math.PI * (-0.5 + i / 16);
+            pts.push([cx + Math.cos(outerA) * outerR_x, cy + Math.sin(outerA) * outerR_y]);
+            const innerA = Math.PI * (-0.5 + (i * 2 + 1) / 32);
+            pts.push([cx + Math.cos(innerA) * innerR_x, cy + Math.sin(innerA) * innerR_y]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "round1Rect") {
+        // Rectangle with one rounded corner (top-right)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 16667;
+        const radius = Math.min(w, h) * adj / 100000;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0} ${y0} m`, `${x1 - radius} ${y0} l`,
+            `${x1} ${y0} ${x1} ${y0 + radius} v`,
+            `${x1} ${y1} l`, `${x0} ${y1} l`, "f",
+        ].join("\n");
+    }
+    else if (preset === "round2SameRect") {
+        // Rectangle with two rounded corners on the same side (top-left, top-right)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 0;
+        const r1 = Math.min(w, h) * adj1 / 100000;
+        const r2 = Math.min(w, h) * adj2 / 100000;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0 + r1} ${y0} m`, `${x1 - r1} ${y0} l`,
+            `${x1} ${y0} ${x1} ${y0 + r1} v`,
+            `${x1} ${y1 - r2} l`,
+            r2 > 0 ? `${x1} ${y1} ${x1 - r2} ${y1} v` : `${x1} ${y1} l`,
+            `${x0 + r2} ${y1} l`,
+            r2 > 0 ? `${x0} ${y1} ${x0} ${y1 - r2} v` : `${x0} ${y1} l`,
+            `${x0} ${y0 + r1} l`,
+            `${x0} ${y0} ${x0 + r1} ${y0} v`, "f",
+        ].join("\n");
+    }
+    else if (preset === "round2DiagRect") {
+        // Rectangle with two rounded corners on diagonal (top-left, bottom-right)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 0;
+        const r1 = Math.min(w, h) * adj1 / 100000;
+        const r2 = Math.min(w, h) * adj2 / 100000;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0 + r1} ${y0} m`, `${x1} ${y0} l`,
+            `${x1} ${y1 - r2} l`,
+            r2 > 0 ? `${x1} ${y1} ${x1 - r2} ${y1} v` : `${x1} ${y1} l`,
+            `${x0} ${y1} l`,
+            `${x0} ${y0 + r1} l`,
+            `${x0} ${y0} ${x0 + r1} ${y0} v`, "f",
+        ].join("\n");
+    }
+    else if (preset === "snip1Rect") {
+        // Rectangle with one snipped corner (top-right)
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 16667;
+        const snip = Math.min(w, h) * adj / 100000;
+        drawCmd = polyPath([
+            [pad, pad], [pad + w - snip, pad], [pad + w, pad + snip],
+            [pad + w, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "snip2SameRect") {
+        // Rectangle with two snipped corners on same side (top-left, top-right)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 16667;
+        const s1 = Math.min(w, h) * adj1 / 100000;
+        const s2 = Math.min(w, h) * adj2 / 100000;
+        drawCmd = polyPath([
+            [pad + s1, pad], [pad + w - s1, pad],
+            [pad + w, pad + s1], [pad + w, pad + h - s2],
+            [pad + w - s2, pad + h], [pad + s2, pad + h],
+            [pad, pad + h - s2], [pad, pad + s1],
+        ]);
+    }
+    else if (preset === "snip2DiagRect") {
+        // Rectangle with two snipped corners on diagonal (top-right, bottom-left)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 0;
+        const s1 = Math.min(w, h) * adj1 / 100000;
+        const s2 = Math.min(w, h) * adj2 / 100000;
+        drawCmd = polyPath([
+            [pad, pad], [pad + w - s1, pad], [pad + w, pad + s1],
+            [pad + w, pad + h], [pad + s2, pad + h], [pad, pad + h - s2],
+        ]);
+    }
+    else if (preset === "snipRoundRect") {
+        // Rectangle with one rounded corner (top-left) and one snipped corner (top-right)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 16667;
+        const rr = Math.min(w, h) * adj1 / 100000;
+        const snip = Math.min(w, h) * adj2 / 100000;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0 + rr} ${y0} m`,
+            `${x1 - snip} ${y0} l`,
+            `${x1} ${y0 + snip} l`,
+            `${x1} ${y1} l`,
+            `${x0} ${y1} l`,
+            `${x0} ${y0 + rr} l`,
+            `${x0} ${y0} ${x0 + rr} ${y0} v`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartInputOutput") {
+        // Parallelogram for I/O (skew ~20%)
+        const skew = w * 0.2;
+        drawCmd = polyPath([
+            [pad + skew, pad], [pad + w, pad],
+            [pad + w - skew, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "flowChartPreparation") {
+        // Hexagon-like (wider at center)
+        const inset = w * 0.2;
+        const cy = pad + h / 2;
+        drawCmd = polyPath([
+            [pad + inset, pad], [pad + w - inset, pad],
+            [pad + w, cy], [pad + w - inset, pad + h],
+            [pad + inset, pad + h], [pad, cy],
+        ]);
+    }
+    else if (preset === "flowChartConnector") {
+        // Circle (ellipse fitting the bounding box)
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const rx = w / 2, ry = h / 2;
+        const k = 0.5522847498;
+        drawCmd = [
+            `${cx + rx} ${totalH - cy} m`,
+            `${cx + rx} ${totalH - (cy - ry * k)} ${cx + rx * k} ${totalH - (cy - ry)} ${cx} ${totalH - (cy - ry)} c`,
+            `${cx - rx * k} ${totalH - (cy - ry)} ${cx - rx} ${totalH - (cy - ry * k)} ${cx - rx} ${totalH - cy} c`,
+            `${cx - rx} ${totalH - (cy + ry * k)} ${cx - rx * k} ${totalH - (cy + ry)} ${cx} ${totalH - (cy + ry)} c`,
+            `${cx + rx * k} ${totalH - (cy + ry)} ${cx + rx} ${totalH - (cy + ry * k)} ${cx + rx} ${totalH - cy} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "mathPlus") {
+        // Plus sign: cross shape (thinner than 'plus' preset — ~27% arm thickness)
+        const t = w * 0.27, s = h * 0.27;
+        const cx1 = pad + (w - t) / 2, cx2 = pad + (w + t) / 2;
+        const cy1 = pad + (h - s) / 2, cy2 = pad + (h + s) / 2;
+        drawCmd = polyPath([
+            [cx1, pad], [cx2, pad],
+            [cx2, cy1], [pad + w, cy1],
+            [pad + w, cy2], [cx2, cy2],
+            [cx2, pad + h], [cx1, pad + h],
+            [cx1, cy2], [pad, cy2],
+            [pad, cy1], [cx1, cy1],
+        ]);
+    }
+    else if (preset === "mathMinus") {
+        // Horizontal bar (rectangle centered vertically)
+        const barH = h * 0.27;
+        const barTop = pad + (h - barH) / 2;
+        drawCmd = polyPath([
+            [pad, barTop], [pad + w, barTop],
+            [pad + w, barTop + barH], [pad, barTop + barH],
+        ]);
+    }
+    else if (preset === "mathMultiply") {
+        // X shape (two crossing diagonal bars — approximated as polygon)
+        const t = Math.min(w, h) * 0.15; // half-thickness of bars
+        const cx = pad + w / 2, cy = pad + h / 2;
+        drawCmd = polyPath([
+            [pad + t, pad], [cx, cy - t], [pad + w - t, pad],
+            [pad + w, pad + t], [cx + t, cy], [pad + w, pad + h - t],
+            [pad + w - t, pad + h], [cx, cy + t], [pad + t, pad + h],
+            [pad, pad + h - t], [cx - t, cy], [pad, pad + t],
+        ]);
+    }
+    else if (preset === "mathDivide") {
+        // Horizontal bar with dots above and below
+        const barH = h * 0.15;
+        const barTop = pad + (h - barH) / 2;
+        const dotR = Math.min(w, h) * 0.1;
+        const cx = pad + w / 2;
+        const k = 0.5522847498;
+        const topDotCy = pad + h * 0.2;
+        const botDotCy = pad + h * 0.8;
+        drawCmd = [
+            // Top dot (ellipse)
+            `${cx + dotR} ${py(topDotCy)} m`,
+            `${cx + dotR} ${py(topDotCy - dotR * k)} ${cx + dotR * k} ${py(topDotCy - dotR)} ${cx} ${py(topDotCy - dotR)} c`,
+            `${cx - dotR * k} ${py(topDotCy - dotR)} ${cx - dotR} ${py(topDotCy - dotR * k)} ${cx - dotR} ${py(topDotCy)} c`,
+            `${cx - dotR} ${py(topDotCy + dotR * k)} ${cx - dotR * k} ${py(topDotCy + dotR)} ${cx} ${py(topDotCy + dotR)} c`,
+            `${cx + dotR * k} ${py(topDotCy + dotR)} ${cx + dotR} ${py(topDotCy + dotR * k)} ${cx + dotR} ${py(topDotCy)} c`,
+            "f",
+            // Bar (rectangle)
+            `${pad} ${py(barTop)} m`,
+            `${pad + w} ${py(barTop)} l`,
+            `${pad + w} ${py(barTop + barH)} l`,
+            `${pad} ${py(barTop + barH)} l`,
+            "f",
+            // Bottom dot (ellipse)
+            `${cx + dotR} ${py(botDotCy)} m`,
+            `${cx + dotR} ${py(botDotCy - dotR * k)} ${cx + dotR * k} ${py(botDotCy - dotR)} ${cx} ${py(botDotCy - dotR)} c`,
+            `${cx - dotR * k} ${py(botDotCy - dotR)} ${cx - dotR} ${py(botDotCy - dotR * k)} ${cx - dotR} ${py(botDotCy)} c`,
+            `${cx - dotR} ${py(botDotCy + dotR * k)} ${cx - dotR * k} ${py(botDotCy + dotR)} ${cx} ${py(botDotCy + dotR)} c`,
+            `${cx + dotR * k} ${py(botDotCy + dotR)} ${cx + dotR} ${py(botDotCy + dotR * k)} ${cx + dotR} ${py(botDotCy)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "mathEqual") {
+        // Two horizontal bars
+        const barH = h * 0.15;
+        const gap = h * 0.12;
+        const topBar = pad + h / 2 - gap / 2 - barH;
+        const botBar = pad + h / 2 + gap / 2;
+        drawCmd = [
+            `${pad} ${py(topBar)} m`, `${pad + w} ${py(topBar)} l`,
+            `${pad + w} ${py(topBar + barH)} l`, `${pad} ${py(topBar + barH)} l`, "f",
+            `${pad} ${py(botBar)} m`, `${pad + w} ${py(botBar)} l`,
+            `${pad + w} ${py(botBar + barH)} l`, `${pad} ${py(botBar + barH)} l`, "f",
+        ].join("\n");
+    }
+    else if (preset === "mathNotEqual") {
+        // Two horizontal bars with a diagonal slash through them
+        const barH = h * 0.15;
+        const gap = h * 0.12;
+        const topBar = pad + h / 2 - gap / 2 - barH;
+        const botBar = pad + h / 2 + gap / 2;
+        const slashW = w * 0.08;
+        const cx = pad + w / 2;
+        drawCmd = [
+            `${pad} ${py(topBar)} m`, `${pad + w} ${py(topBar)} l`,
+            `${pad + w} ${py(topBar + barH)} l`, `${pad} ${py(topBar + barH)} l`, "f",
+            `${pad} ${py(botBar)} m`, `${pad + w} ${py(botBar)} l`,
+            `${pad + w} ${py(botBar + barH)} l`, `${pad} ${py(botBar + barH)} l`, "f",
+            // Diagonal slash
+            `${cx - slashW / 2} ${py(pad)} m`, `${cx + slashW / 2} ${py(pad)} l`,
+            `${cx + slashW / 2 - w * 0.15} ${py(pad + h)} l`, `${cx - slashW / 2 - w * 0.15} ${py(pad + h)} l`, "f",
+        ].join("\n");
+    }
+    else if (preset === "quadArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 22500;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 22500;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 22500;
+        const stemW = w * adj1 / 100000;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const headH = h * adj2 / 100000;
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const sL = cx - stemW / 2, sR = cx + stemW / 2;
+        const sT = cy - stemH / 2, sB = cy + stemH / 2;
+        drawCmd = polyPath([
+            // Up arrow head
+            [cx, pad], [pad + w / 2 + headW / 2, pad + headH], [sR, pad + headH],
+            // Right arrow head
+            [sR, sT], [pad + w - headH, sT], [pad + w - headH, cy - headW / 2],
+            [pad + w, cy], [pad + w - headH, cy + headW / 2], [pad + w - headH, sB],
+            // Down arrow head
+            [sR, sB], [sR, pad + h - headH], [cx + headW / 2, pad + h - headH],
+            [cx, pad + h], [cx - headW / 2, pad + h - headH], [sL, pad + h - headH],
+            // Left arrow head
+            [sL, sB], [pad + headH, sB], [pad + headH, cy + headW / 2],
+            [pad, cy], [pad + headH, cy - headW / 2], [pad + headH, sT],
+            [sL, sT], [sL, pad + headH], [cx - headW / 2, pad + headH],
+        ]);
+    }
+    else if (preset === "leftRightUpArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const stemW = w * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const headH = h * adj3 / 100000;
+        const stemH = h * adj1 / 100000;
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const sL = cx - stemW / 2, sR = cx + stemW / 2;
+        const sT = cy - stemH / 2;
+        drawCmd = polyPath([
+            // Up arrow
+            [cx, pad], [cx + headW / 2, pad + headH], [sR, pad + headH],
+            // Right
+            [sR, sT], [pad + w - headH, sT], [pad + w - headH, cy - headW / 2],
+            [pad + w, cy], [pad + w - headH, cy + headW / 2], [pad + w - headH, pad + h],
+            // Bottom
+            [pad + headH, pad + h],
+            // Left
+            [pad + headH, cy + headW / 2], [pad, cy], [pad + headH, cy - headW / 2],
+            [pad + headH, sT],
+            [sL, sT], [sL, pad + headH], [cx - headW / 2, pad + headH],
+        ]);
+    }
+    else if (preset === "bentArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 43750;
+        const headW = w * adj2 / 100000;
+        const headH = h * adj1 / 100000;
+        const stemW = w * adj3 / 100000;
+        const bendY = h * adj4 / 100000;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w, pad + headH],
+            [pad + w - headW / 2, pad + headH],
+            [pad + w - headW / 2, pad + bendY],
+            [pad + stemW, pad + bendY],
+            [pad + stemW, pad + h],
+            [pad, pad + h],
+            [pad, pad + bendY - stemW],
+            [pad + w - headW / 2 - stemW, pad + bendY - stemW],
+            [pad + w - headW / 2 - stemW, pad + headH],
+            [pad + w / 2 - headW / 2, pad + headH],
+        ]);
+    }
+    else if (preset === "uturnArrow") {
+        // U-turn arrow: goes down, curves at bottom, comes back up with arrow
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 43750;
+        const adj5 = adjustValues?.adj5 ? parseAdjustValue(adjustValues.adj5) : 75000;
+        const stemW = w * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const headH = h * adj3 / 100000;
+        const bend = h * adj5 / 100000;
+        // Simplified as polygon (U-turn curve approximated)
+        const leftStemR = pad + w * 0.35;
+        const rightStemL = pad + w * 0.65;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w / 2 + headW / 2, pad + headH],
+            [rightStemL, pad + headH],
+            [rightStemL, pad + bend],
+            [leftStemR, pad + bend],
+            [leftStemR, pad + h],
+            [pad, pad + h],
+            [pad, pad + bend],
+            [pad + stemW, pad + bend],
+            [pad + stemW, pad + headH],
+            [pad + w / 2 - headW / 2, pad + headH],
+        ]);
+    }
+    else if (preset === "circularArrow") {
+        // Circular arrow: approximated as a thick arc with arrowhead
+        // Simplified as a crescent-like shape
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const rx = w / 2, ry = h / 2;
+        const k = 0.5522847498;
+        const thick = Math.min(w, h) * 0.15;
+        const irx = rx - thick, iry = ry - thick;
+        // Draw outer arc (3/4 circle) then inner arc back, with arrowhead
+        drawCmd = [
+            // Outer arc starting from right-center going clockwise (top, left, bottom)
+            `${cx + rx} ${py(cy)} m`,
+            `${cx + rx} ${py(cy - ry * k)} ${cx + rx * k} ${py(cy - ry)} ${cx} ${py(cy - ry)} c`,
+            `${cx - rx * k} ${py(cy - ry)} ${cx - rx} ${py(cy - ry * k)} ${cx - rx} ${py(cy)} c`,
+            `${cx - rx} ${py(cy + ry * k)} ${cx - rx * k} ${py(cy + ry)} ${cx} ${py(cy + ry)} c`,
+            // Arrowhead at bottom-center
+            `${cx + thick * 2} ${py(cy + ry + thick)} l`,
+            `${cx} ${py(cy + iry)} l`,
+            `${cx - thick * 2} ${py(cy + ry + thick)} l`,
+            `${cx} ${py(cy + ry)} l`,
+            // Inner arc going counter-clockwise back (bottom to right)
+            `${cx - irx * k} ${py(cy + iry)} ${cx - irx} ${py(cy + iry * k)} ${cx - irx} ${py(cy)} c`,
+            `${cx - irx} ${py(cy - iry * k)} ${cx - irx * k} ${py(cy - iry)} ${cx} ${py(cy - iry)} c`,
+            `${cx + irx * k} ${py(cy - iry)} ${cx + irx} ${py(cy - iry * k)} ${cx + irx} ${py(cy)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "curvedRightArrow") {
+        // Curved right arrow
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const headH = h * adj3 / 100000;
+        const headW = w * adj2 / 100000;
+        // Simplified as arrow pointing right with curved body
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + w * 0.6, pad],
+            [pad + w - headW, pad + h * 0.3],
+            [pad + w - headW, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h],
+            [pad + w - headW, pad + h * 0.7],
+            [pad + w * 0.6, pad + h],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "curvedLeftArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const headW = w * adj2 / 100000;
+        drawCmd = polyPath([
+            [pad + w, pad],
+            [pad + w * 0.4, pad],
+            [pad + headW, pad + h * 0.3],
+            [pad + headW, pad],
+            [pad, pad + h / 2],
+            [pad + headW, pad + h],
+            [pad + headW, pad + h * 0.7],
+            [pad + w * 0.4, pad + h],
+            [pad + w, pad + h],
+        ]);
+    }
+    else if (preset === "curvedUpArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const headH = h * adj2 / 100000;
+        drawCmd = polyPath([
+            [pad, pad + h],
+            [pad, pad + h * 0.4],
+            [pad + w * 0.3, pad + headH],
+            [pad, pad + headH],
+            [pad + w / 2, pad],
+            [pad + w, pad + headH],
+            [pad + w * 0.7, pad + headH],
+            [pad + w, pad + h * 0.4],
+            [pad + w, pad + h],
+        ]);
+    }
+    else if (preset === "curvedDownArrow") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const headH = h * adj2 / 100000;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad, pad + h * 0.6],
+            [pad + w * 0.3, pad + h - headH],
+            [pad, pad + h - headH],
+            [pad + w / 2, pad + h],
+            [pad + w, pad + h - headH],
+            [pad + w * 0.7, pad + h - headH],
+            [pad + w, pad + h * 0.6],
+            [pad + w, pad],
+        ]);
+    }
+    else if (preset === "rightArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const bodyW = w * adj4 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        drawCmd = polyPath([
+            [pad, pad], [pad + bodyW, pad],
+            [pad + bodyW, stemTop], [pad + w - headW, stemTop],
+            [pad + w - headW, pad],
+            [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h],
+            [pad + w - headW, stemBot], [pad + bodyW, stemBot],
+            [pad + bodyW, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "leftArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const bodyW = w * adj4 / 100000;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        const bodyX = pad + w - bodyW;
+        drawCmd = polyPath([
+            [pad + w, pad], [pad + w, pad + h],
+            [bodyX, pad + h], [bodyX, stemBot],
+            [pad + headW, stemBot], [pad + headW, pad + h],
+            [pad, pad + h / 2],
+            [pad + headW, pad], [pad + headW, stemTop],
+            [bodyX, stemTop], [bodyX, pad],
+        ]);
+    }
+    else if (preset === "upArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const bodyH = h * adj4 / 100000;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        const bodyY = pad + h - bodyH;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w, pad + headH], [stemR, pad + headH],
+            [stemR, bodyY], [pad + w, bodyY],
+            [pad + w, pad + h], [pad, pad + h],
+            [pad, bodyY], [stemL, bodyY],
+            [stemL, pad + headH], [pad, pad + headH],
+        ]);
+    }
+    else if (preset === "downArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const bodyH = h * adj4 / 100000;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        drawCmd = polyPath([
+            [pad, pad], [pad + w, pad],
+            [pad + w, pad + bodyH], [stemR, pad + bodyH],
+            [stemR, pad + h - headH], [pad + w, pad + h - headH],
+            [pad + w / 2, pad + h],
+            [pad, pad + h - headH], [stemL, pad + h - headH],
+            [stemL, pad + bodyH], [pad, pad + bodyH],
+        ]);
+    }
+    else if (preset === "leftRightArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemH = h * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const bodyX = w * (1 - adj4 / 100000) / 2;
+        const stemTop = pad + (h - stemH) / 2, stemBot = pad + (h + stemH) / 2;
+        drawCmd = polyPath([
+            [pad + bodyX, pad], [pad + w - bodyX, pad],
+            [pad + w - bodyX, stemTop], [pad + w - headW, stemTop],
+            [pad + w - headW, pad], [pad + w, pad + h / 2],
+            [pad + w - headW, pad + h], [pad + w - headW, stemBot],
+            [pad + w - bodyX, stemBot], [pad + w - bodyX, pad + h],
+            [pad + bodyX, pad + h], [pad + bodyX, stemBot],
+            [pad + headW, stemBot], [pad + headW, pad + h],
+            [pad, pad + h / 2],
+            [pad + headW, pad], [pad + headW, stemTop],
+            [pad + bodyX, stemTop],
+        ]);
+    }
+    else if (preset === "upDownArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 25000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 25000;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 64977;
+        const stemW = w * adj1 / 100000;
+        const headH = h * adj2 / 100000;
+        const bodyY = h * (1 - adj4 / 100000) / 2;
+        const stemL = pad + (w - stemW) / 2, stemR = pad + (w + stemW) / 2;
+        drawCmd = polyPath([
+            [pad + w / 2, pad],
+            [pad + w, pad + headH], [stemR, pad + headH],
+            [stemR, pad + bodyY], [pad + w, pad + bodyY],
+            [pad + w, pad + h - bodyY], [stemR, pad + h - bodyY],
+            [stemR, pad + h - headH], [pad + w, pad + h - headH],
+            [pad + w / 2, pad + h],
+            [pad, pad + h - headH], [stemL, pad + h - headH],
+            [stemL, pad + h - bodyY], [pad, pad + h - bodyY],
+            [pad, pad + bodyY], [stemL, pad + bodyY],
+            [stemL, pad + headH], [pad, pad + headH],
+        ]);
+    }
+    else if (preset === "quadArrowCallout") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 18515;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 18515;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 18515;
+        const adj4 = adjustValues?.adj4 ? parseAdjustValue(adjustValues.adj4) : 48123;
+        const stemW = w * adj1 / 100000;
+        const headW = w * adj2 / 100000;
+        const headH = h * adj3 / 100000;
+        const bodyD = w * adj4 / 100000 / 2;
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const sL = cx - stemW / 2, sR = cx + stemW / 2;
+        const sT = cy - stemW / 2, sB = cy + stemW / 2;
+        drawCmd = polyPath([
+            [cx, pad], [cx + headW / 2, pad + headH], [sR, pad + headH],
+            [sR, cy - bodyD], [cx + bodyD, cy - bodyD],
+            [cx + bodyD, sT], [pad + w - headH, sT], [pad + w - headH, cy - headW / 2],
+            [pad + w, cy], [pad + w - headH, cy + headW / 2],
+            [pad + w - headH, sB], [cx + bodyD, sB],
+            [cx + bodyD, cy + bodyD], [sR, cy + bodyD],
+            [sR, pad + h - headH], [cx + headW / 2, pad + h - headH],
+            [cx, pad + h], [cx - headW / 2, pad + h - headH],
+            [sL, pad + h - headH], [sL, cy + bodyD],
+            [cx - bodyD, cy + bodyD], [cx - bodyD, sB],
+            [pad + headH, sB], [pad + headH, cy + headW / 2],
+            [pad, cy], [pad + headH, cy - headW / 2],
+            [pad + headH, sT], [cx - bodyD, sT],
+            [cx - bodyD, cy - bodyD], [sL, cy - bodyD],
+            [sL, pad + headH], [cx - headW / 2, pad + headH],
+        ]);
+    }
+    else if (preset === "callout1" || preset === "accentCallout1") {
+        // Rectangle with a single-segment callout line (just render as rectangle)
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "callout2" || preset === "accentCallout2") {
+        // Rectangle with two-segment callout line
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "callout3" || preset === "accentCallout3") {
+        // Rectangle with three-segment callout line
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "borderCallout1" || preset === "accentBorderCallout1") {
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "borderCallout2" || preset === "accentBorderCallout2") {
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "borderCallout3" || preset === "accentBorderCallout3") {
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "flowChartPredefinedProcess") {
+        // Rectangle with vertical lines near left and right edges
+        const inset = w * 0.1;
+        drawCmd = [
+            // Outer rect
+            `${pad} ${py(pad)} m`, `${pad + w} ${py(pad)} l`,
+            `${pad + w} ${py(pad + h)} l`, `${pad} ${py(pad + h)} l`, "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartInternalStorage") {
+        // Rectangle with horizontal and vertical lines near top-left
+        drawCmd = [
+            `${pad} ${py(pad)} m`, `${pad + w} ${py(pad)} l`,
+            `${pad + w} ${py(pad + h)} l`, `${pad} ${py(pad + h)} l`, "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartMultidocument") {
+        // Three overlapping document shapes
+        const off = w * 0.08;
+        const waveH = h * 0.08;
+        // Back doc (offset twice)
+        drawCmd = [
+            // Main doc (front)
+            ...polyPathLines([[pad, pad + off * 2], [pad + w - off * 2, pad + off * 2],
+                [pad + w - off * 2, pad + h - waveH], [pad + (w - off * 2) * 0.75, pad + h],
+                [pad + (w - off * 2) * 0.5, pad + h - waveH],
+                [pad + (w - off * 2) * 0.25, pad + h - waveH * 2], [pad, pad + h - waveH]]),
+            // Middle doc outline (just top edge visible)
+            ...polyPathLines([[pad + off, pad + off], [pad + w - off, pad + off],
+                [pad + w - off, pad + off * 2]]),
+            "f",
+            // Back doc outline (just top edge visible)
+            ...polyPathLines([[pad + off * 2, pad], [pad + w, pad],
+                [pad + w, pad + off]]),
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartManualInput") {
+        // Quadrilateral with slanted top (top-left higher than top-right)
+        const slant = h * 0.2;
+        drawCmd = polyPath([
+            [pad, pad + slant], [pad + w, pad],
+            [pad + w, pad + h], [pad, pad + h],
+        ]);
+    }
+    else if (preset === "flowChartManualOperation") {
+        // Trapezoid (wider at top)
+        const inset = w * 0.2;
+        drawCmd = polyPath([
+            [pad, pad], [pad + w, pad],
+            [pad + w - inset, pad + h], [pad + inset, pad + h],
+        ]);
+    }
+    else if (preset === "flowChartOffpageConnector") {
+        // Pentagon pointing down (like home plate but downward)
+        const pointH = h * 0.2;
+        drawCmd = polyPath([
+            [pad, pad], [pad + w, pad],
+            [pad + w, pad + h - pointH],
+            [pad + w / 2, pad + h],
+            [pad, pad + h - pointH],
+        ]);
+    }
+    else if (preset === "flowChartPunchedCard") {
+        // Rectangle with clipped top-left corner
+        const clip = Math.min(w, h) * 0.15;
+        drawCmd = polyPath([
+            [pad + clip, pad], [pad + w, pad],
+            [pad + w, pad + h], [pad, pad + h],
+            [pad, pad + clip],
+        ]);
+    }
+    else if (preset === "flowChartPunchedTape") {
+        // Rectangle with wavy top and bottom
+        const waveH = h * 0.1;
+        drawCmd = polyPath([
+            [pad, pad + waveH],
+            [pad + w * 0.25, pad], [pad + w * 0.5, pad + waveH],
+            [pad + w * 0.75, pad + waveH * 2], [pad + w, pad + waveH],
+            [pad + w, pad + h - waveH],
+            [pad + w * 0.75, pad + h], [pad + w * 0.5, pad + h - waveH],
+            [pad + w * 0.25, pad + h - waveH * 2], [pad, pad + h - waveH],
+        ]);
+    }
+    else if (preset === "flowChartSummingJunction") {
+        // Circle with X inside — just render as circle
+        drawCmd = ellipseCmd(pad, w, h, totalH);
+    }
+    else if (preset === "flowChartOr") {
+        // Circle with + inside — just render as circle
+        drawCmd = ellipseCmd(pad, w, h, totalH);
+    }
+    else if (preset === "flowChartCollate") {
+        // Two triangles forming an hourglass (collate)
+        const cx = pad + w / 2;
+        drawCmd = [
+            // Top triangle (pointing down)
+            ...polyPathLines([[pad, pad], [pad + w, pad], [cx, pad + h / 2]]),
+            "f",
+            // Bottom triangle (pointing up)
+            ...polyPathLines([[pad, pad + h], [pad + w, pad + h], [cx, pad + h / 2]]),
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartSort") {
+        // Two triangles forming a diamond split horizontally
+        const cx = pad + w / 2, cy = pad + h / 2;
+        drawCmd = [
+            // Top triangle
+            ...polyPathLines([[pad, cy], [pad + w, cy], [cx, pad]]),
+            "f",
+            // Bottom triangle
+            ...polyPathLines([[pad, cy], [pad + w, cy], [cx, pad + h]]),
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartExtract") {
+        // Upward-pointing triangle
+        drawCmd = polyPath([[pad + w / 2, pad], [pad + w, pad + h], [pad, pad + h]]);
+    }
+    else if (preset === "flowChartMerge") {
+        // Downward-pointing triangle
+        drawCmd = polyPath([[pad, pad], [pad + w, pad], [pad + w / 2, pad + h]]);
+    }
+    else if (preset === "flowChartOnlineStorage") {
+        // Rectangle with curved left side
+        const curveW = w * 0.15;
+        const k = 0.5522847498;
+        const cy = pad + h / 2;
+        drawCmd = [
+            `${pad + curveW} ${py(pad)} m`,
+            `${pad + w} ${py(pad)} l`,
+            `${pad + w} ${py(pad + h)} l`,
+            `${pad + curveW} ${py(pad + h)} l`,
+            // Curved left side (inward arc)
+            `${pad + curveW - curveW * k} ${py(pad + h)} ${pad} ${py(cy + h / 2 * k)} ${pad} ${py(cy)} c`,
+            `${pad} ${py(cy - h / 2 * k)} ${pad + curveW - curveW * k} ${py(pad)} ${pad + curveW} ${py(pad)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartDelay") {
+        // Rectangle with rounded right side (semicircle)
+        const k = 0.5522847498;
+        const cy = pad + h / 2;
+        const ry = h / 2;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w / 2} ${py(pad)} l`,
+            // Right semicircle
+            `${pad + w / 2 + w / 2 * k} ${py(pad)} ${pad + w} ${py(cy - ry * k)} ${pad + w} ${py(cy)} c`,
+            `${pad + w} ${py(cy + ry * k)} ${pad + w / 2 + w / 2 * k} ${py(pad + h)} ${pad + w / 2} ${py(pad + h)} c`,
+            `${pad} ${py(pad + h)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartMagneticTape") {
+        // Circle with a small tail at bottom-right
+        drawCmd = ellipseCmd(pad, w, h, totalH);
+    }
+    else if (preset === "flowChartMagneticDisk") {
+        // Cylinder (horizontal) — same as "can" but oriented differently
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const capH = h * adj / 200000;
+        const k = 0.5522847498;
+        const cx = pad + w / 2, rx = w / 2;
+        const bodyTop = pad + capH, bodyBot = pad + h - capH;
+        drawCmd = [
+            `${pad} ${py(bodyTop)} m`,
+            `${pad} ${py(bodyBot)} l`,
+            `${pad} ${py(bodyBot + capH * k)} ${cx - rx * k} ${py(pad + h)} ${cx} ${py(pad + h)} c`,
+            `${cx + rx * k} ${py(pad + h)} ${pad + w} ${py(bodyBot + capH * k)} ${pad + w} ${py(bodyBot)} c`,
+            `${pad + w} ${py(bodyTop)} l`,
+            `${pad + w} ${py(bodyTop - capH * k)} ${cx + rx * k} ${py(pad)} ${cx} ${py(pad)} c`,
+            `${cx - rx * k} ${py(pad)} ${pad} ${py(bodyTop - capH * k)} ${pad} ${py(bodyTop)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartMagneticDrum") {
+        // Cylinder on its side — rectangle with curved right side
+        const capW = w * 0.15;
+        const k = 0.5522847498;
+        const cy = pad + h / 2, ry = h / 2;
+        const bodyRight = pad + w - capW;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${bodyRight} ${py(pad)} l`,
+            `${bodyRight + capW * k} ${py(pad)} ${pad + w} ${py(cy - ry * k)} ${pad + w} ${py(cy)} c`,
+            `${pad + w} ${py(cy + ry * k)} ${bodyRight + capW * k} ${py(pad + h)} ${bodyRight} ${py(pad + h)} c`,
+            `${pad} ${py(pad + h)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "flowChartDisplay") {
+        // Rectangle with pointed left side and rounded right side
+        const pointW = w * 0.15;
+        const k = 0.5522847498;
+        const cy = pad + h / 2;
+        const ry = h / 2;
+        drawCmd = [
+            `${pad} ${py(cy)} m`,
+            `${pad + pointW} ${py(pad)} l`,
+            `${pad + w / 2} ${py(pad)} l`,
+            `${pad + w / 2 + w / 2 * k} ${py(pad)} ${pad + w} ${py(cy - ry * k)} ${pad + w} ${py(cy)} c`,
+            `${pad + w} ${py(cy + ry * k)} ${pad + w / 2 + w / 2 * k} ${py(pad + h)} ${pad + w / 2} ${py(pad + h)} c`,
+            `${pad + pointW} ${py(pad + h)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "line" || preset === "straightConnector1") {
+        // Diagonal line from top-left to bottom-right
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w} ${py(pad + h)} l`,
+            `${pad + w + lw} ${py(pad + h)} l`,
+            `${pad + lw} ${py(pad)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bentConnector2") {
+        // L-shaped connector: right then down
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`, `${pad + w} ${py(pad)} l`,
+            `${pad + w} ${py(pad + h)} l`, `${pad + w - lw} ${py(pad + h)} l`,
+            `${pad + w - lw} ${py(pad + lw)} l`, `${pad} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bentConnector3") {
+        // Z-shaped connector with one bend
+        const adj = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const bendX = w * adj / 100000;
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`, `${pad + bendX} ${py(pad)} l`,
+            `${pad + bendX} ${py(pad + h)} l`, `${pad + w} ${py(pad + h)} l`,
+            `${pad + w} ${py(pad + h - lw)} l`, `${pad + bendX + lw} ${py(pad + h - lw)} l`,
+            `${pad + bendX + lw} ${py(pad + lw)} l`, `${pad} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bentConnector4") {
+        // Connector with two bends
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const bendX = w * adj1 / 100000;
+        const bendY = h * adj2 / 100000;
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`, `${pad + bendX} ${py(pad)} l`,
+            `${pad + bendX} ${py(pad + bendY)} l`, `${pad + w} ${py(pad + bendY)} l`,
+            `${pad + w} ${py(pad + h)} l`, `${pad + w - lw} ${py(pad + h)} l`,
+            `${pad + w - lw} ${py(pad + bendY + lw)} l`, `${pad + bendX + lw} ${py(pad + bendY + lw)} l`,
+            `${pad + bendX + lw} ${py(pad + lw)} l`, `${pad} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bentConnector5") {
+        // Connector with three bends — simplified as Z-shape
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const adj3 = adjustValues?.adj3 ? parseAdjustValue(adjustValues.adj3) : 50000;
+        const bendX1 = w * adj1 / 100000;
+        const bendY = h * adj2 / 100000;
+        const bendX2 = w * adj3 / 100000;
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`, `${pad + bendX1} ${py(pad)} l`,
+            `${pad + bendX1} ${py(pad + bendY)} l`, `${pad + bendX2} ${py(pad + bendY)} l`,
+            `${pad + bendX2} ${py(pad + h)} l`, `${pad + w} ${py(pad + h)} l`,
+            `${pad + w} ${py(pad + h - lw)} l`, `${pad + bendX2 + lw} ${py(pad + h - lw)} l`,
+            `${pad + bendX2 + lw} ${py(pad + bendY + lw)} l`, `${pad + bendX1 + lw} ${py(pad + bendY + lw)} l`,
+            `${pad + bendX1 + lw} ${py(pad + lw)} l`, `${pad} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "curvedConnector2") {
+        // Simple curved connector (bezier from top-left to bottom-right)
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w} ${py(pad)} ${pad + w} ${py(pad + h)} ${pad + w} ${py(pad + h)} c`,
+            `${pad + w - lw} ${py(pad + h)} l`,
+            `${pad + w - lw} ${py(pad + h)} ${pad + lw} ${py(pad)} ${pad} ${py(pad)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "curvedConnector3") {
+        const adj = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const midX = w * adj / 100000;
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + midX} ${py(pad)} ${pad + midX} ${py(pad + h)} ${pad + w} ${py(pad + h)} c`,
+            `${pad + w} ${py(pad + h - lw)} l`,
+            `${pad + midX + lw} ${py(pad + h - lw)} ${pad + midX + lw} ${py(pad + lw)} ${pad} ${py(pad + lw)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "curvedConnector4") {
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 50000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const lw = 1;
+        // Simplified S-curve
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w * 0.5} ${py(pad)} ${pad + w * 0.5} ${py(pad + h)} ${pad + w} ${py(pad + h)} c`,
+            `${pad + w} ${py(pad + h - lw)} l`,
+            `${pad + w * 0.5 + lw} ${py(pad + h - lw)} ${pad + w * 0.5 + lw} ${py(pad + lw)} ${pad} ${py(pad + lw)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "curvedConnector5") {
+        const lw = 1;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w * 0.5} ${py(pad)} ${pad + w * 0.5} ${py(pad + h)} ${pad + w} ${py(pad + h)} c`,
+            `${pad + w} ${py(pad + h - lw)} l`,
+            `${pad + w * 0.5 + lw} ${py(pad + h - lw)} ${pad + w * 0.5 + lw} ${py(pad + lw)} ${pad} ${py(pad + lw)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "actionButtonBlank") {
+        // Simple rectangle (blank action button)
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "actionButtonHome" || preset === "actionButtonHelp" ||
+        preset === "actionButtonInformation" || preset === "actionButtonBackPrevious" ||
+        preset === "actionButtonForwardNext" || preset === "actionButtonBeginning" ||
+        preset === "actionButtonEnd" || preset === "actionButtonReturn" ||
+        preset === "actionButtonDocument" || preset === "actionButtonSound" ||
+        preset === "actionButtonMovie") {
+        // All action buttons: rectangle with icon (icon rendering omitted — PDF shows as rect)
+        drawCmd = `${pad} ${py(pad)} m ${pad + w} ${py(pad)} l ${pad + w} ${py(pad + h)} l ${pad} ${py(pad + h)} l f`;
+    }
+    else if (preset === "ribbon") {
+        // Ribbon banner (bottom tabs, main area raised)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const tabH = h * adj1 / 100000;
+        const tabW = w * adj2 / 200000;
+        drawCmd = polyPath([
+            [pad, pad + tabH],
+            [pad + tabW, pad + tabH],
+            [pad + tabW, pad],
+            [pad + w - tabW, pad],
+            [pad + w - tabW, pad + tabH],
+            [pad + w, pad + tabH],
+            [pad + w, pad + h],
+            [pad + w - tabW, pad + h - tabH],
+            [pad + tabW, pad + h - tabH],
+            [pad, pad + h],
+        ]);
+    }
+    else if (preset === "ribbon2") {
+        // Ribbon2: tabs on top, notch at bottom
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 16667;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const tabH = h * adj1 / 100000;
+        const tabW = w * adj2 / 200000;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + tabW, pad + tabH],
+            [pad + tabW, pad + h],
+            [pad + w - tabW, pad + h],
+            [pad + w - tabW, pad + tabH],
+            [pad + w, pad],
+            [pad + w, pad + h - tabH],
+            [pad + w - tabW, pad + h - tabH],
+            [pad + tabW, pad + h - tabH],
+            [pad, pad + h - tabH],
+        ]);
+    }
+    else if (preset === "ellipseRibbon") {
+        // Ellipse ribbon — simplified as ribbon with curved bottom
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const tabH = h * adj1 / 100000;
+        const tabW = w * adj2 / 200000;
+        drawCmd = polyPath([
+            [pad, pad + tabH],
+            [pad + tabW, pad + tabH],
+            [pad + tabW, pad],
+            [pad + w - tabW, pad],
+            [pad + w - tabW, pad + tabH],
+            [pad + w, pad + tabH],
+            [pad + w, pad + h - tabH],
+            [pad + w * 0.75, pad + h],
+            [pad + w / 2, pad + h - tabH / 2],
+            [pad + w * 0.25, pad + h],
+            [pad, pad + h - tabH],
+        ]);
+    }
+    else if (preset === "ellipseRibbon2") {
+        // Ellipse ribbon 2 — inverted
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 25000;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const tabH = h * adj1 / 100000;
+        const tabW = w * adj2 / 200000;
+        drawCmd = polyPath([
+            [pad, pad + tabH],
+            [pad + w * 0.25, pad],
+            [pad + w / 2, pad + tabH / 2],
+            [pad + w * 0.75, pad],
+            [pad + w, pad + tabH],
+            [pad + w, pad + h - tabH],
+            [pad + w - tabW, pad + h - tabH],
+            [pad + w - tabW, pad + h],
+            [pad + tabW, pad + h],
+            [pad + tabW, pad + h - tabH],
+            [pad, pad + h - tabH],
+        ]);
+    }
+    else if (preset === "horizontalScroll") {
+        // Scroll shape with rolled ends on left and right
+        const rollR = Math.min(w, h) * 0.12;
+        drawCmd = [
+            // Main body
+            ...polyPathLines([
+                [pad + rollR, pad + rollR],
+                [pad + w - rollR, pad],
+                [pad + w - rollR, pad + h - rollR],
+                [pad + rollR, pad + h],
+            ]),
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "verticalScroll") {
+        // Scroll shape with rolled ends on top and bottom
+        const rollR = Math.min(w, h) * 0.12;
+        drawCmd = [
+            ...polyPathLines([
+                [pad + rollR, pad + rollR],
+                [pad + w, pad + rollR],
+                [pad + w - rollR, pad + h - rollR],
+                [pad, pad + h - rollR],
+            ]),
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "wave") {
+        // Rectangle with wavy top and bottom (sinusoidal)
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 12500;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 0;
+        const amplitude = h * adj1 / 100000;
+        drawCmd = polyPath([
+            [pad, pad + amplitude],
+            [pad + w * 0.25, pad],
+            [pad + w * 0.5, pad + amplitude],
+            [pad + w * 0.75, pad + amplitude * 2],
+            [pad + w, pad + amplitude],
+            [pad + w, pad + h - amplitude],
+            [pad + w * 0.75, pad + h],
+            [pad + w * 0.5, pad + h - amplitude],
+            [pad + w * 0.25, pad + h - amplitude * 2],
+            [pad, pad + h - amplitude],
+        ]);
+    }
+    else if (preset === "doubleWave") {
+        // Like wave but with double amplitude
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 6250;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 0;
+        const amplitude = h * adj1 / 100000;
+        drawCmd = polyPath([
+            [pad, pad + amplitude],
+            [pad + w * 0.17, pad], [pad + w * 0.33, pad + amplitude * 2],
+            [pad + w * 0.5, pad], [pad + w * 0.67, pad + amplitude * 2],
+            [pad + w * 0.83, pad], [pad + w, pad + amplitude],
+            [pad + w, pad + h - amplitude],
+            [pad + w * 0.83, pad + h], [pad + w * 0.67, pad + h - amplitude * 2],
+            [pad + w * 0.5, pad + h], [pad + w * 0.33, pad + h - amplitude * 2],
+            [pad + w * 0.17, pad + h], [pad, pad + h - amplitude],
+        ]);
+    }
+    else if (preset === "irregularSeal2") {
+        // Explosion/burst shape 2 — irregular polygon
+        const cx = pad + w / 2, cy = pad + h / 2;
+        drawCmd = polyPath([
+            [pad + w * 0.1, pad],
+            [pad + w * 0.3, pad + h * 0.2],
+            [pad + w * 0.5, pad],
+            [pad + w * 0.6, pad + h * 0.15],
+            [pad + w * 0.85, pad + h * 0.05],
+            [pad + w * 0.8, pad + h * 0.3],
+            [pad + w, pad + h * 0.35],
+            [pad + w * 0.85, pad + h * 0.5],
+            [pad + w * 0.95, pad + h * 0.7],
+            [pad + w * 0.75, pad + h * 0.7],
+            [pad + w * 0.8, pad + h * 0.9],
+            [pad + w * 0.55, pad + h * 0.8],
+            [pad + w * 0.4, pad + h],
+            [pad + w * 0.35, pad + h * 0.75],
+            [pad + w * 0.1, pad + h * 0.85],
+            [pad + w * 0.2, pad + h * 0.65],
+            [pad, pad + h * 0.6],
+            [pad + w * 0.15, pad + h * 0.45],
+            [pad, pad + h * 0.25],
+            [pad + w * 0.15, pad + h * 0.2],
+        ]);
+    }
+    else if (preset === "gear9") {
+        // 9-tooth gear — circle with triangular teeth
+        const cx = pad + w / 2, cy = pad + h / 2;
+        const outerR = Math.min(w, h) / 2;
+        const innerR = outerR * 0.75;
+        const toothW = Math.PI / 18; // half-width of each tooth in radians
+        const pts = [];
+        for (let i = 0; i < 9; i++) {
+            const a = Math.PI * 2 * i / 9 - Math.PI / 2;
+            // Tooth outer points
+            pts.push([cx + Math.cos(a - toothW) * outerR, cy + Math.sin(a - toothW) * outerR]);
+            pts.push([cx + Math.cos(a + toothW) * outerR, cy + Math.sin(a + toothW) * outerR]);
+            // Valley between teeth
+            const va = a + Math.PI / 9;
+            pts.push([cx + Math.cos(va - toothW) * innerR, cy + Math.sin(va - toothW) * innerR]);
+            pts.push([cx + Math.cos(va + toothW) * innerR, cy + Math.sin(va + toothW) * innerR]);
+        }
+        drawCmd = polyPath(pts);
+    }
+    else if (preset === "funnel") {
+        // Funnel: wide at top, narrow at bottom
+        const neckW = w * 0.3;
+        const neckH = h * 0.4;
+        const cx = pad + w / 2;
+        drawCmd = polyPath([
+            [pad, pad],
+            [pad + w, pad],
+            [cx + neckW / 2, pad + h - neckH],
+            [cx + neckW / 2, pad + h],
+            [cx - neckW / 2, pad + h],
+            [cx - neckW / 2, pad + h - neckH],
+        ]);
+    }
+    else if (preset === "leftBrace") {
+        // Left brace { — approximated as connected curves
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 8333;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const curveR = h * adj1 / 100000;
+        const midY = h * adj2 / 100000;
+        const lw = Math.max(w * 0.15, 1);
+        const k = 0.5522847498;
+        const rightX = pad + w, leftX = pad + w - lw;
+        drawCmd = [
+            `${rightX} ${py(pad)} m`,
+            `${rightX - curveR * k} ${py(pad)} ${pad + w / 2 + lw / 2} ${py(pad + curveR * (1 - k))} ${pad + w / 2 + lw / 2} ${py(pad + curveR)} c`,
+            `${pad + w / 2 + lw / 2} ${py(pad + midY - curveR)} l`,
+            `${pad + w / 2 + lw / 2} ${py(pad + midY - curveR * (1 - k))} ${pad + lw / 2 + curveR * k} ${py(pad + midY)} ${pad + lw / 2} ${py(pad + midY)} c`,
+            `${pad + lw / 2 + curveR * k} ${py(pad + midY)} ${pad + w / 2 + lw / 2} ${py(pad + midY + curveR * (1 - k))} ${pad + w / 2 + lw / 2} ${py(pad + midY + curveR)} c`,
+            `${pad + w / 2 + lw / 2} ${py(pad + h - curveR)} l`,
+            `${pad + w / 2 + lw / 2} ${py(pad + h - curveR * (1 - k))} ${rightX - curveR * k} ${py(pad + h)} ${rightX} ${py(pad + h)} c`,
+            // Inner path going back
+            `${leftX} ${py(pad + h)} l`,
+            `${leftX - curveR * k} ${py(pad + h)} ${pad + w / 2 - lw / 2} ${py(pad + h - curveR * (1 - k))} ${pad + w / 2 - lw / 2} ${py(pad + h - curveR)} c`,
+            `${pad + w / 2 - lw / 2} ${py(pad + midY + curveR)} l`,
+            `${pad + w / 2 - lw / 2} ${py(pad + midY + curveR * (1 - k))} ${pad - lw / 2 + curveR * k} ${py(pad + midY)} ${pad - lw / 2} ${py(pad + midY)} c`,
+            `${pad - lw / 2 + curveR * k} ${py(pad + midY)} ${pad + w / 2 - lw / 2} ${py(pad + midY - curveR * (1 - k))} ${pad + w / 2 - lw / 2} ${py(pad + midY - curveR)} c`,
+            `${pad + w / 2 - lw / 2} ${py(pad + curveR)} l`,
+            `${pad + w / 2 - lw / 2} ${py(pad + curveR * (1 - k))} ${leftX - curveR * k} ${py(pad)} ${leftX} ${py(pad)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "rightBrace") {
+        // Right brace } — mirror of leftBrace
+        const adj1 = adjustValues?.adj1 ? parseAdjustValue(adjustValues.adj1) : 8333;
+        const adj2 = adjustValues?.adj2 ? parseAdjustValue(adjustValues.adj2) : 50000;
+        const curveR = h * adj1 / 100000;
+        const midY = h * adj2 / 100000;
+        const lw = Math.max(w * 0.15, 1);
+        const k = 0.5522847498;
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + curveR * k} ${py(pad)} ${pad + w / 2 - lw / 2} ${py(pad + curveR * (1 - k))} ${pad + w / 2 - lw / 2} ${py(pad + curveR)} c`,
+            `${pad + w / 2 - lw / 2} ${py(pad + midY - curveR)} l`,
+            `${pad + w / 2 - lw / 2} ${py(pad + midY - curveR * (1 - k))} ${pad + w - lw / 2 - curveR * k} ${py(pad + midY)} ${pad + w - lw / 2} ${py(pad + midY)} c`,
+            `${pad + w - lw / 2 - curveR * k} ${py(pad + midY)} ${pad + w / 2 - lw / 2} ${py(pad + midY + curveR * (1 - k))} ${pad + w / 2 - lw / 2} ${py(pad + midY + curveR)} c`,
+            `${pad + w / 2 - lw / 2} ${py(pad + h - curveR)} l`,
+            `${pad + w / 2 - lw / 2} ${py(pad + h - curveR * (1 - k))} ${pad + curveR * k} ${py(pad + h)} ${pad} ${py(pad + h)} c`,
+            `${pad + lw} ${py(pad + h)} l`,
+            `${pad + lw + curveR * k} ${py(pad + h)} ${pad + w / 2 + lw / 2} ${py(pad + h - curveR * (1 - k))} ${pad + w / 2 + lw / 2} ${py(pad + h - curveR)} c`,
+            `${pad + w / 2 + lw / 2} ${py(pad + midY + curveR)} l`,
+            `${pad + w / 2 + lw / 2} ${py(pad + midY + curveR * (1 - k))} ${pad + w + lw / 2 - curveR * k} ${py(pad + midY)} ${pad + w + lw / 2} ${py(pad + midY)} c`,
+            `${pad + w + lw / 2 - curveR * k} ${py(pad + midY)} ${pad + w / 2 + lw / 2} ${py(pad + midY - curveR * (1 - k))} ${pad + w / 2 + lw / 2} ${py(pad + midY - curveR)} c`,
+            `${pad + w / 2 + lw / 2} ${py(pad + curveR)} l`,
+            `${pad + w / 2 + lw / 2} ${py(pad + curveR * (1 - k))} ${pad + lw + curveR * k} ${py(pad)} ${pad + lw} ${py(pad)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "leftBracket") {
+        // Left bracket [ — vertical line with horizontal caps
+        const lw = Math.max(w * 0.3, 1);
+        const k = 0.5522847498;
+        const curveR = Math.min(w, h * 0.1);
+        drawCmd = [
+            `${pad + w} ${py(pad)} m`,
+            `${pad + curveR} ${py(pad)} l`,
+            `${pad + curveR * (1 - k)} ${py(pad)} ${pad} ${py(pad + curveR * (1 - k))} ${pad} ${py(pad + curveR)} c`,
+            `${pad} ${py(pad + h - curveR)} l`,
+            `${pad} ${py(pad + h - curveR * (1 - k))} ${pad + curveR * (1 - k)} ${py(pad + h)} ${pad + curveR} ${py(pad + h)} c`,
+            `${pad + w} ${py(pad + h)} l`,
+            `${pad + w} ${py(pad + h - lw)} l`,
+            `${pad + lw} ${py(pad + h - lw)} l`,
+            `${pad + lw} ${py(pad + lw)} l`,
+            `${pad + w} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "rightBracket") {
+        // Right bracket ]
+        const lw = Math.max(w * 0.3, 1);
+        const k = 0.5522847498;
+        const curveR = Math.min(w, h * 0.1);
+        drawCmd = [
+            `${pad} ${py(pad)} m`,
+            `${pad + w - curveR} ${py(pad)} l`,
+            `${pad + w - curveR * (1 - k)} ${py(pad)} ${pad + w} ${py(pad + curveR * (1 - k))} ${pad + w} ${py(pad + curveR)} c`,
+            `${pad + w} ${py(pad + h - curveR)} l`,
+            `${pad + w} ${py(pad + h - curveR * (1 - k))} ${pad + w - curveR * (1 - k)} ${py(pad + h)} ${pad + w - curveR} ${py(pad + h)} c`,
+            `${pad} ${py(pad + h)} l`,
+            `${pad} ${py(pad + h - lw)} l`,
+            `${pad + w - lw} ${py(pad + h - lw)} l`,
+            `${pad + w - lw} ${py(pad + lw)} l`,
+            `${pad} ${py(pad + lw)} l`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bracePair") {
+        // Pair of braces { } — left and right brace together
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 8333;
+        const curveR = Math.min(w, h) * adj / 100000;
+        const k = 0.5522847498;
+        const midY = pad + h / 2;
+        // Simplified: render as rounded rectangle with points at middle-left and middle-right
+        drawCmd = [
+            `${pad + curveR} ${py(pad)} m`,
+            `${pad + w - curveR} ${py(pad)} l`,
+            `${pad + w - curveR * (1 - k)} ${py(pad)} ${pad + w} ${py(pad + curveR * (1 - k))} ${pad + w} ${py(pad + curveR)} c`,
+            `${pad + w} ${py(midY - curveR)} l`,
+            `${pad + w} ${py(midY)} l`, // Right point
+            `${pad + w} ${py(midY + curveR)} l`,
+            `${pad + w} ${py(pad + h - curveR)} l`,
+            `${pad + w} ${py(pad + h - curveR * (1 - k))} ${pad + w - curveR * (1 - k)} ${py(pad + h)} ${pad + w - curveR} ${py(pad + h)} c`,
+            `${pad + curveR} ${py(pad + h)} l`,
+            `${pad + curveR * (1 - k)} ${py(pad + h)} ${pad} ${py(pad + h - curveR * (1 - k))} ${pad} ${py(pad + h - curveR)} c`,
+            `${pad} ${py(midY + curveR)} l`,
+            `${pad} ${py(midY)} l`, // Left point
+            `${pad} ${py(midY - curveR)} l`,
+            `${pad} ${py(pad + curveR)} l`,
+            `${pad} ${py(pad + curveR * (1 - k))} ${pad + curveR * (1 - k)} ${py(pad)} ${pad + curveR} ${py(pad)} c`,
+            "f",
+        ].join("\n");
+    }
+    else if (preset === "bracketPair") {
+        // Pair of brackets [ ] — rounded rectangle
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 16667;
+        const radius = Math.min(w, h) * adj / 100000;
+        const x0 = pad, y0 = totalH - pad - h, x1 = pad + w, y1 = totalH - pad;
+        drawCmd = [
+            `${x0 + radius} ${y0} m`, `${x1 - radius} ${y0} l`,
+            `${x1} ${y0} ${x1} ${y0 + radius} v`, `${x1} ${y1 - radius} l`,
+            `${x1} ${y1} ${x1 - radius} ${y1} v`, `${x0 + radius} ${y1} l`,
+            `${x0} ${y1} ${x0} ${y1 - radius} v`, `${x0} ${y0 + radius} l`,
+            `${x0} ${y0} ${x0 + radius} ${y0} v`, "f",
+        ].join("\n");
+    }
+    else {
+        // Fallback: filled rectangle
+        drawCmd = `${pad} ${pad} ${w} ${h} re f`;
+    }
+    return drawCmd;
+}
+/** Wrap a PDF content stream into a minimal PDF 1.4 document. */
+export function buildPdf(totalW, totalH, stream) {
+    const streamBytes = Buffer.from(stream, "ascii");
+    const objects = [
+        `1 0 obj\n<< /Type /Catalog /Pages 2 0 R >>\nendobj`,
+        `2 0 obj\n<< /Type /Pages /Kids [3 0 R] /Count 1 >>\nendobj`,
+        `3 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${totalW} ${totalH}] /Contents 4 0 R >>\nendobj`,
+        `4 0 obj\n<< /Length ${streamBytes.length} >>\nstream\n${stream}\nendstream\nendobj`,
+    ];
+    const header = "%PDF-1.4\n";
+    let body = "";
+    const offsets = [];
+    for (const obj of objects) {
+        offsets.push(header.length + body.length);
+        body += obj + "\n";
+    }
+    const xrefOffset = header.length + body.length;
+    let xref = `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n`;
+    for (const off of offsets) {
+        xref += `${String(off).padStart(10, "0")} 00000 n \n`;
+    }
+    const trailer = `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF`;
+    return Buffer.from(header + body + xref + trailer, "ascii");
+}
+export function mapConnector(conn, attachments, ctx) {
+    const b = conn.bounds;
+    if (!b)
+        return "";
+    const x = emuToPx(b.x);
+    const y = emuToPx(b.y);
+    let w = emuToPx(b.cx);
+    let h = emuToPx(b.cy);
+    // OfficeImport accounts for stroke when computing connector PDF bounds:
+    // - Y position is offset by floor(strokeWidth/2) for the stroke extending above origin
+    // - Zero-extent dimensions get minimum 1px (for the stroke), with the other axis reduced by 1
+    const strokePx = emuToPx(conn.stroke?.width ?? 0);
+    const strokeYOffset = Math.floor(strokePx / 2);
+    if (h === 0 && w > 0) {
+        h = 1;
+        w -= 1;
+    }
+    else if (w === 0 && h > 0) {
+        w = 1;
+        h -= 1;
+    }
+    // Connectors are always rendered as PDF images by OfficeImport (like non-rect shapes)
+    const fillColor = fillToColor(conn.fill, ctx) ?? "#000000";
+    const geom = conn.geometry?.preset ?? "line";
+    const pdf = generateShapePdf(w, h, geom, fillColor, conn.geometry?.adjustValues);
+    const imgX = x - PDF_PADDING;
+    const imgY = y - strokeYOffset - PDF_PADDING;
+    const imgW = w + PDF_PADDING * 2;
+    const imgH = h + PDF_PADDING * 2;
+    const idx = nextAttachmentIndex();
+    const name = `Attachment${idx}.pdf`;
+    attachments.set(name, pdf);
+    return `<img src="${name}" style="position:absolute; top:${imgY}; left:${imgX}; width:${imgW}; height:${imgH};">`;
+}
+/**
+ * Compute the inscribed text frame for a geometry preset (shapeTextBoxRect in OfficeImport).
+ * OfficeImport computes inset using float px values for radius, then truncates dimensions.
+ * Input/output in EMU, but computation happens in pixel space to match QL's rounding.
+ */
+export function shapeTextBox(bounds, preset, adjustValues) {
+    const { x, y, cx, cy } = bounds;
+    const EMU = 12700;
+    // Float px values (not truncated) — OfficeImport uses these for radius/inset calc
+    const wF = cx / EMU;
+    const hF = cy / EMU;
+    // Truncated px values — OfficeImport uses these for final dimensions
+    const wT = Math.trunc(wF);
+    const hT = Math.trunc(hF);
+    if (preset === "roundRect") {
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 16667;
+        const radius = Math.min(wF, hF) * adj / 100000;
+        const inset = radius * (1 - Math.cos(Math.PI / 4));
+        const rw = Math.trunc(wT - 2 * inset);
+        const rh = Math.trunc(hT - 2 * inset);
+        return { x: x + inset * EMU, y: y + inset * EMU, cx: rw * EMU, cy: rh * EMU };
+    }
+    if (preset === "ellipse") {
+        const insetX = (wT - wT / Math.SQRT2) / 2;
+        const insetY = (hT - hT / Math.SQRT2) / 2;
+        const rw = Math.trunc(wT - 2 * insetX);
+        const rh = Math.trunc(hT - 2 * insetY);
+        return { x: x + insetX * EMU, y: y + insetY * EMU, cx: rw * EMU, cy: rh * EMU };
+    }
+    if (preset === "diamond") {
+        return { x: x + cx / 4, y: y + cy / 4, cx: cx / 2, cy: cy / 2 };
+    }
+    if (preset === "triangle") {
+        return { x: x + cx / 4, y: y + cy / 2, cx: cx / 2, cy: cy / 2 };
+    }
+    if (preset === "hexagon") {
+        const adj = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : 25000;
+        const insetX = cx * adj / 100000;
+        const insetY = cy * adj / 200000;
+        return { x: x + insetX, y: y + insetY, cx: cx - 2 * insetX, cy: cy - 2 * insetY };
+    }
+    // Star shapes: text frame inscribed within the inner polygon/circle.
+    // Empirically verified against QL output for star4 and star5.
+    const starMatch = preset.match(/^star(\d+)$/);
+    if (starMatch) {
+        const n = parseInt(starMatch[1], 10);
+        const adjMap = { 4: 12500, 5: 19098, 6: 23170, 7: 19098, 8: 17678 };
+        const adjVal = adjustValues?.adj ? parseAdjustValue(adjustValues.adj) : (adjMap[n] ?? 19098);
+        const innerR = Math.min(wF, hF) / 2 * adjVal / 50000;
+        if (n === 4) {
+            // Star4: inner diamond → axis-aligned bbox of 4 inner points at 45° offsets
+            const side = Math.trunc(innerR * Math.SQRT2 * 2);
+            const insetX = Math.trunc(wF / 2 - innerR * Math.cos(Math.PI / 4));
+            const insetY = Math.trunc(hF / 2 - innerR * Math.cos(Math.PI / 4));
+            return { x: x + insetX * EMU, y: y + insetY * EMU, cx: side * EMU, cy: side * EMU };
+        }
+        if (n === 5) {
+            // Star5: inscribed square using inner circle diameter.
+            // textY_rel = textH (text starts at textH from top — empirically confirmed)
+            const side = Math.trunc(2 * innerR);
+            const insetX = Math.trunc(wF / 2 - innerR);
+            return { x: x + insetX * EMU, y: y + side * EMU, cx: side * EMU, cy: side * EMU };
+        }
+        // Other star shapes: use inner circle diameter as inscribed square, centered
+        const side = Math.trunc(2 * innerR);
+        const insetX = Math.trunc(wF / 2 - innerR);
+        const insetY = Math.trunc(hF / 2 - innerR);
+        return { x: x + insetX * EMU, y: y + insetY * EMU, cx: side * EMU, cy: side * EMU };
+    }
+    // Default: use full bounds
+    return { x, y, cx, cy };
+}
+function parseAdjustValue(val) {
+    // Adjust values come as "val 4000" — extract the number
+    const m = val.match(/\d+/);
+    return m ? parseInt(m[0], 10) : 16667;
+}
+/** Maps OOXML gradient angle (60000ths of a degree) to -webkit-gradient from/to points */
+function gradientPoints(angleDeg60k) {
+    const a = ((angleDeg60k / 60000) % 360 + 360) % 360;
+    if (a < 22.5 || a >= 337.5)
+        return { from: "left top", to: "right top" };
+    if (a < 67.5)
+        return { from: "left bottom", to: "right top" };
+    if (a < 112.5)
+        return { from: "left bottom", to: "left top" };
+    if (a < 157.5)
+        return { from: "right bottom", to: "left top" };
+    if (a < 202.5)
+        return { from: "right top", to: "left top" };
+    if (a < 247.5)
+        return { from: "right top", to: "left bottom" };
+    if (a < 292.5)
+        return { from: "left top", to: "left bottom" };
+    return { from: "left top", to: "right bottom" };
+}
+/** Returns CSS property string (e.g. "background-color:#hex" or "background-image:-webkit-gradient(...)") */
+function fillToCss(fill, ctx, attachments) {
+    if (!fill)
+        return null;
+    if (fill.type === "solid") {
+        return `background-color:${rgbaToColor(resolveColor(fill.color, ctx.colorMap, ctx.colorScheme))}`;
+    }
+    if (fill.type === "gradient" && fill.stops.length > 0) {
+        if (fill.stops.length === 2) {
+            // 2-stop: -webkit-gradient (matches OfficeImport's old WebKit syntax)
+            const c1 = rgbaToColor(resolveColor(fill.stops[0].color, ctx.colorMap, ctx.colorScheme));
+            const c2 = rgbaToColor(resolveColor(fill.stops[1].color, ctx.colorMap, ctx.colorScheme));
+            const { from, to } = gradientPoints(fill.linear?.angle ?? 5400000);
+            return `background-image:-webkit-gradient(linear, ${from}, ${to}, from(${c1}), to(${c2}))`;
+        }
+        // 3+ stops: average all stop colors to single background-color
+        let r = 0, g = 0, b = 0;
+        for (const stop of fill.stops) {
+            const c = resolveColor(stop.color, ctx.colorMap, ctx.colorScheme);
+            r += c.r;
+            g += c.g;
+            b += c.b;
+        }
+        const n = fill.stops.length;
+        return `background-color:${rgbaToColor({ r: Math.round(r / n), g: Math.round(g / n), b: Math.round(b / n), a: 1 })}`;
+    }
+    if (fill.type === "image" && fill.blipData && attachments) {
+        // Image fill: OfficeImport renders as background-image with background-size:100% 100%
+        const ext = detectFillImageExt(fill.blipData);
+        const idx = nextFillAttachmentIndex();
+        const name = `Attachment${idx}.${ext}`;
+        attachments.set(name, fill.blipData);
+        return `background-image:url(${name}); background-size:100% 100%; background-repeat:no-repeat`;
+    }
+    if (fill.type === "noFill")
+        return null;
+    return null;
+}
+let fillAttachmentCounter = 1000; // offset to avoid collision with image attachments
+function nextFillAttachmentIndex() { return fillAttachmentCounter++; }
+function detectFillImageExt(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";
+    return "png";
+}
+/**
+ * Resolve stroke info for PDF rendering.
+ * OfficeImport CMDrawingContext always uses fill+stroke (B operator).
+ * Explicit <a:ln><a:solidFill> → declared color + width.
+ * No explicit stroke → undefined (generateShapePdf uses thin black default).
+ */
+function resolveStrokeForPdf(shape, ctx) {
+    const stroke = shape.stroke;
+    if (!stroke?.fill)
+        return undefined; // no explicit stroke → use default
+    if (stroke.fill.type === "solid") {
+        const color = rgbaToColor(resolveColor(stroke.fill.color, ctx.colorMap, ctx.colorScheme));
+        const width = stroke.width ? emuToPx(stroke.width) : 1;
+        return { color, width: Math.max(width, 0.5) };
+    }
+    return undefined;
+}
+/** Returns just the color string (for PDF fill, which only needs a single color) */
+export function fillToColor(fill, ctx) {
+    if (!fill)
+        return null;
+    if (fill.type === "solid") {
+        return rgbaToColor(resolveColor(fill.color, ctx.colorMap, ctx.colorScheme));
+    }
+    if (fill.type === "gradient" && fill.stops.length > 0) {
+        return rgbaToColor(resolveColor(fill.stops[0].color, ctx.colorMap, ctx.colorScheme));
+    }
+    if (fill.type === "noFill")
+        return null;
+    return null;
+}
+/** Resolve stroke from theme style matrix via shapeStyle.lnRef. */
+function resolveThemeStroke(shape, ctx) {
+    const lnRef = shape.shapeStyle?.lnRef;
+    if (!lnRef || lnRef.idx <= 0 || !ctx.styleMatrix)
+        return undefined;
+    const themeStroke = ctx.styleMatrix.lineStyles[lnRef.idx - 1]; // 1-indexed
+    if (!themeStroke)
+        return undefined;
+    // If theme stroke has a placeholder color (schemeClr phClr), use the lnRef override color
+    if (lnRef.color && themeStroke.fill?.type === "solid") {
+        return { ...themeStroke, fill: { type: "solid", color: lnRef.color } };
+    }
+    return themeStroke;
+}
+/** Compute normalized AABB (0..1) for geometry presets that don't fill the full bounding box. */
+function geometryAABB(preset) {
+    const starMatch = preset.match(/^star(\d+)$/);
+    if (starMatch) {
+        const n = parseInt(starMatch[1], 10);
+        const adjMap = { 4: 12500, 5: 19098, 6: 23170, 7: 19098, 8: 17678 };
+        const adj = adjMap[n] ?? 19098;
+        const outerR = 0.5;
+        const innerR = outerR * adj / 50000;
+        let minX = 1, maxX = 0, minY = 1, maxY = 0;
+        for (let i = 0; i < n; i++) {
+            const outerAngle = (-90 + i * (360 / n)) * Math.PI / 180;
+            const ox = 0.5 + outerR * Math.cos(outerAngle);
+            const oy = 0.5 + outerR * Math.sin(outerAngle);
+            minX = Math.min(minX, ox);
+            maxX = Math.max(maxX, ox);
+            minY = Math.min(minY, oy);
+            maxY = Math.max(maxY, oy);
+            const innerAngle = (-90 + (360 / n / 2) + i * (360 / n)) * Math.PI / 180;
+            const ix = 0.5 + innerR * Math.cos(innerAngle);
+            const iy = 0.5 + innerR * Math.sin(innerAngle);
+            minX = Math.min(minX, ix);
+            maxX = Math.max(maxX, ix);
+            minY = Math.min(minY, iy);
+            maxY = Math.max(maxY, iy);
+        }
+        return { minX, minY, maxX, maxY };
+    }
+    return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+}
+function rgbaToColor(c) {
+    if (c.a < 1)
+        return `rgba(${c.r},${c.g},${c.b},${c.a.toFixed(2)})`;
+    return `#${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}`;
+}
+function hex2(n) {
+    return n.toString(16).padStart(2, "0");
+}
+/** Map OOXML dash type to CSS border-style. OfficeImport maps these to simple CSS styles. */
+function dashToCssBorderStyle(dash) {
+    if (!dash || dash === "solid")
+        return "solid";
+    if (dash === "dot" || dash === "sysDot")
+        return "dotted";
+    if (dash === "dash" || dash === "lgDash" || dash === "sysDash")
+        return "dashed";
+    // Compound dash patterns → dashed as closest CSS equivalent
+    return "dashed";
+}