@markdstage/markdstage 0.1.3 → 2.4.0

package/shared/renderer/renderer.js

@@ -90,16 +90,22 @@ let lastMermaidTheme = null;
 // Editing mode is available only in normal view, not presenter or print mode.
 // Print mode returns early in init, so presenterMode is the effective branch here.
 let architectureEditMode = false;
+let architectureEditAvailable = false;
 let architectureDetailedEdit = false;
+let architectureDetailedEditTarget = "";
 let presenterMode = false;
 let previewMode = false;
 let previewOffset = 0;
 let navigationEnabled = true;
 let fixedPreviewMode = false;
+let moreControlsOpen = false;
 // Markdown for the most recently rendered slide, retained for editing-mode rerenders.
 let lastMarkdown = "";
 // Editing UI attached to the rendered slide; destroyed on every rerender.
 let architectureEditors = [];
+// Serialize saves from every Architecture block so each request uses the deck
+// version returned by the previous save.
+let architectureSaveQueue = Promise.resolve();
 // `layoutTarget` is the slide currently on screen (cover and back cover
 // included); `autoSize` says whether it also takes part in the font auto-fit.
 let layoutTarget = null;
@@ -422,12 +428,14 @@ function updateFixedPreviewWarning() {
       warning.textContent = "";
     }
     if (button) button.dataset.state = fixedPreviewMode ? "active" : "";
+    syncMoreControls();
     return;
   }
 
   const diagnostic = collectSlideLayout(layoutTarget, navIndex);
   document.body.classList.toggle("fixed-preview-overflow", diagnostic.pdfClipped);
   if (button) button.dataset.state = diagnostic.pdfClipped ? "error" : "active";
+  syncMoreControls();
   if (!warning) return;
   if (!diagnostic.pdfClipped) {
     warning.hidden = true;
@@ -701,13 +709,15 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
     host.className = "architecture-edit-host";
     host.setAttribute("data-architecture-block", String(blockIndex));
     target.replaceWith(host);
+    const editorRenderToken = renderToken;
     const editor = attachArchitectureEditor(host, {
       source,
       documentRef: document,
       canOpenDetail: architectureDetailedEdit,
       onOpenDetail: () => openDetailedArchitectureEditor(slideIndex, blockIndex),
       // Return the save result to the editor; omitting it makes failures look successful.
-      onCommit: (next) => saveArchitectureBlock(slideIndex, blockIndex, next),
+      onCommit: (next) =>
+        saveArchitectureBlock(slideIndex, blockIndex, next, editorRenderToken),
     });
     if (!editor) {
       // Do not edit invalid DSL; fall back to the standard error display.
@@ -759,6 +769,7 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
     sizeMode,
     titleSlide,
     sectionSlide,
+    centerSlide,
     backcoverSlide,
     title: meta.title || meta.deck || "Slide",
   };
@@ -771,11 +782,11 @@ function renderSlide(markdown) {
   architectureEditors.forEach((editor) => editor.destroy());
   architectureEditors = [];
   applyCustomThemeCss(customThemeCss);
+  const token = ++renderToken;
   const slide = createSlide(markdown, deckTheme);
   document.title = slide.title;
   document.documentElement.setAttribute("data-theme", slide.theme);
 
-  const token = ++renderToken;
   document.body.classList.add("mermaid-loading");
   document.getElementById("stage").replaceChildren(slide.deck);
   if (layoutFrame) {
@@ -857,6 +868,990 @@ async function reportOutputStatus(token, status, error = "", layout = null) {
   if (!response.ok) throw new Error(`Could not report output status (${response.status}).`);
 }
 
+const PPTX_RASTER_IMAGE = /\.(?:png|jpe?g|gif)(?:$|[?#])/i;
+
+function normalizeCssColor(value) {
+  const text = String(value || "").trim();
+  if (!text || text === "none" || text === "transparent") return null;
+  const shortHex = text.match(/^#([\da-f])([\da-f])([\da-f])$/i);
+  if (shortHex) {
+    return `#${shortHex.slice(1).map((part) => part.repeat(2)).join("")}`.toUpperCase();
+  }
+  const hex = text.match(/^#([\da-f]{6})(?:[\da-f]{2})?$/i);
+  if (hex) return `#${text.slice(1).toUpperCase()}`;
+  const rgb = text.match(
+    /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i,
+  );
+  if (!rgb) return text;
+  if (rgb[4] === "0" || rgb[4] === "0%") return null;
+  const channels = rgb
+    .slice(1, 4)
+    .map((part) => Math.max(0, Math.min(255, Math.round(Number(part)))));
+  if (rgb[4] !== undefined) {
+    const alpha = rgb[4].endsWith("%") ? Number.parseFloat(rgb[4]) / 100 : Number(rgb[4]);
+    if (Number.isFinite(alpha) && alpha < 1) {
+      return `rgba(${channels.join(", ")}, ${Math.max(0, alpha)})`;
+    }
+  }
+  return `#${channels
+    .map((part) => part.toString(16).padStart(2, "0"))
+    .join("")
+    .toUpperCase()}`;
+}
+
+function resolveModelColor(value, context) {
+  if (!value || value === "none" || value === "transparent") return null;
+  const probe = document.createElement("span");
+  probe.style.color = String(value);
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  context.appendChild(probe);
+  const resolved = normalizeCssColor(getComputedStyle(probe).color);
+  probe.remove();
+  return resolved;
+}
+
+function relativeBounds(element, deck) {
+  const rect = element.getBoundingClientRect();
+  const slide = deck.getBoundingClientRect();
+  return {
+    x: roundedMetric(rect.left - slide.left),
+    y: roundedMetric(rect.top - slide.top),
+    width: roundedMetric(rect.width),
+    height: roundedMetric(rect.height),
+  };
+}
+
+function textContentBounds(element, deck) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const rect = range.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return relativeBounds(element, deck);
+  const slide = deck.getBoundingClientRect();
+  return {
+    x: roundedMetric(rect.left - slide.left),
+    y: roundedMetric(rect.top - slide.top),
+    width: roundedMetric(rect.width),
+    height: roundedMetric(rect.height),
+  };
+}
+
+function rasterImageSupported(image) {
+  const source = image.currentSrc || image.getAttribute("src") || "";
+  if (["cover", "none"].includes(getComputedStyle(image).objectFit)) return false;
+  if (/^data:image\/(?:png|jpeg|gif)[;,]/i.test(source)) return true;
+  try {
+    const url = new URL(source, window.location.href);
+    return url.origin === window.location.origin && PPTX_RASTER_IMAGE.test(url.href);
+  } catch (_) {
+    return false;
+  }
+}
+
+function runStyle(element) {
+  const style = getComputedStyle(element);
+  const numericWeight = Number.parseInt(style.fontWeight, 10);
+  return {
+    fontFace: style.fontFamily.split(",")[0].trim().replace(/^["']|["']$/g, ""),
+    fontSize: roundedMetric(parseFloat(style.fontSize)),
+    bold: Number.isFinite(numericWeight) ? numericWeight >= 600 : style.fontWeight === "bold",
+    italic: style.fontStyle !== "normal",
+    underline: style.textDecorationLine.includes("underline"),
+    color: normalizeCssColor(style.color),
+  };
+}
+
+function collectTextRuns(root, { omitNestedLists = false } = {}) {
+  const runs = [];
+  const append = (text, element) => {
+    if (!text) return;
+    const anchor = element.closest("a[href]");
+    const run = {
+      text,
+      ...runStyle(element),
+      ...(anchor ? { href: anchor.getAttribute("href") || anchor.href } : {}),
+    };
+    const previous = runs.at(-1);
+    const previousStyle = previous && { ...previous, text: undefined };
+    const nextStyle = { ...run, text: undefined };
+    if (previous && JSON.stringify(previousStyle) === JSON.stringify(nextStyle)) {
+      previous.text += text;
+    } else {
+      runs.push(run);
+    }
+  };
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      append(node.nodeValue || "", node.parentElement || root);
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node.tagName === "BR") {
+      append("\n", node.parentElement || root);
+      return;
+    }
+    if (
+      node !== root &&
+      (node.matches("pre, table, .architecture-diagram, .architecture-error, .mermaid") ||
+        (omitNestedLists && node.matches("ul, ol")))
+    ) {
+      return;
+    }
+    node.childNodes.forEach(visit);
+  };
+  root.childNodes.forEach(visit);
+  return runs;
+}
+
+function pptxAlignment(value) {
+  if (value === "center" || value === "right" || value === "justify") return value;
+  if (value === "end") return "right";
+  return "left";
+}
+
+function paragraphFor(element, options = {}) {
+  const style = getComputedStyle(element);
+  const runs = collectTextRuns(element, options);
+  return {
+    alignment: pptxAlignment(style.textAlign),
+    lineHeight: roundedMetric(parseFloat(style.lineHeight)),
+    runs,
+    ...(options.level !== undefined ? { level: options.level } : {}),
+    ...(options.bullet ? { bullet: options.bullet } : {}),
+  };
+}
+
+function renderedTextLineCount(element) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const tops = [];
+  for (const rect of range.getClientRects()) {
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    if (!tops.some((top) => Math.abs(top - rect.top) < 1)) tops.push(rect.top);
+  }
+  return Math.max(1, tops.length);
+}
+
+function unsupportedEffects(element) {
+  const style = getComputedStyle(element);
+  const effects = [];
+  if (style.textShadow && style.textShadow !== "none") effects.push("text-shadow");
+  if (style.boxShadow && style.boxShadow !== "none") effects.push("box-shadow");
+  if (style.filter && style.filter !== "none") effects.push("filter");
+  if (style.backdropFilter && style.backdropFilter !== "none") effects.push("backdrop-filter");
+  if (style.mixBlendMode && style.mixBlendMode !== "normal") effects.push("mix-blend-mode");
+  if (style.transform && style.transform !== "none") effects.push("transform");
+  if (Number(style.opacity) < 1) effects.push("opacity");
+  return effects;
+}
+
+function effectFallbackRoot(element) {
+  return element.closest(
+    "p, li, blockquote, table, img, h1, h2, h3, h4, h5, h6, .kicker, .slide-title, .theme-backcover-logo-text, .theme-backcover-copyright, .body, header, footer",
+  );
+}
+
+function pptxFallback(type, element, deck, reason) {
+  return {
+    type,
+    path: elementPath(element, deck),
+    reason,
+    ...relativeBounds(element, deck),
+  };
+}
+
+function preserveBoxShadow(element, deck) {
+  const style = getComputedStyle(element);
+  if (!style.boxShadow || style.boxShadow === "none") return;
+  const bounds = relativeBounds(element, deck);
+  const decoration = document.createElement("div");
+  decoration.className = "pptx-effect-fallback";
+  Object.assign(decoration.style, {
+    position: "absolute",
+    left: `${bounds.x}px`,
+    top: `${bounds.y}px`,
+    width: `${bounds.width}px`,
+    height: `${bounds.height}px`,
+    borderRadius: style.borderRadius,
+    boxShadow: style.boxShadow,
+    pointerEvents: "none",
+  });
+  decoration.setAttribute("aria-hidden", "true");
+  deck.appendChild(decoration);
+}
+
+function blobDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => resolve(String(reader.result || "")), {
+      once: true,
+    });
+    reader.addEventListener(
+      "error",
+      () => reject(reader.error || new Error("Could not encode Architecture artwork.")),
+      { once: true },
+    );
+    reader.readAsDataURL(blob);
+  });
+}
+
+function freezeSvgPaint(source, clone) {
+  const sourceNodes = [source, ...source.querySelectorAll("*")];
+  const cloneNodes = [clone, ...clone.querySelectorAll("*")];
+  sourceNodes.forEach((node, index) => {
+    const target = cloneNodes[index];
+    if (!target) return;
+    const style = getComputedStyle(node);
+    for (const property of ["fill", "stroke", "color"]) {
+      if (style[property]) target.setAttribute(property, style[property]);
+    }
+  });
+}
+
+async function inlineSvgImageSources(root) {
+  for (const image of root.querySelectorAll("image")) {
+    const href = image.getAttribute("href") || image.getAttribute("xlink:href");
+    if (!href || href.startsWith("data:")) continue;
+    const response = await fetch(new URL(href, window.location.href), { cache: "no-store" });
+    if (!response.ok) {
+      throw new Error(`Could not load Architecture image artwork (${response.status}).`);
+    }
+    const dataUrl = await blobDataUrl(await response.blob());
+    image.setAttribute("href", dataUrl);
+    image.removeAttribute("xlink:href");
+  }
+}
+
+async function architectureForegroundPng(svg, sources, width, height, crop) {
+  if (!sources.length) return "";
+  const clone = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const viewBox = svg.viewBox?.baseVal;
+  clone.setAttribute("viewBox", svg.getAttribute("viewBox") || "0 0 1 1");
+  clone.setAttribute("width", String(viewBox?.width || 1));
+  clone.setAttribute("height", String(viewBox?.height || 1));
+  clone.setAttribute("preserveAspectRatio", "xMidYMid meet");
+  const defs = svg.querySelector(":scope > defs");
+  if (defs) clone.appendChild(defs.cloneNode(true));
+  for (const source of sources) {
+    const copy = source.cloneNode(true);
+    freezeSvgPaint(source, copy);
+    const ownOpacityValue = Number(getComputedStyle(source).opacity);
+    const ownOpacity = Number.isFinite(ownOpacityValue) ? ownOpacityValue : 1;
+    const node = source.closest('[data-architecture-type="node"]');
+    const parentOpacityAttribute =
+      node && node !== source ? node.getAttribute("opacity") : null;
+    const parentOpacityValue =
+      parentOpacityAttribute === null ? 1 : Number(parentOpacityAttribute);
+    const parentOpacity = Number.isFinite(parentOpacityValue) ? parentOpacityValue : 1;
+    copy.setAttribute("opacity", String(ownOpacity * parentOpacity));
+    clone.appendChild(copy);
+  }
+  await inlineSvgImageSources(clone);
+  const markup = new XMLSerializer().serializeToString(clone);
+  const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml" }));
+  try {
+    const image = new Image();
+    image.src = url;
+    await image.decode();
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.ceil(width));
+    canvas.height = Math.max(1, Math.ceil(height));
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("Could not create Architecture artwork canvas.");
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    if (!crop) return canvas.toDataURL("image/png");
+    const cropped = document.createElement("canvas");
+    cropped.width = Math.max(1, Math.ceil(crop.width));
+    cropped.height = Math.max(1, Math.ceil(crop.height));
+    const croppedContext = cropped.getContext("2d");
+    if (!croppedContext) throw new Error("Could not crop Architecture artwork.");
+    croppedContext.drawImage(
+      canvas,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      cropped.width,
+      cropped.height,
+    );
+    return cropped.toDataURL("image/png");
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+async function collectArchitectureObjects(wrapper, deck, blockIndex) {
+  const snapshot = wrapper.__presentationPptxSnapshot;
+  const svg = wrapper.querySelector("svg.architecture-svg");
+  if (!snapshot || !svg) {
+    return {
+      elements: [],
+      fallbacks: [pptxFallback("architecture", wrapper, deck, "architecture-model-unavailable")],
+    };
+  }
+  const svgRect = svg.getBoundingClientRect();
+  const deckRect = deck.getBoundingClientRect();
+  const scale = Math.min(
+    svgRect.width / snapshot.canvas.width,
+    svgRect.height / snapshot.canvas.height,
+  );
+  const usedWidth = snapshot.canvas.width * scale;
+  const usedHeight = snapshot.canvas.height * scale;
+  const originX = svgRect.left - deckRect.left + (svgRect.width - usedWidth) / 2;
+  const originY = svgRect.top - deckRect.top + (svgRect.height - usedHeight) / 2;
+  const mapBounds = (object) => ({
+    x: roundedMetric(originX + object.x * scale),
+    y: roundedMetric(originY + object.y * scale),
+    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 = mapped.dash ? "dash" : "solid";
+    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 architectureGroups = [...wrapper.querySelectorAll("[data-architecture-type]")];
+  const findById = (id) =>
+    architectureGroups.find((element) => element.getAttribute("data-architecture-id") === id);
+  const foregroundCandidates = [];
+  for (const icon of snapshot.icons || []) {
+    const group = findById(icon.id);
+    const source = group?.querySelector("[data-architecture-icon]");
+    if (source) {
+      const rawBounds = mapBounds(icon);
+      const padding = Math.max(
+        0,
+        Math.min(2, rawBounds.x - originX, rawBounds.y - originY),
+      );
+      const bounds = {
+        x: rawBounds.x - padding,
+        y: rawBounds.y - padding,
+        width: rawBounds.width + padding * 2,
+        height: rawBounds.height + padding * 2,
+      };
+      foregroundCandidates.push({
+        key: `icon:${icon.id}`,
+        source,
+        alt: `${icon.icon} icon`,
+        bounds,
+        crop: {
+          x: bounds.x - originX,
+          y: bounds.y - originY,
+          width: bounds.width,
+          height: bounds.height,
+        },
+        architecture: {
+          kind: "icon-picture",
+          id: icon.id,
+          sourcePath: icon.sourcePath,
+          order: icon.order,
+          z: icon.z,
+        },
+      });
+    }
+  }
+  for (const object of snapshot.objects.filter((entry) => entry.type === "image")) {
+    const source = findById(object.architecture.id);
+    if (source) {
+      const rawBounds = mapBounds(object);
+      const padding = Math.max(
+        0,
+        Math.min(2, rawBounds.x - originX, rawBounds.y - originY),
+      );
+      const bounds = {
+        x: rawBounds.x - padding,
+        y: rawBounds.y - padding,
+        width: rawBounds.width + padding * 2,
+        height: rawBounds.height + padding * 2,
+      };
+      foregroundCandidates.push({
+        key: `image:${object.architecture.id}`,
+        source,
+        alt: `${object.architecture.id} image`,
+        bounds,
+        crop: {
+          x: bounds.x - originX,
+          y: bounds.y - originY,
+          width: bounds.width,
+          height: bounds.height,
+        },
+        architecture: {
+          ...object.architecture,
+          kind: "image-picture",
+        },
+      });
+    }
+  }
+  const foregroundLayers = new Map();
+  const expectedForegrounds =
+    (snapshot.icons?.length || 0) +
+    snapshot.objects.filter((object) => object.type === "image").length;
+  let foregroundReady = foregroundCandidates.length === expectedForegrounds;
+  try {
+    if (foregroundReady) {
+      const generated = await Promise.all(
+        foregroundCandidates.map(async (candidate) => ({
+          ...candidate,
+          src: await architectureForegroundPng(
+            svg,
+            [candidate.source],
+            usedWidth,
+            usedHeight,
+            candidate.crop,
+          ),
+        })),
+      );
+      generated.forEach((layer) => foregroundLayers.set(layer.key, layer));
+    } else {
+      throw new Error("Architecture foreground source was not found.");
+    }
+  } catch (error) {
+    foregroundReady = false;
+    foregroundLayers.clear();
+    fallbacks.push(
+      pptxFallback(
+        "architecture-foreground",
+        wrapper,
+        deck,
+        `foreground-picture-failed: ${error?.message || "unknown error"}`,
+      ),
+    );
+  }
+  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(
+        "architecture",
+        wrapper,
+        deck,
+        "architecture-rendered-as-artwork-after-foreground-failure",
+      ),
+    );
+    return { elements: [], fallbacks };
+  }
+
+  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}`);
+      fallbacks.push({
+        type: "architecture-image",
+        path: `architecture[${blockIndex}].${object.architecture.sourcePath}`,
+        reason: foregroundReady && layer
+          ? "architecture-image-rendered-as-foreground-picture"
+          : "architecture-image-rendered-as-artwork",
+        ...mapBounds(sourceObject),
+      });
+      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),
+    });
+  }
+  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"),
+        )
+        .forEach((child) => child.setAttribute("data-pptx-native", sourceObject.type));
+    } else if (architecture.kind === "connector") {
+      architectureGroups
+        .filter(
+          (element) =>
+            element.getAttribute("data-architecture-type") === "connector" &&
+            element.getAttribute("data-architecture-order") === String(architecture.order),
+        )
+        .forEach((group) =>
+          [...group.children]
+            .filter((child) => child.matches("path"))
+            .forEach((child) => child.setAttribute("data-pptx-native", "connector")),
+        );
+    } else if (architecture.kind.startsWith("connector-label")) {
+      wrapper
+        .querySelectorAll(
+          `[data-architecture-connector-label][data-architecture-label-layer]`,
+        )
+        .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");
+      }
+    });
+  }
+  if (snapshot.routing.degraded) {
+    fallbacks.push(
+      pptxFallback(
+        "architecture-routing",
+        wrapper,
+        deck,
+        "routing-warning-rendered-as-artwork",
+      ),
+    );
+  }
+  return { elements, fallbacks };
+}
+
+async function collectPptxSlide(slide, index) {
+  const { deck } = slide;
+  const elements = [];
+  const fallbacks = [];
+  const fallbackRoots = new Set();
+  const addFallback = (type, element, reason) => {
+    if (fallbackRoots.has(element)) return;
+    fallbackRoots.add(element);
+    fallbacks.push(pptxFallback(type, element, deck, reason));
+  };
+
+  for (const element of deck.querySelectorAll("header *, .body, .body *, footer *")) {
+    if (element.closest("pre, .architecture-diagram, .architecture-error")) continue;
+    const effects = unsupportedEffects(element).filter((effect) => effect !== "box-shadow");
+    if (!effects.length) continue;
+    const root = effectFallbackRoot(element);
+    if (root) {
+      addFallback(
+        "effect",
+        root,
+        `element-rendered-as-artwork: ${effects.join(", ")}`,
+      );
+    }
+  }
+
+  deck.querySelectorAll("pre.mermaid").forEach((element) =>
+    addFallback("mermaid", element, "mermaid-rendered-as-artwork"),
+  );
+  deck.querySelectorAll("pre:not(.mermaid)").forEach((element) =>
+    addFallback("code", element, "code-block-rendered-as-artwork"),
+  );
+  deck.querySelectorAll(".architecture-error").forEach((element) =>
+    addFallback("architecture", element, "architecture-error-rendered-as-artwork"),
+  );
+  deck
+    .querySelectorAll(
+      ".body div:not(.architecture-diagram):not(.architecture-error):not(.architecture-routing-warning), .body section, .body article, .body aside, .body details, .body video, .body audio, .body iframe, .body canvas, .body object, .body embed",
+    )
+    .forEach((element) => {
+      if (!element.closest(".architecture-diagram")) {
+        addFallback("html", element, "arbitrary-html-rendered-as-artwork");
+      }
+    });
+
+  const insideFallback = (element) =>
+    [...fallbackRoots].some((root) => root === element || root.contains(element));
+  const textCandidates = [
+    ...deck.querySelectorAll(
+      ".kicker, .slide-title, .body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body p, .body blockquote, .body li, footer > span, .theme-backcover-logo-text, .theme-backcover-copyright",
+    ),
+  ].filter(
+    (element) =>
+      !insideFallback(element) &&
+      !element.closest(".architecture-diagram") &&
+      !element.closest("table") &&
+      !(element.matches("p") && element.closest("blockquote, li")),
+  );
+  for (const element of textCandidates) {
+    const list = element.matches("li")
+      ? [...element.querySelectorAll(":scope > ul, :scope > ol")]
+      : [];
+    const parentList = element.matches("li") ? element.parentElement : null;
+    const actualLevel = element.matches("li")
+      ? Math.max(0, [...element.closest(".body").querySelectorAll("ul, ol")].filter((candidate) =>
+          candidate.contains(element),
+        ).length - 1)
+      : undefined;
+    const paragraph = paragraphFor(element, {
+      omitNestedLists: list.length > 0,
+      level: actualLevel,
+      bullet: parentList
+        ? {
+            type: parentList.tagName === "OL" ? "number" : "bullet",
+            character:
+              parentList.tagName === "OL"
+                ? `${Number(parentList.getAttribute("start") || 1) + [...parentList.children].indexOf(element)}.`
+                : "•",
+            ...(parentList.tagName === "OL"
+              ? { start: Number(parentList.getAttribute("start") || 1) + [...parentList.children].indexOf(element) }
+              : {}),
+          }
+        : undefined,
+    });
+    if (!paragraph.runs.some((run) => run.text.trim())) continue;
+    elements.push({
+      type: "text",
+      path: elementPath(element, deck),
+      ...(element.classList.contains("kicker")
+        ? textContentBounds(element, deck)
+        : relativeBounds(element, deck)),
+      paragraphs: [paragraph],
+      opacity: Number(getComputedStyle(element).opacity) || 1,
+      ...(element.matches("h1, h2, .slide-title") && renderedTextLineCount(element) === 1
+        ? { textWrap: "none" }
+        : {}),
+    });
+    element.setAttribute("data-pptx-native", "text");
+  }
+
+  for (const table of deck.querySelectorAll(".body table")) {
+    if (insideFallback(table)) continue;
+    const descendantEffects = new Set();
+    for (const descendant of table.querySelectorAll("*")) {
+      for (const effect of unsupportedEffects(descendant)) descendantEffects.add(effect);
+    }
+    if (descendantEffects.size) {
+      addFallback(
+        "effect",
+        table,
+        `element-rendered-as-artwork: ${[...descendantEffects].join(", ")}`,
+      );
+      continue;
+    }
+    const effects = unsupportedEffects(table);
+    if (parseFloat(getComputedStyle(table).borderRadius) > 0) effects.push("border-radius");
+    const artworkEffects = effects.filter(
+      (effect) => effect !== "box-shadow" && effect !== "border-radius",
+    );
+    if (artworkEffects.length) {
+      addFallback(
+        "effect",
+        table,
+        `element-rendered-as-artwork: ${effects.join(", ")}`,
+      );
+      continue;
+    }
+    const domRows = [...table.rows];
+    const columnCount = domRows[0]?.cells.length || 0;
+    if (
+      !columnCount ||
+      domRows.some(
+        (row) =>
+          row.cells.length !== columnCount ||
+          [...row.cells].some((cell) => cell.colSpan !== 1 || cell.rowSpan !== 1),
+      )
+    ) {
+      addFallback("table", table, "merged-table-rendered-as-artwork");
+      continue;
+    }
+    const rows = domRows.map((row) => ({
+      height: roundedMetric(row.getBoundingClientRect().height),
+      cells: [...row.cells].map((cell) => {
+        const style = getComputedStyle(cell);
+        return {
+          ...relativeBounds(cell, deck),
+          header: cell.tagName === "TH",
+          colspan: cell.colSpan,
+          rowspan: cell.rowSpan,
+          fill: normalizeCssColor(style.backgroundColor),
+          color: normalizeCssColor(style.color),
+          stroke: normalizeCssColor(style.borderColor),
+          strokeWidth: roundedMetric(parseFloat(style.borderWidth)) || 1,
+          alignment: pptxAlignment(style.textAlign),
+          paragraphs: [paragraphFor(cell)],
+        };
+      }),
+    }));
+    elements.push({
+      type: "table",
+      path: elementPath(table, deck),
+      ...relativeBounds(table, deck),
+      rows,
+    });
+    if (effects.length) {
+      fallbacks.push(
+        pptxFallback(
+          "effect",
+          table,
+          deck,
+          `native-table-approximates: ${effects.join(", ")}`,
+        ),
+      );
+      if (effects.includes("box-shadow")) preserveBoxShadow(table, deck);
+    }
+    table.setAttribute("data-pptx-native", "table");
+  }
+
+  for (const image of deck.querySelectorAll("img")) {
+    if (
+      image.closest(".architecture-diagram") ||
+      image.classList.contains("theme-cover-background") ||
+      insideFallback(image)
+    ) {
+      continue;
+    }
+    if (!rasterImageSupported(image)) {
+      const fit = getComputedStyle(image).objectFit;
+      addFallback(
+        "image",
+        image,
+        ["cover", "none"].includes(fit) ? "unsupported-image-fit" : "unsupported-image-format",
+      );
+      continue;
+    }
+    const style = getComputedStyle(image);
+    const effects = unsupportedEffects(image);
+    if (parseFloat(style.borderRadius) > 0) effects.push("border-radius");
+    const artworkEffects = effects.filter(
+      (effect) => effect !== "box-shadow" && effect !== "border-radius",
+    );
+    if (artworkEffects.length) {
+      addFallback(
+        "effect",
+        image,
+        `element-rendered-as-artwork: ${effects.join(", ")}`,
+      );
+      continue;
+    }
+    elements.push({
+      type: "image",
+      path: elementPath(image, deck),
+      ...relativeBounds(image, deck),
+      src: image.currentSrc || image.src,
+      alt: image.alt || "",
+      fit: style.objectFit || "contain",
+      opacity: Number(style.opacity) || 1,
+      naturalWidth: image.naturalWidth,
+      naturalHeight: image.naturalHeight,
+    });
+    image.setAttribute("data-pptx-native", "image");
+    if (effects.length) {
+      fallbacks.push(
+        pptxFallback(
+          "effect",
+          image,
+          deck,
+          `native-image-approximates: ${effects.join(", ")}`,
+        ),
+      );
+    }
+  }
+
+  const architectureWrappers = [...deck.querySelectorAll(".architecture-diagram")];
+  for (const [blockIndex, wrapper] of architectureWrappers.entries()) {
+    if (insideFallback(wrapper)) continue;
+    const architecture = await collectArchitectureObjects(wrapper, deck, blockIndex);
+    elements.push(...architecture.elements);
+    fallbacks.push(...architecture.fallbacks);
+  }
+
+  const layout = slide.titleSlide
+    ? "title"
+    : slide.sectionSlide
+      ? "section"
+      : slide.centerSlide
+        ? "center"
+        : slide.backcoverSlide
+          ? "backcover"
+          : "standard";
+  const visibleTitle = deck.querySelector("h1, h2")?.textContent?.trim();
+  return {
+    index,
+    layout,
+    theme: slide.theme,
+    title: visibleTitle || slide.title,
+    width: OUTPUT_WIDTH,
+    height: OUTPUT_HEIGHT,
+    elements,
+    fallbacks,
+  };
+}
+
+async function renderPptxDeck(
+  slides,
+  theme,
+  customCss = "",
+  themeMetadata = null,
+  themeLocked = false,
+) {
+  deckTheme = normalizeTheme(theme);
+  deckThemeLocked = Boolean(themeLocked);
+  customThemeMeta = themeMetadata && typeof themeMetadata === "object" ? themeMetadata : null;
+  applyCustomThemeCss(customCss);
+  document.documentElement.setAttribute("data-theme", deckTheme);
+  document.body.classList.add("pptx-mode", "fixed-output-mode", "mermaid-loading");
+  const rendered = slides.map((markdown) => createSlide(markdown, deckTheme));
+  const stage = document.getElementById("stage");
+  stage.replaceChildren(...rendered.map((slide) => slide.deck));
+  document.title = rendered[0]?.title || "MarkdStage";
+
+  if (document.fonts?.ready) await document.fonts.ready;
+  await afterLayout();
+  for (const slide of rendered) {
+    if (
+      slide.sizeMode === "auto" &&
+      !slide.titleSlide &&
+      !slide.sectionSlide &&
+      !slide.backcoverSlide
+    ) {
+      applyAutoSize(slide.deck, slide.bodyEl);
+    }
+  }
+  const token = ++renderToken;
+  for (const slide of rendered) {
+    await runMermaid(slide.bodyEl, slide.theme, token, false);
+  }
+  await waitForImages(stage);
+  await afterLayout();
+
+  const pptxSlides = [];
+  for (const [index, slide] of rendered.entries()) {
+    pptxSlides.push(await collectPptxSlide(slide, index));
+  }
+  const model = {
+    version: 1,
+    width: OUTPUT_WIDTH,
+    height: OUTPUT_HEIGHT,
+    slides: pptxSlides,
+  };
+  window.__presentationPptxModel = JSON.parse(JSON.stringify(model));
+  document.body.classList.add("pptx-artwork-mode");
+  document.body.setAttribute("data-pptx-artwork", "ready");
+  document.body.classList.remove("mermaid-loading");
+  document.documentElement.setAttribute("data-pptx-ready", "true");
+  return {
+    model: window.__presentationPptxModel,
+    layout: collectDeckLayout(rendered),
+  };
+}
+
+async function initPptx(params) {
+  const token = params.get("token") || "";
+  if (!token) throw new Error("Missing PowerPoint export token.");
+  try {
+    const response = await fetch(`./export-data?token=${encodeURIComponent(token)}`, {
+      cache: "no-store",
+    });
+    if (!response.ok) throw new Error(`Could not load PowerPoint export data (${response.status}).`);
+    const data = await response.json();
+    if (
+      !Array.isArray(data.slides) ||
+      data.slides.length === 0 ||
+      !data.slides.every((slide) => typeof slide === "string")
+    ) {
+      throw new Error("PowerPoint export data does not contain a valid deck.");
+    }
+    const output = await renderPptxDeck(
+      data.slides,
+      data.theme,
+      data.customThemeCss,
+      data.customThemeMeta,
+      data.themeLocked,
+    );
+    await reportOutputStatus(token, "ready", "", output.layout);
+  } catch (error) {
+    const message = error?.message || "PowerPoint rendering failed.";
+    console.error(message);
+    document.body.classList.remove("mermaid-loading");
+    document.documentElement.setAttribute("data-pptx-error", "true");
+    await reportOutputStatus(token, "error", message).catch(() => {});
+  }
+}
+
 async function renderPrintDeck(
   slides,
   theme,
@@ -1048,6 +2043,13 @@ function reportCaptureBootstrapFailure(error) {
   document.documentElement.setAttribute("data-capture-error", "true");
 }
 
+function reportPptxBootstrapFailure(error) {
+  const message = error?.message || "PowerPoint rendering failed.";
+  console.error(message);
+  document.body.classList.remove("mermaid-loading");
+  document.documentElement.setAttribute("data-pptx-error", "true");
+}
+
 // --- live update -----------------------------------------------------------
 // /state is the single source of truth for *what to show* (latest slide markdown
 // + a monotonic version + the deck position). SSE is just a low-latency "version
@@ -1066,13 +2068,21 @@ let importOpen = false;
 let importPending = false;
 let importFiles = [];
 let sourceBacked = false;
+let sourceModeAvailable = false;
 let sourceMode = "snapshot";
 let sourceWatchStatus = "inactive";
 let sourceWatchError = "";
 let presenterRequestPending = false;
 let presenterRunning = false;
+let presenterWindowAvailable = false;
+let presenterViewAvailable = false;
+let pdfExportAvailable = false;
+let pptxExportAvailable = false;
+let markdownImportAvailable = false;
 let presenterViewOpen = false;
+let presenterViewRequested = false;
 let pdfExportPending = false;
+let pptxExportPending = false;
 
 // Derive a short overview title from a slide fragment: first heading, else first
 // non-empty body line, trimmed. Mirrors the skill's title rule.
@@ -1119,7 +2129,7 @@ async function fetchDeck() {
  * early in init and never reaches this code. Return true only when the state changes.
  */
 function setArchitectureEditMode(enabled) {
-  const next = Boolean(enabled) && !presenterMode;
+  const next = Boolean(enabled) && architectureEditAvailable && !presenterMode;
   if (next === architectureEditMode) return false;
   architectureEditMode = next;
   document.body.classList.toggle("architecture-edit-mode", next);
@@ -1130,10 +2140,11 @@ function setArchitectureEditMode(enabled) {
 function updateArchitectureEditButton(enabled = architectureEditMode) {
   const button = document.getElementById("navEdit");
   if (!button) return;
-  button.hidden = presenterMode;
+  button.hidden = presenterMode || !architectureEditAvailable;
   button.dataset.state = enabled && !presenterMode ? "active" : "";
   button.title = enabled ? "Exit shape editing mode" : "Shape editing mode";
   button.setAttribute("aria-label", button.title);
+  syncMoreControls();
 }
 
 function sourceWatchErrorMessage(code) {
@@ -1149,10 +2160,11 @@ function updateSourceModeButton() {
   const button = document.getElementById("navSourceMode");
   const status = document.getElementById("sourceStatus");
   if (!button) return;
-  button.hidden = presenterMode || !sourceBacked;
+  button.hidden = presenterMode || !sourceBacked || !sourceModeAvailable;
   if (!sourceBacked) {
     button.dataset.state = "";
     if (status) status.textContent = "";
+    syncMoreControls();
     return;
   }
   if (sourceMode === "live" && sourceWatchStatus === "error") {
@@ -1161,6 +2173,7 @@ function updateSourceModeButton() {
     button.title = `${message}. Click to pin the display to the loaded snapshot`;
     button.setAttribute("aria-label", button.title);
     if (status) status.textContent = message;
+    syncMoreControls();
     return;
   }
   const live = sourceMode === "live";
@@ -1174,6 +2187,7 @@ function updateSourceModeButton() {
       ? "Slides refresh automatically when Markdown is saved"
       : "Markdown retains the display from the loaded snapshot";
   }
+  syncMoreControls();
 }
 
 async function requestSourceMode(mode) {
@@ -1197,7 +2211,7 @@ async function requestSourceMode(mode) {
 }
 
 async function toggleSourceMode() {
-  if (presenterMode || !sourceBacked) return;
+  if (presenterMode || !sourceBacked || !sourceModeAvailable) return;
   await requestSourceMode(sourceMode === "live" ? "snapshot" : "live");
 }
 
@@ -1218,7 +2232,7 @@ async function requestArchitectureEditMode(enabled) {
 }
 
 async function toggleArchitectureEditMode() {
-  if (presenterMode) return;
+  if (presenterMode || !architectureEditAvailable) return;
   await requestArchitectureEditMode(!architectureEditMode);
   await fetchState();
 }
@@ -1230,7 +2244,23 @@ async function toggleArchitectureEditMode() {
  * Always return save success or failure to the caller. Swallowing it would make
  * an unsaved edit look successful, recreating the silent-ignore behavior fixed in Phase 5.
  */
-async function saveArchitectureBlock(index, block, source) {
+function saveArchitectureBlock(index, block, source, editorRenderToken) {
+  const pending = architectureSaveQueue
+    .catch(() => {})
+    .then(() => {
+      if (editorRenderToken !== renderToken) {
+        return {
+          ok: false,
+          message: "The displayed deck was replaced. Select the diagram again",
+        };
+      }
+      return saveArchitectureBlockNow(index, block, source);
+    });
+  architectureSaveQueue = pending;
+  return pending;
+}
+
+async function saveArchitectureBlockNow(index, block, source) {
   let res;
   try {
     res = await fetch("./edit", {
@@ -1283,6 +2313,9 @@ async function saveArchitectureBlock(index, block, source) {
 }
 
 async function openDetailedArchitectureEditor(index, block) {
+  const pendingWindow =
+    architectureDetailedEditTarget === "window" ? window.open("", "_blank") : null;
+  if (pendingWindow) pendingWindow.opener = null;
   let response;
   try {
     response = await fetch("./architecture-editor/open", {
@@ -1291,10 +2324,22 @@ async function openDetailedArchitectureEditor(index, block) {
       body: JSON.stringify({ index, block }),
     });
   } catch (_) {
+    pendingWindow?.close();
     return { ok: false, message: "Could not connect to the server." };
   }
   const result = await response.json().catch(() => ({}));
-  if (response.ok && result.ok === true) return result;
+  if (response.ok && result.ok === true) {
+    if (typeof result.url === "string" && result.url) {
+      if (pendingWindow) pendingWindow.location.replace(result.url);
+      else if (!window.open(result.url, "_blank", "noopener")) {
+        return { ok: false, message: "Allow pop-ups to open the Architecture Editor." };
+      }
+    } else {
+      pendingWindow?.close();
+    }
+    return result;
+  }
+  pendingWindow?.close();
   if (result.error === "source_not_available") {
     return {
       ok: false,
@@ -1320,10 +2365,29 @@ async function fetchState() {
     data.customThemeMeta && typeof data.customThemeMeta === "object"
       ? data.customThemeMeta
       : null;
+  if (typeof data.presenterWindowAvailable === "boolean") {
+    presenterWindowAvailable = data.presenterWindowAvailable;
+  }
+  if (typeof data.presenterViewAvailable === "boolean") {
+    presenterViewAvailable = data.presenterViewAvailable;
+  }
+  if (typeof data.pdfExportAvailable === "boolean") {
+    pdfExportAvailable = data.pdfExportAvailable;
+  }
+  if (typeof data.pptxExportAvailable === "boolean") {
+    pptxExportAvailable = data.pptxExportAvailable;
+  }
+  if (typeof data.markdownImportAvailable === "boolean") {
+    markdownImportAvailable = data.markdownImportAvailable;
+  }
   if (typeof data.presenterRunning === "boolean") {
     updatePresenterButton(data.presenterRunning);
   }
+  updateHostActionButtons();
   if (typeof data.sourceBacked === "boolean") sourceBacked = data.sourceBacked;
+  if (typeof data.sourceModeAvailable === "boolean") {
+    sourceModeAvailable = data.sourceModeAvailable;
+  }
   sourceMode = data.sourceMode === "live" ? "live" : "snapshot";
   sourceWatchStatus =
     data.sourceWatchStatus === "watching" || data.sourceWatchStatus === "error"
@@ -1331,6 +2395,14 @@ async function fetchState() {
       : "inactive";
   sourceWatchError = typeof data.sourceWatchError === "string" ? data.sourceWatchError : "";
   updateSourceModeButton();
+  const editAvailabilityChanged =
+    typeof data.architectureEditAvailable === "boolean" &&
+    data.architectureEditAvailable !== architectureEditAvailable;
+  if (typeof data.architectureEditAvailable === "boolean") {
+    architectureEditAvailable = data.architectureEditAvailable;
+  }
+  architectureDetailedEditTarget =
+    data.architectureDetailedEditTarget === "window" ? "window" : "canvas";
   const detailedEditChanged =
     typeof data.architectureDetailedEdit === "boolean" &&
     data.architectureDetailedEdit !== architectureDetailedEdit;
@@ -1338,7 +2410,15 @@ async function fetchState() {
     architectureDetailedEdit = data.architectureDetailedEdit;
   }
   // Editing-mode changes do not increment the version, so process them before the version guard.
+  let availabilityDisabledEditMode = false;
+  if (editAvailabilityChanged) {
+    if (!architectureEditAvailable) {
+      availabilityDisabledEditMode = setArchitectureEditMode(false);
+    }
+    updateArchitectureEditButton();
+  }
   if (
+    availabilityDisabledEditMode ||
     (typeof data.architectureEdit === "boolean" &&
       setArchitectureEditMode(data.architectureEdit)) ||
     (architectureEditMode && detailedEditChanged)
@@ -1360,6 +2440,10 @@ async function fetchState() {
   navMode = data.mode === "adhoc" ? "adhoc" : "deck";
   renderSlide(typeof data.markdown === "string" ? data.markdown : "");
   updateNav();
+  if (presenterViewRequested) {
+    presenterViewRequested = false;
+    openPresenterView();
+  }
 }
 
 // --- navigation ------------------------------------------------------------
@@ -1391,7 +2475,7 @@ function goToIndex(i) {
 }
 
 async function setPresenterRunning(running) {
-  if (presenterRequestPending) return;
+  if (!presenterWindowAvailable || presenterRequestPending) return;
   presenterRequestPending = true;
   const button = document.getElementById("navPresent");
   const status = document.getElementById("presentStatus");
@@ -1431,6 +2515,7 @@ async function setPresenterRunning(running) {
       button.dataset.state = "error";
       button.title = message;
     }
+    syncMoreControls();
   } finally {
     presenterRequestPending = false;
     if (button) button.disabled = false;
@@ -1445,6 +2530,82 @@ function togglePresenterWindow() {
   return setPresenterRunning(!presenterRunning);
 }
 
+function visibleMoreControlButtons() {
+  const panel = document.getElementById("navMorePanel");
+  if (!panel) return [];
+  return [...panel.querySelectorAll(".nav-more-item")].filter((button) => !button.hidden);
+}
+
+function setMoreControlsOpen(enabled, { focusFirst = false, restoreFocus = false } = {}) {
+  const nav = document.getElementById("nav");
+  const trigger = document.getElementById("navMore");
+  const panel = document.getElementById("navMorePanel");
+  if (!nav || !trigger || !panel) return;
+
+  const next = Boolean(enabled) && !nav.classList.contains("nav-empty") && !trigger.hidden;
+  moreControlsOpen = next;
+  trigger.setAttribute("aria-expanded", next ? "true" : "false");
+  panel.hidden = nav.classList.contains("nav-empty") ? !markdownImportAvailable : !next;
+
+  if (next && focusFirst) {
+    requestAnimationFrame(() => visibleMoreControlButtons()[0]?.focus());
+  } else if (!next && restoreFocus) {
+    trigger.focus();
+  }
+}
+
+function toggleMoreControls() {
+  setMoreControlsOpen(!moreControlsOpen, { focusFirst: !moreControlsOpen });
+}
+
+function syncMoreControls() {
+  const nav = document.getElementById("nav");
+  const trigger = document.getElementById("navMore");
+  const panel = document.getElementById("navMorePanel");
+  if (!nav || !trigger || !panel) return;
+
+  panel.querySelectorAll(".nav-more-group").forEach((group) => {
+    group.hidden = ![...group.querySelectorAll(".nav-more-item")].some(
+      (button) => !button.hidden,
+    );
+  });
+
+  const buttons = visibleMoreControlButtons();
+  const hasError = buttons.some((button) => button.dataset.state === "error");
+  const hasActive = buttons.some((button) => button.dataset.state === "active");
+  trigger.dataset.state = hasError ? "error" : hasActive ? "active" : "";
+  trigger.title = hasError
+    ? "More controls (attention required)"
+    : hasActive
+      ? "More controls (an option is active)"
+      : "More controls";
+  trigger.setAttribute("aria-label", trigger.title);
+
+  const empty = nav.classList.contains("nav-empty");
+  trigger.hidden = empty || buttons.length === 0;
+  if (trigger.hidden) moreControlsOpen = false;
+  trigger.setAttribute("aria-expanded", moreControlsOpen ? "true" : "false");
+  panel.hidden = empty ? !markdownImportAvailable : !moreControlsOpen;
+}
+
+function updateHostActionButtons() {
+  const present = document.getElementById("navPresent");
+  if (present) present.hidden = presenterMode || !presenterWindowAvailable;
+  const presenterView = document.getElementById("navPresenterView");
+  if (presenterView) presenterView.hidden = presenterMode || !presenterViewAvailable;
+  const presenterToggle = document.getElementById("presenterToggleButton");
+  if (presenterToggle) presenterToggle.hidden = !presenterWindowAvailable;
+  const exportButton = document.getElementById("navExport");
+  if (exportButton) exportButton.hidden = presenterMode || !pdfExportAvailable;
+  const pptxButton = document.getElementById("navExportPptx");
+  if (pptxButton) pptxButton.hidden = presenterMode || !pptxExportAvailable;
+  const importButton = document.getElementById("navImport");
+  if (importButton) importButton.hidden = presenterMode || !markdownImportAvailable;
+  if (!presenterViewAvailable && presenterViewOpen) closePresenterView();
+  if (!markdownImportAvailable && importOpen) closeImportPicker();
+  syncMoreControls();
+}
+
 function updatePresenterButton(running, message = "") {
   presenterRunning = running;
   const button = document.getElementById("navPresent");
@@ -1459,14 +2620,17 @@ function updatePresenterButton(running, message = "") {
     toggle.textContent = running ? "End presentation" : "Start presentation";
     toggle.dataset.state = running ? "active" : "";
   }
+  syncMoreControls();
 }
 
 async function exportPdfFromCanvas() {
-  if (pdfExportPending) return;
+  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.";
 
   try {
@@ -1486,6 +2650,7 @@ async function exportPdfFromCanvas() {
       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);
@@ -1494,9 +2659,57 @@ async function exportPdfFromCanvas() {
       button.dataset.state = "error";
       button.title = message;
     }
+    syncMoreControls();
   } finally {
     pdfExportPending = false;
     if (button) button.disabled = false;
+    if (pptxButton) pptxButton.disabled = false;
+  }
+}
+
+async function exportPptxFromCanvas() {
+  if (!pptxExportAvailable || pdfExportPending || pptxExportPending) return;
+  pptxExportPending = true;
+  const button = document.getElementById("navExportPptx");
+  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.";
+
+  try {
+    const response = await fetch("./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 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;
+    }
+    syncMoreControls();
+  } 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();
+  } finally {
+    pptxExportPending = false;
+    if (button) button.disabled = false;
+    if (pdfButton) pdfButton.disabled = false;
   }
 }
 
@@ -1512,6 +2725,7 @@ function setFixedPreviewMode(enabled) {
       ? "Return to responsive canvas layout"
       : "Preview PDF layout at 16:9";
   }
+  syncMoreControls();
   if (fixedPreviewMode) {
     updateFixedPreviewScale();
   } else {
@@ -1529,10 +2743,10 @@ function toggleFixedPreviewMode() {
 function updateNav() {
   const nav = document.getElementById("nav");
   if (!nav) return;
-  // Outside presenter view, show only the load button even when no deck exists,
-  // allowing Markdown import before any slide has been loaded.
+  // Outside presenter view, show only the load button when the host supports
+  // Markdown import before any slide has been loaded.
   const empty = navTotal <= 0;
-  nav.hidden = previewMode || (empty && presenterMode);
+  nav.hidden = previewMode || (empty && (presenterMode || !markdownImportAvailable));
   nav.classList.toggle("nav-empty", empty);
   const counter = document.getElementById("navCounter");
   if (counter) {
@@ -1546,10 +2760,11 @@ function updateNav() {
   if (next) next.disabled = navMode === "deck" && navIndex >= navTotal - 1;
   highlightOverview();
   updatePresenterView();
+  syncMoreControls();
 }
 
 function openPresenterView() {
-  if (presenterMode || navTotal <= 0) return;
+  if (presenterMode || !presenterViewAvailable || navTotal <= 0) return;
   presenterViewOpen = true;
   document.body.classList.add("presenter-view-mode");
   const view = document.getElementById("presenterView");
@@ -1570,7 +2785,7 @@ function closePresenterView() {
   document.body.classList.remove("presenter-view-mode");
   const view = document.getElementById("presenterView");
   if (view) view.hidden = true;
-  document.getElementById("navPresenterView")?.focus();
+  document.getElementById("navMore")?.focus();
 }
 
 function updatePresenterView() {
@@ -1770,7 +2985,7 @@ async function importMarkdown(path) {
 }
 
 function openImportPicker() {
-  if (presenterMode) return;
+  if (presenterMode || !markdownImportAvailable) return;
   importOpen = true;
   const el = document.getElementById("importPicker");
   if (el) el.hidden = false;
@@ -1894,10 +3109,11 @@ function wirePreviewKeyboardNavigation() {
 }
 
 function wireControls() {
-  const bind = (id, fn) => {
+  const bind = (id, fn, { closeMore = false } = {}) => {
     const el = document.getElementById(id);
     if (!el) return;
     el.addEventListener("click", () => {
+      if (closeMore) setMoreControlsOpen(false);
       fn();
       // Drop focus so a follow-up Space/Enter doesn't re-trigger the button on
       // top of the global keyboard handler.
@@ -1906,14 +3122,16 @@ function wireControls() {
   };
   bind("navPrev", goPrev);
   bind("navNext", goNext);
-  bind("navEdit", toggleArchitectureEditMode);
-  bind("navPresent", openPresenterWindow);
-  bind("navPresenterView", openPresenterView);
-  bind("navFixedPreview", toggleFixedPreviewMode);
-  bind("navExport", exportPdfFromCanvas);
-  bind("navImport", toggleImportPicker);
-  bind("navSourceMode", toggleSourceMode);
   bind("navList", toggleOverview);
+  bind("navMore", toggleMoreControls);
+  bind("navEdit", toggleArchitectureEditMode, { closeMore: true });
+  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("navImport", toggleImportPicker, { closeMore: true });
+  bind("navSourceMode", toggleSourceMode, { closeMore: true });
   bind("overviewClose", closeOverview);
   bind("importClose", closeImportPicker);
   bind("presenterPrevButton", goPrev);
@@ -1941,6 +3159,14 @@ function wireControls() {
     });
   }
 
+  document.addEventListener("pointerdown", (e) => {
+    if (!moreControlsOpen) return;
+    const tools = document.getElementById("navTools");
+    const panel = document.getElementById("navMorePanel");
+    if (tools?.contains(e.target) || panel?.contains(e.target)) return;
+    setMoreControlsOpen(false);
+  });
+
   wirePointerNavigation();
 
   // The iframe must be focused to receive key events; grab focus up front and
@@ -1963,16 +3189,23 @@ function wireControls() {
       e.preventDefault();
       return;
     }
+    if (e.key === "Escape" && moreControlsOpen) {
+      setMoreControlsOpen(false, { restoreFocus: true });
+      e.preventDefault();
+      return;
+    }
     if (handleSlideNavigationKey(e)) return;
     if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
     switch (e.key) {
       case "o":
       case "O":
+        setMoreControlsOpen(false);
         toggleOverview();
         e.preventDefault();
         break;
       case "i":
       case "I":
+        setMoreControlsOpen(false);
         toggleImportPicker();
         e.preventDefault();
         break;
@@ -2014,6 +3247,11 @@ function init() {
   } catch (_) {}
 
   const params = new URLSearchParams(window.location.search);
+  presenterViewRequested = params.get("presenter") === "1";
+  if (params.get("pptx") === "1") {
+    initPptx(params).catch(reportPptxBootstrapFailure);
+    return;
+  }
   if (params.get("capture") === "1") {
     initCapture(params).catch(reportCaptureBootstrapFailure);
     return;