fb-slides 0.1.2 → 0.4.0

package/README.md

@@ -129,6 +129,8 @@ Note: a bad description is the most common reason a tool never gets used.
 | --- | --- |
 | `→` / `Space` | next step (fragments included) |
 | `P` | the pen — draw on the slide, the ink fades on its own |
+| `A` | the arrow — click the tail, then the tip; same colours as the pen |
+| `C` | the pointer — replaces the cursor: a glowing halo, a dart aimed at the centre, or the normal mouse |
 | `Shift` (tap) | the spotlight — drag a rectangle, the rest of the slide dims and blurs |
 | `S` | speaker view — notes, timer, next slide |
 | `Esc` / `O` | overview — the slides as a grid |
@@ -151,6 +153,8 @@ export default {
   decks: 'decks',                // folder of .md
   demos: 'demo',                 // folder behind a bare `<!-- demo: name -->`
   static: ['assets', 'demo'],    // served and published; auto-detected when omitted
+  revealTheme: 'dracula',        // one of reveal.js's own themes; omit for this one
+  webfonts: false,               // let the reveal themes fetch their Google fonts
   theme: 'theme.css',            // loaded after the base theme; auto when it exists
   favicon: 'assets/favicon.png',
 
@@ -193,6 +197,34 @@ rather than replaces. Almost everything hangs off the tokens in `:root`:
 }
 ```
 
+### reveal.js themes
+
+The fifteen themes from [revealjs.com/themes](https://revealjs.com/themes/) are all in the
+box — pick one by name and nothing else changes:
+
+```js
+export default { revealTheme: 'dracula' };
+```
+
+`beige` · `black` · `black-contrast` · `blood` · `dracula` · `league` · `moon` · `night` ·
+`serif` · `simple` · `sky` · `solarized` · `white` · `white-contrast`
+
+Only the chosen one is ever loaded — one `<link>`, ~7 KB — and the build copies that file
+and nothing else. Two things happen beyond the link:
+
+**It is served from the deck, not from a CDN.** Six of the themes open with
+`@import url(https://fonts.googleapis.com/…)`. Those lines are stripped, so a talk still
+renders with the wifi off; the theme falls back to the next font in its own stack. Pass
+`webfonts: true` to let them through and get the typography of the previews exactly. The
+font folders reveal ships itself — league-gothic, source-sans-pro — are copied into
+`dist/` when the theme asks for them.
+
+**The chrome follows the theme.** The navigator, the badge and the signature are not
+`.reveal` elements, so a borrowed theme would leave a black panel down the side of a white
+deck. Every reveal 5 theme declares its palette as `--r-*` custom properties, and the base
+theme points its own tokens at them, so the whole page moves together. A `theme.css` in the
+project still has the last word over both.
+
 ## Publishing
 
 ```bash

package/bin/fb-slides.mjs

@@ -69,11 +69,12 @@ const run = async () => {
 
   const { loadConfig } = await import('../lib/config.mjs');
   const root = process.cwd();
-  const config = await loadConfig(root, overrides());
+  const reload = () => loadConfig(root, overrides());
+  const config = await reload();
 
   if (command === 'dev') {
     const { dev } = await import('../lib/dev.mjs');
-    return void (await dev(config, RUNTIME));
+    return void (await dev(config, RUNTIME, reload));
   }
 
   if (command === 'build') {

package/lib/build.mjs

@@ -14,6 +14,7 @@ import { basename, dirname, join, relative, resolve, sep } from 'node:path';
 import { assertUsable } from './config.mjs';
 import { listDecks } from './decks.mjs';
 import { renderIndex } from './render.mjs';
+import { REVEAL_THEME_URL, readRevealTheme } from './theme.mjs';
 import { VENDOR_FILES, VENDOR_MOUNTS, packageDir } from './vendor.mjs';
 
 const copyFile = async (from, to) => {
@@ -59,6 +60,18 @@ export const build = async (config, runtimeDir, { quiet = false } = {}) => {
     await cp(from, join(out, dir), { recursive: true, filter: (src) => !excluded(src) });
   }
 
+  // 3b. the reveal theme, rewritten, with the font folders it imports — and
+  //     only those: source-sans-pro is 1.8 MB and most themes never ask for it.
+  if (config.revealTheme) {
+    const { css, fonts, dir } = await readRevealTheme(config.revealTheme, { webfonts: config.webfonts });
+    await writeFile(join(out, REVEAL_THEME_URL), css);
+    for (const font of fonts) {
+      await cp(join(dir, 'fonts', font), join(out, 'vendor', VENDOR_MOUNTS['reveal.js'], 'dist/theme/fonts', font), {
+        recursive: true,
+      });
+    }
+  }
+
   // 4. loose root files the config names — a theme override, a favicon.
   for (const file of [config.theme, config.favicon].filter(Boolean)) {
     const from = resolve(config.root, file);
@@ -73,7 +86,8 @@ export const build = async (config, runtimeDir, { quiet = false } = {}) => {
   await writeFile(join(out, 'decks.json'), `${JSON.stringify(decks, null, 2)}\n`);
 
   if (!quiet) {
-    console.log(`  ${config.outDir}/ ← ${decks.length} decks · ${config.static.join(', ') || 'no static dirs'} · ${Date.now() - started}ms`);
+    const theme = config.revealTheme ? ` · theme ${config.revealTheme}` : '';
+    console.log(`  ${config.outDir}/ ← ${decks.length} decks · ${config.static.join(', ') || 'no static dirs'}${theme} · ${Date.now() - started}ms`);
   }
   return { decks, out };
 };

package/lib/config.mjs

@@ -6,10 +6,12 @@
 // needs running. A project that follows the default shape needs no config at all.
 // ---------------------------------------------------------------------------
 
-import { existsSync } from 'node:fs';
+import { existsSync, statSync } from 'node:fs';
 import { basename, join, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 
+import { assertRevealTheme } from './theme.mjs';
+
 const CONFIG_FILES = ['slides.config.js', 'slides.config.mjs', 'slides.config.json'];
 
 // Directories a project gets served and published for free when it has them, so
@@ -22,7 +24,10 @@ export const ALWAYS_EXCLUDED = ['node_modules', '.git', '.angular', '.next', '.c
 export const findConfigFile = (root) => CONFIG_FILES.map((name) => join(root, name)).find(existsSync) ?? null;
 
 const importConfig = async (file) => {
-  const url = pathToFileURL(file).href;
+  // ESM caches a module by URL for the life of the process, so the dev server's
+  // second read of an edited config would be the first one again. The mtime in
+  // the query makes it a different URL exactly when the file has changed.
+  const url = `${pathToFileURL(file).href}?t=${statSync(file).mtimeMs}`;
   const module = file.endsWith('.json')
     ? await import(url, { with: { type: 'json' } })
     : await import(url);
@@ -53,6 +58,14 @@ export const loadConfig = async (root = process.cwd(), overrides = {}) => {
     decksDir,
     demosDir,
     static: statics,
+    // One of reveal's own fifteen — 'dracula', 'sky', 'white'. It lands after
+    // the base theme and takes the slides; the chrome follows it through the
+    // `--r-*` variables every reveal 5 theme declares. Null: this package's look.
+    revealTheme: user.revealTheme ?? null,
+    // Six of those themes pull their typefaces from fonts.googleapis.com. Off by
+    // default — the deck is served whole or not at all — at the cost of falling
+    // back to the theme's second-choice font stack.
+    webfonts: user.webfonts ?? false,
     // The project's own CSS, loaded *after* the base theme: an override, not a
     // replacement. `theme.css` at the root is picked up without being declared.
     theme: user.theme ?? (existsSync(join(root, 'theme.css')) ? 'theme.css' : null),
@@ -72,6 +85,10 @@ export const loadConfig = async (root = process.cwd(), overrides = {}) => {
     exclude: [...ALWAYS_EXCLUDED, overrides.outDir ?? user.outDir ?? 'dist', ...(user.exclude ?? [])],
   };
 
+  // Named early: a typo in the config should be a message, not a deck that
+  // silently wears the wrong clothes.
+  if (config.revealTheme) await assertRevealTheme(config.revealTheme);
+
   config.decksPath = resolve(root, config.decksDir);
   config.outPath = resolve(root, config.outDir);
   // What the browser asks for, as opposed to where it is on disk.

package/lib/dev.mjs

@@ -13,6 +13,7 @@ import { join, resolve } from 'node:path';
 import { assertUsable } from './config.mjs';
 import { createDeckServer, listen } from './server.mjs';
 import { renderIndex } from './render.mjs';
+import { REVEAL_THEME_URL, readRevealTheme } from './theme.mjs';
 import { VENDOR_MOUNTS, packageDir } from './vendor.mjs';
 
 const OPEN = { darwin: 'open', win32: 'start' };
@@ -52,8 +53,25 @@ const startSideServer = (spec, root, children) => {
   });
 };
 
-export const dev = async (config, runtimeDir) => {
+// What the page is built from, read again on every request. A config with a
+// syntax error in it — the state it is in halfway through an edit — leaves the
+// last good one standing rather than serving a broken deck.
+const reader = (config, reload) => {
+  let good = config;
+  return async () => {
+    if (!reload) return good;
+    try {
+      good = await reload();
+    } catch (error) {
+      console.warn(`  ⚠  slides.config: ${error.message}`);
+    }
+    return good;
+  };
+};
+
+export const dev = async (config, runtimeDir, reload) => {
   assertUsable(config);
+  const current = reader(config, reload);
 
   const mounts = [
     // The project first: a file next to the decks shadows the one this package
@@ -69,8 +87,18 @@ export const dev = async (config, runtimeDir) => {
   const server = createDeckServer({
     mounts,
     decksPath: config.decksPath,
-    // Rendered per request: editing slides.config.js and reloading is enough.
-    index: () => renderIndex(config, runtimeDir),
+    // Rendered per request from a config read per request: editing the title,
+    // the theme or the signature and reloading is enough. What was fixed when
+    // the server came up — the mounts, the port, the side processes — still
+    // needs a restart.
+    index: async () => renderIndex(await current(), runtimeDir),
+    generated: {
+      [`/${REVEAL_THEME_URL}`]: async () => {
+        const now = await current();
+        if (!now.revealTheme) return '/* no revealTheme in slides.config.js */';
+        return (await readRevealTheme(now.revealTheme, { webfonts: now.webfonts })).css;
+      },
+    },
   });
 
   await listen(server, config.port);

package/lib/render.mjs

@@ -7,6 +7,8 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
+import { REVEAL_THEME_URL } from './theme.mjs';
+
 const escapeHtml = (value) =>
   String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
 
@@ -28,6 +30,9 @@ const signatureHtml = (signature) => {
 const headHtml = (config) => {
   const tags = [];
   if (config.favicon) tags.push(`<link rel="icon" href="${escapeHtml(config.favicon)}" />`);
+  // After the base theme, before the project's: reveal's theme dresses the
+  // slides, and whatever the project says still has the last word.
+  if (config.revealTheme) tags.push(`<link rel="stylesheet" href="${REVEAL_THEME_URL}" />`);
   // After the base theme on purpose: the project's CSS overrides, it does not replace.
   if (config.theme) tags.push(`<link rel="stylesheet" href="${escapeHtml(config.theme)}" />`);
   return tags.join('\n    ');
@@ -43,7 +48,12 @@ export const renderIndex = async (config, runtimeDir) => {
     fragmentLists: config.fragmentLists,
   };
 
+  // The chrome reads this to take its colours from the reveal theme instead of
+  // the base one — see the bridge at the top of theme.base.css.
+  const htmlAttrs = config.revealTheme ? ` data-reveal-theme="${escapeHtml(config.revealTheme)}"` : '';
+
   return template
+    .replaceAll('{{htmlAttrs}}', htmlAttrs)
     .replaceAll('{{lang}}', escapeHtml(config.lang))
     .replaceAll('{{title}}', escapeHtml(config.title))
     .replaceAll('{{head}}', headHtml(config))

package/lib/server.mjs

@@ -99,7 +99,9 @@ const sendFile = (req, res, path, size) => {
 };
 
 // mounts: [{ prefix: '/', dir }] — checked in order, first hit wins.
-export const createDeckServer = ({ mounts, index, decksPath }) => {
+// 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 = {} }) => {
   const handler = async (req, res) => {
     if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, 'method not allowed');
 
@@ -120,6 +122,10 @@ export const createDeckServer = ({ mounts, index, decksPath }) => {
       return send(res, 200, body, { 'Content-Type': MIME['.json'] });
     }
 
+    if (generated[pathname]) {
+      return send(res, 200, await generated[pathname](), { 'Content-Type': mime(pathname) });
+    }
+
     if (DENIED.test(pathname)) return send(res, 403, 'forbidden', { 'Content-Type': MIME['.txt'] });
 
     for (const { prefix, dir } of mounts) {

package/lib/theme.mjs

@@ -0,0 +1,57 @@
+// ---------------------------------------------------------------------------
+// reveal.js ships fifteen themes; a deck wears one of them, or none.
+//
+// They are not linked straight out of node_modules. Six of the fifteen open with
+// `@import url(https://fonts.googleapis.com/…)`, which is a third-party request
+// on every load — and a talk that has to survive the conference wifi cannot rest
+// on one. The file is rewritten instead: the remote imports go, the font folders
+// reveal already ships locally stay, and what the browser gets is served from
+// this project like everything else.
+//
+// The rewritten file is generated per request in dev and written once by build,
+// at the same URL either way — index.html never learns which of the two it is.
+// ---------------------------------------------------------------------------
+
+import { readdir, readFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+
+import { VENDOR_MOUNTS, packageDir } from './vendor.mjs';
+
+export const REVEAL_THEME_URL = 'reveal-theme.css';
+
+const themeDir = () => join(packageDir('reveal.js'), 'dist', 'theme');
+
+// The theme is served from the site root, so reveal's own `./fonts/…` would
+// resolve one folder too high: point it at the vendor mount instead.
+const FONT_BASE = `vendor/${VENDOR_MOUNTS['reveal.js']}/dist/theme/fonts/`;
+
+const REMOTE_IMPORT = /@import\s+url\(\s*['"]?https?:[^)]*\)\s*;?[ \t]*\n?/gi;
+const LOCAL_FONT_URL = /url\(\s*['"]?\.\/fonts\//gi;
+
+export const listRevealThemes = async () =>
+  (await readdir(themeDir()))
+    .filter((file) => file.endsWith('.css'))
+    .map((file) => basename(file, '.css'))
+    .sort();
+
+export const assertRevealTheme = async (name) => {
+  const themes = await listRevealThemes();
+  if (themes.includes(name)) return name;
+  throw new Error(
+    `unknown revealTheme: ${name}\n` +
+      `  reveal.js ships: ${themes.join(', ')}\n` +
+      `  drop the key for this package's own theme`,
+  );
+};
+
+// The font folders the chosen theme actually imports. build copies these and
+// nothing else: source-sans-pro alone is 1.8 MB, and most themes never ask for it.
+const fontDirs = (css) => [...new Set([...css.matchAll(/\.\/fonts\/([^/]+)\//g)].map((m) => m[1]))];
+
+// `webfonts: true` keeps the Google Fonts imports — the exact typography of
+// revealjs.com/themes, at the cost of the offline guarantee.
+export const readRevealTheme = async (name, { webfonts = false } = {}) => {
+  const source = await readFile(join(themeDir(), `${name}.css`), 'utf8');
+  const css = (webfonts ? source : source.replace(REMOTE_IMPORT, '')).replace(LOCAL_FONT_URL, `url(${FONT_BASE}`);
+  return { css, fonts: fontDirs(source), dir: themeDir() };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.1.2",
+  "version": "0.4.0",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/annotate.js

@@ -5,6 +5,10 @@
 // whole feature — its chrome, its canvas and its key bindings — and index.html
 // stays a page of slides. Register it in the `plugins:` array like any other.
 //
+// Two tools share everything here: the pen, and the arrow — click where it
+// starts, click (or release a drag) where it points. Same canvas, same
+// palette, same hold-then-fade; an arrow is just one more kind of stroke.
+//
 // The ink goes on one full-viewport canvas in screen pixels, which keeps it
 // clear of the CSS transform reveal scales a slide with: the pen follows the
 // pointer, not the slide's coordinate space.
@@ -25,9 +29,11 @@ const COLOURS = [
   { label: 'Black', glow: '#000000', core: '#000000' },
 ];
 
-// A released stroke rubs itself out from its oldest point towards its newest.
-// FADE_MS is how long that takes end to end, FADE_TAIL how much of the stroke
-// the erase front softens as it passes — at 0 it would be a hard wipe.
+// A released stroke holds on screen for HOLD_MS, then rubs itself out from its
+// oldest point towards its newest. FADE_MS is how long the erase takes end to
+// end, FADE_TAIL how much of the stroke the erase front softens as it passes —
+// at 0 it would be a hard wipe.
+const HOLD_MS = 2000;
 const FADE_MS = 1600;
 const FADE_TAIL = 0.35;
 
@@ -44,6 +50,14 @@ const TENSION = 1 / 6;
 
 const WIDTH = 3.4; // px, the bright core of the line
 
+// The arrow's head: how far back along the shaft the wings reach, and how far
+// they open off it. A short arrow shrinks its head rather than being all head.
+const HEAD_LEN = 48;
+const HEAD_SPREAD = 0.55; // radians
+// Under this, a press-and-release is a click placing the tail, not a whole
+// arrow: the tip then follows the pointer until the second click.
+const MIN_ARROW = 12;
+
 // Two layers, each the same path stroked at a few widths: a soft halo, then the
 // core on top of it. Within a layer the passes stack additively, hence the low
 // alphas. Cheaper than a shadowBlur per segment.
@@ -62,8 +76,10 @@ const QUANTA = 24;
 // `P` is reveal's own previous-slide key, and a plugin binding wins over it —
 // which is the point: on stage the pen is reached for far more often than a key
 // ← and Shift+Space already do. Reveal's own row in the help overlay still
-// lists it, though, so it has to be corrected.
-const KEY_CODE = 80;
+// lists it, though, so it has to be corrected. `A` is reveal's auto-slide
+// toggle, idle in a deck that does not auto-advance — the arrow takes it.
+const PEN_KEY_CODE = 80;
+const ARROW_KEY_CODE = 65;
 const HELP_TAKEN_FROM = { key: 'P', from: /previous/i };
 
 const PEN_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
@@ -71,6 +87,11 @@ const PEN_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" str
   <path d="M15.2 4.6l4.2 4.2" /><path d="M4 20l4.7-1L19.8 7.9a2 2 0 0 0-2.8-2.8L5.9 16.3 4 20z" />
 </svg>`;
 
+const ARROW_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="M5 19L19 5" /><path d="M9.5 5H19v9.5" />
+</svg>`;
+
 // Black text on a light chip, light text on a dark one — the armed pen button
 // wears the ink's own colour, and two of the six are the extremes.
 const readable = (hex) => {
@@ -124,7 +145,9 @@ const RevealAnnotate = () => ({
     toolbar.innerHTML = `
       <button id="tool-pen" class="deck-tool" type="button" aria-pressed="false"
               title="Pen — draw on the slide (P)" aria-label="Pen">${PEN_ICON}</button>
-      <div id="deck-swatches" role="radiogroup" aria-label="Pen colour" hidden>
+      <button id="tool-arrow" class="deck-tool" type="button" aria-pressed="false"
+              title="Arrow — click the tail, then the tip (A)" aria-label="Arrow">${ARROW_ICON}</button>
+      <div id="deck-swatches" role="radiogroup" aria-label="Ink colour" hidden>
         ${COLOURS.map(
           (colour, i) => `<button class="deck-swatch" type="button" role="radio"
              aria-checked="${i === 0}" data-colour="${i}" style="--ink:${colour.glow}"
@@ -135,6 +158,7 @@ const RevealAnnotate = () => ({
 
     document.body.append(canvas, toolbar);
     const penButton = toolbar.querySelector('#tool-pen');
+    const arrowButton = toolbar.querySelector('#tool-arrow');
     const swatches = toolbar.querySelector('#deck-swatches');
     const ctx = canvas.getContext('2d');
 
@@ -206,10 +230,14 @@ const RevealAnnotate = () => ({
     // ---- strokes --------------------------------------------------------
     // A stroke is its points, the colour it was drawn in, and the moment the
     // pointer left the slide: `releasedAt: null` is one still under the pen.
+    // An arrow rides the same list with `kind: 'arrow'` and two points, `from`
+    // and `to` — it holds and fades exactly like a line of ink.
 
     const strokes = [];
-    let drawing = null;
+    let drawing = null; // the pen's live stroke, or null
+    let placing = null; // an arrow whose tip still follows the pointer, or null
     let frame = 0;
+    let holdTimer = 0;
 
     const addPoint = (event) => {
       const points = drawing.points;
@@ -282,11 +310,65 @@ const RevealAnnotate = () => ({
       return runs;
     };
 
+    // An arrow has no oldest end worth erasing first: it fades out whole, the
+    // shaft and its head together. The shaft ends where the head begins, so
+    // the glow's rounded cap never pokes past the tip.
+    const paintArrow = (stroke, progress) => {
+      const { from, to } = stroke;
+      const length = Math.hypot(to.x - from.x, to.y - from.y);
+      if (length < 1) return true;
+      const box = boundsOf([from, to]);
+      if (box.w <= 0 || box.h <= 0) return true;
+
+      const fade = progress === null ? 1 : 1 - progress;
+      const angle = Math.atan2(to.y - from.y, to.x - from.x);
+      const head = Math.min(HEAD_LEN, length * 0.6);
+      const wings = [HEAD_SPREAD, -HEAD_SPREAD].map((spread) => ({
+        x: to.x - head * Math.cos(angle + spread),
+        y: to.y - head * Math.sin(angle + spread),
+      }));
+      const base = {
+        x: to.x - head * 0.75 * Math.cos(angle),
+        y: to.y - head * 0.75 * Math.sin(angle),
+      };
+
+      for (const { ink, passes } of LAYERS) {
+        onLayer(box, stroke.ink[ink], (c) => {
+          c.lineCap = 'round';
+          for (const pass of passes) {
+            c.lineWidth = WIDTH * pass.width;
+            c.strokeStyle = c.fillStyle = `rgba(255, 255, 255, ${fade * pass.alpha})`;
+            c.beginPath();
+            c.moveTo(from.x, from.y);
+            c.lineTo(base.x, base.y);
+            c.stroke();
+            // The head is filled for its body and stroked for its glow: the
+            // stroke fattens it by the same width the shaft wears.
+            c.beginPath();
+            c.moveTo(to.x, to.y);
+            c.lineTo(wings[0].x, wings[0].y);
+            c.lineTo(wings[1].x, wings[1].y);
+            c.closePath();
+            c.fill();
+            c.stroke();
+          }
+        });
+      }
+      return true;
+    };
+
     // Returns false once the stroke has faded out and can be dropped.
     const paint = (stroke, now) => {
-      const progress = stroke.releasedAt === null ? null : (now - stroke.releasedAt) / FADE_MS;
+      // Clamped at 0 through the hold: a stroke waiting its turn paints exactly
+      // like one still under the pen, only released.
+      const progress =
+        stroke.releasedAt === null
+          ? null
+          : Math.max(0, (now - stroke.releasedAt - HOLD_MS) / FADE_MS);
       if (progress !== null && progress >= 1) return false;
 
+      if (stroke.kind === 'arrow') return paintArrow(stroke, progress);
+
       const box = boundsOf(stroke.points);
       if (box.w <= 0 || box.h <= 0) return true;
 
@@ -334,25 +416,36 @@ const RevealAnnotate = () => ({
         if (!paint(strokes[i], now)) strokes.splice(i, 1);
       }
       // Only a fading stroke needs the next frame. A live one changes when a
-      // point is added and not before, so a pen held still costs nothing —
-      // without this the loop repaints a full-screen canvas forever.
-      if (strokes.some((stroke) => stroke.releasedAt !== null)) schedule();
+      // point is added and not before, and a released one sits untouched
+      // through its hold — for those a single timeout wakes the loop when the
+      // first fade is due, instead of repainting a full-screen canvas forever.
+      const waits = strokes
+        .filter((stroke) => stroke.releasedAt !== null)
+        .map((stroke) => stroke.releasedAt + HOLD_MS - now);
+      if (waits.some((wait) => wait <= 0)) schedule();
+      else if (waits.length) holdTimer = setTimeout(schedule, Math.min(...waits));
     };
 
     const schedule = () => {
+      clearTimeout(holdTimer);
+      holdTimer = 0;
       frame ||= requestAnimationFrame(render);
     };
 
     const clear = () => {
       drawing = null;
+      placing = null;
       strokes.length = 0;
+      clearTimeout(holdTimer);
+      holdTimer = 0;
       ctx.clearRect(0, 0, width, height);
     };
 
-    // ---- the pen --------------------------------------------------------
+    // ---- the tools ------------------------------------------------------
 
-    let penOn = false;
+    let tool = null; // null, 'pen' or 'arrow'
     let ink = COLOURS[0];
+    const toolButtons = { pen: penButton, arrow: arrowButton };
 
     const setInk = (colour) => {
       ink = colour;
@@ -364,29 +457,60 @@ const RevealAnnotate = () => ({
       }
     };
 
-    const setPen = (on) => {
-      penOn = on;
-      penButton.setAttribute('aria-pressed', String(on));
-      toolbar.classList.toggle('is-armed', on);
-      // The colours are only worth showing while there is a pen to apply them
-      // to, which makes arming it the one gesture that opens them.
-      swatches.hidden = !on;
+    const setTool = (next) => {
+      if (next === tool) return;
+      // Whatever was mid-gesture under the old tool does not survive the
+      // switch: a half-drawn line is released, a half-aimed arrow discarded.
+      if (drawing) {
+        drawing.releasedAt = performance.now();
+        drawing = null;
+      }
+      if (placing) {
+        strokes.splice(strokes.indexOf(placing), 1);
+        placing = null;
+        schedule();
+      }
+      tool = next;
+      for (const [name, button] of Object.entries(toolButtons)) {
+        button.setAttribute('aria-pressed', String(name === tool));
+      }
+      toolbar.classList.toggle('is-armed', tool !== null);
+      // The colours are only worth showing while there is a tool to apply them
+      // to, which makes arming one the gesture that opens them.
+      swatches.hidden = tool === null;
       // Only an armed canvas takes the pointer; the rest of the time clicks
       // fall through to the slide underneath.
-      canvas.classList.toggle('is-live', on);
-      if (on) document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'pen' }));
+      canvas.classList.toggle('is-live', tool !== null);
+      if (tool) document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: tool }));
       else clear();
     };
+    const toggleTool = (name) => setTool(tool === name ? null : name);
 
-    // Two tools, one pointer: arming either disarms the other. The handshake
+    // Several tools, one pointer: arming any disarms the rest. The handshake
     // is a DOM event rather than an import either way round, so each plugin
-    // works alone.
+    // works alone. Pen and arrow are both this plugin's, so only a foreign
+    // detail stands it down.
     document.addEventListener('deck:tool-armed', (event) => {
-      if (event.detail !== 'pen' && penOn) setPen(false);
+      if (event.detail !== 'pen' && event.detail !== 'arrow' && tool) setTool(null);
     });
 
     canvas.addEventListener('pointerdown', (event) => {
-      if (!penOn || event.button !== 0) return;
+      if (!tool || event.button !== 0) return;
+      if (tool === 'arrow') {
+        // Second click: the tip lands here. First click: the tail does, and
+        // the tip follows the pointer until the next one.
+        if (placing) {
+          placing.to = { x: event.clientX, y: event.clientY };
+          placing.releasedAt = performance.now();
+          placing = null;
+        } else {
+          const at = { x: event.clientX, y: event.clientY };
+          placing = { kind: 'arrow', from: at, to: { ...at }, releasedAt: null, ink };
+          strokes.push(placing);
+        }
+        schedule();
+        return;
+      }
       canvas.setPointerCapture(event.pointerId);
       // The colour is caught at the down-stroke, so a line already fading keeps
       // the one it was drawn in when you pick another.
@@ -397,6 +521,12 @@ const RevealAnnotate = () => ({
     });
 
     canvas.addEventListener('pointermove', (event) => {
+      // An arrow being aimed follows the bare pointer — no button held.
+      if (placing) {
+        placing.to = { x: event.clientX, y: event.clientY };
+        schedule();
+        return;
+      }
       if (!drawing || event.pointerId !== drawing.id) return;
       // A trackpad reports faster than the display refreshes, and the samples
       // in between are what keeps a quick curve smooth instead of faceted.
@@ -408,6 +538,19 @@ const RevealAnnotate = () => ({
     });
 
     const release = (event) => {
+      // A drag long enough to be deliberate is the whole gesture: down at the
+      // tail, up at the tip. Anything shorter was a click, and the arrow stays
+      // under the pointer waiting for the second one.
+      if (placing) {
+        const span = Math.hypot(event.clientX - placing.from.x, event.clientY - placing.from.y);
+        if (span >= MIN_ARROW) {
+          placing.to = { x: event.clientX, y: event.clientY };
+          placing.releasedAt = performance.now();
+          placing = null;
+          schedule();
+        }
+        return;
+      }
       if (!drawing || event.pointerId !== drawing.id) return;
       drawing.releasedAt = performance.now();
       drawing = null;
@@ -416,7 +559,8 @@ const RevealAnnotate = () => ({
     canvas.addEventListener('pointerup', release);
     canvas.addEventListener('pointercancel', release);
 
-    penButton.addEventListener('click', () => setPen(!penOn));
+    penButton.addEventListener('click', () => toggleTool('pen'));
+    arrowButton.addEventListener('click', () => toggleTool('arrow'));
     swatches.addEventListener('click', (event) => {
       const button = event.target.closest('.deck-swatch');
       if (button) setInk(COLOURS[button.dataset.colour]);
@@ -424,17 +568,27 @@ const RevealAnnotate = () => ({
 
     // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
     // own help overlay, which `registerKeyboardShortcut` alone would not do.
-    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
-      setPen(!penOn),
+    deck.addKeyBinding({ keyCode: PEN_KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
+      toggleTool('pen'),
+    );
+    deck.addKeyBinding({ keyCode: ARROW_KEY_CODE, key: 'A', description: 'Toggle the arrow' }, () =>
+      toggleTool('arrow'),
     );
-    // Escape is reveal's own overview toggle, and it binds before a plugin can.
-    // Capture phase gets there first — but only to take Escape back while the
-    // pen is armed, so the key still opens the overview the rest of the time.
+    // Keys the tools borrow only while one is armed, taken in capture phase so
+    // reveal's own bindings never see them: Escape (otherwise the overview
+    // toggle) disarms it, and the number row picks the ink — 1 to 6, in the
+    // order the swatches sit in the toolbar. The rest of the time both fall
+    // through untouched.
     document.addEventListener(
       'keydown',
       (event) => {
-        if (event.key !== 'Escape' || !penOn) return;
-        setPen(false);
+        if (!tool || event.metaKey || event.ctrlKey || event.altKey) return;
+        if (event.key === 'Escape') setTool(null);
+        else {
+          const index = '123456'.indexOf(event.key);
+          if (index === -1 || index >= COLOURS.length) return;
+          setInk(COLOURS[index]);
+        }
         event.stopPropagation();
         event.preventDefault();
       },
@@ -447,7 +601,7 @@ const RevealAnnotate = () => ({
     // A new slide is a clean sheet — including a line still under the pointer.
     deck.on('slidechanged', clear);
     // The overview is a different surface; drawing over it would annotate nothing.
-    deck.on('overviewshown', () => setPen(false));
+    deck.on('overviewshown', () => setTool(null));
 
     window.addEventListener('resize', resize);
     setInk(ink);

package/runtime/deck.js

@@ -1,5 +1,6 @@
 import RevealAnnotate from './annotate.js';
 import RevealSpotlight from './spotlight.js';
+import RevealPointer from './pointer.js';
 import RevealOutline from './outline.js';
 
 // ---------------------------------------------------------------------------
@@ -161,8 +162,9 @@ await Reveal.initialize({
   pdfSeparateFragments: false,
   // Anything the project wants to change, from `reveal:` in slides.config.js.
   ...(CFG.reveal ?? {}),
-  // Spotlight after Annotate: it hangs its button on the toolbar the pen builds.
-  plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealAnnotate(), RevealSpotlight(), RevealOutline()],
+  // Spotlight and Pointer after Annotate: they hang their buttons on the
+  // toolbar the pen builds.
+  plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealAnnotate(), RevealSpotlight(), RevealPointer(), RevealOutline()],
 });
 
 // ---------------------------------------------------------------------------

package/runtime/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{lang}}">
+<html lang="{{lang}}"{{htmlAttrs}}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

package/runtime/pointer.js

@@ -0,0 +1,249 @@
+// ---------------------------------------------------------------------------
+// RevealPointer — swap the mouse cursor for a stage pointer.
+//
+// A reveal.js plugin, built like spotlight.js: `init()` gets the deck, the file
+// owns its chrome and key bindings, and index.html stays a page of slides.
+//
+// Armed, it hides the real cursor everywhere and hangs its own on the pointer
+// instead. Three kinds, picked from a popover like the pen's swatches:
+//
+//   halo    — a bright dot inside a glowing ring; the ring trails the dot on a
+//             short elastic, which is what makes it read as alive rather than
+//             as a cursor theme.
+//   compass — a dart that always aims at the centre of the slide, so wherever
+//             the hand wanders the audience is pointed back at the deck.
+//   native  — the system cursor again, without standing the tool down: a way
+//             back to a normal mouse that keeps the popover one keystroke away.
+//
+// Unlike the pen and the spotlight it survives a slide change: it is the
+// cursor now, not a mark on one slide.
+// ---------------------------------------------------------------------------
+
+const KEY_CODE = 67; // C
+
+const KINDS = [
+  {
+    id: 'halo',
+    label: 'Halo pointer',
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+      aria-hidden="true"><circle cx="12" cy="12" r="7.5" /><circle cx="12" cy="12" r="1.6"
+      fill="currentColor" stroke="none" /></svg>`,
+  },
+  {
+    id: 'compass',
+    label: 'Compass pointer — aims at the centre',
+    icon: `<svg viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true">
+      <path d="M21 12L4.5 19.5 8.6 12 4.5 4.5z" /></svg>`,
+  },
+  {
+    id: 'native',
+    label: 'Normal cursor',
+    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="M4 4l7.07 17 2.51-7.39L21 11.07z" /></svg>`,
+  },
+];
+
+// How hard the halo's ring is pulled towards the dot each frame: 1 would pin
+// it, lower trails further behind. The loop stops once it has caught up.
+const CHASE = 0.28;
+const SETTLED = 0.4; // px of remaining lag that counts as caught up
+
+const POINTER_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <circle cx="12" cy="12" r="7" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
+</svg>`;
+
+const RevealPointer = () => ({
+  id: 'pointer',
+
+  init(deck) {
+    // ---- chrome ---------------------------------------------------------
+    // Fixed overlays on <body>, outside `.reveal` and its transforms. The
+    // pointer rides above every other overlay — it stands in for the cursor,
+    // which is always on top of what it points at.
+    const layer = document.createElement('div');
+    layer.id = 'deck-pointer';
+    layer.setAttribute('aria-hidden', 'true');
+    layer.dataset.kind = KINDS[0].id;
+    layer.innerHTML = `
+      <div class="deck-pointer-halo"></div>
+      <div class="deck-pointer-dot"></div>
+      <svg class="deck-pointer-compass" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M21 12L4.5 19.5 8.6 12 4.5 4.5z" />
+      </svg>
+    `;
+    layer.hidden = true;
+    document.body.append(layer);
+    const halo = layer.querySelector('.deck-pointer-halo');
+    const dot = layer.querySelector('.deck-pointer-dot');
+    const compass = layer.querySelector('.deck-pointer-compass');
+
+    // The toolbar is annotate's; this plugin registers after it in deck.js and
+    // hangs its button there. A deck running without the pen still gets one.
+    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-pointer';
+    button.className = 'deck-tool';
+    button.type = 'button';
+    button.setAttribute('aria-pressed', 'false');
+    button.title = 'Pointer — replace the cursor (C)';
+    button.setAttribute('aria-label', 'Pointer');
+    button.innerHTML = POINTER_ICON;
+    toolbar.append(button);
+
+    // The kind picker, hanging under the toolbar exactly like the pen's
+    // swatches — the two are never open at once, since arming one tool
+    // disarms the other.
+    const picker = document.createElement('div');
+    picker.id = 'deck-pointer-kinds';
+    picker.setAttribute('role', 'radiogroup');
+    picker.setAttribute('aria-label', 'Pointer kind');
+    picker.hidden = true;
+    picker.innerHTML = KINDS.map(
+      (kind, i) => `<button class="deck-pointer-kind" type="button" role="radio"
+         aria-checked="${i === 0}" data-kind="${kind.id}"
+         title="${kind.label}" aria-label="${kind.label}">${kind.icon}</button>`,
+    ).join('');
+    toolbar.append(picker);
+
+    // ---- following the pointer ------------------------------------------
+
+    let armed = false;
+    let kind = KINDS[0].id;
+    let x = -100; // the pointer, in screen px; parked off-screen until a move
+    let y = -100;
+    let hx = -100; // where the halo's ring has got to on its way there
+    let hy = -100;
+    let frame = 0;
+
+    const aim = () => {
+      // The dart pivots on its own centre to face the middle of the viewport;
+      // right at the centre it just keeps its last heading.
+      const dx = window.innerWidth / 2 - x;
+      const dy = window.innerHeight / 2 - y;
+      if (dx || dy) compass.style.rotate = `${Math.atan2(dy, dx)}rad`;
+    };
+
+    const render = () => {
+      frame = 0;
+      hx += (x - hx) * CHASE;
+      hy += (y - hy) * CHASE;
+      // `translate` the individual property, not `transform`: the press effect
+      // scales through `transform` in CSS, and the two must not fight.
+      dot.style.translate = `${x}px ${y}px`;
+      compass.style.translate = `${x}px ${y}px`;
+      halo.style.translate = `${hx}px ${hy}px`;
+      if (Math.hypot(x - hx, y - hy) > SETTLED) schedule();
+    };
+
+    const schedule = () => {
+      frame ||= requestAnimationFrame(render);
+    };
+
+    const move = (event) => {
+      x = event.clientX;
+      y = event.clientY;
+      if (!armed || kind === 'native') return;
+      layer.hidden = false;
+      aim();
+      schedule();
+    };
+    document.addEventListener('pointermove', move);
+    // Falling off the window edge — or the window losing focus — leaves no
+    // cursor to stand in for; a stale pointer would sit there pointing at
+    // nothing until the mouse came back.
+    document.addEventListener('mouseleave', () => { layer.hidden = true; });
+    window.addEventListener('blur', () => { layer.hidden = true; });
+
+    // A click lands somewhere: the pointer acknowledges it — the dot swells,
+    // the ring snaps in, the dart lunges. Pure CSS off this class.
+    document.addEventListener('pointerdown', (event) => {
+      if (armed && event.button === 0) layer.classList.add('is-pressed');
+    });
+    document.addEventListener('pointerup', () => layer.classList.remove('is-pressed'));
+
+    // ---- arming ---------------------------------------------------------
+
+    // The real cursor stands down only while a stand-in is up: armed on the
+    // native kind, the mouse is its ordinary self and the overlay stays away.
+    const applyCursor = () => {
+      const standIn = armed && kind !== 'native';
+      document.documentElement.classList.toggle('deck-pointer-on', standIn);
+      layer.hidden = true; // shown again by the first move, in the right place
+      if (standIn) {
+        // Start the ring already caught up, not sprinting in from off-screen.
+        hx = x;
+        hy = y;
+      }
+    };
+
+    const setKind = (next) => {
+      kind = next;
+      layer.dataset.kind = kind;
+      for (const chip of picker.children) {
+        chip.setAttribute('aria-checked', String(chip.dataset.kind === kind));
+      }
+      applyCursor();
+      aim();
+    };
+
+    const setPointer = (on) => {
+      armed = on;
+      button.setAttribute('aria-pressed', String(on));
+      toolbar.classList.toggle('is-armed', on);
+      picker.hidden = !on;
+      applyCursor();
+      if (on) document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'pointer' }));
+    };
+
+    // Several tools, one pointer: arming any disarms the rest — same DOM-event
+    // handshake as the pen and the spotlight, so each plugin works alone.
+    document.addEventListener('deck:tool-armed', (event) => {
+      if (event.detail !== 'pointer' && armed) setPointer(false);
+    });
+
+    button.addEventListener('click', () => setPointer(!armed));
+    picker.addEventListener('click', (event) => {
+      const chip = event.target.closest('.deck-pointer-kind');
+      if (chip) setKind(chip.dataset.kind);
+    });
+
+    // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
+    // own help overlay. `C` is unclaimed by reveal.
+    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'C', description: 'Toggle the pointer' }, () =>
+      setPointer(!armed),
+    );
+    // While armed: Escape stands it down, the number row picks the kind — the
+    // same capture-phase borrowing the pen does with its colours.
+    document.addEventListener(
+      'keydown',
+      (event) => {
+        if (!armed || event.metaKey || event.ctrlKey || event.altKey) return;
+        if (event.key === 'Escape') setPointer(false);
+        else {
+          const index = '123'.indexOf(event.key);
+          if (index === -1 || index >= KINDS.length) return;
+          setKind(KINDS[index].id);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      true,
+    );
+
+    // No `slidechanged` hook on purpose: the pointer is the cursor, and the
+    // cursor does not vanish because the slide moved on. The overview is fair
+    // ground for it too.
+    window.addEventListener('resize', aim);
+  },
+});
+
+export default RevealPointer;

package/runtime/theme.base.css

@@ -29,6 +29,39 @@
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
+/* --- wearing one of reveal's own themes ----------------------------------- */
+
+/* `revealTheme:` in slides.config.js loads reveal's theme after this file, where
+   it takes the slides. The chrome — the navigator, the badge, the signature —
+   is not `.reveal`-scoped, so it would sail past untouched and leave a black
+   panel down the side of a white deck.
+
+   Every reveal 5 theme declares its palette as `--r-*` custom properties, so
+   the fix is one indirection rather than fifteen stylesheets: point the tokens
+   above at reveal's, and the whole of the chrome follows whatever the deck
+   wears. The four reveal has no equivalent for are mixed from the two that
+   carry the theme, which keeps the panel's depth on a light theme as well as
+   a dark one. */
+html[data-reveal-theme] {
+  --bg: var(--r-background-color);
+  --text: var(--r-main-color);
+  --accent: var(--r-link-color);
+  --accent-2: var(--r-link-color-hover, var(--r-link-color));
+  --sans: var(--r-main-font);
+  --mono: var(--r-code-font);
+  --bg-2: color-mix(in srgb, var(--r-background-color) 92%, var(--r-main-color));
+  --card: color-mix(in srgb, var(--r-background-color) 86%, var(--r-main-color));
+  --line: color-mix(in srgb, var(--r-main-color) 20%, transparent);
+  --muted: color-mix(in srgb, var(--r-main-color) 62%, var(--r-background-color));
+}
+
+/* The base look paints two dark halos on <html>, below the deck. They are the
+   wrong atmosphere for a borrowed theme, and on a light one they show through
+   wherever the viewport does not reach — so the theme's own flat colour takes
+   over. <body> is left alone on purpose: reveal paints the deck's background
+   there, and that is the theme's job now. */
+html[data-reveal-theme] { background: var(--bg); }
+
 /* reveal.js 5 paints the page background on `.reveal-viewport` (the <html>
    element), so setting it on <body> would sit behind it and never show. */
 html,
@@ -111,6 +144,7 @@ body,
 /* Trailing margin would push centred content off-centre. */
 .reveal .slides section > :last-child { margin-bottom: 0; }
 .reveal strong { color: #fff; font-weight: 650; }
+html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--text)); }
 .reveal em { color: var(--accent-2); font-style: italic; }
 .reveal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
 
@@ -415,10 +449,11 @@ body,
 }
 
 /* Faded back until it is wanted: on stage the slide is the point, and the
-   toolbar sits in the one place the eye keeps returning to. */
+   toolbar keeps to the quiet strip along the bottom, between the arrows and
+   the signature. */
 #deck-tools {
   position: fixed;
-  top: 14px;
+  bottom: 14px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 40;
@@ -471,10 +506,11 @@ body,
     0 0 16px color-mix(in srgb, var(--pen, #ff8c1a) 55%, transparent);
 }
 
-/* The colours, hanging under the toolbar while the pen is armed. */
+/* The colours, floating above the toolbar while a tool is armed — the
+   toolbar sits on the bottom edge, so up is where the room is. */
 #deck-swatches {
   position: absolute;
-  top: calc(100% + 9px);
+  bottom: calc(100% + 9px);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -787,6 +823,142 @@ body.outline-open #deck-outline { transform: none; }
   background: color-mix(in srgb, var(--text) 5%, transparent);
 }
 
+/* --- the pointer (pointer.js) -------------------------------------------- */
+
+/* The real cursor goes away everywhere while the pointer is armed — the
+   glowing stand-in below is the cursor now, toolbar included. */
+html.deck-pointer-on,
+html.deck-pointer-on * { cursor: none !important; }
+
+/* Above everything, spotlight and ink included: it stands in for the cursor,
+   which always rides on top of what it points at. Never touchable. */
+#deck-pointer {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+#deck-pointer[hidden] { display: none; }
+
+/* Each piece sits at 0,0 and is carried by the `translate` property pointer.js
+   writes per frame; `transform` is left free for the press effect, so the two
+   compose instead of overwriting each other. */
+/* The halo wears the pen's own orange (annotate.js's palette), not the
+   theme accent: on stage the pointer has to burn, not blend in. */
+#deck-pointer { --pointer-hot: #ff8c1a; }
+
+.deck-pointer-dot {
+  position: absolute;
+  left: -3.5px;
+  top: -3.5px;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow:
+    0 0 6px 1px rgb(255 255 255 / 0.9),
+    0 0 14px 4px color-mix(in srgb, var(--pointer-hot) 70%, transparent);
+  transition: transform 0.12s ease;
+}
+/* The ring trails the dot on a short elastic (pointer.js lerps it), lit from
+   inside and haloed outside — the trailing is what makes it read as alive. */
+.deck-pointer-halo {
+  position: absolute;
+  left: -19px;
+  top: -19px;
+  width: 38px;
+  height: 38px;
+  border-radius: 999px;
+  border: 3px solid color-mix(in srgb, var(--pointer-hot) 90%, #fff);
+  background: radial-gradient(circle, color-mix(in srgb, var(--pointer-hot) 30%, transparent) 0%, transparent 68%);
+  box-shadow:
+    0 0 26px color-mix(in srgb, var(--pointer-hot) 75%, transparent),
+    inset 0 0 14px color-mix(in srgb, var(--pointer-hot) 55%, transparent);
+  transition: transform 0.16s ease, border-color 0.16s ease;
+}
+/* A click: the dot swells, the ring snaps in around it. */
+#deck-pointer.is-pressed .deck-pointer-dot { transform: scale(1.7); }
+#deck-pointer.is-pressed .deck-pointer-halo {
+  transform: scale(0.7);
+  border-color: #fff;
+}
+
+/* The compass dart. pointer.js sets `rotate` so it always aims at the centre
+   of the viewport; the pivot is its own middle, under the cursor's hotspot. */
+.deck-pointer-compass {
+  position: absolute;
+  left: -21px;
+  top: -21px;
+  width: 42px;
+  height: 42px;
+  fill: var(--pointer-hot);
+  filter:
+    drop-shadow(0 0 3px rgb(255 255 255 / 0.5))
+    drop-shadow(0 0 12px color-mix(in srgb, var(--pointer-hot) 75%, transparent));
+  transition: transform 0.12s ease;
+}
+#deck-pointer.is-pressed .deck-pointer-compass { transform: scale(1.22); }
+
+/* One kind on screen at a time; the native kind is the system cursor itself,
+   so it paints nothing at all. */
+#deck-pointer[data-kind='halo'] .deck-pointer-compass { display: none; }
+#deck-pointer[data-kind='compass'] .deck-pointer-dot,
+#deck-pointer[data-kind='compass'] .deck-pointer-halo { display: none; }
+#deck-pointer[data-kind='native'] > * { display: none; }
+
+/* The armed pointer button wears the accent, not the pen's ink — it draws in
+   nothing, it glows. The id outweighs the generic armed-tool rule above. */
+#tool-pointer[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 kind picker, floating above the toolbar like the pen's swatches. */
+#deck-pointer-kinds {
+  position: absolute;
+  bottom: calc(100% + 9px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  padding: 5px;
+  background: color-mix(in srgb, var(--card) 82%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  backdrop-filter: blur(6px);
+}
+#deck-pointer-kinds[hidden] { display: none; }
+
+.deck-pointer-kind {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.deck-pointer-kind svg {
+  display: block;
+  width: 15px;
+  height: 15px;
+}
+.deck-pointer-kind:hover {
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+  color: var(--text);
+}
+.deck-pointer-kind[aria-checked='true'] {
+  background: var(--accent);
+  color: #0d1626;
+}
+
 /* --- the spotlight (spotlight.js) ---------------------------------------- */
 
 /* One veil over the slides, under the ink: spotlight.js punches the lit
@@ -844,6 +1016,7 @@ body.outline-open #deck-outline { transform: none; }
   #deck-ink,
   #deck-spot,
   #deck-spot-ring,
+  #deck-pointer,
   #deck-tools,
   #deck-menu,
   #deck-outline { display: none; }

package/templates/starter/slides.config.js

@@ -9,6 +9,18 @@ export default {
   // Folder behind a bare `<!-- demo: counter -->` marker in the Markdown.
   demos: 'demo',
 
+  // One of reveal.js's own themes, served from this project rather than from a
+  // CDN: beige, black, black-contrast, blood, dracula, league, moon, night,
+  // serif, simple, sky, solarized, white, white-contrast. Uncomment to wear one
+  // — the deck's chrome follows it. Leave it out for this package's own look.
+  // revealTheme: 'dracula',
+
+  // Six of those themes ask fonts.googleapis.com for their typefaces. Those
+  // requests are stripped out, so a deck never depends on the room's wifi; the
+  // theme falls back to the next font in its own stack. Set this to true to let
+  // them through and get the typography of revealjs.com/themes exactly.
+  // webfonts: true,
+
   // Port `fb-slides dev` serves the deck on (`preview` uses the next one up).
   // `--port n` on the command line wins over this.
   port: 4000,