slidemind 0.1.2 → 0.1.4

package/src/builders/review-overlay.js

@@ -0,0 +1,821 @@
+// Preview-review overlay — the CLI port of the slidemind add-in's spatial
+// comment gate, styled as a branded slidemind "app". Dormant unless
+// `window.__SLIDEMIND_REVIEW__` is set (only the `slidemind review` local
+// server injects it), so a normal `slidemind build` preview is unaffected.
+//
+// Mechanics (mirrors the add-in, minus all the Office plumbing):
+//   - Every intrinsic element carries data-sm-loc="slides/<f>.jsx:line:col"
+//     (stamped by build.mjs's Babel plugin).
+//   - Click anywhere on the stage -> resolve the innermost element under the
+//     click via closest('[data-sm-loc]') and its ancestor chain, drop a pin,
+//     capture a note. Slide-level notes (empty-area clicks) carry no element.
+//   - Previous round's comments render as read-only ghost pins.
+//   - Approve, or Send comments -> POST to the local server, which unblocks the
+//     `slidemind review` command so the harness proceeds. No copy-paste.
+//
+// Branding (lifted from the add-in's product identity):
+//   - The embossed "raised slide" logo (public/logo.svg).
+//   - The "slide" / "mind" wordmark in Urbanist, drifting in opposite
+//     directions — the framer-motion splash animation, reimplemented in CSS.
+//   - Poppins UI type, Lucide icons, the neutral dark product palette.
+
+(function () {
+  var CFG = window.__SLIDEMIND_REVIEW__;
+  if (!CFG) return;
+
+  var STAGE_SEL = "#stage";
+  var HEADER_H = 62;
+  var SIDEBAR_W = 316; // panel + gaps reserved on the right when comments exist
+  var commentsBySlide = {}; // stem -> [comment]   (this round, editable)
+  var previousBySlide = {}; // stem -> [comment]   (last round, read-only ghosts)
+  var currentStem = null;
+  var draftPopover = null;
+  var submitted = false;
+  var sidebarEl = null;
+  var sidebarOpen = false;
+  var hoverBox = null;
+  var locked = false; // hover box pinned to a popover's target
+
+  // UI accent for the hover box + focus rings (product chrome). The brand
+  // colour now lives entirely in the orb PNG (CFG.logoMark) served from the
+  // bundle — the CLI no longer re-derives an orb from the CD's colours.
+  var ACCENT = "#a9c2ff";
+
+  // Slide play order (stem by index) read from the inlined slide scripts — lets
+  // the sidebar jump to any slide by synthesising the deck's arrow-key nav.
+  var slideOrder = [];
+
+  (CFG.previousComments || []).forEach(function (c) {
+    var stem = stemOf(c && c.jsxPath);
+    if (!stem) return;
+    (previousBySlide[stem] = previousBySlide[stem] || []).push(c);
+  });
+
+  // ---------- brand assets ----------
+  // The add-in's embossed "raised slide" mark (src/ui/public/logo.svg), inlined.
+  var LOGO_SVG =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="160 160 960 540" preserveAspectRatio="none">' +
+    '<defs>' +
+    '<linearGradient id="rimTop" gradientUnits="userSpaceOnUse" x1="160" y1="0" x2="1120" y2="0">' +
+    '<stop offset="0%" stop-color="#d0e4ff" stop-opacity="0.85"/>' +
+    '<stop offset="35%" stop-color="#fff" stop-opacity="0.5"/>' +
+    '<stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimLeft" gradientUnits="userSpaceOnUse" x1="0" y1="160" x2="0" y2="700">' +
+    '<stop offset="0%" stop-color="#d0e4ff" stop-opacity="0.6"/>' +
+    '<stop offset="40%" stop-color="#fff" stop-opacity="0.28"/>' +
+    '<stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimBottom" gradientUnits="userSpaceOnUse" x1="1120" y1="0" x2="160" y2="0">' +
+    '<stop offset="0%" stop-color="#000" stop-opacity="0.55"/>' +
+    '<stop offset="60%" stop-color="#000" stop-opacity="0.2"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="rimRight" gradientUnits="userSpaceOnUse" x1="0" y1="700" x2="0" y2="160">' +
+    '<stop offset="0%" stop-color="#000" stop-opacity="0.45"/>' +
+    '<stop offset="60%" stop-color="#000" stop-opacity="0.16"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="faceFill" gradientUnits="userSpaceOnUse" x1="160" y1="160" x2="1120" y2="700">' +
+    '<stop offset="0%" stop-color="#fff" stop-opacity="0.08"/>' +
+    '<stop offset="50%" stop-color="#808080" stop-opacity="0.02"/>' +
+    '<stop offset="100%" stop-color="#000" stop-opacity="0.10"/></linearGradient>' +
+    '</defs>' +
+    '<rect x="160" y="160" width="960" height="540" rx="40" ry="40" fill="url(#faceFill)"/>' +
+    '<path d="M 160,200 A 40,40 0 0 1 200,160 L 1080,160 A 40,40 0 0 1 1120,200" fill="none" stroke="url(#rimTop)" stroke-width="3" stroke-linecap="round"/>' +
+    '<path d="M 160,200 L 160,660 A 40,40 0 0 0 200,700" fill="none" stroke="url(#rimLeft)" stroke-width="2.4" stroke-linecap="round"/>' +
+    '<path d="M 1120,660 A 40,40 0 0 1 1080,700 L 200,700 A 40,40 0 0 1 160,660" fill="none" stroke="url(#rimBottom)" stroke-width="3" stroke-linecap="round"/>' +
+    '<path d="M 1120,660 L 1120,200 A 40,40 0 0 0 1080,160" fill="none" stroke="url(#rimRight)" stroke-width="2.4" stroke-linecap="round"/>' +
+    '<rect x="160" y="160" width="960" height="540" rx="40" ry="40" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.4"/>' +
+    "</svg>";
+
+  // Give a copy of the logo unique filter/gradient ids so two instances (header
+  // + done veil) can coexist without id collisions.
+  function logoWithIds(suffix) {
+    return LOGO_SVG.replace(/id="([^"]+)"/g, 'id="$1' + suffix + '"').replace(
+      /url\(#([^)]+)\)/g,
+      "url(#$1" + suffix + ")",
+    );
+  }
+
+  // Lucide icons (MIT) — the same family the add-in's review UI uses.
+  var ICONS = {
+    check:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+    message:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M7 9h10"/><path d="M7 13h6"/></svg>',
+    trash:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>',
+    close:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="M6 6l12 12"/></svg>',
+    pin:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.4-8 12-8 12s-8-7.6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>',
+    arrow:
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+  };
+
+  // ---------- styles ----------
+  var CSS =
+    "@keyframes sm-drift-a{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}" +
+    "@keyframes sm-drift-b{0%,100%{transform:translateX(5px)}50%{transform:translateX(-5px)}}" +
+    "@keyframes sm-bar-in{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}" +
+    "@keyframes sm-pop-in{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:none}}" +
+    "@keyframes sm-pin-in{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}" +
+    "@keyframes sm-veil-in{from{opacity:0}to{opacity:1}}" +
+    "@keyframes sm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}" +
+    ":root{--sm-bg:#0f0f0f;--sm-surface:#161618;--sm-border:#2b2b30;--sm-fg:#ededed;" +
+    "--sm-dim:#9a9aa0;--sm-accent:#a9c2ff;--sm-success:#2ecc71;--sm-danger:#f87171;" +
+    "--sm-font:'Poppins',ui-sans-serif,system-ui,sans-serif;--sm-word:'Urbanist',var(--sm-font);}" +
+    ".sm-o,.sm-o *{box-sizing:border-box;}" +
+    /* header */
+    ".sm-bar{position:fixed;top:0;left:0;right:0;z-index:2147483600;display:flex;align-items:center;" +
+    "gap:16px;height:62px;padding:0 18px;color:var(--sm-fg);font-family:var(--sm-font);font-size:13px;" +
+    "background:linear-gradient(180deg,rgba(13,13,15,.97),rgba(13,13,15,.86));" +
+    "-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--sm-border);" +
+    "user-select:none;animation:sm-bar-in .5s cubic-bezier(.2,.7,.2,1);}" +
+    ".sm-brand{display:flex;align-items:center;gap:11px;}" +
+    ".sm-logo{position:relative;width:48px;height:27px;border-radius:5px;overflow:hidden;flex-shrink:0;background:#0a0c11;box-shadow:0 1px 3px rgba(0,0,0,.5);}" +
+    ".sm-logo-svg{position:absolute;inset:0;z-index:1;}.sm-logo-svg svg{width:100%;height:100%;display:block;}" +
+    ".sm-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}" +
+    ".sm-word{display:flex;flex-direction:column;line-height:.98;font-family:var(--sm-word);" +
+    "font-weight:300;font-size:13px;letter-spacing:.46em;color:var(--sm-fg);}" +
+    ".sm-word b{font-weight:300;display:block;will-change:transform;}" +
+    ".sm-word .top{animation:sm-drift-a 20s ease-in-out infinite;}" +
+    ".sm-word .bot{margin-left:.18em;animation:sm-drift-b 20s ease-in-out infinite;}" +
+    ".sm-sep{width:1px;height:28px;background:var(--sm-border);}" +
+    ".sm-meta{display:flex;flex-direction:column;gap:2px;}" +
+    ".sm-meta .t{font-weight:600;font-size:13px;}" +
+    ".sm-meta .h{font-size:11.5px;color:var(--sm-dim);}" +
+    ".sm-grow{flex:1;}" +
+    ".sm-count{font-size:12px;color:var(--sm-dim);font-variant-numeric:tabular-nums;}" +
+    /* buttons */
+    ".sm-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:9px;" +
+    "padding:8px 14px;font-family:var(--sm-font);font-weight:600;font-size:12.5px;cursor:pointer;" +
+    "transition:transform .14s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease;white-space:nowrap;}" +
+    ".sm-btn svg{width:15px;height:15px;flex-shrink:0;}" +
+    ".sm-btn-primary{background:#f4f4f5;color:#0f0f0f;}" +
+    ".sm-btn-primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45);}" +
+    ".sm-btn-primary svg{color:var(--sm-success);}" +
+    ".sm-btn-ghost{background:transparent;border-color:var(--sm-border);color:var(--sm-fg);}" +
+    ".sm-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:#3a3a40;}" +
+    ".sm-btn-danger{background:transparent;border-color:rgba(248,113,113,.4);color:var(--sm-danger);}" +
+    ".sm-btn-danger:hover{background:rgba(248,113,113,.12);}" +
+    ".sm-btn.is-off{opacity:.4;cursor:not-allowed;pointer-events:none;}" +
+    /* pins */
+    ".sm-pinlayer{position:fixed;inset:0;z-index:2147483500;pointer-events:none;}" +
+    ".sm-pin{position:fixed;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;" +
+    "font:600 12px var(--sm-font);cursor:pointer;display:flex;align-items:center;justify-content:center;" +
+    "pointer-events:auto;animation:sm-pin-in .26s cubic-bezier(.2,1.5,.4,1);transition:filter .12s;}" +
+    ".sm-pin:hover{filter:brightness(1.12);}" +
+    ".sm-pin-active{background:#161618;color:#fff;border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 9px rgba(0,0,0,.55);}" +
+    ".sm-pin-ghost{background:rgba(20,20,22,.72);color:#a1a1aa;border:1.5px dashed #71717a;}" +
+    /* popover */
+    ".sm-pop{position:fixed;z-index:2147483646;width:272px;padding:13px;background:var(--sm-surface);" +
+    "color:var(--sm-fg);border:1px solid var(--sm-border);border-radius:12px;" +
+    "box-shadow:0 20px 54px rgba(0,0,0,.6);font-family:var(--sm-font);font-size:13px;animation:sm-pop-in .14s ease;}" +
+    ".sm-pop-head{display:flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;" +
+    "color:var(--sm-accent);margin-bottom:9px;word-break:break-all;}" +
+    ".sm-pop-head svg{width:13px;height:13px;flex-shrink:0;}" +
+    ".sm-pop-head .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}" +
+    ".sm-ta{width:100%;min-height:74px;resize:vertical;background:#0c0c0e;color:var(--sm-fg);" +
+    "border:1px solid var(--sm-border);border-radius:8px;padding:9px;font:inherit;outline:none;transition:border-color .15s;}" +
+    ".sm-ta:focus{border-color:var(--sm-accent);}.sm-ta::placeholder{color:#6b6b72;}" +
+    ".sm-row{display:flex;gap:8px;margin-top:10px;}.sm-row.end{justify-content:flex-end;}.sm-row.split{justify-content:space-between;}" +
+    ".sm-pop .sm-btn{padding:6px 12px;font-size:12px;}" +
+    ".sm-ghost-body{white-space:pre-wrap;color:#d4d4d8;font-size:12.5px;line-height:1.5;}" +
+    /* done veil */
+    ".sm-veil{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;" +
+    "justify-content:center;gap:30px;font-family:var(--sm-font);color:var(--sm-fg);" +
+    "background:radial-gradient(ellipse at center,rgba(16,16,18,.93),rgba(5,5,7,.98));" +
+    "-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:sm-veil-in .4s ease;}" +
+    ".sm-veil .sm-logo{width:188px;height:106px;border-radius:14px;animation:sm-rise .6s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .word{display:flex;flex-direction:column;gap:6px;font-family:var(--sm-word);font-weight:300;" +
+    "font-size:36px;letter-spacing:.6em;text-align:center;animation:sm-rise .6s .06s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .word b{font-weight:300;}" +
+    ".sm-veil .word .top{animation:sm-drift-a 18s ease-in-out infinite;}" +
+    ".sm-veil .word .bot{margin-left:.3em;animation:sm-drift-b 18s ease-in-out infinite;}" +
+    ".sm-veil .status{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;animation:sm-rise .6s .12s cubic-bezier(.2,.7,.2,1) both;}" +
+    ".sm-veil .status svg{width:24px;height:24px;color:var(--sm-success);}" +
+    ".sm-veil .sub{color:var(--sm-dim);font-size:13.5px;animation:sm-rise .6s .18s cubic-bezier(.2,.7,.2,1) both;}" +
+    /* hover box */
+    ".sm-hover{position:fixed;z-index:2147483450;pointer-events:none;border-radius:5px;border:2px solid var(--sm-accent);" +
+    "box-shadow:0 0 0 1px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.28);opacity:0;" +
+    "transition:left .07s ease,top .07s ease,width .07s ease,height .07s ease,opacity .12s ease;}" +
+    /* sidebar */
+    "@keyframes sm-side-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}" +
+    ".sm-side{position:fixed;top:74px;right:14px;bottom:14px;width:288px;z-index:2147483520;display:flex;flex-direction:column;" +
+    "background:rgba(18,18,20,.93);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);border:1px solid var(--sm-border);" +
+    "border-radius:14px;box-shadow:0 18px 54px rgba(0,0,0,.5);font-family:var(--sm-font);color:var(--sm-fg);overflow:hidden;" +
+    "animation:sm-side-in .28s cubic-bezier(.2,.7,.2,1);}" +
+    ".sm-side-head{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--sm-border);font-weight:600;font-size:13px;}" +
+    ".sm-side-head svg{width:15px;height:15px;color:var(--sm-accent);}" +
+    ".sm-side-head .n{margin-left:auto;color:var(--sm-dim);font-weight:500;font-variant-numeric:tabular-nums;}" +
+    ".sm-side-body{flex:1;overflow-y:auto;padding:8px 8px 12px;}" +
+    ".sm-side-grp{margin-top:9px;}.sm-side-grp:first-child{margin-top:2px;}" +
+    ".sm-side-grp-h{font-size:11px;font-weight:600;color:var(--sm-dim);padding:6px 8px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}" +
+    ".sm-side-sub{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sm-dim);padding:7px 8px 2px;}" +
+    ".sm-side-row{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:background .12s;}" +
+    ".sm-side-row:hover{background:rgba(255,255,255,.05);}" +
+    ".sm-side-chip{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;" +
+    "font-size:10px;font-weight:600;margin-top:1px;background:#161618;color:#fff;border:1.5px solid rgba(255,255,255,.85);}" +
+    ".sm-side-chip.ghost{background:rgba(20,20,22,.6);color:#a1a1aa;border:1.5px dashed #71717a;}" +
+    ".sm-side-txt{font-size:12.5px;line-height:1.4;color:#e4e4e7;word-break:break-word;}" +
+    ".sm-side-loc{font-size:10.5px;color:var(--sm-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px;word-break:break-all;}";
+
+  // ---------- helpers ----------
+  function stemOf(jsxPath) {
+    if (!jsxPath) return null;
+    return String(jsxPath).split("/").pop().replace(/\.jsx$/, "");
+  }
+  function clamp01(n) {
+    return n < 0 ? 0 : n > 1 ? 1 : n;
+  }
+  function genId() {
+    return "c" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+  }
+  function stage() {
+    return document.querySelector(STAGE_SEL);
+  }
+  function activeComments() {
+    return commentsBySlide[currentStem] || [];
+  }
+  function totalComments() {
+    var n = 0;
+    Object.keys(commentsBySlide).forEach(function (k) {
+      n += commentsBySlide[k].length;
+    });
+    return n;
+  }
+  function el(tag, cls, html) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html != null) e.innerHTML = html;
+    return e;
+  }
+  function wordmarkHtml() {
+    return '<b class="top">slide</b><b class="bot">mind</b>';
+  }
+  // A logo mark. Genuine path: the add-in's per-brand orb PNG (CFG.logoMark),
+  // shipped on the bundle and shown verbatim. Fallback (no PNG materialized
+  // yet): a plain embossed slide glyph — no CLI-side orb re-creation.
+  function logoNode(cls, idSuffix) {
+    var box = el("div", cls);
+    if (CFG.logoMark) {
+      var img = el("img", "sm-logo-img");
+      img.src = CFG.logoMark;
+      img.alt = "slidemind";
+      box.appendChild(img);
+      return box;
+    }
+    box.appendChild(el("div", "sm-logo-svg", idSuffix ? logoWithIds(idSuffix) : LOGO_SVG));
+    return box;
+  }
+  function mkButton(label, variant, iconName) {
+    var b = el("button", "sm-btn sm-btn-" + variant);
+    b.innerHTML = (iconName ? ICONS[iconName] : "") + "<span>" + label + "</span>";
+    return b;
+  }
+  function mkButton(label, variant, iconName) {
+    var b = el("button", "sm-btn sm-btn-" + variant);
+    b.innerHTML = (iconName ? ICONS[iconName] : "") + "<span>" + label + "</span>";
+    return b;
+  }
+
+  // Build the resolvedTarget HitRegion + ancestor locs for an element, in the
+  // same shape the add-in's preview-review uses, so the harness-side formatter
+  // ports verbatim.
+  function describeTarget(elx) {
+    var st = stage();
+    if (!elx || !st) return { region: null, ancestors: [] };
+    var sr = st.getBoundingClientRect();
+    var r = elx.getBoundingClientRect();
+    var cls =
+      typeof elx.className === "string"
+        ? elx.className
+        : elx.getAttribute("class") || "";
+    var depth = 0;
+    for (var q = elx.parentElement; q && q !== st; q = q.parentElement) depth++;
+    var ancestors = [];
+    for (var p = elx.parentElement; p && p !== st; p = p.parentElement) {
+      var aloc = p.getAttribute && p.getAttribute("data-sm-loc");
+      if (aloc) ancestors.push(aloc);
+    }
+    return {
+      region: {
+        loc: elx.getAttribute("data-sm-loc"),
+        tag: elx.tagName.toLowerCase(),
+        className: cls,
+        textSnippet: (elx.textContent || "").replace(/\s+/g, " ").trim().slice(0, 80),
+        bbox: {
+          x: (r.left - sr.left) / sr.width,
+          y: (r.top - sr.top) / sr.height,
+          w: r.width / sr.width,
+          h: r.height / sr.height,
+        },
+        depth: depth,
+      },
+      ancestors: ancestors,
+    };
+  }
+
+  // ---------- chrome (top bar) ----------
+  var bar, sendBtn, countLabel;
+  function buildChrome() {
+    bar = el("div", "sm-o sm-bar");
+    bar.setAttribute("data-sm-overlay", "1");
+
+    var brand = el("div", "sm-brand");
+    brand.appendChild(logoNode("sm-logo"));
+    brand.appendChild(el("div", "sm-word", wordmarkHtml()));
+    bar.appendChild(brand);
+    bar.appendChild(el("div", "sm-sep"));
+
+    var meta = el("div", "sm-meta");
+    meta.appendChild(el("div", "t", "Review"));
+    meta.appendChild(el("div", "h", "Click any element to comment · ← → to switch slide"));
+    bar.appendChild(meta);
+
+    bar.appendChild(el("div", "sm-grow"));
+
+    countLabel = el("div", "sm-count");
+    bar.appendChild(countLabel);
+
+    sendBtn = mkButton("Send comments", "ghost", "message");
+    sendBtn.onclick = function () {
+      if (totalComments() === 0) return;
+      submit("comments");
+    };
+    bar.appendChild(sendBtn);
+
+    var approveBtn = mkButton("Approve & continue", "primary", "check");
+    approveBtn.onclick = function () {
+      submit("approve");
+    };
+    bar.appendChild(approveBtn);
+
+    document.body.appendChild(bar);
+    refreshChrome();
+  }
+  function refreshChrome() {
+    var n = totalComments();
+    countLabel.textContent = n === 0 ? "no comments yet" : n + (n === 1 ? " comment" : " comments");
+    sendBtn.querySelector("span").textContent =
+      n > 0 ? "Send " + n + " comment" + (n === 1 ? "" : "s") : "Send comments";
+    sendBtn.classList.toggle("is-off", n === 0);
+  }
+
+  // ---------- hover box (mirrors the add-in's hit-region-overlay) ----------
+  function buildHoverBox() {
+    hoverBox = el("div", "sm-o sm-hover");
+    hoverBox.setAttribute("data-sm-overlay", "1");
+    hoverBox.style.borderColor = ACCENT;
+    hoverBox.style.background = rgbaFrom(ACCENT, 0.1);
+    document.body.appendChild(hoverBox);
+  }
+  function placeHoverBox(rect) {
+    if (!hoverBox) return;
+    hoverBox.style.left = rect.left + "px";
+    hoverBox.style.top = rect.top + "px";
+    hoverBox.style.width = rect.width + "px";
+    hoverBox.style.height = rect.height + "px";
+    hoverBox.style.opacity = "1";
+  }
+  function hideHoverBox() {
+    if (hoverBox) hoverBox.style.opacity = "0";
+  }
+  // Pin the box to a normalized bbox (used while a popover is anchored).
+  function lockHoverBoxToBbox(bbox) {
+    locked = true;
+    if (!bbox) {
+      hideHoverBox();
+      return;
+    }
+    var sr = stage().getBoundingClientRect();
+    placeHoverBox({
+      left: sr.left + bbox.x * sr.width,
+      top: sr.top + bbox.y * sr.height,
+      width: bbox.w * sr.width,
+      height: bbox.h * sr.height,
+    });
+  }
+  // Translucent fill from a hex accent; falls back to a CSS var for non-hex.
+  function rgbaFrom(hex, a) {
+    var m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex || "");
+    if (!m) return "rgba(169,194,255," + a + ")";
+    return (
+      "rgba(" + parseInt(m[1], 16) + "," + parseInt(m[2], 16) + "," + parseInt(m[3], 16) + "," + a + ")"
+    );
+  }
+
+  // ---------- stage fit (take over build's fit so the sidebar + header don't
+  // cover the slide; pins/hover read live rects so they stay aligned) ----------
+  function applyStageFit() {
+    var st = stage();
+    if (!st) return;
+    var reserve = sidebarOpen ? SIDEBAR_W : 0;
+    var availW = window.innerWidth - reserve;
+    var availH = window.innerHeight - HEADER_H - 8;
+    var s = Math.min(availW / 1280, availH / 720) * 0.94;
+    var offX = -reserve / 2;
+    var offY = HEADER_H / 2;
+    st.style.transform = "translate(" + offX + "px," + offY + "px) scale(" + s + ")";
+    renderPins();
+  }
+
+  // ---------- sidebar (the add-in's comment list) ----------
+  function commentScreenPoint(c) {
+    var sr = stage().getBoundingClientRect();
+    return {
+      x: sr.left + clamp01(c.point.x) * sr.width,
+      y: sr.top + clamp01(c.point.y) * sr.height,
+    };
+  }
+  function openCommentAt(c, ghost) {
+    var p = commentScreenPoint(c);
+    if (ghost) openGhost(c, p.x, p.y);
+    else openEditor(c, p.x, p.y);
+  }
+  function sideRow(stem, c, num, ghost) {
+    var r = el("div", "sm-side-row");
+    var chip = el("div", "sm-side-chip" + (ghost ? " ghost" : ""));
+    chip.textContent = String(num);
+    var txt = el("div");
+    txt.appendChild(el("div", "sm-side-txt", "")).textContent = c.comment;
+    var locStr = c.resolvedTarget && c.resolvedTarget.loc ? c.resolvedTarget.loc : "slide-level note";
+    txt.appendChild(el("div", "sm-side-loc", "")).textContent = locStr;
+    r.appendChild(chip);
+    r.appendChild(txt);
+    r.onclick = function () {
+      goToStem(stem);
+      openCommentAt(c, ghost);
+    };
+    return r;
+  }
+  function updateSidebar() {
+    var show = totalComments() > 0;
+    if (!show) {
+      if (sidebarEl) {
+        sidebarEl.remove();
+        sidebarEl = null;
+        sidebarOpen = false;
+        applyStageFit();
+      }
+      return;
+    }
+    if (!sidebarEl) {
+      sidebarEl = el("div", "sm-o sm-side");
+      sidebarEl.setAttribute("data-sm-overlay", "1");
+      document.body.appendChild(sidebarEl);
+      sidebarOpen = true;
+      applyStageFit();
+    }
+    sidebarEl.innerHTML = "";
+    var n = totalComments();
+    var head = el(
+      "div",
+      "sm-side-head",
+      ICONS.message + "<span>Comments</span><span class=\"n\">" + n + "</span>",
+    );
+    var body = el("div", "sm-side-body");
+    var stems = slideOrder.length
+      ? slideOrder
+      : Object.keys(commentsBySlide); // fallback if order unknown
+    stems.forEach(function (stem) {
+      var act = commentsBySlide[stem] || [];
+      var gh = previousBySlide[stem] || [];
+      if (!act.length && !gh.length) return;
+      var grp = el("div", "sm-side-grp");
+      grp.appendChild(el("div", "sm-side-grp-h", "")).textContent = stem;
+      act.forEach(function (c, i) {
+        grp.appendChild(sideRow(stem, c, i + 1, false));
+      });
+      if (gh.length) {
+        grp.appendChild(el("div", "sm-side-sub", "Previous round"));
+        gh.forEach(function (c, i) {
+          grp.appendChild(sideRow(stem, c, i + 1, true));
+        });
+      }
+      body.appendChild(grp);
+    });
+    sidebarEl.appendChild(head);
+    sidebarEl.appendChild(body);
+  }
+
+  // Jump the deck to a slide by synthesising its arrow-key navigation.
+  function goToStem(stem) {
+    var target = slideOrder.indexOf(stem);
+    if (target < 0) return;
+    var nav = document.getElementById("nav");
+    var m = (nav && nav.textContent || "").match(/(\d+)\s*\/\s*\d+/);
+    var cur = m ? parseInt(m[1], 10) - 1 : 0;
+    var diff = target - cur;
+    var key = diff > 0 ? "ArrowRight" : "ArrowLeft";
+    for (var i = 0; i < Math.abs(diff); i++) {
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: key, bubbles: true }));
+    }
+    syncSlideFromNav(); // deck render is synchronous; pick up the new stem now
+  }
+
+  // ---------- pins ----------
+  var pinLayer;
+  function buildPinLayer() {
+    pinLayer = el("div", "sm-o sm-pinlayer");
+    pinLayer.setAttribute("data-sm-overlay", "1");
+    document.body.appendChild(pinLayer);
+  }
+  function renderPins() {
+    if (!pinLayer) return;
+    pinLayer.innerHTML = "";
+    var st = stage();
+    if (!st) return;
+    var sr = st.getBoundingClientRect();
+    (previousBySlide[currentStem] || []).forEach(function (c, i) {
+      pinLayer.appendChild(makePin(c, sr, i + 1, true));
+    });
+    activeComments().forEach(function (c, i) {
+      pinLayer.appendChild(makePin(c, sr, i + 1, false));
+    });
+  }
+  function makePin(c, sr, num, ghost) {
+    var pin = el("button", "sm-pin " + (ghost ? "sm-pin-ghost" : "sm-pin-active"));
+    pin.setAttribute("data-sm-overlay", "1");
+    pin.textContent = String(num);
+    pin.title = c.comment || "";
+    pin.style.left = sr.left + clamp01(c.point.x) * sr.width + "px";
+    pin.style.top = sr.top + clamp01(c.point.y) * sr.height + "px";
+    pin.onclick = function (e) {
+      e.stopPropagation();
+      var px = sr.left + clamp01(c.point.x) * sr.width;
+      var py = sr.top + clamp01(c.point.y) * sr.height;
+      if (ghost) openGhost(c, px, py);
+      else openEditor(c, px, py);
+    };
+    return pin;
+  }
+
+  // ---------- popover ----------
+  function closePopover() {
+    if (draftPopover && draftPopover.parentNode) {
+      draftPopover.parentNode.removeChild(draftPopover);
+    }
+    draftPopover = null;
+    locked = false;
+    hideHoverBox();
+  }
+  function makePopover(px, py) {
+    closePopover();
+    var pop = el("div", "sm-o sm-pop");
+    pop.setAttribute("data-sm-overlay", "1");
+    var left = Math.min(px + 14, window.innerWidth - 288);
+    var top = Math.min(Math.max(py - 10, 72), window.innerHeight - 170);
+    pop.style.left = Math.max(8, left) + "px";
+    pop.style.top = top + "px";
+    pop.addEventListener("keydown", function (e) {
+      e.stopPropagation(); // don't let arrows/space drive slide nav while typing
+    });
+    draftPopover = pop;
+    document.body.appendChild(pop);
+    return pop;
+  }
+  function head(text, isElement) {
+    return el(
+      "div",
+      "sm-pop-head",
+      ICONS.pin + '<span class="' + (isElement ? "mono" : "") + '">' + text + "</span>",
+    );
+  }
+  function targetLabel(region) {
+    if (!region) return "Slide-level note";
+    var cls = region.className ? "." + region.className.split(/\s+/)[0] : "";
+    return "<" + region.tag + cls + ">";
+  }
+  function bindTextareaKeys(ta, onSave) {
+    ta.addEventListener("keydown", function (e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") onSave();
+      if (e.key === "Escape") closePopover();
+    });
+  }
+
+  function openDraft(point, region, ancestors, px, py) {
+    var pop = makePopover(px, py);
+    pop.appendChild(head(targetLabel(region), !!region));
+    var ta = el("textarea", "sm-ta");
+    ta.placeholder = "What should change here?";
+    var row = el("div", "sm-row end");
+    var cancel = mkButton("Cancel", "ghost", "close");
+    cancel.onclick = closePopover;
+    var save = mkButton("Add comment", "primary", "check");
+    function doSave() {
+      var text = ta.value.trim();
+      if (!text) return;
+      (commentsBySlide[currentStem] = commentsBySlide[currentStem] || []).push({
+        id: genId(),
+        jsxPath: "slides/" + currentStem + ".jsx",
+        point: point,
+        resolvedTarget: region,
+        ancestors: ancestors,
+        comment: text,
+      });
+      closePopover();
+      renderPins();
+      refreshChrome();
+      updateSidebar();
+    }
+    save.onclick = doSave;
+    pop.appendChild(ta);
+    pop.appendChild(row);
+    row.appendChild(cancel);
+    row.appendChild(save);
+    lockHoverBoxToBbox(region && region.bbox);
+    ta.focus();
+    bindTextareaKeys(ta, doSave);
+  }
+
+  function openEditor(comment, px, py) {
+    var pop = makePopover(px, py);
+    pop.appendChild(head(targetLabel(comment.resolvedTarget), !!comment.resolvedTarget));
+    var ta = el("textarea", "sm-ta");
+    ta.value = comment.comment;
+    var row = el("div", "sm-row split");
+    var del = mkButton("Delete", "danger", "trash");
+    function doDelete() {
+      var list = commentsBySlide[currentStem] || [];
+      var idx = list.indexOf(comment);
+      if (idx >= 0) list.splice(idx, 1);
+      closePopover();
+      renderPins();
+      refreshChrome();
+      updateSidebar();
+    }
+    del.onclick = doDelete;
+    var save = mkButton("Save", "primary", "check");
+    function doSave() {
+      var text = ta.value.trim();
+      if (!text) return doDelete();
+      comment.comment = text;
+      closePopover();
+      renderPins();
+      updateSidebar();
+    }
+    save.onclick = doSave;
+    pop.appendChild(ta);
+    pop.appendChild(row);
+    row.appendChild(del);
+    row.appendChild(save);
+    lockHoverBoxToBbox(comment.resolvedTarget && comment.resolvedTarget.bbox);
+    ta.focus();
+    bindTextareaKeys(ta, doSave);
+  }
+
+  function openGhost(comment, px, py) {
+    var pop = makePopover(px, py);
+    pop.appendChild(
+      head("Previous round · " + targetLabel(comment.resolvedTarget), !!comment.resolvedTarget),
+    );
+    pop.appendChild(el("div", "sm-ghost-body", "")).textContent = comment.comment;
+    lockHoverBoxToBbox(comment.resolvedTarget && comment.resolvedTarget.bbox);
+  }
+
+  // ---------- submit ----------
+  function submit(decision) {
+    if (submitted) return;
+    submitted = true;
+    var comments = [];
+    Object.keys(commentsBySlide).forEach(function (stem) {
+      commentsBySlide[stem].forEach(function (c) {
+        comments.push(c);
+      });
+    });
+    fetch(CFG.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        decision: decision,
+        comments: decision === "comments" ? comments : [],
+      }),
+    })
+      .then(function () {
+        showDone(decision);
+      })
+      .catch(function () {
+        submitted = false;
+        alert("Could not reach the slidemind review server — is the terminal command still running?");
+      });
+  }
+  function showDone(decision) {
+    closePopover();
+    if (pinLayer) pinLayer.style.display = "none";
+    if (bar) bar.style.display = "none";
+    var veil = el("div", "sm-o sm-veil");
+    veil.setAttribute("data-sm-overlay", "1");
+    veil.appendChild(logoNode("sm-logo", "-v"));
+    veil.appendChild(el("div", "word", wordmarkHtml()));
+    veil.appendChild(
+      el(
+        "div",
+        "status",
+        ICONS.check + "<span>" + (decision === "approve" ? "Approved" : "Comments sent") + "</span>",
+      ),
+    );
+    veil.appendChild(el("div", "sub", "Returned to your terminal — you can close this tab."));
+    document.body.appendChild(veil);
+  }
+
+  // ---------- slide tracking ----------
+  function syncSlideFromNav() {
+    var nav = document.getElementById("nav");
+    if (!nav) return;
+    var m = (nav.textContent || "").match(/\d+\s*\/\s*\d+\s+·\s+(\S+)/);
+    var stem = m ? m[1] : null;
+    if (stem && stem !== currentStem) {
+      currentStem = stem;
+      closePopover();
+      renderPins();
+    }
+  }
+
+  // ---------- wire up ----------
+  function injectAssets() {
+    var style = el("style");
+    style.id = "sm-review-style";
+    style.textContent = CSS;
+    document.head.appendChild(style);
+
+    var pre1 = el("link");
+    pre1.rel = "preconnect";
+    pre1.href = "https://fonts.googleapis.com";
+    var pre2 = el("link");
+    pre2.rel = "preconnect";
+    pre2.href = "https://fonts.gstatic.com";
+    pre2.crossOrigin = "anonymous";
+    var fonts = el("link");
+    fonts.rel = "stylesheet";
+    fonts.href =
+      "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Urbanist:wght@300;400&display=swap";
+    document.head.appendChild(pre1);
+    document.head.appendChild(pre2);
+    document.head.appendChild(fonts);
+  }
+
+  function init() {
+    var st = stage();
+    if (!st) {
+      setTimeout(init, 50);
+      return;
+    }
+    injectAssets();
+    st.style.cursor = "crosshair";
+    // Slide play order, for the sidebar's jump-to-slide.
+    document.querySelectorAll('script[data-kind="slide"]').forEach(function (s) {
+      slideOrder[parseInt(s.dataset.index, 10)] = s.dataset.name;
+    });
+    buildChrome();
+    buildPinLayer();
+    buildHoverBox();
+
+    st.addEventListener("click", function (e) {
+      if (submitted) return;
+      if (e.target.closest("[data-sm-overlay]")) return;
+      var sr = st.getBoundingClientRect();
+      var x = (e.clientX - sr.left) / sr.width;
+      var y = (e.clientY - sr.top) / sr.height;
+      if (x < 0 || x > 1 || y < 0 || y > 1) return;
+      var hit = e.target.closest("[data-sm-loc]");
+      var desc = describeTarget(hit);
+      openDraft({ x: clamp01(x), y: clamp01(y) }, desc.region, desc.ancestors, e.clientX, e.clientY);
+    });
+
+    // Hover-box: outline the element under the cursor (the add-in's affordance).
+    st.addEventListener("pointermove", function (e) {
+      if (submitted || locked) return;
+      if (e.target.closest("[data-sm-overlay]")) {
+        hideHoverBox();
+        return;
+      }
+      var hit = e.target.closest("[data-sm-loc]");
+      if (hit && hit !== st) placeHoverBox(hit.getBoundingClientRect());
+      else hideHoverBox();
+    });
+    st.addEventListener("pointerleave", function () {
+      if (!locked) hideHoverBox();
+    });
+
+    window.addEventListener("resize", function () {
+      closePopover();
+      applyStageFit();
+    });
+
+    var nav = document.getElementById("nav");
+    if (nav) {
+      new MutationObserver(syncSlideFromNav).observe(nav, {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      });
+    }
+    syncSlideFromNav();
+    applyStageFit();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();