pindeck 3.0.0-beta.2 → 3.0.0-beta.3

package/README.md

@@ -1,6 +1,6 @@
 # PinDeck
 
-> **macOS, and Linux as a beta · Version 3 beta preview** (`3.0.0-beta.2`). On Linux, PinDeck runs as a
+> **macOS, and Linux as a beta · Version 3 beta preview** (`3.0.0-beta.3`). On Linux, PinDeck runs as a
 > headless server that you use from your Mac's browser through an SSH tunnel (see
 > [Running on a Linux server](#running-on-a-linux-server-beta)). Windows is not supported. The beta is on
 > npm’s `beta` channel and the [`v3-beta`](https://github.com/ehabets/PinDeck/tree/v3-beta) branch; stable
@@ -42,7 +42,7 @@ Install the beta from npm:
 ```bash
 npx pindeck@beta /path/to/deck
 # Or select this exact beta:
-npx pindeck@3.0.0-beta.2 /path/to/deck
+npx pindeck@3.0.0-beta.3 /path/to/deck
 ```
 
 Or run it from the `v3-beta` branch, which includes the example deck:
@@ -101,7 +101,8 @@ errors; PinDeck does not fall back to broader permissions. Recheck backend compa
 
 ## Preparing a deck
 
-PinDeck works with reveal.js decks whose slides are `<section>` elements inside `.slides`. Two
+PinDeck works with reveal.js decks whose slides are `<section>` elements inside `.slides`, and with other
+decks that name their slides (see [Decks made without reveal.js](#decks-made-without-revealjs)). Two
 optional `<meta>` tags in the deck's `<head>` tell it about the design:
 
 ```html
@@ -116,6 +117,40 @@ numbers will jump where a slide is hidden.
 Without them PinDeck runs no footer check and locks only `.slide-foot` and `.logo`. A file called
 `brand.css` in the deck folder is locked for both backends. See `ocean-example/` for a complete deck.
 
+### Decks made without reveal.js
+
+A deck with a script of its own, or made with a framework whose slides are elements of their own
+(Shower, deck.js, a hand-written deck), can be edited too once it names its slides in its `<head>`:
+
+```html
+<meta name="pindeck:slides" content="main.deck > section.slide">  <!-- a CSS selector for the slides -->
+<meta name="pindeck:size" content="1440x1080">                     <!-- their size in px -->
+```
+
+The selector may use tag names, `#id`, `.class`, `[attr]` and `[attr="value"]`, joined by spaces or `>`,
+and a list of them separated by commas. In the editor, PinDeck shows the slides itself, one at a time and
+scaled to the window, and switches off the deck's own scaling, slide keys and inert or hidden marks while
+you edit; that changes nothing in the deck file. Everything in [Working with it](#working-with-it) works as
+with a reveal.js deck, with these differences:
+
+* Build steps (`.fragment`) belong to reveal.js: other decks show every element at once.
+* Hidden slides (`data-visibility="hidden"`) are left out of PinDeck's PDF exports; whether presenting
+  skips them is up to the deck's own script.
+* Speaker notes are an `<aside class="notes">` in the slide, as in reveal.js. PinDeck hides them in the
+  editor; the deck's CSS should hide them too (`aside.notes { display: none }`).
+* **Present** opens the deck at `#<slide id>`, or `#<number>` (counting from 1) for a slide without an id.
+  Present may open on the first slide if the deck does not go to slides by their address.
+* **＋ New slide** models a new slide on the deck's own (see [Making your own template](#making-your-own-template)):
+  a content slide gets placeholder bullets in a `.slide-body`; without one it has only its title. A new or
+  duplicated slide does not take the original's `id`.
+
+Both tags are needed: PinDeck opens the slides at the given size for screenshots and PDF pages. A missing
+size, or a selector that finds no slides or that PinDeck cannot read, is reported before anything changes.
+While PinDeck runs, it reads the tags again for every screenshot, PDF and assistant session; the editor
+reads them when the slide reloads. If a tag stops working meanwhile, the editor shows the same message and
+the assistant is told. A session already running keeps the slide selector it started with; **New chat**
+starts one with the new selector.
+
 ## Making your own template
 
 PinDeck has no template generator; a template is simply a deck folder. Start from a copy of the example:
@@ -448,8 +483,10 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 
 ## Current Limitations
 
-* reveal.js decks only. A deck made with another framework (Marp, Slidev, impress.js, remark, Spectacle,
-  Shower, deck.js, bespoke.js) is recognised and refused with its name before PinDeck changes anything.
+* reveal.js decks, and decks that name their slides with `<meta name="pindeck:slides">` (see [Decks made
+  without reveal.js](#decks-made-without-revealjs)). Any other deck made with another framework (Marp, Slidev,
+  impress.js, remark, Spectacle, Shower, deck.js, bespoke.js) is recognised and refused with its name before
+  PinDeck changes anything.
 * Text inside inline SVG diagrams cannot be edited in place; pin it and ask the assistant.
 * Parts of an inline SVG move with the whole SVG; inline text (bold, spans) moves with its block.
 * No indenting or outdenting of bullets with `Tab` yet, and `Backspace` at the start of a bullet does not merge it with the one above; ask the assistant for those.
@@ -461,6 +498,12 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
 
 ## Versions
 
+* **3.0.0-beta.3**: everything from 2.10.0, for both assistants.
+  - Decks made without reveal.js: a deck that names its slides with `<meta name="pindeck:slides">`
+    and their size with `<meta name="pindeck:size">` is edited like a reveal.js deck (contributed by
+    Zeyu Xu). Claude and Codex are both told what the deck's slides are.
+  - Screenshots fill the picture instead of being letterboxed into a shorter page.
+
 * **3.0.0-beta.2**: everything from 2.9 and 2.10, with Codex brought up to it.
   - Security: the fix from 2.9. The editor page no longer contains the token, and the deck needs it
     too, so other users of the same machine cannot read either. PinDeck prints a one-time login link at
@@ -480,8 +523,8 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
   switching with optional handover, curated model lists, a separate effort selector with per-model
   preferences, restricted Codex tools, and separate v3 runtime state. On npm as `pindeck@beta`.
 
-* **2.10.0-beta.1** (2.10 beta): decks with their own file names and shared files, and Claude working
-  on the whole deck.
+* **2.10**: decks with their own file names and shared files, decks made without reveal.js, and Claude
+  working on the whole deck.
   - A deck file by name: `pindeck path/to/talk.html` (a folder still opens its `index.html`). Several
     decks can share a folder, each with its own chat and undo history.
   - Claude may edit and create other files of the deck (scripts, style sheets, notes), never
@@ -492,8 +535,14 @@ Without PowerPoint or Keynote (or on other systems than macOS) only the text and
     screenshots and PDF exports. A symlink that leads out of the deck and its asset roots is refused.
   - Shared instructions: the deck's `CLAUDE.md` and `AGENTS.md` may import other files with `@path`.
     `CLAUDE.md` files in parent folders are still not loaded, on purpose (see the README).
-  - Decks made with other slide frameworks (Marp, Slidev, impress.js, remark and others) are
-    recognised and refused with their name, before PinDeck changes anything.
+  - Decks made without reveal.js (a script of their own, Shower, deck.js, a hand-written deck): a deck
+    that names its slides with `<meta name="pindeck:slides">` (a CSS selector) and their size with
+    `<meta name="pindeck:size">` is edited like a reveal.js deck, with screenshots at the slide size and
+    one PDF page per slide (contributed by Zeyu Xu). Decks made with other slide frameworks (Marp,
+    Slidev, impress.js, remark and others) without these tags are recognised and refused with their
+    name, before PinDeck changes anything; the message says how to add the tags.
+  - Screenshots fill the picture: headless Chrome lays the page out shorter than its window, which
+    left the slide letterboxed in some Chrome versions (reported by Zeyu Xu).
   - Linux: pictures of PDF pages with Poppler, the PowerPoint import with slide pictures from
     LibreOffice, and waveforms of non-WAV audio with ffmpeg, each when installed.
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pindeck",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "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",

package/public/bridge.js

@@ -4,7 +4,8 @@
      main     the visible slide in the editor: navigation, selection, drag and resize, text editing, pins
      measure  hidden 1280x720 copy used to measure any slide without moving the user's view
      shot     headless screenshot of one slide, with pin markers
-     dump     headless measurement; writes the result into the DOM for --dump-dom */
+     dump     headless measurement; writes the result into the DOM for --dump-dom
+     pdf      print layout for the PDF export (decks made without reveal.js; reveal.js has its own) */
 
 (function () {
   const params = new URLSearchParams(location.search);
@@ -14,64 +15,69 @@
   const deckMeta = (n) => document.querySelector(`meta[name="pindeck:${n}"]`)?.content?.trim();
   const FOOTER_TOP = deckMeta("footer-top") ? +deckMeta("footer-top") : null;
   const LOCKED_SEL = deckMeta("locked") || ".slide-foot, .logo";
+  // A deck made without reveal.js names its slides with <meta name="pindeck:slides"> (a CSS selector)
+  const SLIDE_SEL = deckMeta("slides") || null;
+  const SLIDE = SLIDE_SEL ? `:is(${SLIDE_SEL})` : ".reveal .slides section";   // in CSS and closest()
+  const SLIDE_OF = SLIDE_SEL || "section";   // the slide an element is on
   const host = () => (window.parent !== window ? window.parent.__editorHost : null);
-  let W = 1280, H = 720;
+  let W = 1280, H = 720, deck = null;   // deck: reveal.js or a selector deck (see "Decks" below)
 
   /* ---- Styles for editor-only overlays ---------------------------------------- */
   const css = document.createElement("style");
-  // --u = screen pixels per slide pixel, inverted: overlays keep a constant on-screen size at any zoom
+  // --pindeck-u = screen pixels per slide pixel, inverted: overlays keep a constant on-screen size at any
+  // zoom (a name of its own: decks use --u for their own units)
   css.textContent = `
-    .__pin { position:absolute; z-index:1000; width:calc(26px*var(--u,1)); height:calc(26px*var(--u,1));
-      margin:calc(-13px*var(--u,1)) 0 0 calc(-13px*var(--u,1)); border-radius:50%;
-      background:#ED8C01; color:#fff; font:700 calc(14px*var(--u,1))/calc(26px*var(--u,1)) system-ui, sans-serif; text-align:center;
-      box-shadow:0 0 0 calc(2px*var(--u,1)) #fff, 0 calc(2px*var(--u,1)) calc(6px*var(--u,1)) rgba(0,0,0,.45);
+    .__pin { position:absolute; z-index:1000; width:calc(26px*var(--pindeck-u,1)); height:calc(26px*var(--pindeck-u,1));
+      margin:calc(-13px*var(--pindeck-u,1)) 0 0 calc(-13px*var(--pindeck-u,1)); border-radius:50%;
+      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; }
-    .__hover { position:absolute; z-index:999; pointer-events:none; outline:calc(2px*var(--u,1)) dashed #ED8C01;
-      outline-offset:calc(2px*var(--u,1)); background:rgba(237,140,1,.06); }
-    .__hover span { position:absolute; left:calc(-2px*var(--u,1)); background:#ED8C01; color:#fff; white-space:nowrap;
-      font:600 calc(11px*var(--u,1))/calc(17px*var(--u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--u,1));
-      border-radius:calc(3px*var(--u,1)); }
-    .__hover span.above { top:calc(-21px*var(--u,1)); } .__hover span.below { bottom:calc(-21px*var(--u,1)); }
+    .__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;
+      font:600 calc(11px*var(--pindeck-u,1))/calc(17px*var(--pindeck-u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--pindeck-u,1));
+      border-radius:calc(3px*var(--pindeck-u,1)); }
+    .__hover span.above { top:calc(-21px*var(--pindeck-u,1)); } .__hover span.below { bottom:calc(-21px*var(--pindeck-u,1)); }
     .__hover.locked { outline-color:#888; background:rgba(0,0,0,.04); }
     .__hover.locked span { background:#888; }
-    .__flash { position:absolute; z-index:998; pointer-events:none; outline:calc(3px*var(--u,1)) solid #ED8C01;
-      outline-offset:calc(3px*var(--u,1)); animation:__flash 1.4s ease-out forwards; }
+    .__flash { position:absolute; z-index:998; pointer-events:none; outline:calc(3px*var(--pindeck-u,1)) solid #ED8C01;
+      outline-offset:calc(3px*var(--pindeck-u,1)); animation:__flash 1.4s ease-out forwards; }
     @keyframes __flash { 0%,60% { opacity:1 } 100% { opacity:0 } }
-    html.__pinmode .reveal .slides section, html.__pinmode .reveal .slides section * { cursor:crosshair !important; }
-    html.__pinmode .reveal .slides section .__pin { cursor:pointer !important; }
-    .__hover.sel { outline:calc(1px*var(--u,1)) solid #1a73e8; outline-offset:0; background:none; }
+    html.__pinmode ${SLIDE}, html.__pinmode ${SLIDE} * { cursor:crosshair !important; }
+    html.__pinmode ${SLIDE} .__pin { cursor:pointer !important; }
+    .__hover.sel { outline:calc(1px*var(--pindeck-u,1)) solid #1a73e8; outline-offset:0; background:none; }
     .__hover.sel span { background:#1a73e8; }
-    .__sel { position:absolute; z-index:1001; pointer-events:none; outline:calc(1.5px*var(--u,1)) solid #1a73e8; }
-    .__sel i { position:absolute; width:calc(9px*var(--u,1)); height:calc(9px*var(--u,1)); margin:calc(-5px*var(--u,1)) 0 0 calc(-5px*var(--u,1));
-      background:#fff; border:calc(1.5px*var(--u,1)) solid #1a73e8; box-sizing:border-box; pointer-events:auto; }
+    .__sel { position:absolute; z-index:1001; pointer-events:none; outline:calc(1.5px*var(--pindeck-u,1)) solid #1a73e8; }
+    .__sel i { position:absolute; width:calc(9px*var(--pindeck-u,1)); height:calc(9px*var(--pindeck-u,1)); margin:calc(-5px*var(--pindeck-u,1)) 0 0 calc(-5px*var(--pindeck-u,1));
+      background:#fff; border:calc(1.5px*var(--pindeck-u,1)) solid #1a73e8; box-sizing:border-box; pointer-events:auto; }
     .__sel i[data-h="nw"] { left:0; top:0; cursor:nwse-resize; }   .__sel i[data-h="n"] { left:50%; top:0; cursor:ns-resize; }
     .__sel i[data-h="ne"] { left:100%; top:0; cursor:nesw-resize; } .__sel i[data-h="e"] { left:100%; top:50%; cursor:ew-resize; }
     .__sel i[data-h="se"] { left:100%; top:100%; cursor:nwse-resize; } .__sel i[data-h="s"] { left:50%; top:100%; cursor:ns-resize; }
     .__sel i[data-h="sw"] { left:0; top:100%; cursor:nesw-resize; } .__sel i[data-h="w"] { left:0; top:50%; cursor:ew-resize; }
     .__sel.readonly i { display:none; }
-    .__sel-label { position:absolute; left:calc(-1.5px*var(--u,1)); white-space:nowrap; background:#1a73e8; color:#fff;
-      font:600 calc(11px*var(--u,1))/calc(17px*var(--u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--u,1));
-      border-radius:calc(3px*var(--u,1)); font-variant-numeric:tabular-nums; }
-    .__sel-label.above { top:calc(-21px*var(--u,1)); } .__sel-label.below { bottom:calc(-21px*var(--u,1)); }
+    .__sel-label { position:absolute; left:calc(-1.5px*var(--pindeck-u,1)); white-space:nowrap; background:#1a73e8; color:#fff;
+      font:600 calc(11px*var(--pindeck-u,1))/calc(17px*var(--pindeck-u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--pindeck-u,1));
+      border-radius:calc(3px*var(--pindeck-u,1)); font-variant-numeric:tabular-nums; }
+    .__sel-label.above { top:calc(-21px*var(--pindeck-u,1)); } .__sel-label.below { bottom:calc(-21px*var(--pindeck-u,1)); }
     .__guide { position:absolute; z-index:1002; pointer-events:none; background:#e5399d; }
-    .__guide.v { top:0; height:100%; width:calc(1px*var(--u,1)); }
-    .__guide.h { left:0; width:100%; height:calc(1px*var(--u,1)); }
-    html.__selmode .reveal .slides section * { cursor:default; }
-    html.__selmode .reveal .slides section .__selected, html.__selmode.__dragging * { cursor:move !important; }
-    html.__selmode .reveal .slides section .__sel i { cursor:inherit; }
-    .__editing { outline:calc(2px*var(--u,1)) solid #1a73e8 !important; outline-offset:calc(3px*var(--u,1));
+    .__guide.v { top:0; height:100%; width:calc(1px*var(--pindeck-u,1)); }
+    .__guide.h { left:0; width:100%; height:calc(1px*var(--pindeck-u,1)); }
+    html.__selmode ${SLIDE} * { cursor:default; }
+    html.__selmode ${SLIDE} .__selected, html.__selmode.__dragging * { cursor:move !important; }
+    html.__selmode ${SLIDE} .__sel i { cursor:inherit; }
+    .__editing { outline:calc(2px*var(--pindeck-u,1)) solid #1a73e8 !important; outline-offset:calc(3px*var(--pindeck-u,1));
       background:rgba(26,115,232,.04); cursor:text !important; caret-color:#1a73e8; }
     .__editing * { cursor:text !important; }
-    .__hidden-banner { position:absolute; z-index:997; top:calc(26px*var(--u,1)); right:calc(26px*var(--u,1)); pointer-events:none;
-      background:#ED8C01; color:#fff; font:600 calc(12px*var(--u,1))/calc(22px*var(--u,1)) system-ui, sans-serif;
-      padding:0 calc(10px*var(--u,1)); border-radius:calc(11px*var(--u,1)); box-shadow:0 calc(2px*var(--u,1)) calc(8px*var(--u,1)) rgba(0,0,0,.25); }
+    .__hidden-banner { position:absolute; z-index:997; top:calc(26px*var(--pindeck-u,1)); right:calc(26px*var(--pindeck-u,1)); pointer-events:none;
+      background:#ED8C01; color:#fff; font:600 calc(12px*var(--pindeck-u,1))/calc(22px*var(--pindeck-u,1)) system-ui, sans-serif;
+      padding:0 calc(10px*var(--pindeck-u,1)); border-radius:calc(11px*var(--pindeck-u,1)); box-shadow:0 calc(2px*var(--pindeck-u,1)) calc(8px*var(--pindeck-u,1)) rgba(0,0,0,.25); }
     .__edit-hint { position:absolute; z-index:1003; pointer-events:none; white-space:nowrap; background:#1a73e8; color:#fff;
-      font:600 calc(11px*var(--u,1))/calc(17px*var(--u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--u,1));
-      border-radius:calc(3px*var(--u,1)); }`;
+      font:600 calc(11px*var(--pindeck-u,1))/calc(17px*var(--pindeck-u,1)) system-ui, sans-serif; padding:0 calc(5px*var(--pindeck-u,1));
+      border-radius:calc(3px*var(--pindeck-u,1)); }`;
   document.head.appendChild(css);
 
   /* ---- Geometry ------------------------------------------------------------------ */
-  const slides = () => Reveal.getSlides();
+  const slides = () => deck.slides();
   const indexOf = (sec) => slides().indexOf(sec);
   const r1 = (v) => Math.round(v);
   function frame(sec) {
@@ -122,7 +128,7 @@
       hasFooter: !!sec.querySelector(".slide-foot"), hidden };
   }
   function info() {
-    return { slides: slides().map((s, i) => slideInfo(s, i)), current: indexOf(Reveal.getCurrentSlide()) };
+    return { slides: slides().map((s, i) => slideInfo(s, i)), current: indexOf(deck.current()) };
   }
 
   /* ---- Layout measurement ------------------------------------------------------------- */
@@ -138,7 +144,7 @@
       const hidden = cs.display === "none" || cs.visibility === "hidden" || +cs.opacity === 0 || (b.w === 0 && b.h === 0);
       const leaf = !el.querySelector("[data-eid]");
       const own = el === sec ? "" : textOf(el, !leaf);
-      const tag = el.tagName.toLowerCase() + (el.classList.length ? "." + [...el.classList].filter((c) => !/^(fragment|visible|current-fragment|present|past|future)$/.test(c)).join(".") : "");
+      const tag = el.tagName.toLowerCase() + (el.classList.length ? "." + [...el.classList].filter((c) => !/^(fragment|visible|current-fragment|present|past|future)$/.test(c) && !c.startsWith("__")).join(".") : "");
       const e = { eid: el.dataset.eid || si.eid, tag: tag.replace(/\.$/, ""), depth, ...b };
       if (own && el.tagName !== "IMG" && el !== sec) e.font = fontOf(el);
       if (own) e.text = own;
@@ -218,13 +224,8 @@
   const nextFrame = () => Promise.resolve();
 
   /* ---- Navigation ------------------------------------------------------------------------ */
-  function goto(index) {
-    const sec = slides()[index];
-    if (!sec) return;
-    const ix = Reveal.getIndices(sec);
-    Reveal.slide(ix.h, ix.v);
-  }
-  function indices(index) { const sec = slides()[index]; return sec ? Reveal.getIndices(sec) : { h: 0, v: 0 }; }
+  const goto = (index) => deck.goto(index);
+  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"
@@ -249,12 +250,12 @@
   }
   function targetOf(t) {
     if (!t || !t.closest) return null;
-    const sec = t.closest(".reveal .slides section");
+    const sec = t.closest(SLIDE);
     if (!sec || t.closest(".__pin, .__hover, .__sel, .__guide")) return null;
     const foot = t.closest(".slide-foot");
     const el = foot ? sec : t.closest("[data-eid]") || sec;
     const locked = foot ? "footer, set by brand.css (locked)" : el !== sec && el.matches(LOCKED_SEL) ? "positioned by brand.css (locked)" : null;
-    return { sec: el === sec ? sec : el.closest("section"), el, locked, foot };
+    return { sec: el === sec ? sec : el.closest(SLIDE_OF), el, locked, foot };
   }
   function onPointerDown(e) {
     if (MODE !== "main" || e.button !== 0) return;
@@ -309,7 +310,7 @@
     document.querySelectorAll(".__pin").forEach((p) => p.remove());
     for (const p of pins) {
       const sec = byEid(p.slide.eid);
-      if (!sec || sec.tagName !== "SECTION") continue;
+      if (!sec || !sec.matches(SLIDE_OF)) continue;
       let x = p.point.x, y = p.point.y;
       const el = p.eid !== p.slide.eid ? byEid(p.eid, sec) : null;
       if (el && el.getClientRects().length) {
@@ -328,8 +329,8 @@
   function highlight(eid) {
     const el = byEid(eid);
     if (!el) return;
-    const sec = el.tagName === "SECTION" ? el : el.closest("section");
-    if (sec !== Reveal.getCurrentSlide()) return;
+    const sec = el.closest(SLIDE_OF);
+    if (sec !== deck.current()) return;
     const b = boxOf(el, sec);
     const f = document.createElement("div");
     f.className = "__flash";
@@ -396,8 +397,8 @@
   }
   function selectEid(eid) {
     const el = eid && byEid(eid);
-    const sec = el?.closest("section");
-    if (!el || sec !== Reveal.getCurrentSlide()) return select(null, null);
+    const sec = el?.closest(SLIDE_OF);
+    if (!el || sec !== deck.current()) return select(null, null);
     select(el, sec);
   }
 
@@ -698,8 +699,8 @@
     const h = document.createElement("div");
     h.className = "__edit-hint";
     h.textContent = "Editing · Enter to save · Esc to cancel · Shift+Enter new line";
-    Object.assign(h.style, b.y < 30 ? { left: b.x + "px", top: `calc(${b.y + b.h}px + 6px*var(--u,1))` }
-      : { left: b.x + "px", top: `calc(${b.y}px - 22px*var(--u,1))` });
+    Object.assign(h.style, b.y < 30 ? { left: b.x + "px", top: `calc(${b.y + b.h}px + 6px*var(--pindeck-u,1))` }
+      : { left: b.x + "px", top: `calc(${b.y}px - 22px*var(--pindeck-u,1))` });
     editing.sec.appendChild(h);
   }
   function onEditKey(e) {
@@ -783,7 +784,7 @@
 
   /* A free id for a new bullet on the same slide ("summary/li-4"); the server double-checks. */
   function newBulletEid(el) {
-    const prefix = el.closest("section").dataset.eid;
+    const prefix = el.closest(SLIDE_OF).dataset.eid;
     const used = new Set([...document.querySelectorAll("[data-eid]")].map((e) => e.dataset.eid));
     let id = `${prefix}/li`, k = 2;
     while (used.has(id)) id = `${prefix}/li-${k++}`;
@@ -843,18 +844,183 @@
       })));
   }
 
+  /* ---- Decks -----------------------------------------------------------------------------------------
+     What the editor needs from a deck: its slides, the current one, going to a slide, the slide size and
+     scale, and events when the slide or the scale changes. reveal.js provides all of it. */
+  function revealDeck() {
+    const ix = (index) => { const sec = Reveal.getSlides()[index]; return sec ? Reveal.getIndices(sec) : { h: 0, v: 0 }; };
+    return {
+      slides: () => Reveal.getSlides(),
+      current: () => Reveal.getCurrentSlide(),
+      goto(index) { if (Reveal.getSlides()[index]) { const i = ix(index); Reveal.slide(i.h, i.v); } },
+      hash(index) { const i = ix(index); return `#/${i.h}${i.v ? "/" + i.v : ""}`; },
+      size: () => ({ width: Reveal.getConfig().width, height: Reveal.getConfig().height }),
+      scale: () => Reveal.getScale() || 1,
+      on: (ev, fn) => Reveal.on(ev === "slide" ? "slidechanged" : ev, fn),
+      prepare() {   // no transitions, every build step shown; the measure and headless copies fill their frame
+        const base = { transition: "none", backgroundTransition: "none", fragments: false };
+        if (MODE === "main") Reveal.configure({ ...base });
+        else Reveal.configure({ ...base, margin: 0, keyboard: false });
+      },
+      viewport(width, height) {   // lay the deck out for this size whatever the window's
+        Object.assign(Reveal.getRevealElement().style, { width: width + "px", height: height + "px" });
+        Reveal.layout();
+      },
+      ready: (fn) => (Reveal.isReady() ? fn() : Reveal.on("ready", fn)),
+      keys() {},   // reveal.js's own keyboard handling stays
+    };
+  }
+
+  /* A deck made without reveal.js, whose slides <meta name="pindeck:slides"> names (and its size
+     <meta name="pindeck:size">). PinDeck shows the slides itself, one at a time and scaled to the frame,
+     over whatever the deck's own script does: the elements around the slides lose their transforms, a
+     backdrop covers the rest of the page, and the deck's script gets no keys while the editor has them.
+     The classes and styles added here live in the page only; the deck file is never written from the DOM. */
+  function selectorDeck() {
+    const root = document.documentElement;
+    const found = () => { const all = [...document.querySelectorAll(SLIDE_SEL)]; return all.filter((s) => !all.some((o) => o !== s && s.contains(o))); };
+    let list = [], cur = 0, scale = 1, sz = null, view = null;
+    const listeners = { slide: [], resize: [] };
+    const emit = (ev) => listeners[ev].forEach((fn) => fn());
+    function mark() {   // the slides, and the elements between them and <body>
+      list = found();
+      for (const s of list) {
+        s.classList.add("__pindeck_slide");
+        for (let a = s.parentElement; a && a !== document.body && a !== root; a = a.parentElement) a.classList.add("__pindeck_anc");
+      }
+    }
+    function size() {   // the first call also finds the slides
+      if (sz) return sz;
+      mark();
+      // the server refuses a deck without a readable size, so the fallback is only for a tag removed meanwhile
+      const m = /^(\d{2,5})\s*[x×*,\s]\s*(\d{2,5})$/i.exec(deckMeta("size") || "");
+      sz = m ? { width: +m[1], height: +m[2] } : { width: 1280, height: 720 };
+      return sz;
+    }
+    // what takes a slide and its containers out of the deck's own layout (scaling, stacking, page views)
+    const LOOSE = "transform:none !important; translate:none !important; scale:none !important; rotate:none !important; " +
+      "zoom:1 !important; filter:none !important; backdrop-filter:none !important; perspective:none !important; " +
+      "contain:none !important; will-change:auto !important; opacity:1 !important; isolation:auto !important; " +
+      "mix-blend-mode:normal !important; clip-path:none !important; transition:none !important;";
+    function addStyle(text) { const st = document.createElement("style"); st.textContent = text; document.head.appendChild(st); }
+    function fit() {
+      const { width, height } = size(), m = MODE === "main" ? 0.04 : 0;   // the margin reveal.js leaves in the editor
+      const vw = view?.width ?? innerWidth, vh = view?.height ?? innerHeight;
+      scale = Math.min(vw * (1 - m) / width, vh * (1 - m) / height) || 1;
+      root.style.setProperty("--pindeck-s", String(scale));
+      root.style.setProperty("--pindeck-x", `${(vw - width * scale) / 2}px`);
+      root.style.setProperty("--pindeck-y", `${(vh - height * scale) / 2}px`);
+    }
+    // a slide the deck's own CSS hides with display: none is shown as a block
+    function display(s) { s.classList.remove("__pindeck_block"); if (getComputedStyle(s).display === "none") s.classList.add("__pindeck_block"); }
+    function show(i) {
+      const s = list[i];
+      if (!s) return false;
+      const changed = i !== cur;
+      list[cur]?.classList.remove("__pindeck_cur");
+      cur = i;
+      s.classList.add("__pindeck_cur");
+      s.removeAttribute("inert"); s.removeAttribute("hidden");   // the deck's script marks the slides it does not show
+      display(s);
+      return changed;
+    }
+    return {
+      slides: () => list,
+      current: () => list[cur],
+      goto(index) { if (show(index)) emit("slide"); },
+      hash(index) { const s = list[index]; return s?.id ? `#${encodeURIComponent(s.id)}` : `#${index + 1}`; },
+      size,
+      scale: () => scale,
+      on: (ev, fn) => listeners[ev]?.push(fn),
+      prepare() {
+        const { width, height } = size();
+        addStyle(`
+          html.__pindeck_deck, html.__pindeck_deck body { overflow:hidden !important; }
+          html.__pindeck_deck .__pindeck_anc { ${LOOSE} position:static !important; z-index:auto !important; }
+          html.__pindeck_deck .__pindeck_slide:not(.__pindeck_cur) { visibility:hidden !important; }
+          html.__pindeck_deck .__pindeck_slide.__pindeck_cur { ${LOOSE} position:fixed !important; inset:0 auto auto 0 !important;
+            margin:0 !important; width:${width}px !important; height:${height}px !important; min-width:0 !important; min-height:0 !important;
+            max-width:none !important; max-height:none !important; transform-origin:0 0 !important;
+            transform:translate(var(--pindeck-x, 0px), var(--pindeck-y, 0px)) scale(var(--pindeck-s, 1)) !important;
+            visibility:visible !important; z-index:2147483001 !important; }
+          html.__pindeck_deck .__pindeck_slide.__pindeck_block { display:block !important; }
+          html.__pindeck_deck .__pindeck_backdrop { position:fixed; inset:0; z-index:2147483000; background:var(--pindeck-bg, #fff); }
+          html.__pindeck_deck aside.notes { display:none !important; }`);
+        // the backdrop has the page's own background
+        const bg = [document.body, root].map((e) => getComputedStyle(e).backgroundColor).find((c) => !/^(transparent|rgba\(.*,\s*0\))$/.test(c));
+        if (bg) root.style.setProperty("--pindeck-bg", bg);
+        const backdrop = document.createElement("div");
+        backdrop.className = "__pindeck_backdrop";
+        document.body.appendChild(backdrop);
+        root.classList.add("__pindeck_deck");
+        fit();
+        show(cur);
+        addEventListener("resize", () => { fit(); emit("resize"); });
+        // the deck's script may hide the slide again (when it changes slides itself)
+        new MutationObserver((recs) => { if (recs.some((r) => r.target === list[cur])) { list[cur].removeAttribute("inert"); list[cur].removeAttribute("hidden"); display(list[cur]); } })
+          .observe(document.body, { subtree: true, attributes: true, attributeFilter: ["inert", "hidden", "style"] });
+      },
+      viewport(width, height) { view = { width, height }; fit(); },   // lay the slide out for this size whatever the window's
+      ready: (fn) => (document.readyState === "complete" ? fn() : addEventListener("load", () => fn(), { once: true })),
+      keys() {   // after the editor's own key handler: slide keys change the slide here, and the deck's script gets none
+        const field = (t) => t.closest?.("input, textarea, select, [contenteditable]");
+        const STEP = { ArrowRight: 1, ArrowDown: 1, PageDown: 1, ArrowLeft: -1, ArrowUp: -1, PageUp: -1 };
+        addEventListener("keydown", (e) => {
+          if (field(e.target)) return;
+          if (!e.metaKey && !e.ctrlKey && !e.altKey) {
+            const k = e.key, step = k === " " ? (e.shiftKey ? -1 : 1) : STEP[k];
+            const to = step ? cur + step : k === "Home" ? 0 : k === "End" ? list.length - 1 : null;
+            if (to != null) { e.preventDefault(); this.goto(Math.max(0, Math.min(list.length - 1, to))); }
+          }
+          e.stopImmediatePropagation();
+        }, true);
+        for (const t of ["keyup", "keypress"]) addEventListener(t, (e) => { if (!field(e.target)) e.stopImmediatePropagation(); }, true);
+      },
+      /* ?editor=pdf: every slide as a page of its own size, for PinDeck's PDF export (lib/pdf.mjs prints
+         this page's DOM as it is once laid out, so the layout is all CSS) */
+      print() {
+        const { width, height } = size();
+        const all = params.get("showHiddenSlides") === "true";
+        const shown = list.filter((s) => all || s.getAttribute("data-visibility") !== "hidden");
+        for (const s of list) { s.classList.add("pdf-page"); if (!shown.includes(s)) s.classList.add("__pindeck_skip"); }
+        shown.at(-1)?.classList.add("__pindeck_last");
+        const OUT = ":not(.__pindeck_anc):not(.__pindeck_slide)";
+        addStyle(`
+          @page { size:${width}px ${height}px; margin:0; }
+          html.__pindeck_print, html.__pindeck_print body { margin:0 !important; padding:0 !important; width:auto !important;
+            height:auto !important; overflow:visible !important; }
+          html.__pindeck_print .__pindeck_anc { ${LOOSE} position:static !important; display:block !important; width:auto !important;
+            height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; }
+          html.__pindeck_print body > ${OUT}:not(svg), html.__pindeck_print .__pindeck_anc > ${OUT}:not(svg) { display:none !important; }
+          html.__pindeck_print body > svg${OUT}, html.__pindeck_print .__pindeck_anc > svg${OUT} { position:absolute !important;
+            width:0 !important; height:0 !important; overflow:hidden !important; }
+          html.__pindeck_print .__pindeck_slide { ${LOOSE} position:relative !important; inset:auto !important; margin:0 !important;
+            width:${width}px !important; height:${height}px !important; max-width:none !important; max-height:none !important;
+            visibility:visible !important; overflow:hidden !important; break-inside:avoid; break-after:page; page-break-after:always; }
+          html.__pindeck_print .__pindeck_slide.__pindeck_last { break-after:auto; page-break-after:auto; }
+          html.__pindeck_print .__pindeck_slide.__pindeck_block { display:block !important; }
+          html.__pindeck_print .__pindeck_skip { display:none !important; }
+          html.__pindeck_print aside.notes { display:none !important; }`);
+        root.classList.add("__pindeck_print");
+        shown.forEach(display);
+      },
+    };
+  }
+
   /* ---- Start ------------------------------------------------------------------------------------- */
   async function start() {
-    W = Reveal.getConfig().width; H = Reveal.getConfig().height;
-    const base = { transition: "none", backgroundTransition: "none", fragments: false };
-    const setUnit = () => document.documentElement.style.setProperty("--u", String(1 / (Reveal.getScale() || 1)));
-    Reveal.on("resize", setUnit);
-    if (MODE === "main") Reveal.configure({ ...base });
-    else Reveal.configure({ ...base, margin: 0, keyboard: false });
+    ({ width: W, height: H } = deck.size());
+    const setUnit = () => document.documentElement.style.setProperty("--pindeck-u", String(1 / (deck.scale() || 1)));
+    deck.on("resize", setUnit);
+    deck.prepare();
     setUnit();
     await document.fonts.ready;
 
     if (MODE === "shot" || MODE === "dump") {
+      // the size of headless Chrome's window, which the page itself gets only once the screenshot is
+      // taken: lay the deck out for it now rather than letterboxed into the shorter viewport
+      const vw = +params.get("width"), vh = +params.get("height");
+      if (vw > 0 && vh > 0) { deck.viewport(vw, vh); setUnit(); }
       const sec = byEid(params.get("slide") || "") || slides()[0];
       goto(indexOf(sec));
       await nextFrame();
@@ -872,11 +1038,11 @@
     }
 
     const api = {
-      info, goto, indices, highlight, reloadCss,
+      info, goto, presentHash, highlight, reloadCss,
       setMode, selectEid, nudge, editSelection,
       // a new slide: select its title and open it for typing
       editTitle() {
-        const sec = Reveal.getCurrentSlide();
+        const sec = deck.current();
         const h = sec?.querySelector("h1[data-eid], h2[data-eid], h3[data-eid]");
         if (!h || mode !== "select") return;
         select(h, sec);
@@ -942,22 +1108,35 @@
           host()?.key(k, { meta, shift: e.shiftKey });
         }
       }, true);
-      Reveal.on("slidechanged", () => { if (editing) finishEdit(true); hideHover(); if (sel) select(null, null); host()?.slideChanged(indexOf(Reveal.getCurrentSlide())); });
-      Reveal.on("resize", () => { if (sel) drawSel(); });
+      deck.on("slide", () => {
+        if (editing) finishEdit(true); hideHover(); if (sel) select(null, null);
+        // a deck made without reveal.js lays out only the current slide at the slide size: pins on the
+        // others were placed in another layout
+        if (SLIDE_SEL) renderPins(pins);
+        host()?.slideChanged(indexOf(deck.current()));
+      });
+      deck.on("resize", () => { if (sel) drawSel(); });
       setMode("select");
       // a banner on hidden slides, so nobody edits one without noticing (only in the editor view)
       for (const sec of slides()) {
         if (sec.getAttribute("data-visibility") !== "hidden") continue;
         const b = document.createElement("div");
         b.className = "__hidden-banner";
-        b.textContent = "Hidden slide · skipped when presenting and in PDFs";
+        b.textContent = SLIDE_SEL ? "Hidden slide · skipped in PDFs" : "Hidden slide · skipped when presenting and in PDFs";
         sec.appendChild(b);
       }
       const startAt = +params.get("start");
       if (startAt) goto(startAt);
+      deck.keys();
     }
     host()?.bridgeReady(MODE, api, window);
   }
-  if (typeof Reveal === "undefined") return;
-  if (Reveal.isReady()) start(); else Reveal.on("ready", start);
+  if (SLIDE_SEL) {
+    deck = selectorDeck();
+    deck.ready(() => (MODE === "pdf" ? deck.print() : start()));
+    return;
+  }
+  if (typeof Reveal === "undefined" || MODE === "pdf") return;   // reveal.js lays out its own print view
+  deck = revealDeck();
+  deck.ready(start);
 })();

package/public/editor.js

@@ -229,7 +229,8 @@ function renderSlides() {
         ${s.kind !== "content" ? `<span class="kind">${esc(s.kind.replace(/-slide$/, ""))}</span>` : ""}
         ${s.hidden ? '<span class="kind hid">hidden</span>' : ""}</span>
       ${counts[i] ? `<span class="badge" title="${counts[i]} pin(s)">${counts[i]}</span>` : "<span></span>"}
-      <button class="eye" data-eye="${i}" title="${s.hidden ? "Show this slide again" : "Hide this slide (skipped when presenting)"}"
+      <button class="eye" data-eye="${i}" title="${s.hidden ? "Show this slide again" : state.status?.slideSelector ?
+        "Hide this slide (left out of PDFs)" : "Hide this slide (skipped when presenting)"}"
         aria-label="${s.hidden ? "Show" : "Hide"} slide ${i + 1}">${s.hidden ? EYE_ICON : EYE_OFF_ICON}</button>
     </li>`).join("");
   $("slide-list").querySelector("li.active")?.scrollIntoView({ block: "nearest" });
@@ -492,8 +493,7 @@ $("export-menu").addEventListener("click", async (e) => {
 });
 
 $("present").onclick = () => {
-  const ix = main?.bridge.indices(state.current) || { h: 0, v: 0 };
-  window.open(`/deck/#/${ix.h}${ix.v ? "/" + ix.v : ""}`, "_blank");
+  window.open(`/deck/${main?.bridge.presentHash(state.current) || ""}`, "_blank");
 };
 
 /* ---- Pins --------------------------------------------------------------------------------------- */
@@ -739,6 +739,7 @@ document.addEventListener("keydown", (e) => {
 });
 
 /* ---- Server events ---------------------------------------------------------------------------------- */
+let shownProblem = null;   // the deck problem last shown, so a status update does not repeat it
 function applyStatus(s) {
   state.status = s;
   // the deck's name in the header ("ocean-example", or "talk.html" for a named deck file), its full path on hover
@@ -785,6 +786,9 @@ function applyStatus(s) {
   $("server-note").textContent = caps.label ? `Server: ${caps.label}` : "";
   $("server-note").title = off.length ? `Not available on this server:\n${off.join("\n")}\n\nWhy:\n${reasons.join("\n")}` : "";
   $("add-slide-btn").disabled = !!s.busy;
+  // the deck's slide tags stopped working while PinDeck runs (at start, such a deck is refused)
+  if (s.deckProblem && s.deckProblem !== shownProblem) toast(s.deckProblem, { ms: 20000 });
+  shownProblem = s.deckProblem;
   renderToolbar();
 }
 function connect() {

package/server.mjs

@@ -24,7 +24,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import { spawn, execFile } from "node:child_process";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { assignEids, parse, findSlides, setStyles, getInner, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd } from "./lib/eids.mjs";
+import { assignEids, parse, findSlides, slideSelector, deckSize, setStyles, getInner, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd } from "./lib/eids.mjs";
 import { unifiedDiff } from "./lib/diff.mjs";
 import { ClaudeSession } from "./lib/claude.mjs";
 import { CodexSession } from "./lib/codex.mjs";
@@ -45,7 +45,8 @@ const USAGE = `Usage: pindeck [deck-folder | deck-file.html] [--port 5180] [--pr
        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.
+folder), which then opens its index.html. 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">.
 login prints a new one-time login link for the PinDeck running for that deck
 (without a deck: for the PinDeck started last).
 --asset-root lets the deck use files outside its folder: a folder that contains the deck (paths such as
@@ -126,8 +127,9 @@ if (deckProblem) {
   console.error(`${deckProblem}\n\n${USAGE}`);
   process.exit(1);
 }
-// only reveal.js for now: another framework's deck is left exactly as it is (no ids, no state)
-const frameworkProblem = unsupportedMessage(fs.readFileSync(path.join(DECK_DIR, DECK_FILE), "utf8"), DECK_FILE);
+// reveal.js, or a deck that names its slides: another framework's deck is left exactly as it is (no ids, no state)
+const deckAtStart = fs.readFileSync(path.join(DECK_DIR, DECK_FILE), "utf8");
+const frameworkProblem = unsupportedMessage(deckAtStart, DECK_FILE);
 if (frameworkProblem) {
   console.error(frameworkProblem);
   process.exit(1);
@@ -159,6 +161,22 @@ const MIME = { html: "text/html; charset=utf-8", css: "text/css; charset=utf-8",
   mp4: "video/mp4", webm: "video/webm", mov: "video/quicktime", pdf: "application/pdf", md: "text/plain; charset=utf-8" };
 const hash = (s) => crypto.createHash("sha1").update(s).digest("hex");
 const readDeck = (f) => { try { return fs.readFileSync(path.join(DECK_DIR, f), "utf8"); } catch { return null; } };
+/* A deck made without reveal.js names its slides with <meta name="pindeck:slides"> (null for reveal.js) and
+   their size with <meta name="pindeck:size">. Read from the deck as it is now, so a changed tag counts from
+   the next headless run or Claude session. Headless Chrome opens such a deck at the slide size, so a
+   screenshot is the slide itself. */
+function deckSlides() {
+  const tree = parse(readDeck(DECK_FILE) || "");
+  const selector = slideSelector(tree);
+  return { selector, size: (selector && deckSize(tree)) || { width: 1280, height: 720 } };
+}
+/* Why the deck no longer names slides PinDeck can use (a tag changed while PinDeck runs), or null: the
+   start-up check's message, which the editor shows and Claude is told */
+function deckProblemNow() {
+  const html = readDeck(DECK_FILE);
+  return (html != null && unsupportedMessage(html, DECK_FILE)?.replace(/ Nothing was changed\.$/, "")) || null;
+}
+let deckNow = { selector: deckSlides().selector, problem: null };   // for the editor; kept current by scheduleFlush
 const ourWrites = new Map(); // file -> { hash, manual } of what we wrote, to tell our writes from others
 function writeDeck(f, content, manual = false) {
   ourWrites.set(f, { hash: hash(content), manual });
@@ -283,15 +301,25 @@ const CHROME = CAPS.chromePath;   // null when Chrome features are unavailable (
 /* Headless Chrome on macOS often lingers long after it has written its output, so we
    watch the output and stop Chrome as soon as `done(stdout, stderr)` says we have it. */
 let chromeSeq = 0;
+/* The page gets the window's size too. Chrome lays it out about 87 px shorter than the window (room for
+   a toolbar it does not draw) and grows it only for the screenshot itself, too late for some versions
+   to lay the slide out again, so shot and dump lay the deck out for this size (see bridge.js). */
+function sized(url, size) {
+  const u = new URL(url);
+  u.searchParams.set("width", size.width);
+  u.searchParams.set("height", size.height);
+  return u.href;
+}
 function chrome(args, done) {
   if (!CHROME) return Promise.reject(new Error(`Screenshots are not available: ${CAPS.screenshot.reason}.`));
   return new Promise((resolve, reject) => {
     // a profile per run: concurrent runs must not share one
     const profile = path.join(STATE_DIR, "chrome", `p${process.pid}-${++chromeSeq}`);
+    const { size } = deckSlides();
     const proc = spawn(CHROME, ["--headless=new", "--disable-gpu", "--hide-scrollbars", "--no-first-run",
       "--no-default-browser-check", "--disable-extensions", "--mute-audio", `--user-data-dir=${profile}`,
-      "--window-size=1280,720", "--force-device-scale-factor=1", "--virtual-time-budget=5000",
-      ...args.map((a) => a.startsWith(ORIGIN + "/") ? chromeStart(profile, a) : a)]);
+      `--window-size=${size.width},${size.height}`, "--force-device-scale-factor=1", "--virtual-time-budget=5000",
+      ...args.map((a) => a.startsWith(ORIGIN + "/") ? chromeStart(profile, sized(a, size)) : a)]);
     let out = "", err = "", finished = false;
     const finish = (fn, v) => {
       if (finished) return;
@@ -467,7 +495,8 @@ let catalog = { claude: { models: [] }, codex: { models: [] } }, discovering = n
 let session = null, starting = null;
 const status = () => ({ busy: state.busy, switching: state.switching, model: state.model, sessionId: state.sessionId, settings: { ...settings },
   running: !!session?.running, provider: settings.provider, models: catalog, deck: DECK_DIR, deckFile: DECK_FILE,
-  chrome: CAPS.screenshot.available, capabilities: publicCapabilities(CAPS), rev: deckRev(),
+  chrome: CAPS.screenshot.available, slideSelector: deckNow.selector, deckProblem: deckNow.problem,
+  capabilities: publicCapabilities(CAPS), rev: deckRev(),
   undo: changeLabel(liveTurns().at(-1)), redo: changeLabel(state.redo.at(-1)) });
 const pushStatus = () => broadcast("status", status());
 
@@ -479,6 +508,15 @@ const systemPrompt = fs.readFileSync(path.join(EDITOR_DIR, "lib/system-prompt.md
   (ASSET_ROOTS.length ? `\n\n## Files outside the deck folder\nThe deck may use files in ${ASSET_ROOTS.join(", ")}: refer to ` +
     `them with paths relative to ${DECK_FILE} (such as ../shared/style.css). You can read them; do not edit them, ` +
     `other decks may use them too.\n` : "");
+/* For a deck made without reveal.js: what its slides are, from its selector as it is at each session start */
+function slidesInstructions() {
+  const { selector } = deckSlides();
+  return selector ? `\n\n## Slides of this deck\nThis deck is not made with reveal.js: its slides are the elements matching the ` +
+    `CSS selector \`${selector}\` (<meta name="pindeck:slides">), and the deck's own script shows them. Where these ` +
+    `instructions say <section> or reveal.js, read an element matching that selector, and that script. A new slide is ` +
+    `a new such element next to the others; keep the pindeck meta tags. Hidden slides (data-visibility="hidden") are ` +
+    `left out of PinDeck's PDF exports; whether presenting skips them depends on the deck's script.\n` : "";
+}
 /* What Claude may never change, whatever the edit rules allow: the locked brand files, vendored libraries,
    git's own files, and other decks in this folder (a named deck shares its folder with them). Deny rules
    win over allow rules; a locked file changed anyway is restored after the turn (lock 2 in finishTurn). */
@@ -515,7 +553,7 @@ When context mentions Read, use pindeck_read. Read screenshots with pindeck_read
 Read README.md and the deck instructions below for conventions. Use layout after every visual change.
 PDF tables should be reconstructed as HTML; pdf-figure renders figures. Audio is embedded by path.
 
-## Hand edits`) + deckInstructions();
+## Hand edits`) + slidesInstructions() + deckInstructions();
 function makeSession(choice) {
   let initial = null;
   const options = {
@@ -535,7 +573,7 @@ function makeSession(choice) {
      explicit), PinDeck's own commands, never the locked paths. Deny rules win over allow rules. */
   const agent = choice.provider === "codex" ? new CodexSession({ ...options, settings: choice,
     instructions: codexInstructions(), tools: agentTools }) : new ClaudeSession({ ...options,
-    args: () => ["--append-system-prompt", systemPrompt + deckInstructions(),
+    args: () => ["--append-system-prompt", systemPrompt + slidesInstructions() + deckInstructions(),
       "--setting-sources", "", "--strict-mcp-config", "--safe-mode", "--disable-slash-commands",   // no settings files, no MCP servers or connectors
       "--permission-mode", "default", "--tools", "Read,Glob,Grep,Edit,Write,Bash",
       "--allowedTools", "Read", "Glob", "Grep", "Edit(./**)", "Write(./**)",
@@ -867,6 +905,14 @@ function scheduleFlush() {
       };
       eidTimer = setTimeout(pass, 800);
     }
+    if (files.includes(DECK_FILE)) {   // the slide tags, by hand or by Claude: tell both when they stop working
+      const now = { selector: deckSlides().selector, problem: deckProblemNow() };
+      if (now.selector !== deckNow.selector || now.problem !== deckNow.problem) {
+        if (now.problem) state.notes = [...new Set([...state.notes, `PinDeck cannot use the deck's slides now: ${now.problem}`])];
+        deckNow = now;
+        pushStatus();
+      }
+    }
     // manual: only drag/resize writes, which the browser already shows; no reload of the visible slide
     broadcast("files", { files, manual, rev: deckRev() });
   }, 120);
@@ -1254,7 +1300,11 @@ const server = http.createServer(async (req, res) => {
       return serveFile(res, f, (s) => {
         // headless runs must not stream media, or Chrome never finishes the page
         if (mode === "shot" || mode === "dump" || mode === "pdf") s = s.replace(/\bpreload="(auto|metadata)"/g, 'preload="none"');
-        if (mode === "pdf") return s.replace(/<\/head>/i, PDF_HEAD_TAG).replace(/<\/body>/i, PDF_PAGE_TAG);
+        if (mode === "pdf") {
+          s = s.replace(/<\/head>/i, PDF_HEAD_TAG).replace(/<\/body>/i, PDF_PAGE_TAG);
+          // a deck that names its slides (in the file as it is now) is laid out by the bridge; reveal.js lays out its own
+          return slideSelector(parse(s)) ? s.replace(/<\/body>/i, BRIDGE_TAG) : s;
+        }
         return s.replace(/<\/body>/i, BRIDGE_TAG);
       });
     }
@@ -1371,14 +1421,16 @@ const server = http.createServer(async (req, res) => {
       const b = await body(req);
       if (staleEdit(res, b)) return;
       const before = snapshot(EDITABLE);
-      const slides = findSlides(parse(before[DECK_FILE]));
+      const tree = parse(before[DECK_FILE]), slides = findSlides(tree);
       const index = slides.findIndex((s) => s.attrs["data-eid"]?.value === b.eid);
       if (index < 0) return json(res, 404, { error: "Slide not found in the file." });
       const r = setAttr(before[DECK_FILE], b.eid, "data-visibility", b.hidden ? "hidden" : null);
       if (!r.changed) return json(res, 200, { unchanged: true });
+      const skipped = slideSelector(tree) ? "left out of PDF exports (whether presenting skips them depends on the deck's script)"
+        : "skipped when presenting and in PDF exports";
       const turnId = recordHandEdit(before, r.html, `${b.hidden ? "Hid" : "Showed"} slide ${index + 1}`,
         `The user ${b.hidden ? "hid" : "showed again"} slide ${index + 1} (${b.eid}). Hidden slides carry ` +
-        `data-visibility="hidden": they stay in the file but are skipped when presenting and in PDF exports.`,
+        `data-visibility="hidden": they stay in the file but are ${skipped}.`,
         { manual: true, chat: false });   // the editor reloads the slide itself; undo is in the toolbar
       return json(res, 200, { turnId, index });
     }
@@ -1624,11 +1676,13 @@ const server = http.createServer(async (req, res) => {
       return text(res, r.status || 200, r.text);
     }
     if (p === "/api/slides") {
-      return text(res, 200, slideList().map((s) => `${String(s.index + 1).padStart(2)}  ${s.eid}`).join("\n"));
+      const list = slideList(), why = !list.length && deckProblemNow();
+      if (why) return text(res, 409, why);
+      return text(res, 200, list.map((s) => `${String(s.index + 1).padStart(2)}  ${s.eid}`).join("\n"));
     }
     if (p === "/api/layout" || p === "/api/shot") {
       const slide = resolveSlide(url.searchParams.get("slide"));
-      if (!slide) return text(res, 404, `No slide "${url.searchParams.get("slide")}". Use \`${CLI_CMD} slides\`.`);
+      if (!slide) return text(res, 404, deckProblemNow() || `No slide "${url.searchParams.get("slide")}". Use \`${CLI_CMD} slides\`.`);
       if (!slide.eid) runEidPass();
       const s2 = slide.eid ? slide : resolveSlide(String(slide.index + 1));
       if (p === "/api/shot") {