slidemind 0.3.12 → 0.3.13

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "slidemind",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "Connect Claude Code to the slidemind PowerPoint add-in — build and edit native, on-brand PowerPoint decks against the active corporate design, from the terminal.",
   "author": {
     "name": "statworx",

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "slidemind",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "Connect Codex to the slidemind PowerPoint add-in — build and edit native, on-brand PowerPoint decks against the active corporate design. Requires the slidemind CLI (npm install -g slidemind); the skills explain the install when it is missing.",
   "author": {
     "name": "statworx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidemind",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "Connect Claude Code, Codex & opencode to the slidemind PowerPoint add-in — let your coding agent build and edit native, on-brand PowerPoint decks against your active corporate design, from the terminal.",
   "type": "module",
   "bin": {

package/src/bridge/capture.mjs

@@ -145,8 +145,9 @@ export function buildCaptureInput(deckDir, bundleDir) {
 }
 
 // Launch a headless Chrome, run `fn`, then tear it down — mirrors the add-in's
-// withBrowser (waits for the process to fully exit before cleanup).
-async function withBrowser(fn) {
+// withBrowser (waits for the process to fully exit before cleanup). Exported
+// for the draft-check grid overlay, which reuses the same pinned Chrome.
+export async function withBrowser(fn) {
   // Test hook: run the engine with no real browser. Only safe with a fake
   // engine that ignores its `browser` argument — never set in production.
   if (process.env.SLIDEMIND_CAPTURE_BROWSERLESS === "1") {
@@ -162,11 +163,25 @@ async function withBrowser(fn) {
   // the bundle-shipped fonts are identical at the same pinned version, so text
   // measurement parity with the add-in's renderer is preserved.
   // SLIDEMIND_CAPTURE_FULL_CHROME=1 forces the full binary for A/B debugging.
-  const browser = await puppeteer.launch({
-    headless: process.env.SLIDEMIND_CAPTURE_FULL_CHROME === "1" ? true : "shell",
-    protocolTimeout: 600_000,
-    args: LAUNCH_ARGS,
-  });
+  const launch = (args) =>
+    puppeteer.launch({
+      headless: process.env.SLIDEMIND_CAPTURE_FULL_CHROME === "1" ? true : "shell",
+      protocolTimeout: 600_000,
+      args,
+    });
+  let browser;
+  try {
+    browser = await launch(LAUNCH_ARGS);
+  } catch (err) {
+    // Codex's workspace-write seatbelt denies the mach-port rendezvous the
+    // browser process uses to hand off to its renderer ("bootstrap_check_in
+    // … Permission denied"), so a multi-process launch dies before the first
+    // page. Single-process keeps the renderer in-process — no rendezvous —
+    // and paints identically (same Blink/Skia, same fonts). Retried only on a
+    // launch failure, so every other environment keeps the stock launch.
+    if (!/Failed to launch the browser process/i.test(String(err?.message ?? err))) throw err;
+    browser = await launch([...LAUNCH_ARGS, "--single-process", "--no-zygote"]);
+  }
   try {
     return await fn(browser);
   } finally {
@@ -199,7 +214,7 @@ async function withBrowser(fn) {
  * Throws if the engine is missing/corrupt or the local browser can't launch —
  * the caller decides whether to fall back to the server render path.
  */
-export async function captureDeckLocally({ deckDir, bundleDir, onProgress }) {
+export async function captureDeckLocally({ deckDir, bundleDir, onProgress, only = null }) {
   const enginePath = path.join(bundleDir, "capture-engine.mjs");
   if (!fs.existsSync(enginePath)) {
     throw new Error(`no capture engine in bundle ${bundleDir}`);
@@ -218,6 +233,15 @@ export async function captureDeckLocally({ deckDir, bundleDir, onProgress }) {
   }
 
   const input = buildCaptureInput(deckDir, bundleDir);
+  // `only`: capture a subset of the authored slides (a per-slide builder
+  // re-checking its own file) — the engine renders each slide on its own, so
+  // dropping the others from the input is exact, not an approximation.
+  if (Array.isArray(only) && only.length > 0) {
+    const keep = new Set(only);
+    for (const name of Object.keys(input.slides)) {
+      if (!keep.has(name)) delete input.slides[name];
+    }
+  }
   return withBrowser((browser) => engine.captureDeck(browser, input, { onProgress }));
 }
 
@@ -232,6 +256,26 @@ export async function captureDeckLocally({ deckDir, bundleDir, onProgress }) {
  * never a silent degradation: such a bundle's lint engine (same deployment)
  * rejects `<Chart>` as an unknown component before a page is ever built.
  */
+/**
+ * The exporter's connector geometry (`connector-derive`) as a browser script
+ * exported from the same artifact (`connectorPreview: { globalName, source }`).
+ * The HTML preview's connector overlay calls it on the measured DOM rects, so
+ * the preview draws the route and arrowhead the .pptx will have. The CLI ships
+ * no connector geometry of its own. null when the bundle has no engine or the
+ * engine predates the export (the overlay then draws nothing and says so).
+ */
+export async function loadConnectorPreview(bundleDir) {
+  if (!bundleDir || !bundleHasCaptureEngine(bundleDir)) return null;
+  const enginePath = path.join(bundleDir, "capture-engine.mjs");
+  const version = readBundleMeta(bundleDir).captureEngineVersion ?? "0";
+  const engine = await import(
+    `${pathToFileURL(enginePath).href}?v=${encodeURIComponent(version)}`
+  );
+  const preview = engine.connectorPreview;
+  if (!preview || typeof preview.source !== "string") return null;
+  return { globalName: String(preview.globalName || "SlidemindConnectorDerive"), source: preview.source };
+}
+
 export async function loadChartPreview(bundleDir) {
   if (!bundleDir || !bundleHasCaptureEngine(bundleDir)) return null;
   const enginePath = path.join(bundleDir, "capture-engine.mjs");

package/src/builders/build.mjs

@@ -34,7 +34,7 @@ import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
 import { resolveBundleDirForDeck } from "../bridge/bundle.mjs";
-import { loadChartPreview } from "../bridge/capture.mjs";
+import { loadChartPreview, loadConnectorPreview } from "../bridge/capture.mjs";
 import { FAVICON_LINK } from "./gate-server.mjs";
 import { lintSlidesOrThrow } from "./lint.mjs";
 import { resolveSkillForDeck } from "./resolve-skill.mjs";
@@ -323,6 +323,12 @@ const HTML_TEMPLATE = `<!doctype html>
       --sw-tech-blue-80: #3333FF;
       --sw-magenta: #E6007E;
     }
+    /* A data-connector div is a directive, not a painted box (the render
+       derives the line between its two referenced nodes). Same rule the
+       bundle's corporate-design.css carries; repeated here so a preview
+       against an older bundle lays out like the render will. */
+    [data-connector] { position: absolute; width: 0; height: 0; padding: 0; margin: 0; border-color: transparent; pointer-events: none; }
+    [data-sm-connector-overlay] { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; pointer-events: none; z-index: 2147483000; }
   </style>
   <style>
     /* Substitute Arial with Arimo (a metric clone) so wrap behaviour
@@ -574,6 +580,10 @@ __SLIDES__
        install window.SlidemindChart, which the bootstrap below binds as Chart
        before any slide is evaluated. -->
 __CHART_PREVIEW_SCRIPTS__
+  <!-- The exporter's connector geometry (connector-derive), inlined from the
+       bundle's capture engine: the overlay below derives every data-connector
+       route and arrowhead exactly as the .pptx export does. -->
+__CONNECTOR_PREVIEW_SCRIPT__
   <script>window.__SLIDE_EDITOR_OVERRIDES__ = __OVERRIDES__;</script>
   <script>window.SVG_ASSETS = __SVG_ASSETS__;</script>
   <script>
@@ -795,6 +805,130 @@ __RUNTIME_APPLIER__
 
       smInlineSvgAssets();
 
+      // Connector overlay — the preview's stand-in for the native connectors
+      // the render derives from every data-connector directive (the capture
+      // engine injects an equivalent SVG before its screenshot). Straight,
+      // elbow and arc routes, side pins, arrowheads, dash and colour follow
+      // the same rules as the exporter's connector-derive; the exporter's
+      // measured output at view-draft / in the .pptx stays the truth.
+      function smDrawConnectors(container) {
+        if (!container) return;
+        var old = container.querySelector(":scope > svg[data-sm-connector-overlay]");
+        if (old) old.remove();
+        var dirs = container.querySelectorAll("[data-connector]");
+        if (!dirs.length) return;
+        var derive = window.SlidemindConnectorDerive;
+        if (!derive || typeof derive.resolveConnector !== "function") {
+          console.warn("connector overlay skipped: the bundle's capture engine exports no connector geometry (re-fetch the bundle)");
+          return;
+        }
+        var cRect = container.getBoundingClientRect();
+        var scale = cRect.width / 1280 || 1;
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.createElementNS(NS, "svg");
+        svg.setAttribute("data-sm-connector-overlay", "1");
+        svg.setAttribute("viewBox", "0 0 1280 720");
+        var defs = document.createElementNS(NS, "defs");
+        svg.appendChild(defs);
+        var rectOf = function (el) {
+          var r = el.getBoundingClientRect();
+          return { x: (r.left - cRect.left) / scale, y: (r.top - cRect.top) / scale, w: r.width / scale, h: r.height / scale };
+        };
+        var resolveRef = function (ref) {
+          if (!ref) return null;
+          try { return container.querySelector(ref.charAt(0) === "#" ? ref : "#" + ref); } catch (e) { return null; }
+        };
+        var sideOrNull = function (raw) {
+          var s = (raw || "").toLowerCase();
+          return (s === "top" || s === "bottom" || s === "left" || s === "right") ? s : null;
+        };
+        // Computed CSS colour ("rgb(a)(...)") → { hex, alpha } as the serialiser reports it.
+        var colorOf = function (css) {
+          var m = /rgba?\(([^)]+)\)/.exec(css || "");
+          if (!m) return { hex: "000000", alpha: 1 };
+          var p = m[1].split(",").map(function (v) { return parseFloat(v); });
+          var hex = p.slice(0, 3).map(function (v) {
+            var h = Math.max(0, Math.min(255, Math.round(v))).toString(16);
+            return h.length < 2 ? "0" + h : h;
+          }).join("").toUpperCase();
+          return { hex: hex, alpha: p.length > 3 && isFinite(p[3]) ? p[3] : 1 };
+        };
+        dirs.forEach(function (el, idx) {
+          var fromEl = resolveRef(el.getAttribute("data-from"));
+          var toEl = resolveRef(el.getAttribute("data-to"));
+          var route = (el.getAttribute("data-route") || "straight").toLowerCase();
+          var centerEl = route === "arc" ? resolveRef(el.getAttribute("data-center")) : null;
+          var arrowRaw = (el.getAttribute("data-arrow") || "none").toLowerCase();
+          var cs = getComputedStyle(el);
+          var stroke = colorOf(cs.color);
+          // The same payload the serialiser hands the exporter; resolveConnector
+          // derives endpoints, route, bends, arc, and arrowhead size from it.
+          var r = derive.resolveConnector({
+            from: el.getAttribute("data-from") || "",
+            to: el.getAttribute("data-to") || "",
+            arrow: (arrowRaw === "start" || arrowRaw === "end" || arrowRaw === "both") ? arrowRaw : "none",
+            route: route,
+            fromSide: sideOrNull(el.getAttribute("data-from-side")),
+            toSide: sideOrNull(el.getAttribute("data-to-side")),
+            center: el.getAttribute("data-center") || null,
+            fromRect: fromEl ? rectOf(fromEl) : null,
+            toRect: toEl ? rectOf(toEl) : null,
+            centerRect: centerEl ? rectOf(centerEl) : null,
+            strokeHex: stroke.hex,
+            strokeAlpha: stroke.alpha,
+            strokeWidthPx: parseFloat(cs.borderTopWidth) || 0,
+            dashed: /dashed|dotted/.test(cs.borderTopStyle || ""),
+            missing: [],
+          });
+          if (!r) return;
+          var color = "#" + r.strokeHex;
+          var d;
+          if (r.arc) {
+            var large = Math.abs(r.arc.sweepDeg) > 180 ? 1 : 0;
+            var sweep = r.arc.sweepDeg > 0 ? 1 : 0;
+            d = "M" + r.start.x + " " + r.start.y + " A" + r.arc.r + " " + r.arc.r + " 0 " + large + " " + sweep + " " + r.end.x + " " + r.end.y;
+          } else {
+            d = r.points.map(function (p, i) { return (i ? "L" : "M") + p.x + " " + p.y; }).join(" ");
+          }
+          var path = document.createElementNS(NS, "path");
+          path.setAttribute("d", d);
+          path.setAttribute("fill", "none");
+          path.setAttribute("stroke", color);
+          path.setAttribute("stroke-opacity", String(r.strokeAlpha));
+          path.setAttribute("stroke-width", String(r.strokeWidthPx));
+          if (r.dashed) {
+            var dash = Math.max(4, r.strokeWidthPx * 3);
+            path.setAttribute("stroke-dasharray", dash + " " + dash);
+          }
+          if (r.arrowStart || r.arrowEnd) {
+            // Marker sized to the head PowerPoint renders (r.arrowheadPx).
+            var markerId = "sm-conn-arrow-" + idx;
+            var marker = document.createElementNS(NS, "marker");
+            marker.setAttribute("id", markerId);
+            marker.setAttribute("viewBox", "0 0 10 10");
+            marker.setAttribute("refX", "9");
+            marker.setAttribute("refY", "5");
+            marker.setAttribute("markerWidth", String(r.arrowheadPx));
+            marker.setAttribute("markerHeight", String(r.arrowheadPx));
+            marker.setAttribute("orient", "auto-start-reverse");
+            marker.setAttribute("markerUnits", "userSpaceOnUse");
+            var tri = document.createElementNS(NS, "path");
+            tri.setAttribute("d", "M0,0 L10,5 L0,10 z");
+            tri.setAttribute("fill", color);
+            tri.setAttribute("fill-opacity", String(r.strokeAlpha));
+            marker.appendChild(tri);
+            defs.appendChild(marker);
+            if (r.arrowStart) path.setAttribute("marker-start", "url(#" + markerId + ")");
+            if (r.arrowEnd) path.setAttribute("marker-end", "url(#" + markerId + ")");
+          }
+          svg.appendChild(path);
+        });
+        if (svg.childNodes.length > 1) container.appendChild(svg);
+      }
+      function smScheduleConnectors(container) {
+        requestAnimationFrame(function () { requestAnimationFrame(function () { smDrawConnectors(container); }); });
+      }
+
       if (printMode) {
         document.body.classList.add("deck--print");
         var printDeck = document.createElement("div");
@@ -814,6 +948,7 @@ __RUNTIME_APPLIER__
           ReactDOM.createRoot(page).render(
             React.createElement(slide.Component, { assetsPath: "./assets" })
           );
+          smScheduleConnectors(page);
         });
         return;
       }
@@ -903,6 +1038,7 @@ __RUNTIME_APPLIER__
         root.render(
           React.createElement(slide.Component, { assetsPath: "./assets" })
         );
+        smScheduleConnectors(stage);
         updateThumbs();
       }
 
@@ -1017,6 +1153,7 @@ export async function buildDeck(deckDir, opts = {}) {
   // loadChartPreview) — resolved after lint, which already proved the bundle
   // is materialized.
   const chartPreview = await loadChartPreview(resolveBundleDirForDeck(deckDir));
+  const connectorPreview = await loadConnectorPreview(resolveBundleDirForDeck(deckDir));
 
   copyDesignSystem(deckDir, skill);
 
@@ -1043,6 +1180,9 @@ export async function buildDeck(deckDir, opts = {}) {
             .map((script) => `  <script>\n${safeInline(script.source)}\n  </script>`)
             .join("\n")
         : "",
+    )
+    .replace("__CONNECTOR_PREVIEW_SCRIPT__", () =>
+      connectorPreview ? `  <script>\n${safeInline(connectorPreview.source)}\n  </script>` : "",
     );
 
   const out = path.join(deckDir, "presentation.html");