slidemind 0.1.6 → 0.1.8

package/src/bridge/engine-download.mjs

@@ -0,0 +1,89 @@
+// Engine-result download logic behind the `slidemind download-result` CLI
+// command (bin/slidemind.mjs). Fetches a chosen image/icon search result over
+// the bridge and writes it into a deck's assets/, optionally baking in a
+// colour, and classifies how it recolours.
+//
+// It takes an already-loaded bridge `client` rather than importing it, so the
+// caller controls how the (heavier) client module is loaded.
+
+import fs from "node:fs";
+import path from "node:path";
+
+import { describeRecolor } from "./recolor.mjs";
+
+const MIME_EXT = {
+  "image/svg+xml": "svg",
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/webp": "webp",
+  "image/gif": "gif",
+};
+
+// Derive a usable file extension from an engine result's MIME type. The brand
+// engine can return any image Content-Type (image/x-icon, image/bmp,
+// image/avif, …) and may carry a `;charset=` suffix, so an exact-match table
+// alone would fall back to a useless `.bin` that won't render in an <img>.
+// Strip params, then fall back to the MIME subtype itself for any `image/*`.
+export function extFromMime(mimeType) {
+  const mt = String(mimeType || "")
+    .split(";")[0]
+    .trim()
+    .toLowerCase();
+  if (MIME_EXT[mt]) return MIME_EXT[mt];
+  const m = /^image\/(?:x-)?([a-z0-9.+-]+)$/.exec(mt);
+  if (m) {
+    const sub = m[1].replace(/\+xml$/, "");
+    if (sub === "svg") return "svg";
+    if (sub === "jpeg") return "jpg";
+    if (sub === "icon") return "ico";
+    return sub; // png, gif, webp, bmp, avif, tiff, heic, …
+  }
+  return "bin";
+}
+
+// Download one chosen engine result via the bridge and write it into assetsDir.
+// Returns { selection, path, reference, mimeType, recolor }. Throws on failure
+// so callers can Promise.allSettled a batch without one bad selection sinking
+// the rest.
+export async function downloadOneResult({
+  client,
+  presId,
+  backendURL = null,
+  searchId,
+  assetsDir,
+  selection,
+  iconColor,
+}) {
+  const res = await client.engineDownload({
+    presId,
+    backendURL,
+    searchId,
+    selection,
+    iconColor: iconColor ?? null,
+  });
+  if (!res?.ok) {
+    throw new Error(res?.error ?? "download failed");
+  }
+  const ext = extFromMime(res.mimeType);
+  const filename = `engine-${searchId}-${selection}.${ext}`;
+  const target = path.join(assetsDir, filename);
+  if (res.svgMarkup && ext === "svg") {
+    // The (possibly recoloured) SVG markup is the canonical asset.
+    fs.writeFileSync(target, res.svgMarkup, "utf8");
+  } else if (typeof res.base64 === "string" && res.base64.length > 0) {
+    fs.writeFileSync(target, Buffer.from(res.base64, "base64"));
+  } else if (res.svgMarkup) {
+    // SVG bytes arrived only as markup (mimeType lacked an svg hint).
+    fs.writeFileSync(target, res.svgMarkup, "utf8");
+  } else {
+    throw new Error("engine result carried neither base64 bytes nor svgMarkup");
+  }
+  return {
+    selection,
+    path: target,
+    reference: `./assets/${filename}`,
+    mimeType: res.mimeType,
+    recolor: describeRecolor(res.svgMarkup ?? null, res.mimeType, iconColor ?? null),
+  };
+}

package/src/{mcp → bridge}/recolor.mjs

@@ -2,22 +2,23 @@
 // open the SVG to find out (the exact step that was wasting time: "let me
 // inspect two SVGs to confirm how recolouring works").
 //
-// The slidemind_download_result tool already has the chosen result's bytes in
-// hand (the bridge returns `svgMarkup` for SVG results), so we can classify it
-// once and report the answer instead of leaving the agent to guess.
+// The download path already has the chosen result's bytes in hand (the bridge
+// returns `svgMarkup` for SVG results), so we can classify it once and report
+// the answer instead of leaving the agent to guess. Shared by the
+// `slidemind download-result` CLI command (see src/bridge/engine-download.mjs).
 //
 //   mode:
 //     "currentColor" — paints with fill/stroke="currentColor". A CSS `color`
 //                      on the <img> tints it live in BOTH the HTML preview
 //                      (which inlines the SVG, see src/builders/build.mjs) and
 //                      the .pptx render (which substitutes currentColor). You
-//                      can also bake a fixed colour in with icon_color.
+//                      can also bake a fixed colour in with --icon-color.
 //     "mono"         — a single hard-coded paint colour (or the SVG default,
 //                      black) and no currentColor. CSS `color` will NOT touch
-//                      it — recolour by re-downloading with icon_color, which
+//                      it — recolour by re-downloading with --icon-color, which
 //                      makes the bridge rewrite the fill.
 //     "multicolor"   — several distinct paint colours. Leave it as-is; passing
-//                      icon_color would flatten a deliberately multi-tone glyph.
+//                      --icon-color would flatten a deliberately multi-tone glyph.
 //     "raster"       — PNG/JPEG/etc. Colour is not applicable.
 
 function isSvg(mimeType, svgMarkup) {
@@ -92,13 +93,13 @@ export function describeRecolor(svgMarkup, mimeType, appliedColor = null) {
   } else if (mode === "currentColor") {
     note =
       "Tintable: set CSS `color` on the <img> (honoured in both the HTML " +
-      "preview and the .pptx render), or pass icon_color to bake a fixed colour in.";
+      "preview and the .pptx render), or pass --icon-color to bake a fixed colour in.";
   } else if (mode === "mono") {
     note =
       "Single-colour glyph: CSS `color` won't tint it — re-download with " +
-      "icon_color (a hex resolved from a corporate-design.css token) to recolour.";
+      "--icon-color (a hex resolved from a corporate-design.css token) to recolour.";
   } else {
-    note = "Multi-colour glyph: leave as-is; icon_color would flatten it.";
+    note = "Multi-colour glyph: leave as-is; --icon-color would flatten it.";
   }
 
   return {

package/src/builders/build.mjs

@@ -206,6 +206,27 @@ const HTML_TEMPLATE = `<!doctype html>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap" />
   <link rel="stylesheet" href="./corporate-design.css" />
   <link rel="stylesheet" href="./layouts.css" />
+  <style>
+    /* Compatibility aliases for decks/slides authored against the older
+       statworx token names. New materialized bundles expose semantic tokens
+       (--fg-*, --bg-*, --border-*); existing slide JSX may still refer
+       to --sw-*. Keep those declarations valid in the HTML preview. */
+    :root {
+      --sw-black: var(--fg-1, #000000);
+      --sw-white: var(--bg-1, #ffffff);
+      --sw-ink: var(--fg-2, #283440);
+      --sw-slate: var(--fg-3, #6C7D8C);
+      --sw-gray: var(--fg-4, #B6BDCC);
+      --sw-fog: var(--bg-2, #EBF0F2);
+      --sw-ice-blue: var(--bg-3, #E6E6FF);
+      --sw-tech-blue: var(--fg-accent, #0000FF);
+      --sw-tech-blue-10: #E6E6FF;
+      --sw-tech-blue-20: #CCCCFF;
+      --sw-tech-blue-40: #9999FF;
+      --sw-tech-blue-80: #3333FF;
+      --sw-magenta: #E6007E;
+    }
+  </style>
   <style>
     /* Substitute Arial with Arimo (a metric clone) so wrap behaviour
        matches PowerPoint's rendering. Local Arial wins only if Arimo
@@ -237,9 +258,18 @@ const HTML_TEMPLATE = `<!doctype html>
   </style>
   <style>
     html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; overflow: hidden; }
+    :root {
+      --deck-rail-w: 220px;
+      --deck-chrome-h: 62px;
+      --deck-chrome-bg: #111113;
+      --deck-chrome-bg-2: #161618;
+      --deck-chrome-border: #2b2b30;
+      --deck-chrome-fg: #ededed;
+      --deck-chrome-dim: #9a9aa0;
+    }
     .deck {
       position: fixed;
-      inset: 0;
+      inset: 0 0 0 var(--deck-rail-w);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -265,6 +295,89 @@ const HTML_TEMPLATE = `<!doctype html>
       letter-spacing: 0.02em;
       user-select: none;
     }
+    .deck__rail {
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: var(--deck-rail-w);
+      z-index: 2147483590;
+      display: flex;
+      flex-direction: column;
+      background: var(--deck-chrome-bg);
+      border-right: 1px solid var(--deck-chrome-border);
+      color: var(--deck-chrome-fg);
+      font-family: var(--font-sans, sans-serif);
+    }
+    .deck__thumbs {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding: 12px 14px 18px;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    .deck__thumbs::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+    }
+    .deck__thumb {
+      width: 100%;
+      margin: 0 0 12px;
+      padding: 8px;
+      border: 1px solid var(--deck-chrome-border);
+      border-radius: 8px;
+      background: rgba(255,255,255,0.025);
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+    }
+    .deck__thumb:hover {
+      background: rgba(255,255,255,0.06);
+      border-color: #3a3a40;
+    }
+    .deck__thumb.is-active {
+      border-color: rgba(237,237,237,0.7);
+      background: rgba(255,255,255,0.085);
+      box-shadow: 0 0 0 2px rgba(237,237,237,0.08);
+    }
+    .deck__thumb-preview {
+      width: 176px;
+      height: 99px;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.28);
+      pointer-events: none;
+    }
+    .deck__thumb-frame {
+      display: block;
+      width: 176px;
+      height: 99px;
+      border: 0;
+      background: #fff;
+      pointer-events: none;
+    }
+    .deck__thumb-meta {
+      display: flex;
+      align-items: baseline;
+      gap: 7px;
+      margin-top: 7px;
+      min-width: 0;
+      font-size: 11px;
+      line-height: 1.25;
+    }
+    .deck__thumb-number {
+      flex: 0 0 auto;
+      color: var(--deck-chrome-dim);
+      font-variant-numeric: tabular-nums;
+    }
+    .deck__thumb-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     .deck__error {
       padding: 32px;
       color: #ff6b6b;
@@ -283,7 +396,16 @@ const HTML_TEMPLATE = `<!doctype html>
       margin: 0;
       position: static;
     }
-    body.deck--export .deck__nav { display: none !important; }
+    body.deck--export .deck__nav,
+    body.deck--export .deck__rail { display: none !important; }
+    /* Thumbnail mode runs inside the left rail's isolated iframes. It must
+       render exactly one slide and no chrome, so per-slide <style> tags do not
+       leak into the main review document. */
+    body.deck--thumb { background: transparent !important; overflow: hidden; }
+    body.deck--thumb .deck { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
+    body.deck--thumb .deck__stage { box-shadow: none !important; }
+    body.deck--thumb .deck__nav,
+    body.deck--thumb .deck__rail { display: none !important; }
     /* Print mode (?print=1) — stacks every slide as its own page so the
        browser's Print / Cmd-P renders one slide per page (proofing). */
     body.deck--print {
@@ -292,7 +414,8 @@ const HTML_TEMPLATE = `<!doctype html>
       height: auto !important;
     }
     body.deck--print .deck,
-    body.deck--print .deck__nav { display: none !important; }
+    body.deck--print .deck__nav,
+    body.deck--print .deck__rail { display: none !important; }
     .print-deck { background: #ffffff; }
     .print-page {
       width: 1280px;
@@ -325,6 +448,9 @@ const HTML_TEMPLATE = `<!doctype html>
   </style>
 </head>
 <body>
+  <aside class="deck__rail" id="slide-rail" aria-label="Slide thumbnails">
+    <div class="deck__thumbs" id="slide-thumbs"></div>
+  </aside>
   <div class="deck">
     <div class="deck__stage" id="stage"></div>
   </div>
@@ -540,10 +666,15 @@ __RUNTIME_APPLIER__
 
       var stage = document.getElementById("stage");
       var nav = document.getElementById("nav");
+      var rail = document.getElementById("slide-rail");
+      var thumbs = document.getElementById("slide-thumbs");
+      var thumbButtons = [];
       var params = new URLSearchParams(location.search);
       var exportMode = params.get("export") === "1";
       var printMode = params.get("print") === "1";
+      var thumbMode = params.get("thumb") === "1";
       if (exportMode) document.body.classList.add("deck--export");
+      if (thumbMode) document.body.classList.add("deck--thumb");
 
       smInlineSvgAssets();
 
@@ -576,6 +707,66 @@ __RUNTIME_APPLIER__
       var current = startIndex;
       var root = ReactDOM.createRoot(stage);
 
+      function buildThumbs() {
+        if (!thumbs || printMode || exportMode || thumbMode) return;
+        thumbs.innerHTML = "";
+        thumbButtons = [];
+        slides.forEach(function (slide, idx) {
+          var btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "deck__thumb";
+          btn.setAttribute("aria-label", "Go to slide " + (idx + 1) + ": " + slide.name);
+
+          var preview = document.createElement("div");
+          preview.className = "deck__thumb-preview";
+          var frame = document.createElement("iframe");
+          frame.className = "deck__thumb-frame";
+          frame.loading = "lazy";
+          frame.setAttribute("aria-hidden", "true");
+          frame.tabIndex = -1;
+          frame.src = location.pathname + "?slide=" + idx + "&thumb=1";
+          preview.appendChild(frame);
+
+          var meta = document.createElement("div");
+          meta.className = "deck__thumb-meta";
+          var num = document.createElement("span");
+          num.className = "deck__thumb-number";
+          num.textContent = String(idx + 1).padStart(2, "0");
+          var name = document.createElement("span");
+          name.className = "deck__thumb-name";
+          name.textContent = slide.name;
+          meta.appendChild(num);
+          meta.appendChild(name);
+
+          btn.appendChild(preview);
+          btn.appendChild(meta);
+          btn.addEventListener("click", function () {
+            setCurrent(idx);
+            stage.focus && stage.focus();
+          });
+          thumbs.appendChild(btn);
+          thumbButtons[idx] = btn;
+        });
+      }
+
+      function updateThumbs() {
+        thumbButtons.forEach(function (btn, idx) {
+          if (!btn) return;
+          var active = idx === current;
+          btn.classList.toggle("is-active", active);
+          btn.setAttribute("aria-current", active ? "true" : "false");
+          if (active && thumbs) {
+            var top = btn.offsetTop;
+            var bottom = top + btn.offsetHeight;
+            if (top < thumbs.scrollTop) {
+              thumbs.scrollTop = Math.max(0, top - 12);
+            } else if (bottom > thumbs.scrollTop + thumbs.clientHeight) {
+              thumbs.scrollTop = bottom - thumbs.clientHeight + 12;
+            }
+          }
+        });
+      }
+
       function render() {
         var slide = slides[current];
         if (!slide) return;
@@ -589,11 +780,18 @@ __RUNTIME_APPLIER__
               slide.name + ".jsx failed:\\n" + slide.error.message
             )
           );
+          updateThumbs();
           return;
         }
         root.render(
           React.createElement(slide.Component, { assetsPath: "./assets" })
         );
+        updateThumbs();
+      }
+
+      function setCurrent(index) {
+        current = Math.max(0, Math.min(index, slides.length - 1));
+        render();
       }
 
       function fit() {
@@ -601,32 +799,30 @@ __RUNTIME_APPLIER__
           stage.style.transform = "none";
           return;
         }
-        var sx = window.innerWidth / 1280;
+        var railW = rail && getComputedStyle(rail).display !== "none" ? rail.offsetWidth : 0;
+        var sx = Math.max(1, window.innerWidth - railW) / 1280;
         var sy = window.innerHeight / 720;
-        var s = Math.min(sx, sy) * 0.95;
+        var s = Math.min(sx, sy) * (thumbMode ? 1 : 0.95);
         stage.style.transform = "scale(" + s + ")";
       }
 
       window.addEventListener("resize", fit);
+      buildThumbs();
       fit();
       render();
 
       document.addEventListener("keydown", function (e) {
         var k = e.key;
         if (k === "ArrowRight" || k === "PageDown" || k === " ") {
-          current = Math.min(current + 1, slides.length - 1);
-          render();
+          setCurrent(current + 1);
           e.preventDefault();
         } else if (k === "ArrowLeft" || k === "PageUp") {
-          current = Math.max(current - 1, 0);
-          render();
+          setCurrent(current - 1);
           e.preventDefault();
         } else if (k === "Home") {
-          current = 0;
-          render();
+          setCurrent(0);
         } else if (k === "End") {
-          current = slides.length - 1;
-          render();
+          setCurrent(slides.length - 1);
         } else if (k === "f" || k === "F") {
           if (document.fullscreenElement) document.exitFullscreen();
           else document.documentElement.requestFullscreen();
@@ -721,17 +917,59 @@ export async function buildDeck(deckDir, opts = {}) {
   return { out, slideCount: slideFiles.length };
 }
 
-// Open a local file path OR an http URL in the user's default browser. The
-// platform openers (open / start / xdg-open) accept both, so review.mjs reuses
-// this to launch the local review server URL.
+// Detect whether this Linux box is really WSL, so we can hand the target to the
+// Windows-side opener instead of a (usually absent) Linux one. Any read/parse
+// failure just means "not WSL".
+function isWsl() {
+  if (process.platform !== "linux") return false;
+  try {
+    return /microsoft/i.test(fs.readFileSync("/proc/version", "utf8"));
+  } catch {
+    return false;
+  }
+}
+
+// Ordered list of opener candidates to try for the current platform. The
+// platform openers (open / start / xdg-open / wslview) accept both a local file
+// path AND an http URL, so review.mjs reuses this to launch the local review
+// server URL and view-draft passes png paths.
+function openerChain(target) {
+  if (process.platform === "darwin") return [{ cmd: "open", args: [target] }];
+  if (process.platform === "win32")
+    return [{ cmd: "cmd", args: ["/c", "start", "", target] }];
+  if (isWsl())
+    return [
+      { cmd: "wslview", args: [target] },
+      { cmd: "powershell.exe", args: ["-NoProfile", "-Command", "start", target] },
+    ];
+  return [{ cmd: "xdg-open", args: [target] }];
+}
+
+// Open a local file path OR an http URL in the user's default browser, trying
+// each platform opener in turn. This is fire-and-forget and must NEVER crash:
+// if the opener binary is missing (e.g. a headless Linux box with no xdg-open)
+// the spawned child would otherwise emit an unhandled 'error' and take down the
+// whole CLI. We degrade gracefully — on exhausting the chain we just print the
+// target for the user to open manually.
 export function openInBrowser(target) {
-  const opener =
-    process.platform === "darwin"
-      ? { cmd: "open", args: [target] }
-      : process.platform === "win32"
-        ? { cmd: "cmd", args: ["/c", "start", "", target] }
-        : { cmd: "xdg-open", args: [target] };
-  spawn(opener.cmd, opener.args, { stdio: "ignore", detached: true }).unref();
+  const chain = openerChain(target);
+  const tryAt = (i) => {
+    if (i >= chain.length) {
+      process.stderr.write(`couldn't open a browser — open ${target} manually\n`);
+      return;
+    }
+    const { cmd, args } = chain[i];
+    let child;
+    try {
+      child = spawn(cmd, args, { stdio: "ignore", detached: true });
+    } catch {
+      tryAt(i + 1);
+      return;
+    }
+    child.on("error", () => tryAt(i + 1));
+    child.unref();
+  };
+  tryAt(0);
 }
 
 function parseArgs(argv) {