fb-slides 0.10.0 → 0.11.0

package/runtime/edit.js

@@ -1,10 +1,13 @@
 // ---------------------------------------------------------------------------
 // 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.
+// A reveal.js plugin, localhost and dev-server only in effect. At init it first
+// looks at the address bar: anywhere but localhost — a published deck, a phone
+// on the LAN — it stops right there and never asks. On localhost it probes the
+// edit API that `fb-slides dev` mounts, and only an answer makes the button
+// appear: `preview` and any other static server 404 the probe, 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
@@ -56,6 +59,12 @@ const joinNotes = ({ content, label, notes }) =>
 // one without a CORS preflight, which the dev server never answers.
 const API_HEADERS = { 'x-fb-slides': '1' };
 
+// Mirror of LOCAL_HOST in lib/edit.mjs: the edit API refuses any other Host,
+// so asking from a published deck — or a phone on the LAN — could only ever
+// cost a 404 in the console. location.hostname carries no port, `[::1]` keeps
+// its brackets, and a file:// page has an empty one.
+const LOCAL_HOST = /^(localhost|127\.0\.0\.1|\[::1\])$/;
+
 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" />
@@ -84,10 +93,14 @@ 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.
+    // Not on localhost: not even a question. The server would refuse the
+    // answer anyway, and a published deck should not log a 404 on every load.
+    if (!LOCAL_HOST.test(location.hostname)) return;
+
+    // Nothing is built until the API answers: under `preview` or any static
+    // server the fetch comes back as a 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) => {
@@ -132,6 +145,12 @@ const build = (deck, assetsDir) => {
       <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>
+    <div class="deck-edit-actions">
+      <button type="button" class="deck-edit-add" title="Add a slide after this one">Add page</button>
+      <button type="button" class="deck-edit-delete" title="Delete this slide">Delete page</button>
+      <span class="deck-edit-status" role="status"></span>
+      <button type="button" class="deck-edit-save">Save</button>
+    </div>
     <div class="deck-edit-row">
       <label class="deck-edit-label" for="deck-edit-source">slide</label>
       <span class="deck-edit-row-acts">
@@ -143,12 +162,6 @@ const build = (deck, assetsDir) => {
     <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 page</button>
-      <button type="button" class="deck-edit-delete" title="Delete this slide">Delete page</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>
@@ -303,10 +316,12 @@ const build = (deck, assetsDir) => {
     deck.layout();
   };
 
-  // `focus` names the box that gets the room and the cursor — navigation and
-  // save-reloads pass the one the drawer already had, so following the deck
-  // never folds the notes away under a writing hand.
-  const open = async (focus = 'source') => {
+  // `focus` names the box that gets the room — navigation and save-reloads
+  // pass the one the drawer already had, so following the deck never folds
+  // the notes away under a writing hand. `takeFocus` says whether that box
+  // also gets the cursor: opening by hand always does, following the deck
+  // only when the cursor was already in the drawer.
+  const open = async (focus = 'source', { takeFocus = true } = {}) => {
     const slide = deck.getCurrentSlide();
     const src = SRC(slide);
     if (!src) return;
@@ -354,7 +369,7 @@ const build = (deck, assetsDir) => {
     // stand this drawer down in turn when one of them arms (see below).
     document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'edit' }));
     setOpen(true);
-    (focus === 'notes' ? notesArea : sourceArea).focus();
+    if (takeFocus) (focus === 'notes' ? notesArea : sourceArea).focus();
   };
 
   const toggle = () => (editing ? close() : open());
@@ -442,6 +457,11 @@ const build = (deck, assetsDir) => {
   // stage thing — and the drawer follows through `slidechanged` like any other
   // navigation.
   for (const nav of panel.querySelectorAll('.deck-edit-nav')) {
+    // The press itself would move the focus onto the button (Chrome does),
+    // and the drawer could no longer tell a writing hand from a browsing one
+    // when the new slide lands. Held back, the cursor stays where it was —
+    // in a box, or out on the deck.
+    nav.addEventListener('mousedown', (event) => event.preventDefault());
     nav.addEventListener('click', () => {
       if (Number(nav.dataset.go) < 0) deck.left({ skipFragments: true });
       else deck.right({ skipFragments: true });
@@ -541,12 +561,16 @@ const build = (deck, assetsDir) => {
 
   // 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.
+  // cursor only comes back to the box it was in — arrowing through the deck
+  // from outside the drawer must not pull it in. The overview is a different
+  // surface altogether, so there it does close.
   deck.on('slidechanged', async () => {
     if (!editing) return;
     const focus = panel.dataset.focus;
+    const active = document.activeElement;
+    const takeFocus = active === sourceArea || active === notesArea;
     discard();
-    await open(focus);
+    await open(focus, { takeFocus });
     // The new slide would not load — a drawer left standing would lie about
     // what it edits.
     if (!editing) setOpen(false);

package/runtime/snippets.js

@@ -192,6 +192,49 @@ const BUILT_IN = [
     keys: 'appear step reveal element attach',
     body: '${content}\n<!-- .element: class="fragment" -->',
   },
+  {
+    group: 'Text',
+    label: 'Eyebrow chips',
+    hint: 'the line above the title — pills, or a // rule, depending on the theme',
+    keys: 'tag label kicker pill badge topic',
+    top: true,
+    body: '<p class="chips"><span>${Angular}</span><span>Signals</span></p>',
+  },
+  {
+    group: 'Text',
+    label: 'Rows',
+    hint: 'two or three things, each with a glyph and one sentence',
+    keys: 'cards list compare items icon',
+    body:
+      '<div class="rows">\n' +
+      '  <div class="row">\n' +
+      '    <span class="row-icon">${1}</span>\n' +
+      '    <div><strong>Name</strong><p>What it is for.</p></div>\n' +
+      '  </div>\n' +
+      '  <div class="row">\n' +
+      '    <span class="row-icon">2</span>\n' +
+      '    <div><strong>Name</strong><p>What it is for.</p></div>\n' +
+      '  </div>\n' +
+      '</div>',
+  },
+  {
+    group: 'Text',
+    label: 'Call to action',
+    hint: 'the last slide — the first one is filled, both grow an arrow',
+    keys: 'cta end follow subscribe outro links',
+    body:
+      '<div class="rows rows--cta">\n' +
+      '  <div class="row"><div><strong>${Save the post}</strong></div></div>\n' +
+      '  <div class="row"><div><strong>Follow me</strong></div></div>\n' +
+      '</div>',
+  },
+  {
+    group: 'Text',
+    label: 'Code, with its file name',
+    hint: 'the marker draws the header bar — the language comes from the extension',
+    keys: 'fence filename snippet header tab',
+    body: '<!-- file: ${cart.component.ts} -->\n```ts\nconst total = computed(() => 0);\n```',
+  },
   {
     group: 'Text',
     label: 'Table',

package/runtime/theme.base.css

@@ -122,7 +122,14 @@ body,
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  margin-bottom: 0.15em;
+  /* The gradient only paints inside the element's box, and with
+     `background-clip: text` a glyph is invisible wherever it is not painted.
+     A pack that tightens line-height under a display serif (both shipped
+     packs do) leaves descenders and tall accents outside the line box, so
+     they were cut. Padding widens the painted box; the margins take the
+     same amount back so nothing on the slide moves. */
+  padding: 0.15em 0.1em 0.3em 0;
+  margin: -0.15em -0.1em -0.15em 0;
 }
 .reveal .slides section.deck-title h2 {
   color: var(--muted);
@@ -266,6 +273,10 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 .reveal .slides section > table tbody tr:nth-child(even) { background: rgb(255 255 255 / 0.018); }
 .reveal .slides section > table td:first-child { color: var(--muted); white-space: nowrap; }
 .reveal .slides section > table th:first-child:empty { min-width: 8ch; }
+/* A table written with an empty header row (`| | |`) is a two-column layout —
+   a term and what it means — not a table with nameless columns. Drawing the bar
+   anyway puts an empty grey strip across the slide, so it goes. */
+.reveal .slides section > table thead:not(:has(th:not(:empty))) { display: none; }
 
 /* --- fragments ----------------------------------------------------------- */
 
@@ -424,6 +435,163 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 }
 .reveal .slides .box > :last-child { margin-bottom: 0; }
 
+/* --- eyebrow chips ------------------------------------------------------- */
+/* `<p class="chips"><span>Angular</span><span>Signals</span></p>` — the line
+   above the title that says which talk this is, and where in it you are. The
+   first chip is the loud one; the rest ride along quieter, because a row of
+   equally loud labels says nothing. One span is simply one pill.
+
+   A theme pack is free to make this a `// ANGULAR · SIGNALS` rule instead —
+   same markup, same meaning, different voice. */
+.reveal .slides .chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45em;
+  margin: 0 0 1.1em;
+  font-size: 0.46em;
+  line-height: 1;
+}
+.reveal .slides .chips span {
+  padding: 0.62em 1em;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card) 60%, transparent);
+  color: var(--muted);
+  font-family: var(--mono);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+.reveal .slides .chips span:first-child {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+  font-weight: 650;
+}
+
+/* --- rows ---------------------------------------------------------------- */
+/* A list that reads as cards: one line each, an optional glyph in a tile at the
+   left, the name and one sentence about it. It is the shape a comparison slide
+   keeps wanting — two things, what each is for — and a <ul> cannot hold it
+   without turning into a table nobody can read from the back of the room.
+
+   `<div class="rows">`, then per item `<div class="row">` holding an optional
+   `<span class="row-icon">`, a `<strong>` and a `<p>`. */
+.reveal .slides .rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55em;
+  margin: 0 0 0.7em;
+}
+.reveal .slides .row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  padding: 0.75em 0.9em;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+}
+.reveal .slides .row-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.9em;
+  height: 1.9em;
+  border-radius: 12px;
+  background: var(--accent);
+  color: var(--bg);
+  font-family: var(--mono);
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+}
+/* The text column, whether or not it was wrapped in one. */
+.reveal .slides .row > :not(.row-icon) { min-width: 0; }
+.reveal .slides .row strong {
+  display: block;
+  margin-bottom: 0.1em;
+  font-size: 0.92em;
+}
+.reveal .slides .row p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.7em;
+  line-height: 1.4;
+}
+
+/* `<div class="rows rows--cta">` — the last slide's two ways out. Each row
+   grows an arrow at its right edge, and the first one is the one you actually
+   want pressed, so it is the one that is filled. Same rule as the chips: in a
+   row of equals nothing is being asked. */
+.reveal .slides .rows--cta .row { align-items: center; }
+.reveal .slides .rows--cta .row::after {
+  content: '\2192';
+  margin-left: auto;
+  padding-left: 0.7em;
+  font-size: 0.85em;
+  opacity: 0.7;
+}
+.reveal .slides .rows--cta .row:first-child {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+}
+.reveal .slides .rows--cta .row:first-child p,
+.reveal .slides .rows--cta .row:first-child::after {
+  color: color-mix(in srgb, var(--bg) 72%, var(--accent));
+  opacity: 1;
+}
+/* `.reveal strong` is white, which on a filled accent row is the one colour it
+   must not be: the label has to read against the fill, not against the deck. */
+.reveal .slides .rows--cta .row:first-child strong { color: inherit; }
+
+/* --- a code block that says which file it is ----------------------------- */
+/* `<!-- file: cart.component.ts -->` on the line above a fence (deck.js lifts
+   it onto the <pre>) draws a header bar: the name on the left, the language on
+   the right. The language is not written anywhere — it is the `language-*`
+   class the highlighter already applied, uppercased.
+
+   The bar is the <pre>'s own ::before rather than an element, so the markup a
+   deck carries stays a plain fenced code block and Marp still renders it. */
+.reveal pre[data-file] { padding-top: 2.1em; }
+.reveal pre[data-file]::before {
+  content: attr(data-file);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2.1em;
+  display: flex;
+  align-items: center;
+  padding: 0 1.2em;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in srgb, var(--card) 70%, #14181f);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.85em;
+  /* Above the stack of absolutely positioned <code> steps, which start at the
+     top of the block and would otherwise slide under the bar. */
+  z-index: 1;
+}
+.reveal pre[data-lang]::after {
+  content: attr(data-lang);
+  position: absolute;
+  top: 0;
+  right: 1.2em;
+  height: 2.1em;
+  display: flex;
+  align-items: center;
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 0.72em;
+  letter-spacing: 0.08em;
+  z-index: 2;
+}
+/* The header sits in the <pre>'s padding; the code keeps its own. */
+.reveal pre[data-file] code { border-radius: 0 0 10px 10px; }
+
 /* --- the author slide ---------------------------------------------------- */
 /* `<!-- .slide: class="author-slide" -->` turns a slide into the speaker page:
    photos filling the left edge to edge, the bio centred on the right. Who you
@@ -630,7 +798,9 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 
 /* Hidden until it is wanted: on stage the slide is the point, so the toolbar
    sleeps just above the top edge of the screen. Parking the mouse along that
-   edge — or arming a tool, or tabbing into it — slides it back down. */
+   edge — or arming a tool, or tabbing into it — slides it back down, and down
+   it stays: `is-open` is a latch annotate.js sets, and only the X chip (or the
+   X key) lifts it. Neither the mouse wandering off nor a tool disarming does. */
 #deck-tools {
   position: fixed;
   top: 14px;
@@ -686,19 +856,13 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   0%, 100% { transform: translateX(-50%) translateY(0); }
   50% { transform: translateX(-50%) translateY(3px); }
 }
-#deck-tools:hover,
-#deck-tools:focus-within,
-#deck-tools.is-armed {
+#deck-tools.is-open {
   transform: translateX(-50%) translateY(0);
 }
 /* Once the toolbar is out, the chevron has done its job — the strip stays as
-   a silent hover target. */
-#deck-tools:hover::before,
-#deck-tools:focus-within::before,
-#deck-tools.is-armed::before { cursor: default; }
-#deck-tools:hover::after,
-#deck-tools:focus-within::after,
-#deck-tools.is-armed::after { opacity: 0; }
+   a silent surface. */
+#deck-tools.is-open::before { cursor: default; }
+#deck-tools.is-open::after { opacity: 0; }
 
 .deck-tool {
   position: relative;
@@ -739,6 +903,21 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   background: color-mix(in srgb, var(--text) 10%, transparent);
   color: var(--text);
 }
+/* The X: last on the strip whatever order the plugins hung their chips in,
+   and set a little apart from the tools it puts away. */
+.deck-tools-close {
+  order: 1;
+  margin-left: 6px;
+}
+.deck-tools-close::before {
+  content: '';
+  position: absolute;
+  left: -5px;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--line);
+}
 /* An armed tool wears the colour it draws in. annotate.js owns the pen's
    palette — it is a list the toolbar enumerates, not a theme token — and sets
    `--pen` and its readable foreground on #deck-tools as the colour changes. */
@@ -791,6 +970,90 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
     0 0 14px color-mix(in srgb, var(--ink) 65%, transparent);
 }
 
+/* --- the theme switcher (themes.js, dev only) ---------------------------- */
+/* Hung below the toolbar like the swatches, for the same reason: the toolbar
+   comes down from the top edge, so down is where the room is. It exists only
+   under `fb-slides dev` — a built deck is rendered without the list this reads,
+   and the plugin never gets as far as creating any of it. */
+#deck-themes {
+  position: absolute;
+  top: calc(100% + 9px);
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 200px;
+  padding: 6px;
+  /* Reveal ships fifteen themes and the packs sit above them: the list is
+     taller than a toolbar menu should be, so it scrolls rather than running off
+     the bottom of a laptop screen. */
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: color-mix(in srgb, var(--card) 92%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 14px 40px rgb(0 0 0 / 0.4);
+  scrollbar-width: thin;
+  scrollbar-color: var(--outline-bar) transparent;
+}
+#deck-themes::-webkit-scrollbar { width: 5px; }
+#deck-themes::-webkit-scrollbar-track { background: transparent; }
+#deck-themes::-webkit-scrollbar-thumb { background: var(--outline-bar); border-radius: 999px; }
+#deck-themes::-webkit-scrollbar-thumb:hover { background: var(--outline-bar-hover); }
+
+/* The two kinds, told apart. Not sticky, unlike the outline's deck headers:
+   there are only two of them, and two sticky headings at the same offset pile
+   up on each other the moment the list is scrolled. */
+#deck-themes > h2 {
+  margin: 12px 0 4px;
+  padding: 6px 10px 5px;
+  font: 600 9.5px/1 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--bg-2);
+  border: 0;
+}
+#deck-themes[hidden] { display: none; }
+
+/* Open, not armed — the pressed look belongs to the tools that draw. */
+#tool-theme[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+  color: var(--text);
+}
+
+.deck-theme-row {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font: 400 12.5px/1.2 var(--mono);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease;
+}
+.deck-theme-row:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
+.deck-theme-row[aria-selected='true'] {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  color: var(--text);
+}
+
+/* What it takes to keep the choice: the switcher previews, slides.config.js
+   decides. Saying so here is cheaper than being asked. */
+.deck-theme-note {
+  position: sticky;
+  bottom: -6px;
+  margin: 8px 4px 0;
+  padding: 5px 0 2px;
+  background: var(--bg-2);
+  color: var(--muted);
+  font: 400 10.5px/1.35 var(--mono);
+  opacity: 0.75;
+}
+
 /* --- the outline sidebar (outline.js) ------------------------------------ */
 
 /* The panel does not float over the deck, it takes room from it: the slide
@@ -1321,11 +1584,14 @@ body.edit-open #deck-edit { transform: none; }
 .deck-edit-ink .hljs-comment,
 .deck-edit-ink .hljs-meta { color: var(--muted); font-weight: 400; }
 
-#deck-edit > footer {
+/* The file operations sit in a bar under the header, over the boxes: what a
+   save or a delete acts on is the whole slide, not the box the cursor is in. */
+.deck-edit-actions {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 12px 16px 14px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
 }
 .deck-edit-status {
   flex: 1;