npm - @markdstage/markdstage - Versions diffs - 2.5.0 → 2.6.0 - Mend

@markdstage/markdstage 2.5.0 → 2.6.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 (11) hide show

package/package.json +1 -1
package/shared/README.md +35 -15
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/renderer/architecture.mjs +96 -15
package/shared/renderer/index.html +11 -0
package/shared/renderer/renderer.js +227 -13
package/shared/renderer/slides.css +5 -2
package/shared/runtime/pptx-package.mjs +9 -1
package/shared/schema/architecture-v1.schema.json +11 -1

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/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.
@@ -940,6 +945,60 @@ function textContentBounds(element, deck) {
   };
 }
+function textInsetsFor(element) {
+  const style = getComputedStyle(element);
+  const metric = (padding, border) => {
+    const paddingValue = Number.parseFloat(style[padding]);
+    const borderValue = Number.parseFloat(style[border]);
+    return roundedMetric(
+      Math.max(0, Number.isFinite(paddingValue) ? paddingValue : 0) +
+        Math.max(0, Number.isFinite(borderValue) ? borderValue : 0),
+    );
+  };
+  const insets = {
+    left: metric("paddingLeft", "borderLeftWidth"),
+    top: metric("paddingTop", "borderTopWidth"),
+    right: metric("paddingRight", "borderRightWidth"),
+    bottom: metric("paddingBottom", "borderBottomWidth"),
+  };
+  return Object.values(insets).some((value) => value > 0) ? insets : null;
+}
+function singleLineTextLayout(element, deck, bounds, textInsets, alignment) {
+  const content = textContentBounds(element, deck);
+  const fontSize = Number.parseFloat(getComputedStyle(element).fontSize);
+  const widthBuffer = Math.max(2, (Number.isFinite(fontSize) ? fontSize : 0) * 0.5);
+  const fittedInsets = textInsets ? { ...textInsets } : null;
+  const requiredWidth = () =>
+    content.width +
+    (fittedInsets?.left || 0) +
+    (fittedInsets?.right || 0) +
+    widthBuffer;
+  const resolvedAlignment =
+    alignment || pptxAlignment(getComputedStyle(element).textAlign);
+  // Keep the leading CSS inset, but release a trailing inset when browser and
+  // PowerPoint font metrics would otherwise force a visually single line to wrap.
+  if (fittedInsets && requiredWidth() > bounds.width) {
+    if (resolvedAlignment === "right") fittedInsets.left = 0;
+    if (resolvedAlignment === "left") fittedInsets.right = 0;
+  }
+  const extraWidth = Math.max(0, requiredWidth() - bounds.width);
+  const offset =
+    resolvedAlignment === "right"
+      ? extraWidth
+      : resolvedAlignment === "center"
+        ? extraWidth / 2
+        : 0;
+  return {
+    bounds: {
+      ...bounds,
+      x: roundedMetric(bounds.x - offset),
+      width: roundedMetric(bounds.width + extraWidth),
+    },
+    textInsets: fittedInsets,
+  };
+}
 function rasterImageSupported(image) {
   const source = image.currentSrc || image.getAttribute("src") || "";
   if (["cover", "none"].includes(getComputedStyle(image).objectFit)) return false;
@@ -1028,12 +1087,22 @@ function paragraphFor(element, options = {}) {
 function renderedTextLineCount(element) {
   const range = document.createRange();
   range.selectNodeContents(element);
-  const tops = [];
+  const lines = [];
   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);
+    const line = lines.find(
+      (candidate) =>
+        rect.top < candidate.bottom - 1 &&
+        rect.bottom > candidate.top + 1,
+    );
+    if (line) {
+      line.top = Math.min(line.top, rect.top);
+      line.bottom = Math.max(line.bottom, rect.bottom);
+    } else {
+      lines.push({ top: rect.top, bottom: rect.bottom });
+    }
   }
-  return Math.max(1, tops.length);
+  return Math.max(1, lines.length);
 }
 function unsupportedEffects(element) {
@@ -1228,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);
     }
@@ -1587,17 +1656,29 @@ async function collectPptxSlide(slide, index) {
         : undefined,
     });
     if (!paragraph.runs.some((run) => run.text.trim())) continue;
-    const disableTextWrap =
-      element.classList.contains("kicker") ||
-      (element.matches("h1, h2, .slide-title") && renderedTextLineCount(element) === 1);
+    const disableTextWrap = renderedTextLineCount(element) === 1;
+    const textInsets = textInsetsFor(element);
+    const baseBounds = element.classList.contains("kicker")
+      ? textContentBounds(element, deck)
+      : relativeBounds(element, deck);
+    const singleLineLayout = disableTextWrap
+      ? singleLineTextLayout(
+          element,
+          deck,
+          baseBounds,
+          textInsets,
+          element.classList.contains("kicker") ? "left" : undefined,
+        )
+      : null;
+    const bounds = singleLineLayout?.bounds || baseBounds;
+    const fittedTextInsets = singleLineLayout?.textInsets || textInsets;
     elements.push({
       type: "text",
       path: elementPath(element, deck),
-      ...(element.classList.contains("kicker")
-        ? textContentBounds(element, deck)
-        : relativeBounds(element, deck)),
+      ...bounds,
       paragraphs: [paragraph],
       opacity: Number(getComputedStyle(element).opacity) || 1,
+      ...(fittedTextInsets ? { textInsets: fittedTextInsets } : {}),
       ...(disableTextWrap ? { textWrap: "none" } : {}),
     });
     element.setAttribute("data-pptx-native", "text");
@@ -2072,6 +2153,7 @@ let navTotal = 0;
 let navMode = "deck";
 let overviewOpen = false;
 let importOpen = false;
+let architecturePickerOpen = false;
 let importPending = false;
 let importFiles = [];
 let sourceBacked = false;
@@ -2149,7 +2231,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();
 }
@@ -2238,8 +2324,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();
 }
@@ -2422,6 +2613,8 @@ async function fetchState() {
     if (!architectureEditAvailable) {
       availabilityDisabledEditMode = setArchitectureEditMode(false);
     }
+  }
+  if (editAvailabilityChanged || detailedEditChanged) {
     updateArchitectureEditButton();
   }
   if (
@@ -2610,6 +2803,7 @@ function updateHostActionButtons() {
   if (importButton) importButton.hidden = presenterMode || !markdownImportAvailable;
   if (!presenterViewAvailable && presenterViewOpen) closePresenterView();
   if (!markdownImportAvailable && importOpen) closeImportPicker();
+  if (!architectureDetailedEdit && architecturePickerOpen) closeArchitecturePicker();
   syncMoreControls();
 }
@@ -3141,6 +3335,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);
@@ -3166,6 +3361,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");
@@ -3196,6 +3398,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();
@@ -3220,6 +3431,9 @@ function wireControls() {
         if (importOpen) {
           closeImportPicker();
           e.preventDefault();
+        } else if (architecturePickerOpen) {
+          closeArchitecturePicker({ restoreFocus: true });
+          e.preventDefault();
         } else if (overviewOpen) {
           closeOverview();
           e.preventDefault();