pindeck 3.4.0 → 4.0.0-beta.1

package/lib/review.mjs

@@ -0,0 +1,200 @@
+/* Review comments (after Sebastian J. Schlecht's review mode for PinDeck).
+
+   A comment is a note on a slide or one of its elements, kept for later instead of sent to the assistant now.
+   Comments live in <deck folder>/.pindeck/<deck>.review.json: a dot folder, so they are never deck files, never
+   part of an undo and never edited by the assistant. Each comment keeps what it needs to be found again after
+   the deck changes: the slide's id attribute (Quarto's heading anchor), title and position, and the element's
+   id, tag and text. A comment whose slide or element cannot be found again is flagged, never silently moved.
+   Next to the comments, <deck>.review.md is the review packet: the open comments, for an agent outside PinDeck. */
+
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+import { assignEids, parse, findSlides, walk, textOf } from "./eids.mjs";
+import { writeAtomic } from "./deck-files.mjs";
+
+const norm = (s) => String(s ?? "").replace(/\s+/g, " ").trim();
+const classes = (n) => (n.attrs?.class?.value || "").split(/\s+/).filter(Boolean);
+const tagOf = (n) => [n.name, ...classes(n)].join(".");
+
+/* The deck as comments see it: per slide, its id attribute, title, position in the stacks and its elements by
+   id. Ids are assigned in memory (a deck PinDeck has opened has them already; a rendered Quarto deck gets them
+   again after each render). */
+export function indexDeck(html) {
+  const withIds = assignEids(html).html;
+  const tree = parse(withIds);
+  const slides = findSlides(tree).map((sec, index) => {
+    const stacked = sec.parent?.name === "section";
+    const top = stacked ? sec.parent : sec;
+    const siblings = (n) => (n.parent?.children || []).filter((c) => c.name === sec.name);
+    let head = null;
+    walk(sec, (c) => { if (head) return false; if (/^h[1-3]$/.test(c.name)) { head = c; return false; } });
+    const elements = new Map();
+    walk(sec, (c) => {
+      if (c.name === "section" || (c.name === "aside" && classes(c).includes("notes"))) return false;
+      const eid = c.attrs?.["data-eid"]?.value;
+      if (!eid) return;
+      let fragment = false;
+      for (let p = c; p && p !== sec; p = p.parent) if (classes(p).includes("fragment")) fragment = true;
+      const src = c.name === "img" ? (c.attrs["data-src"] || c.attrs.src)?.value : null;
+      elements.set(eid, { eid, tag: tagOf(c), text: norm(src || textOf(withIds, c)), fragment });
+    });
+    return {
+      index, eid: sec.attrs["data-eid"]?.value, id: sec.attrs.id?.value || null,
+      title: head ? norm(textOf(withIds, head)) : "",
+      h: siblings(top).indexOf(top), v: stacked ? siblings(sec).indexOf(sec) : 0, elements,
+    };
+  });
+  return { html: withIds, slides };
+}
+
+/* A new comment from a pin placed in the editor (bridge.js onClick), or from the slide as a whole (pin null,
+   slide { index, eid }). */
+export function commentFromPin(deck, { pin, slide: whole }, text) {
+  const ref = pin ? pin.slide : whole;
+  const slide = deck.slides[ref?.index];
+  if (!slide || slide.eid !== ref.eid) throw new Error("The slide has changed since the pin was placed. Pin it again.");
+  const onSlide = !pin || pin.eid === slide.eid;
+  const el = onSlide ? null : slide.elements.get(pin.eid);
+  if (!onSlide && !el) throw new Error("Element not found in the deck. Pin it again.");
+  const r = (v) => Math.round(v * 1e4) / 1e4;
+  const now = new Date().toISOString();
+  return {
+    id: "c-" + crypto.randomBytes(4).toString("hex"), created: now, updated: now, status: "open", text: String(text).trim(),
+    slide: { id: slide.id, eid: slide.eid, title: slide.title, h: slide.h, v: slide.v },
+    target: el ? { eid: el.eid, tag: el.tag, text: el.text, fragment: el.fragment, word: pin.word || null, cell: pin.cell || null }
+      : { eid: null, tag: "section", text: "", fragment: false, word: null, cell: null },
+    // where the marker sits: on the slide (px), and inside its element (0..1 of its box)
+    point: pin?.point ? { x: r(pin.point.x), y: r(pin.point.y) } : null,
+    at: pin?.at ? { fx: r(pin.at.fx), fy: r(pin.at.fy) } : null,
+  };
+}
+
+/* Where a stored comment is in the deck as it is now.
+   status: ok        same slide, same element, same text
+           moved     the element's text was found elsewhere on the slide (ids can be positional)
+           changed   the element is there but its text differs: possibly already addressed
+           missing   the slide is there, the element is not
+           no-slide  neither the slide's id nor its title exists any more
+   Only "ok" and "moved" place the marker on the element; the others at the stored point on the slide (if any). */
+export function locate(deck, c) {
+  // shortcut: repeated titles resolve to the first; add an h/v tiebreak if decks repeat titles without ids
+  const slide = (c.slide.id && deck.slides.find((s) => s.id === c.slide.id)) ||
+    (c.slide.eid && deck.slides.find((s) => s.eid === c.slide.eid && (!c.slide.title || s.title === c.slide.title))) ||
+    (c.slide.title && deck.slides.find((s) => s.title === c.slide.title));
+  if (!slide) return { status: "no-slide", slide: null, eid: null };
+  const t = c.target;
+  if (!t.eid) return { status: "ok", slide, eid: null };
+  const els = [...slide.elements.values()];
+  const same = slide.elements.get(t.eid);
+  if (same && same.tag === t.tag && same.text === t.text) return { status: "ok", slide, eid: same.eid };
+  const moved = t.text && (els.find((e) => e.tag === t.tag && e.text === t.text) || els.find((e) => e.text === t.text));
+  if (moved) return { status: "moved", slide, eid: moved.eid };
+  if (same && same.tag === t.tag) return { status: "changed", slide, eid: null, now: same.text };
+  return { status: "missing", slide, eid: null };
+}
+export const matched = (status) => status === "ok" || status === "moved";
+
+/* ---- The comments file ------------------------------------------------------------------------ */
+export function reviewFiles(deckDir, deckFile) {
+  const base = path.join(deckDir, ".pindeck", deckFile.replace(/\.html?$/i, ""));
+  return { json: base + ".review.json", packet: base + ".review.md" };
+}
+export function loadReview(file) {
+  try {
+    const r = JSON.parse(fs.readFileSync(file, "utf8"));
+    if (!r || !Array.isArray(r.comments)) throw new Error(`${file} is not a PinDeck comments file.`);
+    // edited by hand or by another agent: a comment without what locate() needs would crash the server later
+    const bad = r.comments.findIndex((c) => typeof c?.id !== "string" || typeof c.text !== "string" || !c.slide || typeof c.slide !== "object" || !c.target || typeof c.target !== "object");
+    if (bad >= 0) throw new Error(`comment ${bad + 1} lacks its id, text, slide or target`);
+    const badReplies = r.comments.findIndex((c) => c.replies != null && !(Array.isArray(c.replies) && c.replies.every((x) => typeof x?.text === "string")));
+    if (badReplies >= 0) throw new Error(`comment ${badReplies + 1} has replies that are not a list of { by, text }`);
+    return r;
+  } catch (e) { if (e.code === "ENOENT") return { pindeckReview: 1, deck: {}, comments: [] }; throw e; }
+}
+export function saveReview(file, review) {
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  writeAtomic(file, JSON.stringify(review, null, 2) + "\n");   // a crash never leaves half a file
+}
+
+/* ---- The review packet ------------------------------------------------------------------------------ */
+const pandocId = (s) => norm(s.replace(/\{[^}]*\}\s*$/, "")).toLowerCase()
+  .replace(/[^\p{L}\p{N}\s_.-]/gu, "").replace(/^[^\p{L}]+/u, "").replace(/\s+/g, "-");
+
+/* 1-based line of the slide's heading in a Quarto/Markdown source, or null. */
+export function sourceLine(srcLines, slide) {
+  if (!srcLines || !slide) return null;
+  const i = srcLines.findIndex((l) => {
+    const m = /^#{1,3}\s+(.*)$/.exec(l);
+    if (!m) return false;
+    const explicit = /\{[^}]*#([\w:.-]+)/.exec(m[1]);
+    return explicit ? explicit[1] === slide.id : pandocId(m[1]) === slide.id || norm(m[1]) === slide.title;
+  });
+  return i < 0 ? null : i + 1;
+}
+
+const STATUS = {
+  ok: "ok", moved: "ok (element found again by its text)",
+  changed: "UNMATCHED: the element's text has changed since the comment (maybe already addressed)",
+  missing: "UNMATCHED: the element is no longer on this slide",
+  "no-slide": "UNMATCHED: the slide is no longer in the deck",
+};
+const clip = (s, n = 240) => (s.length > n ? s.slice(0, n - 1) + "…" : s);
+const slideName = (s) => `slide ${s.h + 1}${s.v ? "." + s.v : ""} “${s.title || "(untitled)"}”`;
+
+/* The open comments in deck order, each with where it is now and its number in the editor's list (C1, C2, …) */
+export function openComments(review, deck) {
+  const n = new Map(review.comments.map((c, i) => [c.id, i + 1]));
+  const key = (x) => (x.loc.slide ? x.loc.slide.index : 1e6) * 1e5 + (x.c.point?.y ?? 0);
+  return review.comments.filter((c) => c.status !== "resolved").map((c) => ({ c, n: n.get(c.id), loc: locate(deck, c) }))
+    .sort((a, b) => key(a) - key(b));
+}
+const who = (by) => (by === "you" ? "Reviewer" : by === "assistant" ? "Assistant" : by ? `${by[0].toUpperCase()}${by.slice(1)}` : "Agent");
+function items(list, lines) {
+  return list.flatMap(({ c, n, loc }) => {
+    const s = loc.slide, t = c.target;
+    const line = sourceLine(lines, s || { id: c.slide.id, title: c.slide.title });
+    return [`## C${n}. ${s ? slideName(s) : "was " + slideName(c.slide)}`, "",
+      `> ${c.text.replace(/\n/g, "\n> ")}`, "",
+      `- Slide: ${c.slide.id ? `\`#${c.slide.id}\`` : `\`${s?.eid || c.slide.eid}\``}${line ? `, source line ${line}` : ""} — ${STATUS[loc.status]}`,
+      t.eid ? `- Element: \`${t.tag}\`${matched(loc.status) ? ` (data-eid \`${loc.eid}\`)` : ""}${t.fragment ? ", a build step" : ""}: “${clip(t.text)}”`
+        : "- Element: the slide as a whole",
+      ...(t.word ? [`- Clicked word: “${t.word}”`] : []),
+      ...(t.cell ? [`- Table cell: row ${t.cell.row + 1}, column ${t.cell.col + 1}: “${clip(t.cell.text || "", 80)}”`] : []),
+      ...(loc.status === "changed" ? [`- Text now: “${clip(loc.now)}”`] : []),
+      ...(c.replies?.length ? ["- Thread, oldest first:", ...c.replies.map((r) => `  - ${who(r.by)}: ${r.text.replace(/\n/g, " ")}`)] : []),
+      `- Comment id: \`${c.id}\``, ""];
+  });
+}
+
+/* For an agent outside PinDeck (Claude Code in an editor, say): written next to the comments file */
+export function packet(review, deck, { deckFile = "the deck", source = null, srcText = null, commentsFile = "?" } = {}) {
+  const open = openComments(review, deck);
+  const stale = open.filter((x) => !matched(x.loc.status));
+  const resolved = review.comments.length - open.length;
+  return [
+    `# Slide review: ${deckFile}`, "",
+    `- Deck: \`${deckFile}\`${source ? `, source \`${source}\`` : ""}`,
+    `- Comments: \`${commentsFile}\``,
+    `- ${open.length} open comment(s), ${stale.length} unmatched; ${resolved} resolved (not listed).`, "",
+    "These are reviewer comments on the slides. They are not speaker notes: do not copy them into the deck.",
+    source ? `Make each change in the source (\`${source}\`, its stylesheets or figure scripts), never in the rendered HTML, ` +
+      "which the next render overwrites. Render, then" : "Make each change, then",
+    "set the comment's `status` to `\"resolved\"` in the comments file. If you cannot do one, or it is unclear, leave it open",
+    "and add `{ \"by\": \"agent\", \"text\": \"<why>\" }` to its `replies` list, where the reviewer can answer. Read a comment's",
+    "thread before acting on it. UNMATCHED comments point at slides or text that changed after the comment was made:",
+    "check whether they still apply before acting on them.", "",
+    ...items(open, srcText?.split("\n")),
+  ].join("\n");
+}
+
+/* For PinDeck's own assistant: the open comments as one request, put in the message box for the user to send */
+export function request(review, deck, { source = null, srcText = null } = {}) {
+  const open = openComments(review, deck);
+  if (!open.length) return "";
+  return [`Please address these ${open.length} review comment(s), one by one. They are notes for you, not slide text or speaker notes.`,
+    "Mark each one you have addressed as resolved with PinDeck's resolve command and its comment id. If one is unclear or no",
+    "longer applies, leave it open and say why with PinDeck's reply command instead of guessing. Where a comment has a",
+    "thread, the reviewer's latest answer is what to act on.", "",
+    ...items(open, source ? srcText?.split("\n") : null)].join("\n").trim();
+}

package/lib/servers.mjs

@@ -2,7 +2,7 @@
    `pindeck login` and cli.mjs.
 
    Each PinDeck process (a front, a deck server on its own, or one behind a front) keeps a file of its own in
-   ~/.pindeck-v3/servers/<pid>.json (0600, in a 0700 folder) with its address and token. Several fronts and
+   ~/.pindeck-v4/servers/<pid>.json (0600, in a 0700 folder) with its address and token. Several fronts and
    servers can run side by side (another --port, another PINDECK_HOME user, a server started on its own) and
    none overwrites another's file; a file whose process is gone is removed when it is read. */
 

package/lib/system-prompt.md

@@ -81,6 +81,15 @@ overlapping elements, clipped text); add --issues to print only the issues. Fix
   {{CLI}} shot <slide-eid or number>...
 only when you need a visual judgement the numbers cannot give (balance, figure content, colour)
 or the user asks; it prints the path of a PNG, which you then Read.
+## Review comments
+The user can keep comments on slides (ids c-…, numbered C1, C2, … in the editor) and ask you to address them.
+They are notes for you, not slide text or speaker notes. When you have addressed one, mark it resolved:
+  {{CLI}} resolve <comment id> <one line on what you did>
+Leave a comment open when you could not do it, or it was unclear, and say why on the comment itself, where the
+user can answer you:
+  {{CLI}} reply <comment id> <why not, or what you need to know>
+A comment's thread (your replies and the user's) comes with it; read the user's latest answer before acting.
+
 If the user asks for a PDF, run `{{CLI}} pdf handout` (one page per slide, build steps complete) or
 `{{CLI}} pdf presentation` (one page per build step); it prints the path of the PDF.
 

package/lib/usage.mjs

@@ -1,15 +1,16 @@
 /* pindeck --help, and the hint after a bad argument: the front (front.mjs) and a deck server (server.mjs)
    take the same arguments. */
-export const USAGE = `Usage: pindeck [deck-folder | deck-file.html] [--port 5180] [--provider claude|codex] [--model <name>] [--asset-root <folder>]...
+export const USAGE = `Usage: pindeck [deck-folder | deck-file.html | quarto-deck.qmd] [--port 5180] [--provider claude|codex] [--model <name>] [--asset-root <folder>]...
        pindeck login [deck-folder | deck-file.html]
 
 Opens a reveal.js deck in PinDeck: a deck file such as talk.html, or a folder (default: the current
 folder), which then opens its index.html; a folder without one opens a list of its decks. A deck made
 otherwise names its slides in its <head> with <meta name="pindeck:slides" content="<CSS selector>"> and
-<meta name="pindeck:size" content="1440x1080">.
+<meta name="pindeck:size" content="1440x1080">. A Quarto deck (talk.qmd) is rendered by PinDeck, and the
+assistant edits its source.
 In the editor, the deck's name opens the other decks in the deck's folder and the asset roots (and one
 folder down), each with its own chat and undo, on the same port and login.
 login prints a new one-time login link for the running PinDeck (with a deck: one that opens that deck).
 --asset-root lets the deck use files outside its folder: a folder that contains the deck (paths such as
 ../shared/style.css then work), or one that symlinks in the deck may point to. Repeatable; also
-"assetRoots" in ~/.pindeck-v3/config.json.`;
+"assetRoots" in ~/.pindeck-v4/config.json.`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "3.4.0",
+  "version": "4.0.0-beta.1",
   "description": "PinDeck: an editor for HTML slide decks on macOS, and on Linux through an SSH tunnel. Pin elements, describe the change, and Claude Code or OpenAI Codex edits the slides.",
   "keywords": [
     "slides",
@@ -32,6 +32,9 @@
     "lib/",
     "public/",
     "README.md",
+    "CHANGELOG.md",
+    "docs/*.md",
+    "!docs/v4-plan.md",
     "LICENSE"
   ],
   "scripts": {

package/public/bridge.js

@@ -42,6 +42,9 @@
       background:#ED8C01; color:#fff; font:700 calc(14px*var(--pindeck-u,1))/calc(26px*var(--pindeck-u,1)) system-ui, sans-serif; text-align:center;
       box-shadow:0 0 0 calc(2px*var(--pindeck-u,1)) #fff, 0 calc(2px*var(--pindeck-u,1)) calc(6px*var(--pindeck-u,1)) rgba(0,0,0,.45);
       cursor:pointer; pointer-events:auto; }
+    .__pin.__comment { background:#1a73e8; border-radius:calc(6px*var(--pindeck-u,1)); width:auto; min-width:calc(26px*var(--pindeck-u,1));
+      padding:0 calc(5px*var(--pindeck-u,1)); }
+    .__pin.__stale { background:#8a8f98; }
     .__hover { position:absolute; z-index:999; pointer-events:none; outline:calc(2px*var(--pindeck-u,1)) dashed #ED8C01;
       outline-offset:calc(2px*var(--pindeck-u,1)); background:rgba(237,140,1,.06); }
     .__hover span { position:absolute; left:calc(-2px*var(--pindeck-u,1)); background:#ED8C01; color:#fff; white-space:nowrap;
@@ -102,19 +105,22 @@
   const byEid = (eid, root = document) => root.querySelector(`[data-eid="${CSS.escape(eid)}"]`);
 
   /* Visible text of an element, without KaTeX's hidden MathML copy. */
+  const MATH_TEX = 'script[type^="math/tex"]';   // MathJax 2 (Quarto) keeps the TeX here; its rendering is skipped
   function textOf(el, ownOnly) {
     if (el.tagName === "IMG") return el.getAttribute("alt") || (el.getAttribute("src") || "").split("/").pop();
     let out = "";
     const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
       acceptNode(n) {
         const p = n.parentElement;
-        if (!p || p.closest(".katex-mathml, .__pin, .__hover, .__flash, .__sel, .__guide, .__edit-hint, .__hidden-banner, aside.notes, script, style")) return NodeFilter.FILTER_REJECT;
+        if (p?.matches(MATH_TEX)) return NodeFilter.FILTER_ACCEPT;
+        if (!p || p.closest(".katex-mathml, .MathJax, .MathJax_Display, .MathJax_Preview, .MathJax_CHTML, .MathJax_SVG, mjx-container, .__pin, .__hover, .__flash, .__sel, .__guide, .__edit-hint, .__hidden-banner, aside.notes, script, style")) return NodeFilter.FILTER_REJECT;
         if (ownOnly) { const owner = p.closest("[data-eid]"); if (owner !== el) return NodeFilter.FILTER_REJECT; }
         return NodeFilter.FILTER_ACCEPT;
       },
     });
     while (walker.nextNode()) {
       const n = walker.currentNode;
+      if (n.parentElement.matches(MATH_TEX)) { out += `\\(${n.nodeValue.trim()}\\) `; continue; }
       out += n.nodeValue + (n.parentElement.closest(".katex") ? "" : " "); // KaTeX splits math into one span per glyph
     }
     return out.replace(/\u200b/g, "").replace(/\s+/g, " ").trim();
@@ -239,7 +245,8 @@
   const presentHash = (index) => deck.hash(index);   // the slide's address in the deck opened on its own
 
   /* ---- Pins and hover ---------------------------------------------------------------------- */
-  let mode = "select", pins = [], editable = true;   // mode: "select" (drag, resize) or "pin"
+  // mode: "select" (drag, resize) or "pin"; lockReason: why hand edits are off for good (a Quarto deck)
+  let mode = "select", pins = [], editable = true, lockReason = null;
   const tagOf = (el) => el.tagName.toLowerCase() + (el.classList.length ? "." + [...el.classList].filter((c) => !c.startsWith("__")).join(".") : "");
   function wordAt(x, y, el) {
     let node, offset;
@@ -250,7 +257,7 @@
       const r = document.caretRangeFromPoint(x, y);
       if (r) { node = r.startContainer; offset = r.startOffset; }
     }
-    if (!node || node.nodeType !== 3 || !el.contains(node) || node.parentElement.closest(".katex-mathml")) return null;
+    if (!node || node.nodeType !== 3 || !el.contains(node) || node.parentElement.closest(".katex-mathml, .MathJax, mjx-container")) return null;
     const s = node.nodeValue;
     const isW = (c) => /[\p{L}\p{N}_\-.,%×]/u.test(c);
     let a = offset, b = offset;
@@ -276,6 +283,8 @@
   function onClick(e) {
     if (MODE !== "main") return;
     e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
+    const comment = e.target.closest?.(".__comment");   // a review comment's marker opens it, in either mode
+    if (comment) { host()?.openComment(comment.dataset.comment); return; }
     if (mode !== "pin") return;
     const marker = e.target.closest?.(".__pin");
     if (marker) { host()?.removePin(+marker.dataset.n); return; }
@@ -329,10 +338,11 @@
         x = b.x + p.at.fx * b.w; y = b.y + p.at.fy * b.h;
       }
       const m = document.createElement("div");
-      m.className = "__pin";
+      m.className = "__pin" + (p.comment ? " __comment" : "") + (p.stale ? " __stale" : "");
       m.dataset.n = p.n;
+      if (p.comment) m.dataset.comment = p.comment;
       m.textContent = p.n;
-      m.title = "Click to remove pin " + p.n;
+      m.title = p.title || "Click to remove pin " + p.n;
       Object.assign(m.style, { left: x + "px", top: y + "px" });
       sec.appendChild(m);
     }
@@ -487,7 +497,7 @@
       }
       if (!sel || sel.el !== t.el) select(t.el, t.sec);
     }
-    if (!editable) { if (handle) host()?.toast("Claude is working. Moving and resizing resume when it has finished."); return; }
+    if (!editable) { if (handle) host()?.toast(lockReason || "Claude is working. Moving and resizing resume when it has finished."); return; }
     const el = sel.el, cs = getComputedStyle(el);
     const { s } = frame(sel.sec);
     const [tx, ty] = translateOf(el);
@@ -576,7 +586,7 @@
   }
   function nudge(dx, dy) {
     if (!sel) return;
-    if (!editable) return host()?.toast("Claude is working. Moving and resizing resume when it has finished.");
+    if (!editable) return host()?.toast(lockReason || "Claude is working. Moving and resizing resume when it has finished.");
     const el = sel.el;
     const [tx, ty] = translateOf(el);
     el.style.translate = fmtTranslate(tx + dx, ty + dy);
@@ -641,7 +651,7 @@
   }
 
   async function startEdit(t, x, y, opts = {}) {
-    if (!editable) return host()?.toast("Claude is working. Editing resumes when it has finished.");
+    if (!editable) return host()?.toast(lockReason || "Claude is working. Editing resumes when it has finished.");
     if (editing) await finishEdit(true);
     const src = opts.src ?? await host()?.textSource(t.eid, t.path);
     if (src == null || !t.el.isConnected) return;
@@ -1087,7 +1097,7 @@
       isEditing: () => !!editing,
       deselect() { select(null, null); },
       hasSelection: () => !!sel,
-      setEditable(on) { editable = !!on; if (!editable && editing) finishEdit(true); if (sel) drawSel(); },
+      setEditable(on, why = null) { editable = !!on; lockReason = why; if (!editable && editing) finishEdit(true); if (sel) drawSel(); },
       renderPins,
       async measure(index) {
         goto(index);

package/public/editor.css

@@ -173,7 +173,7 @@ code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background:
 /* the splitter: the panel's top edge, dragged up or down like the notes divider in PowerPoint or Keynote */
 .notes-split { position: absolute; left: 0; right: 0; top: -4px; height: 8px; z-index: 2; cursor: row-resize; touch-action: none; }
 .notes-split::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: transparent; transition: background .12s; }
-.notes-split:hover::after, .notes-split:focus-visible::after, body.resizing-notes .notes-split::after { background: var(--orange); }
+.notes-split:hover::after, .notes-split:focus-visible::after, .notes-split.dragging::after { background: var(--orange); }
 .notes-split:focus-visible { outline: none; }
 .notes-panel.collapsed .notes-split { display: none; }
 body.resizing-notes { cursor: row-resize; user-select: none; }
@@ -244,16 +244,47 @@ body.resizing-notes .stage iframe { pointer-events: none; }   /* keep the drag w
 .spinner { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--orange); border-radius: 50%;
   animation: spin .8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.composer { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
+.composer { position: relative; border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
 .pin-tray:empty { display: none; }
 .pin-tray { max-height: 96px; overflow-y: auto; }
 #input { width: 100%; resize: none; font: inherit; border: 1px solid var(--line); border-radius: var(--radius);
-  padding: 8px 10px; min-height: 64px; max-height: 220px; outline: none; }
+  padding: 8px 10px; outline: none; }
 #input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(237,140,1,.15); }
 .composer-row { display: flex; align-items: center; gap: 8px; }
 .composer-row .spacer { flex: 1; }
 .check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
 
+/* ---- A Quarto deck: rendered from its source, so no hand edits ---- */
+body.quarto #add-slide-btn, body.quarto .slide-list .eye, body.quarto .hand-only { display: none; }
+body:not(.quarto) .quarto-only { display: none; }
+body.quarto #notes:empty::before { content: "Speaker notes come from ::: {.notes} in the Quarto source."; }
+
+/* ---- Review comments ---- */
+.count:empty { display: none; }
+.count { background: #1a73e8; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 11px; font-weight: 600; }
+.comments-panel { border-bottom: 1px solid var(--line); max-height: 45%; overflow-y: auto; padding: 8px 12px 10px; background: var(--bg); }
+.comments-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.comments-head .spacer { flex: 1; }
+.comments-empty, .comments-file { font-size: 12.5px; margin: 4px 0; color: var(--muted); }
+.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.cmt { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; font-size: 13px; }
+.cmt:hover, .cmt.flash { border-color: #1a73e8; }
+.cmt .top { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+.cmt .n { background: #1a73e8; color: #fff; border-radius: 4px; padding: 0 5px; font-weight: 700; font-size: 11px; }
+.cmt.stale .n { background: #8a8f98; }
+.cmt .top .spacer { flex: 1; }
+.cmt .text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.cmt .edit { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; font: inherit; resize: vertical; }
+.cmt .reply { margin: 4px 0 0 10px; padding-left: 6px; border-left: 2px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
+.cmt .reply.mine { border-left-color: #1a73e8; }
+.cmt.resolved .reply { text-decoration: none; }
+.cmt .edit-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
+.cmt .flag { margin: 4px 0 0; color: var(--danger); font-size: 12px; }
+.cmt.resolved { opacity: .6; }
+.cmt.resolved .text { text-decoration: line-through; }
+.cmt .done { margin: 4px 0 0; color: var(--ok); font-size: 12px; }
+.cmt.resolved .done { opacity: 1; }
+
 /* ---- Delete confirmation ---- */
 .delete-dialog { width: min(460px, 92vw); padding: 0; border: 1px solid var(--line); border-radius: 12px;
   box-shadow: 0 20px 60px rgba(0,0,0,.25); }