fb-slides 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -0,0 +1,118 @@
+# Changelog
+
+What changed in each release, newest first. A deck picks the engine up from the
+package, so `npm update fb-slides` is how a talk written months ago gets all of
+this — which makes it worth being able to see what arrived.
+
+Entries are written as the work lands, under **Unreleased**; the release commit
+that stamps the version renames that heading to the version and its date.
+
+## 0.6.3 — 2026-09-05
+
+- **Disabled slides.** `<!-- disabled -->` on a line of its own keeps a slide in
+  the file without keeping it in the talk: the arrows walk past it, it holds no
+  slide number, and the count and the progress bar are computed as if it were
+  not there. It is still listed in the navigator and in reveal's overview,
+  dimmed and marked *off* — clicking it there opens it, which is the point of
+  keeping it.
+
+## 0.6.2 — 2026-09-05
+
+- **Fixed:** the toolbar could close itself. One tool arming told the others to
+  stand down, and the bar read that handshake as "nothing is armed" while a tool
+  still was. The armed state is now recomputed from the buttons themselves.
+
+## 0.6.1 — 2026-09-05
+
+- **The toolbar moved to the top edge**, and sleeps just above it: a chevron says
+  it is there, and the bar comes down when the pointer goes for it. The slides
+  keep the bottom of the screen.
+
+## 0.6.0 — 2026-09-05
+
+- **A vocabulary of slide layouts** in the base theme, so a deck stops writing
+  `style=""`: `.cols`/`.col` (two columns, with the `min-width: 0` a code block
+  falls over without), `.frame` (an embed that shares the slide), `.caption`,
+  `.box`, and `.author-slide` — the speaker page, photos down the left edge and
+  the bio on the right. Each fixes its numbers in CSS variables, so a project
+  retunes one from its own `theme.css`. Images and clips are now centred and
+  lose the white card reveal's core CSS frames every image with.
+- **The speaker page's photos cross-fade** for however many there are: the
+  keyframes are written at load from the two timing tokens, instead of a fixed
+  table that stopped at eight.
+- **A block picker in the edit drawer.** The `+` over the slide box — or `/` on
+  an empty line — writes the markup nobody remembers: the demo marker, a framed
+  embed, a video with the attributes that make it behave, two columns, a fenced
+  block, a mermaid graph, the speaker page. What was selected takes the place of
+  the first placeholder, so picking *Fragment* wraps the paragraph you had
+  highlighted. `snippets:` in `slides.config.js` adds a project's own.
+- **The drawer takes half the page** on the chevron where its title used to be,
+  and stays that way across the reload every save ends in.
+- **Add page / Delete page** say what they act on — the slide, not the text in
+  the box.
+- **The starter** comes with the speaker page already written, second, against
+  two placeholder photos, and its demos deck now shows a framed embed next to
+  the two full-bleed ones.
+
+## 0.5.1 — 2026-09-05
+
+- The slide number under the arrows recedes: no pill, thinner ink, smaller type.
+
+## 0.5.0 — 2026-09-05
+
+- **The edit drawer.** `T` opens the slide you are looking at down the right
+  edge — its markdown in one box, its speaker notes in the other. Typing
+  re-renders the real slide in place, and **Save** writes the text back into that
+  slide's own lines of the `.md`, leaving the rest of the file alone. **Add** and
+  **Delete** work on the file too. Dev server only: a built deck never shows it.
+- Docs: how to make a demo a real application.
+
+## 0.4.3 — 2026-09-05
+
+- **Fixed:** the spotlight left a ghost hole behind once its veil had faded.
+
+## 0.4.2 — 2026-09-05
+
+- The four tools moved onto the **QWER row**, in toolbar order, and each chip
+  wears its own key along its bottom edge.
+
+## 0.4.1 — 2026-09-03
+
+- Packaging fixes.
+
+## 0.4.0 — 2026-09-03
+
+- **The pointer**: the cursor swapped for a glowing halo, a centre-seeking dart,
+  or itself.
+- **The arrow**: click the tail, then the tip — the pen's colours, the pen's
+  fade, and a head large enough to read from the back row.
+- The toolbar moved to the bottom centre, its popovers opening upwards.
+
+## 0.3.0 — 2026-09-03
+
+- **The pen** holds its ink for two seconds before it fades, and the number keys
+  pick its colour.
+
+## 0.2.0 — 2026-09-03
+
+- **`revealTheme:`** — wear one of reveal.js's own fifteen themes, served from
+  the deck rather than a CDN. The chrome follows it through the theme's own
+  variables.
+
+## 0.1.2 — 2026-09-03
+
+- A hairline scrollbar for the navigator.
+- `npm run starter` runs the starter template in place.
+
+## 0.1.1 — 2026-09-03
+
+- **The vertical navigator** (`V`): the deck as a readable list down the left
+  edge, with a list/preview toggle and the talk's own structure as its depth.
+- **The spotlight**, and a shortcuts registry behind the help overlay.
+
+## 0.1.0 — 2026-09-03
+
+First release. Markdown files in `decks/` become a reveal.js deck with no build
+step: live demo embeds that run in the slide, mermaid diagrams, stepped code
+highlighting, speaker notes, an annotation pen, a zero-config dev server, and a
+`build` that writes a folder you can publish anywhere.

package/README.md

@@ -10,7 +10,7 @@ cd my-talk && npm install && npm run dev
 ```
 
 The engine is the package; a talk is only its own content. Bump the version and every
-deck you have written gets the new features.
+deck you have written gets the new features — [CHANGELOG.md](CHANGELOG.md) says which.
 
 ## The shape of a talk
 
@@ -127,6 +127,30 @@ 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.
 ```
 
+### Disabled slides
+
+A slide whose source carries `<!-- disabled -->` on a line of its own stays in the
+file and in the navigator, but steps out of the talk:
+
+```markdown
+---
+
+<!-- disabled -->
+
+## The version of this I cut on the train
+
+---
+```
+
+The arrows walk past it in whichever direction they were going, it holds no slide
+number, and the count and the progress bar are computed as if it were not there.
+It is still listed in the navigator (`V`) and in reveal's overview, marked **off** —
+and clicking it there is how you look at it, which is the point of keeping it.
+Looking at one, the corner reads `off` where the number would be.
+
+Half a talk is the slides you decided against but are not ready to delete. This is
+where they live, next to the ones that made it.
+
 ### Blocks
 
 Six classes cover the layouts a talk keeps needing, so a slide asks for one by name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [
@@ -30,6 +30,7 @@
     "lib",
     "runtime",
     "templates",
+    "CHANGELOG.md",
     "README.md",
     "LICENSE"
   ],

package/runtime/deck.js

@@ -61,6 +61,13 @@ if (!DECKS.length) console.error(`[deck] no .md found in ${DECKS_DIR}`);
 const DEMO_MARKER = /^<!--\s*demo:\s*(\S+?)\s*-->/;
 const DEMOS_DIR = CFG.demos ?? 'demo/';
 
+// A slide whose source carries `<!-- disabled -->` stays in the file and in the
+// navigator, but steps out of the talk: the arrows walk past it and it is not
+// counted. The line is stripped before rendering — what is left is an ordinary
+// slide, demo marker included, for the day it is turned back on.
+const DISABLED_MARKER = /^[ \t]*<!--[ \t]*disabled[ \t]*-->[ \t]*\r?\n?/im;
+const OFF = 'slide-off';
+
 // Bullet lists reveal themselves one item at a time. `?nofrag` turns it off for
 // one visit; `fragmentLists: false` in the config turns it off for the project.
 const AUTO_FRAGMENT = CFG.fragmentLists !== false && !new URLSearchParams(location.search).has('nofrag');
@@ -135,9 +142,18 @@ 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 [index, source] of splitSlides(stripFrontMatter(markdown)).entries()) {
+  for (const [index, raw] of splitSlides(stripFrontMatter(markdown)).entries()) {
+    const disabled = DISABLED_MARKER.test(raw);
+    const source = disabled ? raw.replace(DISABLED_MARKER, '') : raw;
     const marker = source.match(DEMO_MARKER);
     const section = marker ? demoSection(marker[1], deck) : markdownSection(source, deck);
+    if (disabled) {
+      section.classList.add(OFF);
+      // Reveal's own answer to "in the deck, out of the count": it leaves an
+      // uncounted slide out of `getSlides()`, the slide number and the progress
+      // bar, while keeping it reachable by index.
+      section.dataset.visibility = 'uncounted';
+    }
     // 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.
@@ -197,6 +213,54 @@ const nudge = (slide) => {
 Reveal.on('ready', ({ currentSlide }) => nudge(currentSlide));
 Reveal.on('slidechanged', ({ currentSlide }) => nudge(currentSlide));
 
+// ---------------------------------------------------------------------------
+// Walking past the disabled slides. Reveal already leaves them out of the
+// count; the talk itself steps over them here, in whichever direction it was
+// already going. Two ways in are deliberate and let through: picking a slide by
+// hand — the navigator, reveal's overview — and landing on one at load, which
+// is what the edit drawer does on every save.
+// ---------------------------------------------------------------------------
+
+const sections = () => [...slidesEl.querySelectorAll(':scope > section')];
+
+let jumping = false;
+// Cleared on the next turn of the loop: `slidechanged` fires inside the call
+// that follows, so a click that lands on the slide already showing — no event
+// at all — cannot leave the flag standing for the next press of an arrow.
+const jump = () => {
+  jumping = true;
+  setTimeout(() => {
+    jumping = false;
+  }, 0);
+};
+document.addEventListener('deck:jump', jump);
+slidesEl.addEventListener('click', () => Reveal.isOverview() && jump(), true);
+
+let cameFrom = Reveal.getIndices().h;
+
+Reveal.on('slidechanged', ({ indexh, currentSlide }) => {
+  const deliberate = jumping;
+  jumping = false;
+  if (deliberate || !currentSlide?.classList.contains(OFF)) {
+    cameFrom = indexh;
+    return;
+  }
+
+  const slides = sections();
+  const step = indexh < cameFrom ? -1 : 1;
+  const seek = (start, direction) => {
+    let i = start;
+    while (slides[i]?.classList.contains(OFF)) i += direction;
+    return slides[i] ? i : null;
+  };
+
+  // Off the end — the deck ends on disabled slides — turn round rather than
+  // strand the talk on one it is not meant to show.
+  const target = seek(indexh + step, step) ?? seek(indexh - step, -step);
+  if (target === null) cameFrom = indexh; // every slide is disabled: stay put
+  else Reveal.slide(target);
+});
+
 // ---------------------------------------------------------------------------
 // Post-processing — everything below runs on markdown the plugin has rendered.
 // ---------------------------------------------------------------------------

package/runtime/outline.js

@@ -85,8 +85,17 @@ const rowsFor = (deck) => {
   const rows = [];
   let section = null;
   let dividerSeen = false;
+  let number = 0;
 
-  for (const [index, slide] of deck.getSlides().entries()) {
+  // Not `deck.getSlides()`: reveal leaves the disabled slides out of that list,
+  // and a slide that is out of the talk is exactly what someone opens the
+  // navigator to reach. They are listed, marked, and numbered by what they are
+  // — nothing, since the deck is counted as if they were not there.
+  const slides = [...document.querySelectorAll('.reveal .slides section')].filter(
+    (slide) => !slide.classList.contains('stack'),
+  );
+
+  for (const slide of slides) {
     const stack = slide.parentElement.matches('section') ? slide.parentElement : null;
     const owner = stack ?? slide;
     const label = owner.dataset.deck ?? '';
@@ -105,8 +114,10 @@ const rowsFor = (deck) => {
     const vertical = Boolean(stack) && slide !== stack.firstElementChild;
     const depth = vertical ? base + 1 : base;
 
-    slide.dataset.outlineNumber = index + 1;
-    rows.push({ kind: 'slide', slide, depth, number: index + 1, divider, vertical });
+    const off = slide.classList.contains('slide-off');
+    if (!off) number += 1;
+    slide.dataset.outlineNumber = off ? '' : number;
+    rows.push({ kind: 'slide', slide, depth, number: off ? null : number, divider, vertical, off });
   }
   return rows;
 };
@@ -241,13 +252,19 @@ const RevealOutline = () => ({
           item.dataset.depth = Math.min(row.depth, 2);
           if (row.divider) item.classList.add('is-divider');
           if (row.vertical) item.classList.add('is-vertical');
+          if (row.off) item.classList.add('is-off');
+          // A disabled slide has no number to show, so the corner says what it
+          // has instead of one.
+          const number = row.off
+            ? '<span class="deck-outline-n is-off">off</span>'
+            : `<span class="deck-outline-n">${row.number}</span>`;
           if (view === 'preview') {
-            item.innerHTML = `<span class="deck-outline-n">${row.number}</span>`;
+            item.innerHTML = number;
             item.prepend(thumbFor(row.slide));
             // No room for the title in the row; it moves to the tooltip.
             item.title = titleOf(row.slide);
           } else {
-            item.innerHTML = `<span class="deck-outline-title"></span><span class="deck-outline-n">${row.number}</span>`;
+            item.innerHTML = `<span class="deck-outline-title"></span>${number}`;
             item.querySelector('.deck-outline-title').textContent = titleOf(row.slide);
           }
           return item;
@@ -303,6 +320,8 @@ const RevealOutline = () => ({
       const item = event.target.closest('.deck-outline-item');
       if (!item) return;
       const { h, v } = deck.getIndices(rows[item.dataset.row].slide);
+      // Picked by hand: a disabled slide is shown rather than walked past.
+      document.dispatchEvent(new CustomEvent('deck:jump'));
       deck.slide(h, v);
       // Clicked with the mouse, the button would keep the focus and swallow the
       // next Space as a re-click. Activated from the keyboard (`detail === 0`)

package/runtime/snippets.js

@@ -105,6 +105,12 @@ const BUILT_IN = [
       '  <p class="author-meta">❤️ Life outside work — <strong>yoursite.dev</strong></p>\n' +
       '</div>',
   },
+  {
+    label: 'Disabled',
+    hint: 'keep the slide, leave it out of the talk',
+    top: true,
+    body: '<!-- disabled -->',
+  },
   {
     label: 'Slide class',
     hint: 'hand this slide a class of your own',

package/runtime/theme.base.css

@@ -979,6 +979,24 @@ body.outline-open #deck-outline { transform: none; }
   opacity: 0.55;
 }
 
+/* A disabled slide — `<!-- disabled -->` in its source. It is listed, because
+   the navigator is how it is reached at all, but it reads as set aside: the
+   talk walks past it and it holds no number. Still a button, still hovers,
+   still opens — clicking one is how you look at it. */
+.deck-outline-item.is-off .deck-outline-title { opacity: 0.4; }
+.deck-outline-item.is-off .deck-outline-thumb { opacity: 0.32; }
+.deck-outline-item.is-off:hover .deck-outline-title,
+.deck-outline-item.is-off:hover .deck-outline-thumb { opacity: 0.75; }
+.deck-outline-n.is-off {
+  padding: 2px 4px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font: 600 8.5px/1 var(--sans);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 1;
+}
+
 /* --- the outline's preview mode ------------------------------------------ */
 
 /* Same rows, but each one is the slide itself. Depth indents carry over from
@@ -1400,6 +1418,36 @@ body.edit-open #deck-edit { transform: none; }
     0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
 }
 
+/* A disabled slide in reveal's own overview, where the grid is the other way
+   of picking one by hand. Dimmed, not hidden: it is still there to click. */
+/* `filter`, not `opacity`: reveal pins every slide in the overview to
+   `opacity: 1 !important`, and this says the same thing without the shouting
+   match. */
+.reveal.overview .slides section.slide-off { filter: grayscale(1) opacity(0.35); }
+.reveal.overview .slides section.slide-off:hover { filter: grayscale(0.4) opacity(0.8); }
+
+/* Looking at one, the count and the bar stand down — there is no number to be
+   at, this slide is not in the talk — and the word takes the number's place,
+   which is the shortest way to say why it went. */
+.reveal:has(.slides section.slide-off.present) .slide-number,
+.reveal:has(.slides section.slide-off.present) .progress { visibility: hidden; }
+.reveal:has(.slides section.slide-off.present)::after {
+  content: 'off';
+  position: absolute;
+  z-index: 4;
+  left: calc(var(--r-controls-spacing, 12px) + 50px);
+  bottom: 12px;
+  transform: translateX(-50%);
+  padding: 3px 6px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  font: 600 9px/1 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  pointer-events: none;
+}
+
 /* --- the pointer (pointer.js) -------------------------------------------- */
 
 /* The real cursor goes away everywhere while the pointer is armed — the

package/templates/starter/decks/02-demos.md

@@ -30,6 +30,17 @@ Not every demo wants the whole slide. `.frame` sizes one so the heading stays.
 
 ---
 
+<!-- disabled -->
+
+## A slide kept out of the talk
+
+`<!-- disabled -->` on its own line: still in the file, still in the navigator —
+marked **off** there — but the arrows walk past it and it is not counted.
+
+Click it in the navigator (`V`) to look at it anyway.
+
+---
+
 ## The mechanism, in one picture
 
 ```mermaid