@sliiu/present-renderer 0.0.0-stage → 0.1.0

package/dist/esm/model3d-frame.js

@@ -0,0 +1,158 @@
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+const gltfCache = new Map();
+export function loadGltfScene(src) {
+    let hit = gltfCache.get(src);
+    if (!hit) {
+        const loader = new GLTFLoader();
+        hit = new Promise((resolve, reject) => {
+            loader.load(src, (gltf) => {
+                const root = gltf.scene;
+                const box = new THREE.Box3().setFromObject(root);
+                const size = new THREE.Vector3();
+                const center = new THREE.Vector3();
+                box.getSize(size);
+                box.getCenter(center);
+                root.position.sub(center);
+                const maxDim = Math.max(size.x, size.y, size.z, 1e-6);
+                root.scale.setScalar(1 / maxDim);
+                resolve(root);
+            }, undefined, reject);
+        });
+        gltfCache.set(src, hit);
+    }
+    return hit;
+}
+function deg(v) {
+    return ((v ?? 0) * Math.PI) / 180;
+}
+export function applyModel3DCameraPose(cam, latDeg, lonDeg, dist = 2.8) {
+    const lat = deg(latDeg);
+    const lon = deg(lonDeg);
+    cam.position.set(dist * Math.cos(lat) * Math.sin(lon), dist * Math.sin(lat), dist * Math.cos(lat) * Math.cos(lon));
+    cam.lookAt(0, 0, 0);
+    cam.updateProjectionMatrix();
+}
+export function applyModel3DCamera(cam, s) {
+    applyModel3DCameraPose(cam, s.camera?.rot?.lat ?? 15, s.camera?.rot?.lon ?? 25);
+}
+export function applyModel3DTransform(root, s) {
+    const t = s.modelTransform;
+    if (!t)
+        return;
+    const sc = t.scale;
+    if (sc)
+        root.scale.multiply(new THREE.Vector3(sc.x || 1, sc.y || 1, sc.z || 1));
+    const r = t.rot;
+    if (r)
+        root.rotation.set(deg(r.lat), deg(r.lon), deg(r.rev), "YXZ");
+    const o = t.off;
+    if (o)
+        root.position.add(new THREE.Vector3(o.x, o.y, o.z));
+}
+const previewCache = new Map();
+let previewRenderer = null;
+let previewRendererFailed = false;
+function getPreviewRenderer() {
+    if (previewRenderer)
+        return previewRenderer;
+    if (previewRendererFailed)
+        return null;
+    if (typeof document === "undefined") {
+        previewRendererFailed = true;
+        return null;
+    }
+    try {
+        const r = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
+        r.setPixelRatio(1);
+        r.setClearColor(0x000000, 0);
+        r.outputColorSpace = THREE.SRGBColorSpace;
+        previewRenderer = r;
+    }
+    catch {
+        previewRendererFailed = true;
+    }
+    return previewRenderer;
+}
+function previewKey(s) {
+    return JSON.stringify({
+        src: s.glbSrc,
+        cam: s.camera ?? null,
+        xf: s.modelTransform ?? null,
+        ar: s.bbox.h > 0 ? Math.round((s.bbox.w / s.bbox.h) * 1000) / 1000 : 1,
+    });
+}
+function rasterize(s, root) {
+    const renderer = getPreviewRenderer();
+    if (!renderer)
+        return null;
+    const aspect = s.bbox.h > 0 ? s.bbox.w / s.bbox.h : 1;
+    const w = 256;
+    const h = Math.max(1, Math.round(w / Math.max(aspect, 0.2)));
+    const scene = new THREE.Scene();
+    const clone = root.clone(true);
+    applyModel3DTransform(clone, s);
+    scene.add(clone);
+    const light = new THREE.DirectionalLight(0xffffff, 1.1);
+    light.position.set(2, 3, 4);
+    scene.add(light);
+    scene.add(new THREE.AmbientLight(0xffffff, 0.45));
+    const cam = new THREE.PerspectiveCamera(35, w / h, 0.01, 100);
+    applyModel3DCamera(cam, s);
+    renderer.setSize(w, h, false);
+    renderer.render(scene, cam);
+    return renderer.domElement.toDataURL("image/png");
+}
+export function getModel3DPreviewFrame(s, onReady) {
+    if (typeof document === "undefined" || !s.glbSrc)
+        return null;
+    const key = previewKey(s);
+    const hit = previewCache.get(key);
+    if (hit?.status === "ready")
+        return hit.img;
+    if (hit?.status === "failed")
+        return null;
+    if (hit?.status === "pending") {
+        if (onReady)
+            void hit.wait.then(() => onReady());
+        return null;
+    }
+    const wait = loadGltfScene(s.glbSrc)
+        .then((root) => new Promise((resolve) => {
+        const url = rasterize(s, root);
+        if (!url) {
+            previewCache.set(key, { status: "failed" });
+            resolve();
+            return;
+        }
+        const img = new Image();
+        img.onload = () => {
+            previewCache.set(key, { status: "ready", img });
+            onReady?.();
+            resolve();
+        };
+        img.onerror = () => {
+            previewCache.set(key, { status: "failed" });
+            resolve();
+        };
+        img.src = url;
+    }))
+        .catch(() => {
+        previewCache.set(key, { status: "failed" });
+    });
+    previewCache.set(key, { status: "pending", wait });
+    return null;
+}
+export function waitForModel3DFrames(timeoutMs = 8000) {
+    const pending = [];
+    for (const e of previewCache.values()) {
+        if (e.status === "pending")
+            pending.push(e.wait);
+    }
+    if (!pending.length)
+        return Promise.resolve();
+    return Promise.race([
+        Promise.all(pending).then(() => undefined),
+        new Promise((resolve) => setTimeout(resolve, timeoutMs)),
+    ]);
+}

package/dist/esm/model3d-render.js

@@ -0,0 +1,73 @@
+import { getImage } from "./paint-canvas.js";
+import { getModel3DPreviewFrame } from "./model3d-frame.js";
+export function model3DDisplaySrc(s, onReady) {
+    const frame = s.glbSrc ? getModel3DPreviewFrame(s, onReady) : null;
+    return frame?.src ?? s.rasterSrc;
+}
+export function drawModel3DCanvas(ctx, s, onReady) {
+    const { x, y, w, h } = s.bbox;
+    const src = model3DDisplaySrc(s, onReady);
+    ctx.save();
+    if (src) {
+        const img = getImage(src, onReady);
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(x, y, w, h);
+        if (img.complete && img.naturalWidth > 0) {
+            const scale = Math.max(w / img.naturalWidth, h / img.naturalHeight);
+            const dw = img.naturalWidth * scale;
+            const dh = img.naturalHeight * scale;
+            ctx.drawImage(img, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
+        }
+    }
+    else {
+        ctx.fillStyle = "#e2e8f0";
+        ctx.fillRect(x, y, w, h);
+        ctx.fillStyle = "#475569";
+        ctx.font = `600 ${Math.max(11, Math.min(16, h * 0.12))}px system-ui, sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(s.objectName ?? "3D Model", x + w / 2, y + h / 2);
+    }
+    ctx.strokeStyle = "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+    ctx.restore();
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+export function renderModel3DSvg(container, s, onReady) {
+    while (container.firstChild)
+        container.removeChild(container.firstChild);
+    const { x, y, w, h } = s.bbox;
+    const src = model3DDisplaySrc(s, onReady);
+    if (src) {
+        const im = document.createElementNS(SVG_NS, "image");
+        im.setAttribute("x", String(x));
+        im.setAttribute("y", String(y));
+        im.setAttribute("width", String(w));
+        im.setAttribute("height", String(h));
+        im.setAttribute("href", src);
+        im.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);
+        im.setAttribute("preserveAspectRatio", "xMidYMid slice");
+        container.appendChild(im);
+    }
+    else {
+        const bg = document.createElementNS(SVG_NS, "rect");
+        bg.setAttribute("x", String(x));
+        bg.setAttribute("y", String(y));
+        bg.setAttribute("width", String(w));
+        bg.setAttribute("height", String(h));
+        bg.setAttribute("fill", "#e2e8f0");
+        bg.setAttribute("stroke", "#94a3b8");
+        container.appendChild(bg);
+        const label = document.createElementNS(SVG_NS, "text");
+        label.setAttribute("x", String(x + w / 2));
+        label.setAttribute("y", String(y + h / 2));
+        label.setAttribute("fill", "#475569");
+        label.setAttribute("font-size", String(Math.max(11, Math.min(16, h * 0.12))));
+        label.setAttribute("font-weight", "600");
+        label.setAttribute("text-anchor", "middle");
+        label.setAttribute("dominant-baseline", "middle");
+        label.textContent = s.objectName ?? "3D Model";
+        container.appendChild(label);
+    }
+}

package/dist/esm/morph-transition.js

@@ -0,0 +1,54 @@
+import { SvgBackend } from "./svg-backend.js";
+function overlayBoxStyle(stage) {
+    return [
+        "position:absolute",
+        `left:${stage.offsetLeft}px`,
+        `top:${stage.offsetTop}px`,
+        `width:${stage.style.width || `${stage.clientWidth}px`}`,
+        `height:${stage.style.height || `${stage.clientHeight}px`}`,
+        "pointer-events:none",
+        "overflow:hidden",
+    ].join(";");
+}
+/**
+ * Mount SVG shape layers for morph (FLIP) when the live stage lacks per-shape DOM
+ * ids (canvas / hybrid bitmap segments). Pure-SVG stages only need the ghost overlay.
+ */
+export function mountMorphTransitionLayers(stageWrap, stage, prevScene, curScene, opts = {}) {
+    const ghostZ = opts.ghostZIndex ?? 1000;
+    const stageZ = opts.stageZIndex ?? 1001;
+    const ghostWrap = document.createElement("div");
+    ghostWrap.style.cssText = `${overlayBoxStyle(stage)};z-index:${ghostZ}`;
+    if (opts.chromeBg)
+        ghostWrap.style.background = opts.chromeBg;
+    stageWrap.appendChild(ghostWrap);
+    const ghostBe = new SvgBackend(prevScene, ghostWrap, { transparent: true });
+    ghostBe.flush();
+    const needsStageOverlay = !stage.querySelector("[data-id],[data-shape-id]");
+    let stageOverlay = null;
+    let stageBe = null;
+    let target = stage;
+    let hidStage = false;
+    if (needsStageOverlay) {
+        stageOverlay = document.createElement("div");
+        stageOverlay.style.cssText = `${overlayBoxStyle(stage)};z-index:${stageZ}`;
+        stageWrap.appendChild(stageOverlay);
+        stageBe = new SvgBackend(curScene, stageOverlay, { transparent: true });
+        stageBe.flush();
+        target = stageOverlay;
+        stage.style.visibility = "hidden";
+        hidStage = true;
+    }
+    return {
+        ghost: ghostWrap,
+        target,
+        cleanup() {
+            ghostBe.destroy();
+            stageBe?.destroy();
+            ghostWrap.remove();
+            stageOverlay?.remove();
+            if (hidStage)
+                stage.style.visibility = "";
+        },
+    };
+}

package/dist/esm/node-affine.js

@@ -0,0 +1,71 @@
+export function affMul(m, n) {
+    return {
+        a: m.a * n.a + m.c * n.b,
+        b: m.b * n.a + m.d * n.b,
+        c: m.a * n.c + m.c * n.d,
+        d: m.b * n.c + m.d * n.d,
+        e: m.a * n.e + m.c * n.f + m.e,
+        f: m.b * n.e + m.d * n.f + m.f,
+    };
+}
+function affTranslate(x, y) {
+    return { a: 1, b: 0, c: 0, d: 1, e: x, f: y };
+}
+/** 单个节点的 SVG 变换：先绕 bbox 中心旋转缩放，再平移 tx/ty。 */
+export function nodeAffine(node) {
+    const s = node.shape;
+    const cx = s.bbox.x + s.bbox.w / 2;
+    const cy = s.bbox.y + s.bbox.h / 2;
+    const flipX = s.transform?.scaleX ?? 1;
+    const flipY = s.transform?.scaleY ?? 1;
+    const sx = node.scale * node.scaleX * node.widthScale * (flipX < 0 ? -1 : 1);
+    const sy = node.scale * node.scaleY * node.heightScale * (flipY < 0 ? -1 : 1);
+    const rad = ((node.rotation || 0) * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const a = cos * sx;
+    const b = sin * sx;
+    const c = -sin * sy;
+    const d = cos * sy;
+    const e = cx - (a * cx + c * cy) + node.tx;
+    const f = cy - (b * cx + d * cy) + node.ty;
+    return { a, b, c, d, e, f };
+}
+/** 从最外层祖先乘到自身。幻灯片根是恒等变换，乘进去不改变结果。 */
+export function accumulatedAffine(node) {
+    const chain = [];
+    let cur = node;
+    while (cur) {
+        chain.push(cur);
+        cur = cur.parent;
+    }
+    let m = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    for (let i = chain.length - 1; i >= 0; i--)
+        m = affMul(m, nodeAffine(chain[i]));
+    return m;
+}
+/**
+ * wrapper 已放在 slide 坐标 (originX, originY)。CSS transform-origin 为 0 0 时，
+ * 用这个矩阵才能让视觉位置等于 accumulatedAffine。
+ */
+export function cssAffineForBox(m, originX, originY) {
+    return affMul(affMul(affTranslate(-originX, -originY), m), affTranslate(originX, originY));
+}
+export function chainOpacity(node) {
+    let alpha = 1;
+    let cur = node;
+    while (cur) {
+        alpha *= cur.opacity;
+        cur = cur.parent;
+    }
+    return alpha;
+}
+export function chainHidden(node) {
+    let cur = node;
+    while (cur) {
+        if ((cur.visibleOverride ?? cur.shape.visible) === false)
+            return true;
+        cur = cur.parent;
+    }
+    return false;
+}

package/dist/esm/ole-render.js

@@ -0,0 +1,286 @@
+import { getImage } from "./paint-canvas.js";
+const SVG_NS = "http://www.w3.org/2000/svg";
+function truncateLabel(text, maxLen) {
+    if (text.length <= maxLen)
+        return text;
+    return text.slice(0, Math.max(1, maxLen - 1)) + "…";
+}
+/** Full-bleed package preview (not icon mode). */
+export function oleUsesPackagePreview(s) {
+    return Boolean(s.previewSrc && s.showAsIcon === false);
+}
+function oleLayout(bbox) {
+    const { x, y, w, h } = bbox;
+    const pad = Math.max(4, Math.min(w, h) * 0.06);
+    const badgeSize = Math.min(w * 0.28, h * 0.55, 72);
+    const badgeX = x + pad;
+    const badgeY = y + (h - badgeSize) / 2;
+    const textX = badgeX + badgeSize + pad;
+    const textW = Math.max(0, x + w - pad - textX);
+    return { pad, badgeSize, badgeX, badgeY, textX, textW, cx: x + w / 2, cy: y + h / 2 };
+}
+function drawPreviewBadge(ctx, s, x, y) {
+    const badgeColor = s.badgeColor ?? "#64748b";
+    const badgeText = s.badgeText ?? (s.previewKind === "pdf" ? "PDF" : "OLE");
+    const size = 28;
+    ctx.save();
+    ctx.fillStyle = "rgba(15,23,42,0.55)";
+    ctx.fillRect(x, y, size + 8, size + 8);
+    ctx.fillStyle = badgeColor;
+    if (typeof ctx.roundRect === "function") {
+        ctx.beginPath();
+        ctx.roundRect(x + 4, y + 4, size, size, 4);
+        ctx.fill();
+    }
+    else {
+        ctx.fillRect(x + 4, y + 4, size, size);
+    }
+    ctx.fillStyle = "#ffffff";
+    ctx.font = "bold 10px system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(badgeText.slice(0, 4), x + 4 + size / 2, y + 4 + size / 2);
+    ctx.restore();
+}
+function drawOleImagePreview(ctx, s) {
+    const { x, y, w, h } = s.bbox;
+    const src = s.previewSrc;
+    const img = getImage(src);
+    ctx.save();
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(x, y, w, h);
+    if (img.complete && img.naturalWidth > 0) {
+        ctx.drawImage(img, x, y, w, h);
+    }
+    ctx.strokeStyle = "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+    drawPreviewBadge(ctx, s, x + 4, y + 4);
+    ctx.restore();
+}
+function drawOlePdfCanvasPlaceholder(ctx, s) {
+    const { x, y, w, h } = s.bbox;
+    ctx.save();
+    ctx.fillStyle = "#f1f5f9";
+    ctx.fillRect(x, y, w, h);
+    ctx.strokeStyle = "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 3]);
+    ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+    ctx.setLineDash([]);
+    const title = s.objectName ?? s.embedFileName ?? "PDF Document";
+    ctx.fillStyle = "#0f172a";
+    ctx.font = `600 ${Math.max(11, Math.min(16, h * 0.12))}px system-ui, sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(truncateLabel(title, 40), x + w / 2, y + h / 2 - 8);
+    ctx.fillStyle = "#64748b";
+    ctx.font = `${Math.max(9, h * 0.08)}px system-ui, sans-serif`;
+    ctx.fillText("PDF preview (editor)", x + w / 2, y + h / 2 + 12);
+    drawPreviewBadge(ctx, s, x + 4, y + 4);
+    ctx.restore();
+}
+/** Canvas / export path: package preview or icon tile + filename. */
+export function drawOleCanvas(ctx, s) {
+    if (oleUsesPackagePreview(s)) {
+        if (s.previewKind === "image") {
+            drawOleImagePreview(ctx, s);
+            return;
+        }
+        if (s.previewKind === "pdf") {
+            drawOlePdfCanvasPlaceholder(ctx, s);
+            return;
+        }
+    }
+    const { x, y, w, h } = s.bbox;
+    const badgeColor = s.badgeColor ?? "#64748b";
+    const badgeText = s.badgeText ?? "OLE";
+    const title = s.objectName ?? s.embedFileName ?? "Embedded Object";
+    const subtitle = s.isLinked ? `${s.typeLabel ?? "Object"} (linked)` : s.typeLabel ?? "Embedded Object";
+    ctx.save();
+    ctx.fillStyle = "#f8fafc";
+    ctx.strokeStyle = "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 3]);
+    const rr = Math.min(w, h) * 0.08;
+    if (typeof ctx.roundRect === "function") {
+        ctx.beginPath();
+        ctx.roundRect(x, y, w, h, rr);
+        ctx.fill();
+        ctx.stroke();
+    }
+    else {
+        ctx.fillRect(x, y, w, h);
+        ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
+    }
+    ctx.setLineDash([]);
+    const layout = oleLayout(s.bbox);
+    const showIcon = s.showAsIcon !== false && layout.textW > 8;
+    if (showIcon) {
+        const br = Math.min(layout.badgeSize * 0.18, 8);
+        ctx.fillStyle = badgeColor;
+        if (typeof ctx.roundRect === "function") {
+            ctx.beginPath();
+            ctx.roundRect(layout.badgeX, layout.badgeY, layout.badgeSize, layout.badgeSize, br);
+            ctx.fill();
+        }
+        else {
+            ctx.fillRect(layout.badgeX, layout.badgeY, layout.badgeSize, layout.badgeSize);
+        }
+        ctx.fillStyle = "#ffffff";
+        const fs = Math.max(9, layout.badgeSize * 0.28);
+        ctx.font = `bold ${fs}px system-ui, sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(badgeText, layout.badgeX + layout.badgeSize / 2, layout.badgeY + layout.badgeSize / 2);
+    }
+    const titleFs = Math.max(10, Math.min(16, h * 0.14));
+    const subFs = Math.max(8, titleFs * 0.78);
+    ctx.textAlign = showIcon ? "left" : "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "#0f172a";
+    ctx.font = `600 ${titleFs}px system-ui, sans-serif`;
+    const titleX = showIcon ? layout.textX : layout.cx;
+    const titleMax = showIcon ? Math.floor(layout.textW / (titleFs * 0.55)) : Math.floor(w / (titleFs * 0.55));
+    ctx.fillText(truncateLabel(title, Math.max(4, titleMax)), titleX, layout.cy - subFs * 0.55);
+    ctx.fillStyle = "#64748b";
+    ctx.font = `400 ${subFs}px system-ui, sans-serif`;
+    const subMax = showIcon ? Math.floor(layout.textW / (subFs * 0.5)) : Math.floor(w / (subFs * 0.5));
+    ctx.fillText(truncateLabel(subtitle, Math.max(6, subMax)), titleX, layout.cy + titleFs * 0.45);
+    ctx.restore();
+}
+function appendPreviewBadgeSvg(container, s, x, y) {
+    const badgeColor = s.badgeColor ?? "#64748b";
+    const badgeText = s.badgeText ?? (s.previewKind === "pdf" ? "PDF" : "OLE");
+    const tile = document.createElementNS(SVG_NS, "rect");
+    tile.setAttribute("x", String(x + 4));
+    tile.setAttribute("y", String(y + 4));
+    tile.setAttribute("width", "28");
+    tile.setAttribute("height", "28");
+    tile.setAttribute("rx", "4");
+    tile.setAttribute("fill", badgeColor);
+    container.appendChild(tile);
+    const badge = document.createElementNS(SVG_NS, "text");
+    badge.setAttribute("x", String(x + 18));
+    badge.setAttribute("y", String(y + 20));
+    badge.setAttribute("fill", "#ffffff");
+    badge.setAttribute("font-size", "10");
+    badge.setAttribute("font-weight", "700");
+    badge.setAttribute("text-anchor", "middle");
+    badge.setAttribute("dominant-baseline", "middle");
+    badge.textContent = badgeText.slice(0, 4);
+    container.appendChild(badge);
+}
+/** SVG preview path — package preview via image / PDF embed, else icon placeholder. */
+export function renderOleSvg(container, s) {
+    while (container.firstChild)
+        container.removeChild(container.firstChild);
+    const { x, y, w, h } = s.bbox;
+    if (oleUsesPackagePreview(s) && s.previewSrc) {
+        if (s.previewKind === "image") {
+            const im = document.createElementNS(SVG_NS, "image");
+            im.setAttribute("x", String(x));
+            im.setAttribute("y", String(y));
+            im.setAttribute("width", String(w));
+            im.setAttribute("height", String(h));
+            im.setAttribute("href", s.previewSrc);
+            im.setAttributeNS("http://www.w3.org/1999/xlink", "href", s.previewSrc);
+            im.setAttribute("preserveAspectRatio", "none");
+            container.appendChild(im);
+            const border = document.createElementNS(SVG_NS, "rect");
+            border.setAttribute("x", String(x));
+            border.setAttribute("y", String(y));
+            border.setAttribute("width", String(w));
+            border.setAttribute("height", String(h));
+            border.setAttribute("fill", "none");
+            border.setAttribute("stroke", "#94a3b8");
+            border.setAttribute("stroke-width", "1");
+            container.appendChild(border);
+            appendPreviewBadgeSvg(container, s, x, y);
+            return;
+        }
+        if (s.previewKind === "pdf") {
+            const fo = document.createElementNS(SVG_NS, "foreignObject");
+            fo.setAttribute("x", String(x));
+            fo.setAttribute("y", String(y));
+            fo.setAttribute("width", String(w));
+            fo.setAttribute("height", String(h));
+            const wrap = document.createElement("div");
+            wrap.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+            wrap.style.width = "100%";
+            wrap.style.height = "100%";
+            wrap.style.background = "#f8fafc";
+            wrap.style.overflow = "hidden";
+            const embed = document.createElement("embed");
+            embed.src = s.previewSrc;
+            embed.type = "application/pdf";
+            embed.style.width = "100%";
+            embed.style.height = "100%";
+            embed.style.pointerEvents = "none";
+            wrap.appendChild(embed);
+            fo.appendChild(wrap);
+            container.appendChild(fo);
+            appendPreviewBadgeSvg(container, s, x, y);
+            return;
+        }
+    }
+    const badgeColor = s.badgeColor ?? "#64748b";
+    const badgeText = s.badgeText ?? "OLE";
+    const title = s.objectName ?? s.embedFileName ?? "Embedded Object";
+    const subtitle = s.isLinked ? `${s.typeLabel ?? "Object"} (linked)` : s.typeLabel ?? "Embedded Object";
+    const bg = document.createElementNS(SVG_NS, "rect");
+    bg.setAttribute("x", String(x));
+    bg.setAttribute("y", String(y));
+    bg.setAttribute("width", String(w));
+    bg.setAttribute("height", String(h));
+    bg.setAttribute("rx", String(Math.min(w, h) * 0.08));
+    bg.setAttribute("fill", "#f8fafc");
+    bg.setAttribute("stroke", "#94a3b8");
+    bg.setAttribute("stroke-width", "1");
+    bg.setAttribute("stroke-dasharray", "4 3");
+    container.appendChild(bg);
+    const layout = oleLayout(s.bbox);
+    const showIcon = s.showAsIcon !== false && layout.textW > 8;
+    if (showIcon) {
+        const tile = document.createElementNS(SVG_NS, "rect");
+        tile.setAttribute("x", String(layout.badgeX));
+        tile.setAttribute("y", String(layout.badgeY));
+        tile.setAttribute("width", String(layout.badgeSize));
+        tile.setAttribute("height", String(layout.badgeSize));
+        tile.setAttribute("rx", String(Math.min(layout.badgeSize * 0.18, 8)));
+        tile.setAttribute("fill", badgeColor);
+        container.appendChild(tile);
+        const badge = document.createElementNS(SVG_NS, "text");
+        badge.setAttribute("x", String(layout.badgeX + layout.badgeSize / 2));
+        badge.setAttribute("y", String(layout.badgeY + layout.badgeSize / 2));
+        badge.setAttribute("fill", "#ffffff");
+        badge.setAttribute("font-size", String(Math.max(9, layout.badgeSize * 0.28)));
+        badge.setAttribute("font-weight", "700");
+        badge.setAttribute("text-anchor", "middle");
+        badge.setAttribute("dominant-baseline", "middle");
+        badge.textContent = badgeText;
+        container.appendChild(badge);
+    }
+    const titleFs = Math.max(10, Math.min(16, h * 0.14));
+    const subFs = Math.max(8, titleFs * 0.78);
+    const titleX = showIcon ? layout.textX : layout.cx;
+    const titleEl = document.createElementNS(SVG_NS, "text");
+    titleEl.setAttribute("x", String(titleX));
+    titleEl.setAttribute("y", String(layout.cy - subFs * 0.55));
+    titleEl.setAttribute("fill", "#0f172a");
+    titleEl.setAttribute("font-size", String(titleFs));
+    titleEl.setAttribute("font-weight", "600");
+    titleEl.setAttribute("text-anchor", showIcon ? "start" : "middle");
+    titleEl.setAttribute("dominant-baseline", "middle");
+    titleEl.textContent = truncateLabel(title, 48);
+    container.appendChild(titleEl);
+    const subEl = document.createElementNS(SVG_NS, "text");
+    subEl.setAttribute("x", String(titleX));
+    subEl.setAttribute("y", String(layout.cy + titleFs * 0.45));
+    subEl.setAttribute("fill", "#64748b");
+    subEl.setAttribute("font-size", String(subFs));
+    subEl.setAttribute("text-anchor", showIcon ? "start" : "middle");
+    subEl.setAttribute("dominant-baseline", "middle");
+    subEl.textContent = truncateLabel(subtitle, 56);
+    container.appendChild(subEl);
+}