fb-slides 0.4.2 → 0.5.0

package/README.md

@@ -97,6 +97,10 @@ transform and that fires no resize inside the frame.
 **Moving a demo is moving those lines.** Put the block wherever you want it, in any file;
 delete it and the demo slide is gone.
 
+A demo can also be a whole application with its own dev server — Angular, or anything on
+Vite — copied into `demo/` as it is. It is embedded by **URL**, not by folder name:
+[docs/framework-demos.md](docs/framework-demos.md).
+
 ### Stepped code highlighting
 
 The line ranges live in the fence's info string — reveal reveals one group per click:
@@ -123,6 +127,22 @@ A `Note:` block at the end of a slide never shows on screen, only in the speaker
 Note: a bad description is the most common reason a tool never gets used.
 ```
 
+### Editing in the browser
+
+On the dev server, `T` (or the last button on the toolbar) opens the slide you
+are looking at in a drawer: its markdown in one box, its speaker notes in
+another. Typing re-renders the real slide in place — same renderer, same theme —
+and **Save** writes the text back into the slide's own lines of the `.md`,
+leaving the rest of the file untouched. `Esc` closes without saving; moving to
+another slide — the header's arrows do it without leaving the editor — keeps
+the drawer open on it, dropping anything unsaved. **Add** inserts a fresh slide
+right after the current one and opens it; **Delete** removes the slide from its
+file, after asking. Clicking into the notes box trades the room with the slide
+box, so both are comfortable to write in.
+
+The drawer exists only under `fb-slides dev`: a built deck is static files and
+never shows the button.
+
 ## Presenting
 
 | Key | |
@@ -132,6 +152,7 @@ Note: a bad description is the most common reason a tool never gets used.
 | `W` | the arrow — click the tail, then the tip; same colours as the pen |
 | `E` | the spotlight — drag a rectangle, the rest of the slide dims and blurs |
 | `R` | the pointer — replaces the cursor: a glowing halo, a dart aimed at the centre, or the normal mouse |
+| `T` | edit the slide — markdown and notes, saved back into the `.md` (dev server only) |
 | `S` | speaker view — notes, timer, next slide |
 | `Esc` / `O` | overview — the slides as a grid |
 | `V` | the vertical navigator — every slide by title, down the left edge |
@@ -181,6 +202,10 @@ export default {
 A `servers:` entry that fails — a missing `node_modules`, a busy port — prints a warning
 and nothing more: the slide that embeds it comes up empty, the rest of the deck works.
 
+Copying a real Angular or Vite app into `demo/` and wiring it up — including the port flag
+Vite needs so a busy port fails instead of moving:
+[docs/framework-demos.md](docs/framework-demos.md).
+
 ## Theming
 
 `theme.css` in the project is loaded **after** the package's base theme, so it overrides

package/docs/framework-demos.md

@@ -0,0 +1,164 @@
+# Demos that are real apps
+
+A demo folder is usually a static page the deck serves itself. It can also be **a whole
+application with its own dev server** — an Angular or a Vite project, copied in as it is,
+keeping its `package.json`, its `.gitignore`, its `node_modules`. Nothing gets renamed and
+nothing gets flattened.
+
+That kind of demo needs two things said out loud: an entry in `servers:` so `dev` starts
+it, and its **URL** in the slide.
+
+## Copy the app in
+
+```bash
+cp -R ~/projects/checkout demo/checkout
+```
+
+That is the whole step. One thing to check afterwards: some scaffolders initialise a git
+repository of their own — `ng new` does, `create-vite` does not — and a nested `.git` makes
+the outer repo treat the folder as something it must not touch.
+
+```bash
+rm -rf demo/checkout/.git
+```
+
+## Install it
+
+The project's own `npm install` does **not** reach into `demo/`. There are no workspaces,
+on purpose: someone who scaffolds a deck and deletes the framework demo should not have
+downloaded it first. So install it separately, once:
+
+```bash
+npm --prefix demo/checkout install
+```
+
+Until you do, `dev` says so and carries on without it:
+
+```
+⚠  checkout: no node_modules — run `npm install` in demo/checkout.
+   Its slides will show an empty frame until you do.
+```
+
+## Declare its server
+
+In `slides.config.js`. The shape is the same for every framework; only the script and the
+port flags differ.
+
+**Angular** — the script is `start`, and `ng serve` refuses to start on a taken port, which
+is the behaviour you want:
+
+```js
+{
+  name: 'checkout',
+  cwd: 'demo/checkout',
+  command: 'npm',
+  args: ['start', '--', '--port', '4200'],
+  url: 'http://localhost:4200/',
+}
+```
+
+**React, Vue, Svelte — anything on Vite** — the script is `dev`, and `--strictPort` is not
+optional:
+
+```js
+{
+  name: 'storefront',
+  cwd: 'demo/storefront',
+  command: 'npm',
+  args: ['run', 'dev', '--', '--port', '5173', '--strictPort'],
+  url: 'http://localhost:5173/',
+}
+```
+
+Without it, Vite does not fail on a busy port — it takes the next one and says so in a line
+you will not be reading:
+
+```
+Port 5173 is in use, trying another one...
+  ➜  Local:   http://localhost:5174/
+```
+
+The app is then up and healthy on 5174 while the slide still points at 5173, and you find
+out in front of the room. With `--strictPort` it exits instead, and `dev` tells you which
+slide just died:
+
+```
+⚠  storefront stopped (exit 1) — its slides will be empty.
+```
+
+Three details worth knowing about the entry:
+
+- `url:` is **only** the log line. It wires nothing up — the slide does that.
+- omit `args` and `command` goes through a shell, so `command: 'npm start -- --port 4200'`
+  works too. With `args` there is no shell and no quoting to get wrong.
+- `env: { … }` is merged over the current environment when the app needs variables.
+
+## Embed it in a slide
+
+**Use the URL, never the folder name.** This is the one mistake worth spelling out:
+
+```markdown
+---
+
+<!-- demo: http://localhost:5173/ -->
+
+## The storefront, live
+
+[the fallback for GitHub and Marp goes here]
+```
+
+`<!-- demo: storefront -->` looks like it should work — the folder *is* under `demo/`, and
+the deck *does* serve it. It gives you a blank slide. A Vite `index.html` asks for
+`/src/main.jsx`, an absolute path, so the browser looks for it at the deck's root and gets
+a 404 — and even on the right path it is raw JSX no browser can run. Untransformed sources
+are not a site. The dev server is the thing that makes them one, and the URL is how you
+reach it.
+
+The folder form stays right for what it was meant for: a demo that really is a static page.
+
+## What `dev` does with them
+
+```
+$ npm run dev
+
+  ↑ checkout → http://localhost:4200/
+  ↑ storefront → http://localhost:5173/
+
+  My Talk
+  → http://localhost:4000/
+```
+
+They start alongside the deck and die with it: `Ctrl-C` takes down the deck server and
+every side process it started, leaving nothing holding a port.
+
+One failing never becomes the deck's failure. A busy port, a missing install, a crash at
+startup — each prints its warning, that slide comes up empty, and the deck and the *other*
+demos keep running. You keep presenting.
+
+## What `build` does with them
+
+A framework demo ships as **sources**, not as a build: its own `dist/` is its own dev
+server's business. These are never copied, at any depth:
+
+```
+node_modules   .git   .angular   .next   .cache   .DS_Store
+```
+
+So the weight stays where it belongs — two real demos in one deck:
+
+```
+demo/checkout/node_modules     214M
+demo/storefront/node_modules    55M
+dist/                          6.0M
+```
+
+The catch is the one under **Publishing** in the README: a slide embedding
+`http://localhost:…` shows an empty frame once the deck is online, because that URL exists
+only on the machine running the app. A framework demo is for presenting live. If the deck
+has to stand on its own on the web, point that slide at a deployed URL — the marker takes
+any `http(s)` address.
+
+## Removing one
+
+Three things, all yours: the folder, the `servers:` entry, the slide. Delete them and
+nothing else in the project remembers the demo existed.

package/lib/dev.mjs

@@ -11,6 +11,7 @@ import { existsSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 
 import { assertUsable } from './config.mjs';
+import { createEditApi } from './edit.mjs';
 import { createDeckServer, listen } from './server.mjs';
 import { renderIndex } from './render.mjs';
 import { REVEAL_THEME_URL, readRevealTheme } from './theme.mjs';
@@ -92,6 +93,10 @@ export const dev = async (config, runtimeDir, reload) => {
     // the server came up — the mounts, the port, the side processes — still
     // needs a restart.
     index: async () => renderIndex(await current(), runtimeDir),
+    // Editing a slide in the browser saves it back into its .md — dev only,
+    // which is what makes the edit button appear at all (the runtime probes
+    // /api/editable). Build and preview never mount this.
+    api: createEditApi(config.decksPath),
     generated: {
       [`/${REVEAL_THEME_URL}`]: async () => {
         const now = await current();

package/lib/edit.mjs

@@ -0,0 +1,167 @@
+// ---------------------------------------------------------------------------
+// The edit API — what lets the browser save a slide back into its .md file.
+//
+// Mounted by `dev` only: a built deck is static files, and preview serves
+// exactly what the host will, so neither answers /api/ at all. The runtime
+// probes /api/editable to decide whether to show the edit button, which is how
+// the same runtime works against both servers with nothing configured.
+//
+//   GET  /api/editable            → { editable: true } — the probe
+//   GET  /api/slide?file&index    → { source } — one slide, as it is on disk
+//   POST /api/slide               → { op?, file, index, expected, source }
+//     op 'save' (default) replaces the slide, 'add' inserts a new one right
+//     after it, 'delete' removes it — separator and all.
+//
+// The slide boundaries are computed here with the same split deck.js uses, so
+// the index the browser counted is the index this file finds. The splice
+// touches only the slide's own bytes: front matter, blank lines between
+// slides and the rest of the file come through untouched.
+// ---------------------------------------------------------------------------
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve, sep } from 'node:path';
+
+// Kept in step with deck.js: front matter comes off first, then slides split on
+// `---` lines, are trimmed, and empty segments are dropped.
+const FRONT_MATTER = /^---\r?\n[\s\S]*?\r?\n---\r?\n/;
+const SEPARATOR = /\r?\n---\r?\n/g;
+
+// Each slide as deck.js sees it, plus where its trimmed source starts and ends
+// in the file — the range the save replaces.
+const slideRangesOf = (markdown) => {
+  const offset = markdown.match(FRONT_MATTER)?.[0].length ?? 0;
+  const body = markdown.slice(offset);
+
+  const cuts = [0];
+  for (const match of body.matchAll(SEPARATOR)) {
+    cuts.push(match.index, match.index + match[0].length);
+  }
+  cuts.push(body.length);
+
+  const ranges = [];
+  for (let i = 0; i < cuts.length; i += 2) {
+    const raw = body.slice(cuts[i], cuts[i + 1]);
+    const source = raw.trim();
+    if (!source) continue;
+    const start = offset + cuts[i] + (raw.length - raw.trimStart().length);
+    ranges.push({ source, start, end: start + source.length });
+  }
+  return ranges;
+};
+
+// A deck file is a flat name in the decks folder — that is all listDecks ever
+// hands out, so anything shaped otherwise did not come from this deck.
+const FILE_NAME = /^[^/\\]+\.md$/;
+
+const json = (res, status, body) =>
+  res
+    .writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' })
+    .end(JSON.stringify(body));
+
+const readBody = (req, limit = 1024 * 1024) =>
+  new Promise((resolvePromise, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > limit) reject(new Error('body too large'));
+      else chunks.push(chunk);
+    });
+    req.on('end', () => resolvePromise(Buffer.concat(chunks).toString('utf8')));
+    req.on('error', reject);
+  });
+
+// This endpoint writes files, and localhost is not as private as it looks: any
+// web page you have open can POST to it. Cross-origin requests cannot carry a
+// custom header without a CORS preflight — which is never answered — so
+// requiring one shuts that door; the Host check covers DNS rebinding, where
+// the request arrives same-origin under a name that is not ours.
+const LOCAL_HOST = /^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?$/;
+
+export const createEditApi = (decksPath) => {
+  const deckFile = (name) => {
+    if (typeof name !== 'string' || !FILE_NAME.test(name) || name.startsWith('.')) return null;
+    const target = resolve(decksPath, name);
+    return target.startsWith(decksPath + sep) ? target : null;
+  };
+
+  return async (req, res, pathname) => {
+    if (!LOCAL_HOST.test(req.headers.host ?? '')) return json(res, 403, { error: 'forbidden' });
+
+    if (pathname === '/api/editable') return json(res, 200, { editable: true });
+
+    if (pathname !== '/api/slide') return json(res, 404, { error: 'not found' });
+
+    const query = new URL(req.url, 'http://localhost').searchParams;
+
+    if (req.method === 'GET') {
+      const target = deckFile(query.get('file'));
+      const index = Number(query.get('index'));
+      if (!target || !Number.isInteger(index) || index < 0) return json(res, 400, { error: 'bad request' });
+
+      const ranges = slideRangesOf(await readFile(target, 'utf8'));
+      const range = ranges[index];
+      if (!range) return json(res, 409, { error: `no slide ${index} in ${query.get('file')}` });
+      return json(res, 200, { source: range.source });
+    }
+
+    if (req.method === 'POST') {
+      if (!req.headers['x-fb-slides']) return json(res, 403, { error: 'forbidden' });
+
+      let body;
+      try {
+        body = JSON.parse(await readBody(req));
+      } catch {
+        return json(res, 400, { error: 'bad request' });
+      }
+
+      const { op = 'save', file, index, expected, source } = body ?? {};
+      const target = deckFile(file);
+      if (!target || !Number.isInteger(index) || index < 0) {
+        return json(res, 400, { error: 'bad request' });
+      }
+
+      const markdown = await readFile(target, 'utf8');
+      const ranges = slideRangesOf(markdown);
+      const range = ranges[index];
+      if (!range) return json(res, 409, { error: `no slide ${index} in ${file}` });
+
+      // The browser edited what it fetched; if the file moved on underneath —
+      // another editor, another tab — refuse rather than overwrite that work.
+      const stale = typeof expected === 'string' && expected.trim() !== range.source;
+
+      if (op === 'add') {
+        const fresh = typeof source === 'string' && source.trim() ? source.trim() : '## New slide';
+        await writeFile(
+          target,
+          `${markdown.slice(0, range.end)}\n\n---\n\n${fresh}${markdown.slice(range.end)}`,
+        );
+        return json(res, 200, { ok: true, index: index + 1 });
+      }
+
+      if (op === 'delete') {
+        // The file's last slide would leave an empty file behind, and an empty
+        // deck file is a decision for the file system, not for this endpoint.
+        if (ranges.length === 1) {
+          return json(res, 409, { error: 'the only slide in the file — delete the file itself instead' });
+        }
+        if (stale) return json(res, 409, { error: 'the slide changed on disk — reload and try again' });
+        // The slide goes with one separator: the one before it, or for the
+        // first slide everything up to where the next slide's content starts.
+        const [from, to] =
+          index > 0 ? [ranges[index - 1].end, range.end] : [range.start, ranges[1].start];
+        await writeFile(target, markdown.slice(0, from) + markdown.slice(to));
+        return json(res, 200, { ok: true });
+      }
+
+      const next = typeof source === 'string' ? source.trim() : '';
+      if (op !== 'save' || !next) return json(res, 400, { error: 'bad request' });
+      if (stale) return json(res, 409, { error: 'the slide changed on disk — reload and edit again' });
+
+      await writeFile(target, markdown.slice(0, range.start) + next + markdown.slice(range.end));
+      return json(res, 200, { ok: true });
+    }
+
+    return json(res, 405, { error: 'method not allowed' });
+  };
+};

package/lib/server.mjs

@@ -101,10 +101,10 @@ const sendFile = (req, res, path, size) => {
 // mounts: [{ prefix: '/', dir }] — checked in order, first hit wins.
 // generated: { '/path.css': async () => body } — files this package rewrites
 // rather than serves, checked before any mount so node_modules cannot shadow one.
-export const createDeckServer = ({ mounts, index, decksPath, generated = {} }) => {
+// api: async (req, res, pathname) — everything under /api/, methods included;
+// only `dev` passes one, so a built deck answers /api/ with a plain 404.
+export const createDeckServer = ({ mounts, index, decksPath, generated = {}, api }) => {
   const handler = async (req, res) => {
-    if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, 'method not allowed');
-
     let pathname;
     try {
       pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
@@ -112,6 +112,10 @@ export const createDeckServer = ({ mounts, index, decksPath, generated = {} }) =
       return send(res, 400, 'bad request');
     }
 
+    if (api && pathname.startsWith('/api/')) return api(req, res, pathname);
+
+    if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, 'method not allowed');
+
     if (pathname === '/' || pathname === '/index.html') {
       return send(res, 200, await index(), { 'Content-Type': MIME['.html'] });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [
@@ -26,6 +26,7 @@
   },
   "files": [
     "bin",
+    "docs",
     "lib",
     "runtime",
     "templates",

package/runtime/deck.js

@@ -2,6 +2,7 @@ import RevealAnnotate from './annotate.js';
 import RevealSpotlight from './spotlight.js';
 import RevealPointer from './pointer.js';
 import RevealOutline from './outline.js';
+import RevealEdit from './edit.js';
 
 // ---------------------------------------------------------------------------
 // The decks are the Markdown files. This file only assembles them into reveal.js
@@ -134,9 +135,15 @@ for (const file of DECKS) {
   // `section:` names the deck; without one the file name has to do.
   const deck = { file, label: front.section ?? file.replace(/^\d+-|\.md$/g, '') };
 
-  for (const source of splitSlides(stripFrontMatter(markdown))) {
+  for (const [index, source] of splitSlides(stripFrontMatter(markdown)).entries()) {
     const marker = source.match(DEMO_MARKER);
-    slidesEl.append(marker ? demoSection(marker[1], deck) : markdownSection(source, deck));
+    const section = marker ? demoSection(marker[1], deck) : markdownSection(source, deck);
+    // Where the slide came from — the file and its index within it, counted by
+    // the same split as above. The edit drawer saves back through these; the
+    // markdown plugin forwards data-* attributes when it rewrites the section.
+    section.dataset.srcFile = file;
+    section.dataset.srcIndex = index;
+    slidesEl.append(section);
   }
 }
 
@@ -162,9 +169,9 @@ await Reveal.initialize({
   pdfSeparateFragments: false,
   // Anything the project wants to change, from `reveal:` in slides.config.js.
   ...(CFG.reveal ?? {}),
-  // Spotlight and Pointer after Annotate: they hang their buttons on the
-  // toolbar the pen builds.
-  plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealAnnotate(), RevealSpotlight(), RevealPointer(), RevealOutline()],
+  // Spotlight, Pointer and Edit after Annotate: they hang their buttons on
+  // the toolbar the pen builds, in this order.
+  plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealAnnotate(), RevealSpotlight(), RevealPointer(), RevealOutline(), RevealEdit()],
 });
 
 // ---------------------------------------------------------------------------

package/runtime/edit.js

@@ -0,0 +1,445 @@
+// ---------------------------------------------------------------------------
+// RevealEdit — edit the slide you are looking at, save it back into its .md.
+//
+// A reveal.js plugin, dev-server only in effect: at init it probes the edit
+// API that `fb-slides dev` mounts, and only an answer makes the button appear.
+// A built deck is static files, the probe 404s, and this plugin does nothing —
+// which is how the same runtime ships in both without configuration.
+//
+// The drawer opens down the right edge with the slide still on stage, one
+// textarea for the slide and one for the speaker notes. Typing re-renders the
+// real slide in place — the same markdown renderer, the same theme, the same
+// scale — so the preview is the slide. Saving splices the text back into the
+// slide's own range of the .md (the server owns that arithmetic) and reloads:
+// the URL hash puts the deck back on this slide, and the full pipeline —
+// mermaid, fragments, highlight steps — runs over the saved source.
+// ---------------------------------------------------------------------------
+
+// Where the slide came from, stamped on every section by deck.js: the .md file
+// and the slide's index within it, counted the way the server counts.
+const SRC = (slide) => {
+  const file = slide?.dataset.srcFile;
+  return file ? { file, index: Number(slide.dataset.srcIndex) } : null;
+};
+
+// The same notes separator reveal's markdown plugin splits on: a line opening
+// with `Note:` (or `Notes:`). Kept when found, so a file spelling it its own
+// way round-trips as written; `Note:` only when notes are added from scratch.
+const NOTES = /^s*notes?:/im;
+
+const splitNotes = (source) => {
+  const match = source.match(NOTES);
+  if (!match) return { content: source, label: null, notes: '' };
+  return {
+    content: source.slice(0, match.index).trimEnd(),
+    label: match[0].trim(),
+    notes: source.slice(match.index + match[0].length).trim(),
+  };
+};
+
+const joinNotes = ({ content, label, notes }) =>
+  notes ? `${content.trimEnd()}\n\n${label ?? 'Note:'} ${notes}` : content.trimEnd();
+
+// Requests wear the header the server demands: a cross-origin page cannot add
+// one without a CORS preflight, which the dev server never answers.
+const API_HEADERS = { 'x-fb-slides': '1' };
+
+// The last stop on the tools' QWER row — pen, arrow, spotlight, pointer, and
+// then this. Reveal answers nothing on T.
+const KEY_CODE = 84;
+
+const EDIT_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M11 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-5" />
+  <path d="M17.3 4.7a2 2 0 0 1 2.8 2.8L12 15.6 8.5 16.4l.8-3.5 8-8.2z" />
+</svg>`;
+
+const CLOSE_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+  stroke-linecap="round" aria-hidden="true">
+  <path d="M6 6l12 12" /><path d="M18 6L6 18" />
+</svg>`;
+
+const PREV_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M14.5 6L8.5 12l6 6" />
+</svg>`;
+
+const NEXT_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M9.5 6l6 6-6 6" />
+</svg>`;
+
+// Matches the outline's SLIDE_MS: the deck reflows for as long as it is moving.
+const SLIDE_MS = 260;
+
+const RevealEdit = () => ({
+  id: 'edit',
+
+  init(deck) {
+    // Nothing is built until the API answers: on a static host the fetch fails
+    // or comes back as someone's 404 page, the JSON parse throws, and the deck
+    // never knows this plugin existed. Init itself stays synchronous so a slow
+    // or absent server cannot hold up the whole deck.
+    fetch('/api/editable', { headers: API_HEADERS, cache: 'no-cache' })
+      .then((response) => response.json())
+      .then((answer) => {
+        if (answer?.editable === true) build(deck);
+      })
+      .catch(() => {});
+  },
+});
+
+const build = (deck) => {
+  // ---- chrome -----------------------------------------------------------
+  // The toolbar is annotate's; this plugin registers after the others in
+  // deck.js and hangs its button last. A deck running without them still
+  // gets a toolbar.
+  let toolbar = document.querySelector('#deck-tools');
+  if (!toolbar) {
+    toolbar = document.createElement('div');
+    toolbar.id = 'deck-tools';
+    toolbar.setAttribute('role', 'toolbar');
+    toolbar.setAttribute('aria-label', 'Slide tools');
+    document.body.append(toolbar);
+  }
+  const button = document.createElement('button');
+  button.id = 'tool-edit';
+  button.className = 'deck-tool';
+  button.type = 'button';
+  button.setAttribute('aria-pressed', 'false');
+  button.title = 'Edit — this slide’s markdown and notes (T)';
+  button.setAttribute('aria-label', 'Edit the slide');
+  button.innerHTML = `${EDIT_ICON}<span class="deck-key" aria-hidden="true">T</span>`;
+  toolbar.append(button);
+
+  const panel = document.createElement('aside');
+  panel.id = 'deck-edit';
+  panel.innerHTML = `
+    <header>
+      <span>edit</span>
+      <code class="deck-edit-file"></code>
+      <button type="button" class="deck-edit-nav" data-go="-1" title="Previous slide" aria-label="Previous slide">${PREV_ICON}</button>
+      <button type="button" class="deck-edit-nav" data-go="1" title="Next slide" aria-label="Next slide">${NEXT_ICON}</button>
+      <button type="button" class="deck-edit-close" aria-label="Close">${CLOSE_ICON}</button>
+    </header>
+    <label class="deck-edit-label" for="deck-edit-source">slide</label>
+    <textarea id="deck-edit-source" spellcheck="false"></textarea>
+    <label class="deck-edit-label" for="deck-edit-notes">speaker notes</label>
+    <textarea id="deck-edit-notes" spellcheck="false"></textarea>
+    <footer>
+      <button type="button" class="deck-edit-add" title="Add a slide after this one">Add</button>
+      <button type="button" class="deck-edit-delete" title="Delete this slide">Delete</button>
+      <span class="deck-edit-status" role="status"></span>
+      <button type="button" class="deck-edit-save">Save</button>
+    </footer>
+    <div class="deck-edit-confirm" hidden>
+      <p>Delete this slide from <code></code>?<br />There is no undo.</p>
+      <div>
+        <button type="button" class="deck-edit-cancel">Cancel</button>
+        <button type="button" class="deck-edit-confirm-delete">Delete</button>
+      </div>
+    </div>
+  `;
+  document.body.append(panel);
+  panel.inert = true;
+
+  const fileLabel = panel.querySelector('.deck-edit-file');
+  const sourceArea = panel.querySelector('#deck-edit-source');
+  const notesArea = panel.querySelector('#deck-edit-notes');
+  const status = panel.querySelector('.deck-edit-status');
+  const saveButton = panel.querySelector('.deck-edit-save');
+  const confirmBox = panel.querySelector('.deck-edit-confirm');
+
+  // ---- state ------------------------------------------------------------
+
+  let editing = null; // { slide, src, original, label, html, preview } or null
+
+  const joined = () =>
+    joinNotes({ content: sourceArea.value, label: editing.label, notes: notesArea.value.trim() });
+
+  // ---- the live preview -------------------------------------------------
+  // The slide itself is the preview: its innerHTML is re-rendered from the
+  // textarea with the same marked the markdown plugin used, and highlight runs
+  // over the code blocks again. What deck.js adds on top — mermaid, fragment
+  // steps, the dense-code class — waits for the reload a save triggers; a
+  // ```mermaid fence shows as its source while it is being written, which is
+  // the editable form of it anyway. Closing without saving puts the original
+  // rendering back, so nothing of this survives a cancel.
+
+  const markdownPlugin = deck.getPlugin('markdown');
+  const highlightPlugin = deck.getPlugin('highlight');
+  const marked = markdownPlugin?.marked;
+  const render = marked ? (marked.parse ?? marked).bind(marked) : null;
+
+  let frame = 0;
+  const paint = () => {
+    frame = 0;
+    if (!editing?.preview) return;
+    editing.slide.innerHTML = render(sourceArea.value);
+    if (highlightPlugin?.hljs) {
+      for (const block of editing.slide.querySelectorAll('pre code')) {
+        highlightPlugin.hljs.highlightElement(block);
+      }
+    }
+    // The rewrite dropped the slide's fragments, but reveal still counts the
+    // old ones — without this, the first "next" steps a ghost.
+    deck.syncFragments?.(editing.slide);
+    deck.layout();
+  };
+  const schedulePaint = () => {
+    frame ||= requestAnimationFrame(paint);
+  };
+
+  // ---- open and close ---------------------------------------------------
+  // The deck is narrowed by CSS while the drawer is out (see theme.base.css);
+  // reveal only rescales when told to, so layout() is driven for as long as
+  // the width is moving — the outline does the same on the other edge.
+
+  const reflow = () => {
+    const until = performance.now() + SLIDE_MS;
+    const step = () => {
+      deck.layout();
+      if (performance.now() < until) requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  };
+
+  const setOpen = (open) => {
+    document.body.classList.toggle('edit-open', open);
+    button.setAttribute('aria-pressed', String(open));
+    panel.inert = !open;
+    reflow();
+  };
+
+  // Whatever the preview did to the slide, the original rendering returns —
+  // and unsaved typing goes with it.
+  const discard = () => {
+    cancelAnimationFrame(frame);
+    frame = 0;
+    confirmBox.hidden = true;
+    editing.slide.innerHTML = editing.html;
+    // The original fragments are back; reveal counts them again.
+    deck.syncFragments?.(editing.slide);
+    editing = null;
+  };
+
+  const close = () => {
+    if (!editing) return;
+    discard();
+    setOpen(false);
+    deck.layout();
+  };
+
+  const open = async () => {
+    const slide = deck.getCurrentSlide();
+    const src = SRC(slide);
+    if (!src) return;
+
+    // The source comes from the server, not from the DOM: what is on disk right
+    // now is what an edit starts from, and the server splits the file with the
+    // same arithmetic it will save by.
+    let source;
+    try {
+      const response = await fetch(
+        `/api/slide?file=${encodeURIComponent(src.file)}&index=${src.index}`,
+        { headers: API_HEADERS, cache: 'no-cache' },
+      );
+      if (!response.ok) throw new Error((await response.json()).error ?? response.status);
+      ({ source } = await response.json());
+    } catch (error) {
+      console.warn(`[edit] cannot load the slide: ${error.message}`);
+      return;
+    }
+
+    const { content, label, notes } = splitNotes(source);
+    editing = {
+      slide,
+      src,
+      original: source,
+      label,
+      html: slide.innerHTML,
+      // A demo slide's markdown is its marker comment: editable, but rendering
+      // it over the live iframe would preview nothing worth looking at.
+      preview: Boolean(render) && !slide.classList.contains('demo-slide'),
+    };
+
+    fileLabel.textContent = src.file;
+    sourceArea.value = content;
+    notesArea.value = notes;
+    status.textContent = '';
+    saveButton.disabled = false;
+    panel.dataset.focus = 'source';
+
+    // One pointer, one tool: the pen, spotlight and pointer stand down — and
+    // stand this drawer down in turn when one of them arms (see below).
+    document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'edit' }));
+    setOpen(true);
+    sourceArea.focus();
+  };
+
+  const toggle = () => (editing ? close() : open());
+
+  // ---- saving, adding, deleting -----------------------------------------
+  // Every write ends in a reload: the hash keeps the place, and the saved
+  // file goes through the full pipeline instead of the preview's part of it.
+  // The flag below survives the reload so the drawer opens itself again and
+  // the editing flow is not broken by its own saves.
+
+  const REOPEN_KEY = 'fb-slides.edit-reopen';
+
+  const reloadEditing = () => {
+    try {
+      sessionStorage.setItem(REOPEN_KEY, '1');
+    } catch {
+      /* walled-off storage only costs the reopen */
+    }
+    location.reload();
+  };
+
+  const post = async (body) => {
+    const response = await fetch('/api/slide', {
+      method: 'POST',
+      headers: { ...API_HEADERS, 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!response.ok) throw new Error((await response.json()).error ?? response.status);
+    return response.json();
+  };
+
+  // One write in flight at a time; the message stays if the server refuses.
+  const write = async (label, body, landing) => {
+    if (!editing || saveButton.disabled) return;
+    saveButton.disabled = true;
+    status.textContent = `${label}…`;
+    try {
+      await post(body);
+      if (landing !== undefined) location.hash = `#/${landing}`;
+      reloadEditing();
+    } catch (error) {
+      saveButton.disabled = false;
+      status.textContent = error.message;
+    }
+  };
+
+  const save = () => {
+    if (!editing) return;
+    const next = joined();
+    // Nothing changed: closing is the whole save.
+    if (next === editing.original) return close();
+    write('saving', { ...editing.src, expected: editing.original, source: next });
+  };
+
+  // The new slide lands right after this one, and the reload opens it — ready
+  // for its content. Whatever was typed here and not saved goes the usual way.
+  const addSlide = () => {
+    if (!editing) return;
+    write('adding', { op: 'add', ...editing.src }, deck.getIndices().h + 1);
+  };
+
+  // The slide after the deleted one slides into this spot, so the hash can
+  // stay put; reveal clamps it if the deck just got shorter at the end.
+  const deleteSlide = () => {
+    confirmBox.hidden = true;
+    if (!editing) return;
+    write('deleting', { op: 'delete', ...editing.src, expected: editing.original });
+  };
+
+  // ---- wiring -----------------------------------------------------------
+
+  button.addEventListener('click', toggle);
+  panel.querySelector('.deck-edit-close').addEventListener('click', close);
+  saveButton.addEventListener('click', save);
+  sourceArea.addEventListener('input', schedulePaint);
+
+  // The header's arrows walk the deck whole slides at a time — fragments are a
+  // stage thing — and the drawer follows through `slidechanged` like any other
+  // navigation.
+  for (const nav of panel.querySelectorAll('.deck-edit-nav')) {
+    nav.addEventListener('click', () => {
+      if (Number(nav.dataset.go) < 0) deck.left({ skipFragments: true });
+      else deck.right({ skipFragments: true });
+    });
+  }
+
+  // Whichever box the cursor is in gets the room; the other keeps a readable
+  // strip. The swap is CSS's — see [data-focus] in theme.base.css.
+  for (const [area, focus] of [[sourceArea, 'source'], [notesArea, 'notes']]) {
+    area.addEventListener('focus', () => {
+      panel.dataset.focus = focus;
+    });
+  }
+
+  // Deleting is the one thing a reload cannot undo, so it asks first — an
+  // overlay over the drawer, not a browser dialog.
+  panel.querySelector('.deck-edit-add').addEventListener('click', addSlide);
+  panel.querySelector('.deck-edit-delete').addEventListener('click', () => {
+    if (!editing) return;
+    confirmBox.querySelector('code').textContent = editing.src.file;
+    confirmBox.hidden = false;
+  });
+  panel.querySelector('.deck-edit-cancel').addEventListener('click', () => {
+    confirmBox.hidden = true;
+  });
+  panel.querySelector('.deck-edit-confirm-delete').addEventListener('click', deleteSlide);
+
+  // Cmd+S / Ctrl+S anywhere in the drawer saves; the browser's own save-page
+  // dialog has no business over an editor.
+  panel.addEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
+      event.preventDefault();
+      save();
+    }
+  });
+
+  // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
+  // help overlay. Reveal ignores the keyboard while a textarea has focus, so
+  // closing from inside the drawer is Escape's job, taken in capture phase
+  // before reveal reads it as the overview toggle.
+  deck.addKeyBinding({ keyCode: KEY_CODE, key: 'T', description: 'Edit the slide' }, toggle);
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.key !== 'Escape' || !editing) return;
+      // One layer at a time: a pending delete question goes first.
+      if (confirmBox.hidden) close();
+      else confirmBox.hidden = true;
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    true,
+  );
+
+  // Another tool arming is the signal to stand down — same handshake the pen,
+  // spotlight and pointer use among themselves, and unsaved typing goes the
+  // way a half-drawn line does.
+  document.addEventListener('deck:tool-armed', (event) => {
+    if (event.detail !== 'edit') close();
+  });
+
+  // A write reloaded the page with the drawer out: pick the editing back up
+  // on whatever slide the hash landed on.
+  try {
+    if (sessionStorage.getItem(REOPEN_KEY)) {
+      sessionStorage.removeItem(REOPEN_KEY);
+      if (deck.isReady?.()) open();
+      else deck.on('ready', open);
+    }
+  } catch {
+    /* walled-off storage: the drawer just stays closed */
+  }
+
+  // The drawer follows the deck: landing on another slide loads that one,
+  // and whatever was typed on the old one goes the way of a cancel. The
+  // overview is a different surface altogether, so there it does close.
+  deck.on('slidechanged', async () => {
+    if (!editing) return;
+    discard();
+    await open();
+    // The new slide would not load — a drawer left standing would lie about
+    // what it edits.
+    if (!editing) setOpen(false);
+  });
+  deck.on('overviewshown', close);
+};
+
+export default RevealEdit;

package/runtime/spotlight.js

@@ -102,6 +102,7 @@ const RevealSpotlight = () => ({
     let rect = null; // {x, y, w, h} in screen px, or null when the veil is clear
     let press = null; // where the current drag started, or null
     let grab = null; // the pointer's offset into a rectangle being moved, or null
+    let ghostTimer = 0; // closes the old hole once the veil has faded out
 
     const layout = () => {
       if (!rect) return;
@@ -120,7 +121,11 @@ const RevealSpotlight = () => ({
     };
 
     // The clip-path stays as it was, so the hole holds its place while the
-    // veil fades out around it.
+    // veil fades out around it — but only for as long as the fade runs. The
+    // clip cuts hit-testing along with paint, so a ghost hole left on an
+    // armed veil would keep handing the pointer to the slide underneath:
+    // right where the light last was, a drag would select text instead of
+    // drawing the next rectangle.
     const clear = () => {
       rect = null;
       press = null;
@@ -128,12 +133,19 @@ const RevealSpotlight = () => ({
       veil.classList.remove('has-hole');
       ring.classList.remove('has-hole', 'is-live');
       ring.style.cursor = '';
+      clearTimeout(ghostTimer);
+      ghostTimer = setTimeout(() => {
+        if (!rect) veil.style.clipPath = '';
+      }, 320); // just past the 0.3s fade
     };
 
     const setSpot = (on) => {
       armed = on;
       button.setAttribute('aria-pressed', String(on));
       toolbar.classList.toggle('is-armed', on);
+      // Arming must start from a whole veil: a hole still mid-fade from last
+      // time would leak the pointer through (see clear above).
+      if (on) veil.style.clipPath = '';
       // Only an armed veil takes the pointer; the rest of the time clicks fall
       // through to the slide underneath — same contract as the pen's canvas.
       veil.classList.toggle('is-live', on);

package/runtime/theme.base.css

@@ -21,8 +21,11 @@
      long titles. */
   --outline-w: 300px;
   --outline-step: 15px;
-  /* Its scrollbar, at rest and under the pointer: tokens so a project that
-     reskins the panel does not have to restate the WebKit rules. */
+  /* The edit drawer down the right edge (edit.js, dev server only). */
+  --editor-w: 400px;
+  /* The hairline scrollbar the outline list and the edit drawer's boxes share,
+     at rest and under the pointer: tokens so a project that reskins either
+     panel does not have to restate the WebKit rules. */
   --outline-bar: color-mix(in srgb, var(--text) 16%, transparent);
   --outline-bar-hover: color-mix(in srgb, var(--text) 30%, transparent);
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -840,6 +843,233 @@ body.outline-open #deck-outline { transform: none; }
   background: color-mix(in srgb, var(--text) 5%, transparent);
 }
 
+/* --- the edit drawer (edit.js) -------------------------------------------- */
+
+/* The outline's mirror image: it takes room from the deck's right edge, so the
+   slide stays whole — and is the live preview — while its markdown is typed.
+   Only the dev server ever shows it; a built deck never builds this chrome. */
+body.edit-open > .reveal { width: calc(100% - var(--editor-w)); }
+/* Both panels out at once: the deck keeps to the strip between them. */
+body.outline-open.edit-open > .reveal { width: calc(100% - var(--outline-w) - var(--editor-w)); }
+body.edit-open #deck-tools { left: calc(50% - var(--editor-w) / 2); }
+body.outline-open.edit-open #deck-tools { left: calc(50% + var(--outline-w) / 2 - var(--editor-w) / 2); }
+/* The corner chrome on the right steps clear of the drawer. */
+body.edit-open #deck-badge { right: calc(var(--editor-w) + 18px); }
+body.edit-open #deck-sig { right: calc(var(--editor-w) + 14px); }
+
+#deck-edit {
+  position: fixed;
+  inset: 0 0 0 auto;
+  z-index: 46;
+  display: flex;
+  flex-direction: column;
+  width: var(--editor-w);
+  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
+  border-left: 1px solid var(--line);
+  backdrop-filter: blur(10px);
+  transform: translateX(100%);
+  transition: transform 0.26s ease;
+}
+body.edit-open #deck-edit { transform: none; }
+
+#deck-edit > header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 10px 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+#deck-edit > header span {
+  font: 600 12px/1 var(--sans);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.deck-edit-file {
+  flex: 1;
+  font: 500 12px/1 var(--mono);
+  color: var(--accent-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.deck-edit-close,
+.deck-edit-nav {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.deck-edit-close:hover,
+.deck-edit-nav:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
+.deck-edit-close svg,
+.deck-edit-nav svg { display: block; width: 16px; height: 16px; }
+
+.deck-edit-label {
+  padding: 12px 16px 6px;
+  font: 600 10px/1 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+#deck-edit textarea {
+  margin: 0 12px;
+  padding: 10px 12px;
+  font: 400 13px/1.55 var(--mono);
+  color: var(--text);
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  resize: none;
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+#deck-edit textarea:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+/* The same hairline the outline list wears, on the two boxes that scroll — a
+   slide long enough to run past the drawer is the ordinary case, and macOS
+   fades its overlay bar away exactly when you want the hint that there is more
+   below. Quiet at rest, awake while the drawer is under the pointer, and
+   tinted with the accent on the box that holds the cursor, so the bar you can
+   drag is the one you are already typing in. */
+#deck-edit textarea::-webkit-scrollbar { width: 5px; }
+#deck-edit textarea::-webkit-scrollbar-track { background: transparent; }
+#deck-edit textarea::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--outline-bar);
+}
+#deck-edit:hover textarea::-webkit-scrollbar-thumb { background: var(--outline-bar-hover); }
+#deck-edit textarea:focus::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
+}
+#deck-edit textarea::-webkit-scrollbar-thumb:hover,
+#deck-edit textarea:focus::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--accent) 75%, transparent);
+}
+/* Firefox only, for the reason the outline states above: naming
+   `scrollbar-width` in Chrome throws away every WebKit rule here. */
+@supports not selector(::-webkit-scrollbar) {
+  #deck-edit textarea {
+    scrollbar-width: thin;
+    scrollbar-color: var(--outline-bar) transparent;
+  }
+  #deck-edit:hover textarea { scrollbar-color: var(--outline-bar-hover) transparent; }
+  #deck-edit textarea:focus {
+    scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
+  }
+}
+/* Whichever box holds the cursor gets the room, the other keeps a readable
+   strip — edit.js writes [data-focus] as the focus moves, and the swap
+   animates through flex. The slide box starts big: notes are the side dish. */
+#deck-edit textarea {
+  min-height: 0;
+  transition: flex-grow 0.25s ease, flex-basis 0.25s ease;
+}
+#deck-edit-source { flex: 1 1 0; }
+#deck-edit-notes { flex: 0 0 120px; }
+#deck-edit[data-focus='notes'] #deck-edit-source { flex: 0 0 120px; }
+#deck-edit[data-focus='notes'] #deck-edit-notes { flex: 1 1 0; }
+
+#deck-edit > footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px 14px;
+}
+.deck-edit-status {
+  flex: 1;
+  font: 400 12px/1.4 var(--sans);
+  color: var(--muted);
+  overflow: hidden;
+}
+.deck-edit-save {
+  padding: 7px 18px;
+  border: 0;
+  border-radius: 999px;
+  font: 600 13px/1 var(--sans);
+  color: #0d1626;
+  background: var(--accent);
+  cursor: pointer;
+}
+.deck-edit-save:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
+.deck-edit-save:disabled { opacity: 0.5; cursor: default; }
+
+/* The file operations, quieter than Save: Add is an ordinary pill, Delete only
+   shows its colour when the pointer commits to it. */
+.deck-edit-add,
+.deck-edit-delete {
+  padding: 6px 13px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  font: 600 12px/1 var(--sans);
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+}
+.deck-edit-add:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); }
+.deck-edit-delete:hover { border-color: #e5484d; color: #ff8589; }
+
+/* The delete question, over the drawer alone — the deck stays untouched. */
+.deck-edit-confirm {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  text-align: center;
+  background: color-mix(in srgb, var(--bg) 68%, transparent);
+  backdrop-filter: blur(5px);
+}
+.deck-edit-confirm[hidden] { display: none; }
+.deck-edit-confirm p {
+  margin: 0;
+  font: 400 13.5px/1.6 var(--sans);
+  color: var(--text);
+}
+.deck-edit-confirm p code { font: 500 12.5px var(--mono); color: var(--accent-2); }
+.deck-edit-confirm > div { display: flex; gap: 10px; }
+.deck-edit-cancel,
+.deck-edit-confirm-delete {
+  padding: 7px 18px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  font: 600 13px/1 var(--sans);
+  color: var(--text);
+  background: transparent;
+  cursor: pointer;
+}
+.deck-edit-cancel:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
+.deck-edit-confirm-delete {
+  border: 0;
+  color: #fff;
+  background: #e5484d;
+}
+.deck-edit-confirm-delete:hover { background: #f2555a; }
+
+/* The open drawer's button wears the accent — it draws in nothing, like the
+   pointer's; the id outweighs the generic armed-tool rule. */
+#tool-edit[aria-pressed='true'] {
+  background: var(--accent);
+  color: #0d1626;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent),
+    0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
 /* --- the pointer (pointer.js) -------------------------------------------- */
 
 /* The real cursor goes away everywhere while the pointer is armed — the
@@ -1036,7 +1266,8 @@ html.deck-pointer-on * { cursor: none !important; }
   #deck-pointer,
   #deck-tools,
   #deck-menu,
-  #deck-outline { display: none; }
+  #deck-outline,
+  #deck-edit { display: none; }
   /* The signature stays on the exported PDF — but the pill behind it does not
      survive a white page. */
   #deck-sig .sig-name { background: none; border-color: transparent; backdrop-filter: none; color: #444; }

package/templates/starter/README.md

@@ -23,5 +23,8 @@ npm run preview   # build, then serve dist/
 The Angular demo needs its own install once — `npm --prefix demo/angular-hello install`.
 Without it that one slide comes up empty and everything else works.
 
+To swap it for a real app of your own — copied in whole, with its own `package.json` and
+`node_modules` — see [framework demos](https://github.com/fabiobiondi/fb-slides/blob/main/docs/framework-demos.md).
+
 The deck engine itself is not in this repo: it comes from the package, so
 `npm update __PKG__` brings new features to this talk and every other one.