@markdstage/markdstage 3.4.0 → 3.8.1

package/shared/architecture-editor/index.html

@@ -67,10 +67,10 @@
         <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>
+      <div id="elementTree" class="element-tree" role="tree" aria-label="Diagram elements" aria-multiselectable="true"></div>
     </aside>
 
-    <section id="viewport" class="editor-viewport" aria-label="Drawing area">
+    <section id="viewport" class="editor-viewport" aria-label="Drawing area" tabindex="-1">
       <div id="canvasSurface" class="canvas-surface"></div>
     </section>
 

package/shared/docs/custom-theme-authoring.md

@@ -6,7 +6,8 @@ MarkdStage canvas and for AI systems that generate themes.
 ## Minimum setup
 
 Themes can be managed by folder. Put only custom properties in the CSS, and
-define optional cover and back-cover assets in `theme.json` in the same folder.
+define optional slide backgrounds, cover and back-cover assets in `theme.json`
+in the same folder.
 
 ```markdown
 ---
@@ -113,7 +114,8 @@ supporting brand colors.
 `--section-bg` and `--print-section-bg` are used as CSS `background` values.
 They support solid colors and multiple comma-separated gradients. Theme-file
 security restrictions prohibit `url()`. Section dividers have no image, logo,
-or icon settings in `theme.json`.
+or icon settings in `theme.json`; use per-slide `background-image` for a section
+background image.
 
 ## theme.json
 
@@ -124,6 +126,11 @@ paths relative to `theme.json` using the `assets/...` form.
 {
   "$schema": "../../.github/extensions/markdstage/schema/theme-metadata-v1.schema.json",
   "version": 1,
+  "background": { "image": "assets/common.png" },
+  "layouts": {
+    "default": { "background": { "image": "assets/default.webp" } },
+    "center": { "background": { "image": "assets/center.jpg" } }
+  },
   "cover": {
     "background": { "image": "assets/cover.svg" },
     "logo": { "image": "assets/logo.svg", "alt": "Example" }
@@ -135,15 +142,65 @@ paths relative to `theme.json` using the `assets/...` form.
 }
 ```
 
-- `cover.background` is decorative, so `alt` is optional.
+- `background`, `layouts.default.background`, `layouts.center.background`, and
+  `cover.background` are decorative `{ "image": "assets/...", "alt": "..." }`
+  entries; `alt` is optional.
+- The common root `background` applies only to standard (`default`) and `center`
+  layouts. Each layout's own `background` takes precedence over the common one.
+- `title` continues to use `cover.background`; `section` and `backcover` do not
+  inherit the common background. Existing cover and back-cover logos are unchanged.
 - Logo `alt` text is required.
-- Supported formats are SVG / PNG / WebP / JPEG, with a 2 MiB limit per file.
+- Supported extensions are `.svg`, `.png`, `.webp`, `.jpg`, and `.jpeg`, with a
+  2 MiB limit per file.
 - Absolute paths, external URLs, `..`, and symbolic links outside the theme
   folder are rejected.
 - If an existing `theme.json` is invalid, loading returns an error rather than
   silently falling back to CSS only.
 - Slide-front-matter `logo` / `copyright` values override back-cover metadata.
 
+### Per-slide background images
+
+Every theme (`dark`, `light`, `microsoft`, and `custom`) and every layout,
+including `title`, `section`, and `backcover`, accepts this front matter:
+
+```markdown
+---
+layout: center
+background-image: /assets/background.png
+---
+
+## One decision
+```
+
+The `assets/background.png` form without the leading slash is also accepted.
+This override applies only to that slide, even in the file's initial front
+matter. Paths use the normal image lookup: first `assets/` beside the source
+Markdown, then workspace-root `assets/`. Without a source name, only the
+workspace root is searched. These are deck assets, not theme-folder assets.
+Only `.svg`, `.png`, `.webp`, `.jpg`, and `.jpeg` files of at most 2 MiB are
+accepted. Remote URLs and `data:` URLs are not allowed.
+Write literal filenames, including spaces and percent signs, with `/`
+separators. Source paths are not URL-decoded: `%20` names those three literal
+characters, not a space. Query strings, fragments, `.` / `..` segments, and
+backslashes are rejected. Resolved files must remain inside their assets
+folder and workspace, including when symbolic links are involved.
+
+Background selection, from highest to lowest priority:
+
+| Layout | Image selection |
+| --- | --- |
+| Standard (`default`) | Slide `background-image` → `layouts.default.background` → root `background` → existing background |
+| `center` | Slide `background-image` → `layouts.center.background` → root `background` → existing background |
+| `title` | Slide `background-image` → `cover.background` → existing cover background |
+| `section` / `backcover` | Slide `background-image` → existing layout background |
+
+Images are centered and cropped to fill the slide (`object-fit: cover`) behind
+content, diagrams, and logos, with the existing background color or gradient
+underneath. No extra overlay or per-layout color properties are introduced.
+Only an absent setting triggers fallback: an invalid value, missing file, or
+oversized image is an error, not a reason to silently substitute another image.
+Omitting all image settings preserves CSS-only themes and existing output.
+
 ### Sizing and spacing
 
 You may change `--deck-pad-y`, `--deck-pad-x`, `--slide-h1-size`,

package/shared/markdown-deck.mjs

@@ -24,7 +24,8 @@ const META_COMMENT = /^[ \t]*#/;
 // - layout: Inheritance would make every page a cover or back cover. The leading
 //   front matter is also the first slide's front matter, so it still applies there.
 // - page: Sequence numbers are slide-specific; a deck-wide value has no meaning.
-const NON_INHERITED_KEYS = new Set(["layout", "page"]);
+// - background-image: An explicit image overrides only its own slide's background.
+const NON_INHERITED_KEYS = new Set(["layout", "page", "background-image"]);
 
 // Layouts that do not receive automatic page numbers (cover, section divider, and back cover).
 const UNNUMBERED_LAYOUTS = new Set(["title", "section", "backcover"]);
@@ -177,8 +178,8 @@ export function splitMarkdownDeck(text) {
  * Convert a Markdown file to slide fragments the extension can render directly.
  *
  * - Inherit shared deck front matter on each slide; slide-level values take precedence.
- * - Do not inherit `layout`. Leading file front matter also belongs to the first
- *   slide, so it still applies there (for example, `layout: title`).
+ * - Do not inherit `layout` or `background-image`. Leading file front matter also
+ *   belongs to the first slide, so these values still apply there.
  * - Add `page` / `total` automatically only when neither the deck nor slide
  *   specifies them. Do not display numbers on covers, section dividers, or back
  *   covers, although they still participate in sequence numbering.
@@ -190,8 +191,11 @@ export function buildDeckSlides(text) {
   const merged = slides.map((slide, i) => {
     const meta = new Map();
     for (const [key, entry] of deckMeta) {
-      // Leading file front matter also belongs to the first slide, so include its layout.
-      if (NON_INHERITED_KEYS.has(key) && !(i === 0 && key === "layout")) continue;
+      // Preserve the first slide's layout and background, but never inherit page numbers.
+      if (
+        NON_INHERITED_KEYS.has(key) &&
+        !(i === 0 && (key === "layout" || key === "background-image"))
+      ) continue;
       meta.set(key, entry);
     }
     for (const [key, entry] of slide.meta) meta.set(key, entry);

package/shared/renderer/architecture-document.mjs

@@ -9,6 +9,7 @@ import {
   resolveRawElement,
   serializeArchitecture,
 } from "./architecture-edit.mjs";
+import { architectureContract } from "./architecture-contract.mjs";
 
 const HISTORY_LIMIT = 200;
 const COORDINATE_MIN = -4000;
@@ -143,8 +144,50 @@ function setNested(target, path, value) {
   }
 }
 
-function remapCloneIds(raw, element) {
-  const copy = clone(element);
+function operationRoots(entries) {
+  return entries.filter((entry) => !entries.some(
+    (ancestor) => ancestor.element.type === "group" &&
+      entry.sourcePath.startsWith(`${ancestor.sourcePath}.children[`),
+  ));
+}
+
+function updateProperty(element, path, value) {
+  setNested(element, path, value);
+  if (element.type === "connector" && path === "routing" && value !== "polyline") {
+    delete element.points;
+  }
+}
+
+function supportsBatchProperty(element, path) {
+  if (typeof path !== "string") return false;
+  const [field, nested, ...rest] = path.split(".");
+  if (["id", "type", "children", "parent", "layout"].includes(field)) return false;
+  const properties = architectureContract.elements[element.type]?.properties;
+  if (!properties || !Object.hasOwn(properties, field)) return false;
+  if (nested === undefined) return true;
+  return field === "style" && rest.length === 0 &&
+    Object.hasOwn(architectureContract.definitions.style.properties, nested);
+}
+
+function finiteValues(value) {
+  if (typeof value === "number") return Number.isFinite(value);
+  if (value && typeof value === "object") return Object.values(value).every(finiteValues);
+  return true;
+}
+
+function sharedDisplacement(boxes, dx, dy) {
+  return {
+    dx: round(clamp(dx,
+      Math.max(...boxes.map((box) => COORDINATE_MIN - box.x)),
+      Math.min(...boxes.map((box) => COORDINATE_MAX - box.x)))),
+    dy: round(clamp(dy,
+      Math.max(...boxes.map((box) => COORDINATE_MIN - box.y)),
+      Math.min(...boxes.map((box) => COORDINATE_MAX - box.y)))),
+  };
+}
+
+function remapCloneIds(raw, elements) {
+  const copies = clone(elements);
   const mapping = new Map();
   const reserved = new Set(rawEntries(raw).map((entry) => entry.element.id).filter(Boolean));
   const reserveId = (base) => {
@@ -170,7 +213,7 @@ function remapCloneIds(raw, element) {
     }
     if (Array.isArray(item.children)) item.children.forEach(reserve);
   };
-  reserve(copy);
+  copies.forEach(reserve);
   const updateConnectors = (item) => {
     if (!item || typeof item !== "object") return;
     if (item.type === "connector") {
@@ -179,8 +222,8 @@ function remapCloneIds(raw, element) {
     }
     if (Array.isArray(item.children)) item.children.forEach(updateConnectors);
   };
-  updateConnectors(copy);
-  return copy;
+  copies.forEach(updateConnectors);
+  return copies;
 }
 
 export function createArchitectureDocument(source, options = {}) {
@@ -207,6 +250,9 @@ export function createArchitectureDocument(source, options = {}) {
   }
 
   function commit(raw, reason, details = {}) {
+    if (JSON.stringify(raw) === JSON.stringify(current().raw)) {
+      return reject("unchanged", details);
+    }
     const sourceText = serializeArchitecture(raw);
     let next;
     try {
@@ -233,6 +279,30 @@ export function createArchitectureDocument(source, options = {}) {
     return commit(raw, reason, details);
   }
 
+  function selection(raw, refs) {
+    if (!Array.isArray(refs)) return reject("invalid-selection", { refs: [] });
+    if (!refs.length) return reject("empty-selection", { refs: [] });
+    const entries = [];
+    const seen = new Set();
+    for (const ref of refs) {
+      const entry = typeof ref === "string" ? rawEntry(raw, ref) : null;
+      if (!entry) return reject("unknown", { refs, invalidRef: ref });
+      if (seen.has(entry.element)) continue;
+      seen.add(entry.element);
+      entries.push(entry);
+    }
+    return { entries, refs: entries.map((entry) => entry.ref) };
+  }
+
+  function mutateMany(reason, refs, mutator) {
+    const edited = mutate(reason, (raw) => {
+      const selected = selection(raw, refs);
+      if (selected.ok === false) return selected;
+      return mutator(raw, selected);
+    });
+    return { refs: Array.isArray(refs) ? refs : [], ...edited };
+  }
+
   function describe(ref) {
     const element = modelElement(current().model, ref);
     if (!element) return { found: false, movable: false, reason: "unknown", ref };
@@ -266,14 +336,28 @@ export function createArchitectureDocument(source, options = {}) {
     return mutate("element-updated", (raw) => {
       const entry = rawEntry(raw, ref);
       if (!entry) return reject("unknown", { ref });
-      setNested(entry.element, path, value);
-      if (entry.element.type === "connector" && path === "routing" && value !== "polyline") {
-        delete entry.element.points;
-      }
+      updateProperty(entry.element, path, value);
       return { ref: entry.element.id || entry.sourcePath, path, value };
     });
   }
 
+  function setElements(refs, path, value) {
+    return mutateMany("elements-updated", refs, (_raw, selected) => {
+      if (!finiteValues(value)) return reject("invalid-value", { refs: selected.refs, path });
+      for (const entry of selected.entries) {
+        if (!supportsBatchProperty(entry.element, path)) {
+          return reject("unsupported-property", { refs: selected.refs, path });
+        }
+        if (["x", "y", "width", "height"].includes(path)) {
+          const placement = describePlacement(current().model, entry.element.id);
+          if (!placement.movable) return { ...placement, ok: false, refs: selected.refs };
+        }
+      }
+      for (const entry of selected.entries) updateProperty(entry.element, path, value);
+      return { refs: selected.refs, path, value };
+    });
+  }
+
   function renameElement(ref, id) {
     const next = String(id || "").trim();
     if (!ID_PATTERN.test(next)) return reject("invalid-id", { id: next });
@@ -311,6 +395,34 @@ export function createArchitectureDocument(source, options = {}) {
     });
   }
 
+  function moveMany(refs, dx, dy) {
+    return mutateMany("moved", refs, (_raw, selected) => {
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) {
+        return reject("invalid-displacement", { refs: selected.refs });
+      }
+      const roots = operationRoots(selected.entries)
+        .filter((entry) => entry.element.type !== "connector");
+      if (!roots.length) return reject("connector-only", { refs: selected.refs });
+      const boxes = [];
+      for (const entry of roots) {
+        const placement = describePlacement(current().model, entry.element.id);
+        if (!placement.movable) return { ...placement, ok: false, refs: selected.refs };
+        const element = modelElement(current().model, entry.ref);
+        boxes.push({
+          x: round(element.x - placement.origin.x),
+          y: round(element.y - placement.origin.y),
+        });
+      }
+      const delta = sharedDisplacement(boxes, dx, dy);
+      if (!delta.dx && !delta.dy) return reject("unchanged", { refs: selected.refs, ...delta });
+      roots.forEach((entry, index) => {
+        entry.element.x = round(boxes[index].x + delta.dx);
+        entry.element.y = round(boxes[index].y + delta.dy);
+      });
+      return { refs: selected.refs, ...delta };
+    });
+  }
+
   function resize(ref, box) {
     const element = modelElement(current().model, ref);
     if (!element || element.type === "connector") return reject("unknown", { ref });
@@ -452,6 +564,19 @@ export function createArchitectureDocument(source, options = {}) {
     });
   }
 
+  function removeMany(refs) {
+    return mutateMany("elements-deleted", refs, (raw, selected) => {
+      const roots = operationRoots(selected.entries);
+      const ids = new Set();
+      roots.forEach((entry) => collectIds(entry.element, ids));
+      for (const entry of roots) {
+        entry.items.splice(entry.items.indexOf(entry.element), 1);
+      }
+      if (ids.size) removeReferencingConnectors(raw.elements, ids);
+      return { refs: [], removedIds: [...ids] };
+    });
+  }
+
   function duplicate(ref) {
     return mutate("element-duplicated", (raw) => {
       const entry = rawEntry(raw, ref);
@@ -459,7 +584,7 @@ export function createArchitectureDocument(source, options = {}) {
       const copy =
         entry.element.type === "connector"
           ? clone(entry.element)
-          : remapCloneIds(raw, entry.element);
+          : remapCloneIds(raw, [entry.element])[0];
       if (typeof copy.x === "number") copy.x = clamp(copy.x + 24, COORDINATE_MIN, COORDINATE_MAX);
       if (typeof copy.y === "number") copy.y = clamp(copy.y + 24, COORDINATE_MIN, COORDINATE_MAX);
       entry.items.splice(entry.index + 1, 0, copy);
@@ -468,6 +593,36 @@ export function createArchitectureDocument(source, options = {}) {
     });
   }
 
+  function duplicateMany(refs) {
+    return mutateMany("elements-duplicated", refs, (raw, selected) => {
+      const roots = operationRoots(selected.entries);
+      const copies = remapCloneIds(raw, roots.map((entry) => entry.element));
+      const boxes = roots.map((entry) => {
+        if (entry.element.type === "connector") return null;
+        const placement = describePlacement(current().model, entry.element.id);
+        if (!placement.movable) return null;
+        const element = modelElement(current().model, entry.ref);
+        return {
+          x: round(element.x - placement.origin.x),
+          y: round(element.y - placement.origin.y),
+        };
+      });
+      const movableBoxes = boxes.filter(Boolean);
+      const delta = movableBoxes.length ? sharedDisplacement(movableBoxes, 24, 24) : { dx: 0, dy: 0 };
+      roots.forEach((entry, index) => {
+        const copy = copies[index];
+        if (boxes[index]) {
+          copy.x = round(boxes[index].x + delta.dx);
+          copy.y = round(boxes[index].y + delta.dy);
+        }
+        entry.items.splice(entry.items.indexOf(entry.element) + 1, 0, copy);
+      });
+      // Source paths belong to the final arrays, not the insertion-time indexes.
+      const inserted = new Map(rawEntries(raw).map((entry) => [entry.element, entry.ref]));
+      return { refs: copies.map((copy) => inserted.get(copy)), ...delta };
+    });
+  }
+
   function reorder(ref, delta) {
     return mutate("element-reordered", (raw) => {
       const entry = rawEntry(raw, ref);
@@ -569,15 +724,19 @@ export function createArchitectureDocument(source, options = {}) {
     describe,
     setRoot,
     setElement,
+    setElements,
     renameElement,
     move,
+    moveMany,
     resize,
     addNode,
     addGroup,
     addImage,
     addConnector,
     remove,
+    removeMany,
     duplicate,
+    duplicateMany,
     reorder,
     reparent,
     releaseLayout,

package/shared/renderer/index.html

@@ -67,7 +67,7 @@
         </button>
         <button id="navExportPptx" class="nav-more-item" type="button" title="Save as editable PowerPoint" aria-label="Save as editable PowerPoint" hidden>
           <span class="nav-more-icon" aria-hidden="true">P</span>
-          <span class="nav-more-label">Export PowerPoint</span>
+          <span class="nav-more-label">Export PowerPoint&#8230;</span>
         </button>
       </section>
     </div>
@@ -85,6 +85,29 @@
   </section>
   <div id="layoutWarning" class="layout-warning" role="status" aria-live="polite" hidden></div>
 
+  <dialog id="pptxExportDialog" class="pptx-export-dialog" aria-labelledby="pptxExportTitle">
+    <form id="pptxExportForm">
+      <h2 id="pptxExportTitle">Export PowerPoint</h2>
+      <fieldset>
+        <legend>Mermaid diagrams</legend>
+        <label class="pptx-export-choice">
+          <input type="radio" name="mermaidOutput" value="shapes" checked autofocus aria-describedby="pptxShapesDescription">
+          <span>Editable shapes</span>
+        </label>
+        <p id="pptxShapesDescription">Edit shapes and text in PowerPoint. Unsupported details become images.</p>
+        <label class="pptx-export-choice">
+          <input type="radio" name="mermaidOutput" value="images" aria-describedby="pptxImagesDescription">
+          <span>Images</span>
+        </label>
+        <p id="pptxImagesDescription">Keep each diagram as one image. Text and lines within it cannot be edited individually.</p>
+      </fieldset>
+      <div class="pptx-export-actions">
+        <button id="pptxExportCancel" class="presenter-button" type="button">Cancel</button>
+        <button class="presenter-button pptx-export-submit" type="submit">Export</button>
+      </div>
+    </form>
+  </dialog>
+
   <section id="presenterView" class="presenter-view" hidden aria-label="Presenter view">
     <header class="presenter-view-head">
       <h1>Presenter view</h1>
@@ -93,12 +116,12 @@
     <div class="presenter-previews">
       <section class="presenter-preview presenter-preview-current" aria-labelledby="presenterCurrentLabel">
         <h2 id="presenterCurrentLabel">Current slide</h2>
-        <iframe id="presenterCurrent" class="presenter-frame" title="Current slide"></iframe>
+        <div id="presenterCurrentViewport" class="presenter-frame slide-viewport"></div>
       </section>
       <div class="presenter-sidebar">
         <section class="presenter-preview" aria-labelledby="presenterNextLabel">
           <h2 id="presenterNextLabel">Next slide</h2>
-          <iframe id="presenterNext" class="presenter-frame" title="Next slide"></iframe>
+          <div id="presenterNextViewport" class="presenter-frame slide-viewport"></div>
           <p id="presenterNextEmpty" class="presenter-next-empty" hidden>There is no next slide</p>
         </section>
         <section class="presenter-notes" aria-labelledby="presenterNotesLabel">