pindeck 4.0.0-beta.1 → 4.1.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 What each PinDeck version brought, newest first. Releases are on [GitHub](https://github.com/ehabets/PinDeck/releases).
 
 
+* **4.1.0-beta.1**: select several elements at once.
+  - `⌘`-click selects several elements on a slide: they move and nudge together (one undo step), `Delete` removes them after one confirmation, and the assistant gets all of them as "these".
+  - `cli.mjs element <eid>...` prints elements' HTML as written in the deck, so the assistant can read one element of a long slide line.
+  - The PinDeck version shows beside the logo.
+  - A "Created by PinDeck" badge with a QR code for a closing slide, in light and dark (see the README).
+
 * **4.0.0-beta.1**: review comments, and Quarto decks.
   - **Comment** keeps a note on a pinned element or a slide for later, outside the deck. Comments are found again after changes or flagged, listed in the Comments panel, sent to the assistant as one request, and written as a review packet for an agent outside PinDeck. After Sebastian J. Schlecht's review mode.
   - `pindeck talk.qmd` opens a Quarto deck: the assistant edits the source, PinDeck renders after every change, and hand edits of the output are off. An example deck in `quarto-mathjax-example/`.

package/README.md

@@ -1,6 +1,6 @@
 # PinDeck
 
-> **macOS and Linux · Version 4 beta preview** (`4.0.0-beta.1`). The beta is on npm’s `beta` channel and the [`v4-beta`](https://github.com/ehabets/PinDeck/tree/v4-beta) branch; the stable release is 3.4.0 (`npx pindeck`, on [`main`](https://github.com/ehabets/PinDeck)). 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](docs/linux-server.md#running-on-a-linux-server)). Windows is not supported. The beta keeps its settings and chats in `~/.pindeck-v4`, apart from 3.x (`~/.pindeck-v3`) and 2.x (`~/.pindeck`) (see [Models, providers and configuration](docs/configuration.md#models-providers-and-configuration)).
+> **macOS and Linux · Version 4 beta preview** (`4.1.0-beta.1`). The beta is on npm’s `beta` channel and the [`v4-beta`](https://github.com/ehabets/PinDeck/tree/v4-beta) branch; the stable release is 3.4.0 (`npx pindeck`, on [`main`](https://github.com/ehabets/PinDeck)). 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](docs/linux-server.md#running-on-a-linux-server)). Windows is not supported. The beta keeps its settings and chats in `~/.pindeck-v4`, apart from 3.x (`~/.pindeck-v3`) and 2.x (`~/.pindeck`) (see [Models, providers and configuration](docs/configuration.md#models-providers-and-configuration)).
 
 **Pin it. Say it. Done.** PinDeck is a local editor for HTML slide decks (reveal.js): the slides on the left, the slide in the middle, and a chat with Claude Code or OpenAI Codex on the right. You click elements to pin them, write what to change, and the selected assistant edits the HTML and CSS. The slide updates in place.
 
@@ -26,7 +26,7 @@ Install the beta from npm:
 ```bash
 npx pindeck@beta /path/to/deck
 # Or select this exact beta:
-npx pindeck@4.0.0-beta.1 /path/to/deck
+npx pindeck@4.1.0-beta.1 /path/to/deck
 ```
 
 Or run it from the `v4-beta` branch, which includes the example decks:
@@ -66,6 +66,12 @@ Codex integration uses OpenAI’s experimental `dynamicTools` extension to the a
 * [How it works](docs/how-it-works.md): the architecture, the files, and the current limitations.
 * [Changelog](CHANGELOG.md): what each version brought.
 
+## "Created by PinDeck" badge
+
+Made your slides with PinDeck? Feel free to put the badge on a closing slide. Its QR code links to this repository. Use the
+[light](docs/badge/created-by-pindeck-light.svg) or [dark](docs/badge/created-by-pindeck-dark.svg) SVG, or the
+[light](docs/badge/created-by-pindeck-light.png) or [dark](docs/badge/created-by-pindeck-dark.png) PNG. To keep the code easy to scan, show it at least 300 px wide.
+
 ## Contributing
 
 Bug reports, ideas, example decks and pull requests are welcome. [CONTRIBUTING.md](CONTRIBUTING.md) explains how to report a bug, set up PinDeck for development, test a change by hand, and what a pull request should contain. In short: no npm dependencies, deck files are edited only where they must change, both backends’ permissions stay narrow, and the README describes what users see.

package/cli.mjs

@@ -5,6 +5,7 @@
                                     (add --issues for the issues only: layout 9 10 11 --issues)
    node cli.mjs shot <slide>...     screenshots with pin markers; prints the PNG paths
    node cli.mjs slides              slide numbers and ids
+   node cli.mjs element <eid>...    the HTML of elements, by data-eid, as written in the deck
    node cli.mjs pdf handout         PDF with one page per slide (build steps in their final state)
    node cli.mjs pdf presentation    PDF with one page per build step
                                     (add "all" to include hidden slides: pdf handout all)
@@ -64,8 +65,8 @@ if (cmd === "git-setup") {
 }
 const issuesOnly = cmd === "layout" && rest.includes("--issues");
 const slides = rest.filter((a) => a !== "--issues");
-if (!["layout", "shot", "slides", "pdf", "pdf-figure", "resolve", "reply"].includes(cmd)) {
-  console.error("Usage: node cli.mjs layout|shot <slide>... [--issues]  |  node cli.mjs slides  |  node cli.mjs pdf handout|presentation  |  " +
+if (!["layout", "shot", "slides", "element", "pdf", "pdf-figure", "resolve", "reply"].includes(cmd)) {
+  console.error("Usage: node cli.mjs layout|shot <slide>... [--issues]  |  node cli.mjs slides  |  node cli.mjs element <eid>...  |  node cli.mjs pdf handout|presentation  |  " +
     "node cli.mjs resolve <comment> [what was done]  |  node cli.mjs reply <comment> <text>  |  " +
     "node cli.mjs pdf-figure <pdf> <page> [x,y,w,h] [figures/name.png] [--width px]  |  node cli.mjs git-setup [deck]");
   process.exit(2);
@@ -96,6 +97,7 @@ if (!url || !token) {
 const queries = cmd === "pdf-figure" ? [figureQuery([...rest])]
   : cmd === "pdf" ? [{ slide: rest[0] || "handout", ...(rest[1] === "all" ? { all: "1" } : {}) }]
   : cmd === "resolve" || cmd === "reply" ? [{ id: rest[0] || "", note: rest.slice(1).join(" ") }]
+  : cmd === "element" ? (rest.length ? rest : [""]).map((eid) => ({ eid }))
   : cmd === "slides" ? [{}] : (slides.length ? slides : ["current"]).map((slide) => ({ slide }));
 let ok = true;
 for (const q of queries) {

package/docs/how-it-works.md

@@ -24,7 +24,7 @@
 | `server.mjs` | The server for one deck: UI, deck files, events, backend session, undo, CLI endpoints. Behind the front, or on its own (`node server.mjs <deck>`). |
 | `lib/login.mjs`, `lib/deck-target.mjs`, `lib/deck-list.mjs` | Login links and cookies, which deck a path names (and its state folder), and the decks the menu lists. |
 | `lib/servers.mjs` | The PinDecks running for this user, and which one serves a deck (`pindeck login`, `cli.mjs`). |
-| `cli.mjs` | `layout`, `shot`, `slides`, `pdf handout` / `pdf presentation` and `pdf-figure` commands for the backends (and for you), and `git-setup`. |
+| `cli.mjs` | `layout`, `shot`, `slides`, `element`, `pdf handout` / `pdf presentation` and `pdf-figure` commands for the backends (and for you), and `git-setup`. |
 | `public/` | The editor page; `bridge.js`, which is injected into the deck in edit mode (never saved to it); `events-worker.js`, the event stream the tabs of a browser share. |
 | `lib/pptx.mjs`, `lib/zip.mjs`, `lib/xml.mjs` | Reading `.pptx` files (no dependencies): slides, text, shapes and their positions, notes. |
 | `lib/pptx-import.mjs` | Turns PowerPoint slides into slides of the deck: figures, tables, build steps, audio, layout, HTML in the deck's style. |

package/docs/using.md

@@ -12,11 +12,11 @@ A deck is open in one PinDeck at a time: started again for a deck that another P
 
 | Action | How |
 |---|---|
-| Select, move, resize | Select mode (`V`, the default): click an element to select it, drag to move, pull a handle to resize. Elements snap to the slide edges and centre, the footer rule and other elements (pink guides); hold `Alt` to turn snapping off, `Shift` to move along one axis. Images keep their aspect ratio (`Shift` toggles). Arrow keys nudge by 1 px, `Shift`+arrows by 10 px. `Delete` removes the selected element after a confirmation; a picture goes with its caption, and files nothing else in the deck uses can be deleted with it. `⌘Z` brings both back. |
+| Select, move, resize | Select mode (`V`, the default): click an element to select it, drag to move, pull a handle to resize. Elements snap to the slide edges and centre, the footer rule and other elements (pink guides); hold `Alt` to turn snapping off, `Shift` to move along one axis. Images keep their aspect ratio (`Shift` toggles). Arrow keys nudge by 1 px, `Shift`+arrows by 10 px. `⌘`-click adds an element to the selection or takes it out: the elements move, nudge and are deleted together (they have no resize handles), and the assistant gets all of them. `Delete` removes the selected element after a confirmation; a picture goes with its caption, and files nothing else in the deck uses can be deleted with it. `⌘Z` brings both back. |
 | Edit text | Double-click the text (or select it and press `Enter`). The element shows its source, so math appears as TeX, e.g. `\(\mu=0.5\)`. `Enter` or a click elsewhere saves, `Esc` cancels, `Shift+Enter` adds a line break, `⌘B` / `⌘I` make text bold or italic. In a bullet, `Enter` splits it at the cursor and continues in a new bullet below; `Enter` on an empty new bullet removes it and stops. Pasted text arrives as plain text. Table cells are edited one at a time. |
 | Undo, redo | `⌘Z` / `⇧⌘Z` or the toolbar arrows. One history for your hand edits and the assistant's changes. |
 | Pin elements | Press `P` (or the Pin button), click elements; each click gets a number. Click a marker to remove it, `Esc` to stop. |
-| Ask the assistant | Write in the sidebar and refer to pins by number: "1: align with 2, make 3 smaller". The selected element is sent too, so "make this smaller" works. `Enter` sends, `Shift+Enter` adds a new line. |
+| Ask the assistant | Write in the sidebar and refer to pins by number: "1: align with 2, make 3 smaller". The selected element is sent too, so "make this smaller" works; with several selected, "align these" does. `Enter` sends, `Shift+Enter` adds a new line. |
 | Visual questions | **+** in the chat, then **Screenshot**: the current slide with the pins of that message is attached when you send. If Chrome cannot take it, the assistant is told. **Stop** during the screenshot stops at once. |
 | Review | Each answer ends with the changed files and a **Diff** button; the most recent change still in effect also has an **Undo** button. After a restart, earlier changes keep their *undone* mark but have no Diff or Undo (the undo history ends with the run). |
 | Stop | **Stop** interrupts the assistant; the conversation continues. **New chat** starts a new conversation; your slides, Undo and Redo stay as they are. |

package/lib/agent-tools.mjs

@@ -13,7 +13,7 @@ export const deckTools = [
   { type: 'function', name: 'pindeck_read', description: 'Read a deck text file, attached image, screenshot, or PDF page. For PDFs supply a 1-based page; returns page text and its rendered image. For text use offset to read beyond the first 120000 characters.', inputSchema: { ...schema({ path: str, page: { type: 'integer', minimum: 1 }, offset: { type: 'integer', minimum: 0 } }), required: ['path'] } },
   { type: 'function', name: 'pindeck_edit', description: 'Replace one exact unique text occurrence in a file of the deck folder: the deck file, theme.css or another of its files. Read the file first. brand.css, vendor/, .git/ and other decks in the folder are locked.', inputSchema: { ...schema({ path: str, oldText: str, newText: str }), required: ['path', 'oldText', 'newText'] } },
   { type: 'function', name: 'pindeck_write', description: 'Create a new file in the deck folder (missing folders are created), or replace all of an existing one. Prefer pindeck_edit for changes to existing files. The same files are locked as for pindeck_edit.', inputSchema: { ...schema({ path: str, content: str }), required: ['path', 'content'] } },
-  { type: 'function', name: 'pindeck_command', description: 'Run a PinDeck command: layout, shot, slides, pdf, pdf-figure, resolve (a review comment: its id, then what you did) or reply (to a review comment you leave open: its id, then why). Pass individual arguments in an array, never a shell command. Use pindeck_read on returned image paths.', inputSchema: { ...schema({ command: { enum: ['layout', 'shot', 'slides', 'pdf', 'pdf-figure', 'resolve', 'reply'] }, args: { type: 'array', items: str, maxItems: 100 } }), required: ['command', 'args'] } },
+  { type: 'function', name: 'pindeck_command', description: 'Run a PinDeck command: layout, shot, slides, element (the HTML of elements, by data-eid), pdf, pdf-figure, resolve (a review comment: its id, then what you did) or reply (to a review comment you leave open: its id, then why). Pass individual arguments in an array, never a shell command. Use pindeck_read on returned image paths.', inputSchema: { ...schema({ command: { enum: ['layout', 'shot', 'slides', 'element', 'pdf', 'pdf-figure', 'resolve', 'reply'] }, args: { type: 'array', items: str, maxItems: 100 } }), required: ['command', 'args'] } },
 ];
 /* Codex may read the deck, screenshots, attached PDFs and asset roots, and write any file of the deck folder
    except the locked ones: the same rules as Claude's --allowedTools / --disallowedTools. locked: patterns
@@ -47,7 +47,7 @@ export function createDeckTools({ deckDir, readDirs = [], cliFile, env, pdfTextF
     return full;
   }
   async function command(name, args, signal) {
-    if (!['layout', 'shot', 'slides', 'pdf', 'pdf-figure', 'resolve', 'reply'].includes(name) || !Array.isArray(args) || args.length > 100 || args.some(a => typeof a !== 'string' || a.length > 4096 || a.includes('\0'))) throw new Error('Invalid PinDeck command.');
+    if (!['layout', 'shot', 'slides', 'element', 'pdf', 'pdf-figure', 'resolve', 'reply'].includes(name) || !Array.isArray(args) || args.length > 100 || args.some(a => typeof a !== 'string' || a.length > 4096 || a.includes('\0'))) throw new Error('Invalid PinDeck command.');
     if (name === 'pdf-figure') {
       checked(args[0]);
       // Host renderer can create figures: disallow symlinked output directories too.

package/lib/eids.mjs

@@ -433,6 +433,12 @@ export function getInner(html, eid, path) {
   return node ? html.slice(node.contentStart, node.closeStart) : null;
 }
 
+/* An element with its own tags, exactly as written in the source. */
+export function getOuter(html, eid) {
+  const node = nodeAt(html, eid, [], { anyKind: true });
+  return node ? html.slice(node.start, elementEnd(html, node)) : null;
+}
+
 /* Replaces the inner HTML of one element. Returns { html, changed } or null if not found. */
 export function setInner(html, eid, path, inner) {
   const node = nodeAt(html, eid, path);

package/lib/system-prompt.md

@@ -69,7 +69,8 @@ this path to cli.mjs even if another one appears earlier in the conversation, ea
 convert or ls. Such commands are refused (or need an approval nobody can give) and are not run. A
 refused command did nothing: do not retry it as it is, do it another way.
 - To change files, use Edit, even for large changes: several Edit calls in a row are fine.
-- To look at files, use Read, Grep and Glob.
+- To look at files, use Read, Grep and Glob. A slide can be one very long line: to see one element of
+  it, run `{{CLI}} element <data-eid>...`, which prints that element's HTML exactly as written.
 - To check several slides, name them all: `{{CLI}} layout 9 10 11 --issues`.
 
 ## Checking your work
@@ -100,7 +101,8 @@ inline styles on the element in {{DECK}}: `translate: Xpx Ypx` for moves, `width
 keep them unless asked. If the user asks to clean up, move them into proper CSS rules.
 The user can also edit text in place (double-click); you get a note with the new text. Keep their
 wording unless asked to change it.
-A selected element is listed in <editor-context>; "this" or "it" usually means that element.
+A selected element is listed in <editor-context>; "this" or "it" usually means that element. When
+several are selected, "these" or "them" means all of them.
 
 ## Replies
 Replies appear in a narrow sidebar. Keep them short: 1 to 4 sentences saying what you changed,

package/package.json

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

package/public/bridge.js

@@ -67,7 +67,8 @@
     .__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.readonly i, .__sel.multi i { display:none; }
+    html.__selmode ${SLIDE} .__selected.__member { outline:calc(1px*var(--pindeck-u,1)) dashed #1a73e8; outline-offset:0; }
     .__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; }
@@ -389,8 +390,22 @@
   const fmtTranslate = (x, y) => (r1(x) || r1(y) ? `${r1(x)}px ${r1(y)}px` : "");
   const nameOf = (el, sec) => { const e = el.dataset.eid || ""; return e.startsWith(sec.dataset.eid + "/") ? e.slice(sec.dataset.eid.length) : e; };
 
+  /* The selection: one element, or several on the same slide (⌘-click adds and removes). `el` is the one
+     clicked last: it is what Enter edits and what the assistant gets first. Several move together and have no
+     resize handles. */
+  const many = () => sel.els.length > 1;
+  const groupName = () => many() ? `${sel.els.length} elements (${sel.els.map((e) => nameOf(e, sel.sec)).join(", ")})` : nameOf(sel.el, sel.sec);
+  function unionBox(els, sec) {
+    const bs = els.map((e) => boxOf(e, sec));
+    const x = Math.min(...bs.map((b) => b.x)), y = Math.min(...bs.map((b) => b.y));
+    return { x, y, w: Math.max(...bs.map((b) => b.x + b.w)) - x, h: Math.max(...bs.map((b) => b.y + b.h)) - y };
+  }
   function drawSel() {
-    if (!sel || !sel.el.isConnected) return removeSel();
+    if (sel) {
+      sel.els = sel.els.filter((e) => e.isConnected);
+      if (!sel.el.isConnected) sel.el = sel.els.at(-1);
+    }
+    if (!sel?.el) return removeSel();
     if (editing) return;
     if (!selBox) {
       selBox = document.createElement("div");
@@ -398,34 +413,46 @@
       selBox.innerHTML = '<span class="__sel-label"></span>' + HANDLES.map((h) => `<i data-h="${h}"></i>`).join("");
     }
     if (selBox.parentElement !== sel.sec) sel.sec.appendChild(selBox);
-    const b = boxOf(sel.el, sel.sec);
+    const b = many() ? unionBox(sel.els, sel.sec) : boxOf(sel.el, sel.sec);
+    selBox.classList.toggle("multi", many());
+    for (const e of sel.els) e.classList.toggle("__member", many());
     Object.assign(selBox.style, { left: b.x + "px", top: b.y + "px", width: b.w + "px", height: b.h + "px" });
     selBox.classList.toggle("readonly", !editable);
     const lab = selBox.firstChild;
-    lab.textContent = `${nameOf(sel.el, sel.sec)}   ` + (drag?.kind === "move" ? `x ${b.x}  y ${b.y}` : `${b.w} × ${b.h}`);
+    lab.textContent = `${many() ? sel.els.length + " elements" : nameOf(sel.el, sel.sec)}   ` + (drag?.kind === "move" ? `x ${b.x}  y ${b.y}` : `${b.w} × ${b.h}`);
     lab.className = "__sel-label " + (b.y < 30 ? "below" : "above");
   }
-  function removeSel() { selBox?.remove(); document.querySelectorAll(".__selected").forEach((e) => e.classList.remove("__selected")); }
-  function select(el, sec, notify = true) {
+  function removeSel() { selBox?.remove(); document.querySelectorAll(".__selected").forEach((e) => e.classList.remove("__selected", "__member")); }
+  function select(el, sec, notify = true, els = el ? [el] : []) {
     removeSel();
-    sel = el ? { el, sec } : null;
-    if (sel) { sel.el.classList.add("__selected"); drawSel(); }
+    sel = el ? { el, sec, els } : null;
+    if (sel) { sel.els.forEach((e) => e.classList.add("__selected")); drawSel(); }
     if (notify) host()?.selectionChanged(sel ? selectionInfo() : null);
   }
+  // ⌘-click: add an element to the selection, or take it out. An element and one inside it cannot move
+  // together (the inner one would move twice), so adding one drops the other.
+  function toggleSel(t) {
+    if (!sel || sel.sec !== t.sec) return select(t.el, t.sec);
+    const els = sel.els.includes(t.el) ? sel.els.filter((e) => e !== t.el)
+      : [...sel.els.filter((e) => !e.contains(t.el) && !t.el.contains(e)), t.el];
+    if (!els.length) return select(null, null);
+    select(els.includes(t.el) ? t.el : els.at(-1), t.sec, true, els);
+  }
   function selectionInfo() {
     const { el, sec } = sel;
-    return { eid: el.dataset.eid, slide: slideInfo(sec), tag: tagOf(el), box: boxOf(el, sec), text: textOf(el).slice(0, 120) };
+    const info = (e) => ({ eid: e.dataset.eid, tag: tagOf(e), box: boxOf(e, sec) });
+    return { ...info(el), slide: slideInfo(sec), text: textOf(el).slice(0, 120),
+      ...(many() ? { also: sel.els.filter((e) => e !== el).map(info) } : {}) };
   }
-  function selectEid(eid) {
-    const el = eid && byEid(eid);
-    const sec = el?.closest(SLIDE_OF);
-    if (!el || sec !== deck.current()) return select(null, null);
-    select(el, sec);
+  function selectEid(eids) {
+    const els = [].concat(eids || []).map((eid) => byEid(eid)).filter((e) => e?.closest(SLIDE_OF) === deck.current());
+    if (!els.length) return select(null, null);
+    select(els[0], deck.current(), true, els);
   }
 
   function selectHover(e) {
     const t = selectableOf(e.target);
-    if (!t || (sel && t.el === sel.el)) return hideHover();
+    if (!t || sel?.els.includes(t.el)) return hideHover();
     if (!hoverBox) { hoverBox = document.createElement("div"); hoverBox.className = "__hover"; hoverBox.appendChild(document.createElement("span")); }
     const b = boxOf(t.el, t.sec);
     if (hoverBox.parentElement !== t.sec) t.sec.appendChild(hoverBox);
@@ -437,11 +464,11 @@
   }
 
   /* Snap targets: slide edges and centre, the footer rule, and the edges and centres of other elements */
-  function snapTargets(sec, el) {
+  function snapTargets(sec, skip) {
     const xs = [0, W / 2, W], ys = [0, H / 2, H];
     if (FOOTER_TOP != null && sec.querySelector(".slide-foot")) ys.push(FOOTER_TOP);
     for (const o of sec.querySelectorAll("[data-eid]")) {
-      if (o === el || el.contains(o) || o.contains(el)) continue;
+      if (skip.some((el) => o === el || el.contains(o) || o.contains(el))) continue;
       if (o.closest("svg") && o.tagName.toLowerCase() !== "svg") continue;
       if (!o.getClientRects().length) continue;
       const b = boxOf(o, sec);
@@ -482,30 +509,32 @@
     hideHover();
     // double click: edit the text under the pointer
     const now = performance.now();
-    const dbl = now - lastDown.t < 450 && Math.hypot(e.clientX - lastDown.x, e.clientY - lastDown.y) < 6 && lastDown.el === e.target;
+    const dbl = !(e.metaKey || e.ctrlKey) && now - lastDown.t < 450 && Math.hypot(e.clientX - lastDown.x, e.clientY - lastDown.y) < 6 && lastDown.el === e.target;
     lastDown = { t: dbl ? 0 : now, x: e.clientX, y: e.clientY, el: e.target };
     if (dbl && !e.target.closest?.(".__sel i")) return editAt(e.target, e.clientX, e.clientY);
     const handle = e.target.closest?.(".__sel i[data-h]");
     if (!handle) {
       if (e.target.closest?.(".__pin")) return;   // pin markers are removed in pin mode only
-      const t = selectableOf(e.target);
-      if (!t) return select(null, null);
+      const t = selectableOf(e.target), add = e.metaKey || e.ctrlKey;
+      if (!t) return add ? undefined : select(null, null);
       if (t.locked) {
-        select(null, null);
+        if (!add) select(null, null);   // a ⌘-click that misses keeps the group
         host()?.toast(`${t.el.classList.contains("slide-foot") ? "The footer is" : "This element is"} set by brand.css and locked.`);
         return;
       }
-      if (!sel || sel.el !== t.el) select(t.el, t.sec);
+      if (add) return toggleSel(t);
+      if (!sel?.els.includes(t.el)) select(t.el, t.sec);
     }
     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);
+    const styles = (e) => ({ translate: e.style.translate, width: e.style.width, height: e.style.height, "max-width": e.style.maxWidth, "max-height": e.style.maxHeight });
     drag = {
       kind: handle ? "resize" : "move", handle: handle?.dataset.h, x0: e.clientX, y0: e.clientY, s, started: !!handle,
-      b: boxOf(el, sel.sec), tx, ty, cw: parseFloat(cs.width) || 0, ch: parseFloat(cs.height) || 0,
-      maxW: cs.maxWidth, maxH: cs.maxHeight, targets: snapTargets(sel.sec, el),
-      before: { translate: el.style.translate, width: el.style.width, height: el.style.height, "max-width": el.style.maxWidth, "max-height": el.style.maxHeight },
+      b: many() ? unionBox(sel.els, sel.sec) : boxOf(el, sel.sec), tx, ty, cw: parseFloat(cs.width) || 0, ch: parseFloat(cs.height) || 0,
+      maxW: cs.maxWidth, maxH: cs.maxHeight, targets: snapTargets(sel.sec, sel.els),
+      items: sel.els.map((e) => { const [x, y] = translateOf(e); return { el: e, tx: x, ty: y, before: styles(e) }; }),
     };
     document.documentElement.setPointerCapture?.(e.pointerId);
   }
@@ -530,8 +559,8 @@
         const sy = snapTo([b.y + dy, b.y + dy + b.h / 2, b.y + dy + b.h], targets.ys, tol);
         if (sy) { dy += sy.d; gy.push(sy.at); }
       }
-      el.style.translate = fmtTranslate(drag.tx + dx, drag.ty + dy);
-      drag.label = `Moved ${nameOf(el, sel.sec)} by ${r1(dx)}, ${r1(dy)} px`;
+      for (const it of drag.items) it.el.style.translate = fmtTranslate(it.tx + dx, it.ty + dy);
+      drag.label = `Moved ${groupName()} by ${r1(dx)}, ${r1(dy)} px`;
     } else {
       const h = drag.handle;
       let w = b.w, ht = b.h, ox = 0, oy = 0;   // ox/oy: how far the left/top edge moves
@@ -574,26 +603,30 @@
     clearGuides();
     if (!sel) return;
     drawSel();
-    if (d.started) commit(d.before, d.label);
+    if (d.started) commit(d.items, d.label);
   }
-  function commit(before, label) {
-    const el = sel.el, set = {};
-    const now = { translate: el.style.translate, width: el.style.width, height: el.style.height,
-      "max-width": el.style.maxWidth, "max-height": el.style.maxHeight };
-    for (const k of Object.keys(now)) if (now[k] !== before[k]) set[k] = now[k] || null;
-    if (Object.keys(set).length) host()?.commitEdit({ eid: el.dataset.eid, set }, label);
+  // one edit (one undo step) for all the elements that changed
+  function commit(items, label) {
+    const ops = items.flatMap(({ el, before }) => {
+      const set = {}, now = { translate: el.style.translate, width: el.style.width, height: el.style.height,
+        "max-width": el.style.maxWidth, "max-height": el.style.maxHeight };
+      for (const k of Object.keys(now)) if (now[k] !== before[k]) set[k] = now[k] || null;
+      return Object.keys(set).length ? [{ eid: el.dataset.eid, set }] : [];
+    });
+    if (ops.length) host()?.commitEdit(ops, label);
     host()?.selectionChanged(selectionInfo());
   }
   function nudge(dx, dy) {
     if (!sel) return;
     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);
+    const ops = sel.els.map((el) => {
+      const [tx, ty] = translateOf(el);
+      el.style.translate = fmtTranslate(tx + dx, ty + dy);
+      return { eid: el.dataset.eid, set: { translate: el.style.translate || null } };
+    });
     drawSel();
     renderPins(pins);
-    host()?.commitEdit({ eid: el.dataset.eid, set: { translate: el.style.translate || null } },
-      { nudge: true, name: nameOf(el, sel.sec), dx, dy });
+    host()?.commitEdit(ops, { nudge: true, name: groupName(), dx, dy });
     host()?.selectionChanged(selectionInfo());
   }
   function setMode(m) {
@@ -656,7 +689,7 @@
     const src = opts.src ?? await host()?.textSource(t.eid, t.path);
     if (src == null || !t.el.isConnected) return;
     const el = t.el;
-    if (!sel || sel.el !== el) select(el.dataset.eid ? el : null, t.sec);
+    if (!sel || sel.el !== el || many()) select(el.dataset.eid ? el : null, t.sec);   // text editing is one element at a time
     removeSel();
     hideHover();
     editing = { ...t, rendered: el.innerHTML };
@@ -786,7 +819,7 @@
     // a new bullet left empty is removed again
     if (ed.isNew && isBlank(el)) {
       el.remove();
-      if (sel?.el === el) select(null, null);
+      if (sel?.els.includes(el)) select(null, null);
       host()?.commitRemove(eid);
       chainDirty = false;
       return;
@@ -1146,7 +1179,7 @@
         const k = e.key, meta = e.metaKey || e.ctrlKey;
         if (sel && mode === "select" && !meta && (k === "Delete" || k === "Backspace")) {
           e.preventDefault(); e.stopImmediatePropagation();
-          host()?.requestDelete(sel.el.dataset.eid);
+          host()?.requestDelete(sel.els.map((e) => e.dataset.eid));
           return;
         }
         // arrows nudge the selection (Shift: 10 px) instead of changing slides

package/public/editor.css

@@ -33,6 +33,8 @@ code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background:
 .brand-pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange);
   box-shadow: inset 0 0 0 4px var(--orange), inset 0 0 0 7px #fff; }
 
+.version { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
 .app { display: grid; grid-template-columns: 220px minmax(0, 1fr) 400px; height: 100vh; }
 .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px;
   padding: 0 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }

package/public/editor.js

@@ -125,7 +125,7 @@ const editorHost = {
     applyEditable(bridge);
     refreshPinsFromSlides();
     bridge.renderPins(allPins());
-    if (state.sel) bridge.selectEid(state.sel.eid);
+    if (state.sel) bridge.selectEid([state.sel.eid, ...(state.sel.also || []).map((a) => a.eid)]);
     if (state.pendingTitleEdit) { state.pendingTitleEdit = false; setTimeout(() => bridge.editTitle(), 50); }
     renderSlides();
     renderToolbar();
@@ -215,7 +215,7 @@ function queueEdit(fn, failMsg = "Could not save the change.") {
 }
 function postEdit(op, label) {
   return queueEdit(async () => {
-    const res = await api("edit", { ops: [op], label });
+    const res = await api("edit", { ops: [].concat(op), label });
     if (!res.ok) {
       toast((await res.json().catch(() => ({}))).error || "Could not save the change.");
       loadMain();   // show the file as it is
@@ -231,8 +231,9 @@ function flushNudge() {
 }
 function commitEdit(op, label) {
   if (label?.nudge) {   // arrow keys: one change per burst of key presses
-    if (nudgeAcc && nudgeAcc.op.eid !== op.eid) flushNudge();
-    nudgeAcc ??= { name: label.name, dx: 0, dy: 0 };
+    const key = [].concat(op).map((o) => o.eid).join(" ");   // a group nudge is one op per element
+    if (nudgeAcc && nudgeAcc.key !== key) flushNudge();
+    nudgeAcc ??= { key, name: label.name, dx: 0, dy: 0 };
     nudgeAcc.dx += label.dx; nudgeAcc.dy += label.dy; nudgeAcc.op = op;
     clearTimeout(nudgeTimer);
     nudgeTimer = setTimeout(flushNudge, 600);
@@ -658,8 +659,8 @@ function shortEid(p) {
 function renderPinTray() {
   const sel = state.sel;
   $("pin-tray").innerHTML = (sel ? `
-    <span class="chip sel" data-sel title="Selected: ${esc(sel.eid)}. The assistant sees it as “this”.">
-      <span class="n">▢</span> S${sel.slide.index + 1} · ${esc(sel.eid.replace(/^[^/]+\//, ""))} <span class="dim">${sel.box.w} × ${sel.box.h}</span>
+    <span class="chip sel" data-sel title="Selected: ${esc([sel, ...(sel.also || [])].map((s) => s.eid).join(", "))}. The assistant sees ${sel.also?.length ? "them as “these”" : "it as “this”"}.">
+      <span class="n">▢</span> S${sel.slide.index + 1} · ${esc(sel.eid.replace(/^[^/]+\//, ""))}${sel.also?.length ? ` +${sel.also.length}` : ""} <span class="dim">${sel.box.w} × ${sel.box.h}</span>
       <button class="x" data-unsel aria-label="Deselect">×</button></span>` : "") + state.pins.map((p) => `
     <span class="chip" data-n="${p.n}" title="${esc(p.eid)}${p.text ? " — " + esc(p.text.slice(0, 80)) : ""}">
       <span class="n">${p.n}</span> S${p.slide.index + 1} · ${esc(shortEid(p))}${p.word ? ` “${esc(p.word)}”` : ""}
@@ -1048,7 +1049,7 @@ function handleKey(k, mod = {}) {
     if (!(state.sel && state.mode === "select" && main)) $("input").focus();
     else main.bridge.editSelection().then((editing) => { if (!editing) $("input").focus(); });
   }
-  else if ((k === "Delete" || k === "Backspace") && state.sel && state.mode === "select") requestDelete(state.sel.eid);
+  else if ((k === "Delete" || k === "Backspace") && state.sel && state.mode === "select") requestDelete([state.sel.eid, ...(state.sel.also || []).map((a) => a.eid)]);
   else if (k.startsWith("Arrow") && state.sel && state.mode === "select") {
     const step = mod.shift ? 10 : 1;
     main?.bridge.nudge(k === "ArrowLeft" ? -step : k === "ArrowRight" ? step : 0, k === "ArrowUp" ? -step : k === "ArrowDown" ? step : 0);
@@ -1408,22 +1409,24 @@ $("provider-switch").addEventListener("close", async () => {
    with it (ticked by default). Undo brings back the element and the files. */
 let deleting = false;
 async function requestDelete(eid) {
-  if (deleting || !eid) return;
+  const eids = [].concat(eid || []);
+  if (deleting || !eids.length) return;
   if (quartoWhy()) return toast(quartoWhy());
   if (state.busy) return toast("The assistant is working. Wait until it has finished.");
   deleting = true;
   try {
     flushNudge();
     await editChain;
-    const res = await api(`delete-info?${new URLSearchParams({ eid })}`);
+    const res = await api(`delete-info?${new URLSearchParams(eids.map((e) => ["eid", e]))}`);
     const info = await res.json().catch(() => ({}));
     if (!res.ok) return toast(info.error || "Cannot delete this element.");
-    const name = info.eid.replace(/^[^/]+\//, "/");
+    const many = info.targets.length > 1;
+    const name = info.targets.map((t) => t.eid.replace(/^[^/]+\//, "/")).join(", ");
     const slide = state.slides.findIndex((s) => info.eid === s.eid || info.eid.startsWith(s.eid + "/"));
-    const isFig = info.tag.startsWith("figure") && info.eid !== eid;
-    $("delete-title").textContent = isFig ? "Delete this figure?" : `Delete ${name}?`;
-    $("delete-what").textContent = `${isFig ? `The picture and its caption (${name})` : info.tag}` +
-      (slide >= 0 ? ` on slide ${slide + 1}` : "") + " will be removed from the slide.";
+    const isFig = !many && info.tag.startsWith("figure") && info.eid !== eids[0];
+    $("delete-title").textContent = many ? `Delete ${info.targets.length} elements?` : isFig ? "Delete this figure?" : `Delete ${name}?`;
+    $("delete-what").textContent = `${many ? `${name}` : isFig ? `The picture and its caption (${name})` : info.tag}` +
+      (slide >= 0 ? ` on slide ${slide + 1}` : "") + ` will be removed from the slide.`;
     $("delete-files").innerHTML = info.files.map((f, i) => f.usedElsewhere
       ? `<div class="file kept"><span>📄</span><span><code>${esc(f.rel)}</code>
            <span class="why">${f.usedBy?.length ? `Also used by ${esc(f.usedBy.join(", "))}` : "Still used elsewhere in the deck"}, so it is kept.</span></span></div>`
@@ -1438,7 +1441,7 @@ async function requestDelete(eid) {
     });
     if (choice !== "delete") return;
     const files = [...$("delete-files").querySelectorAll("input[data-file]:checked")].map((c) => c.dataset.file);
-    const r2 = await api("delete", { eid, files });
+    const r2 = await api("delete", { eids, files });
     const d2 = await r2.json().catch(() => ({}));
     if (!r2.ok) return toast(d2.error || "Could not delete the element.");
     main?.bridge.deselect();

package/public/index.html

@@ -14,7 +14,7 @@
 
   <!-- Left: slides -->
   <nav class="slides-pane" aria-label="Slides">
-    <div class="pane-head"><span class="brand"><span class="brand-pin" aria-hidden="true"></span>PinDeck</span></div>
+    <div class="pane-head"><span class="brand"><span class="brand-pin" aria-hidden="true"></span>PinDeck</span><span class="version muted">v{{VERSION}}</span></div>
     <div class="slides-actions menu-wrap">
       <button id="add-slide-btn" class="add-slide" aria-haspopup="menu" aria-expanded="false" title="Add a slide after the current one">＋ New slide</button>
       <div id="add-slide-menu" class="menu left" role="menu" hidden>

package/server.mjs

@@ -23,7 +23,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import { spawn, execFile, execFileSync } from "node:child_process";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { assignEids, parse, findSlides, slideSelector, deckSize, setStyles, getInner, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd, decode } from "./lib/eids.mjs";
+import { assignEids, parse, findSlides, slideSelector, deckSize, setStyles, getInner, getOuter, setInner, insertAfter, removeElement, deleteTarget, fileRefs, insertSlide, moveSlide, getNotes, setNotes, setAttr, elementEnd, decode } from "./lib/eids.mjs";
 import { unifiedDiff } from "./lib/diff.mjs";
 import { ClaudeSession } from "./lib/claude.mjs";
 import { CodexSession } from "./lib/codex.mjs";
@@ -51,6 +51,7 @@ import { indexDeck, commentFromPin, locate, loadReview, saveReview, packet, requ
    prints the links; this server tells it its address over IPC. */
 const FRONT = !!process.env.PINDECK_FRONT && !!process.send;
 const EDITOR_DIR = path.dirname(fileURLToPath(import.meta.url));
+const VERSION = JSON.parse(fs.readFileSync(path.join(EDITOR_DIR, "package.json"), "utf8")).version;
 const argv = process.argv.slice(2);
 if (argv.includes("--help") || argv.includes("-h")) { console.log(USAGE); process.exit(0); }
 const opt = (name, dflt) => { const i = argv.indexOf(name); return i >= 0 ? argv.splice(i, 2)[1] : dflt; };
@@ -698,7 +699,7 @@ const codexInstructions = () => systemPrompt.replace(/## Attached files[\s\S]*?#
 Figures and audio are already saved under figures/. Keep their paths and use the deck's existing figure/audio patterns. Do not rename or move attachments.
 Use pindeck_read for text files, images and PDF pages (supply page: 1, then further pages as needed).
 Use pindeck_edit for exact replacements in ${DECK_FILE}, theme.css and the deck's other files, and pindeck_write to create a new file in the deck folder. Never change brand.css.
-Use pindeck_command with separate command and args for layout, shot, slides, pdf, pdf-figure, resolve or reply.
+Use pindeck_command with separate command and args for layout, shot, slides, element (the HTML of data-eid ids), pdf, pdf-figure, resolve or reply.
 Do not use shell commands, native file edits, or other tools to bypass these restrictions.
 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.
@@ -730,7 +731,7 @@ function makeSession(choice) {
       "--setting-sources", "", "--strict-mcp-config", "--safe-mode", "--disable-slash-commands",   // no settings files, no MCP servers or connectors
       "--permission-mode", "default", "--permission-prompt-tool", "stdio", "--tools", "Read,Glob,Grep,Edit,Write,Bash",
       "--allowedTools", ...readRules(), "Edit(./**)", "Write(./**)",
-      ...["layout", "shot", "slides", "pdf", "pdf-figure", "resolve", "reply"].map(command => `Bash(${CLI_CMD} ${command}:*)`),
+      ...["layout", "shot", "slides", "element", "pdf", "pdf-figure", "resolve", "reply"].map(command => `Bash(${CLI_CMD} ${command}:*)`),
       "--disallowedTools", ...lockedPaths().flatMap((f) => [`Edit(./${f})`, `Write(./${f})`]),
       ...(choice.model ? ["--model", choice.model] : []), ...(choice.effort ? ["--effort", choice.effort] : [])],
   });
@@ -904,7 +905,7 @@ function toolSummary(name, input = {}) {
       // must show as the script, or a refused script looks like a refused layout check
       const cmd = String(input.command || "").trim();
       const m = cmd.startsWith(CLI_CMD + " ") && cmd.slice(CLI_CMD.length).match(/^\s+([\w-]+)\s*([^\n;&|<>`$]*)$/);
-      const names = { shot: "Screenshot", layout: "Check layout", "pdf-figure": "PDF figure", resolve: "Resolve comment", reply: "Reply to comment" };
+      const names = { shot: "Screenshot", layout: "Check layout", element: "Read element", "pdf-figure": "PDF figure", resolve: "Resolve comment", reply: "Reply to comment" };
       return m ? { name: names[m[1]] || m[1], detail: m[1] === "pdf-figure" ? m[2].trim().replace(/^\S*\//, "") : m[2].trim() }
                : { name: "Run", detail: cmd.split("\n")[0].slice(0, 80) };
     }
@@ -1090,8 +1091,10 @@ function buildPrompt({ text: userText, pins = [], selection, layouts = [], curre
     ctx.push(...notes.map((n) => "Note: " + n));
     state.notes = [];
   }
-  if (selection) ctx.push(`Selected element (what "this" or "it" most likely refers to): ${selection.eid} (${selection.tag}), ` +
-    `box x=${selection.box.x} y=${selection.box.y} w=${selection.box.w} h=${selection.box.h} on slide ${selection.slide.index + 1}.`);
+  const selBox = (s) => `${s.eid} (${s.tag}), box x=${s.box.x} y=${s.box.y} w=${s.box.w} h=${s.box.h}`;
+  if (selection?.also?.length) ctx.push(`Selected elements (what "these", "them" or "this" most likely refer to), on slide ${selection.slide.index + 1}:\n` +
+    [selection, ...selection.also].map((s) => "- " + selBox(s)).join("\n"));
+  else if (selection) ctx.push(`Selected element (what "this" or "it" most likely refers to): ${selBox(selection)} on slide ${selection.slide.index + 1}.`);
   if (pins.length) ctx.push("Pins (numbered clicks; the user refers to them by number):\n" + pins.map(formatPin).join("\n"));
   for (const L of layouts) ctx.push("Layout:\n" + formatLayout(L));
   if (screenshot) ctx.push(`Screenshot of slide ${screenshot.slide}${screenshot.pins ? " with the pin markers" : ""}: ${screenshot.path} (Read it).`);
@@ -1364,14 +1367,17 @@ function recordHandEdit(before, html, label, note, { manual = true, deletedFiles
 /* What deleting an element would remove, and which of its files nothing else uses. Files outside the
    deck folder, in vendor/, or still referenced elsewhere (the rest of the deck, theme.css, brand.css, or
    another deck in the folder or one folder down, which may share figures/) are never offered. */
-function deletePlan(eid) {
+/* What deleting one or more elements removes: the elements (a picture with its caption; an element inside another
+   one that goes too is left out) and the files they refer to */
+function deletePlan(eids) {
   const html = readDeck(DECK_FILE);
-  const target = deleteTarget(html, eid);
-  if (!target) return null;
-  const rest = removeElement(html, target.eid);
+  let targets = [].concat(eids).map((eid) => deleteTarget(html, eid));
+  if (!targets.length || targets.some((t) => !t)) return null;
+  targets = targets.filter((t, i) => !targets.some((o, j) => o.eid === t.eid ? j < i : o.outer.includes(`data-eid="${t.eid}"`)));
+  const rest = targets.reduce((h, t) => removeElement(h, t.eid), html);
   const css = (readDeck("theme.css") || "") + (readDeck("brand.css") || "");
   const others = otherDeckRefs();
-  const files = fileRefs(target.outer).flatMap((ref) => {
+  const files = [...new Set(targets.flatMap((t) => fileRefs(t.outer)))].flatMap((ref) => {
     const abs = path.resolve(DECK_DIR, ref);
     const rel = path.relative(DECK_DIR, abs).split(path.sep).join("/");
     if (rel.startsWith("..") || rel.startsWith("vendor/") || !fs.existsSync(abs) || !fs.statSync(abs).isFile()) return [];
@@ -1380,7 +1386,7 @@ function deletePlan(eid) {
     const usedElsewhere = fileRefs(rest).some((r) => path.resolve(DECK_DIR, r) === abs) || css.includes(ref) || css.includes(rel) || usedBy.length > 0;
     return [{ rel, bytes: fs.statSync(abs).size, usedElsewhere, usedBy }];
   });
-  return { ...target, html: rest, files };
+  return { ...targets[0], targets: targets.map(({ eid, tag }) => ({ eid, tag })), html: rest, files };
 }
 /* The other decks of this folder and one folder down, each with a test of whether it refers to a file: in its
    HTML (relative to its own folder), or in the stylesheets beside it */
@@ -1648,7 +1654,7 @@ const server = http.createServer(async (req, res) => {
     const ok = authed(req);
     if (req.method === "GET" && (p === "/" || p === "/index.html")) {
       if (!ok) { res.writeHead(403, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" }); return res.end(LOGIN_PAGE); }
-      return serveFile(res, path.join(EDITOR_DIR, "public/index.html"), null, req);
+      return serveFile(res, path.join(EDITOR_DIR, "public/index.html"), (s) => s.replace("{{VERSION}}", VERSION), req);
     }
     if (req.method === "GET" && p.startsWith("/editor/")) {
       const f = safeJoin(path.join(EDITOR_DIR, "public"), p.slice(8));
@@ -1761,6 +1767,7 @@ const server = http.createServer(async (req, res) => {
       const placed = (x) => x && typeof x.eid === "string" && x.slide && Number.isInteger(x.slide.index) && x.box;
       b.pins = (Array.isArray(b.pins) ? b.pins : []).filter((p) => placed(p) && p.point && p.at);
       if (!placed(b.selection)) b.selection = null;
+      else b.selection.also = (Array.isArray(b.selection.also) ? b.selection.also : []).filter((x) => x && typeof x.eid === "string" && x.box);
       if (!Array.isArray(b.layouts)) b.layouts = [];
       if (b.current && !Number.isInteger(b.current.index)) b.current = null;
       const preparation = { cancelled: false, controller: new AbortController() };
@@ -1787,7 +1794,7 @@ const server = http.createServer(async (req, res) => {
         const entry = addEntry({ kind: "user", text: b.text,
           screenshot: screenshot && { file: path.basename(screenshot.path), slide: screenshot.slide },
           attachments: b.attachments.map((a) => ({ path: a.path, kind: a.kind, name: a.name })),
-          selection: b.selection ? { eid: b.selection.eid, label: b.selection.eid.replace(/^[^/]+\//, ""), slide: b.selection.slide.index + 1 } : null,
+          selection: b.selection ? { eid: b.selection.eid, label: b.selection.eid.replace(/^[^/]+\//, "") + (b.selection.also.length ? ` +${b.selection.also.length}` : ""), slide: b.selection.slide.index + 1 } : null,
           pins: (b.pins || []).map((p) => ({ n: p.n, eid: p.eid, label: label(p), slide: p.slide.index + 1 })) });
         if (shotFailed) addEntry({ kind: "notice", text: `Screenshot of slide ${shotFailed.slide} failed: ${shotFailed.error}` });
         startTurn(buildPrompt({ ...b, screenshot, shotFailed }), entry);
@@ -2038,27 +2045,27 @@ const server = http.createServer(async (req, res) => {
 
     // Delete an element (and, if the user agrees, the files only it uses)
     if (p === "/api/delete-info") {
-      const plan = deletePlan(url.searchParams.get("eid"));
+      const plan = deletePlan(url.searchParams.getAll("eid"));
       if (!plan) return json(res, 404, { error: "Element not found in the file." });
-      return json(res, 200, { eid: plan.eid, tag: plan.tag, files: plan.files });
+      return json(res, 200, { eid: plan.eid, tag: plan.tag, targets: plan.targets, files: plan.files });
     }
     if (p === "/api/delete" && req.method === "POST") {
       if (state.busy) return json(res, 409, { error: "The assistant is working. Wait until it has finished." });
       const b = await body(req);
       if (staleEdit(res, b)) return;
-      const plan = deletePlan(b.eid);
+      const plan = deletePlan(Array.isArray(b.eids) ? b.eids : b.eid);
       if (!plan) return json(res, 404, { error: "Element not found in the file." });
       const before = snapshot(EDITABLE);
       const wanted = new Set(b.files || []);
       const deletedFiles = plan.files.filter((f) => wanted.has(f.rel) && !f.usedElsewhere)
         .map((f) => ({ rel: f.rel, data: fs.readFileSync(path.join(DECK_DIR, f.rel)) }));
-      const short = plan.eid.replace(/^[^/]+\//, "/");
+      const short = plan.targets.map((t) => t.eid.replace(/^[^/]+\//, "/")).join(", ");
       const label = `Deleted ${short}` + (deletedFiles.length ? ` and ${deletedFiles.map((f) => f.rel).join(", ")}` : "");
       const turnId = recordHandEdit(before, plan.html, label,
-        `The user deleted ${plan.eid} (${plan.tag}) by hand` + (deletedFiles.length ? `, together with the file(s) ${deletedFiles.map((f) => f.rel).join(", ")}` : "") + ".",
+        `The user deleted ${plan.targets.map((t) => `${t.eid} (${t.tag})`).join(", ")} by hand` + (deletedFiles.length ? `, together with the file(s) ${deletedFiles.map((f) => f.rel).join(", ")}` : "") + ".",
         { manual: false, deletedFiles });
       for (const f of deletedFiles) removeDeckFile(f.rel);
-      return json(res, 200, { turnId, deleted: plan.eid, files: deletedFiles.map((f) => f.rel) });
+      return json(res, 200, { turnId, deleted: plan.targets.map((t) => t.eid), files: deletedFiles.map((f) => f.rel) });
     }
 
     // Hand edits from the editor: drag/resize (inline styles) and text
@@ -2169,6 +2176,11 @@ const server = http.createServer(async (req, res) => {
       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/element") {
+      const eid = url.searchParams.get("eid") || "";
+      const outer = getOuter(readDeck(DECK_FILE) || "", eid);
+      return outer === null ? text(res, 404, `No element "${eid}" in ${DECK_FILE}. Give a data-eid.`) : text(res, 200, outer);
+    }
     if (p === "/api/layout" || p === "/api/shot") {
       const slide = resolveSlide(url.searchParams.get("slide"));
       if (!slide) return text(res, 404, deckProblemNow() || `No slide "${url.searchParams.get("slide")}". Use \`${CLI_CMD} slides\`.`);