pindeck 3.0.0-beta.2 → 3.1.0-beta.1

package/lib/eids.mjs

@@ -145,8 +145,97 @@ function find(node, pred) {
   return hit;
 }
 
-/* Slides are leaf <section>s inside .slides; vertical-stack containers are not slides. */
+/* ---- Decks made without reveal.js ----------------------------------------------------------------
+   A deck names its slides with <meta name="pindeck:slides" content="main.deck > section.slide">, a CSS
+   selector, and its size with <meta name="pindeck:size" content="1440x1080">. Selectors stay simple, so
+   the server and the browser find the same slides: tag names, #id, .class, [attr] and [attr="value"],
+   joined by spaces (descendant) or ">" (child), in a comma-separated list. */
+
+const metaOf = (tree, name) => {
+  const m = find(tree, (c) => c.name === "meta" && c.attrs.name?.value.trim().toLowerCase() === `pindeck:${name}`);
+  return m ? decode(m.attrs.content?.value || "").trim() || null : null;
+};
+/* The deck's slide selector, or null for a reveal.js deck */
+export const slideSelector = (tree) => metaOf(tree, "slides");
+/* The deck's slide size from <meta name="pindeck:size">: { width, height } or null */
+export function deckSize(tree) {
+  const m = /^(\d{2,5})\s*[x×*,\s]\s*(\d{2,5})$/i.exec(metaOf(tree, "size") || "");
+  return m ? { width: +m[1], height: +m[2] } : null;
+}
+
+const IDENT = "-?[_a-zA-Z\\u00a0-\\uffff][\\w\\u00a0-\\uffff-]*";
+const COMPOUND = new RegExp(`^(?:(\\*|${IDENT})|#(${IDENT})|\\.(${IDENT})|\\[\\s*(${IDENT})\\s*(?:=\\s*(?:"([^"]*)"|'([^']*)'|(${IDENT}))\\s*)?\\])`);
+/* "main.deck > section.slide, aside.extra" -> one list of compounds and combinators per selector.
+   Throws with the part it cannot read (pseudo-classes, +, ~ ...). */
+export function parseSelector(sel) {
+  const parts = [];   // top-level commas only: not inside [attr="a,b"]
+  let quote = null, depth = 0, from = 0;
+  for (let i = 0; i < sel.length; i++) {
+    const c = sel[i];
+    if (quote) { if (c === quote) quote = null; }
+    else if (c === '"' || c === "'") quote = c;
+    else if (c === "[") depth++;
+    else if (c === "]") depth--;
+    else if (c === "," && !depth) { parts.push(sel.slice(from, i)); from = i + 1; }
+  }
+  parts.push(sel.slice(from));
+  return parts.map((part) => {
+    const steps = [];   // [{ tag, ids, classes, attrs }, ">" | " ", { ... }, ...]
+    let s = part.trim(), cur = null;
+    if (!s) throw new Error(`empty selector in "${sel}"`);
+    while (s) {
+      const ws = /^\s+/.exec(s);
+      const gt = /^\s*>\s*/.exec(s);
+      if (gt) { if (!cur) throw new Error(`"${part.trim()}" starts with ">"`); steps.push(">"); cur = null; s = s.slice(gt[0].length); continue; }
+      if (ws) { steps.push(" "); cur = null; s = s.slice(ws[0].length); continue; }
+      const m = COMPOUND.exec(s);
+      if (!m) throw new Error(`"${s.slice(0, 20)}" in "${part.trim()}" is not supported (use tags, #id, .class, [attr], spaces and ">")`);
+      if (!cur) { cur = { tag: null, ids: [], classes: [], attrs: [] }; steps.push(cur); }
+      if (m[1]) {
+        if (cur.tag || cur.ids.length || cur.classes.length || cur.attrs.length) throw new Error(`a tag name must come first in "${part.trim()}"`);
+        cur.tag = m[1] === "*" ? null : m[1].toLowerCase();
+      }
+      else if (m[2]) cur.ids.push(m[2]);
+      else if (m[3]) cur.classes.push(m[3]);
+      else cur.attrs.push({ name: m[4].toLowerCase(), value: m[5] ?? m[6] ?? m[7] ?? null });
+      s = s.slice(m[0].length);
+    }
+    if (typeof steps.at(-1) === "string") throw new Error(`"${part.trim()}" ends with a combinator`);
+    return steps;
+  });
+}
+function compoundMatches(node, c) {
+  if (!node.attrs) return false;   // the root
+  if (c.tag && node.name !== c.tag) return false;
+  if (c.ids.some((id) => node.attrs.id?.value !== id)) return false;
+  const cls = classesOf(node);
+  if (c.classes.some((k) => !cls.includes(k))) return false;
+  return c.attrs.every((a) => node.attrs[a.name] && (a.value == null || node.attrs[a.name].value === a.value));
+}
+/* steps[i] matches node, and the steps before it match its ancestors as their combinators say */
+function stepsMatch(node, steps, i = steps.length - 1) {
+  if (!compoundMatches(node, steps[i])) return false;
+  if (i === 0) return true;
+  if (steps[i - 1] === ">") return !!node.parent && stepsMatch(node.parent, steps, i - 2);
+  for (let a = node.parent; a; a = a.parent) if (stepsMatch(a, steps, i - 2)) return true;
+  return false;
+}
+/* Elements matching the selector, in document order; an element holding another match is a stack of
+   slides, not a slide (as with reveal.js's vertical stacks) */
+function selectorSlides(tree, sel) {
+  let list;
+  try { list = parseSelector(sel); } catch { return []; }
+  const hits = [];
+  walk(tree, (c) => { if (list.some((steps) => stepsMatch(c, steps))) hits.push(c); });
+  const inside = (a, b) => { for (let p = b.parent; p; p = p.parent) if (p === a) return true; return false; };
+  return hits.filter((h) => !hits.some((o) => o !== h && inside(h, o)));
+}
+
+/* Slides are leaf <section>s inside .slides; vertical-stack containers are not slides. A deck that names
+   its slides with <meta name="pindeck:slides"> has the elements that selector matches instead. */
 export function findSlides(tree) {
+  const sel = slideSelector(tree);
+  if (sel) return selectorSlides(tree, sel);
   const slidesEl = find(tree, (c) => classesOf(c).includes("slides"));
   if (!slidesEl) return [];
   const out = [];
@@ -187,6 +276,7 @@ function elementName(node) {
 export function assignEids(html) {
   const tree = parse(html);
   const sections = findSlides(tree);
+  const isSlide = slideSelector(tree) ? ((c) => sections.includes(c)) : ((c) => c.name === "section");
   const used = new Set();
   const edits = []; // { at, insert } or { start, end, replace }
   const assigned = [], renamed = [];
@@ -240,7 +330,7 @@ export function assignEids(html) {
     // Pass 2: elements inside the slide
     const visit = (node, inSvg) => {
       for (const c of node.children) {
-        if (c.name === "section") continue; // nested slide, handled on its own
+        if (isSlide(c)) continue; // nested slide, handled on its own
         const cls = classesOf(c);
         if (c.name === "aside" && cls.includes("notes")) continue;
         if (c.attrs["data-noeid"]) continue;
@@ -423,10 +513,11 @@ const slideKind = (n) => classList(n).find((c) => /-slide$/.test(c)) || "content
      content    title and two placeholder bullets, from a content slide (the current one if it is one)
      section    a section divider, from the deck's first divider
      duplicate  a copy of the current slide
-   Element ids are left out; assignEids() gives the new slide fresh ones.
+   Element ids are left out; assignEids() gives the new slide fresh ones. In a deck made without reveal.js,
+   the slide's own id is left out too: such decks (and Present) go to slides by their id.
    Returns { html, index } (index of the new slide) or { error }. */
 export function insertSlide(html, kind, afterEid) {
-  const slides = findSlides(parse(html));
+  const tree = parse(html), slides = findSlides(tree);
   if (!slides.length) return { error: "The deck has no slides." };
   const after = slides.find((s) => s.attrs["data-eid"]?.value === afterEid) || slides.at(-1);
   const hasHead = (s) => { let h = false; walk({ children: [s] }, (c) => { if (/^h[1-3]$/.test(c.name)) h = true; }); return h; };
@@ -437,6 +528,7 @@ export function insertSlide(html, kind, afterEid) {
   if (!tpl) return { error: kind === "section" ? "This deck has no section divider to model a new one on." : "This deck has no content slide to model a new one on." };
 
   let frag = html.slice(tpl.start, elementEnd(html, tpl)).replace(/\s+data-eid="[^"]*"/g, "");
+  if (slideSelector(tree)) frag = frag.replace(/^(<[^>]*?)\s+id=(?:"[^"]*"|'[^']*'|[^\s>]+)/, "$1");   // the opening tag only
   if (kind !== "duplicate") frag = placeholderSlide(frag, kind, slides.filter((s, i) => i <= slides.indexOf(after) && slideKind(s) === "section-slide").length + 1);
 
   const indent = lineIndent(html, after.start);
@@ -500,12 +592,13 @@ function slideBlock(html, s) {
    are. Slides inside vertical stacks are not moved. Returns { html, changed, from, index } or { error }. */
 export function moveSlide(html, eid, beforeEid) {
   const byEid = (all, e) => all.find((s) => s.attrs["data-eid"]?.value === e);
-  const slides = findSlides(parse(html));
+  const tree = parse(html), slides = findSlides(tree);
+  const bySelector = !!slideSelector(tree);   // such decks have no vertical stacks
   const slide = byEid(slides, eid), target = beforeEid == null ? null : byEid(slides, beforeEid);
   if (!slide || (beforeEid != null && !target)) return { error: "Slide not found in the file." };
-  if ([slide, target].some((s) => s?.parent.name === "section")) return { error: "Slides inside a vertical stack cannot be moved yet." };
+  if (!bySelector && [slide, target].some((s) => s?.parent.name === "section")) return { error: "Slides inside a vertical stack cannot be moved yet." };
   const from = slides.indexOf(slide);
-  const top = slide.parent.children.filter((c) => c.name === "section");
+  const top = slide.parent.children.filter((c) => (bySelector ? slides.includes(c) : c.name === "section"));
   const next = top[top.indexOf(slide) + 1] || null;
   if (target === slide || target === next) return { html, changed: false, from, index: from };
 
@@ -520,7 +613,7 @@ export function moveSlide(html, eid, beforeEid) {
     out = cut.slice(0, at) + text + `\n\n${indent}` + cut.slice(at);
   } else {
     // A final vertical stack is absent from the leaf-slide list, but we must insert after it.
-    const last = find(parse(cut), (c) => classesOf(c).includes("slides"))
+    const last = bySelector ? rest.at(-1) : find(parse(cut), (c) => classesOf(c).includes("slides"))
       .children.filter((c) => c.name === "section").at(-1);
     const at = elementEnd(cut, last);
     out = cut.slice(0, at) + `\n\n${indent}` + text + cut.slice(at);

package/lib/frameworks.mjs

@@ -1,10 +1,11 @@
 /* Which slide framework a deck uses. PinDeck edits reveal.js decks: <section> slides inside an element
-   with class "slides" (inside <div class="reveal">). Other frameworks are recognised by their markup and
-   scripts, so the user gets a clear "not supported (yet)" before PinDeck changes anything, instead of an
-   editor without slides. Only tags and scripts are looked at, never the slides' text, so a talk that
-   mentions "impress.js" is not taken for one. */
+   with class "slides" (inside <div class="reveal">). Any other deck can name its slides itself with
+   <meta name="pindeck:slides" content="CSS selector"> (see lib/eids.mjs) and is then edited too. Other
+   frameworks are recognised by their markup and scripts, so the user gets a clear "not supported (yet)"
+   before PinDeck changes anything, instead of an editor without slides. Only tags and scripts are looked
+   at, never the slides' text, so a talk that mentions "impress.js" is not taken for one. */
 
-import { parse, findSlides } from "./eids.mjs";
+import { parse, findSlides, slideSelector, deckSize, parseSelector } from "./eids.mjs";
 
 const OTHERS = [   // name, markers; the first match wins (Marp before bespoke.js, which it is built on)
   ["Marp", /\bmarpit\b|bespoke-marp|data-marpit|marp-cli/i],
@@ -20,9 +21,13 @@ const OTHERS = [   // name, markers; the first match wins (Marp before bespoke.j
 /* Tags and script contents only: the slides' text could name any framework */
 const markup = (html) => [...String(html).matchAll(/<script\b[^>]*>[\s\S]*?<\/script>|<[^>]+>/gi)].map((m) => m[0]).join("\n");
 
-/* { name, supported }: reveal.js decks are supported, including one without slides yet */
+/* { name, supported }: reveal.js decks are supported, including one without slides yet, and so is a deck
+   whose <meta name="pindeck:slides"> selector finds slides and whose <meta name="pindeck:size"> gives their
+   size ({ name: "selector", selector, supported }) */
 export function detectFramework(html) {
-  if (findSlides(parse(html)).length) return { name: "reveal.js", supported: true };
+  const tree = parse(html), selector = slideSelector(tree);
+  if (selector) return { name: "selector", selector, supported: findSlides(tree).length > 0 && !!deckSize(tree) };
+  if (findSlides(tree).length) return { name: "reveal.js", supported: true };
   const tags = markup(html);
   const other = OTHERS.find(([, re]) => re.test(tags));
   if (other) return { name: other[0], supported: false };
@@ -30,12 +35,25 @@ export function detectFramework(html) {
   return { name: null, supported: false };
 }
 
+const HOW = `A deck made otherwise can name its slides in its <head>: ` +
+  `<meta name="pindeck:slides" content="main.deck > section.slide"> (a CSS selector for the slides) and ` +
+  `<meta name="pindeck:size" content="1440x1080"> (their size in px).`;
+
 /* The message for a deck PinDeck cannot edit, or null */
 export function unsupportedMessage(html, file) {
   const fw = detectFramework(html);
   if (fw.supported) return null;
+  if (fw.name === "selector") {
+    // the slides are found: the size is what is missing (headless Chrome and the PDF pages need it)
+    if (findSlides(parse(html)).length) return `${file}: <meta name="pindeck:size"> is missing or not a size ` +
+      `such as content="1440x1080" (the slides' width and height in px). PinDeck opens the slides at that size ` +
+      `for screenshots and PDFs. Nothing was changed.`;
+    let why = "matches no elements";
+    try { parseSelector(fw.selector); } catch (e) { why = `cannot be used: ${e.message}`; }
+    return `${file}: the slide selector "${fw.selector}" in <meta name="pindeck:slides"> ${why}. Nothing was changed.`;
+  }
   const what = fw.name ? `${file} is a ${fw.name} deck.` :
     `${file} has no reveal.js slides (a <div class="reveal"> with <div class="slides"> holding <section> slides).`;
-  return `${what} PinDeck works with reveal.js decks only for now; other frameworks may follow. ` +
+  return `${what} PinDeck works with reveal.js decks; other frameworks may follow. ${HOW} ` +
     `Nothing was changed.`;
 }

package/lib/login.mjs

@@ -0,0 +1,61 @@
+/* Who may read the editor, the deck and the API: shared by the front (pindeck) and each deck server.
+
+   The token never appears in a page or on a command line, where other users of a shared server could read
+   it (ps, curl). A browser logs in once with a one-time code (printed at start, or by `pindeck login`) and
+   then holds the token in an HttpOnly cookie; the CLI, Claude and the front send it in a header. Browsers
+   share cookies across all ports of a host, so the cookie name carries the server's port. */
+
+import crypto from "node:crypto";
+
+/* Pages opened as 127.0.0.1 or localhost only, on any port: an SSH tunnel may use another local port.
+   Another site's name pointed at 127.0.0.1 (DNS rebinding) must not read the editor page, its token or the deck. */
+export const goodHost = (h) => /^(127\.0\.0\.1|localhost)(:\d{1,5})?$/.test(h);
+
+export const LOGIN_PAGE = `<!doctype html><meta charset="utf-8"><title>PinDeck</title>
+<body style="font:16px system-ui,sans-serif;max-width:36em;margin:4em auto;padding:0 1em">
+<h1>Log in to PinDeck</h1><p>Open the login link that PinDeck printed when it started. Links work once;
+for a new one, run <code>pindeck login</code> in the deck folder (or <code>node front.mjs login</code> in a
+PinDeck checkout).</p>`;
+
+export function cookie(req, name) {
+  for (const part of String(req.headers.cookie || "").split(";")) {
+    const i = part.indexOf("=");
+    if (i > 0 && part.slice(0, i).trim() === name) return part.slice(i + 1).trim();
+  }
+  return null;
+}
+
+/* port() and origin() are read on use: --port 0 learns the port only once listening */
+export function createLogin({ token, port, origin }) {
+  const loginCodes = new Map();   // code -> expiry (ms)
+  function loginCode(ttl) {
+    const now = Date.now();
+    for (const [c, exp] of loginCodes) if (exp < now) loginCodes.delete(c);
+    const code = crypto.randomBytes(16).toString("hex");
+    loginCodes.set(code, now + ttl);
+    return code;
+  }
+  const loginUrl = (code, next = "/") => `${origin()}/login?` + new URLSearchParams({ code, ...(next !== "/" ? { next } : {}) });
+  const cookieName = () => `pindeck-${port()}`;
+  const sameSecret = (a) => typeof a === "string" && a.length === token.length &&
+    crypto.timingSafeEqual(Buffer.from(a), Buffer.from(token));
+  const authed = (req) => sameSecret(req.headers["x-editor-token"]) || sameSecret(cookie(req, cookieName()));
+  /* A one-time code: set the cookie, then go on with a same-origin navigation (a redirect from a cross-site
+     start, such as a file:// page or a link in a terminal, would not carry a SameSite=Strict cookie). */
+  function login(res, url) {
+    const code = url.searchParams.get("code") || "";
+    const exp = loginCodes.get(code);
+    loginCodes.delete(code);
+    if (!exp || exp < Date.now()) {
+      res.writeHead(403, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+      return res.end(LOGIN_PAGE.replace("<p>", "<p>This login link has expired or was used already. "));
+    }
+    let next = url.searchParams.get("next") || "/";
+    if (!next.startsWith("/") || next.startsWith("//") || next.includes("\\")) next = "/";
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store",
+      "set-cookie": `${cookieName()}=${token}; HttpOnly; SameSite=Strict; Path=/` });
+    const to = JSON.stringify(next).replace(/</g, "\\u003c");
+    res.end(`<!doctype html><meta charset="utf-8"><title>PinDeck</title><script>location.replace(${to})</script>`);
+  }
+  return { loginCode, loginUrl, cookieName, authed, login };
+}

package/lib/usage.mjs

@@ -0,0 +1,15 @@
+/* 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>]...
+       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">.
+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.`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "3.0.0-beta.2",
+  "version": "3.1.0-beta.1",
   "description": "PinDeck: an editor for HTML slide decks on macOS, and on Linux (beta) through an SSH tunnel. Pin elements, describe the change, and Claude Code or OpenAI Codex edits the slides.",
   "keywords": [
     "slides",
@@ -23,9 +23,10 @@
   "bugs": "https://github.com/ehabets/PinDeck/issues",
   "type": "module",
   "bin": {
-    "pindeck": "server.mjs"
+    "pindeck": "front.mjs"
   },
   "files": [
+    "front.mjs",
     "server.mjs",
     "cli.mjs",
     "lib/",
@@ -34,7 +35,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "start": "node server.mjs",
+    "start": "node front.mjs",
     "test": "node --test"
   },
   "os": [