fb-slides 0.4.1 → 0.4.3

package/README.md

@@ -128,10 +128,10 @@ Note: a bad description is the most common reason a tool never gets used.
 | Key | |
 | --- | --- |
 | `→` / `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 |
+| `Q` | the pen — draw on the slide, the ink fades on its own |
+| `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 |
 | `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 |

package/package.json

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

package/runtime/annotate.js

@@ -14,8 +14,6 @@
 // pointer, not the slide's coordinate space.
 // ---------------------------------------------------------------------------
 
-import { unlistShortcut } from './shortcuts.js';
-
 // The pen's palette. It lives here rather than in theme.css because it is a
 // list the toolbar has to enumerate, not a token the theme swaps: `glow` is the
 // halo, `core` the bright thread down the middle of it. JS hands the selected
@@ -73,14 +71,11 @@ const MAX_WIDTH = WIDTH * Math.max(...LAYERS.flatMap((l) => l.passes.map((p) =>
 // narrow band the erase front is crossing.
 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. `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 };
+// The tools live on the QWER row — four keys under the left hand, in the
+// toolbar's own order, and none of them is reveal's: its handler answers
+// nothing between Q and R (P, H/J/K/L, B, V, F, G, A, C, O are all elsewhere).
+const PEN_KEY_CODE = 81; // Q
+const ARROW_KEY_CODE = 87; // W
 
 const PEN_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
   stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -144,9 +139,11 @@ const RevealAnnotate = () => ({
     toolbar.setAttribute('aria-label', 'Slide tools');
     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>
+              title="Pen — draw on the slide (Q)" aria-label="Pen">${PEN_ICON}<span
+              class="deck-key" aria-hidden="true">Q</span></button>
       <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>
+              title="Arrow — click the tail, then the tip (W)" aria-label="Arrow">${ARROW_ICON}<span
+              class="deck-key" aria-hidden="true">W</span></button>
       <div id="deck-swatches" role="radiogroup" aria-label="Ink colour" hidden>
         ${COLOURS.map(
           (colour, i) => `<button class="deck-swatch" type="button" role="radio"
@@ -574,10 +571,10 @@ 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: PEN_KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
+    deck.addKeyBinding({ keyCode: PEN_KEY_CODE, key: 'Q', description: 'Toggle the pen' }, () =>
       toggleTool('pen'),
     );
-    deck.addKeyBinding({ keyCode: ARROW_KEY_CODE, key: 'A', description: 'Toggle the arrow' }, () =>
+    deck.addKeyBinding({ keyCode: ARROW_KEY_CODE, key: 'W', description: 'Toggle the arrow' }, () =>
       toggleTool('arrow'),
     );
     // Keys the tools borrow only while one is armed, taken in capture phase so
@@ -601,9 +598,6 @@ const RevealAnnotate = () => ({
       true,
     );
 
-    // Only once reveal has configured itself is there a row to correct.
-    deck.on('ready', () => unlistShortcut(deck, HELP_TAKEN_FROM));
-
     // 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.

package/runtime/pointer.js

@@ -19,7 +19,7 @@
 // cursor now, not a mark on one slide.
 // ---------------------------------------------------------------------------
 
-const KEY_CODE = 67; // C
+const KEY_CODE = 82; // R — the last stop on the tools' QWER row
 
 const KINDS = [
   {
@@ -94,9 +94,9 @@ const RevealPointer = () => ({
     button.className = 'deck-tool';
     button.type = 'button';
     button.setAttribute('aria-pressed', 'false');
-    button.title = 'Pointer — replace the cursor (C)';
+    button.title = 'Pointer — replace the cursor (R)';
     button.setAttribute('aria-label', 'Pointer');
-    button.innerHTML = POINTER_ICON;
+    button.innerHTML = `${POINTER_ICON}<span class="deck-key" aria-hidden="true">R</span>`;
     toolbar.append(button);
 
     // The kind picker, hanging under the toolbar exactly like the pen's
@@ -217,8 +217,8 @@ const RevealPointer = () => ({
     });
 
     // `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' }, () =>
+    // own help overlay. `R` is unclaimed by reveal.
+    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'R', description: 'Toggle the pointer' }, () =>
       setPointer(!armed),
     );
     // While armed: Escape stands it down, the number row picks the kind — the

package/runtime/spotlight.js

@@ -13,7 +13,9 @@
 // scales slides with.
 // ---------------------------------------------------------------------------
 
-import { listShortcutAfter } from './shortcuts.js';
+// `E` sits between the pen's Q/W and the pointer's R: the four tools walk the
+// QWER row in the toolbar's own order, and reveal answers none of those keys.
+const KEY_CODE = 69;
 
 const RADIUS = 10; // px, the hole's corner rounding
 const MIN_DRAG = 6; // px in either axis before a press counts as a drag
@@ -89,9 +91,9 @@ const RevealSpotlight = () => ({
     button.className = 'deck-tool';
     button.type = 'button';
     button.setAttribute('aria-pressed', 'false');
-    button.title = 'Spotlight — drag to light up part of the slide (Shift)';
+    button.title = 'Spotlight — drag to light up part of the slide (E)';
     button.setAttribute('aria-label', 'Spotlight');
-    button.innerHTML = SPOT_ICON;
+    button.innerHTML = `${SPOT_ICON}<span class="deck-key" aria-hidden="true">E</span>`;
     toolbar.append(button);
 
     // ---- state ----------------------------------------------------------
@@ -100,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;
@@ -118,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;
@@ -126,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);
@@ -250,22 +264,10 @@ const RevealSpotlight = () => ({
 
     button.addEventListener('click', () => setSpot(!armed));
 
-    // The shortcut is a tap of Shift on its own — not through addKeyBinding,
-    // which knows nothing of keyup. Toggling on the keydown would fire on
-    // every Shift+Space and Shift+arrow reveal already answers, so the toggle
-    // waits for the release, and stands down the moment any other key shows
-    // Shift was there as a modifier.
-    let shiftTap = false;
-    document.addEventListener('keydown', (event) => {
-      shiftTap = event.key === 'Shift' && !event.repeat;
-    });
-    document.addEventListener('keyup', (event) => {
-      if (event.key === 'Shift' && shiftTap) setSpot(!armed);
-    });
-    // Hand-rolled keys are invisible to reveal's help overlay; shortcuts.js
-    // writes the row the binding above cannot.
-    deck.on('ready', () =>
-      listShortcutAfter(deck, { key: 'SHIFT', action: 'Toggle the spotlight', after: /overview/i }),
+    // `addKeyBinding` with a descriptor binds the key and lists it in reveal's
+    // own help overlay, exactly as the pen's Q and W do.
+    deck.addKeyBinding({ keyCode: KEY_CODE, key: 'E', description: 'Toggle the spotlight' }, () =>
+      setSpot(!armed),
     );
     // Escape is reveal's overview toggle; take it back only while armed, in the
     // capture phase, exactly as the pen does.

package/runtime/theme.base.css

@@ -472,6 +472,7 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 #deck-tools.is-armed { opacity: 1; }
 
 .deck-tool {
+  position: relative;
   display: grid;
   place-items: center;
   width: 34px;
@@ -488,6 +489,22 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   display: block;
   width: 19px;
   height: 19px;
+  /* Lifted a touch to leave the bottom of the chip to the shortcut letter. */
+  transform: translateY(-2.5px);
+}
+/* The tool's key, worn small along the chip's bottom edge — nobody should
+   have to open the help overlay to remember which letter arms which tool. */
+.deck-key {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1.5px;
+  font: 700 7.5px/1 var(--sans);
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: currentColor;
+  opacity: 0.65;
+  pointer-events: none;
 }
 .deck-tool:hover {
   background: color-mix(in srgb, var(--text) 10%, transparent);