@markdstage/markdstage 3.4.0 → 3.8.1

package/shared/renderer/scene-svg.mjs

@@ -6,10 +6,18 @@ const MATH_NS = "http://www.w3.org/1998/Math/MathML";
 const SVG_TAGS = new Set("svg g defs symbol switch title desc path rect circle ellipse polygon polyline line text tspan textPath image use marker clipPath mask pattern linearGradient radialGradient stop filter feDropShadow feGaussianBlur feOffset feBlend feColorMatrix feComposite feFlood feMerge feMergeNode feComponentTransfer feFuncR feFuncG feFuncB feFuncA feConvolveMatrix feDisplacementMap feTurbulence feMorphology feImage feDiffuseLighting feSpecularLighting feDistantLight fePointLight feSpotLight feTile foreignObject".split(" "));
 const HTML_TAGS = new Set("div span p br b strong i em s u small sub sup ul ol li code pre img table thead tbody tr th td".split(" "));
 const MATH_TAGS = new Set("math mrow mi mn mo mtext mspace ms mfrac msqrt mroot mstyle merror mpadded mphantom mfenced menclose msub msup msubsup munder mover munderover mmultiscripts mprescripts none mtable mtr mtd semantics annotation".split(" "));
-const ATTRIBUTES = new Set("id class x y x1 y1 x2 y2 dx dy width height cx cy r rx ry d points viewBox preserveAspectRatio transform fill fill-opacity fill-rule stroke stroke-width stroke-opacity stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit opacity color font-family font-size font-weight font-style text-anchor dominant-baseline alignment-baseline textLength lengthAdjust letter-spacing word-spacing text-decoration visibility display overflow pointer-events role tabindex focusable marker-start marker-mid marker-end markerWidth markerHeight markerUnits refX refY orient clip-path clipPathUnits mask maskUnits maskContentUnits filter filterUnits primitiveUnits in in2 result stdDeviation mode type values operator k1 k2 k3 k4 flood-color flood-opacity offset stop-color stop-opacity gradientUnits gradientTransform spreadMethod patternUnits patternContentUnits patternTransform".split(" "));
-const CSS_PROPERTIES = new Set("fill fill-opacity fill-rule stroke stroke-width stroke-opacity stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit opacity color font-family font-size font-weight font-style font-variant line-height text-align text-anchor dominant-baseline alignment-baseline text-decoration letter-spacing word-spacing white-space overflow-wrap word-break display visibility overflow box-sizing width height min-width min-height max-width max-height padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left border border-radius background-color vertical-align marker-start marker-mid marker-end clip-path filter".split(" "));
+const ATTRIBUTES = new Set("id class name x y x1 y1 x2 y2 dx dy width height cx cy r rx ry d points viewBox preserveAspectRatio transform fill fill-opacity fill-rule stroke stroke-width stroke-opacity stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit opacity color font-family font-size font-weight font-style text-anchor dominant-baseline alignment-baseline textLength lengthAdjust letter-spacing word-spacing text-decoration visibility display overflow pointer-events role tabindex focusable marker-start marker-mid marker-end markerWidth markerHeight markerUnits refX refY orient clip-path clipPathUnits mask maskUnits maskContentUnits filter filterUnits primitiveUnits in in2 result stdDeviation mode type values operator k1 k2 k3 k4 flood-color flood-opacity offset stop-color stop-opacity gradientUnits gradientTransform spreadMethod patternUnits patternContentUnits patternTransform".split(" "));
+const CSS_PROPERTIES = new Set("fill fill-opacity fill-rule stroke stroke-width stroke-opacity stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit opacity color font-family font-size font-weight font-style font-variant line-height text-align text-anchor dominant-baseline alignment-baseline text-decoration text-transform letter-spacing word-spacing white-space overflow-wrap word-break display visibility overflow box-sizing width height min-width min-height max-width max-height padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left border border-radius background-color vertical-align marker-start marker-mid marker-end clip-path filter".split(" "));
+const SVG_GEOMETRY_PROPERTIES = new Set(["cx", "cy", "d", "r", "x", "y", "rx", "ry"]);
+const SVG_GEOMETRY_BY_TAG = {
+  circle: ["cx", "cy", "r"],
+  path: ["d"],
+  rect: ["x", "y", "width", "height", "rx", "ry"],
+};
 for (const attribute of "alt colspan rowspan systemLanguage startOffset method spacing baseFrequency numOctaves seed stitchTiles scale xChannelSelector yChannelSelector radius order kernelMatrix divisor bias targetX targetY edgeMode preserveAlpha tableValues slope intercept amplitude exponent surfaceScale diffuseConstant specularConstant specularExponent azimuth elevation limitingConeAngle pointsAtX pointsAtY pointsAtZ z mathvariant mathsize mathcolor mathbackground columnalign rowalign columnspacing rowspacing stretchy fence separator accent accentunder largeop movablelimits lspace rspace encoding".split(" ")) ATTRIBUTES.add(attribute);
-for (const property of "position top right bottom left z-index transform transform-origin border-top border-right border-bottom border-left border-top-width border-right-width border-bottom-width border-left-width border-top-style border-right-style border-bottom-style border-left-style border-top-color border-right-color border-bottom-color border-left-color object-fit object-position flex flex-direction flex-wrap align-items align-content justify-content gap float clear".split(" ")) CSS_PROPERTIES.add(property);
+for (const property of "position top right bottom left z-index transform transform-box transform-origin outline outline-width outline-style outline-color outline-offset border-top border-right border-bottom border-left border-top-width border-right-width border-bottom-width border-left-width border-top-style border-right-style border-bottom-style border-left-style border-top-color border-right-color border-bottom-color border-left-color object-fit object-position flex flex-direction flex-wrap align-items align-content justify-content gap float clear".split(" ")) CSS_PROPERTIES.add(property);
+// Local artwork must keep the effects that prevented native conversion.
+for (const property of "text-shadow mask-image mask-mode mask-type mask-size mask-position mask-repeat mask-origin mask-clip mask-composite mix-blend-mode isolation paint-order vector-effect rotate scale translate".split(" ")) CSS_PROPERTIES.add(property);
 let renderSequence = 0;
 
 function portableString(value) {
@@ -64,6 +72,119 @@ function inlineGeometry(source, property) {
     || source.style?.getPropertyValue(property);
 }
 
+function simplePixelMetric(value) {
+  const match = /^([-+]?(?:\d*\.?\d+)(?:e[-+]?\d+)?)(?:px)?$/i.exec(
+    String(value || "").trim(),
+  );
+  return match ? Number(match[1]) : null;
+}
+
+function pathGeometry(value) {
+  let text = String(value || "").trim();
+  if (!text || text === "none") return { commands: "", numbers: [] };
+  const cssPath = /^path\(["'](.*)["']\)$/s.exec(text);
+  if (cssPath) text = cssPath[1];
+  const tokenPattern = /[-+]?(?:\d*\.?\d+)(?:e[-+]?\d+)?|[a-z]/gi;
+  if (text.replace(tokenPattern, "").replace(/[\s,]/g, "")) return null;
+  const tokens = text.match(tokenPattern) || [];
+  return {
+    commands: tokens
+      .filter((token) => /^[a-z]$/i.test(token))
+      .map((command) => command.toLowerCase() === "z" ? "Z" : command)
+      .join(""),
+    numbers: tokens
+      .filter((token) => !/^[a-z]$/i.test(token))
+      .map(Number),
+  };
+}
+
+function sameGeometryMetric(left, right, exact = true) {
+  if (exact) return left === right;
+  // CSSOM shortens computed path numbers. Treat sub-pixel serialization
+  // rounding as attribute-equivalent rather than rewriting precise paths.
+  return Math.abs(left - right) <= Math.max(
+    0.0001,
+    Math.max(Math.abs(left), Math.abs(right)) * 0.00001,
+  );
+}
+
+function pathCssCanonicalizer(root, computedStyle) {
+  const documentRef = root?.ownerDocument || globalThis.document;
+  let host;
+  let reference;
+  const connect = () => {
+    if (reference) return true;
+    const parent = documentRef?.body || documentRef?.documentElement;
+    if (!parent?.appendChild ||
+        !documentRef?.createElement ||
+        !documentRef?.createElementNS) return false;
+    host = documentRef.createElement("div");
+    if (!host?.attachShadow) return false;
+    host.setAttribute("aria-hidden", "true");
+    host.style.cssText = [
+      "position:fixed",
+      "left:-10000px",
+      "top:-10000px",
+      "width:0",
+      "height:0",
+      "overflow:hidden",
+      "visibility:hidden",
+      "pointer-events:none",
+      "contain:strict",
+    ].join(";");
+    const shadow = host.attachShadow({ mode: "closed" });
+    const svg = documentRef.createElementNS(SVG_NS, "svg");
+    reference = documentRef.createElementNS(SVG_NS, "path");
+    svg.setAttribute("width", "0");
+    svg.setAttribute("height", "0");
+    svg.appendChild(reference);
+    shadow.appendChild(svg);
+    parent.appendChild(host);
+    return reference.isConnected;
+  };
+  return {
+    value(attribute) {
+      if (typeof attribute !== "string" || !attribute) return "";
+      if (!connect()) return null;
+      reference.removeAttribute("style");
+      reference.setAttribute("d", attribute);
+      return computedStyle(reference).getPropertyValue("d") || "";
+    },
+    dispose() {
+      host?.remove();
+    },
+  };
+}
+
+function hasComputedGeometryOverride(source, property, value, canonicalizePath) {
+  const attribute = source.getAttribute?.(property);
+  if (property === "d") {
+    const computed = pathGeometry(value);
+    const declared = pathGeometry(attribute);
+    if (computed && declared &&
+        computed.commands === declared.commands &&
+        computed.numbers.length === declared.numbers.length &&
+        computed.numbers.every((number, index) =>
+          sameGeometryMetric(number, declared.numbers[index], true))) {
+      return false;
+    }
+    const canonical = canonicalizePath(attribute);
+    if (canonical !== null) return String(value).trim() !== canonical.trim();
+    const exact = Boolean(source.closest?.("marker"));
+    return computed === null ||
+      declared === null ||
+      computed.commands !== declared.commands ||
+      computed.numbers.length !== declared.numbers.length ||
+      computed.numbers.some((number, index) =>
+        !sameGeometryMetric(number, declared.numbers[index], exact));
+  }
+  const computed = simplePixelMetric(value);
+  const declared = simplePixelMetric(attribute);
+  return computed === null ||
+    declared === null ||
+    !sameGeometryMetric(computed, declared);
+}
+
 /** A JSON-serializable primitive builder; it never creates or parses DOM. */
 export function svgPrimitive(tag, attributes = {}) {
   const primitive = { tag, attributes: {}, children: [] };
@@ -83,6 +204,9 @@ export function svgPrimitive(tag, attributes = {}) {
  */
 export function captureSvgTree(element, { slots = new Map(), computedStyle = globalThis.getComputedStyle } = {}) {
   let count = 0;
+  const pathCanonicalizer = computedStyle
+    ? pathCssCanonicalizer(element, computedStyle)
+    : null;
   function capture(source, depth, root = false) {
     if (++count > 50000 || depth > 128) throw new Error("SVG primitive limit exceeded");
     if (source.nodeType === 3) return { text: portableString(source.textContent || "") };
@@ -104,6 +228,11 @@ export function captureSvgTree(element, { slots = new Map(), computedStyle = glo
         // SVG geometry and the root's responsive CSS must not become screen pixels.
         if (!html && !math && /^(?:min-|max-)?(?:width|height)$/.test(property)) continue;
         let value = localPaint(style.getPropertyValue(property), source);
+        if ((html || math) && (property === "width" || property === "height")) {
+          // CSSOM rounds intrinsic used pixels; retaining auto avoids fallback layout drift.
+          const specified = source.computedStyleMap?.().get(property)?.toString?.();
+          if (specified === "auto") value = specified;
+        }
         if (property === "transform") {
           // Typed OM retains matrix precision and includes stylesheet overrides.
           const transform = source.computedStyleMap?.().get("transform");
@@ -111,12 +240,36 @@ export function captureSvgTree(element, { slots = new Map(), computedStyle = glo
         }
         if (value && safeCss(value)) primitive.style[property] = value;
       }
+      const geometryProperties = tag === "path"
+        ? SVG_GEOMETRY_BY_TAG.path
+        : source.closest?.("marker") || source.closest?.("clipPath")
+          ? SVG_GEOMETRY_BY_TAG[tag] || []
+          : [];
+      for (const property of geometryProperties) {
+        const value = style.getPropertyValue(property);
+        if (value && hasComputedGeometryOverride(
+          source,
+          property,
+          value,
+          (attribute) => pathCanonicalizer?.value(attribute) ?? null,
+        ) &&
+            safeCss(value)) {
+          primitive.style[property] = portableString(value);
+        }
+      }
       if (root) {
         for (const property of ["width", "height", "max-width", "max-height"]) {
           const value = inlineGeometry(source, property);
           if (value && safeCss(value)) primitive.style[property] = value;
         }
       }
+      if (tag === "foreignObject") {
+        // Class multiplicities override their measured SVG attributes with CSS sizing.
+        for (const property of ["width", "height"]) {
+          const value = inlineGeometry(source, property);
+          if (value && safeCss(value)) primitive.style[property] = value;
+        }
+      }
     }
     for (const child of source.childNodes || []) {
       const captured = capture(child, depth + 1);
@@ -124,7 +277,11 @@ export function captureSvgTree(element, { slots = new Map(), computedStyle = glo
     }
     return primitive;
   }
-  return capture(element, 0, true);
+  try {
+    return capture(element, 0, true);
+  } finally {
+    pathCanonicalizer?.dispose();
+  }
 }
 
 function setAttributes(element, attributes = {}) {
@@ -175,7 +332,11 @@ export function sceneToSvg(scene, {
     if (!(math ? MATH_TAGS : html ? HTML_TAGS : SVG_TAGS).has(value.tag)) throw new Error(`Unsupported SVG primitive: ${value.tag}`);
     const element = dom(value.tag, value.attributes, math ? MATH_NS : html ? HTML_NS : SVG_NS);
     for (const [property, content] of Object.entries(value.style || {})) {
-      if (CSS_PROPERTIES.has(property) && safeCss(content)) element.style?.setProperty(property, String(content));
+      const styleValue = stringValue(content);
+      if ((CSS_PROPERTIES.has(property) || SVG_GEOMETRY_PROPERTIES.has(property)) &&
+          safeCss(styleValue)) {
+        element.style?.setProperty(property, styleValue);
+      }
     }
     if (value.textContent !== undefined) element.textContent = String(value.textContent);
     for (const child of value.children || []) {
@@ -188,6 +349,9 @@ export function sceneToSvg(scene, {
     return {
       fill: style.fill ?? "none", stroke: style.stroke ?? "none",
       "stroke-width": style.strokeWidth ?? 0, opacity: style.opacity ?? 1,
+      "fill-opacity": style.fillOpacity ?? 1,
+      "stroke-opacity": style.strokeOpacity ?? 1,
+      "stroke-linecap": style.lineCap,
       "stroke-dasharray": { dash: "8 5", dashDot: "8 4 2 4", dot: "2 4" }[style.dash],
     };
   }
@@ -204,15 +368,62 @@ export function sceneToSvg(scene, {
     if (presets[node.preset]) return dom("polygon", {
       points: presets[node.preset].map(([px, py]) => `${x + px * w},${y + py * h}`).join(" "), ...attrs,
     });
+    const halfHeight = h / 2;
+    const heightBasedPresets = {
+      quarterHeightHexagon: [
+        [x + h / 4, y + h], [x + w - h / 4, y + h], [x + w, y + h / 2],
+        [x + w - h / 4, y], [x + h / 4, y], [x, y + h / 2],
+      ],
+      reverseParallelogram: [
+        [x + halfHeight, y + h],
+        [x + w, y + h],
+        [x + w - halfHeight, y],
+        [x, y],
+      ],
+      trapezoid: [
+        [x, y + h],
+        [x + w, y + h],
+        [x + w - halfHeight, y],
+        [x + halfHeight, y],
+      ],
+      invertedTrapezoid: [
+        [x + halfHeight, y + h],
+        [x + w - halfHeight, y + h],
+        [x + w, y],
+        [x, y],
+      ],
+    };
+    if (heightBasedPresets[node.preset]) return dom("polygon", {
+      points: heightBasedPresets[node.preset].map(([px, py]) => `${px},${py}`).join(" "), ...attrs,
+    });
     if (node.preset === "cylinder") {
       const r = Math.min(h / 4, w / 8);
       return dom("path", { d: `M ${x} ${y + r} A ${w / 2} ${r} 0 0 1 ${x + w} ${y + r} L ${x + w} ${y + h - r} A ${w / 2} ${r} 0 0 1 ${x} ${y + h - r} Z M ${x} ${y + r} A ${w / 2} ${r} 0 0 0 ${x + w} ${y + r}`, ...attrs });
     }
+    if (node.preset === "sequenceTab") {
+      return dom("path", {
+        d: `M ${x} ${y} L ${x + w} ${y} L ${x + w} ${y + h * 0.65} L ${x + w * 0.832} ${y + h} L ${x} ${y + h} Z`,
+        ...attrs,
+      });
+    }
+    if (node.preset === "topRoundedRect") {
+      const r = Math.min(node.style?.cornerRadius ?? 5, w / 2, h / 2);
+      return dom("path", {
+        d: `M ${x} ${y + h} V ${y + r} Q ${x} ${y} ${x + r} ${y} H ${x + w - r} Q ${x + w} ${y} ${x + w} ${y + r} V ${y + h} Z`,
+        ...attrs,
+      });
+    }
     if (node.preset && !["rect", "roundedRect"].includes(node.preset)) throw new Error(`Unsupported scene SVG preset: ${node.preset}`);
     return dom("rect", { x, y, width: w, height: h, rx: node.preset === "roundedRect" ? node.style?.cornerRadius ?? 8 : 0, ...attrs });
   }
-  function text(parent, content, bounds, layout = {}) {
+  function text(parent, content, bounds, layout = {}, rotation) {
     if (!content?.paragraphs?.length) return;
+    const textParent = rotation
+      ? dom("g", {
+          transform: `rotate(${rotation} ${bounds.x + bounds.width / 2} ${bounds.y + bounds.height / 2})`,
+        })
+      : parent;
+    if (textParent !== parent) parent.appendChild(textParent);
     const lines = content.paragraphs.flatMap((paragraph) => {
       const output = [{ ...paragraph, runs: [] }];
       for (const run of paragraph.runs) {
@@ -243,7 +454,7 @@ export function sceneToSvg(scene, {
         span.textContent = run.text;
         label.appendChild(span);
       }
-      parent.appendChild(label);
+      textParent.appendChild(label);
       y += heights[index];
     });
   }
@@ -260,6 +471,11 @@ export function sceneToSvg(scene, {
       element = primitive(fallback);
     } else {
       element = dom("g");
+      if (node.kind === "shape" && node.rotation) {
+        setAttributes(element, {
+          transform: `rotate(${node.rotation} ${node.bounds.x + node.bounds.width / 2} ${node.bounds.y + node.bounds.height / 2})`,
+        });
+      }
       if (node.kind === "shape" || node.kind === "group") element.appendChild(shape(node));
       if (node.kind === "image") element.appendChild(dom("image", {
         ...node.bounds, href: node.src, opacity: node.opacity,
@@ -267,15 +483,15 @@ export function sceneToSvg(scene, {
         role: "img", "aria-label": node.alt,
       }));
       if (node.kind === "connector") {
-        const attrs = { ...paint(node.style), fill: "none", "stroke-linejoin": "round", "stroke-linecap": "round" };
+        const attrs = { ...paint(node.style), fill: "none", "stroke-linejoin": "round", "stroke-linecap": node.style?.lineCap ?? "round" };
         const defs = dom("defs");
         for (const [end, arrow] of [["start", node.arrowStart], ["end", node.arrowEnd]]) {
           if (!arrow || arrow === "none") continue;
           const id = `scene-arrow-${renderId}-${index}-${end}`;
           const marker = dom("marker", { id, viewBox: "0 0 10 10", refX: 9, refY: 5, markerWidth: 7, markerHeight: 7, orient: "auto-start-reverse", markerUnits: "strokeWidth" });
           marker.appendChild(arrow === "oval"
-            ? dom("circle", { cx: 5, cy: 5, r: 4, fill: node.style?.stroke })
-            : dom("path", { d: arrow === "diamond" ? "M 0 5 L 5 0 L 10 5 L 5 10 Z" : arrow === "stealth" ? "M 0 0 L 10 5 L 0 10 L 3 5 Z" : "M 0 0 L 10 5 L 0 10 Z", fill: node.style?.stroke }));
+            ? dom("circle", { cx: 5, cy: 5, r: 4, fill: node.style?.stroke, "fill-opacity": node.style?.strokeOpacity ?? 1 })
+            : dom("path", { d: arrow === "diamond" ? "M 0 5 L 5 0 L 10 5 L 5 10 Z" : arrow === "stealth" ? "M 0 0 L 10 5 L 0 10 L 3 5 Z" : "M 0 0 L 10 5 L 0 10 Z", fill: node.style?.stroke, "fill-opacity": node.style?.strokeOpacity ?? 1 }));
           defs.appendChild(marker);
           attrs[`marker-${end}`] = `url(#${id})`;
         }
@@ -283,7 +499,7 @@ export function sceneToSvg(scene, {
         element.appendChild(dom("path", { d: node.points.map((point, i) => `${i ? "L" : "M"} ${point.x} ${point.y}`).join(" "), ...attrs }));
         if (node.label) text(element, node.label.text, node.label.bounds);
       }
-      if (node.text) text(element, node.text, node.bounds, node.textLayout);
+      if (node.text) text(element, node.text, node.bounds, node.textLayout, node.kind === "text" ? node.rotation : undefined);
       if (node.accessibility?.label) setAttributes(element, { role: node.accessibility.role || "img", "aria-label": node.accessibility.label });
     }
     setAttributes(element, { "data-scene-node": node.kind, "data-scene-source-path": node.sourcePath, "data-scene-id": node.id });

package/shared/renderer/slide-background.mjs

@@ -0,0 +1,22 @@
+/** Parse a local slide background without rewriting the source Markdown. */
+export function parseSlideBackground(value) {
+  if (value === undefined) return "";
+  const invalid = (reason) => {
+    throw new Error(`Invalid background-image: ${reason}`);
+  };
+  if (typeof value !== "string" || !value.trim()) {
+    invalid("expected a non-empty /assets/... image path.");
+  }
+  const path = value.trim().replace(/^assets\//, "/assets/");
+  if (!path.startsWith("/assets/") || /[\\?#\u0000-\u001f\u007f]/.test(path)) {
+    invalid("use a local /assets/... path, without URLs, query strings, or fragments.");
+  }
+  const segments = path.slice("/assets/".length).split("/");
+  if (segments.some((segment) => !segment || segment === "." || segment === ".." || segment.includes(":"))) {
+    invalid("the path must stay inside an assets folder.");
+  }
+  if (!/\.(?:svg|png|webp|jpg|jpeg)$/i.test(path)) {
+    invalid("supported image formats are SVG, PNG, WebP, JPG, and JPEG.");
+  }
+  return path;
+}

package/shared/renderer/slide-viewport.mjs

@@ -0,0 +1,48 @@
+export const OUTPUT_WIDTH = 1280;
+export const OUTPUT_HEIGHT = 720;
+
+// Scale the browsing context, not its contents: SVG text measurement and viewport
+// units must see the same untransformed geometry at every display size.
+export function createSlideViewport(host, { id, title, onNavigate, onKey, onPointer, onLayout, onError }) {
+  const frame = document.createElement("iframe");
+  frame.id = id;
+  frame.title = title;
+  frame.className = "slide-viewport-frame";
+  frame.width = OUTPUT_WIDTH;
+  frame.height = OUTPUT_HEIGHT;
+  frame.src = "./?surface=1";
+  let state = null;
+  let loaded = false;
+  const render = () => {
+    if (loaded && state) frame.contentWindow.__markdstageSurface.render(state);
+  };
+  frame.addEventListener("load", () => {
+    loaded = true;
+    render();
+  });
+  frame.addEventListener("slide-navigate", (event) => onNavigate?.(event.detail));
+  frame.addEventListener("slide-key", (event) => onKey?.(event.detail));
+  frame.addEventListener("slide-pointer", () => onPointer?.());
+  frame.addEventListener("slide-layout", (event) => onLayout?.(event.detail));
+  frame.addEventListener("slide-error", (event) => onError?.(event.detail));
+  const resize = () => {
+    const scale = Math.min(host.clientWidth / OUTPUT_WIDTH, host.clientHeight / OUTPUT_HEIGHT);
+    frame.style.transform = `translate(-50%, -50%) scale(${scale})`;
+  };
+  const observer = new ResizeObserver(resize);
+  host.appendChild(frame);
+  observer.observe(host);
+  resize();
+  return {
+    setState(next) {
+      state = next;
+      frame.tabIndex = next.navigationEnabled ? 0 : -1;
+      render();
+    },
+    dispose() {
+      observer.disconnect();
+      frame.remove();
+      state = null;
+    },
+  };
+}

package/shared/renderer/slides.css

@@ -95,10 +95,14 @@
 html,body{height:100%;margin:0;overflow:hidden}
 #stage{height:100%}
 body.fixed-preview-mode #stage{
-  position:fixed;left:50%;top:calc(50% - 24px);width:1280px;height:720px;
-  transform:translate(-50%,-50%) scale(var(--fixed-preview-scale,1));
-  transform-origin:center;box-shadow:0 18px 60px rgba(0,0,0,.38);
+  position:fixed;inset:12px 12px 76px;height:auto;
 }
+.slide-viewport{position:relative;overflow:hidden;}
+.slide-viewport-frame{position:absolute;left:50%;top:50%;width:1280px;height:720px;
+  max-width:none;max-height:none;border:0;transform-origin:center;display:block;}
+body.presenter-mode.fixed-preview-mode #stage{inset:0;background:#000;}
+body.surface-mode #stage{width:1280px;height:720px;}
+body.surface-mode #nav,body.surface-mode .layout-warning{display:none!important;}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
          clip:rect(0,0,0,0);white-space:nowrap;border:0;}
 body{
@@ -336,8 +340,12 @@ footer .page{color:var(--accent-strong);font-weight:600;background:var(--accent-
        letter-spacing:-.045em;text-wrap:balance;}
 .deck.markdstage-placeholder p{
        max-width:32em;margin-top:1.25em;color:#c8cedd;font-size:clamp(18px,2.2vw,30px);}
-.theme-cover-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;
-      max-height:none;object-fit:cover;border-radius:0;box-shadow:none;z-index:0;}
+.slide-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;
+      max-height:none;object-fit:cover;object-position:center;border-radius:0;box-shadow:none;
+      z-index:0;pointer-events:none;}
+.deck.has-slide-background>header,.deck.has-slide-background>.body,
+.deck.has-slide-background>footer,.deck.has-slide-background>.theme-backcover-logo,
+.deck.has-slide-background>.theme-backcover-copyright{z-index:1;}
 .theme-cover-logo{position:absolute;top:var(--deck-pad-y);left:var(--deck-pad-x);
       width:var(--cover-logo-width,clamp(130px,16vw,230px));height:auto;max-height:none;
       border-radius:0;box-shadow:none;z-index:2;}
@@ -442,6 +450,23 @@ footer .page{color:var(--accent-strong);font-weight:600;background:var(--accent-
      font-size:.95em;font-weight:700;}
 .nav-more-icon.nav-fixed-preview{font-size:.72em;}
 .nav-more-label{min-width:0;font-size:.88em;font-weight:600;line-height:1.25;}
+.pptx-export-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 32px));
+     max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--border);
+     border-radius:12px;background:var(--surface);color:var(--fg);font-size:16px;
+     box-shadow:0 12px 34px rgba(0,0,0,.3);}
+.pptx-export-dialog::backdrop{background:rgba(0,0,0,.55);}
+.pptx-export-dialog h2{margin:0 0 24px;font-size:22px;}
+.pptx-export-dialog fieldset{margin:0;padding:0;border:0;min-width:0;}
+.pptx-export-dialog legend{padding:0;margin-bottom:12px;font-weight:600;}
+.pptx-export-choice{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600;}
+.pptx-export-choice input{margin:0;accent-color:var(--accent-strong);}
+.pptx-export-choice input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
+.pptx-export-dialog p{margin:0 0 16px 24px;font-size:14px;line-height:1.5;}
+.pptx-export-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:16px;}
+.pptx-export-actions .presenter-button{min-height:44px;}
+.pptx-export-actions .pptx-export-submit{font-weight:700;color:var(--accent-strong);
+     background:var(--accent-soft);border-color:var(--accent-strong);}
+@media print{.pptx-export-dialog{display:none!important;}}
 .layout-warning{position:fixed;top:14px;right:14px;z-index:55;
      max-width:min(420px,calc(100vw - 28px));padding:.55em .8em;border-radius:8px;
      color:#fff;background:#a4262c;border:1px solid #f1aeb5;
@@ -472,6 +497,7 @@ body.presenter-mode #navPresenterView{display:none;}
 body.presenter-mode #navExport,body.presenter-mode #navExportPptx{display:none;}
 body.presenter-mode #navImport{display:none;}
 body.presenter-mode #navSourceMode{display:none;}
+body.presenter-mode #navFixedPreview{display:none;}
 body.preview-mode .nav,body.preview-mode .overview{display:none!important;}
 /* When no deck is loaded, leave only the load button as the available action. */
 .nav.nav-empty .nav-main,.nav.nav-empty #navMore{display:none;}
@@ -613,7 +639,7 @@ body.presenter-view-mode .layout-warning{display:none;}
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
 /* ===== Fixed 16:9 output surface ===== */
-/* PDF, PNG capture, and the in-canvas fixed preview share these rules. At the
+/* PDF, PNG capture, and all fixed slide viewports share these rules. At the
    CSS reference pixel density, 1280x720 equals the PDF's 13.333333in x 7.5in. */
 body.fixed-output-mode .deck{
   width:1280px;height:720px;min-width:1280px;max-width:1280px;
@@ -642,7 +668,7 @@ body.fixed-output-mode .deck.backcover-slide{background:var(--backcover-bg,var(-
 body.fixed-output-mode .deck::before{position:absolute;}
 body.fixed-output-mode .body{overflow:hidden;}
 body.fixed-output-mode .kicker{font-size:12px;}
-body.fixed-output-mode img:not(.theme-cover-background){max-height:346px;}
+body.fixed-output-mode img:not(.slide-background){max-height:346px;}
 body.fixed-output-mode pre.mermaid svg{max-height:317px;}
 body.fixed-output-mode .architecture-svg{max-height:504px;}
 body.fixed-output-mode footer{gap:.65em;font-size:11px;margin-top:16px;}
@@ -697,17 +723,22 @@ body.pptx-artwork-mode svg [data-pptx-native="table"]{
   color:transparent!important;
   -webkit-text-fill-color:transparent!important;
 }
-body.pptx-artwork-mode svg path[data-pptx-native="connector"]{marker-end:none!important;}
+body.pptx-artwork-mode svg [data-pptx-native="connector"]{
+  marker-start:none!important;
+  marker-mid:none!important;
+  marker-end:none!important;
+}
 body.pptx-artwork-mode svg [data-pptx-native="image"]{opacity:0!important;}
 body.pptx-artwork-mode [data-pptx-shadow-fallback]{box-shadow:none!important;}
-body.pptx-artwork-mode .pptx-fallback-hidden{visibility:hidden!important;}
+body.pptx-artwork-mode .pptx-fallback-hidden,
+body.pptx-artwork-mode .pptx-fallback-hidden *{visibility:hidden!important;}
 body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template){
   background:transparent!important;
 }
 body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)::before{
   display:none!important;
 }
-body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)>.theme-cover-background,
+body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)>.slide-background,
 body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)>.theme-cover-logo{
   visibility:hidden!important;
 }