@markdstage/markdstage 2.6.0 → 3.1.0

package/shared/renderer/renderer.js

@@ -89,6 +89,8 @@ let customThemeMeta = null;
 // reveal a newer, still-rendering one.
 let renderToken = 0;
 let lastMermaidTheme = null;
+let pptxFallbackSequence = 0;
+const pptxFallbackCaptureElements = new Map();
 // 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;
@@ -119,6 +121,7 @@ let layoutFrame = 0;
 const SCROLL_EPSILON = 2;
 const OUTPUT_WIDTH = 1280;
 const OUTPUT_HEIGHT = 720;
+const PPTX_LAYOUT_NAMES = ["title", "default", "center", "section", "backcover"];
 const LAYOUT_HINT_LIMIT = 5;
 
 function applyCustomThemeCss(css) {
@@ -877,7 +880,7 @@ 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;
+const PPTX_DIRECT_IMAGE = /\.(?:png|jpe?g|gif|svg)(?:$|[?#])/i;
 
 function normalizeCssColor(value) {
   const text = String(value || "").trim();
@@ -945,6 +948,39 @@ function textContentBounds(element, deck) {
   };
 }
 
+function listItemTextBounds(element, deck) {
+  const rects = [];
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (!node.nodeValue) return;
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      rects.push(
+        ...[...range.getClientRects()].filter(
+          (rect) => rect.width > 0 && rect.height > 0,
+        ),
+      );
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node !== element && node.matches("ul, ol")) return;
+    node.childNodes.forEach(visit);
+  };
+  element.childNodes.forEach(visit);
+  if (rects.length === 0) return relativeBounds(element, deck);
+  const slide = deck.getBoundingClientRect();
+  const left = Math.min(...rects.map((rect) => rect.left));
+  const top = Math.min(...rects.map((rect) => rect.top));
+  const right = Math.max(...rects.map((rect) => rect.right));
+  const bottom = Math.max(...rects.map((rect) => rect.bottom));
+  return {
+    x: roundedMetric(left - slide.left),
+    y: roundedMetric(top - slide.top),
+    width: roundedMetric(right - left),
+    height: roundedMetric(bottom - top),
+  };
+}
+
 function textInsetsFor(element) {
   const style = getComputedStyle(element);
   const metric = (padding, border) => {
@@ -999,13 +1035,13 @@ function singleLineTextLayout(element, deck, bounds, textInsets, alignment) {
   };
 }
 
-function rasterImageSupported(image) {
+function directImageSupported(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;
+  if (/^data:image\/(?:png|jpeg|gif|svg\+xml)[;,]/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);
+    return url.origin === window.location.origin && PPTX_DIRECT_IMAGE.test(url.href);
   } catch (_) {
     return false;
   }
@@ -1084,6 +1120,141 @@ function paragraphFor(element, options = {}) {
   };
 }
 
+function listBulletFor(element) {
+  const parentList = element.parentElement;
+  const ordered = parentList?.tagName === "OL";
+  const start = Number(parentList?.getAttribute("start") || 1);
+  const itemIndex = parentList
+    ? [...parentList.children].filter((child) => child.tagName === "LI").indexOf(element)
+    : 0;
+  const number = start + Math.max(0, itemIndex);
+  return {
+    type: ordered ? "number" : "bullet",
+    character: ordered ? `${number}.` : "•",
+    color: normalizeCssColor(getComputedStyle(element, "::marker").color),
+    ...(ordered ? { start: number } : {}),
+  };
+}
+
+function outermostListFor(element) {
+  let list = element.parentElement;
+  while (list?.matches("ul, ol")) {
+    const parentItem = list.parentElement?.closest("li");
+    const parentList = parentItem?.parentElement;
+    if (!parentItem || !parentList?.matches("ul, ol")) return list;
+    list = parentList;
+  }
+  return null;
+}
+
+function trimListItemRuns(runs) {
+  const trimmed = runs.map((run) => ({ ...run }));
+  while (trimmed.length > 0 && /^[ \t\r\n]*$/.test(trimmed[0].text)) {
+    trimmed.shift();
+  }
+  while (trimmed.length > 0 && /^[ \t\r\n]*$/.test(trimmed.at(-1).text)) {
+    trimmed.pop();
+  }
+  if (trimmed.length > 0) {
+    trimmed[0].text = trimmed[0].text.replace(/^[ \t\r\n]+/, "");
+    trimmed.at(-1).text = trimmed.at(-1).text.replace(/[ \t\r\n]+$/, "");
+  }
+  return trimmed.filter((run) => run.text);
+}
+
+function nativeListTextElement(list, deck, eligibleItems) {
+  const items = [...list.querySelectorAll("li")].filter((item) =>
+    eligibleItems.has(item),
+  );
+  if (items.length === 0) return null;
+  const entries = items
+    .map((item) => {
+      const paragraph = paragraphFor(item, {
+        omitNestedLists: true,
+        level: Math.max(
+          0,
+          [...item.closest(".body").querySelectorAll("ul, ol")].filter((candidate) =>
+            candidate.contains(item),
+          ).length - 1,
+        ),
+        bullet: listBulletFor(item),
+      });
+      paragraph.runs = trimListItemRuns(paragraph.runs);
+      return {
+        item,
+        paragraph,
+        bounds: listItemTextBounds(item, deck),
+        availableBounds: relativeBounds(item, deck),
+      };
+    })
+    .filter(({ paragraph }) => paragraph.runs.length > 0);
+  if (entries.length === 0) return null;
+  const x = Math.min(...entries.map(({ bounds }) => bounds.x));
+  const y = Math.min(...entries.map(({ bounds }) => bounds.y));
+  const right = Math.max(
+    ...entries.map(({ availableBounds }) => availableBounds.x + availableBounds.width),
+  );
+  const bottom = Math.max(
+    ...entries.map(({ bounds }) => bounds.y + bounds.height),
+  );
+  const paragraphs = entries.map(({ item, paragraph, bounds }, index) => {
+    const style = getComputedStyle(item);
+    const lineSpacing = roundedMetric(Number.parseFloat(style.lineHeight));
+    const nextBounds = entries[index + 1]?.bounds;
+    const leftMargin = roundedMetric(Math.max(0, bounds.x - x));
+    const spaceAfter = roundedMetric(
+      Math.max(0, nextBounds ? nextBounds.y - (bounds.y + bounds.height) : 0),
+    );
+    return {
+      ...paragraph,
+      ...(lineSpacing > 0 ? { lineSpacing } : {}),
+      ...(leftMargin > 0 ? { leftMargin } : {}),
+      spaceBefore: 0,
+      spaceAfter,
+    };
+  });
+  for (const { item } of entries) item.setAttribute("data-pptx-native", "text");
+  list.setAttribute("data-pptx-native", "text");
+  return {
+    type: "text",
+    path: elementPath(list, deck),
+    x,
+    y,
+    width: roundedMetric(right - x),
+    height: roundedMetric(bottom - y),
+    zOrder: Math.max(
+      Number(list.dataset.pptxZOrder) || 0,
+      ...items.map((item) => Number(item.dataset.pptxZOrder) || 0),
+    ),
+    paragraphs,
+    opacity: Number(getComputedStyle(list).opacity) || 1,
+  };
+}
+
+function codeParagraphsFor(element) {
+  const style = getComputedStyle(element);
+  const baseRun = { text: "", ...runStyle(element) };
+  const lines = [[]];
+  for (const run of collectTextRuns(element)) {
+    const segments = run.text.replace(/\r\n?/g, "\n").split("\n");
+    segments.forEach((text, index) => {
+      if (text) lines.at(-1).push({ ...run, text });
+      if (index < segments.length - 1) lines.push([]);
+    });
+  }
+  // marked terminates fenced code with one newline. Remove that synthetic line
+  // while retaining deliberate blank lines before the closing fence.
+  if (lines.length > 1 && lines.at(-1).length === 0) lines.pop();
+  const lineSpacing = roundedMetric(Number.parseFloat(style.lineHeight));
+  return lines.map((runs) => ({
+    alignment: "left",
+    runs: runs.length ? runs : [{ ...baseRun }],
+    ...(lineSpacing > 0 ? { lineSpacing } : {}),
+    spaceBefore: 0,
+    spaceAfter: 0,
+  }));
+}
+
 function renderedTextLineCount(element) {
   const range = document.createRange();
   range.selectNodeContents(element);
@@ -1118,24 +1289,237 @@ function unsupportedEffects(element) {
   return effects;
 }
 
+function effectPaintPadding(element, effects) {
+  if (
+    !effects.some((effect) =>
+      ["text-shadow", "box-shadow", "filter", "backdrop-filter"].includes(effect),
+    )
+  ) {
+    return 0;
+  }
+  const style = getComputedStyle(element);
+  const values = [
+    effects.includes("text-shadow") ? style.textShadow : "",
+    effects.includes("box-shadow") ? style.boxShadow : "",
+    effects.includes("filter") ? style.filter : "",
+    effects.includes("backdrop-filter") ? style.backdropFilter : "",
+  ];
+  const lengths = values.flatMap((value) =>
+    [...String(value).matchAll(/-?\d+(?:\.\d+)?px/g)].map((match) =>
+      Math.abs(Number.parseFloat(match[0])),
+    ),
+  );
+  return Math.min(
+    256,
+    Math.max(32, Math.ceil(lengths.reduce((sum, value) => sum + value, 0) * 2)),
+  );
+}
+
+function subtreeEffectPaintPadding(element) {
+  return Math.max(
+    0,
+    ...[element, ...element.querySelectorAll("*")].map((candidate) => {
+      const effects = unsupportedEffects(candidate);
+      return effectPaintPadding(candidate, effects);
+    }),
+  );
+}
+
+function assignPptxPaintOrder(deck) {
+  const elements = [...deck.querySelectorAll("*")];
+  const entries = elements.map((element, domOrder) => {
+    const stacking = [];
+    const ancestors = [];
+    for (let current = element; current && current !== deck; current = current.parentElement) {
+      ancestors.push(current);
+    }
+    for (const current of ancestors.reverse()) {
+      const zIndex = getComputedStyle(current).zIndex;
+      if (zIndex !== "auto" && Number.isFinite(Number(zIndex))) {
+        stacking.push(Number(zIndex));
+      }
+    }
+    return { element, domOrder, stacking };
+  });
+  entries.sort((left, right) => {
+    const length = Math.max(left.stacking.length, right.stacking.length);
+    for (let index = 0; index < length; index += 1) {
+      const difference = (left.stacking[index] || 0) - (right.stacking[index] || 0);
+      if (difference) return difference;
+    }
+    return left.domOrder - right.domOrder;
+  });
+  entries.forEach(({ element }, zOrder) => {
+    element.dataset.pptxZOrder = String(zOrder);
+  });
+}
+
 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",
+    "p, li, blockquote, table, img, h1, h2, h3, h4, h5, h6, div, section, article, aside, details, video, audio, iframe, canvas, object, embed, .kicker, .slide-title, .theme-backcover-logo-text, .theme-backcover-copyright, .body, header, footer",
   );
 }
 
-function pptxFallback(type, element, deck, reason) {
+function fallbackBounds(element, deck, padding = 0, includeDescendants = false) {
+  const candidates = (
+    includeDescendants ? [element, ...element.querySelectorAll("*")] : [element]
+  ).filter((candidate) => {
+    const style = getComputedStyle(candidate);
+    return style.display !== "none";
+  });
+  const slide = deck.getBoundingClientRect();
+  const relativeRect = (rect) => ({
+    x: rect.left - slide.left,
+    y: rect.top - slide.top,
+    width: rect.width,
+    height: rect.height,
+  });
+  const bounds = candidates.map((candidate) =>
+    relativeRect(candidate.getBoundingClientRect()),
+  );
+  for (const candidate of candidates) {
+    for (const node of candidate.childNodes) {
+      if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue;
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      bounds.push(
+        ...[...range.getClientRects()]
+          .filter((rect) => rect.width > 0 && rect.height > 0)
+          .map(relativeRect),
+      );
+    }
+  }
+  const left = Math.min(
+    OUTPUT_WIDTH,
+    Math.max(0, Math.min(...bounds.map((candidate) => candidate.x)) - padding),
+  );
+  const top = Math.min(
+    OUTPUT_HEIGHT,
+    Math.max(0, Math.min(...bounds.map((candidate) => candidate.y)) - padding),
+  );
+  const right = Math.min(
+    OUTPUT_WIDTH,
+    Math.max(
+      0,
+      Math.max(...bounds.map((candidate) => candidate.x + candidate.width)) + padding,
+    ),
+  );
+  const bottom = Math.min(
+    OUTPUT_HEIGHT,
+    Math.max(
+      0,
+      Math.max(...bounds.map((candidate) => candidate.y + candidate.height)) + padding,
+    ),
+  );
+  return {
+    x: roundedMetric(left),
+    y: roundedMetric(top),
+    width: roundedMetric(Math.max(0, right - left)),
+    height: roundedMetric(Math.max(0, bottom - top)),
+  };
+}
+
+function pptxFallback(type, element, deck, reason, options = {}) {
+  const bounds = fallbackBounds(
+    element,
+    deck,
+    options.padding,
+    options.includeDescendants,
+  );
+  const artwork = options.artwork !== false && bounds.width > 0 && bounds.height > 0;
+  const captureElement = options.captureElement || element;
+  let captureId;
+  if (artwork) {
+    captureId = `pptx-fallback-${++pptxFallbackSequence}`;
+    const ids = new Set(
+      (captureElement.getAttribute("data-pptx-fallback-ids") || "")
+        .split(/\s+/)
+        .filter(Boolean),
+    );
+    ids.add(captureId);
+    captureElement.setAttribute("data-pptx-fallback-ids", [...ids].join(" "));
+    pptxFallbackCaptureElements.set(captureId, captureElement);
+  }
+  const sourceOrder = Number(element.dataset.pptxZOrder);
+  const zOrder = Number.isFinite(sourceOrder)
+    ? sourceOrder - (options.behindNative ? 0.25 : 0)
+    : undefined;
   return {
     type,
     path: elementPath(element, deck),
     reason,
-    ...relativeBounds(element, deck),
+    ...bounds,
+    ...(captureId ? { captureId } : {}),
+    ...(zOrder !== undefined ? { zOrder } : {}),
+    ...(!artwork ? { artwork: false } : {}),
   };
 }
 
+function styleHasVisualDecoration(style) {
+  const backgroundVisible =
+    style.backgroundImage !== "none" ||
+    !["transparent", "rgba(0, 0, 0, 0)"].includes(style.backgroundColor);
+  const borderVisible = ["Top", "Right", "Bottom", "Left"].some(
+    (side) =>
+      Number.parseFloat(style[`border${side}Width`]) > 0 &&
+      style[`border${side}Style`] !== "none" &&
+      !["transparent", "rgba(0, 0, 0, 0)"].includes(style[`border${side}Color`]),
+  );
+  return backgroundVisible || borderVisible;
+}
+
+function hasVisualDecoration(element) {
+  return styleHasVisualDecoration(getComputedStyle(element));
+}
+
+function hasVisiblePseudoElement(element) {
+  return ["::before", "::after"].some((pseudo) => {
+    const style = getComputedStyle(element, pseudo);
+    const contentVisible = !["none", "normal", '""', "''"].includes(style.content);
+    const paintedEmptyContent =
+      styleHasVisualDecoration(style) &&
+      Number.parseFloat(style.width) > 0 &&
+      Number.parseFloat(style.height) > 0;
+    return (
+      style.display !== "none" &&
+      style.visibility !== "hidden" &&
+      (contentVisible || paintedEmptyContent)
+    );
+  });
+}
+
+function collectPptxLayoutElements(deck) {
+  const elements = [];
+  for (const image of deck.querySelectorAll(":scope > .theme-cover-logo")) {
+    const style = getComputedStyle(image);
+    if (
+      !directImageSupported(image) ||
+      unsupportedEffects(image).length > 0 ||
+      Number.parseFloat(style.borderRadius) > 0
+    ) {
+      continue;
+    }
+    const opacity = Number(style.opacity);
+    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.isFinite(opacity) ? opacity : 1,
+      naturalWidth: image.naturalWidth,
+      naturalHeight: image.naturalHeight,
+    });
+    image.setAttribute("data-pptx-native", "image");
+  }
+  return elements;
+}
+
 function preserveBoxShadow(element, deck) {
   const style = getComputedStyle(element);
-  if (!style.boxShadow || style.boxShadow === "none") return;
+  if (!style.boxShadow || style.boxShadow === "none") return null;
+  element.setAttribute("data-pptx-shadow-fallback", "true");
   const bounds = relativeBounds(element, deck);
   const decoration = document.createElement("div");
   decoration.className = "pptx-effect-fallback";
@@ -1151,6 +1535,7 @@ function preserveBoxShadow(element, deck) {
   });
   decoration.setAttribute("aria-hidden", "true");
   deck.appendChild(decoration);
+  return decoration;
 }
 
 function blobDataUrl(blob) {
@@ -1430,6 +1815,7 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
         wrapper,
         deck,
         `foreground-picture-failed: ${error?.message || "unknown error"}`,
+        { artwork: false },
       ),
     );
   }
@@ -1497,6 +1883,7 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
           ? "architecture-image-rendered-as-foreground-picture"
           : "architecture-image-rendered-as-artwork",
         ...mapBounds(sourceObject),
+        ...(foregroundReady && layer ? { artwork: false } : {}),
       });
       if (foregroundReady && layer) elements.push(foregroundElement(layer));
       continue;
@@ -1517,6 +1904,7 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
         : "icon-rendered-as-artwork",
       icon: icon.icon,
       ...mapBounds(icon),
+      ...(foregroundReady && layer ? { artwork: false } : {}),
     });
   }
   for (const sourceObject of snapshot.objects) {
@@ -1574,35 +1962,90 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
 
 async function collectPptxSlide(slide, index) {
   const { deck } = slide;
+  assignPptxPaintOrder(deck);
   const elements = [];
   const fallbacks = [];
   const fallbackRoots = new Set();
-  const addFallback = (type, element, reason) => {
+  const fallbackByRoot = new Map();
+  const removeFallback = (root) => {
+    const fallback = fallbackByRoot.get(root);
+    if (!fallback) return;
+    fallbackByRoot.delete(root);
+    fallbackRoots.delete(root);
+    const index = fallbacks.indexOf(fallback);
+    if (index >= 0) fallbacks.splice(index, 1);
+    if (!fallback.captureId) return;
+    const captureElement = pptxFallbackCaptureElements.get(fallback.captureId);
+    pptxFallbackCaptureElements.delete(fallback.captureId);
+    if (!captureElement) return;
+    const ids = (captureElement.getAttribute("data-pptx-fallback-ids") || "")
+      .split(/\s+/)
+      .filter((id) => id && id !== fallback.captureId);
+    if (ids.length) captureElement.setAttribute("data-pptx-fallback-ids", ids.join(" "));
+    else captureElement.removeAttribute("data-pptx-fallback-ids");
+  };
+  const addFallback = (type, element, reason, options) => {
     if (fallbackRoots.has(element)) return;
+    if ([...fallbackRoots].some((root) => root.contains(element))) return;
+    [...fallbackRoots]
+      .filter((root) => element.contains(root))
+      .forEach(removeFallback);
     fallbackRoots.add(element);
-    fallbacks.push(pptxFallback(type, element, deck, reason));
+    const fallback = pptxFallback(type, element, deck, reason, options);
+    fallbackByRoot.set(element, fallback);
+    fallbacks.push(fallback);
   };
 
+  const effectFallbacks = new Map();
+  const genericShadowElements = new Map();
   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");
+    const allEffects = unsupportedEffects(element);
+    if (
+      allEffects.includes("box-shadow") &&
+      !element.closest("table, img")
+    ) {
+      genericShadowElements.set(
+        element,
+        effectPaintPadding(element, ["box-shadow"]),
+      );
+    }
+    const effects = allEffects.filter((effect) => effect !== "box-shadow");
     if (!effects.length) continue;
     const root = effectFallbackRoot(element);
     if (root) {
-      addFallback(
-        "effect",
-        root,
-        `element-rendered-as-artwork: ${effects.join(", ")}`,
-      );
+      const pending = effectFallbacks.get(root) || { effects: new Set(), padding: 0 };
+      effects.forEach((effect) => pending.effects.add(effect));
+      pending.padding = Math.max(pending.padding, effectPaintPadding(element, allEffects));
+      effectFallbacks.set(root, pending);
     }
   }
+  for (const [root, pending] of effectFallbacks) {
+    addFallback(
+      "effect",
+      root,
+      `element-rendered-as-artwork: ${[...pending.effects].join(", ")}`,
+      { padding: pending.padding, includeDescendants: true },
+    );
+  }
 
-  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("pre:not(.mermaid)").forEach((element) => {
+    const effects = unsupportedEffects(element);
+    const artworkEffects = effects.filter(
+      (effect) => effect !== "box-shadow",
+    );
+    if (artworkEffects.length) {
+      addFallback(
+        "code",
+        element,
+        `code-block-rendered-as-artwork: ${artworkEffects.join(", ")}`,
+        {
+          padding: effectPaintPadding(element, effects),
+          includeDescendants: true,
+        },
+      );
+    }
+  });
   deck.querySelectorAll(".architecture-error").forEach((element) =>
     addFallback("architecture", element, "architecture-error-rendered-as-artwork"),
   );
@@ -1611,10 +2054,20 @@ async function collectPptxSlide(slide, index) {
       ".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 covered = [...fallbackRoots].some(
+        (root) => root === element || root.contains(element),
+      );
+      if (!element.closest("pre, .architecture-diagram") && !covered) {
+        addFallback("html", element, "arbitrary-html-rendered-as-artwork", {
+          includeDescendants: true,
+          padding: subtreeEffectPaintPadding(element),
+        });
       }
     });
+  deck.querySelectorAll("pre.mermaid").forEach((element) => {
+    const covered = [...fallbackRoots].some((root) => root === element || root.contains(element));
+    if (!covered) addFallback("mermaid", element, "mermaid-rendered-as-artwork");
+  });
 
   const insideFallback = (element) =>
     [...fallbackRoots].some((root) => root === element || root.contains(element));
@@ -1629,31 +2082,18 @@ async function collectPptxSlide(slide, index) {
       !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 listItems = textCandidates.filter((element) => element.matches("li"));
+  const eligibleListItems = new Set(listItems);
+  const listRoots = [
+    ...new Set(listItems.map(outermostListFor).filter(Boolean)),
+  ];
+  for (const list of listRoots) {
+    const textElement = nativeListTextElement(list, deck, eligibleListItems);
+    if (textElement) elements.push(textElement);
+  }
+  for (const element of textCandidates.filter((candidate) => !candidate.matches("li"))) {
     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,
+      omitNestedLists: false,
     });
     if (!paragraph.runs.some((run) => run.text.trim())) continue;
     const disableTextWrap = renderedTextLineCount(element) === 1;
@@ -1676,6 +2116,7 @@ async function collectPptxSlide(slide, index) {
       type: "text",
       path: elementPath(element, deck),
       ...bounds,
+      zOrder: Number(element.dataset.pptxZOrder),
       paragraphs: [paragraph],
       opacity: Number(getComputedStyle(element).opacity) || 1,
       ...(fittedTextInsets ? { textInsets: fittedTextInsets } : {}),
@@ -1683,6 +2124,117 @@ async function collectPptxSlide(slide, index) {
     });
     element.setAttribute("data-pptx-native", "text");
   }
+  for (const element of textCandidates) {
+    const pseudoElementVisible = hasVisiblePseudoElement(element);
+    if (
+      element.closest("footer") ||
+      element.classList.contains("kicker") ||
+      (!hasVisualDecoration(element) && !pseudoElementVisible)
+    ) {
+      continue;
+    }
+    fallbacks.push(
+      pptxFallback(
+        "decoration",
+        element,
+        deck,
+        "native-text-decoration-rendered-as-artwork",
+        { behindNative: true, padding: pseudoElementVisible ? 32 : 0 },
+      ),
+    );
+  }
+  deck.querySelectorAll(".kicker").forEach((element) => {
+    if (insideFallback(element)) return;
+    fallbacks.push(
+      pptxFallback("decoration", element, deck, "kicker-mark-rendered-as-artwork", {
+        behindNative: true,
+      }),
+    );
+  });
+  deck.querySelectorAll("footer").forEach((element) => {
+    if (insideFallback(element)) return;
+    fallbacks.push(
+      pptxFallback("decoration", element, deck, "footer-decoration-rendered-as-artwork", {
+        behindNative: true,
+      }),
+    );
+  });
+  deck.querySelectorAll(".body hr").forEach((element) => {
+    if (insideFallback(element)) return;
+    fallbacks.push(
+      pptxFallback("decoration", element, deck, "horizontal-rule-rendered-as-artwork"),
+    );
+  });
+  for (const [element, padding] of genericShadowElements) {
+    if (insideFallback(element)) continue;
+    const decoration = preserveBoxShadow(element, deck);
+    fallbacks.push(
+      pptxFallback("effect", element, deck, "native-element-approximates: box-shadow", {
+        padding,
+        behindNative: true,
+        captureElement: decoration || element,
+      }),
+    );
+  }
+
+  for (const pre of deck.querySelectorAll("pre:not(.mermaid)")) {
+    if (insideFallback(pre)) continue;
+    const code = pre.querySelector("code") || pre;
+    const style = getComputedStyle(pre);
+    const bounds = relativeBounds(pre, deck);
+    const borderRadius = roundedMetric(Number.parseFloat(style.borderRadius));
+    const borderWidth = roundedMetric(Number.parseFloat(style.borderTopWidth));
+    const textInsets = textInsetsFor(pre);
+    elements.push({
+      type: "shape",
+      path: elementPath(pre, deck),
+      shape: borderRadius > 0 ? "roundedRect" : "rect",
+      ...bounds,
+      zOrder: Number(pre.dataset.pptxZOrder),
+      fill: normalizeCssColor(style.backgroundColor),
+      stroke: normalizeCssColor(style.borderTopColor),
+      strokeWidth: borderWidth || 1,
+      opacity: Number(style.opacity) || 1,
+      paragraphs: codeParagraphsFor(code),
+      verticalAlignment: "top",
+      ...(textInsets ? { textInsets } : {}),
+      textWrap: "none",
+    });
+    const accentWidth = roundedMetric(Number.parseFloat(style.borderLeftWidth));
+    const accentColor = normalizeCssColor(style.borderLeftColor);
+    if (accentWidth > borderWidth && accentColor) {
+      const accentInset = Math.min(borderRadius, Math.max(0, (bounds.height - accentWidth) / 2));
+      elements.push({
+        type: "shape",
+        path: `${elementPath(pre, deck)}.accent`,
+        shape: borderRadius > 0 ? "roundedRect" : "rect",
+        x: bounds.x,
+        y: bounds.y + accentInset,
+        width: accentWidth,
+        height: bounds.height - accentInset * 2,
+        fill: accentColor,
+        stroke: null,
+        zOrder: Number(pre.dataset.pptxZOrder) + 0.01,
+      });
+    }
+    if (style.boxShadow && style.boxShadow !== "none") {
+      const decoration = preserveBoxShadow(pre, deck);
+      fallbacks.push(
+        pptxFallback(
+          "effect",
+          pre,
+          deck,
+          "native-code-approximates: box-shadow",
+          {
+            padding: effectPaintPadding(pre, ["box-shadow"]),
+            behindNative: true,
+            captureElement: decoration || pre,
+          },
+        ),
+      );
+    }
+    pre.setAttribute("data-pptx-native", "code");
+  }
 
   for (const table of deck.querySelectorAll(".body table")) {
     if (insideFallback(table)) continue;
@@ -1746,18 +2298,24 @@ async function collectPptxSlide(slide, index) {
       type: "table",
       path: elementPath(table, deck),
       ...relativeBounds(table, deck),
+      zOrder: Number(table.dataset.pptxZOrder),
       rows,
     });
     if (effects.length) {
+      const decoration = effects.includes("box-shadow") ? preserveBoxShadow(table, deck) : null;
       fallbacks.push(
         pptxFallback(
           "effect",
           table,
           deck,
           `native-table-approximates: ${effects.join(", ")}`,
+          {
+            padding: effectPaintPadding(table, effects),
+            behindNative: true,
+            captureElement: decoration || table,
+          },
         ),
       );
-      if (effects.includes("box-shadow")) preserveBoxShadow(table, deck);
     }
     table.setAttribute("data-pptx-native", "table");
   }
@@ -1766,25 +2324,29 @@ async function collectPptxSlide(slide, index) {
     if (
       image.closest(".architecture-diagram") ||
       image.classList.contains("theme-cover-background") ||
+      image.classList.contains("theme-cover-logo") ||
       insideFallback(image)
     ) {
       continue;
     }
-    if (!rasterImageSupported(image)) {
+    if (!directImageSupported(image)) {
       const fit = getComputedStyle(image).objectFit;
+      const effects = unsupportedEffects(image);
       addFallback(
         "image",
         image,
         ["cover", "none"].includes(fit) ? "unsupported-image-fit" : "unsupported-image-format",
+        {
+          padding: effectPaintPadding(image, effects),
+          includeDescendants: true,
+        },
       );
       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",
-    );
+    const borderRadius = parseFloat(style.borderRadius);
+    const artworkEffects = effects.filter((effect) => effect !== "box-shadow");
     if (artworkEffects.length) {
       addFallback(
         "effect",
@@ -1797,10 +2359,12 @@ async function collectPptxSlide(slide, index) {
       type: "image",
       path: elementPath(image, deck),
       ...relativeBounds(image, deck),
+      zOrder: Number(image.dataset.pptxZOrder),
       src: image.currentSrc || image.src,
       alt: image.alt || "",
       fit: style.objectFit || "contain",
       opacity: Number(style.opacity) || 1,
+      shape: borderRadius > 0 ? "roundedRect" : "rect",
       naturalWidth: image.naturalWidth,
       naturalHeight: image.naturalHeight,
     });
@@ -1812,6 +2376,10 @@ async function collectPptxSlide(slide, index) {
           image,
           deck,
           `native-image-approximates: ${effects.join(", ")}`,
+          {
+            padding: effectPaintPadding(image, effects),
+            behindNative: true,
+          },
         ),
       );
     }
@@ -1821,7 +2389,13 @@ async function collectPptxSlide(slide, index) {
   for (const [blockIndex, wrapper] of architectureWrappers.entries()) {
     if (insideFallback(wrapper)) continue;
     const architecture = await collectArchitectureObjects(wrapper, deck, blockIndex);
-    elements.push(...architecture.elements);
+    const zOrder = Number(wrapper.dataset.pptxZOrder);
+    elements.push(
+      ...architecture.elements.map((element, elementIndex) => ({
+        ...element,
+        zOrder: zOrder + elementIndex / 1000,
+      })),
+    );
     fallbacks.push(...architecture.fallbacks);
   }
 
@@ -1833,12 +2407,13 @@ async function collectPptxSlide(slide, index) {
         ? "center"
         : slide.backcoverSlide
           ? "backcover"
-          : "standard";
+          : "default";
   const visibleTitle = deck.querySelector("h1, h2")?.textContent?.trim();
   const notes = speakerNotesToPlainText(slide.speakerNotes, window.marked, document);
   return {
     index,
     layout,
+    layoutId: `${slide.theme}:${layout}`,
     theme: slide.theme,
     title: visibleTitle || slide.title,
     width: OUTPUT_WIDTH,
@@ -1849,6 +2424,23 @@ async function collectPptxSlide(slide, index) {
   };
 }
 
+function createPptxLayoutTemplate(theme, layout) {
+  const markdown = `---
+layout: ${layout}
+theme: ${theme}
+---
+`;
+  const slide = createSlide(markdown, theme, true);
+  if (layout === "backcover") {
+    slide.deck
+      .querySelectorAll(".theme-backcover-logo, .theme-backcover-copyright")
+      .forEach((element) => element.remove());
+  }
+  slide.deck.classList.add("pptx-layout-template");
+  slide.deck.dataset.pptxLayoutId = `${theme}:${layout}`;
+  return slide;
+}
+
 async function renderPptxDeck(
   slides,
   theme,
@@ -1862,6 +2454,8 @@ async function renderPptxDeck(
   applyCustomThemeCss(customCss);
   document.documentElement.setAttribute("data-theme", deckTheme);
   document.body.classList.add("pptx-mode", "fixed-output-mode", "mermaid-loading");
+  pptxFallbackSequence = 0;
+  pptxFallbackCaptureElements.clear();
   const rendered = slides.map((markdown) => createSlide(markdown, deckTheme));
   const stage = document.getElementById("stage");
   stage.replaceChildren(...rendered.map((slide) => slide.deck));
@@ -1890,14 +2484,39 @@ async function renderPptxDeck(
   for (const [index, slide] of rendered.entries()) {
     pptxSlides.push(await collectPptxSlide(slide, index));
   }
+  const themes = [...new Set(rendered.map((slide) => slide.theme))];
+  const layoutTemplates = themes.flatMap((slideTheme) =>
+    PPTX_LAYOUT_NAMES.map((layout) => ({
+      id: `${slideTheme}:${layout}`,
+      name: layout,
+      theme: slideTheme,
+      slide: createPptxLayoutTemplate(slideTheme, layout),
+    })),
+  );
+  stage.append(...layoutTemplates.map((layout) => layout.slide.deck));
+  await waitForImages(stage);
+  await afterLayout();
+  const pptxLayouts = layoutTemplates.map(({ id, name, theme: slideTheme, slide }, index) => ({
+    id,
+    name,
+    theme: slideTheme,
+    captureIndex: rendered.length + index,
+    elements: collectPptxLayoutElements(slide.deck),
+  }));
   const model = {
     version: 1,
     width: OUTPUT_WIDTH,
     height: OUTPUT_HEIGHT,
+    masters: themes.map((slideTheme) => ({
+      id: slideTheme,
+      theme: slideTheme,
+      layoutIds: PPTX_LAYOUT_NAMES.map((layout) => `${slideTheme}:${layout}`),
+    })),
+    layouts: pptxLayouts,
     slides: pptxSlides,
   };
   window.__presentationPptxModel = JSON.parse(JSON.stringify(model));
-  document.body.classList.add("pptx-artwork-mode");
+  document.body.classList.add("pptx-artwork-mode", "pptx-layout-artwork-mode");
   document.body.setAttribute("data-pptx-artwork", "ready");
   document.body.classList.remove("mermaid-loading");
   document.documentElement.setAttribute("data-pptx-ready", "true");
@@ -2148,6 +2767,7 @@ let currentVersion = -1;
 let knownDeckVersion = -1;
 let deckSlides = [];
 let deckTitles = [];
+let deckLayouts = [];
 let navIndex = 0;
 let navTotal = 0;
 let navMode = "deck";
@@ -2189,6 +2809,11 @@ function deriveTitle(md) {
   return fallback ? trimTitle(fallback) : "(Untitled)";
 }
 
+function deriveLayout(md) {
+  const { meta } = splitFrontMatter(typeof md === "string" ? md : "");
+  return typeof meta.layout === "string" ? meta.layout.trim().toLowerCase() : "";
+}
+
 function trimTitle(text) {
   const stripped = text
     .replace(/[*_`>#~]/g, "")
@@ -2205,6 +2830,7 @@ async function fetchDeck() {
     if (Array.isArray(data.slides)) {
       deckSlides = data.slides;
       deckTitles = deckSlides.map(deriveTitle);
+      deckLayouts = deckSlides.map(deriveLayout);
     }
     if (typeof data.deckVersion === "number") knownDeckVersion = data.deckVersion;
     buildOverview();
@@ -3032,24 +3658,51 @@ function buildOverview() {
   const list = document.getElementById("overviewList");
   if (!list) return;
   list.replaceChildren();
+  let insideSection = false;
   deckTitles.forEach((title, i) => {
+    const layout = deckLayouts[i] || "";
+    if (layout === "title" || layout === "backcover") insideSection = false;
+    const sectionChild =
+      insideSection && layout !== "title" && layout !== "section" && layout !== "backcover";
+
     const li = document.createElement("li");
     li.className = "overview-item";
+    if (layout === "title" || layout === "section") {
+      li.classList.add(`overview-item-${layout}`);
+    }
+    if (sectionChild) li.classList.add("overview-item-section-child");
     li.dataset.index = String(i);
+    if (layout) li.dataset.layout = layout;
+
     const btn = document.createElement("button");
     btn.type = "button";
     btn.className = "overview-link";
+    btn.setAttribute(
+      "aria-label",
+      `${i + 1} ${title}${layout === "title" || layout === "section" ? `, ${layout} slide` : ""}`,
+    );
+
     const num = document.createElement("span");
     num.className = "overview-num";
     num.textContent = String(i + 1);
     const label = document.createElement("span");
     label.className = "overview-label";
     label.textContent = title;
+
     btn.appendChild(num);
+    if (layout === "title" || layout === "section") {
+      const kind = document.createElement("span");
+      kind.className = "overview-kind";
+      kind.textContent = layout === "title" ? "Title" : "Section";
+      kind.setAttribute("aria-hidden", "true");
+      btn.appendChild(kind);
+    }
     btn.appendChild(label);
     btn.addEventListener("click", () => goToIndex(i));
     li.appendChild(btn);
     list.appendChild(li);
+
+    if (layout === "section") insideSection = true;
   });
   highlightOverview();
 }
@@ -3478,13 +4131,9 @@ function init() {
     return;
   }
   if (params.get("print") === "1") {
-    // Print mode never reaches editing-mode branches. Removing this return would
-    // bake the editing UI into PDFs, so a regression test protects it.
-    //
-    // This early return is also **the primary fix for the #12 hang**. Only print
-    // mode avoids connectEvents() (an unclosed SSE) and the two-second setInterval,
-    // allowing the page to become idle and --print-to-pdf to complete.
-    // Removing the return makes printing hang forever.
+    // Print mode renders one immutable output snapshot and never reaches editing,
+    // SSE, or polling branches. The output runtime waits for its ready report
+    // before asking Chromium to create the PDF.
     initPrint(params).catch(reportPrintBootstrapFailure);
     return;
   }