@markdstage/markdstage 3.2.0 → 3.4.0

package/shared/renderer/renderer.js

@@ -1,7 +1,12 @@
 import { powerPointDashStyle, renderArchitectureBlock } from "./architecture.mjs";
+import { architectureSnapshotToScene } from "./architecture-scene.mjs";
+import { mermaidSvgToScene } from "./mermaid-scene.mjs";
+import { captureSvgTree, sceneToSvg } from "./scene-svg.mjs";
+import { sceneToPptxElements } from "./scene-pptx.mjs";
 import { attachArchitectureEditor } from "./architecture-editor.mjs";
 import {
   DEFAULT_THEME,
+  mermaidThemeVariables,
   normalizeTheme,
   parseFrontMatter,
 } from "./theme.mjs";
@@ -74,11 +79,6 @@ function localAssetUrl(path, documentRef = document) {
 // The deck theme is chosen by the agent (load_deck `theme`) and delivered via
 // /state; slide front matter may override it unless the deck theme was explicit.
 // Anything unrecognized falls back to the default so a slide is never unstyled.
-const MERMAID_THEME = {
-  dark: "dark",
-  light: "default",
-  microsoft: "neutral",
-};
 const SIZE_MODES = new Set(["auto", "normal", "large", "xlarge"]);
 const DEFAULT_SIZE_MODE = "auto";
 let deckTheme = DEFAULT_THEME;
@@ -88,7 +88,7 @@ let customThemeMeta = null;
 // Bumped on every render so a late mermaid finish from a previous slide can't
 // reveal a newer, still-rendering one.
 let renderToken = 0;
-let lastMermaidTheme = null;
+let lastMermaidThemeVariables = null;
 let pptxFallbackSequence = 0;
 const pptxFallbackCaptureElements = new Map();
 // Editing mode is available only in normal view, not presenter or print mode.
@@ -426,13 +426,14 @@ function collectDeckLayout(rendered) {
 function updateFixedPreviewWarning() {
   const warning = document.getElementById("layoutWarning");
   const button = document.getElementById("navFixedPreview");
-  if (!fixedPreviewMode || !layoutTarget) {
+  const empty = document.body.classList.contains("markdstage-empty");
+  if (!fixedPreviewMode || !layoutTarget || empty) {
     document.body.classList.remove("fixed-preview-overflow");
     if (warning) {
       warning.hidden = true;
       warning.textContent = "";
     }
-    if (button) button.dataset.state = fixedPreviewMode ? "active" : "";
+    if (button) button.dataset.state = fixedPreviewMode && !empty ? "active" : "";
     syncMoreControls();
     return;
   }
@@ -564,9 +565,12 @@ function applySyntaxHighlighting(root) {
 // --- mermaid ---------------------------------------------------------------
 // Render every <pre class="mermaid"> in `scope` to SVG. Resilient: a slide with
 // no diagrams, a missing library, or an invalid diagram must never leave the
-// slide blank, so the body is always revealed in the end. The mermaid theme is
-// matched to the slide theme, re-initialized only when it actually changes.
-function runMermaid(scope, theme, token, revealWhenDone = true) {
+// slide blank, so the body is always revealed in the end. Mermaid's palette is
+// derived from the rendered deck's theme custom properties (see
+// theme.mjs#mermaidThemeVariables) so diagrams match the slide instead of
+// picking the closest built-in Mermaid theme, and it is re-initialized only
+// when the resolved colors actually change.
+function runMermaid(scope, deckEl, token, revealWhenDone = true) {
   // Only the latest render may lift the loading veil; a stale finish is ignored.
   const reveal = () => {
     if (revealWhenDone && token === renderToken) {
@@ -579,13 +583,30 @@ function runMermaid(scope, theme, token, revealWhenDone = true) {
     return Promise.resolve();
   }
   try {
-    const wanted = MERMAID_THEME[theme] || "neutral";
-    if (wanted !== lastMermaidTheme) {
-      window.mermaid.initialize({ startOnLoad: false, theme: wanted, securityLevel: "strict" });
-      lastMermaidTheme = wanted;
+    const themeVariables = mermaidThemeVariables(getComputedStyle(deckEl));
+    const serializedThemeVariables = JSON.stringify(themeVariables);
+    if (serializedThemeVariables !== lastMermaidThemeVariables) {
+      window.mermaid.initialize({
+        startOnLoad: false,
+        theme: "base",
+        themeVariables,
+        securityLevel: "strict",
+      });
+      lastMermaidThemeVariables = serializedThemeVariables;
     }
     return Promise.resolve(window.mermaid.run({ nodes }))
       .catch((e) => console.error("Mermaid render failed", e))
+      .then(() => {
+        for (const [index, host] of [...nodes].entries()) {
+          const source = host.querySelector("svg");
+          if (!source || source.hasAttribute("data-scene-backend")) continue;
+          try {
+            renderMermaidScene(source, deckEl, index);
+          } catch (e) {
+            console.error("Mermaid scene render failed", e);
+          }
+        }
+      })
       .finally(reveal);
   } catch (e) {
     console.error("Mermaid init failed", e);
@@ -594,6 +615,79 @@ function runMermaid(scope, theme, token, revealWhenDone = true) {
   }
 }
 
+function renderMermaidScene(svg, deck, blockIndex) {
+  const result = mermaidSvgToScene(svg, {
+    path: `mermaid[${blockIndex}]`,
+    deck,
+    includeSourceElements: true,
+    resolveColor: (value) => resolveModelColor(value, deck),
+  });
+  let { scene } = result;
+  const computedStyle = (element) => {
+    const style = getComputedStyle(element);
+    return {
+      getPropertyValue(property) {
+        // The loading veil is inherited by every SVG descendant, not diagram style.
+        if (property === "visibility" && document.body.classList.contains("mermaid-loading")) {
+          return element.style?.visibility || element.getAttribute("visibility") || "";
+        }
+        return style.getPropertyValue(property);
+      },
+    };
+  };
+  const slots = new Map();
+  try {
+    for (const [index, node] of scene.nodes.entries()) {
+      const exactSource = result.sourceElements?.get(node.sourcePath) ||
+        mermaidElementForSourcePath(svg, node.sourcePath);
+      const owner = scene.nodes.find((candidate) => {
+        if (candidate === node || !node.sourcePath.startsWith(`${candidate.sourcePath}.`)) return false;
+        const candidateSource = result.sourceElements?.get(candidate.sourcePath) ||
+          mermaidElementForSourcePath(svg, candidate.sourcePath);
+        return candidateSource && (!exactSource || candidateSource.contains(exactSource));
+      });
+      if (owner) {
+        node.meta = { ...node.meta, svgOwner: owner.sourcePath };
+        continue;
+      }
+      const source = exactSource ||
+        mermaidFallbackElementForBounds(svg, deck, node.bounds);
+      if (!source) throw new Error(`Mermaid SVG source unavailable: ${node.sourcePath}`);
+      if (slots.has(source)) {
+        node.meta = { ...node.meta, svgOwner: slots.get(source) };
+        continue;
+      }
+      node.meta = { ...node.meta, svg: captureSvgTree(source, { computedStyle }) };
+      slots.set(source, index);
+    }
+    for (const [source, index] of slots) {
+      const ancestor = [...slots.keys()].find((candidate) => candidate !== source && candidate.contains(source));
+      if (ancestor) {
+        scene.nodes[index].meta.svgOwner = slots.get(ancestor);
+        slots.delete(source);
+      }
+    }
+  } catch (error) {
+    // A new Mermaid structure must stay visible even if its source mapping is
+    // not yet understood. Preserve the full safe artwork and report the reason.
+    const reason = `mermaid-svg-source-fallback: ${error.message}`;
+    console.warn(reason);
+    scene = { ...scene, nodes: [{
+      kind: "fallback", sourcePath: "svg", z: 0,
+      bounds: { x: 0, y: 0, width: scene.width, height: scene.height },
+      capability: { pptx: "fallback", reason }, reason,
+      meta: { svg: captureSvgTree(svg, { computedStyle }) },
+    }] };
+    slots.clear();
+    slots.set(svg, 0);
+  }
+  const template = slots.has(svg)
+    ? { sceneNode: slots.get(svg) }
+    : captureSvgTree(svg, { slots, computedStyle });
+  scene.meta = { ...scene.meta, svgRoot: template };
+  svg.replaceWith(sceneToSvg(scene, { document, template }));
+}
+
 // --- slide rendering -------------------------------------------------------
 function moveLeadingSlideTitle(header, bodyEl, specialLayout) {
   if (specialLayout) return null;
@@ -826,7 +920,7 @@ function renderSlide(markdown) {
   const images = waitForImages(slide.deck).then(() => {
     if (token === renderToken) scheduleLayoutRefresh();
   });
-  const mermaid = runMermaid(slide.bodyEl, slide.theme, token, false).finally(() => {
+  const mermaid = runMermaid(slide.bodyEl, slide.deck, token, false).finally(() => {
     if (token === renderToken) scheduleLayoutRefresh();
   });
   Promise.all([mermaid, images]).finally(() => {
@@ -1666,51 +1760,7 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
     width: roundedMetric(object.width * scale),
     height: roundedMetric(object.height * scale),
   });
-  const mapColorFields = (object) => {
-    const mapped = { ...object };
-    const mapParagraphs = (paragraphs) =>
-      paragraphs.map((paragraph) => ({
-        ...paragraph,
-        runs: paragraph.runs.map((run) => ({
-          ...run,
-          color: resolveModelColor(run.color, deck),
-          fontFace: getComputedStyle(svg).fontFamily
-            .split(",")[0]
-            .trim()
-            .replace(/^["']|["']$/g, ""),
-          fontSize: roundedMetric(run.fontSize * scale),
-          bold: Number(run.fontWeight) >= 600,
-        })),
-      }));
-    if (mapped.dash !== undefined) mapped.dash = powerPointDashStyle(mapped.dash);
-    for (const key of ["fill", "stroke", "color"]) {
-      if (key in mapped) mapped[key] = resolveModelColor(mapped[key], deck);
-    }
-    if (Array.isArray(mapped.paragraphs)) {
-      mapped.paragraphs = mapParagraphs(mapped.paragraphs);
-    }
-    if (mapped.text?.paragraphs) {
-      mapped.text = {
-        ...mapped.text,
-        paragraphs: mapParagraphs(mapped.text.paragraphs),
-      };
-    }
-    if (mapped.textInsets) {
-      mapped.textInsets = Object.fromEntries(
-        Object.entries(mapped.textInsets).map(([key, value]) => [
-          key,
-          roundedMetric(value * scale),
-        ]),
-      );
-    }
-    return mapped;
-  };
-  const fallbacks = snapshot.fallbacks.map((fallback) => ({
-    ...fallback,
-    path: `architecture[${blockIndex}].${fallback.path}`,
-    ...mapBounds(fallback),
-  }));
-  const elements = [];
+  const fallbacks = [];
   const architectureGroups = [...wrapper.querySelectorAll("[data-architecture-type]")];
   const findById = (id) =>
     architectureGroups.find((element) => element.getAttribute("data-architecture-id") === id);
@@ -1741,13 +1791,6 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
           width: bounds.width,
           height: bounds.height,
         },
-        architecture: {
-          kind: "icon-picture",
-          id: icon.id,
-          sourcePath: icon.sourcePath,
-          order: icon.order,
-          z: icon.z,
-        },
       });
     }
   }
@@ -1776,10 +1819,6 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
           width: bounds.width,
           height: bounds.height,
         },
-        architecture: {
-          ...object.architecture,
-          kind: "image-picture",
-        },
       });
     }
   }
@@ -1819,15 +1858,6 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
       ),
     );
   }
-  const foregroundElement = (layer) => ({
-    type: "image",
-    src: layer.src,
-    alt: layer.alt,
-    fit: "fill",
-    opacity: 1,
-    ...layer.bounds,
-    architecture: layer.architecture,
-  });
   if (!foregroundReady) {
     fallbacks.push(
       pptxFallback(
@@ -1841,84 +1871,25 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
   }
 
   for (const sourceObject of snapshot.objects) {
-    const object = mapColorFields({
-      ...sourceObject,
-      ...mapBounds(sourceObject),
-      ...(sourceObject.points
-        ? {
-            points: sourceObject.points.map((point) => ({
-              x: roundedMetric(originX + point.x * scale),
-              y: roundedMetric(originY + point.y * scale),
-            })),
-          }
-        : {}),
-      ...(sourceObject.strokeWidth !== undefined
-        ? { strokeWidth: roundedMetric(sourceObject.strokeWidth * scale) }
-        : {}),
-      ...(sourceObject.cornerRadius !== undefined
-        ? { cornerRadius: roundedMetric(sourceObject.cornerRadius * scale) }
-        : {}),
-    });
-    if (object.type === "shape") {
-      const opacity = Number.isFinite(object.opacity) ? object.opacity : 1;
-      if (object.text?.paragraphs) {
-        object.text = {
-          ...object.text,
-          paragraphs: object.text.paragraphs.map((paragraph) => ({
-            ...paragraph,
-            runs: paragraph.runs.map((run) => ({
-              ...run,
-              opacity: (Number.isFinite(run.opacity) ? run.opacity : 1) * opacity,
-            })),
-          })),
-        };
-      }
-    }
-    if (object.type === "image") {
-      const layer = foregroundLayers.get(`image:${object.architecture.id}`);
+    if (sourceObject.type === "image") {
+      const layer = foregroundLayers.get(`image:${sourceObject.architecture.id}`);
       fallbacks.push({
         type: "architecture-image",
-        path: `architecture[${blockIndex}].${object.architecture.sourcePath}`,
-        reason: foregroundReady && layer
+        path: `architecture[${blockIndex}].${sourceObject.architecture.sourcePath}`,
+        reason: layer
           ? "architecture-image-rendered-as-foreground-picture"
           : "architecture-image-rendered-as-artwork",
         ...mapBounds(sourceObject),
-        ...(foregroundReady && layer ? { artwork: false } : {}),
+        ...(layer ? { artwork: false } : {}),
       });
-      if (foregroundReady && layer) elements.push(foregroundElement(layer));
-      continue;
     }
-    elements.push(object);
-    if (object.type === "shape" && object.architecture?.kind === "node" && sourceObject.icon) {
-      const layer = foregroundLayers.get(`icon:${object.architecture.id}`);
-      if (foregroundReady && layer) elements.push(foregroundElement(layer));
-    }
-  }
-  for (const icon of snapshot.icons || []) {
-    const layer = foregroundLayers.get(`icon:${icon.id}`);
-    fallbacks.push({
-      type: "architecture-icon",
-      path: `architecture[${blockIndex}].${icon.sourcePath}`,
-      reason: foregroundReady && layer
-        ? "icon-rendered-as-foreground-picture"
-        : "icon-rendered-as-artwork",
-      icon: icon.icon,
-      ...mapBounds(icon),
-      ...(foregroundReady && layer ? { artwork: false } : {}),
-    });
-  }
-  for (const sourceObject of snapshot.objects) {
     const architecture = sourceObject.architecture;
     if (!architecture) continue;
     if (architecture.kind === "group" || architecture.kind === "node") {
       const group = findById(architecture.id);
       if (!group) continue;
       [...group.children]
-        .filter((child) =>
-          foregroundReady
-            ? child.matches("rect, ellipse, text")
-            : child.matches("text"),
-        )
+        .filter((child) => child.matches("rect, ellipse, text"))
         .forEach((child) => child.setAttribute("data-pptx-native", sourceObject.type));
     } else if (architecture.kind === "connector") {
       architectureGroups
@@ -1940,13 +1911,24 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
         .forEach((label) => label.setAttribute("data-pptx-native", sourceObject.type));
     }
   }
-  if (foregroundReady) {
-    foregroundCandidates.forEach((candidate) => {
-      if (foregroundLayers.has(candidate.key)) {
-        candidate.source.setAttribute("data-pptx-native", "image");
-      }
+  for (const icon of snapshot.icons || []) {
+    const layer = foregroundLayers.get(`icon:${icon.id}`);
+    fallbacks.push({
+      type: "architecture-icon",
+      path: `architecture[${blockIndex}].${icon.sourcePath}`,
+      reason: layer
+        ? "icon-rendered-as-foreground-picture"
+        : "icon-rendered-as-artwork",
+      icon: icon.icon,
+      ...mapBounds(icon),
+      ...(layer ? { artwork: false } : {}),
     });
   }
+  foregroundCandidates.forEach((candidate) => {
+    if (foregroundLayers.has(candidate.key)) {
+      candidate.source.setAttribute("data-pptx-native", "image");
+    }
+  });
   if (snapshot.routing.degraded) {
     fallbacks.push(
       pptxFallback(
@@ -1957,7 +1939,190 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
       ),
     );
   }
-  return { elements, fallbacks };
+
+  const fontFace = getComputedStyle(svg).fontFamily
+    .split(",")[0]
+    .trim()
+    .replace(/^["']|["']$/g, "");
+  const { scene } = architectureSnapshotToScene(snapshot, {
+    path: `architecture[${blockIndex}]`,
+    resolveColor: (value) => resolveModelColor(value, deck),
+    resolveDash: powerPointDashStyle,
+    resolveImage: (entry, kind) => {
+      const key = kind === "icon-picture"
+        ? `icon:${entry.id}`
+        : `image:${entry.architecture?.id || entry.id}`;
+      return foregroundLayers.get(key) || "";
+    },
+    fontFace,
+    scale,
+    originX,
+    originY,
+  });
+  const mapped = sceneToPptxElements(scene, {
+    pathPrefix: `architecture[${blockIndex}]`,
+    emitPath: false,
+    emitZOrder: false,
+  });
+  return { elements: mapped.elements, fallbacks: [...fallbacks, ...mapped.fallbacks] };
+}
+
+function unprefixScenePath(path, prefix) {
+  return typeof path === "string" && path.startsWith(`${prefix}.`)
+    ? path.slice(prefix.length + 1)
+    : path;
+}
+
+function mermaidEdgeLabelElement(svg, id) {
+  if (!id) return null;
+  const root = svg.querySelector("g.root");
+  const labels = root ? [...root.querySelectorAll(":scope > g.edgeLabels > g.edgeLabel")] : [];
+  return labels.find((label) => {
+    const labelGroup = label.querySelector(":scope > g.label");
+    return labelGroup?.getAttribute("data-id") === id;
+  }) || null;
+}
+
+function mermaidElementForSourcePath(svg, sourcePath) {
+  const root = svg.querySelector("g.root");
+  if (!root) return sourcePath === "svg" ? svg : null;
+  const indexed = /^(nodes|clusters|edges)\[(\d+)\]$/.exec(sourcePath || "");
+  if (indexed) {
+    const [, kind, rawIndex] = indexed;
+    const index = Number(rawIndex);
+    const selectors = {
+      nodes: ":scope > g.nodes > g.node",
+      clusters: ":scope > g.clusters > g.cluster",
+      edges: ":scope > g.edgePaths > path.flowchart-link",
+    };
+    return [...root.querySelectorAll(selectors[kind])][index] || null;
+  }
+  if (sourcePath === "svg") return svg;
+  return null;
+}
+
+function mermaidFallbackElementForBounds(svg, deck, bounds) {
+  const ignored = new Set(["defs", "desc", "filter", "linearGradient", "marker", "metadata", "script", "style"]);
+  const containerClasses = new Set(["root", "clusters", "edgePaths", "edgeLabels", "edgeLabel", "label", "nodes"]);
+  const candidates = [...svg.querySelectorAll("circle, ellipse, foreignObject, g, image, line, path, polygon, polyline, rect, text, use")]
+    .filter((candidate) => {
+      if (candidate.closest("[data-pptx-native]")) return false;
+      if (ignored.has(String(candidate.localName || candidate.tagName).toLowerCase())) return false;
+      if (Array.from(candidate.classList || []).some((name) => containerClasses.has(name))) return false;
+      const rect = candidate.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    });
+  return candidates.find((candidate) => {
+    const candidateBounds = fallbackBounds(candidate, deck);
+    return (
+      Math.abs(candidateBounds.x - bounds.x) <= 1 &&
+      Math.abs(candidateBounds.y - bounds.y) <= 1 &&
+      Math.abs(candidateBounds.width - bounds.width) <= 1 &&
+      Math.abs(candidateBounds.height - bounds.height) <= 1
+    );
+  }) || null;
+}
+
+function markMermaidNativeElements(svg, mappedElements, pathPrefix, sourceElements) {
+  for (const element of mappedElements) {
+    const sourcePath = unprefixScenePath(element.path, pathPrefix);
+    let source = sourceElements?.get(sourcePath) || mermaidElementForSourcePath(svg, sourcePath);
+    let ownerPath = sourcePath;
+    while (!source && sourceElements && ownerPath.includes(".")) {
+      ownerPath = ownerPath.slice(0, ownerPath.lastIndexOf("."));
+      source = sourceElements.get(ownerPath);
+    }
+    if (source && !source.hasAttribute("data-pptx-native")) {
+      const nativeKind = element.type === "shape" ? "shape" : element.type;
+      source.setAttribute("data-pptx-native", nativeKind);
+    }
+    if (!sourceElements && element.type === "connector") {
+      const id = element.mermaid?.id || source?.getAttribute("data-id") || source?.getAttribute("id") || "";
+      mermaidEdgeLabelElement(svg, id)?.setAttribute("data-pptx-native", "text");
+    }
+  }
+}
+
+function mermaidWholeElementFallbackRequired(scene, diagnostics) {
+  const nodes = Array.isArray(scene?.nodes) ? scene.nodes : [];
+  const reason = nodes[0]?.reason || diagnostics.find((entry) => entry?.reason)?.reason || "";
+  return (
+    nodes.length === 1 &&
+    nodes[0]?.kind === "fallback" &&
+    nodes[0]?.sourcePath === "svg" &&
+    (
+      reason.startsWith("mermaid-scene-adapter-failed:") ||
+      reason.startsWith("mermaid-scene-limit-exceeded:") ||
+      reason === "unsupported-mermaid-svg-structure"
+    )
+  );
+}
+
+function collectMermaidObjects(element, deck, blockIndex) {
+  const svg = element.querySelector("svg");
+  if (!svg) {
+    return {
+      elements: [],
+      fallbacks: [pptxFallback("mermaid", element, deck, "mermaid-rendered-as-artwork")],
+    };
+  }
+  const pathPrefix = `mermaid[${blockIndex}]`;
+  const { scene, diagnostics, sourceElements } = mermaidSvgToScene(svg, {
+    path: pathPrefix,
+    deck,
+    resolveColor: (value) => resolveModelColor(value, deck),
+    includeSourceElements: true,
+  });
+  if (mermaidWholeElementFallbackRequired(scene, diagnostics)) {
+    return {
+      elements: [],
+      fallbacks: [pptxFallback("mermaid", element, deck, "mermaid-rendered-as-artwork")],
+    };
+  }
+  const mapped = sceneToPptxElements(scene, {
+    pathPrefix,
+    groupPreset: "rect",
+    zOrderBase: Number(element.dataset.pptxZOrder),
+  });
+  markMermaidNativeElements(svg, mapped.elements, pathPrefix, sourceElements);
+  const fallbackNodes = new Map(
+    scene.nodes
+      .filter((node) => node.kind === "fallback")
+      .map((node) => [node.sourcePath, node]),
+  );
+  const fallbacks = mapped.fallbacks.map((fallback) => {
+    const sourcePath = fallback.sourcePath || unprefixScenePath(fallback.path, pathPrefix);
+    const node = fallbackNodes.get(sourcePath);
+    const source =
+      sourceElements?.get(sourcePath) ||
+      mermaidElementForSourcePath(svg, sourcePath) ||
+      mermaidFallbackElementForBounds(svg, deck, fallback) ||
+      svg;
+    const sourceBounds = source.getBoundingClientRect();
+    const padding = ["path", "line", "polyline"].includes(source.localName)
+      ? Math.max(1, (fallback.width - sourceBounds.width) / 2, (fallback.height - sourceBounds.height) / 2)
+      : 0;
+    const captured = pptxFallback("mermaid", source, deck, fallback.reason, {
+      captureElement: source,
+      includeDescendants: true,
+      artwork: fallback.artwork,
+      padding,
+    });
+    return {
+      ...captured,
+      path: fallback.path,
+      sourcePath,
+      reason: fallback.reason,
+      x: fallback.x,
+      y: fallback.y,
+      width: fallback.width,
+      height: fallback.height,
+      zOrder: fallback.zOrder,
+      ...(node?.id ? { id: node.id } : {}),
+      ...(fallback.artwork === false ? { artwork: false } : {}),
+    };
+  });
+  return { elements: mapped.elements, fallbacks };
 }
 
 async function collectPptxSlide(slide, index) {
@@ -2064,10 +2229,17 @@ async function collectPptxSlide(slide, index) {
         });
       }
     });
-  deck.querySelectorAll("pre.mermaid").forEach((element) => {
+  for (const [blockIndex, element] of [...deck.querySelectorAll("pre.mermaid")].entries()) {
     const covered = [...fallbackRoots].some((root) => root === element || root.contains(element));
-    if (!covered) addFallback("mermaid", element, "mermaid-rendered-as-artwork");
-  });
+    if (covered) continue;
+    try {
+      const mermaid = collectMermaidObjects(element, deck, blockIndex);
+      elements.push(...mermaid.elements);
+      fallbacks.push(...mermaid.fallbacks);
+    } catch (_) {
+      addFallback("mermaid", element, "mermaid-rendered-as-artwork");
+    }
+  }
 
   const insideFallback = (element) =>
     [...fallbackRoots].some((root) => root === element || root.contains(element));
@@ -2079,6 +2251,7 @@ async function collectPptxSlide(slide, index) {
     (element) =>
       !insideFallback(element) &&
       !element.closest(".architecture-diagram") &&
+      !element.closest("pre.mermaid, .mermaid") &&
       !element.closest("table") &&
       !(element.matches("p") && element.closest("blockquote, li")),
   );
@@ -2475,7 +2648,7 @@ async function renderPptxDeck(
   }
   const token = ++renderToken;
   for (const slide of rendered) {
-    await runMermaid(slide.bodyEl, slide.theme, token, false);
+    await runMermaid(slide.bodyEl, slide.deck, token, false);
   }
   await waitForImages(stage);
   await afterLayout();
@@ -2590,7 +2763,7 @@ async function renderPrintDeck(
     }
   }
   for (const slide of rendered) {
-    await runMermaid(slide.bodyEl, slide.theme, renderToken, false);
+    await runMermaid(slide.bodyEl, slide.deck, renderToken, false);
   }
   await waitForImages(stage);
   await afterLayout();
@@ -2669,7 +2842,7 @@ async function renderCaptureSlide(
   }
 
   const token = ++renderToken;
-  await runMermaid(slide.bodyEl, slide.theme, token, false);
+  await runMermaid(slide.bodyEl, slide.deck, token, false);
   await waitForImages(stage);
   await afterLayout();
 
@@ -2790,8 +2963,10 @@ let pptxExportAvailable = false;
 let markdownImportAvailable = false;
 let presenterViewOpen = false;
 let presenterViewRequested = false;
-let pdfExportPending = false;
-let pptxExportPending = false;
+let exportPending = false;
+let exportNotificationTimer = null;
+let exportNotificationRemaining = 0;
+let exportNotificationStarted = 0;
 
 // Derive a short overview title from a slide fragment: first heading, else first
 // non-empty body line, trimmed. Mirrors the skill's title rule.
@@ -2846,6 +3021,7 @@ async function fetchDeck() {
 function setArchitectureEditMode(enabled) {
   const next = Boolean(enabled) && architectureEditAvailable && !presenterMode;
   if (next === architectureEditMode) return false;
+  if (next && fixedPreviewMode) setFixedPreviewMode(false);
   architectureEditMode = next;
   document.body.classList.toggle("architecture-edit-mode", next);
   updateArchitectureEditButton(next);
@@ -3450,93 +3626,109 @@ function updatePresenterButton(running, message = "") {
   syncMoreControls();
 }
 
-async function exportPdfFromCanvas() {
-  if (!pdfExportAvailable || pdfExportPending || pptxExportPending) return;
-  pdfExportPending = true;
-  const button = document.getElementById("navExport");
-  const pptxButton = document.getElementById("navExportPptx");
-  const status = document.getElementById("exportStatus");
-  if (button) button.disabled = true;
-  if (pptxButton) pptxButton.disabled = true;
-  if (status) status.textContent = "Saving PDF.";
+function pauseExportNotification() {
+  if (exportNotificationTimer === null) return;
+  clearTimeout(exportNotificationTimer);
+  exportNotificationTimer = null;
+  exportNotificationRemaining = Math.max(
+    0,
+    exportNotificationRemaining - (performance.now() - exportNotificationStarted),
+  );
+}
 
-  try {
-    const response = await fetch("./export", {
-      method: "POST",
-      headers: { Accept: "application/json" },
-      cache: "no-store",
-    });
-    const data = await response.json().catch(() => ({}));
-    if (!response.ok) {
-      throw new Error(data.message || `PDF export failed (${response.status}).`);
-    }
-    const filename = data.path ? data.path.split(/[\\/]/).pop() : "PDF";
-    const message = `Saved ${filename}.`;
-    if (status) status.textContent = message;
-    if (button) {
-      button.dataset.state = "active";
-      button.title = message;
-    }
-    syncMoreControls();
-  } catch (error) {
-    const message = error?.message || "Could not save the PDF.";
-    console.error("PDF export failed", error);
-    if (status) status.textContent = message;
-    if (button) {
-      button.dataset.state = "error";
-      button.title = message;
-    }
-    syncMoreControls();
-  } finally {
-    pdfExportPending = false;
-    if (button) button.disabled = false;
-    if (pptxButton) pptxButton.disabled = false;
+function dismissExportNotification() {
+  const notification = document.getElementById("exportNotification");
+  const restoreFocus = notification.contains(document.activeElement);
+  pauseExportNotification();
+  exportNotificationRemaining = 0;
+  notification.hidden = true;
+  document.getElementById("exportStatus").textContent = "";
+  document.getElementById("exportErrorStatus").textContent = "";
+  if (restoreFocus) {
+    const more = document.getElementById("navMore");
+    (more.getClientRects().length ? more : document.body).focus();
   }
 }
 
-async function exportPptxFromCanvas() {
-  if (!pptxExportAvailable || pdfExportPending || pptxExportPending) return;
-  pptxExportPending = true;
-  const button = document.getElementById("navExportPptx");
+function resumeExportNotification() {
+  const notification = document.getElementById("exportNotification");
+  if (
+    notification.hidden ||
+    notification.dataset.state !== "success" ||
+    notification.matches(":hover, :focus-within") ||
+    exportNotificationTimer !== null
+  ) {
+    return;
+  }
+  exportNotificationStarted = performance.now();
+  exportNotificationTimer = setTimeout(dismissExportNotification, exportNotificationRemaining);
+}
+
+function showExportNotification(state, message, path = "") {
+  pauseExportNotification();
+  const notification = document.getElementById("exportNotification");
+  const location = document.getElementById("exportNotificationPath");
+  notification.dataset.state = state;
+  document.getElementById("exportNotificationMessage").textContent = message;
+  location.textContent = path ? `Saved to: ${path}` : "";
+  location.hidden = !path;
+  document.getElementById("exportNotificationClose").hidden = state === "pending";
+  notification.hidden = false;
+  const announcement = path ? `${message} Saved to: ${path}` : message;
+  document.getElementById("exportStatus").textContent = state === "error" ? "" : announcement;
+  document.getElementById("exportErrorStatus").textContent = state === "error" ? announcement : "";
+  exportNotificationRemaining = state === "success" ? 8000 : 0;
+  resumeExportNotification();
+}
+
+async function exportFromCanvas(format) {
+  const isPdf = format === "pdf";
+  if (exportPending || !(isPdf ? pdfExportAvailable : pptxExportAvailable)) return;
+  exportPending = true;
+  const label = isPdf ? "PDF" : "PowerPoint";
   const pdfButton = document.getElementById("navExport");
-  const status = document.getElementById("exportStatus");
-  if (button) button.disabled = true;
-  if (pdfButton) pdfButton.disabled = true;
-  if (status) status.textContent = "Saving editable PowerPoint.";
+  const pptxButton = document.getElementById("navExportPptx");
+  const button = isPdf ? pdfButton : pptxButton;
+  const idleTitle = button.title;
+  pdfButton.disabled = true;
+  pptxButton.disabled = true;
+  delete button.dataset.state;
+  button.title = `Saving ${label}.`;
+  showExportNotification("pending", `Saving ${label}...`);
+  syncMoreControls();
 
   try {
-    const response = await fetch("./export-pptx", {
+    const response = await fetch(isPdf ? "./export" : "./export-pptx", {
       method: "POST",
       headers: { Accept: "application/json" },
       cache: "no-store",
     });
-    const data = await response.json().catch(() => ({}));
-    if (!response.ok) {
-      throw new Error(data.message || `PowerPoint export failed (${response.status}).`);
+    const data = await response.json();
+    if (!response.ok || data?.ok !== true) {
+      throw new Error(
+        (typeof data?.message === "string" && data.message) ||
+        `${label} export failed (${response.status}).`,
+      );
     }
-    const filename = data.path ? data.path.split(/[\\/]/).pop() : "PowerPoint";
-    const fallback =
-      data.fallbackCount > 0 ? ` ${data.fallbackCount} fallback item(s) preserved.` : "";
-    const message = `Saved ${filename}.${fallback}`;
-    if (status) status.textContent = message;
-    if (button) {
-      button.dataset.state = "active";
-      button.title = message;
+    if (typeof data.path !== "string" || !data.path.trim() || !data.path.split(/[\\/]/).pop()) {
+      throw new Error(`${label} export returned an invalid save location.`);
     }
-    syncMoreControls();
+    const filename = data.path.split(/[\\/]/).pop();
+    const fallback =
+      !isPdf && data.fallbackCount > 0 ? ` ${data.fallbackCount} fallback item(s) preserved.` : "";
+    const message = `${label} saved: ${filename}.${fallback}`;
+    showExportNotification("success", message, data.path);
   } catch (error) {
-    const message = error?.message || "Could not save the PowerPoint presentation.";
-    console.error("PowerPoint export failed", error);
-    if (status) status.textContent = message;
-    if (button) {
-      button.dataset.state = "error";
-      button.title = message;
-    }
-    syncMoreControls();
+    const message = `Could not save ${label}. ${error?.message || "Export failed."}`;
+    console.error(`${label} export failed`, error);
+    showExportNotification("error", message);
   } finally {
-    pptxExportPending = false;
-    if (button) button.disabled = false;
-    if (pdfButton) pdfButton.disabled = false;
+    exportPending = false;
+    pdfButton.disabled = false;
+    pptxButton.disabled = false;
+    delete button.dataset.state;
+    button.title = idleTitle;
+    syncMoreControls();
   }
 }
 
@@ -3982,8 +4174,8 @@ function wireControls() {
   bind("navPresent", openPresenterWindow, { closeMore: true });
   bind("navPresenterView", openPresenterView, { closeMore: true });
   bind("navFixedPreview", toggleFixedPreviewMode, { closeMore: true });
-  bind("navExport", exportPdfFromCanvas, { closeMore: true });
-  bind("navExportPptx", exportPptxFromCanvas, { closeMore: true });
+  bind("navExport", () => exportFromCanvas("pdf"), { closeMore: true });
+  bind("navExportPptx", () => exportFromCanvas("pptx"), { closeMore: true });
   bind("navImport", toggleImportPicker, { closeMore: true });
   bind("navSourceMode", toggleSourceMode, { closeMore: true });
   bind("overviewClose", closeOverview);
@@ -3995,6 +4187,13 @@ function wireControls() {
   bind("presenterToggleButton", togglePresenterWindow);
   bind("presenterReturnButton", closePresenterView);
 
+  const exportNotification = document.getElementById("exportNotification");
+  document.getElementById("exportNotificationClose").addEventListener("click", dismissExportNotification);
+  exportNotification.addEventListener("pointerenter", pauseExportNotification);
+  exportNotification.addEventListener("pointerleave", resumeExportNotification);
+  exportNotification.addEventListener("focusin", pauseExportNotification);
+  exportNotification.addEventListener("focusout", () => queueMicrotask(resumeExportNotification));
+
   const importFilter = document.getElementById("importFilter");
   if (importFilter) {
     importFilter.addEventListener("input", renderImportList);
@@ -4155,6 +4354,17 @@ function init() {
     requestArchitectureEditMode(true);
   }
 
+  // Canvas and CLI preview start on the fixed 16:9 output surface. Presenter
+  // views keep their purpose-built layouts, and the control still lets users
+  // switch back to the responsive canvas layout.
+  if (
+    !presenterMode &&
+    !presenterViewRequested &&
+    params.get("responsive") !== "1"
+  ) {
+    setFixedPreviewMode(true);
+  }
+
   updateArchitectureEditButton();
   if (!previewMode) wireControls();
   else if (navigationEnabled) {