fb-slides 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -7,6 +7,24 @@ 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.10.0 — 2026-09-08
+
+- **A file in the assets panel opens on click.** The name on a row carries the
+  full path in its tooltip, and clicking it shows the file: an image comes up
+  right there, over the deck — full size, the path under it, a click anywhere
+  or Escape puts it away — and everything else opens in a new tab, where the
+  browser plays the clip, renders the PDF, and offers to save the rest.
+
+## 0.9.1 — 2026-09-08
+
+- **The assets panel shows the folder, not just what you dropped.** The list
+  under the folder picker is now that folder as it is on disk — the screenshot
+  from a moment ago and the one from last month, side by side — so an asset
+  that was already there can be copied, written into the slide, or deleted
+  without going to the Finder for it. Picking another folder lists that one,
+  what this session put there is tinted, and a file under a kilobyte is counted
+  in bytes rather than rounding to `0 KB`.
+
 ## 0.9.0 — 2026-09-08
 
 - **The editor answers `Shift+E`, not `T`.** The drawer's shortcut moved off

package/README.md

@@ -273,10 +273,13 @@ files are saved there; drop on **＋ new folder…** and it asks for a name and
 makes it. The button next to the `+` opens the same panel for files you would
 rather pick than drag.
 
-Each file that lands is listed with the path to write in the slide, a button
-that copies it, and one that writes it for you at the cursor: `![](…)` for an
-image, a `<video>` with the attributes that make it behave for a clip, an
-`<audio>` for sound, a link for everything else. Names are folded to something
+The list under the folder picker is that folder, as it is on disk: what was just
+dropped and what has been there since last month. Each row carries the path to
+write in the slide, a button that copies it, and one that writes it for you at
+the cursor: `![](…)` for an image, a `<video>` with the attributes that make it
+behave for a clip, an `<audio>` for sound, a link for everything else. Picking
+another folder lists that one; what this session put there is tinted, so it
+stands out among files that were already around. Names are folded to something
 a URL can carry — `Schermata città (1).PNG` becomes `Schermata-citta-1.png` —
 and nothing is ever overwritten: a second `clip.mp4` lands as `clip-2.mp4`.
 

package/lib/assets.mjs

@@ -6,8 +6,8 @@
 // and putting the picture it points at next to it are the same job, so the
 // drawer that does one does the other.
 //
-//   GET  /api/assets   → { dir, dirs } — where files land, and the subfolders
-//                        that are already there to aim at
+//   GET  /api/assets?dir=x → { dir, dirs, at, files } — where files land, the
+//                        subfolders to aim at, and what is in the one asked for
 //   POST /api/assets   → the file's own bytes, its name and folder riding in
 //                        headers (a filename is not latin-1, hence the encoding);
 //                        answers { path } — what the slide should say
@@ -103,6 +103,23 @@ const freeName = async (dir, name) => {
   return null;
 };
 
+// What is in one folder, as rows the drawer can list: files only, no dotfiles,
+// each carrying the path a slide would write.
+const filesIn = async (path, dir, relative) => {
+  const entries = await readdir(path, { withFileTypes: true }).catch(() => []);
+  const found = [];
+  for (const entry of entries) {
+    if (!entry.isFile() || entry.name.startsWith('.')) continue;
+    const info = await stat(join(path, entry.name)).catch(() => null);
+    found.push({
+      name: entry.name,
+      size: info?.size ?? 0,
+      path: [dir, relative, entry.name].filter(Boolean).join('/'),
+    });
+  }
+  return found.sort((a, b) => a.name.localeCompare(b.name, 'en', { numeric: true }));
+};
+
 const subfolders = async (root) => {
   const walk = async (dir, prefix, left) => {
     if (!left) return [];
@@ -157,7 +174,16 @@ const receive = async (req, target) => {
 // where that is on disk.
 export const createAssetApi = ({ dir, path: root }) => async (req, res) => {
   if (req.method === 'GET') {
-    return json(res, 200, { dir, dirs: await subfolders(root).catch(() => []) });
+    // `dir` is the folder the drawer is showing — the root when it says nothing,
+    // and nothing at all while a new folder is being named.
+    const asked = new URL(req.url, 'http://localhost').searchParams.get('dir') ?? '';
+    const at = folderIn(root, asked);
+    return json(res, 200, {
+      dir,
+      dirs: await subfolders(root).catch(() => []),
+      at: at?.relative ?? '',
+      files: at ? await filesIn(at.path, dir, at.relative) : [],
+    });
   }
 
   if (req.method !== 'POST' && req.method !== 'DELETE') {

package/package.json

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

package/runtime/assets.js

@@ -7,11 +7,11 @@
 // is created if it is new — and the drawer lists what landed, each row a path
 // with two buttons: copy it, or write the markup for it into the slide.
 //
-// Nothing here is a file browser. The list is what *this* drop produced, which
-// is what you need in the ten seconds after dragging a screenshot in; the paths
-// are relative, so they work in dev and in the built deck alike. A row can also
-// delete its file — the wrong screenshot, dropped a moment ago — and that one
-// asks for the word to be typed: it is the only thing here a reload cannot undo.
+// The list under the folder picker is that folder, as it is on disk: what was
+// just dropped and what has been there since last month, each row a path to
+// copy, to write into the slide, or to delete. The paths are relative, so they
+// work in dev and in the built deck alike. Deleting asks for the word to be
+// typed — it is the only thing here a reload cannot undo.
 //
 // Only the dev server answers /api/assets, so on a static host the sheet never
 // appears — the drawer it belongs to is not there either.
@@ -76,7 +76,13 @@ const TRASH_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" s
 
 const hasFiles = (event) => [...(event.dataTransfer?.types ?? [])].includes('Files');
 
-const bytes = (size) => (size < 1024 * 1024 ? `${Math.round(size / 1024)} KB` : `${(size / 1048576).toFixed(1)} MB`);
+// A 511-byte SVG rounding to `0 KB` is a row that looks like a broken file.
+const bytes = (size) =>
+  size < 1024
+    ? `${size} B`
+    : size < 1024 * 1024
+      ? `${Math.round(size / 1024)} KB`
+      : `${(size / 1048576).toFixed(1)} MB`;
 
 // One file, streamed. XHR rather than fetch for the one thing fetch cannot do:
 // tell you how far a 60 MB screen recording has got.
@@ -161,6 +167,32 @@ export const createAssets = ({ paste, active }) => {
   const wordInput = confirmBox.querySelector('.deck-assets-word');
   const confirmButton = confirmBox.querySelector('.deck-assets-confirm-delete');
 
+  // ---- the image preview --------------------------------------------------
+  // A click on an image's name opens the image itself, over everything — the
+  // drawer is narrow and a thumbnail would say less than the file name does.
+  // A click anywhere on it, or Escape, puts it away. Every other kind of file
+  // goes to a new tab instead: the browser knows a clip and a PDF better.
+
+  const preview = document.createElement('div');
+  preview.className = 'deck-assets-preview';
+  preview.hidden = true;
+  preview.innerHTML = `<figure><img alt="" /><figcaption><code></code></figcaption></figure>`;
+  const previewImage = preview.querySelector('img');
+
+  const openPreview = (path) => {
+    previewImage.src = path;
+    preview.querySelector('figcaption code').textContent = path;
+    preview.hidden = false;
+  };
+
+  const closePreview = () => {
+    preview.hidden = true;
+    // A 20 MB screenshot should stop arriving the moment nobody is looking.
+    previewImage.removeAttribute('src');
+  };
+
+  preview.addEventListener('click', closePreview);
+
   // ---- the full-page sheet ----------------------------------------------
 
   const overlay = document.createElement('div');
@@ -181,7 +213,10 @@ export const createAssets = ({ paste, active }) => {
   let dirs = []; // its subfolders, as the server last listed them
   let chosen = ''; // where the next drop goes, remembered between drops
   let pending = null; // files waiting for a folder that has yet to be named
-  let asking = null; // { path, row } — the delete question standing over the list
+  let asking = null; // the path the delete question is standing over
+  let files = []; // the chosen folder, as the server last listed it
+  let failures = []; // uploads that did not land, kept under the listing
+  const fresh = new Set(); // what this session put there — worth pointing at
 
   // The root, what the server last listed, and — however that listing raced
   // with the upload that made it — the folder this drop actually went to.
@@ -213,21 +248,28 @@ export const createAssets = ({ paste, active }) => {
     targets.insertAdjacentHTML('beforeend', `<li data-dir="${NEW}" class="is-new">＋ new folder…</li>`);
   };
 
-  // The folder list as it is right now: a drop is often the second one, and the
-  // folder the first one made should be there to aim at.
+  // The folder as it is right now — its subfolders to aim at, and its files to
+  // list. Called on open, on picking another folder, and after every write.
   const refresh = async () => {
+    const where = pending ? '' : chosen;
     try {
-      const response = await fetch('/api/assets', { headers: API_HEADERS, cache: 'no-cache' });
+      const response = await fetch(`/api/assets?dir=${encodeURIComponent(where)}`, {
+        headers: API_HEADERS,
+        cache: 'no-cache',
+      });
       if (response.ok) {
         const answer = await response.json();
         root = answer.dir ?? root;
         dirs = Array.isArray(answer.dirs) ? answer.dirs : [];
+        files = Array.isArray(answer.files) ? answer.files : [];
       }
     } catch {
       /* no listing: assets/ itself is always there to drop into */
+      files = [];
     }
     drawSelect();
     drawTargets();
+    drawFiles();
   };
 
   // ---- open and close ---------------------------------------------------
@@ -250,6 +292,7 @@ export const createAssets = ({ paste, active }) => {
     nameRow.hidden = true;
     waiting.hidden = true;
     closeConfirm();
+    closePreview();
   };
 
   // ---- the rows ---------------------------------------------------------
@@ -269,6 +312,70 @@ export const createAssets = ({ paste, active }) => {
     }
   };
 
+  // The folder, one row per file: the path, and the three things worth doing
+  // with it. Rebuilt whole on every refresh — a listing is cheap, and the
+  // alternative is keeping rows in step with a folder two other things write to.
+  const drawFiles = () => {
+    list.innerHTML = '';
+
+    if (!files.length && !failures.length) {
+      const empty = document.createElement('li');
+      empty.className = 'deck-assets-none';
+      empty.textContent = pending ? 'The folder will be made when you name it.' : 'Nothing in this folder yet.';
+      list.append(empty);
+    }
+
+    for (const file of files) {
+      const row = document.createElement('li');
+      if (fresh.has(file.path)) row.classList.add('is-fresh');
+      row.innerHTML =
+        `<code></code>` +
+        `<span class="deck-assets-size"></span>` +
+        `<span class="deck-assets-acts">` +
+        `<button type="button" class="deck-assets-copy" title="Copy the path">${COPY_ICON}</button>` +
+        `<button type="button" class="deck-assets-insert" title="Write it into the slide">${INSERT_ICON}</button>` +
+        `<button type="button" class="deck-assets-trash" title="Delete the file">${TRASH_ICON}</button>` +
+        `</span>`;
+      const name = row.querySelector('code');
+      name.textContent = file.path;
+      // The drawer is narrow and a path can be long: the row truncates, and
+      // hovering the name says the whole thing. Clicking it shows the file: an
+      // image right here, over the deck; anything else in a new tab, where the
+      // browser plays the clip, renders the PDF, and offers to save the rest.
+      name.title = file.path;
+      name.classList.add('is-viewable');
+      if (IMAGE.test(file.path)) {
+        name.classList.add('is-image');
+        name.addEventListener('click', () => openPreview(file.path));
+      } else {
+        name.addEventListener('click', () => window.open(file.path, '_blank', 'noopener'));
+      }
+      row.querySelector('.deck-assets-size').textContent = bytes(file.size);
+      row.querySelector('.deck-assets-copy').addEventListener('click', (event) =>
+        copy(file.path, event.currentTarget),
+      );
+      row.querySelector('.deck-assets-insert').addEventListener('click', () => {
+        paste(blockFor(file.path, file.name));
+        close();
+      });
+      row.querySelector('.deck-assets-trash').addEventListener('click', () => askDelete(file.path));
+      list.append(row);
+    }
+
+    // What did not land stays under the listing rather than vanishing with the
+    // refresh that follows the upload.
+    for (const failure of failures) {
+      const row = document.createElement('li');
+      row.className = 'is-failed';
+      row.innerHTML = `<span class="deck-assets-file"></span><span class="deck-assets-pct"></span>`;
+      row.querySelector('.deck-assets-file').textContent = failure.name;
+      row.querySelector('.deck-assets-pct').textContent = failure.message;
+      list.append(row);
+    }
+  };
+
+  // While an upload is in flight it has a row of its own, under the listing,
+  // counting up. The refresh that follows replaces it with the real thing.
   const addRow = (file) => {
     const row = document.createElement('li');
     row.innerHTML = `<span class="deck-assets-file"></span><span class="deck-assets-pct"></span>`;
@@ -277,64 +384,37 @@ export const createAssets = ({ paste, active }) => {
     pct.textContent = bytes(file.size);
     list.append(row);
     row.scrollIntoView({ block: 'nearest' });
-
     return {
       progress: (share) => {
         pct.textContent = `${Math.round(share * 100)}%`;
       },
-      failed: (message) => {
-        row.classList.add('is-failed');
-        pct.textContent = message;
-      },
-      done: ({ path, name }) => {
-        row.classList.add('is-done');
-        row.innerHTML =
-          `<code></code>` +
-          `<span class="deck-assets-acts">` +
-          `<button type="button" class="deck-assets-copy" title="Copy the path">${COPY_ICON}</button>` +
-          `<button type="button" class="deck-assets-insert" title="Write it into the slide">${INSERT_ICON}</button>` +
-          `<button type="button" class="deck-assets-trash" title="Delete the file">${TRASH_ICON}</button>` +
-          `</span>`;
-        row.querySelector('code').textContent = path;
-        row.querySelector('.deck-assets-copy').addEventListener('click', (event) =>
-          copy(path, event.currentTarget),
-        );
-        row.querySelector('.deck-assets-insert').addEventListener('click', () => {
-          paste(blockFor(path, name));
-          close();
-        });
-        row.querySelector('.deck-assets-trash').addEventListener('click', () => askDelete(path, row));
-      },
     };
   };
 
   // One at a time: a folder of screenshots dropped at once should not open ten
   // sockets, and the rows then fill in the order they were dropped.
-  const send = async (files, dir) => {
-    if (!files.length) return;
+  const send = async (dropped, dir) => {
+    if (!dropped.length) return;
     chosen = dir;
+    failures = [];
     open();
-    for (const file of files) {
+    for (const file of dropped) {
       const row = addRow(file);
       try {
         const answer = await upload(file, dir, row.progress);
-        row.done(answer);
         // The folder as the server spells it — `talk 2026` was typed, and what
         // exists on disk is `talk-2026`. The list should say the latter.
         chosen = answer.dir;
-        if (answer.dir && !dirs.includes(answer.dir)) {
-          dirs = [...dirs, answer.dir].sort((a, b) => a.localeCompare(b, 'en', { numeric: true }));
-        }
-        drawSelect();
-        drawTargets();
+        fresh.add(answer.path);
       } catch (error) {
-        row.failed(error.message);
+        failures.push({ name: file.name, message: error.message });
       }
     }
+    await refresh();
   };
 
-  const askDelete = (path, row) => {
-    asking = { path, row };
+  const askDelete = (path) => {
+    asking = path;
     confirmBox.querySelector('code').textContent = path;
     wordInput.value = '';
     confirmButton.disabled = true;
@@ -344,7 +424,7 @@ export const createAssets = ({ paste, active }) => {
 
   const doDelete = async () => {
     if (!asking || confirmButton.disabled) return;
-    const { path, row } = asking;
+    const path = asking;
     confirmButton.disabled = true;
     try {
       const response = await fetch(`/api/assets?path=${encodeURIComponent(path)}`, {
@@ -352,10 +432,8 @@ export const createAssets = ({ paste, active }) => {
         headers: API_HEADERS,
       });
       if (!response.ok) throw new Error((await response.json()).error ?? response.status);
-      row.remove();
+      fresh.delete(path);
       closeConfirm();
-      // The folder may have been the file's only reason to exist; the list says
-      // what is there now either way.
       refresh();
     } catch (error) {
       confirmBox.querySelector('code').textContent = error.message;
@@ -364,14 +442,14 @@ export const createAssets = ({ paste, active }) => {
   };
 
   // A drop that named no folder yet: hold the files, ask, and send on the answer.
-  const askName = (files) => {
-    pending = files;
+  const askName = (dropped) => {
+    pending = dropped;
     open();
     drawSelect();
     nameRow.hidden = false;
     goButton.hidden = false;
     waiting.hidden = false;
-    waiting.textContent = `${files.length} file${files.length === 1 ? '' : 's'} waiting for a folder name.`;
+    waiting.textContent = `${dropped.length} file${dropped.length === 1 ? '' : 's'} waiting for a folder name.`;
     nameInput.focus();
     nameInput.select();
   };
@@ -379,23 +457,23 @@ export const createAssets = ({ paste, active }) => {
   const confirmName = () => {
     const dir = nameInput.value.trim().replace(/^\/+|\/+$/g, '');
     if (!dir) return nameInput.focus();
-    const files = pending;
+    const held = pending;
     pending = null;
     nameInput.value = '';
     nameRow.hidden = true;
     goButton.hidden = true;
     waiting.hidden = true;
-    if (files) send(files, dir);
+    if (held) send(held, dir);
     else {
       chosen = dir;
-      drawSelect();
+      refresh();
     }
   };
 
-  const drop = (files, dir) => {
-    if (!files.length) return;
-    if (dir === NEW) askName(files);
-    else send(files, dir);
+  const drop = (dropped, dir) => {
+    if (!dropped.length) return;
+    if (dir === NEW) askName(dropped);
+    else send(dropped, dir);
   };
 
   // ---- wiring: the panel -------------------------------------------------
@@ -410,6 +488,8 @@ export const createAssets = ({ paste, active }) => {
     }
     nameRow.hidden = true;
     chosen = select.value;
+    failures = [];
+    refresh();
   });
 
   wordInput.addEventListener('input', () => {
@@ -435,9 +515,9 @@ export const createAssets = ({ paste, active }) => {
     fileInput.click();
   });
   fileInput.addEventListener('change', () => {
-    const files = [...fileInput.files];
+    const picked = [...fileInput.files];
     fileInput.value = '';
-    drop(files, select.value === NEW ? nameInput.value.trim() : select.value);
+    drop(picked, select.value === NEW ? nameInput.value.trim() : select.value);
   });
 
   // ---- wiring: the sheet -------------------------------------------------
@@ -492,7 +572,7 @@ export const createAssets = ({ paste, active }) => {
     drop([...event.dataTransfer.files], target?.dataset.dir ?? chosen);
   });
 
-  document.body.append(overlay);
+  document.body.append(overlay, preview);
 
   return {
     element,
@@ -503,6 +583,7 @@ export const createAssets = ({ paste, active }) => {
     // One layer per press, innermost first — the drawer asks this before it
     // decides whether Escape was meant for it.
     escape: () => {
+      if (!preview.hidden) return closePreview(), true;
       if (!confirmBox.hidden) return closeConfirm(), true;
       if (!element.hidden) return close(), true;
       return false;

package/runtime/theme.base.css

@@ -1683,6 +1683,12 @@ body.edit-open #deck-edit { transform: none; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* A file's name shows the file — an image over the deck, the rest in a new
+   tab; the cursor and the underline are the whole affordance, the row stays a
+   row. */
+.deck-assets-list code.is-viewable { cursor: pointer; }
+.deck-assets-list code.is-image { cursor: zoom-in; }
+.deck-assets-list code.is-viewable:hover { color: var(--accent); text-decoration: underline; }
 .deck-assets-file {
   min-width: 0;
   font: 400 12px/1.5 var(--sans);
@@ -1691,11 +1697,24 @@ body.edit-open #deck-edit { transform: none; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.deck-assets-pct {
+.deck-assets-pct,
+.deck-assets-size {
   flex: 0 0 auto;
   font: 400 11px/1.5 var(--mono);
   color: var(--muted);
 }
+/* The row grows to the path and the size is pinned right of it, so a long name
+   truncates rather than pushing the buttons off the edge. */
+.deck-assets-list li code { flex: 1 1 auto; }
+/* Put there in this session — the row you are most likely reaching for. */
+.deck-assets-list li.is-fresh { background: color-mix(in srgb, var(--accent) 14%, transparent); }
+.deck-assets-none {
+  justify-content: center;
+  padding: 14px 10px;
+  font: 400 12px/1.5 var(--sans);
+  color: var(--muted);
+  background: none;
+}
 .deck-assets-list li.is-failed { background: color-mix(in srgb, #e5484d 16%, transparent); }
 .deck-assets-list li.is-failed .deck-assets-pct { color: #ff8589; }
 
@@ -1856,6 +1875,40 @@ body.edit-open #deck-edit { transform: none; }
   transform: scale(1.04);
 }
 
+/* The image preview — over everything the way the drop sheet is: the image is
+   the whole point while it is up, and a click anywhere puts it away. */
+.deck-assets-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 72;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--bg) 74%, transparent);
+  backdrop-filter: blur(8px);
+  cursor: zoom-out;
+}
+.deck-assets-preview[hidden] { display: none; }
+.deck-assets-preview figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.deck-assets-preview img {
+  max-width: min(1100px, 84vw);
+  max-height: 78vh;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  /* A card behind it, so a transparent PNG reads as an image and not a hole. */
+  background: var(--card);
+  box-shadow: 0 18px 60px color-mix(in srgb, #000 45%, transparent);
+}
+.deck-assets-preview figcaption code {
+  font: 500 12.5px/1.4 var(--mono);
+  color: var(--accent-2);
+}
+
 /* The open drawer's button wears the accent — it draws in nothing, like the
    pointer's; the id outweighs the generic armed-tool rule. */
 #tool-edit[aria-pressed='true'] {