@markdstage/markdstage 3.2.0 → 3.3.0

package/shared/renderer/theme.mjs

@@ -91,6 +91,60 @@ export function serializeThemeVariables(variables) {
     .join("");
 }
 
+// Mermaid's "base" theme accepts a `themeVariables` palette instead of one of
+// its built-in named themes (dark/default/neutral/forest). Deriving that
+// palette from the rendered deck's custom properties makes Mermaid diagrams
+// share the slide's background, border, and text colors instead of only
+// approximating the deck theme, and it reuses the same primary/secondary
+// roles as the Architecture DSL (nodes: surface+border+fg, groups:
+// accent-soft+accent-line+accent-strong) so both diagram types match.
+//
+// `secondaryColor`/`tertiaryColor` also back many categorical fills across
+// Mermaid's diagram types (pie slices, git graph nodes, venn/quadrant charts,
+// activation highlights, ...), so they must stay solid and clearly visible
+// against `--bg` rather than reusing the translucent `--accent-soft` wash or
+// `--bg` itself, which rendered those fills nearly invisible. `noteBkgColor`/
+// `noteBorderColor`/`noteTextColor` are hardcoded by Mermaid's base theme
+// (always a pale yellow) unless set explicitly, so sequence-diagram notes
+// need their own override to follow the deck theme too.
+export function mermaidThemeVariables(style) {
+  const read = (name) => style.getPropertyValue(name).trim();
+  const background = read("--bg");
+  const surface = read("--surface");
+  const border = read("--border");
+  const foreground = read("--fg");
+  const muted = read("--muted");
+  const accent = read("--accent");
+  const accentStrong = read("--accent-strong");
+  const accentSoft = read("--accent-soft");
+  const accentLine = read("--accent-line");
+
+  return {
+    background,
+    primaryColor: surface,
+    primaryTextColor: foreground,
+    primaryBorderColor: border,
+    secondaryColor: accentStrong,
+    secondaryTextColor: background,
+    secondaryBorderColor: accentLine,
+    tertiaryColor: muted,
+    tertiaryTextColor: background,
+    tertiaryBorderColor: border,
+    lineColor: accent,
+    textColor: foreground,
+    mainBkg: surface,
+    nodeBorder: border,
+    clusterBkg: accentSoft,
+    clusterBorder: accentLine,
+    titleColor: foreground,
+    edgeLabelBackground: background,
+    noteBkgColor: accentSoft,
+    noteBorderColor: accentLine,
+    noteTextColor: accentStrong,
+    pie1: accent,
+  };
+}
+
 function assertPlainObject(value, path) {
   if (!value || typeof value !== "object" || Array.isArray(value)) {
     throw new Error(`${path} must be an object`);

package/shared/runtime/architecture-editor-server.mjs

@@ -581,6 +581,9 @@ export async function startArchitectureEditorServer({
     if (
       [
         "/renderer/architecture.mjs",
+        "/renderer/architecture-scene.mjs",
+        "/renderer/scene-graph.mjs",
+        "/renderer/scene-svg.mjs",
         "/renderer/architecture-contract.mjs",
         "/renderer/architecture-diagnostics.mjs",
         "/renderer/architecture-edit.mjs",

package/shared/runtime/pptx-package.mjs

@@ -707,7 +707,7 @@ function tableXml(element, path, id, relationships) {
   return `<p:graphicFrame><p:nvGraphicFramePr><p:cNvPr id="${id}" name="Table ${id}"/><p:cNvGraphicFramePr/><p:nvPr/></p:nvGraphicFramePr>${xfrmXml(bounds, "p:xfrm")}<a:graphic><a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/table"><a:tbl><a:tblPr firstRow="1" bandRow="1"/><a:tblGrid>${columns}</a:tblGrid>${rows}</a:tbl></a:graphicData></a:graphic></p:graphicFrame>`;
 }
 
-function arrowXml(value, path) {
+function arrowXml(value, path, end = "tailEnd") {
   if (value === undefined || value === null || value === false || value === "none") {
     return "";
   }
@@ -722,7 +722,7 @@ function arrowXml(value, path) {
           oval: "oval",
         }[value];
   if (!type) fail(`${path} is not a supported arrow end`);
-  return `<a:tailEnd type="${type}"/>`;
+  return `<a:${end} type="${type}"/>`;
 }
 
 function connectorXml(element, path, nextId, relationships) {
@@ -756,6 +756,7 @@ function connectorXml(element, path, nextId, relationships) {
     const y = Math.min(start.y, end.y);
     const flipH = end.x < start.x ? ' flipH="1"' : "";
     const flipV = end.y < start.y ? ' flipV="1"' : "";
+    const head = index === 0 ? arrowXml(element.arrowStart, `${path}.arrowStart`, "headEnd") : "";
     const tail =
       index === points.length - 2
         ? arrowXml(element.arrowEnd, `${path}.arrowEnd`)
@@ -763,7 +764,7 @@ function connectorXml(element, path, nextId, relationships) {
     shapes.push(
       `<p:sp><p:nvSpPr><p:cNvPr id="${id}" name="Connector ${id}"/><p:cNvSpPr/><p:nvPr/></p:nvSpPr><p:spPr><a:xfrm${flipH}${flipV}><a:off x="${emu(x)}" y="${emu(y)}"/><a:ext cx="${emu(Math.abs(end.x - start.x))}" cy="${emu(Math.abs(end.y - start.y))}"/></a:xfrm><a:prstGeom prst="line"><a:avLst/></a:prstGeom><a:ln w="${emu(width)}"><a:solidFill><a:srgbClr val="${color.hex}">${
         alpha < 100000 ? `<a:alpha val="${alpha}"/>` : ""
-      }</a:srgbClr></a:solidFill>${dash}${tail}</a:ln></p:spPr></p:sp>`,
+      }</a:srgbClr></a:solidFill>${dash}${head}${tail}</a:ln></p:spPr></p:sp>`,
     );
   }
   if (element.label !== undefined) {