npm - @markdstage/markdstage - Versions diffs - 2.5.1 → 3.0.0 - Mend

@markdstage/markdstage 2.5.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +6 -6
package/package.json +1 -1
package/shared/README.md +75 -28
package/shared/architecture-editor/editor.css +116 -20
package/shared/architecture-editor/editor.js +577 -42
package/shared/architecture-editor/index.html +53 -24
package/shared/markdstage-guide.mjs +8 -2
package/shared/renderer/architecture.mjs +96 -15
package/shared/renderer/index.html +11 -0
package/shared/renderer/renderer.js +179 -11
package/shared/renderer/slides.css +19 -2
package/shared/runtime/browser.mjs +29 -104
package/shared/runtime/output.mjs +5 -5
package/shared/runtime/pptx-package.mjs +9 -1
package/shared/schema/architecture-v1.schema.json +11 -1
package/src/cli.mjs +13 -13
package/src/commands/present.mjs +4 -2
package/src/skills.mjs +6 -6

package/shared/architecture-editor/index.html CHANGED Viewed

@@ -7,40 +7,66 @@
   <link rel="stylesheet" href="./renderer/slides.css">
   <link rel="stylesheet" href="./editor/editor.css">
 </head>
-<body>
+<body data-elements-open="true" data-inspector-open="false">
   <header class="editor-header">
     <div class="editor-title">
       <strong>Architecture Editor</strong>
       <span id="sourceLabel"></span>
       <span id="dirtyBadge" class="dirty-badge" hidden>Unsaved</span>
     </div>
+    <div class="editor-panel-actions" role="group" aria-label="Designer panels">
+      <button id="elementsPanelButton" class="editor-panel-toggle" type="button" aria-controls="elementPanel" aria-expanded="false">Elements</button>
+      <button id="inspectorPanelButton" class="editor-panel-toggle" type="button" aria-controls="inspectorPanel" aria-expanded="false">Properties</button>
+    </div>
     <div class="editor-actions" role="toolbar" aria-label="Architecture editing controls">
-      <button type="button" data-action="undo" title="Undo (Ctrl+Z)">↶</button>
-      <button type="button" data-action="redo" title="Redo (Ctrl+Y)">↷</button>
-      <span class="toolbar-separator" aria-hidden="true"></span>
-      <button type="button" data-action="add-node">Node</button>
-      <button type="button" data-action="add-group">Group</button>
-      <button type="button" data-action="add-image">Image</button>
-      <button type="button" data-action="add-connector">Connector</button>
-      <button type="button" data-action="duplicate" title="Duplicate (Ctrl+D)">Duplicate</button>
-      <button type="button" data-action="delete" title="Delete (Delete)">Delete</button>
-      <button type="button" data-action="release-layout">Release layout</button>
-      <span class="toolbar-separator" aria-hidden="true"></span>
-      <button type="button" data-action="order-back" title="Move earlier in declaration order">Send backward</button>
-      <button type="button" data-action="order-front" title="Move later in declaration order">Bring forward</button>
-      <span class="toolbar-separator" aria-hidden="true"></span>
-      <button type="button" data-action="zoom-out" aria-label="Zoom out">−</button>
-      <button type="button" data-action="zoom-fit">Fit</button>
-      <button type="button" data-action="zoom-in" aria-label="Zoom in">＋</button>
-      <label class="snap-toggle"><input id="snapToggle" type="checkbox" checked> Grid</label>
+      <button type="button" data-action="undo" title="Undo (Ctrl+Z)" aria-label="Undo">↶</button>
+      <button type="button" data-action="redo" title="Redo (Ctrl+Y)" aria-label="Redo">↷</button>
+      <div class="shape-palette-host">
+        <button id="shapePaletteButton" type="button" data-action="toggle-shape-palette" aria-haspopup="menu" aria-controls="shapePalette" aria-expanded="false">Shape</button>
+        <div id="shapePalette" class="shape-palette" role="menu" aria-label="Add a shape" hidden></div>
+      </div>
       <button type="button" class="save-button" data-action="save" title="Save to Markdown (Ctrl+S)">Save</button>
-      <button type="button" data-action="reload" title="Reload from Markdown">Reload</button>
+      <div class="toolbar-more-host">
+        <button id="toolbarMoreButton" type="button" aria-haspopup="menu" aria-controls="toolbarMoreMenu" aria-expanded="false">More</button>
+        <div id="toolbarMoreMenu" class="toolbar-more-menu" role="menu" aria-label="More editing controls" hidden>
+          <div class="toolbar-more-group" role="presentation">
+            <span class="toolbar-more-label">Add</span>
+            <button type="button" role="menuitem" data-action="add-group">Group</button>
+            <button type="button" role="menuitem" data-action="add-image">Image</button>
+            <button type="button" role="menuitem" data-action="add-connector">Connector</button>
+          </div>
+          <div class="toolbar-more-group" role="presentation">
+            <span class="toolbar-more-label">Edit</span>
+            <button type="button" role="menuitem" data-action="duplicate" title="Duplicate (Ctrl+D)">Duplicate</button>
+            <button type="button" role="menuitem" data-action="delete" title="Delete (Delete)">Delete</button>
+            <button type="button" role="menuitem" data-action="release-layout">Release layout</button>
+          </div>
+          <div class="toolbar-more-group" role="presentation">
+            <span class="toolbar-more-label">Arrange</span>
+            <button type="button" role="menuitem" data-action="order-back" title="Move earlier in declaration order">Send backward</button>
+            <button type="button" role="menuitem" data-action="order-front" title="Move later in declaration order">Bring forward</button>
+          </div>
+          <div class="toolbar-more-group" role="presentation">
+            <span class="toolbar-more-label">View</span>
+            <div class="toolbar-more-row">
+              <button type="button" role="menuitem" data-action="zoom-out" aria-label="Zoom out">−</button>
+              <button type="button" role="menuitem" data-action="zoom-fit">Fit</button>
+              <button type="button" role="menuitem" data-action="zoom-in" aria-label="Zoom in">＋</button>
+            </div>
+            <label class="snap-toggle"><input id="snapToggle" type="checkbox" checked> Snap to grid</label>
+          </div>
+          <button type="button" role="menuitem" data-action="reload" title="Reload from Markdown">Reload from Markdown</button>
+        </div>
+      </div>
     </div>
   </header>
   <main class="editor-layout">
-    <aside class="editor-sidebar element-panel" aria-label="Elements">
-      <h2>Elements</h2>
+    <aside id="elementPanel" class="editor-sidebar element-panel" aria-label="Elements">
+      <div class="editor-sidebar-head">
+        <h2>Elements</h2>
+        <button class="editor-panel-close" type="button" data-panel-close="elements" aria-label="Close Elements">×</button>
+      </div>
       <div id="elementTree" class="element-tree" role="tree"></div>
     </aside>
@@ -48,8 +74,11 @@
       <div id="canvasSurface" class="canvas-surface"></div>
     </section>
-    <aside class="editor-sidebar inspector-panel" aria-label="Properties">
-      <h2>Properties</h2>
+    <aside id="inspectorPanel" class="editor-sidebar inspector-panel" aria-label="Properties">
+      <div class="editor-sidebar-head">
+        <h2>Properties</h2>
+        <button class="editor-panel-close" type="button" data-panel-close="inspector" aria-label="Close Properties">×</button>
+      </div>
       <form id="inspector" class="inspector" autocomplete="off"></form>
     </aside>
   </main>

package/shared/markdstage-guide.mjs CHANGED Viewed

@@ -110,12 +110,18 @@ export async function readGuide(topic = "overview") {
         section(readme, "## How it works"),
         "",
         "Users can load workspace Markdown directly with **More controls > Open Markdown** (deterministic splitting without AI; natural-language summarization remains the AI's responsibility). The workspace root is the Git repository root when available, otherwise the folder opened for the current session.",
-        "Use **More controls > Shape editing** to adjust the placement of an existing Architecture diagram. In the CLI, run `markdstage present slides.md --watch`; it starts in viewing mode and enables the same placement editor plus the detailed Architecture designer. CLI `present` without `--watch` is read-only. Comprehensive edits affect the source Markdown only when explicitly saved.",
+        "Use **More controls > Shape editing** to adjust the placement of an existing Architecture diagram. In the CLI, run `markdstage preview slides.md --watch`; it starts in viewing mode and enables the same placement editor plus the detailed Architecture designer. CLI `preview` without `--watch` is read-only. Comprehensive edits affect the source Markdown only when explicitly saved.",
         "",
         "For details, request `slide-format`, `themes`, `custom-themes`, `theme-schema`, `architecture-dsl`, or `architecture-schema`.",
       ].join("\n");
     case "slide-format":
-      return section(readme, "### Slide fragment format");
+      return [
+        section(readme, "### Markdown file syntax"),
+        "",
+        section(readme, "### Canvas API `slides` array"),
+        "",
+        section(readme, "### `sourceName` role"),
+      ].join("\n");
     case "themes":
       return section(readme, "### Choosing a theme");
     case "custom-themes":

package/shared/renderer/architecture.mjs CHANGED Viewed

@@ -91,7 +91,15 @@ const ROUTE_FALLBACK_REMEDIES = Object.freeze({
 });
 const ID_PATTERN = /^[A-Za-z][A-Za-z0-9_.-]{0,63}$/;
-const SHAPES = new Set(["rect", "rounded-rect", "ellipse"]);
+const SHAPES = new Set([
+  "rect",
+  "rounded-rect",
+  "ellipse",
+  "diamond",
+  "triangle",
+  "hexagon",
+  "parallelogram",
+]);
 const ROUTINGS = new Set(["straight", "orthogonal", "polyline"]);
 const PORTS = new Set(["auto", "top", "right", "bottom", "left"]);
 const LABEL_LAYERS = new Set(["front", "behind"]);
@@ -789,6 +797,19 @@ function layoutPlacements(children, group, layout, path, graphEdges = []) {
   return placements;
 }
+export function powerPointDashStyle(value) {
+  const pattern = String(value || "").trim();
+  if (!pattern) return "solid";
+  const values = pattern
+    .split(/[ ,]+/)
+    .map(Number)
+    .filter(Number.isFinite);
+  if (values.length >= 2 && values[0] <= 2 && values[1] >= values[0] * 2) {
+    return "dotted";
+  }
+  return "dash";
+}
 function normalizeBox(element, origin, path, placement) {
   return {
     x:
@@ -1392,6 +1413,20 @@ function appendText(documentRef, parent, element, text, options = {}) {
   parent.appendChild(textElement);
 }
+function nodeContentInset(element) {
+  const ratio = {
+    diamond: 0.24,
+    triangle: 0.24,
+    hexagon: 0.14,
+    parallelogram: 0.16,
+  }[element.shape];
+  return ratio ? Math.max(16, element.width * ratio) : 16;
+}
+function nodeIconInset(element) {
+  return Math.max(20, nodeContentInset(element), element.width * 0.08);
+}
 function elementCenter(element) {
   return { x: element.x + element.width / 2, y: element.y + element.height / 2 };
 }
@@ -3451,11 +3486,48 @@ function iconShapeAttributes(shape, textColor) {
   return shape.solid ? { ...shape.attributes, fill: textColor } : shape.attributes;
 }
+function polygonPoints(element) {
+  const { x, y, width, height } = element;
+  const right = x + width;
+  const bottom = y + height;
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  if (element.shape === "diamond") {
+    return `${centerX},${y} ${right},${centerY} ${centerX},${bottom} ${x},${centerY}`;
+  }
+  if (element.shape === "triangle") {
+    return `${centerX},${y} ${right},${bottom} ${x},${bottom}`;
+  }
+  if (element.shape === "hexagon") {
+    const inset = width * 0.25;
+    return `${x + inset},${y} ${right - inset},${y} ${right},${centerY} ${
+      right - inset
+    },${bottom} ${x + inset},${bottom} ${x},${centerY}`;
+  }
+  if (element.shape === "parallelogram") {
+    const inset = Math.min(width * 0.2, height * 0.75);
+    return `${x + inset},${y} ${right},${y} ${right - inset},${bottom} ${x},${bottom}`;
+  }
+  return "";
+}
+function nodePowerPointShape(shape) {
+  return {
+    rect: "rect",
+    "rounded-rect": "roundedRect",
+    ellipse: "ellipse",
+    diamond: "diamond",
+    triangle: "triangle",
+    hexagon: "hexagon",
+    parallelogram: "parallelogram",
+  }[shape];
+}
 function renderIcon(documentRef, element) {
   if (!element.icon) return null;
   const size = Math.min(58, element.height * 0.36, element.width * 0.2);
   const x = element.text
-    ? element.x + Math.max(20, element.width * 0.08)
+    ? element.x + nodeIconInset(element)
     : element.x + element.width / 2 - size / 2;
   const y = element.y + element.height / 2 - size / 2;
   const shapes = ICON_SHAPES[element.icon];
@@ -3481,6 +3553,7 @@ function renderIcon(documentRef, element) {
     );
     return { group, size, x };
   }
   const group = svgElement(documentRef, "g", {
     "data-architecture-icon": element.icon,
     "data-architecture-icon-source": "builtin",
@@ -3578,6 +3651,13 @@ function renderNode(documentRef, element) {
         ...common,
       }),
     );
+  } else if (["diamond", "triangle", "hexagon", "parallelogram"].includes(element.shape)) {
+    group.appendChild(
+      svgElement(documentRef, "polygon", {
+        points: polygonPoints(element),
+        ...common,
+      }),
+    );
   } else {
     group.appendChild(
       svgElement(documentRef, "rect", {
@@ -3594,13 +3674,16 @@ function renderNode(documentRef, element) {
   if (icon) group.appendChild(icon.group);
   if (icon && element.text) {
     const textLeft = icon.x + icon.size + 16;
-    const textRight = element.x + element.width - 16;
+    const textRight = element.x + element.width - nodeContentInset(element);
     appendText(documentRef, group, element, element.text, {
       centerX: (textLeft + textRight) / 2,
       availableWidth: Math.max(32, textRight - textLeft),
     });
   } else {
-    appendText(documentRef, group, element, element.text);
+    const inset = nodeContentInset(element);
+    appendText(documentRef, group, element, element.text, {
+      availableWidth: Math.max(32, element.width - inset * 2),
+    });
   }
   return group;
 }
@@ -3908,12 +3991,15 @@ export function architecturePowerPointSnapshot(model, documentRef = globalThis.d
       const iconSize = element.icon
         ? Math.min(58, element.height * 0.36, element.width * 0.2)
         : 0;
-      const iconX = element.x + Math.max(20, element.width * 0.08);
+      const contentInset = nodeContentInset(element);
+      const iconX = element.text
+        ? element.x + nodeIconInset(element)
+        : element.x + element.width / 2 - iconSize / 2;
       const iconY = element.y + element.height / 2 - iconSize / 2;
       const textInset = element.icon
-        ? Math.max(20, element.width * 0.08) + iconSize + 16
-        : 16;
-      const availableTextWidth = Math.max(32, element.width - textInset - 16);
+        ? nodeIconInset(element) + iconSize + 16
+        : contentInset;
+      const availableTextWidth = Math.max(32, element.width - textInset - contentInset);
       const longestLine = Math.max(
         ...element.text.split(/\r?\n/).slice(0, 8).map(textWidthUnits),
         1,
@@ -3924,12 +4010,7 @@ export function architecturePowerPointSnapshot(model, documentRef = globalThis.d
       );
       objects.push({
         type: "shape",
-        shape:
-          element.shape === "ellipse"
-            ? "ellipse"
-            : element.shape === "rounded-rect"
-              ? "roundedRect"
-              : "rect",
+        shape: nodePowerPointShape(element.shape),
         x: element.x,
         y: element.y,
         width: element.width,
@@ -3943,7 +4024,7 @@ export function architecturePowerPointSnapshot(model, documentRef = globalThis.d
         textInsets: {
           left: textInset,
           top: 12,
-          right: 16,
+          right: contentInset,
           bottom: 12,
         },
         icon: element.icon || "",

package/shared/renderer/index.html CHANGED Viewed

@@ -138,6 +138,17 @@
     </div>
   </div>
+  <div id="architecturePicker" class="overview" hidden>
+    <div class="overview-panel" role="dialog" aria-modal="true" aria-label="Choose an Architecture diagram">
+      <div class="overview-head">
+        <span>Choose a diagram</span>
+        <button id="architecturePickerClose" class="nav-btn" type="button" title="Close (Esc)" aria-label="Close">&#10005;</button>
+      </div>
+      <p class="import-message">This slide contains multiple Architecture diagrams.</p>
+      <ol id="architecturePickerList" class="overview-list"></ol>
+    </div>
+  </div>
   <script src="./vendor/marked.min.js"></script>
   <script src="./vendor/purify.min.js"></script>
   <script src="./vendor/highlight.min.js"></script>

package/shared/renderer/renderer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { renderArchitectureBlock } from "./architecture.mjs";
+import { powerPointDashStyle, renderArchitectureBlock } from "./architecture.mjs";
 import { attachArchitectureEditor } from "./architecture-editor.mjs";
 import {
   DEFAULT_THEME,
@@ -703,7 +703,11 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
     const source = code.textContent;
     const slideIndex = navIndex;
     if (!architectureEditMode) {
-      target.replaceWith(renderArchitectureBlock(source, document));
+      const wrapper = renderArchitectureBlock(source, document);
+      wrapper.dataset.architectureBlock = String(blockIndex);
+      const title = wrapper.__presentationPptxSnapshot?.title;
+      if (title) wrapper.dataset.architectureTitle = title;
+      target.replaceWith(wrapper);
       return;
     }
     // Insert the editing UI only in editing mode. Normal view never takes this path,
@@ -780,6 +784,7 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
 }
 function renderSlide(markdown) {
+  closeArchitecturePicker();
   lastMarkdown = typeof markdown === "string" ? markdown : "";
   document.body.classList.toggle("markdstage-empty", !nonEmpty(markdown));
   // Always detach the previous slide's editing UI because it owns document listeners.
@@ -1292,7 +1297,7 @@ async function collectArchitectureObjects(wrapper, deck, blockIndex) {
           bold: Number(run.fontWeight) >= 600,
         })),
       }));
-    if (mapped.dash !== undefined) mapped.dash = mapped.dash ? "dash" : "solid";
+    if (mapped.dash !== undefined) mapped.dash = powerPointDashStyle(mapped.dash);
     for (const key of ["fill", "stroke", "color"]) {
       if (key in mapped) mapped[key] = resolveModelColor(mapped[key], deck);
     }
@@ -2143,11 +2148,13 @@ let currentVersion = -1;
 let knownDeckVersion = -1;
 let deckSlides = [];
 let deckTitles = [];
+let deckLayouts = [];
 let navIndex = 0;
 let navTotal = 0;
 let navMode = "deck";
 let overviewOpen = false;
 let importOpen = false;
+let architecturePickerOpen = false;
 let importPending = false;
 let importFiles = [];
 let sourceBacked = false;
@@ -2183,6 +2190,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, "")
@@ -2199,6 +2211,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();
@@ -2225,7 +2238,11 @@ function updateArchitectureEditButton(enabled = architectureEditMode) {
   if (!button) return;
   button.hidden = presenterMode || !architectureEditAvailable;
   button.dataset.state = enabled && !presenterMode ? "active" : "";
-  button.title = enabled ? "Exit shape editing mode" : "Shape editing mode";
+  button.title = architectureDetailedEdit
+    ? "Open Architecture Designer"
+    : enabled
+      ? "Exit shape editing mode"
+      : "Shape editing mode";
   button.setAttribute("aria-label", button.title);
   syncMoreControls();
 }
@@ -2314,8 +2331,113 @@ async function requestArchitectureEditMode(enabled) {
   }
 }
+function architectureDiagramOptions() {
+  return [...document.querySelectorAll(".architecture-diagram[data-architecture-block]")].map(
+    (wrapper, index) => ({
+      block: Number(wrapper.dataset.architectureBlock),
+      title: wrapper.dataset.architectureTitle || `Diagram ${index + 1}`,
+    }),
+  );
+}
+function closeArchitecturePicker({ restoreFocus = false } = {}) {
+  architecturePickerOpen = false;
+  const picker = document.getElementById("architecturePicker");
+  if (picker) picker.hidden = true;
+  if (restoreFocus) document.getElementById("navEdit")?.focus();
+}
+async function openArchitectureDesigner(block) {
+  const status = document.getElementById("sourceStatus");
+  if (status) status.textContent = "Opening the Architecture Designer.";
+  const result = await openDetailedArchitectureEditor(navIndex, block);
+  if (!result?.ok && status) {
+    status.textContent = result?.message || "Could not open the Architecture Designer.";
+  }
+  return result;
+}
+function openArchitecturePicker(options) {
+  const picker = document.getElementById("architecturePicker");
+  const list = document.getElementById("architecturePickerList");
+  if (!picker || !list) return;
+  list.replaceChildren();
+  for (const [index, option] of options.entries()) {
+    const item = document.createElement("li");
+    item.className = "overview-item";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "overview-link";
+    const number = document.createElement("span");
+    number.className = "overview-num";
+    number.textContent = String(index + 1);
+    const label = document.createElement("span");
+    label.className = "overview-label";
+    label.textContent = option.title;
+    button.append(number, label);
+    button.addEventListener("click", () => {
+      closeArchitecturePicker();
+      void openArchitectureDesigner(option.block);
+    });
+    item.appendChild(button);
+    list.appendChild(item);
+  }
+  architecturePickerOpen = true;
+  picker.hidden = false;
+  list.querySelector("button")?.focus();
+}
+function handleArchitecturePickerKey(event) {
+  const picker = document.getElementById("architecturePicker");
+  const list = document.getElementById("architecturePickerList");
+  if (!picker || !list) return;
+  const focusable = [...picker.querySelectorAll("button:not([disabled])")];
+  const options = [...list.querySelectorAll("button:not([disabled])")];
+  if (event.key === "Tab") {
+    const current = focusable.indexOf(document.activeElement);
+    if (current < 0 || (!event.shiftKey && current === focusable.length - 1)) {
+      event.preventDefault();
+      focusable[0]?.focus();
+    } else if (event.shiftKey && current === 0) {
+      event.preventDefault();
+      focusable.at(-1)?.focus();
+    }
+    return;
+  }
+  const current = options.indexOf(document.activeElement);
+  let next = null;
+  if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+    next = options[(Math.max(current, -1) + 1) % options.length];
+  } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+    next = options[(current <= 0 ? options.length : current) - 1];
+  } else if (event.key === "Home") {
+    next = options[0];
+  } else if (event.key === "End") {
+    next = options.at(-1);
+  } else if (event.key === "PageDown" || event.key === "PageUp") {
+    event.preventDefault();
+    return;
+  }
+  if (next) {
+    event.preventDefault();
+    next.focus();
+  }
+}
 async function toggleArchitectureEditMode() {
   if (presenterMode || !architectureEditAvailable) return;
+  if (architectureDetailedEdit) {
+    const options = architectureDiagramOptions();
+    if (options.length === 1) {
+      await openArchitectureDesigner(options[0].block);
+    } else if (options.length > 1) {
+      openArchitecturePicker(options);
+    } else {
+      const status = document.getElementById("sourceStatus");
+      if (status) status.textContent = "The current slide has no Architecture diagram to edit.";
+    }
+    return;
+  }
   await requestArchitectureEditMode(!architectureEditMode);
   await fetchState();
 }
@@ -2498,6 +2620,8 @@ async function fetchState() {
     if (!architectureEditAvailable) {
       availabilityDisabledEditMode = setArchitectureEditMode(false);
     }
+  }
+  if (editAvailabilityChanged || detailedEditChanged) {
     updateArchitectureEditButton();
   }
   if (
@@ -2686,6 +2810,7 @@ function updateHostActionButtons() {
   if (importButton) importButton.hidden = presenterMode || !markdownImportAvailable;
   if (!presenterViewAvailable && presenterViewOpen) closePresenterView();
   if (!markdownImportAvailable && importOpen) closeImportPicker();
+  if (!architectureDetailedEdit && architecturePickerOpen) closeArchitecturePicker();
   syncMoreControls();
 }
@@ -2914,24 +3039,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();
 }
@@ -3217,6 +3369,7 @@ function wireControls() {
   bind("navSourceMode", toggleSourceMode, { closeMore: true });
   bind("overviewClose", closeOverview);
   bind("importClose", closeImportPicker);
+  bind("architecturePickerClose", () => closeArchitecturePicker({ restoreFocus: true }));
   bind("presenterPrevButton", goPrev);
   bind("presenterNextButton", goNext);
   bind("presenterListButton", openOverview);
@@ -3242,6 +3395,13 @@ function wireControls() {
     });
   }
+  const architecturePicker = document.getElementById("architecturePicker");
+  if (architecturePicker) {
+    architecturePicker.addEventListener("click", (e) => {
+      if (e.target === architecturePicker) closeArchitecturePicker({ restoreFocus: true });
+    });
+  }
   document.addEventListener("pointerdown", (e) => {
     if (!moreControlsOpen) return;
     const tools = document.getElementById("navTools");
@@ -3272,6 +3432,15 @@ function wireControls() {
       e.preventDefault();
       return;
     }
+    if (e.key === "Escape" && architecturePickerOpen) {
+      closeArchitecturePicker({ restoreFocus: true });
+      e.preventDefault();
+      return;
+    }
+    if (architecturePickerOpen) {
+      handleArchitecturePickerKey(e);
+      return;
+    }
     if (e.key === "Escape" && moreControlsOpen) {
       setMoreControlsOpen(false, { restoreFocus: true });
       e.preventDefault();
@@ -3296,6 +3465,9 @@ function wireControls() {
         if (importOpen) {
           closeImportPicker();
           e.preventDefault();
+        } else if (architecturePickerOpen) {
+          closeArchitecturePicker({ restoreFocus: true });
+          e.preventDefault();
         } else if (overviewOpen) {
           closeOverview();
           e.preventDefault();
@@ -3340,13 +3512,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;
   }