fb-slides 0.5.1 → 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,87 @@ 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
+instead of carrying a paragraph of inline styles:
+
+| | |
+| --- | --- |
+| `.cols` / `.col` | two columns — with the `min-width: 0` a code block falls over without |
+| `.frame` | an embed that shares the slide instead of taking it whole |
+| `.caption` | a quiet line under a figure |
+| `.box` | a bordered block: the point the slide comes back to |
+| `.author-slide` | the speaker page — photos down the left edge, the bio on the right |
+| `<img>`, `<video>` | centred, unframed, and never wider than the slide |
+
+````markdown
+<div class="cols">
+<div class="col">
+
+**In the widget**
+
+```js
+app.openLink({ url: 'https://example.com/' });
+```
+
+</div>
+<div class="col">
+
+The blank lines matter: Markdown inside a block-level tag is only parsed
+when there is one on each side of it.
+
+</div>
+</div>
+````
+
+Each of them fixes its numbers in CSS variables — `--cols-gap`, `--frame-w`,
+`--frame-h`, `--author-photo`, `--author-hold` — so a project retunes one from its own
+`theme.css` without restating the rule.
+
+The speaker page is markup you write and the theme lays out. Give `.author-photo` as
+many `<img>` as you like: they cross-fade in the order they are written, on a loop that
+restarts every time the slide comes up.
+
+```markdown
+<!-- .slide: class="author-slide" -->
+
+<div class="author-photo">
+  <img src="assets/author/on-stage.jpg" alt="" />
+  <img src="assets/author/portrait.jpg" alt="" />
+</div>
+
+<div class="author-bio">
+  <h1>Your name</h1>
+  <ul><li>What you do</li></ul>
+  <p class="author-meta">The stack · you · work · with</p>
+</div>
+```
+
 ### Editing in the browser
 
 On the dev server, `T` (or the last button on the toolbar) opens the slide you
@@ -140,6 +221,22 @@ right after the current one and opens it; **Delete** removes the slide from its
 file, after asking. Clicking into the notes box trades the room with the slide
 box, so both are comfortable to write in.
 
+The `+` over the slide box — or `/` typed on an empty line — opens the block
+picker: the demo marker, a framed embed, a video with the attributes that make
+it behave, two columns, a fenced block, the speaker page. The block lands where
+the cursor was, with its first placeholder selected so it is ready to type over;
+text already selected takes that placeholder's place, so picking **Fragment**
+wraps the paragraph that was highlighted. A block that only works at the top of
+a slide, like the demo marker, goes there whatever the cursor was doing.
+
+`snippets:` in `slides.config.js` adds a project's own blocks to the list:
+
+```js
+snippets: [
+  { label: 'Pricing table', hint: 'the three tiers', body: '<div class="tiers">${…}</div>' },
+],
+```
+
 The drawer exists only under `fb-slides dev`: a built deck is static files and
 never shows the button.
 
@@ -194,6 +291,7 @@ export default {
   outDir: 'dist',
   exclude: ['dist'],             // extra path segments the build skips
   fragmentLists: true,           // bullet lists reveal one item at a time
+  snippets: [],                  // your own blocks in the edit drawer's picker
   reveal: { transition: 'fade' },// passed to Reveal.initialize()
   mermaid: {},                   // passed to mermaid.initialize()
 };

package/lib/config.mjs

@@ -80,6 +80,10 @@ export const loadConfig = async (root = process.cwd(), overrides = {}) => {
     reveal: user.reveal ?? {},
     // Bullet lists of 3+ items appear one item at a time.
     fragmentLists: user.fragmentLists ?? true,
+    // The project's own entries in the edit drawer's block picker, after the
+    // built-in ones: `{ label, hint, body, top }`, where `${…}` in the body
+    // marks what has to be typed over.
+    snippets: user.snippets ?? [],
     // The build output, at any depth: a framework demo's own dist/ is its dev
     // server's business, and the deck ships that demo as sources.
     exclude: [...ALWAYS_EXCLUDED, overrides.outDir ?? user.outDir ?? 'dist', ...(user.exclude ?? [])],

package/lib/render.mjs

@@ -46,6 +46,7 @@ export const renderIndex = async (config, runtimeDir) => {
     demos: config.urls.demos,
     reveal: config.reveal,
     fragmentLists: config.fragmentLists,
+    snippets: config.snippets,
   };
 
   // The chrome reads this to take its colours from the reveal theme instead of

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.5.1",
+  "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/annotate.js

@@ -477,7 +477,17 @@ const RevealAnnotate = () => ({
       for (const [name, button] of Object.entries(toolButtons)) {
         button.setAttribute('aria-pressed', String(name === tool));
       }
-      toolbar.classList.toggle('is-armed', tool !== null);
+      // `is-armed` is shared with the other tool plugins, and the arming
+      // handshake fires mid-switch: the newcomer sets the class, then its
+      // event runs this module's stand-down — so a plain toggle with this
+      // module's own boolean would wipe it with a tool still armed. It is
+      // recomputed from the buttons instead, which every module keeps
+      // truthful. The edit chip stays out of it: its pressed state is the
+      // drawer, not an armed tool.
+      toolbar.classList.toggle(
+        'is-armed',
+        !!toolbar.querySelector('.deck-tool[aria-pressed="true"]:not(#tool-edit)'),
+      );
       // 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;

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.
 // ---------------------------------------------------------------------------
@@ -294,6 +358,58 @@ for (const pre of document.querySelectorAll('.slides pre')) {
   if (lines > 14) pre.classList.add('pre--dense');
 }
 
+// ---------------------------------------------------------------------------
+// The speaker page's photos cross-fade in DOM order (`.author-slide` in
+// theme.base.css). Where each fade lands depends on how many photos there are
+// and on the two timing tokens a project can retune — so the keyframes each
+// strip needs are written here, instead of shipping a set for every count the
+// theme might ever be handed.
+// ---------------------------------------------------------------------------
+
+const seconds = (value) => {
+  const time = Number.parseFloat(value);
+  if (!Number.isFinite(time)) return 0;
+  return value.trim().endsWith('ms') ? time / 1000 : time;
+};
+
+const strips = document.querySelectorAll('.slides .author-photo');
+if (strips.length) {
+  const sheet = document.createElement('style');
+  document.head.append(sheet);
+  const written = new Set();
+
+  for (const strip of strips) {
+    const photos = [...strip.querySelectorAll('img')];
+    photos.forEach((photo, i) => photo.style.setProperty('--i', i));
+    // One photo has nothing to fade to, and the CSS already leaves it showing.
+    if (photos.length < 2) continue;
+
+    const css = getComputedStyle(strip);
+    const hold = seconds(css.getPropertyValue('--author-hold'));
+    const fade = seconds(css.getPropertyValue('--author-fade'));
+    const slot = hold + fade;
+    if (!slot) continue;
+
+    const total = photos.length * slot;
+    const at = (time) => `${((time / total) * 100).toFixed(3)}%`;
+    // Named for what it draws: two strips of the same length and timing — the
+    // ordinary case, since both come from the same tokens — share one set.
+    const name = `author-fade-${photos.length}-${Math.round(hold * 1000)}-${Math.round(fade * 1000)}`;
+    if (!written.has(name)) {
+      written.add(name);
+      sheet.sheet.insertRule(
+        `@keyframes ${name} {` +
+          `0% { opacity: 0 }` +
+          `${at(fade)}, ${at(slot)} { opacity: 1 }` +
+          `${at(slot + fade)}, 100% { opacity: 0 }` +
+        `}`,
+      );
+    }
+    strip.style.setProperty('--author-n', photos.length);
+    strip.style.setProperty('--author-anim', name);
+  }
+}
+
 Reveal.sync();
 
 // Which deck are we in? Shown in the corner, hidden on dividers.

package/runtime/edit.js

@@ -13,8 +13,13 @@
 // slide's own range of the .md (the server owns that arithmetic) and reloads:
 // the URL hash puts the deck back on this slide, and the full pipeline —
 // mermaid, fragments, highlight steps — runs over the saved source.
+//
+// The `+` over the slide box — or `/` on an empty line — opens the block
+// picker, which writes the markup nobody should have to remember (snippets.js).
 // ---------------------------------------------------------------------------
 
+import { createSnippets, PLUS_ICON } from './snippets.js';
+
 // Where the slide came from, stamped on every section by deck.js: the .md file
 // and the slide's index within it, counted the way the server counts.
 const SRC = (slide) => {
@@ -116,19 +121,22 @@ const build = (deck) => {
   panel.id = 'deck-edit';
   panel.innerHTML = `
     <header>
-      <span>edit</span>
+      <button type="button" class="deck-edit-wide" aria-pressed="false"></button>
       <code class="deck-edit-file"></code>
       <button type="button" class="deck-edit-nav" data-go="-1" title="Previous slide" aria-label="Previous slide">${PREV_ICON}</button>
       <button type="button" class="deck-edit-nav" data-go="1" title="Next slide" aria-label="Next slide">${NEXT_ICON}</button>
       <button type="button" class="deck-edit-close" aria-label="Close">${CLOSE_ICON}</button>
     </header>
-    <label class="deck-edit-label" for="deck-edit-source">slide</label>
+    <div class="deck-edit-row">
+      <label class="deck-edit-label" for="deck-edit-source">slide</label>
+      <button type="button" class="deck-edit-snip" title="Insert a block (/)" aria-label="Insert a block">${PLUS_ICON}</button>
+    </div>
     <textarea id="deck-edit-source" spellcheck="false"></textarea>
     <label class="deck-edit-label" for="deck-edit-notes">speaker notes</label>
     <textarea id="deck-edit-notes" spellcheck="false"></textarea>
     <footer>
-      <button type="button" class="deck-edit-add" title="Add a slide after this one">Add</button>
-      <button type="button" class="deck-edit-delete" title="Delete this slide">Delete</button>
+      <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>
@@ -144,6 +152,7 @@ const build = (deck) => {
   panel.inert = true;
 
   const fileLabel = panel.querySelector('.deck-edit-file');
+  const wideButton = panel.querySelector('.deck-edit-wide');
   const sourceArea = panel.querySelector('#deck-edit-source');
   const notesArea = panel.querySelector('#deck-edit-notes');
   const status = panel.querySelector('.deck-edit-status');
@@ -190,6 +199,13 @@ const build = (deck) => {
     frame ||= requestAnimationFrame(paint);
   };
 
+  // ---- the block picker ---------------------------------------------------
+  // Over the drawer, like the delete question: the deck keeps the stage, and
+  // what the picker writes goes through the same preview typing does.
+
+  const snippets = createSnippets({ area: sourceArea, paint: schedulePaint });
+  panel.append(snippets.element);
+
   // ---- open and close ---------------------------------------------------
   // The deck is narrowed by CSS while the drawer is out (see theme.base.css);
   // reveal only rescales when told to, so layout() is driven for as long as
@@ -204,6 +220,29 @@ const build = (deck) => {
     requestAnimationFrame(step);
   };
 
+  // Half the page for a slide that is mostly markup, the narrow drawer for one
+  // that is mostly words. The width is a token, so saying it on the body is
+  // enough — the deck, the badge, the signature and the toolbar all step aside
+  // through the same `calc()` they already use. It survives the reload a save
+  // ends in, which is the only way it could be worth setting at all.
+  const WIDE_KEY = 'fb-slides.edit-wide';
+
+  const setWide = (wide) => {
+    document.body.classList.toggle('edit-wide', wide);
+    wideButton.setAttribute('aria-pressed', String(wide));
+    wideButton.innerHTML = wide ? NEXT_ICON : PREV_ICON;
+    const label = wide ? 'Narrow the drawer' : 'Widen the drawer to half the page';
+    wideButton.title = label;
+    wideButton.setAttribute('aria-label', label);
+    try {
+      if (wide) sessionStorage.setItem(WIDE_KEY, '1');
+      else sessionStorage.removeItem(WIDE_KEY);
+    } catch {
+      /* walled-off storage only costs the width after a reload */
+    }
+    reflow();
+  };
+
   const setOpen = (open) => {
     document.body.classList.toggle('edit-open', open);
     button.setAttribute('aria-pressed', String(open));
@@ -216,6 +255,7 @@ const build = (deck) => {
   const discard = () => {
     cancelAnimationFrame(frame);
     frame = 0;
+    snippets.close({ restore: false });
     confirmBox.hidden = true;
     editing.slide.innerHTML = editing.html;
     // The original fragments are back; reveal counts them again.
@@ -230,7 +270,10 @@ const build = (deck) => {
     deck.layout();
   };
 
-  const open = async () => {
+  // `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') => {
     const slide = deck.getCurrentSlide();
     const src = SRC(slide);
     if (!src) return;
@@ -266,15 +309,16 @@ const build = (deck) => {
     fileLabel.textContent = src.file;
     sourceArea.value = content;
     notesArea.value = notes;
+    snippets.reset();
     status.textContent = '';
     saveButton.disabled = false;
-    panel.dataset.focus = 'source';
+    panel.dataset.focus = focus;
 
     // One pointer, one tool: the pen, spotlight and pointer stand down — and
     // stand this drawer down in turn when one of them arms (see below).
     document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'edit' }));
     setOpen(true);
-    sourceArea.focus();
+    (focus === 'notes' ? notesArea : sourceArea).focus();
   };
 
   const toggle = () => (editing ? close() : open());
@@ -287,9 +331,11 @@ const build = (deck) => {
 
   const REOPEN_KEY = 'fb-slides.edit-reopen';
 
+  // The flag's value is the box that was open, so the reload hands the room
+  // (and the cursor) back to it.
   const reloadEditing = () => {
     try {
-      sessionStorage.setItem(REOPEN_KEY, '1');
+      sessionStorage.setItem(REOPEN_KEY, panel.dataset.focus === 'notes' ? 'notes' : 'source');
     } catch {
       /* walled-off storage only costs the reopen */
     }
@@ -348,6 +394,10 @@ const build = (deck) => {
 
   button.addEventListener('click', toggle);
   panel.querySelector('.deck-edit-close').addEventListener('click', close);
+  wideButton.addEventListener('click', () =>
+    setWide(!document.body.classList.contains('edit-wide')),
+  );
+  panel.querySelector('.deck-edit-snip').addEventListener('click', () => snippets.open());
   saveButton.addEventListener('click', save);
   sourceArea.addEventListener('input', schedulePaint);
 
@@ -400,8 +450,10 @@ const build = (deck) => {
     'keydown',
     (event) => {
       if (event.key !== 'Escape' || !editing) return;
-      // One layer at a time: a pending delete question goes first.
-      if (confirmBox.hidden) close();
+      // One layer at a time, innermost first: the picker, then a pending
+      // delete question, then the drawer itself.
+      if (snippets.isOpen()) snippets.close();
+      else if (confirmBox.hidden) close();
       else confirmBox.hidden = true;
       event.stopPropagation();
       event.preventDefault();
@@ -416,13 +468,22 @@ const build = (deck) => {
     if (event.detail !== 'edit') close();
   });
 
+  let wideAtStart = false;
+  try {
+    wideAtStart = Boolean(sessionStorage.getItem(WIDE_KEY));
+  } catch {
+    /* walled-off storage: the drawer opens at its usual width */
+  }
+  setWide(wideAtStart);
+
   // A write reloaded the page with the drawer out: pick the editing back up
   // on whatever slide the hash landed on.
   try {
-    if (sessionStorage.getItem(REOPEN_KEY)) {
+    const reopen = sessionStorage.getItem(REOPEN_KEY);
+    if (reopen) {
       sessionStorage.removeItem(REOPEN_KEY);
-      if (deck.isReady?.()) open();
-      else deck.on('ready', open);
+      if (deck.isReady?.()) open(reopen);
+      else deck.on('ready', () => open(reopen));
     }
   } catch {
     /* walled-off storage: the drawer just stays closed */
@@ -433,8 +494,9 @@ const build = (deck) => {
   // overview is a different surface altogether, so there it does close.
   deck.on('slidechanged', async () => {
     if (!editing) return;
+    const focus = panel.dataset.focus;
     discard();
-    await open();
+    await open(focus);
     // The new slide would not load — a drawer left standing would lie about
     // what it edits.
     if (!editing) setOpen(false);